[Noise 入門 #53] Liquid Metal（液体金属）とRaymarchingの融合 — 数式で「T-1000」を錬成する

// fragmentShader.glsl
uniform float uTime;
uniform vec2 uResolution;

varying vec2 vUv;

// --------------------------------------------------------
// 1. 3D Simplex Noise & FBM (これまでの知識の集大成)
// --------------------------------------------------------
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}

float snoise(vec3 v){
  // ... (Ashima Artsによる3D Simplex Noiseの高速実装) ...
  // ※コードの詳細は省略せずにそのまま記述して問題ありません
  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

  vec3 i  = floor(v + dot(v, C.yyy) );
  vec3 x0 = v - i + dot(i, C.xxx) ;

  vec3 g = step(x0.yzx, x0.xyz);
  vec3 l = 1.0 - g;
  vec3 i1 = min( g.xyz, l.zxy );
  vec3 i2 = max( g.xyz, l.zxy );

  vec3 x1 = x0 - i1 + 1.0 * C.xxx;
  vec3 x2 = x0 - i2 + 2.0 * C.xxx;
  vec3 x3 = x0 - 1.0 + 3.0 * C.xxx;

  i = mod(i, 289.0 );
  vec4 p = permute( permute( permute(
             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
           + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

  float n_ = 1.0/7.0; // N=7
  vec3  ns = n_ * D.wyz - D.xzx;

  vec4 j = p - 49.0 * floor(p * ns.z *ns.z);

  vec4 x_ = floor(j * ns.z);
  vec4 y_ = floor(j - 7.0 * x_ );

  vec4 x = x_ *ns.x + ns.yyyy;
  vec4 y = y_ *ns.x + ns.yyyy;
  vec4 h = 1.0 - abs(x) - abs(y);

  vec4 b0 = vec4( x.xy, y.xy );
  vec4 b1 = vec4( x.zw, y.zw );

  vec4 s0 = floor(b0)*2.0 + 1.0;
  vec4 s1 = floor(b1)*2.0 + 1.0;
  vec4 sh = -step(h, vec4(0.0));

  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

  vec3 p0 = vec3(a0.xy,h.x);
  vec3 p1 = vec3(a0.zw,h.y);
  vec3 p2 = vec3(a1.xy,h.z);
  vec3 p3 = vec3(a1.zw,h.w);

  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
  p0 *= norm.x;
  p1 *= norm.y;
  p2 *= norm.z;
  p3 *= norm.w;

  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
  m = m * m;
  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
}

float fbm(vec3 p) {
    float value = 0.0;
    float amplitude = 0.5;
    float frequency = 1.0;
    for (int i = 0; i < 4; i++) {
        value += amplitude * snoise(p * frequency);
        frequency *= 2.0;
        amplitude *= 0.5;
    }
    return value;
}

// --------------------------------------------------------
// 2. SDF (距離関数) と ノイズの融合
// --------------------------------------------------------
float map(vec3 p) {
    // 基本の球体のSDF
    float sphere = length(p) - 1.5;

    // 時間経過でうねるノイズを付加 (ここでLiquid Metal化する)
    float displacement = fbm(p * 1.5 + uTime * 0.5) * 0.8;

    return sphere + displacement;
}

// --------------------------------------------------------
// 3. 法線計算 (近傍のSDFの勾配から法線を捏造する)
// --------------------------------------------------------
vec3 getNormal(vec3 p) {
    float d = map(p);
    vec2 e = vec2(0.001, 0.0);
    vec3 n = d - vec3(
        map(p - e.xyy),
        map(p - e.yxy),
        map(p - e.yyx)
    );
    return normalize(n);
}

// --------------------------------------------------------
// 4. Raymarching メインループ
// --------------------------------------------------------
void main() {
    // 画面中央を(0,0)に正規化
    vec2 uv = (vUv - 0.5) * 2.0;
    uv.x *= uResolution.x / uResolution.y;

    // カメラとレイのセットアップ
    vec3 ro = vec3(0.0, 0.0, 4.0); // レイのスタート位置（カメラ）
    vec3 rd = normalize(vec3(uv, -1.0)); // レイの飛ぶ方向

    // マーチング処理
    float t = 0.0;
    vec3 p = vec3(0.0);
    for(int i = 0; i < 100; i++) {
        p = ro + rd * t;
        float d = map(p);
        if(d < 0.001 || t > 10.0) break; // 衝突または遠すぎたらループ抜け
        t += d;
    }

    // --------------------------------------------------------
    // 5. ライティングと金属表現 (クロムメッキのような反射)
    // --------------------------------------------------------
    vec3 color = vec3(0.0); // 背景色（黒）

    if(t < 10.0) {
        // 物体に衝突した場合
        vec3 normal = getNormal(p);

        // 疑似的な環境マップ反射（Matcapアプローチに近い計算）
        vec3 viewDir = normalize(ro - p);
        vec3 reflectDir = reflect(-viewDir, normal);

        // 周囲の擬似環境色（青と紫のサイバーなライティング）
        vec3 envColor = vec3(0.1, 0.3, 0.5) * max(0.0, reflectDir.y)
                      + vec3(0.5, 0.1, 0.3) * max(0.0, -reflectDir.y);

        // 強烈なハイライト（Specular）
        float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);

        // フレネル反射（エッジが明るくなる）
        float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 3.0);

        // 全てを合成して液体金属の輝きを作る
        color = envColor * 0.8 + vec3(1.0) * spec + vec3(0.8, 0.9, 1.0) * fresnel;
    }

    gl_FragColor = vec4(color, 1.0);
}

import * as THREE from 'three';

// 1. シーンとカメラの準備
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
camera.position.z = 1;

// 2. レンダラー
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 3. マテリアル（先ほどのGLSLを流し込む）
const material = new THREE.ShaderMaterial({
    vertexShader: `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = vec4(position, 1.0);
        }
    `,
    fragmentShader: document.getElementById('fragmentShader').textContent, // GLSLコード
    uniforms: {
        uTime: { value: 0.0 },
        uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    }
});

// 4. フルスクリーンの板ポリゴン
const geometry = new THREE.PlaneGeometry(2, 2);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 5. アニメーションループ
const clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
    material.uniforms.uTime.value = clock.getElapsedTime();
    renderer.render(scene, camera);
}
animate();

// リサイズ対応
window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    material.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);
});

// Before
float displacement = fbm(p * 1.5 + uTime * 0.5) * 0.8;

// After
float displacement = fbm(p * 0.5 + uTime * 0.5) * 0.8;

// Before
float displacement = fbm(p * 1.5 + uTime * 0.5) * 0.8;

// After
float displacement = fbm(p * 1.5 + uTime * 3.0) * 0.8;

// Before
float displacement = fbm(p * 1.5 + uTime * 0.5) * 0.8;

// After
float displacement = fbm(p * 1.5 + uTime * 0.5) * 2.0; // 0.8 -> 2.0