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>      
這將產生以下結果 -