第4回クリエイティブ・コーディング：React Three Fiberでシェーダーを召喚

/* 全要素の余計なマージンをリセット */
* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* スクロールバーを消す */
  background-color: #000; /* 読み込み前の背景を黒にしておく */
}

/* Canvas要素を画面いっぱいに固定 */
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

import React, { useMemo, useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";
import "./styles.css";

// --- 💡 1. 頂点シェーダー（基本はこのままでOK） ---
const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = vec4(position, 1.0);
  }
`;

// --- 🔥 2. フラグメントシェーダー（ここを書き換える！） ---
const fragmentShader = `
  precision mediump float;
  uniform float uTime;
  uniform vec2 uResolution;
  varying vec2 vUv;

  void main() {
    // Shadertoyのコードを貼る時は、ここから下を書き換える
    // 例：(vUv * 2.0 - 1.0) で座標の中心を真ん中にする処理など
    vec2 uv = (vUv * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
    
    vec3 color = vec3(uv.x, uv.y, abs(sin(uTime)));
    gl_FragColor = vec4(color, 1.0);
  }
`;

const ShaderPlane = () => {
  const meshRef = useRef();

 // 📦 1. JSからGLSLへ送る「荷物（Uniforms）」の準備
 // Reactは画面に変化があると「再レンダリング（再計算）」して、中身を新しく作り直す性質があります。
 // もし useMemo を使わずに直接書くと、レンダリングのたびにシェーダー側では「さっきまで使っていた変数が壊された！」とパニックになります。
 // この設定は1回しか作らないから、勝手に作り直して捨てないでね！と、Reactに釘を刺して記憶させるのが useMemo の重要な役割です。
 //空のカッコ「[]」が、最初の一回だけ作るという印
 const uniforms = useMemo(() => ({
  uTime: { value: 0.0 },
  uResolution: { value: new THREE.Vector2() },
}), []); 

  // 毎フレーム、荷物の中身を最新の状態に更新する（自動配線）
  useFrame((state) => {
    const { width, height } = state.size;
    uniforms.uTime.value = state.clock.getElapsedTime();
    uniforms.uResolution.value.set(width, height);
  });

  return (
    <mesh ref={meshRef}>
      <planeGeometry args={[2, 2]} />
      <shaderMaterial
        uniforms={uniforms}
        vertexShader={vertexShader}
        fragmentShader={fragmentShader}
      />
    </mesh>
  );
};

export default function App() {
  return (
    <Canvas>
      <ShaderPlane />
    </Canvas>
  );
}

const fragmentShader = `
uniform vec2 uResolution;
uniform float uTime;
varying vec2 vUv;

vec3 palette(float t) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.000, 0.333, 0.667);
    return a + b * cos(6.28318 * (c * t + d));
}

void main() {
    vec2 uv = (vUv * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
    vec2 uv0 = uv;
    vec3 finalColor = vec3(0.0);

    for (int i = 0; i < 4; i++) {
        float fi = float(i); 
        uv = fract(uv * 1.5) - 0.5;
        float d = length(uv) * exp(-length(uv0));

        vec3 col = palette(length(uv0) + fi * 0.4 + uTime * 0.4);

        d = sin(d * 8.0 + uTime) / 8.0;
        d = abs(d);
        d = pow(0.01 / d, 1.2);
        finalColor += col * d;
    }
    gl_FragColor = vec4(finalColor, 1.0);
}
`;