WebGL-スケーリング

この章では、WebGLを使用して三角形のスケールを変更する方法を示す例を取り上げます。

スケーリング

スケーリングは、オブジェクトのサイズを拡大または縮小することに他なりません。たとえば、三角形にサイズ[a、b、c]の頂点がある場合、頂点[2a、2b、2c]の三角形のサイズは2倍になります。したがって、三角形をスケーリングするには、各頂点にスケーリング係数を掛ける必要があります。特定の頂点をスケーリングすることもできます。

三角形をスケーリングするには、プログラムの頂点シェーダーで、均一なマトリックスを作成し、このマトリックスで座標値を乗算します。後で、対角位置（最後の対角位置1）にx、y、z座標のスケーリング係数を持つ4×4対角行列を渡します。

必要な手順

WebGLアプリケーションを作成して三角形を拡大縮小するには、次の手順が必要です。

ステップ1-キャンバスを準備し、WebGLレンダリングコンテキストを取得

このステップでは、* getContext（）*を使用してWebGLレンダリングコンテキストオブジェクトを取得します。

ステップ2-ジオメトリを定義し、バッファオブジェクトに格納します

三角形を描画しているため、三角形の3つの頂点を渡して、バッファーに保存する必要があります。

var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, ];

ステップ3-シェーダープログラムの作成とコンパイル

この手順では、頂点シェーダーおよびフラグメントシェーダープログラムを記述し、それらをコンパイルし、これらの2つのプログラムをリンクして結合プログラムを作成する必要があります。

頂点シェーダー-プログラムの頂点シェーダーで、3D座標を格納するためのベクター属性を定義します。それとともに、スケーリング係数を格納するために均一なマトリックスを定義し、最後に、これらの2つの値を乗算して、頂点の最終位置を保持する gl_position に割り当てます。

var vertCode =
   'attribute vec4 coordinates;' +
   'uniform mat4 u_xformMatrix;' +
   'void main(void) {' +
      ' gl_Position = u_xformMatrix * coordinates;' +
   '}';

フラグメントシェーダー-フラグメントシェーダーでは、フラグメントの色を gl_FragColor 変数に割り当てるだけです。

var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';

ステップ4-シェーダープログラムをバッファオブジェクトに関連付ける

この手順では、バッファーオブジェクトをシェーダープログラムに関連付けます。

ステップ5-必要なオブジェクトの描画

インデックスを使用して三角形を描画しているため、* drawArrays（）*メソッドを使用します。このメソッドには、考慮される頂点/要素の数を渡す必要があります。三角形を描画しているため、3をパラメーターとして渡します。

gl.drawArrays(gl.TRIANGLES, 0, 3);

例–三角形のスケーリング

次の例は、三角形をスケーリングする方法を示しています-

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

      <script>
        /*=================Creating a canvas=========================*/
         var canvas = document.getElementById('my_Canvas');
         gl = canvas.getContext('experimental-webgl');

        /*===========Defining and storing the geometry==============*/
         var vertices =  [
            -0.5,0.5,0.0,
            -0.5,-0.5,0.0,
            0.5,-0.5,0.0,
         ];

        //Create an empty buffer object and store vertex data

         var vertex_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);

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

        //Vertex shader source code
         var vertCode =
            'attribute vec4 coordinates;' +
            'uniform mat4 u_xformMatrix;' +
            'void main(void) {' +
               '  gl_Position = u_xformMatrix * coordinates;' +
            '}';

        //Create a vertex shader program object and compile it
         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vertShader, vertCode);
         gl.compileShader(vertShader);

        //fragment shader source code
         var fragCode =
            'void main(void) {' +
               '   gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
            '}';

        //Create a fragment shader program object and compile it
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(fragShader);

        //Create and use combiened shader program
         var shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertShader);
         gl.attachShader(shaderProgram, fragShader);
         gl.linkProgram(shaderProgram);

         gl.useProgram(shaderProgram);

        /*===================scaling==========================*/

         var Sx = 1.0, Sy = 1.5, Sz = 1.0;
         var xformMatrix = new Float32Array([
            Sx,   0.0,  0.0,  0.0,
            0.0,  Sy,   0.0,  0.0,
            0.0,  0.0,  Sz,   0.0,
            0.0,  0.0,  0.0,  1.0
         ]);

         var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix');
         gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

        /* ===========Associating shaders to buffer objects============*/
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

         var coordinatesVar = gl.getAttribLocation(shaderProgram, "coordinates");
         gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);
         gl.enableVertexAttribArray(coordinatesVar);

        /*=================Drawing the Quad========================*/
         gl.clearColor(0.5, 0.5, 0.5, 0.9);
         gl.enable(gl.DEPTH_TEST);

         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.viewport(0,0,canvas.width,canvas.height);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
      </script>
   </body>
</html>

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

Webgl-scaling

目次

WebGL-スケーリング

スケーリング

必要な手順

例–三角形のスケーリング