テックコード -web関連の情報サイト- 
はじめに
WebGLやThree.jsを使って、リッチでダイナミックなグラフィックスを作成する際、シェーダー（Shader）は非常に重要な役割を果たします。シェーダーは、グラフィックスカード上で実行されるプログラムで、ピクセルの色や頂点の位置を計算するために使用されます。本記事では、シェーダーの基本概念から、実践的な使い方、Three.jsとの統合方法までを丁寧に解説します。
1. シェーダーとは？
シェーダーは、コンピュータのGPU（グラフィックス処理装置）上で動作するプログラムです。シェーダーは、2Dや3Dグラフィックスのレンダリングプロセスの一部として、以下のような異なるタイプに分かれています。
- 頂点シェーダー（Vertex Shader）: 頂点データを処理し、3D空間内の位置を決定します。主にオブジェクトの変形やカメラ視点の調整を担当します。
- フラグメントシェーダー（Fragment Shader）: ピクセルごとの色やテクスチャを計算します。最終的に画面に表示される色を決定します。
2. シェーダーの基本的な構成
シェーダーは、以下の2つの主要なプログラムから成り立っています。
2.1 頂点シェーダーの例
/ vertex_shader.glsl
attribute vec3 position; // 頂点の位置
attribute vec4 color; // 頂点の色
varying vec4 vColor; // フラグメントシェーダーに渡す色
void main() {
gl_Position = vec4(position, 1.0); // 頂点の位置を設定
vColor = color; // 頂点の色をフラグメントシェーダーに渡す
}
このシェーダーでは、頂点の位置と色を受け取り、それをフラグメントシェーダーに渡しています。
2.2 フラグメントシェーダーの例
// fragment_shader.glsl
precision mediump float; // 精度指定
varying vec4 vColor; // 頂点シェーダーから渡された色
void main() {
gl_FragColor = vColor; // ピクセルの色を設定
}
フラグメントシェーダーでは、頂点シェーダーから渡された色を使用して、ピクセルの色を設定します。
3. Three.jsでのシェーダーの使用方法
Three.jsでは、カスタムシェーダーを作成して3Dシーンに追加することができます。以下に、Three.jsでシェーダーを使用する手順を示します。
3.1 Three.jsのセットアップ
まず、Three.jsをプロジェクトに追加します。以下のコマンドでThree.jsをインストールします。
npm install three
次に、Three.jsの基本的なシーンをセットアップします。
// index.js
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
3.2 カスタムシェーダーの作成
カスタムシェーダーを作成し、Three.jsのマテリアルに適用します。
// vertex shader
const vertexShader = `
attribute vec3 position;
attribute vec4 color;
varying vec4 vColor;
void main() {
gl_Position = vec4(position, 1.0);
vColor = color;
}
`;
// fragment shader
const fragmentShader = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
`;
// シェーダーマテリアルの作成
const shaderMaterial = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
vertexColors: true
});
3.3 ジオメトリとメッシュの作成
シェーダーを使用するジオメトリとメッシュを作成し、シーンに追加します。
const geometry = new THREE.BoxGeometry();
const colors = [];
for (let i = 0; i < geometry.attributes.position.count; i++) {
colors.push(Math.random(), Math.random(), Math.random());
}
geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
const cube = new THREE.Mesh(geometry, shaderMaterial);
scene.add(cube);
3.4 レンダリング
最後に、アニメーションループを作成し、シーンをレンダリングします。
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
4. 実践的なシェーダーの使い方
4.1 パーティクルシステム
シェーダーを使って、リアルタイムで動的に変化するパーティクルシステムを作成できます。パーティクルは、シェーダーを使って色や動きを制御することで、エフェクトやアニメーションを作成する際に便利です。
4.2 環境マッピング
環境マッピングを使用することで、物体の表面に環境の反射を加えることができます。シェーダーで環境マップを計算し、リアルな反射を実現します。
4.3 ポストプロセスエフェクト
ポストプロセスエフェクトでは、レンダリングされた画像に対して追加のエフェクトを適用します。例えば、ぼかしや色調補正、エッジ検出などの効果をシェーダーで実装できます。
5. まとめ
シェーダーは、グラフィックスプログラミングにおいて非常に強力なツールです。ReactやThree.jsを使用することで、シェーダーを簡単にプロジェクトに統合し、インタラクティブでダイナミックな3Dコンテンツを作成することができます。シェーダーの基本を理解し、実践的なアプリケーションで活用することで、よりリッチで魅力的なビジュアルを実現できます。
