<a href=” http://codepen.io/alaingalvan/full/ICasz”> Ver Codepen </a>
Depois de obter uma página inicial no Newgrounds para uma imagem do conceito, anunciei que estava trabalhando em um fan game de Dark Souls. Depois de trabalhar nisso por um tempo, eu queria liberar um pouco do que fiz e explicar como tudo funciona. Transferi o seguinte GLSL para Three.js, Game Maker Studio e agora Pixi.js. Tudo funciona da mesma maneira graças à magia do glsl. Então, vamos mergulhar no GLSL por trás do efeito godray! </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>
Aqui temos a função godray, que torna as coordenadas uv dependentes umas das outras. O que torna o efeito godray linear e dependente de um ângulo, em vez de apenas ruído perlin regular, é o uso de ambos os parâmetros dos UVs para a construção dovec3 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>
A partir daí, diminuo o efeito com o 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.