Webgl-sample-application
WebGL-サンプルアプリケーション
WebGLとWebGLパイプライン（グラフィックアプリケーションをレンダリングするための手順）の基本について説明しました。 この章では、サンプルアプリケーションを使用して、WebGLを使用して三角形を作成し、アプリケーションで実行される手順を観察します。
WebGLアプリケーションの構造
WebGLアプリケーションコードは、JavaScriptとOpenGLシェーダー言語の組み合わせです。
- CPUと通信するにはJavaScriptが必要です
- GPUとの通信にはOpenGLシェーダー言語が必要です。
サンプルアプリケーション
次に、WebGLを使用して2D座標を持つ単純な三角形を描画する方法を学ぶために、簡単な例を見てみましょう。
<!doctype html>
<html>
<body>
<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
<script>
/*Step1: Prepare the canvas and get WebGL context*/
var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');
/*Step2: Define the geometry and store it in buffer objects*/
var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];
//Create a new buffer object
var vertex_buffer = gl.createBuffer();
//Bind an empty array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
//Pass the vertices data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);
/*Step3: Create and compile Shader programs*/
//Vertex shader source code
var vertCode =
'attribute vec2 coordinates;' +
'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';
//Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);
//Compile the vertex shader
gl.compileShader(vertShader);
//Fragment shader source code
var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';
//Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);
//Compile the fragment shader
gl.compileShader(fragShader);
//Create a shader program object to store combined shader program
var shaderProgram = gl.createProgram();
//Attach a vertex shader
gl.attachShader(shaderProgram, vertShader);
//Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);
//Link both programs
gl.linkProgram(shaderProgram);
//Use the combined shader program object
gl.useProgram(shaderProgram);
/*Step 4: Associate the shader programs to buffer objects*/
//Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
//Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
//point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
//Enable the attribute
gl.enableVertexAttribArray(coord);
/*Step5: Drawing the required object (triangle)*/
//Clear the canvas
gl.clearColor(0.5, 0.5, 0.5, 0.9);
//Enable the depth test
gl.enable(gl.DEPTH_TEST);
//Clear the color buffer bit
gl.clear(gl.COLOR_BUFFER_BIT);
//Set the view port
gl.viewport(0,0,canvas.width,canvas.height);
//Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>それは次の結果を生成します-
上記のプログラムを注意深く観察すると、WebGLを使用して単純な三角形を描くために5つの連続した手順を実行しました。 手順は次のとおりです-
ステップ1-キャンバスを準備し、WebGLレンダリングコンテキストを取得します
現在のHTMLキャンバスオブジェクトを取得し、そのWebGLレンダリングコンテキストを取得します。
ステップ2-ジオメトリを定義し、バッファオブジェクトに保存します
頂点、インデックス、色などのジオメトリの属性を定義し、JavaScript配列に保存します。 次に、1つ以上のバッファーオブジェクトを作成し、データを含む配列をそれぞれのバッファーオブジェクトに渡します。 この例では、三角形の頂点をJavaScript配列に保存し、この配列を頂点バッファーオブジェクトに渡します。
ステップ3-シェーダープログラムの作成とコンパイル
頂点シェーダーおよびフラグメントシェーダープログラムを作成し、コンパイルし、これら2つのプログラムをリンクすることにより、結合プログラムを作成します。
ステップ4-シェーダープログラムをバッファオブジェクトに関連付ける
バッファーオブジェクトと結合されたシェーダープログラムを関連付けます。
ステップ5-必要なオブジェクト（三角形）の描画
この手順には、色のクリア、バッファビットのクリア、深度テストの有効化、ビューポートの設定などの操作が含まれます。 最後に、* drawArrays（）または drawElements（）*のいずれかのメソッドを使用して、必要なプリミティブを描画する必要があります。
これらのすべての手順については、このチュートリアルでさらに説明します。
