Pixi.js WebGL Godrays

<a href="http://codepen.io/alaingalvan/full/ICasz">View Codepen</a>

After getting a frontpage on Newgrounds for a concept screenshot, I announced I was working on a Dark Souls fan game. After working on it for a while, I wanted to release some of what Ive done, and explain how it all works. I've ported the following GLSL to Three.js, Game Maker Studio, and now Pixi.js. It all works the same thanks to the magic of glsl. So let's dive in to the GLSL behind the godray effect! </p>

vec4 godray(vec2 uv, float angle, float time) { float xx = cos(radians(angle)); float yy = sin(radians(angle)); vec3 dir = vec3((xx * uv.x) + (yy * uv.y), (xx * uv.x) + (yy * uv.y), time); float noise = turb(dir, vec3(480.0, 320.0, 32.0), 2.0, 0.5); noise = mix(noise, 0.0, 0.3); vec4 mist = vec4(noise, noise, noise, 1.0) * (1.0 - vUv.y); return mist; } </pre></code>

Here we have the godray function, which makes the uv coordinates dependant on each other. What makes the godray effect linear and dependant on an angle rather than just regular perlin noise, is the use of both parameters of the UVs for the construction of the vec3 dir</code>. this forces the function to behave diagonally since now both parameters are dependant on the uv.x</code> and uv.y</code>. From there some simple triginometry can be used to adjust the ratios of the parameters of the uv coordinates to get that rotation effect.</p>

From there I dim down the effect with the mix</code> function, which behaves similarly to lerping, where it interpoliates between the two varaibles acording to some ratio. Finally, I multiply the effect by the y coordinate of the UV to get the effect to cascade down.