WebGL 在桌面和 android phone 上的位置不同

Question

我目前正在尝试创建一个包含 WebGL canvas 的网站。一切正常，我渲染了我的飞机，但是当我在我的 samsung galaxy SIII mini 上打开我的网站时，飞机原点似乎不同

您可以在 http://portfolio.kamidesigns.be 查看网站 canvas 位于论文 -> Occluder simplification using planar sections

这里有一些图片可以说明问题所在。

桌面

手机

我手机上的平面位于右上角，虽然平面的顶点位置是

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

您的代码中有一堆拼写错误，导致无法正确创建顶点数组对象。这导致 "default values" 通过顶点管道进行馈送，从而导致在不同浏览器上出现不同的行为。

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

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

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

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

最后，在您的着色器中未使用 inNormal 属性，这导致 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 扩展名，例如我在 Samsung Galaxy Tab 2 上的库存浏览器不支持它（不是那么旧的设备）。

WebGL 在桌面和 android phone 上的位置不同

WebGL position different on desktop and android phone

android

webgl