ray-marching.js - Examples

1. Interactive Wave

マウスの動きに追従する動的な波のグラデーションシェーダーです。レイマーチング前の基本的な疎通テストとしても有効です。

<ray-marching>
  <script type="x-shader/x-fragment">
    precision mediump float;
    uniform float time;
    uniform vec2  mouse;
    uniform vec2  resolution;

    void main( void ) {
      vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
      float d = sin(length(p) * 8.0 - time * 3.0 + mouse.x * 5.0) * 0.5 + 0.5;
      vec3 color = vec3(0.1, 0.2, 0.8) * d + vec3(0.8, 0.1, 0.4) * (1.0 - d);
      color += vec3(0.0, 0.8, 0.5) * (1.0 - length(p));
      gl_FragColor = vec4(color, 1.0);
    }
  </script>
</ray-marching>

2. Classic 3D Spheres

レイマーチングによる3D空間の描画。床面と球体、基本的なディフューズ照明、床に落ちるソフトシャドウを実装しています。

<ray-marching>
  <script type="x-shader/x-fragment">
    // (Classic 3D Spheres with Shadows)
  </script>
</ray-marching>

3. Twisted Torus

SDF（符号付き距離関数）の変形処理。Torus形状に対してY軸に沿ったねじれ加工（Twist）を時間変化とともに適用しています。

<ray-marching>
  <script type="x-shader/x-fragment">
    // (Twisted Torus SDF implementation)
  </script>
</ray-marching>

4. Melting Metaballs

有機的な融合処理。3つの球体が `Smooth Minimum (smin)` 関数によってドロドロと融合・分裂するメタボールエフェクトです。

<ray-marching>
  <script type="x-shader/x-fragment">
    // (Melting Metaballs blended with smin)
  </script>
</ray-marching>