WebGL - 平移

上一頁
下一頁

到目前為止，我們討論瞭如何使用 WebGL 繪製各種形狀並在其中應用顏色。在本節中，我們將透過一個示例來演示如何平移三角形。

平移

平移是 WebGL 提供的**仿射變換**之一。使用平移，我們可以移動三角形（任何物件）在 xyz 平面上。假設我們有一個三角形 [a, b, c]，我們想將三角形移動到正 X 軸方向 5 個單位，正 Y 軸方向 3 個單位的位置。那麼新的頂點將是 [a+5, b+3, c+0]。這意味著要平移三角形，我們需要將平移距離 tx、ty、tz 加到每個頂點上。

由於這是一個**逐頂點操作**，我們可以在頂點著色器程式中執行它。

在頂點著色器中，除了屬性**座標**（儲存頂點位置）之外，我們定義一個統一變數來儲存平移距離 (x,y,z)。稍後，我們將此統一變數新增到座標變數中，並將結果賦值給**gl_Position**變數。

**注意** - 由於頂點著色器將在每個頂點上執行，因此三角形的全部頂點都將被平移。

平移三角形的步驟

建立 WebGL 應用以繪製三角形然後將其平移到新位置需要以下步驟。

步驟 1 - 準備畫布並獲取 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**，它儲存頂點的最終位置。

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

  • **片段著色器** - 在片段著色器中，我們只需將片段顏色賦值給變數 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);

示例 - 平移三角形

以下示例演示如何在 xyz 平面上平移三角形。

線上演示 
<!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(); 
			
         //Create a new buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);   
			
         //bind it to the current buffer			
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
			
         // Pass the buffer data
         gl.bindBuffer(gl.ARRAY_BUFFER, null);  
            
         /*========================Shaders============================*/
            
         //vertex shader source code 
         var vertCode =
            'attribute vec4 coordinates;' + 
            'uniform vec4 translation;'+
            'void main(void) {' +
               '  gl_Position = coordinates + translation;' +
            '}';
            
         //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);
   
         /* ===========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); 
   
         /* ==========translation======================================*/
         var Tx = 0.5, Ty = 0.5, Tz = 0.0;
         var translation = gl.getUniformLocation(shaderProgram, 'translation');
         gl.uniform4f(translation, Tx, Ty, Tz, 0.0);
 
         /*=================Drawing the riangle and transforming it========================*/ 

         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>

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

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