0

私はこのwebgl アプリケーション (360 パノラマ ビューアー) を持っています。これは正距円筒図法の画像を球体にラップし、その球体の中心にカメラを配置して現実世界の錯覚をシミュレートします。

デスクトップ ブラウザー (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