WebGL-サンプルアプリケーション

WebGLとWebGLパイプライン（グラフィックアプリケーションをレンダリングするための手順）の基本について説明しました。この章では、サンプルアプリケーションを使用して、WebGLを使用して三角形を作成し、アプリケーションで実行される手順を観察します。

WebGLアプリケーションの構造

WebGLアプリケーションコードは、JavaScriptとOpenGLシェーダー言語の組み合わせです。

CPUと通信するにはJavaScriptが必要です
GPUとの通信にはOpenGLシェーダー言語が必要です。

WebGLアプリケーション構造

サンプルアプリケーション

次に、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（）*のいずれかのメソッドを使用して、必要なプリミティブを描画する必要があります。

これらのすべての手順については、このチュートリアルでさらに説明します。

Webgl-sample-application

WebGL-サンプルアプリケーション

WebGLアプリケーションの構造

サンプルアプリケーション