WebGL平移

到目前爲止，我們討論瞭如何繪製各種形狀和使用 WebGL 應用它們的顏色。在本章中，我們將舉個例子來說明如何平移一個三角形。

平移

平移是由 WebGL 提供的仿射變換之一。使用平移，我們可以繼續在XYZ平面三角形(任何對象)。假設我們有一個三角形[A，B，C]，我們想的三角形移動到的位置上是5個單位向着X軸正和3個單位向正Y軸。然後將新的頂點。將[A +5，B +3，C +0]。這意味着，平移三角形，我們需要添加平移距離，比方說，tx, ty, tz 到每個頂點。

既然是每個頂點的操作，我們可以在頂點着色器程序實現它。

在頂點着色器，伴隨着屬性，座標(持有頂點位置)，我們定義了容納平移距離(X，Y，Z)變量。之來我們這個統一的變量添加到變量中的座標和分配結果到gl_Position 變量。

注 - 由於頂點着色器將在每個頂點上運行，三角形的所有頂點將被平移。

轉換一個三角形步驟

下面的步驟是必需的，以建立一個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 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 平面上平移三角形。

  <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.vertexAttribYiibaier(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>

這將產生以下結果 -

WebGL平移

WebGL教程

轉換一個三角形步驟