0

我有这个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

4

0 回答 0