WebGL - 回転: グラフィックスを生き生きとする

こんにちは、WebGLの志願者さんたち！今日は、コンピュータグラフィックスの中でも最もエキサイティングな部分之一である回転について深く掘り下げます。あなたの近所の親切なコンピュータ科学の先生として、私はあなたを魔法の回転三角形と回る形の世界に導きます。で、架空の3D眼鏡をかけて、始めましょう！

WebGL - Rotation

WebGLにおける回転の理解

コードに飛び込む前に、まずWebGLにおける回転とは何かを理解しましょう。あなたが紙飛行機を持っているとします。それを回転させると、空中的な向きが変わります。WebGLでは、同じことを数学的な精度で行います！

WebGLにおける回転は、形状を構成する頂点（点）を中央の軸の周りに位置を変えることを意味します。これはX軸、Y軸、Z軸、またはそれらの組み合わせで行うことができます。

マトリックスの魔法

さて、あなたは何を思っているでしょうか：「マトリックス？『マトリックス』映画のやつじゃないか？」確かに、少し似ていますが、とてもクールなものです！WebGLでは、効率的に回転を行うためにマトリックスを使用します。これが複雑に聞こえるかもしれませんが、ステップバイステップで説明します。

サンプル - 三角形の回転

簡単な例から始めましょう：三角形を回転させます。まずは基本的な三角形を作成し、それをバレエダンサーのように回転させます！

ステップ1: WebGL環境の設定

まず、WebGLコンテキストを設定する必要があります。以下は基本的なHTML構造です：

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
// ここにWebGLのコードを記述します
</script>

ステップ2: WebGLの初期化

次に、WebGLを初期化します：

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGLがサポートされていません');
return;
}

このコードは、キャンバス要素を取得し、WebGLコンテキストを取得しようとします。WebGLがサポートされていない場合、エラーメッセージが表示されます。

ステップ3: シェーダーの作成

シェーダーはGPU上で実行される特別なプログラムです。2種類が必要です：頂点シェーダーとフラグメントシェーダー。以下は簡単なセットです：

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
`;

頂点シェーダーは回転マトリックスを適用し、フラグメントシェーダーは三角形を赤色にします。

ステップ4: シェーダーのコンパイルとリンク

次に、シェーダーをコンパイルおよびリンクします：

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

このコードは、シェーダープログラムを作成し、頂点シェーダーとフラグメントシェーダーをアタッチしてリンクします。

ステップ5: 三角形の作成

次に、三角形を定義します：

const positions = [
0, 0.5,
-0.5, -0.5,
0.5, -0.5
];

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

これにより、原点に中心がある簡単な三角形が作成されます。

ステップ6: 回転の魔法

ここで本当の魔法が始まります。回転マトリックスを生成する関数を作成します：

function createRotationMatrix(angleInRadians) {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1
];
}

この関数は、ラジアン角を取り、3x3の回転マトリックスを返します。

ステップ7: 回転三角形のレンダリング

最後に、すべてを組み合わせて三角形を回転させます：

let angleInRadians = 0;

function render() {
angleInRadians += 0.01;

gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

const matrixLocation = gl.getUniformLocation(program, "u_matrix");
const matrix = createRotationMatrix(angleInRadians);
gl.uniformMatrix3fv(matrixLocation, false, matrix);

gl.drawArrays(gl.TRIANGLES, 0, 3);

requestAnimationFrame(render);
}

render();

この関数は以下のことを行います：

回転角を増加させます
キャンバスをクリアします
シェーダープログラムと属性を設定します
回転マトリックスを作成して適用します
三角形を描画します
次のアニメーションフレームを要求します

それで、回転する三角形ができました！

結論

おめでとうございます！あなたは刚刚、WebGLでの最初の回転形状を作成しました。これはまだ始まりです。これらの基本原則を使えば、複数の回転物体を含む複雑な3Dシーンを作成することができます。

最後に、ある生徒が言ったことを思い出します。「コンピュータグラフィックスは派手なソフトウェアだけだと思っていましたが、今はもっとデジタルな人形使いのようだと思っています！」そして彼女は正しかった – WebGLを使えば、あなた自身のデジタルな人形芝居の糸を引くことができます。

練習を続け、実験を続け、そして最も重要なのは、WebGLを楽しむことです。そうすれば、経験豊富な開発者さえも「すごい！」と言うような素晴らしい3Dビジュアライゼーションを作成できるようになるでしょう！

メソッド	説明
`createShader(gl, type, source)`	シェーダーを作成してコンパイルします
`createRotationMatrix(angleInRadians)`	2D回転マトリックスを生成します
`render()`	回転する三角形をレンダリングします
`gl.clearColor(r, g, b, a)`	キャンバスのクリア色を設定します
`gl.clear(gl.COLOR_BUFFER_BIT)`	キャンバスをクリアします
`gl.useProgram(program)`	現在のシェーダープログラムを設定します
`gl.getAttribLocation(program, name)`	属性の位置を取得します
`gl.enableVertexAttribArray(location)`	ヴェクター属性配列を有効にします
`gl.bindBuffer(gl.ARRAY_BUFFER, buffer)`	バッファをバインドします
`gl.vertexAttribPointer(location, size, type, normalized, stride, offset)`	ヴェクターデータのレイアウトを指定します
`gl.getUniformLocation(program, name)`	ユニフォーム変数の位置を取得します
`gl.uniformMatrix3fv(location, transpose, value)`	マトリックスユニフォーム値を設定します
`gl.drawArrays(mode, first, count)`	配列データからプリミティブをレンダリングします
`requestAnimationFrame(callback)`	次のアニメーションフレームを要求します

ハッピーコーディング、そしてあなたの三角形が常に正しい方向に回転することを祈っています！

Credits: Image by storyset