WebGL縮放


在本章中,我們將舉個例子來說明如何使用WebGL修改一個三角形的縮放比例。

縮放

縮放只不過是增加或減少的對象的大小。例如,如果一個三角形的大小的頂點是[a,b,c],然後三角形的頂點[2a,2b,2c]將擴大兩倍大小。因此,縮放一個三角形,要乘以每個頂點的縮放比例。還可以擴展一個特定的頂點。
縮放一個三角形,在該程序的頂點着色器,我們產生均勻的矩陣並用該矩陣乘以座標值。之後,我們傳遞 x,y 的比例因子爲 4×4 的對角矩陣和z座標中的對角位置(最近對角位置1)。

所需的步驟

下面的步驟來創建一個 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步 - 創建和編譯着色器程序
在這一步中,你需要編寫的頂點着色器和片段着色器程序,編譯它們,並通過連接這兩個程序將創建一個合併程序。
  • 頂點着色器 - 在程序的頂點着色器,我們定義一個向量屬性來存儲三維座標。除了它,我們定義了一個統一的矩陣存儲縮放係數,最後,我們乘這兩個值並將其分配給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);' +'}';
片段着色器- 在片段着色器,我們只分配碎片顏色到 gl_FragColor 變量。
在這一步,我們關聯着色器程序到緩衝器的對象。
第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縮放