雲レイヤー

雲レイヤー Volume Shader の「Preset overview」では、Low-iteration 3D noise cloud accumulation. を中心に説明します。shader の複雑さ、ブラウザの描画経路、GPU の安定性を読むための内容です。

実測ではブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定します。動作が重い場合は複雑度を下げるか停止してください。

エディターで開く手法

性能要因

3D noise

Volume Shader BM の結果を比較する際は、ブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定してください。条件が変わると FPS と frame time も変わります。

Loop count

Fill rate

編集可能なパラメータ

Step count

Density threshold

Noise drift speed

#version 300 es
precision highp float;
out vec4 outColor; in vec2 v_uv; uniform float u_time; uniform vec2 u_resolution;

float hash(vec3 p){ p = fract(p*0.3183099 + 0.1); p *= 17.0; return fract(p.x*p.y*p.z*(p.x+p.y+p.z)); }
float noise(vec3 x){ vec3 p=floor(x); vec3 f=fract(x); f=f*f*(3.0-2.0*f);
  float n = mix(mix(mix(hash(p+vec3(0,0,0)), hash(p+vec3(1,0,0)), f.x),
                    mix(hash(p+vec3(0,1,0)), hash(p+vec3(1,1,0)), f.x), f.y),
                mix(mix(hash(p+vec3(0,0,1)), hash(p+vec3(1,0,1)), f.x),
                    mix(hash(p+vec3(0,1,1)), hash(p+vec3(1,1,1)), f.x), f.y), f.z);
  return n;
}

void main(){
  vec2 uv=v_uv*2.0-1.0; uv.x*=u_resolution.x/u_resolution.y;
  vec3 ro=vec3(0.0,0.0,-1.8); vec3 rd=normalize(vec3(uv,1.0));
  float t=0.0, dens=0.0; vec3 col=vec3(0.0);
  for(int i=0;i<64;i++){
    vec3 p=ro+rd*t; float h = noise(p*1.5 + vec3(0.0,0.0,u_time*0.15));
    dens += smoothstep(0.55, 0.9, h)*0.03; t+=0.03; if(t>3.0) break;
  }
  col = mix(vec3(0.05,0.07,0.11), vec3(0.9), clamp(dens,0.0,1.0));
  outColor = vec4(col,1.0);
}