Redirected: You are redirected from /webgl/webgl_class/webgl_helloworld .

WebGLのHelloWorld

前回のWebGLプログラムはCanvasの色を初期化するわずか数行のものでした。

今回は、真っ黒な背景の上に赤い三角形ポリゴンを一つ表示してみましょう。いわばWebGLのHelloWorldと言えそうです。

次のような絵が出ます。

image.png

JavaScriptコード全文

最初にJavaScriptソースコードの全体を示しましょう。WebGLのHelloWorldは、大体これくらいの行数が必要になります。読みやすさを犠牲にすれば30行ほどに縮まりそうですが、普通の書き方ならこのようなものでしょう。

// WebGLレンダリングコンテキストの取得関数 const initWebGL = (canvasId)=> { const canvas = document.getElementById(canvasId); const gl = canvas.getContext("webgl2"); return gl; }; // シェーダーの準備関数 const initShaders = (gl, vertexShaderCode, fragmentShaderCode) => { const program = gl.createProgram(); const vertexShader = gl.createShader(gl.VERTEX_SHADER); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(vvertexShaders, vertexShaderCode); gl.shaderSource(fragmentShader, fragmentShaderCode); gl.compileShader(vertexShader); gl.compileShader(fragmentShader); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); gl.bindAttribLocation(program, 0, "position"); gl.enableVertexAttribArray(0); }; // 位置情報の配列を受け取ってWebGLにセットする関数 const initGeometry = (gl, positions) => { gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); }; // WebGLの描画命令を出す関数 const draw = (gl) => { // 画面のクリアを命令する gl.clear(gl.COLOR_BUFFER_BIT); // 描画を命令する gl.drawArrays(gl.TRIANGLES, 0, 3); // ディスプレイの垂直同期に合わせた周期(60FPS以上が多い)で繰り返しdraw()を呼ぶ requestAnimationFrame(draw); }; // 処理の起点(C言語におけるmain関数のようなもの) (()=>{ // GLSLシェーダーコードを定義 // 頂点シェーダー(頂点単位の処理) const vertexShader = `#version 300 es in vec3 position; void main() { gl_Position = vec4(position, 1.0); } `; // フラグメントシェーダー(ピクセル単位の処理) const fragmentShader = `#version 300 es layout(location = 0) out vec4 outColor; void main() { outColor = vec4(1.0, 0.0, 0.0, 1.0); } `; // ポリゴン情報を定義 var positions = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]; const gl = initWebGL('world'); initShaders(gl, vertexShader, fragmentShader); initGeometry(gl, positions); // Canvas初期化色を設定 gl.clearColor(1, 0, 0, 1); // 描画の開始 draw(); })();

JavaScriptコーディングサイトJsFiddle版のサンプルはこちらです。

以降で、コードの各部分についてくわしく見ていきます。

次のページへ