我有这个webgl 应用程序(360 全景查看器),它在一个球体上包裹一个 equirectangular 图像,将相机定位在该球体的中心以模拟真实世界的错觉。
它适用于桌面浏览器(chrome,ff),但不适用于 android 6.0.1 google chrome(结果是黑屏),并且适用于设备的内置浏览器。然而,如果不应用纹理,一切都可以正常工作,我可以看到一个简单的基元(球体、立方体、金字塔等)。
创建此类视图的代码部分:
function load360View(r, center, lats, longs, textureImage) {
let vertexBuffer = gl.createBuffer(),
uvBuffer = gl.createBuffer(),
indexBuffer = gl.createBuffer(),
texture = gl.createTexture(),
vertices = [],
texCoords = [],
indices = [];
let theta, phi, x, y, z;
for (let i = 0; i <= lats; i++) {
theta = i * Math.PI/lats;
for (let j = 0; j <= longs; j++) {
phi = j * 2 * Math.PI/longs;
x = Math.sin(theta) * Math.cos(phi);
y = Math.cos(theta);
z = Math.sin(theta) * Math.sin(phi);
vertices.push(r * x + center.x);
vertices.push(r * y + center.y);
vertices.push(r * z + center.z);
texCoords.push( (j / longs) );
texCoords.push( (i / lats) );
}
}
for (let i = 0; i < lats; i++) {
for (let j = 0; j < longs; j++) {
let first = (i * (longs + 1)) + j;
let second = first + longs + 1;
indices.push(first);
indices.push(second);
indices.push(first + 1);
indices.push(second);
indices.push(second + 1);
indices.push(first + 1);
}
}
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(vPositionLoc);
gl.vertexAttribPointer(vPositionLoc, 3, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
gl.enableVertexAttribArray(vtexCoordLoc);
gl.vertexAttribPointer(vtexCoordLoc, 2, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
if (isPowerOf2(textureImage.width) && isPowerOf2(textureImage.height)) {
gl.generateMipmap(gl.TEXTURE_2D);
} else {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
}
return {
vertexBuffer: vertexBuffer,
indexBuffer: indexBuffer,
uvBuffer: uvBuffer,
indices: indices,
texture : texture
}
}
这是 android 的 chrome 浏览器的错误还是与实际应用程序相关的错误,这意味着应该更改某些内容?
ps
我也在 Firefox 桌面上得到这个错误(不是每晚构建):
错误:WebGL:texImage2D:选择的格式/类型导致了昂贵的重新格式化:0x1908/0x1401