WebGL position different on desktop and android phone -

i'm trying create website contains webgl canvas. worked fine , got plane rendered, when opened website on samsung galaxy siii mini, planes origin point seems different

you can check website @ http://portfolio.kamidesigns.be canvas located under thesis -> occluder simplification using planar sections

here images show what's wrong.

desktop

cellphone

the plane on cellphone located on top right corner although positions of vertices of plane are

var positions = new float32array([-0.5,  0.5, 0,                                    -0.5, -0.5, 0,                                     0.5,  0.5, 0,                                     0.5, -0.5, 0]); 

if can me, appreciated.

you have bunch of typos in code prevent vertex array object being created properly. leads "default values" being fed through vertex pipeline resulting in different behavior on different browsers.

firstly, change vao initialization ( missed var vao initialization):

function createvao() {     var vao = gl.extoesvertexarrayobject.createvertexarrayoes();     gl.extoesvertexarrayobject.bindvertexarrayoes(vao);     return vao; } 

secondly, in storedatainattributelist calls need supply result of gl.getattriblocation attributenumber. thing make code stay correct if modify shader.

storedatainattributelist(program.aposition, 3, positions); storedatainattributelist(program.atexturecoords, 2, texturecoords); storedatainattributelist(program.anormals, 3, normals); 

and lastly, in shader innormal attrib not used results in gl.getattriblocation(program, "innormal"); returning -1

you may want safe-guard storedatainattributelist against such cases this:

function storedatainattributelist(attributenumber, coordinatesize, data) {        if( attributenumber >= 0 )    {        vbo = gl.createbuffer();        gl.bindbuffer(gl.array_buffer, vbo);                         gl.bufferdata(gl.array_buffer, data, gl.static_draw);        gl.enablevertexattribarray(attributenumber);        gl.vertexattribpointer(attributenumber, coordinatesize, gl.float, false, 0, 0);        gl.bindbuffer(gl.array_buffer, null);    } } 

after making these 3 changes page started displaying same results on android/pc browser.

my final advice avoid using oes_vertex_array_object extensions e.g. stock browser on samsung galaxy tab 2 doesn't support ( not old device ).