WebGL 翻译问题

Question

我是 WebGL 的新手。我正在尝试使用矩阵运算来尝试各种操作，例如旋转、反射、缩放和平移。我正在使用“交互式计算机图形学，使用 WebGL（第七版）的自上而下的方法”一书和辅助库来加载着色器。

所有这些都可以正常工作除了翻译。我正在绘制一个简单的 2D 三角形（现在使用剪辑坐标来保持简单）并尝试将三角形从 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 文件中的代码： 变量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 :-)