[Next.js #43] Procedural Aurora — 極地の夜空に揺らめくプロシージャルなオーロラを実装

// オーロラ用の Vertex Shader
const auroraVertexShader = `
  varying vec3 vWorldPosition;
  void main() {
    vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

// オーロラ用の Fragment Shader
const auroraFragmentShader = `
  // ※ここに Simplex 4D Noise (snoise) と FBM (fbm4d) の関数を定義します（省略）

  varying vec3 vWorldPosition;

  uniform float uTime;
  uniform vec3 uAuroraBottomColor;
  uniform vec3 uAuroraTopColor;
  uniform float uAuroraIntensity;
  uniform float uAuroraScale;
  uniform float uAuroraSpeed;
  uniform vec3 uLightDir;

  void main() {
    vec3 pos = vWorldPosition;
    float time = uTime * uAuroraSpeed;

    // 1. 空間全体をゆっくり歪ませる（Domain Warping）
    // Y成分に 0.0 を指定し、縦方向の歪みを防ぐ
    vec3 warpOffset = vec3(
        fbm4d(vec4(pos + time, 0.0)),
        0.0,
        fbm4d(vec4(pos - time, 0.0))
    );

    // 2. 歪んだ座標を引き伸ばす（Stretching）
    vec3 auroraPos = pos + warpOffset * 2.0;
    auroraPos.y *= 0.05; // Y軸のスケールを極端に小さくし、縦スジを作る

    // 3. オーロラのベース密度を計算（マイナス値をカット）
    float auroraDensity = max(0.0, fbm4d(vec4(auroraPos * uAuroraScale, time)));

    // 4. マスク処理
    // 極地マスク：北極（1.0）と南極（-1.0）の両方で白くなるよう abs() を使用
    float polarMask = smoothstep(0.7, 0.95, abs(normalize(pos).y));

    // 昼夜マスク：オーロラは夜の領域（daylightがマイナス）でだけ光らせる
    float daylight = dot(normalize(pos), normalize(uLightDir));
    float nightMask = smoothstep(0.1, -0.2, daylight);

    // すべてのマスクを掛け合わせて最終的な強度を決定
    float finalAurora = auroraDensity * polarMask * nightMask;

    // 5. 高さ（ノイズの強さ）に応じたカラーグラデーション
    vec3 auroraColor = mix(uAuroraBottomColor, uAuroraTopColor, auroraDensity);

    // 加算合成用の出力（RGBに強度を掛け合わせる）
    gl_FragColor = vec4(auroraColor * finalAurora * uAuroraIntensity, finalAurora);
  }
`;

// 共通の球体ジオメトリ（地形や雲と同じものを使用）
const geometry = new THREE.SphereGeometry(2, 192, 192);

// オーロラマテリアルの生成
const auroraMaterial = new THREE.ShaderMaterial({
  vertexShader: auroraVertexShader,
  fragmentShader: auroraFragmentShader,
  uniforms: uniforms, // 先ほど定義したパラメータ群を渡す
  transparent: true,
  depthWrite: false, // 奥のオブジェクト（雲や地形）を描画し続けるために必須
  blending: THREE.AdditiveBlending, // 加算合成：光の足し算を行う
});

// オーロラメッシュの生成と配置
const auroraMesh = new THREE.Mesh(geometry, auroraMaterial);
auroraMesh.scale.setScalar(1.15); // 雲(1.075)のさらに外側に配置
scene.add(auroraMesh);

const folderAurora = gui.addFolder("Procedural Aurora");
folderAurora.add(params, "auroraIntensity", 0.0, 5.0, 0.1).name("Intensity").onChange(v => uniforms.uAuroraIntensity.value = v);
folderAurora.add(params, "auroraScale", 0.5, 30.0, 0.1).name("Scale").onChange(v => uniforms.uAuroraScale.value = v);
folderAurora.add(params, "auroraSpeed", 0.0, 1.0, 0.01).name("Speed").onChange(v => uniforms.uAuroraSpeed.value = v);
folderAurora.addColor(params, "auroraBottomColor").name("Bottom Color (Green)").onChange(v => uniforms.uAuroraBottomColor.value.set(v));
folderAurora.addColor(params, "auroraTopColor").name("Top Color (Purple)").onChange(v => uniforms.uAuroraTopColor.value.set(v));