WebGL 波動 拡散

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

波動や拡散で、何か良い初心者向けの解説とかあったら知りたいです。

自分はこのお二人の記事を参考にしました。

拡散はパーティクルのものでいいですか。

あれは単に移動量にglslの擬似乱数入れているだけです。

参考コード

uniform int clicked;

            void main() {
                vec2 uv = gl_FragCoord.xy / resolution.xy;
                float idParticle = uv.y * resolution.x + uv.x;
                vec3 vel = texture2D( textureVelocity, uv ).xyz;
                if(clicked == 0){
                    vel.x = 0.0;
                    vel.y = 0.0;
                    vel.z = 0.0;
                } else {
                    float a = fract(dot(gl_FragCoord.xy, vec2(2.067390879775102, 12.451168662908249))) - 0.5;
                    float s = a * (6.182785114200511 + a*a * (-38.026512460676566 + a*a * 53.392573080032137));
                    float t = fract(s * 43758.5453);
                    vel.x = (t * 2.0 - 1.5) * 20.0;
                    vel.y = (t * 2.0 - 1.5) * 20.0;
                    vel.z = (t * 2.0 - 1.5) * 20.0;
                }
                gl_FragColor = vec4( vel, 1.0 );
            }