WebGL-描画モード

前の章（第12章）では、WebGLを使用して三角形を描画する方法について説明しました。三角形に加えて、WebGLはさまざまな他の描画モードをサポートしています。この章では、WebGLがサポートする描画モードについて説明します。

モードパラメータ

メソッドの構文を見てみましょう-* drawElements（）とdraw * Arrays（）。

void drawElements(enum mode, long count, enum type, long offset);

void drawArrays(enum mode, int first, long count);

明確に観察すると、両方のメソッドがパラメーター mode を受け入れます。このパラメーターを使用すると、プログラマーはWebGLで描画モードを選択できます。

WebGLが提供する描画モードを次の表にリストします。

Sr.No.	Mode & Description
1	gl.POINTS 一連のポイントを描画します。
2	gl.LINES 接続されていない一連のラインセグメント（個々のライン）を描画します。
3	gl.LINE_STRIP 接続された一連の線分を描画します。
4	gl.LINE_LOOP 接続された一連の線分を描画します。また、最初と最後の頂点を結合してループを形成します。
5	gl.TRIANGLES 一連の別々の三角形を描画します。
6	gl.TRIANGLE_STRIP 接続された一連の三角形をストリップ形式で描画します。
7	gl.TRIANGLE_FAN ファンのように最初の頂点を共有する一連の接続された三角形を描画します。

例– 3本の平行線を引く

次の例は、 gl.LINES を使用して3本の平行線を描く方法を示しています。

<!doctype html>
<html>
   <body>
      <canvas width = "300" height = "300" id = "my_Canvas"></canvas>

      <script>
        /*======= Creating a canvas =========*/

         var canvas = document.getElementById('my_Canvas');
         var gl = canvas.getContext('experimental-webgl');

        /*======= Defining and storing the geometry ======*/

         var vertices = [
            -0.7,-0.1,0,
            -0.3,0.6,0,
            -0.3,-0.3,0,
            0.2,0.6,0,
            0.3,-0.3,0,
            0.7,0.6,0
         ]

        //Create an empty buffer object
         var vertex_buffer = gl.createBuffer();

        //Bind appropriate array buffer to it
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

        //Pass the vertex data to the buffer
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        //Unbind the buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, null);

        /*=================== Shaders ====================*/

        //Vertex shader source code
         var vertCode =
            'attribute vec3 coordinates;' +
            'void main(void) {' +
               ' gl_Position = vec4(coordinates, 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 fragmentt shader
         gl.compileShader(fragShader);

        //Create a shader program object to store
        //the 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 the programs
         gl.linkProgram(shaderProgram);

        //Use the combined shader program object
         gl.useProgram(shaderProgram);

        /*======= Associating shaders 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, 3, gl.FLOAT, false, 0, 0);

        //Enable the attribute
         gl.enableVertexAttribArray(coord);

        /*============ Drawing the 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 and depth buffer
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        //Set the view port
         gl.viewport(0,0,canvas.width,canvas.height);

        //Draw the triangle
         gl.drawArrays(gl.LINES, 0, 6);

        //POINTS, LINE_STRIP, LINE_LOOP, LINES,
        //TRIANGLE_STRIP,TRIANGLE_FAN, TRIANGLES
      </script>
   </body>
</html>

この例を実行すると、次の出力が生成されます-

描画モード

上記のプログラムで、* drawArrays（）*のモードを次の描画モードのいずれかに置き換えると、毎回異なる出力が生成されます。

Drawing Modes	Outputs
LINE_STRIP	Line Strip
LINE_LOOP	Line Loop
TRIANGLE_STRIP	Triangle Strip
TRIANGLE_FAN	Triangle Fan
TRIANGLES	Triangles

Webgl-modes-of-drawing

目次

WebGL-描画モード

モードパラメータ

例– 3本の平行線を引く

描画モード