WebGL翻譯問題

Question

我是WebGL的新手。我正在嘗試使用矩陣運算來嘗試旋轉，反射，縮放和平移等各種操作。我正在使用本書「交互式計算機圖形學，WebGL（第七版）的自頂向下方法」和幫助程序庫來加載着色器。

所有這些工作都很好除了翻譯。我繪製了一個簡單的二維三角形（現在使用剪輯座標來保持簡單），並嘗試將三角形從x軸的原點-0.5和y軸的-0.5轉換爲遠離原點的三角形。

這是在頂點着色器中的代碼：

<script id="vertex-shader" type="x-shader/x-vertex"> 
attribute vec4 vPosition; 

void main() 
{  
    mat4 translationMatrix = mat4( 
    1, 0, 0, -0.5, 
    0, 1, 0, -0.5, 
    0, 0, 1, 0, 
    0, 0, 0, 1);  

    gl_Position = translationMatrix * vPosition; 
} 
</script> 

然而，該三角形是傾斜的，因此，我期望沒有翻譯。

這是我的js文件中的代碼： var gl;

window.onload = function init() 
{ 
    var canvas = document.getElementById("gl-canvas"); 
    gl = WebGLUtils.setupWebGL(canvas); 
    if (!gl) { 
     alert("WebGL isn't available"); 
    } 

    var vertices = [-0.2, -0.2, 0, 0.2, 0.2, -0.2]; 

    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(1.0, 1.0, 1.0, 1.0); 

    // Load shaders and initialize attribute buffers 
    var program = initShaders(gl, "vertex-shader", "fragment-shader"); 

    gl.useProgram(program); 

    // Load the data into the GPU 
    var bufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); 
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); 

    // Associate out shader variables with our data buffer 
    var vPosition = gl.getAttribLocation(program, "vPosition"); 
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vPosition); 

    render(); 
}; 

function render() 
{ 
    gl.clear(gl.COLOR_BUFFER_BIT);  
    gl.drawArrays(gl.TRIANGLES, 0, 3); 
} 

這是翻譯後：

這種方法的工作原理：

頂點着色器：

<script id="vertex-shader" type="x-shader/x-vertex"> 
    attribute vec4 vPosition; 
    uniform mat4 translationMatrix; 
    void main() 
    {  
     gl_Position = translationMatrix * vPosition; 
    } 
</script> 

...和js文件：

var gl; 
var translationMatrix; 
var translationMatrixLoc;  

window.onload = function init() 
{ 
    var canvas = document.getElementById("gl-canvas"); 
    gl = WebGLUtils.setupWebGL(canvas); 
    if (!gl) { 
     alert("WebGL isn't available"); 
    } 

    var vertices = [-0.2, -0.2, 0, 0.2, 0.2, -0.2]; 

    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(1.0, 1.0, 1.0, 1.0); 

    // Load shaders and initialize attribute buffers 
    var program = initShaders(gl, "vertex-shader", "fragment-shader"); 

    gl.useProgram(program); 

    // Load the data into the GPU 
    var bufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); 
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); 

    // Associate out shader variables with our data buffer 
    var vPosition = gl.getAttribLocation(program, "vPosition"); 
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vPosition); 

    // Works for translation 
    translationMatrix = mat4();   
    var d = vec3(-0.5, -0.5, 0.0); 
    translationMatrix = mult(translationMatrix, translate(d)); 

    // Debug print the matrix contents 
    matToStr(translationMatrix); 

    /* 
    // It prints out as 
    1, 0, 0, -0.5 
    0, 1, 0, -0.5 
    0, 0, 1, 0 
    0, 0, 0, 1 
    */ 

    translationMatrixLoc = gl.getUniformLocation(program, "translationMatrix"); 
    gl.uniformMatrix4fv(translationMatrixLoc, false, flatten(translationMatrix)); 

    render(); 
}; 

function render() 
{ 
    gl.clear(gl.COLOR_BUFFER_BIT);  
    gl.drawArrays(gl.TRIANGLES, 0, 3); 
} 

function matToStr(matrix) { 
    var output = ""; 
    for (var i = 0; i<4; i++) { 
     output = output + matrix[i] + "\r\n"; 
    } 
    console.log(output); 
} 

爲什麼會發生這種情況？當我在.js文件中創建翻譯矩陣並將其作爲統一變量發送到頂點着色器時，它可以工作。

Answer 1

的GLSL mat4()參數是column-major，所以你可能想要寫

mat4 translationMatrix = mat4( 
1, 0, 0, 0, // first column 
0, 1, 0, 0, // second column 
0, 0, 1, 0, // third column 
-0.5, -0.5, 0, 1); // translation goes here :-)