こんにちは、コーダーのdanです。表現したいことを思い通りに実装できるのは、かっこいいですよね。
今回は、表現の幅を広げることができるThree.jsについて、紹介したいと思います。
まずは、どういうことができるのかを知るためにポータルサイトを見てみましょう。
今回は、何度も挫折しては勉強し直しているシェーダーについて深掘りしていきます。
シェーダーを学ぶことで、以下のようなアニメーションを画像一枚で実装することができます。
シェーダーとは
シェーダーは、GPUに送信されるGLSLで記述されたプログラムです。
ジオメトリの各頂点を配置し、そのジオメトリのピクセルを色付けするために使用されます。
ジオメトリとは、3Dグラフィックスにおけるオブジェクトの形状や構造を定義するデータのことです。
シェーダーを作成するには、マテリアルを作成する必要があります。
マテリアルには、頂点シェーダーとフラグメントシェーダーが必要です。
const material = new THREE.RawShaderMaterial({
vertexShader: `
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
attribute vec3 position;
void main()
{
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
vec4 viewPosition = viewMatrix * modelPosition;
vec4 projectedPosition = projectionMatrix * viewPosition;
gl_Position = projectedPosition;
}
`,
fragmentShader: `
precision mediump float;
void main()
{
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
})オブジェクトの位置、回転、スケールを表現し、これを適用することで、オブジェクトがシーン全体（ワールド空間内）でどう表示されるかを計算します。
modelMatrixを使って、オブジェクト内の頂点をワールド座標系に変換できます。
オブジェクト自体の座標系（ローカル座標系）での頂点位置です。
最後の要素が 1.0 であると、位置（空間内の具体的な点）を表します。
最後の要素が 0.0 であると、方向を表します。
シーン全体の座標系（ワールド座標系）のオブジェクトをカメラ座標系に変換するために使われます。
オブジェクトが遠くにあるほど小さく、近くにあるほど大きく見えるという「遠近感」を実現します。
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
vec4 viewPosition = viewMatrix * modelPosition;
vec4 projectedPosition = projectionMatrix * viewPosition;
gl_Position = projectedPosition;modelPositionには、シーン全体の座標系（ワールド座標）での頂点の位置が格納され、この式では、3Dシーン内のオブジェクトの位置や形状をカメラから見た視点で調整し、最終的にディスプレイに描画するための計算をしています。
