opengl es - WebGL translation issue -

i new webgl. experimenting matrix operations try various operations rotation, reflection, scaling , translation. using book "interactive computer graphics, top-down approach webgl (seventh edition)" , helper libraries load shaders.

all of these work fine except translation. drawing simple 2d triangle (using clip coordinates keep things simple) , trying translate triangle away origin -0.5 in x-axis , -0.5 in y-axis.

this code in 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, triangle skewed , not translated expected.

this code in 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 , initialize attribute buffers     var program = initshaders( gl, "vertex-shader", "fragment-shader" );      gl.useprogram( program );      // load data 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 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 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> 

... , 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 , initialize attribute buffers     var program = initshaders( gl, "vertex-shader", "fragment-shader" );      gl.useprogram( program );      // load data 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 our data buffer      var vposition = gl.getattriblocation( program, "vposition" );     gl.vertexattribpointer( vposition, 2, gl.float, false, 0, 0 );     gl.enablevertexattribarray( vposition );      // works translation     translationmatrix = mat4();              var d = vec3(-0.5, -0.5, 0.0);       translationmatrix = mult(translationmatrix, translate(d));      // debug print matrix contents     mattostr(translationmatrix);      /*     // prints out      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 = "";     (var = 0; i<4; i++) {         output = output + matrix[i] + "\r\n";     }     console.log(output); } 

why happening? when create translation matrix in .js file , send through vertex shader uniform variable works.

the glsl mat4() arguments column-major, want 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 :-)