- Updated Tweet
Shaderを描くための準備
- 頂点シェーダー
- フラグメントシェーダー
- react-three-fiber
本記事ではシェーダーコードを描くための準備をする。
シェーダーコードを描くにはいくつか選択肢があるが、本サイトでは基本的にReact Three Fiberを使用する。ざっくり以下のようなコードを書いている。
import { Canvas } from '@react-three/fiber';
// 視野角からCameraのZ軸の距離を計算
// CanvasのサイズにPlaneオブジェクトを合わせる
const calcDistFromFov = (fov: number): number => {
const fovRad = (fov / 2) * (Math.PI / 180);
return 2 / 2 / Math.tan(fovRad);
};
const App = () => {
return (
<Canvas
camera={{
fov: 60,
near: 0.1,
far: 1000,
position: [0, 0, calcDistFromFov(60)],
}}
>
<mesh>
<planeGeometry args={[2, 2, 64, 64]} />
{/* vertexShader と fragmetSahader を渡す */}
<shaderMaterial
vertexShader={`...`}
fragmentShader={`...`}
/>
</mesh>
</Canvas>
)}
マテリアルとジオメトリについては以下のドキュメントを参照。
ハローワールドしてみる
とりあえずハローワールドということで最初のシェーダーを書いてみる。一旦細かいことは置いておいて頂点シェーダー（Vertex Shader）とフラグメントシェーダー（Fragment Shader）を次のように記述した。
void main () {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}
void main () {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
実行結果は以下になる。
vertexShader
fragmentShader
黒色のCanvasが表示された。これが本サイトにおける最初のシェーダーコードになる。以上でシェーダーを描くための準備ができた。
セグメント
ちなみにPlaneGeometryに渡している値を確認するとわかるが、このジオメトリは縦横にそれぞれ64分割されている。wireframeオブションをtrueにしてみるとわかりやすい。
vertexShader
fragmentShader
ワイヤーフレーム状態にすることセグメントの数が確認できた。