WebGL - 縮放

上一頁
下一頁

在本章中，我們將透過一個示例演示如何使用 WebGL 修改三角形的縮放。

縮放

縮放就是增大或減小物件的大小。例如，如果一個三角形的頂點大小為 [a,b,c]，那麼頂點為 [2a, 2b, 2c] 的三角形將是其大小的兩倍。因此，要縮放三角形，您必須將每個頂點乘以縮放因子。您也可以縮放特定的頂點。

要縮放三角形，在程式的頂點著色器中，我們建立一個統一矩陣並將座標值與該矩陣相乘。稍後，我們傳遞一個 4×4 對角矩陣，該矩陣在對角位置（最後一個對角位置為 1）具有 x、y、z 座標的縮放因子。

所需步驟

建立 WebGL 應用程式以縮放三角形需要以下步驟。

步驟 1 - 準備 Canvas 並獲取 WebGL 渲染上下文

在此步驟中，我們使用 getContext() 獲取 WebGL 渲染上下文物件。

步驟 2 - 定義幾何體並將其儲存在緩衝區物件中

由於我們正在繪製三角形，因此我們必須傳遞三角形的三個頂點，並將它們儲存在緩衝區中。

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

步驟 3 - 建立和編譯著色器程式

在此步驟中，您需要編寫頂點著色器和片段著色器程式，編譯它們，並透過連結這兩個程式建立一個組合程式。

  • 頂點著色器 - 在程式的頂點著色器中，我們定義一個向量屬性來儲存 3D 座標。除此之外，我們定義一個統一矩陣來儲存縮放因子，最後，我們將這兩個值相乘並將其分配給 gl_position，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>

如果執行此示例，它將產生以下輸出 -

列印頁面
上一頁
下一頁
廣告