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

import * as THREE from 'three';

// -----------------------------------------------------------
// 1. 舞台装置（Renderer）の準備
// -----------------------------------------------------------
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio); // 高精細ディスプレイ対応
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// -----------------------------------------------------------
// 2. 舞台（Scene）とカメラ（Camera）
// -----------------------------------------------------------
const scene = new THREE.Scene();

// 今回は「板」を画面いっぱいに映すだけなので、
// 座標 (-1, 1) の範囲を映す特殊なカメラを使います
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

// -----------------------------------------------------------
// 3. 役者（Mesh）＝ 形（Geometry）＋ 魔法の肌（Material）
// -----------------------------------------------------------
// 画面全体を覆う 2x2 の板
const geometry = new THREE.PlaneGeometry(2, 2);

const material = new THREE.ShaderMaterial({
  // 頂点シェーダー：板を画面の隅々まで広げる設定
  vertexShader: `
    void main() {
      gl_Position = vec4(position, 1.0);
    }
  `,

  // 🔥【ここが Shadertoy のコードを貼り付ける場所！】🔥
  fragmentShader: `
    void main() {
      // 翻訳したコードをここに！ 
      // 例：オレンジ色で塗りつぶす
      gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
    }
  `
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// -----------------------------------------------------------
// 4. 【重要】リサイズ対策：画面の大きさが変わったら追いかける
// -----------------------------------------------------------
window.addEventListener('resize', () => {
  // ブラウザのサイズを取得
  const width = window.innerWidth;
  const height = window.innerHeight;

  // レンダラー（描画装置）のサイズを更新
  renderer.setSize(width, height);

  // カメラの比率などは今回 Orthographic なので固定でOKですが、
  // 通常の3D（PerspectiveCamera）ならここでもっと複雑な更新をします
});

// -----------------------------------------------------------
// 5. 上映開始（アニメーションループ）
// -----------------------------------------------------------
function animate() {
  // 1秒間に60回、自分自身を呼び出し続ける
  requestAnimationFrame(animate);

  // 描画！
  renderer.render(scene, camera);
}

animate();

/* 全要素の余計なマージンをリセット */
* {
  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>
  );
}