WebGL translation issue

Question

I am new to WebGL. I am experimenting with the matrix operations to try various operations like rotation, reflection, scaling and translation. I am using the book "Interactive Computer Graphics, A top-down approach with WebGL (Seventh Edition)" and helper libraries to load the shaders.

All of these work fine except translation. I am drawing a simple 2D triangle (using clip coordinates for now to keep things simple) and trying to translate the triangle away from the origin -0.5 in the x-axis and -0.5 in the y-axis.

This is the code in the vertex shader:

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

However, the triangle is skewed and not translated as I expected.

This is the code in my js file: 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 );
}

This is after translation:

This approach works:

Vertex shader:

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

... and js file:

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);
}

Why is this happening? When I create the translation matrix in the .js file and send it through to the vertex shader as a uniform variable it works.

if it works one way and not another, maybe you should give us both ? — Guiroux
Good point - I've added the working example where the matrix is generated in the js file. I've also added the console.log output as a code comment in the second, working example — Will777
to locate the origin of the problem, I think you should translate only one axis at a time, and watch the result for the 3 axis — Guiroux
you might find these articles useful. The go over the basics of matrix math starting in 2D because it's easier and progressing to 3D — gman
Thanks gman, great link - one of the better explanations of the math behind transformations — Will777

Paul-Jan Paul-Jan · Accepted Answer · 2016-02-08T12:33:53

The GLSL mat4() arguments are column-major, so you probably want to write

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 :-)

WebGL translation issue

1 Answers