縮放只不過是增加或減少的對(duì)象的大小。例如，如果一個(gè)三角形的大小的頂點(diǎn)是[a,b,c]，然后三角形的頂點(diǎn)[2a，2b，2c]將擴(kuò)大兩倍大小。因此，縮放一個(gè)三角形，要乘以每個(gè)頂點(diǎn)的縮放比例。還可以擴(kuò)展一個(gè)特定的頂點(diǎn)。

縮放一個(gè)三角形，在該程序的頂點(diǎn)著色器，我們產(chǎn)生均勻的矩陣并用該矩陣乘以坐標(biāo)值。之后，我們傳遞 x，y 的比例因子為 4×4 的對(duì)角矩陣和z坐標(biāo)中的對(duì)角位置(最近對(duì)角位置1)。

所需的步驟

下面的步驟來創(chuàng)建一個(gè) WebGL 應(yīng)用程序來擴(kuò)展三角形。

第1步 - 準(zhǔn)備Canvas和獲取 WebGL 渲染上下文

在此步驟中，我們使用 getContext()得到 WebGL 渲染上下文對(duì)象。

第2步 - 定義幾何并將其存儲(chǔ)在緩沖區(qū)對(duì)象

由于我們畫一個(gè)三角形，我們必須通過三角形的三個(gè)頂點(diǎn)，并將它們存儲(chǔ)在緩沖區(qū)中。

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

第3步 - 創(chuàng)建和編譯著色器程序

在這一步中，你需要編寫的頂點(diǎn)著色器和片段著色器程序，編譯它們，并通過連接這兩個(gè)程序?qū)?chuàng)建一個(gè)合并程序。

頂點(diǎn)著色器 - 在程序的頂點(diǎn)著色器，我們定義一個(gè)向量屬性來存儲(chǔ)三維坐標(biāo)。除了它，我們定義了一個(gè)統(tǒng)一的矩陣存儲(chǔ)縮放系數(shù)，最后，我們乘這兩個(gè)值并將其分配給gl_position 保存頂點(diǎn)的最終位置。

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 變量。

在這一步，我們關(guān)聯(lián)著色器程序到緩沖器的對(duì)象。

第5步 - 繪制所需的對(duì)象

由于我們使用索引繪制三角形，這里使用 drawArrays()方法。該方法必須通過被視為對(duì)頂點(diǎn)/元件的數(shù)目。由于我們畫一個(gè)三角形，將傳遞3作為一個(gè)參數(shù)。

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

示例 - 縮放三角形

下面的例子演示了如何擴(kuò)展三角形 -

<!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>

這將產(chǎn)生以下結(jié)果 -

上一篇：WebGL繪制點(diǎn)下一篇：WebGL Context上下文

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

WebGL縮放

縮放

所需的步驟

示例 - 縮放三角形