[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds

"use client";

import React, { useRef, useMemo } from "react";
import { extend, useFrame, useLoader } from "@react-three/fiber";
import * as THREE from "three";
import { Water } from "three/addons/objects/Water.js";

// 1. three.js のクラスを R3F コンポーネントとして登録
// これにより <water /> タグが使用可能になります
extend({ Water });

export default function Ocean() {
  const ref = useRef<any>();

  // 2. 波の模様（法線マップ）を読み込む
  const waterNormals = useLoader(
    THREE.TextureLoader,
    "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/waternormals.jpg"
  );

  // テクスチャを繰り返す設定（無限の広がりを表現するために必須）
  waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;

  // 3. 設定値のメモ化
  const config = useMemo(
    () => ({
      textureWidth: 512,
      textureHeight: 512,
      waterNormals,
      sunDirection: new THREE.Vector3(),
      sunColor: 0xffffff,
      waterColor: 0x001e0f, // 深い海の色
      distortionScale: 3.7, // 波の歪み具合
      fog: true,
    }),
    [waterNormals]
  );

  // 海面のジオメトリ（巨大な平面）
  const geom = useMemo(() => new THREE.PlaneGeometry(10000, 10000), []);

  useFrame((state, delta) => {
    if (ref.current) {
      // 4. uniform 'time' を更新して波を動かす
      // 公式の Water シェーダーは time uniform を持っています
      ref.current.material.uniforms["time"].value += delta * 0.5;
    }
  });

  // args は new Water(geom, config) の引数として渡されます
  return <water ref={ref} args={[geom, config]} rotation-x={-Math.PI / 2} />;
}

const CloudMaterial = {
  uniforms: {
    uTime: { value: 0 },
    uThreshold: { value: 0.45 }, // 雲の切れ間（Levaで制御）
    uScale: { value: 0.05 },     // 雲の細かさ（Levaで制御）
    uSunPosition: { value: new THREE.Vector3(100, 20, 100) },
  },
  vertexShader: `
    varying vec3 vWorldPosition;
    void main() {
      // ワールド座標を Fragment Shader に渡す
      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
      vWorldPosition = worldPosition.xyz;
      gl_Position = projectionMatrix * viewMatrix * worldPosition;
    }
  `,
  fragmentShader: `
    varying vec3 vWorldPosition;
    uniform float uTime;
    uniform float uThreshold;
    uniform float uScale;
    uniform vec3 uSunPosition;

    // --- Noise & FBM Functions ---
    // 乱数生成器
    float hash(float n) { return fract(sin(n) * 43758.5453123); }

    // 3D Noise Function: 空間の密度を決定する基礎
    float noise(vec3 x) {
      vec3 p = floor(x);
      vec3 f = fract(x);
      f = f * f * (3.0 - 2.0 * f);
      float n = p.x + p.y * 57.0 + 113.0 * p.z;
      return mix(mix(mix(hash(n + 0.0), hash(n + 1.0), f.x),
                     mix(hash(n + 57.0), hash(n + 58.0), f.x), f.y),
                 mix(mix(hash(n + 113.0), hash(n + 114.0), f.x),
                     mix(hash(n + 170.0), hash(n + 171.0), f.x), f.y), f.z);
    }

    // Fractal Brownian Motion (3 Octaves): 複雑なディテールを作る
    float fbm(vec3 p) {
      float f = 0.0;
      f += 0.5000 * noise(p); p = p * 2.02;
      f += 0.2500 * noise(p); p = p * 2.03;
      f += 0.1250 * noise(p);
      return f;
    }

    void main() {
      vec3 rayOrigin = cameraPosition;
      vec3 rayDirection = normalize(vWorldPosition - cameraPosition);

      float depth = 0.0;
      float opacity = 0.0;
      vec3 color = vec3(0.0);

      // --- Raymarching Loop ---
      // 視線方向に最大50歩進んでサンプリングする
      for(int i = 0; i < 50; i++) {
        vec3 p = rayOrigin + rayDirection * depth;

        // 1. 座標に風(uTime)とスケール(uScale)を適用
        // 時間経過で座標をずらすことで、雲が流れる表現になる
        vec3 windPos = p * uScale + vec3(uTime * 0.1, 0.0, uTime * 0.05);
        float d = fbm(windPos);

        // 2. 密度関数の調整 (閾値で雲の形を削る)
        // uThreshold 未満の薄いノイズを切り捨てて「雲の塊」だけを残す
        d = smoothstep(uThreshold, uThreshold + 0.2, d);

        // 3. 箱の端をフェードアウト (Soft Edges)
        // 箱の境界でパツッと切れないように、端に行くほど透明にする
        float edgeFade = smoothstep(500.0, 300.0, length(p.xz)) * smoothstep(25.0, 5.0, abs(p.y - 40.0));
        d *= edgeFade;

        // 4. 蓄積 (Accumulation)
        if (d > 0.01) {
          float transmittance = exp(-d * 0.8); // Beer's Law (濃いほど暗くなる)
          opacity += d * 0.15;

          // 密度に応じて色を混ぜる（薄いところは青っぽく、濃いところは白く）
          color += mix(vec3(0.5, 0.6, 0.7), vec3(1.0), d) * transmittance;
        }

        // Early Exit: 不透明度が1.0を超えたら奥は見えないので計算打ち切り
        if (opacity >= 1.0) break;

        depth += 2.0; // Step Size: 一歩の大きさ
      }

      gl_FragColor = vec4(color, opacity);
    }
  `,
};

// ... imports ...

function VolumetricClouds({ cloudThreshold, cloudScale }) {
  const meshRef = useRef<THREE.Mesh>(null!);

  useFrame((state) => {
    if (meshRef.current) {
      const mat = meshRef.current.material as THREE.ShaderMaterial;

      // 時間の更新（風を吹かせる）
      mat.uniforms.uTime.value = state.clock.getElapsedTime();

      // Levaの値をシェーダーへ直接転送
      // これにより React の再レンダリングを発生させずに数値を反映できる
      if (mat.uniforms.uThreshold) mat.uniforms.uThreshold.value = cloudThreshold;
      if (mat.uniforms.uScale) mat.uniforms.uScale.value = cloudScale;
    }
  });

  return (
    <mesh ref={meshRef} position={[0, 40, 0]}>
      {/* 雲の描画領域となる巨大なボックス */}
      {/* 視錐台カリングで消えないよう、十分な大きさが必要 */}
      <boxGeometry args={[1000, 50, 1000]} />

      {/* カメラが中に入っても描画されるよう BackSide を指定 */}
      <shaderMaterial args={[CloudMaterial]} transparent side={THREE.BackSide} />
    </mesh>
  );
}

export default function SeaAndSkyPage() {
  // Leva UI の設定: 雲の量と細かさを調整
  const { cloudThreshold, cloudScale } = useControls("Cloud Settings", {
    cloudThreshold: { value: 0.45, min: 0.2, max: 0.8, step: 0.01 },
    cloudScale: { value: 0.05, min: 0.01, max: 0.2, step: 0.01 },
  });

  return (
    <div style={{ width: "100vw", height: "100vh", background: "#000" }}>
      <Canvas camera={{ position: [0, 15, 60], fov: 60 }}>
        {/* カメラ操作とパフォーマンス計測 */}
        <OrbitControls makeDefault />
        <Stats />

        {/* 環境光と空の基本色 */}
        <Sky sunPosition={[100, 20, 100]} />
        <ambientLight intensity={0.5} />

        {/* テクスチャ読み込み待ちのための Suspense */}
        {/* Waterコンポーネント内で useLoader を使っているため必須 */}
        <Suspense fallback={null}>
          <Water />
        </Suspense>

        <VolumetricClouds cloudThreshold={cloudThreshold} cloudScale={cloudScale} />
      </Canvas>
    </div>
  );
}