WebGL - スケーリング：入門ガイド
こんにちは、WebGL開発者志望の方々！今日は、WebGLにおけるスケーリングの興味深い世界に飛び込みます。プログラミングが初めての方でも心配しないでください。私は_years_の教室で使用してきた同じような注意と忍耐を持って、それぞれのステップをガイドします。一緒にこのエキサイティングな旅に出発しましょう！
WebGLでのスケーリングとは？
コードに飛び込む前に、まずコンピュータグラフィックスの文脈でスケーリングが何を意味するかを理解しましょう。お気に入りのトイフィギュアがあるとします。スケーリングは、そのフィギュアを大きくしたり小さくしたりしながらその形を保つ魔法の杖のようなものです。WebGLでは、私たちの3Dオブジェクトにこの魔法をかけられます！
スケーリングの重要性
スケーリングは、現実的で動的な3Dシーンを作成するために非常に重要です。以下のようなことができます：
- オブジェクトのサイズをシーンに合わせて調整する
- オブジェクトが成長したり縮小したりするアニメーションを作成する
- 複雑なモデルの適切なプロポーションを保つ
WebGLでのスケーリングの手順
WebGLでオブジェクトをスケーリングするためには、以下の手順を踏む必要があります。それぞれを分解してみましょう：
| ステップ | 説明 |
|---|---|
| 1. スケーリングマトリックスを作成 | WebGLにオブジェクトをどのようにスケーリングするかを伝える特別なマトリックスを作成する |
| 2. モデルマトリックスと乗算 | スケーリングマトリックスをオブジェクトの既存のモデルマトリックスと結合する |
| 3. シェーダーに渡す | この新しいマトリックスをシェーダープログラムに送信する |
| 4. ヴェクターシェーダーで適用 | シェーダーがこのマトリックスを使用して各頂点の位置を調整する |
これらの手順が複雑に聞こえるかもしれませんが、例で詳細に見ていきましょう！
例 – 三角形をスケーリング
学びを実際に応用して、シンプルな三角形をスケーリングしてみましょう。基本的なWebGLセットアップから始めて、スケーリング機能を追加します。
ステップ1: WebGLコンテキストの設定
まず、WebGLコンテキストを設定します。以下のようにします：
const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGLがサポートされていません');
return;
}このコードは、キャンバス要素を見つけてWebGLコンテキストを作成します。アートを作る前にキャンバスと絵筆を準備するようなものです！
ステップ2: ヴェクターシェーダーの定義
次に、ヴェクターシェーダーを作成します。ここでスケーリングの魔法が起こります：
const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
vec3 position = u_matrix * vec3(a_position, 1);
gl_Position = vec4(position.xy, 0, 1);
}
`;このシェーダーは、各頂点の位置をマトリックスと乗算してスケーリングします。頂点にどのように移動するかの指示を与えるようなものです。
ステップ3: フラグメントシェーダーの定義
フラグメントシェーダーは、三角形の色を決定します：
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 = new Float32Array([
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, positions, gl.STATIC_DRAW);これらの座標はシンプルな三角形を定義します。グラフに点をプロットして形を描くようなものです。
ステップ6: スケーリングの実装
次はエキサイティングな部分 – 三角形をスケーリングします！スケーリングマトリックスを作成する関数を使用します：
function createScaleMatrix(scaleX, scaleY) {
return new Float32Array([
scaleX, 0, 0,
0, scaleY, 0,
0, 0, 1
]);
}
// 例: 三角形を2倍のサイズにスケーリング
const scaleMatrix = createScaleMatrix(2, 2);このマトリックスは、WebGLにオブジェクトをどのように伸ばしたり縮めたりするかの指示を与えるものです。
ステップ7: スケーリングされた三角形のレンダリング
最後に、すべてを組み合わせてスケーリングされた三角形をレンダリングします：
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 matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
gl.uniformMatrix3fv(matrixUniformLocation, false, scaleMatrix);
gl.drawArrays(gl.TRIANGLES, 0, 3);このコードは、スケーリングマトリックスを適用し、三角形を描画します。アートを準備した後でやっと作品を公開するようなものです！
結論
おめでとうございます！あなたは初めてのWebGL三角形をスケーリングしました。スケーリングは、WebGLで適用できる多くの変換のうちの1つです。あなたが進むにつれて、スケーリングを回転や移動などと組み合わせて複雑で動的な3Dシーンを作成する方法を学ぶでしょう。
練習は完璧を生みますので、さまざまなスケーリング値や形状で実験してみてください。次の大規模なビデオゲームや3Dウェブアプリケーションがここから始まるかもしれません！
ハッピーコーディング、そしてあなたのWebGLオブジェクトがいつも新しい高さにスケーリングしますように！
Credits: Image by storyset