Signed distance field density source

Fixed upper-bound ray-marching loop

Adaptive step size based on local density

Camera-space aspect correction with u_resolution

霧の球体

霧の球体 Volume Shader の「Preset overview」では、Orbiting fog around a sphere via simple raymarch. を中心に説明します。shader の複雑さ、ブラウザの描画経路、GPU の安定性を読むための内容です。

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

エディターで開く手法

性能要因

Ray steps

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

Adaptive stepping

Resolution

編集可能なパラメータ

Sphere radius

Density multiplier

Step distance

#version 300 es
precision highp float;

out vec4 outColor;
in vec2 v_uv;

uniform float u_time;
uniform vec2 u_resolution;

// Simple fake volumetric fog via raymarch toward a sphere
float sdSphere(vec3 p, float r) { return length(p) - r; }

float map(vec3 p) {
  // Central sphere as density source
  float d = sdSphere(p, 0.7);
  return d;
}

vec3 rayDir(vec2 uv, float fov) {
  vec2 xy = uv * 2.0 - 1.0;
  xy.x *= u_resolution.x / u_resolution.y;
  float z = 1.0 / tan(radians(fov) * 0.5);
  return normalize(vec3(xy, z));
}