桌面和Android手机上的WebGL位置不同

Question

我目前正在尝试创建一个包含WebGL画布的网站。一切都很好，我得到了我的飞机渲染，但当我在我的三星Galaxy SIII迷你上打开我的网站时，飞机起点似乎是不同的

您可以在http://portfolio.kamidesigns.be查看网站 画布位于论文 - ＆gt;使用平面截面简化封堵器

以下是一些显示错误的图片。

桌面

手机

我手机上的飞机位于右上角，但飞机顶点的位置是

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

如果有人可以帮助我，我们将非常感激。

Answer 1

你的代码中有一堆拼写错误，可以防止正确创建顶点数组对象。这导致通过顶点管道输入“默认值”，导致不同浏览器的行为不同。

首先，将您的VAO初始化更改为此（您错过了var vao初始化）：

function createVAO()
{
    var vao = gl.extOESVertexArrayObject.createVertexArrayOES();
    gl.extOESVertexArrayObject.bindVertexArrayOES(vao);
    return vao;
}

其次，在storeDataInAttributeList来电中，您需要为gl.getAttribLocation提供attributeNumber的结果。如果修改着色器，这样可以使代码保持正确。

storeDataInAttributeList(program.aPosition, 3, positions);
storeDataInAttributeList(program.aTextureCoords, 2, textureCoords);
storeDataInAttributeList(program.aNormals, 3, normals);

最后，在您的着色器中，未使用inNormal attrib导致gl.getAttribLocation(program, "inNormal");返回-1

您可能希望保护您的storeDataInAttributeList免受这样的情况：

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

进行这3次更改后，您的页面开始在android / pc浏览器上显示相同的结果。

我的最后建议是避免使用OES_vertex_array_object扩展名，例如我在三星Galaxy Tab 2上的股票浏览器不支持它（不是旧设备）。