Three.jsと組み合わせて使う 「シェーダー（Shader）」 は、3D表現や特殊なアニメーションの核になる技術です。初心者にもわかるように、丁寧に分解して解説します。
🎨 そもそも「シェーダー」とは？
GPU上で実行されるプログラムで、「どう見えるか（色、形、動き）」を決めるものです。
たとえば：
種類役割主な記述言語🟢 Vertex Shader頂点（形）の位置を計算するGLSL🔵 Fragment Shaderピクセルの色を決めるGLSL
GLSL（OpenGL Shading Language）というC言語に似た専用のコードで書きます。
🧠 シェーダーの基本構成
以下は最もシンプルなシェーダーの例：
🔷 Vertex Shader（形状）
// 位置をそのまま返す void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }
copy
🔶 Fragment Shader（色）
// 赤い色で塗る void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // RGBA 赤 }
copy
✨ Three.jsとの連携方法
Three.jsでは ShaderMaterial を使ってシェーダーを適用します。
const material = new THREE.ShaderMaterial({ vertexShader: vertexShaderCode, fragmentShader: fragmentShaderCode, uniforms: { uTime: { value: 0.0 } } });
copy
※uniforms はCPUからGPUに値を渡す手段（アニメーションや時間制御などに使う）
🔁 動きをつけたい場合（例：時間で色が変化）
// fragmentShader.glsl uniform float uTime; void main() { float r = abs(sin(uTime)); float g = abs(sin(uTime + 1.0)); float b = abs(sin(uTime + 2.0)); gl_FragColor = vec4(r, g, b, 1.0); }
copy
そしてJS側で時間を更新：
material.uniforms.uTime.value = performance.now() / 1000;
copy
💡 どんなことに使える？
表現使用例
🌊 波紋水面、布の揺れ
🔥 炎・煙炎、雲、パーティクル
🌈 グラデーションインタラクティブな背景
💥 爆発エフェクトロゴ分解、退場演出
🧠 ノイズ表現動く地形、抽象芸術
🚀 初心者が始めやすい学習ステップ
GLSLの基礎を覚える（vec2, sin, cos, timeなど）
既存のShaderToyやThree.js例を真似る
uniformを使ってJSと連携
アニメーションの追加