渦巻き煙
渦巻き煙 Volume Shader の「Preset overview」では、2D noise-based swirling smoke pattern. を中心に説明します。shader の複雑さ、ブラウザの描画経路、GPU の安定性を読むための内容です。
実測ではブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定します。動作が重い場合は複雑度を下げるか停止してください。
性能要因
Noise layers
Volume Shader BM の結果を比較する際は、ブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定してください。条件が変わると FPS と frame time も変わります。
Coordinate warping
Volume Shader BM の結果を比較する際は、ブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定してください。条件が変わると FPS と frame time も変わります。
No ray loop
Volume Shader BM の結果を比較する際は、ブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定してください。条件が変わると FPS と frame time も変わります。
編集可能なパラメータ
Twirl strength
Volume Shader BM の結果を比較する際は、ブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定してください。条件が変わると FPS と frame time も変わります。
Noise scale
Volume Shader BM の結果を比較する際は、ブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定してください。条件が変わると FPS と frame time も変わります。
Smoke threshold
Volume Shader BM の結果を比較する際は、ブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定してください。条件が変わると FPS と frame time も変わります。
#version 300 es
precision highp float;
out vec4 outColor;
in vec2 v_uv;
uniform float u_time; uniform vec2 u_resolution;
float hash(vec2 p){p=fract(p*vec2(123.34,345.45));p+=dot(p,p+34.345);return fract(p.x*p.y);}
float noise(vec2 p){ vec2 i=floor(p); vec2 f=fract(p); f=f*f*(3.0-2.0*f);
float a=hash(i), b=hash(i+vec2(1,0)), c=hash(i+vec2(0,1)), d=hash(i+vec2(1,1));
return mix(mix(a,b,f.x), mix(c,d,f.x), f.y);
}
void main(){
vec2 uv = v_uv;
vec2 p = (uv*2.0-1.0);
p.x *= u_resolution.x/u_resolution.y;
float r = length(p);
float ang = atan(p.y,p.x) + 0.8*sin(u_time*0.5) + 2.5*r;
vec2 q = vec2(cos(ang), sin(ang))*r*1.5 + 0.15*u_time;
float n = noise(q*3.0) + 0.5*noise(q*6.0);
float smoke = smoothstep(0.35, 0.9, n);
vec3 col = mix(vec3(0.05,0.08,0.12), vec3(0.8,0.9,1.0), smoke);
outColor = vec4(col,1.0);
}