Question

我已更新为FireFox35，以下代码不再有效：

    var ctx = renderer2.getContext("experimental-webgl",{preserveDrawingBuffer: true}) || renderer2.getContext("webgl",{preserveDrawingBuffer: true});
    renderer2.render(scene2, camera2, renderTarget);
    var arr = new Uint8Array( 4 * 1024 * 1024);
    ctx.readPixels(0, 0, 1024, 1024, ctx.RGBA, ctx.UNSIGNED_BYTE, arr);

返回的阵列是完全黑色的。它一直有效，直到FireFox 34返回webGL画布快照，它仍在IE和Chrome中工作。

是否有解决方法或其他方式从webGL画布获取像素数据？

Answer 1

@Bugzilla已经打开了一个错误。这似乎是一种回归。

实施例： http://codepen.io/anon/pen/XJMQwV

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> </title>
    <style>
      body {
        background-color: #000;
        color: #000;
        margin: 0px;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>
    <script>
var renderer, camera, renderTarget;
var scene, element;
var ambient;

function createPIP(){

}

function init(){
    pip = document.createElement('div');
    pip.id = "divPIP";
    pip.style.width = 512;
    pip.style.height = 512;
    pip.style.position = 'absolute';
    pip.style.backgroundColor = 'black';
    pip.style.borderRadius = "5px";
    pip.style.border = '2px solid white';
    pip.style.padding = "0px 20px";
    pip.style.left = "50px";
    pip.style.top = "25px";
    document.body.appendChild(pip);

    pip2 = document.createElement('div');
    pip2.id = "divpip2";
    pip2.style.width = 512;
    pip2.style.height = 512;
    pip2.style.position = 'absolute';
    pip2.style.backgroundColor = 'black';
    pip2.style.borderRadius = "5px";
    pip2.style.border = '2px solid white';
    pip2.style.padding = "0px 20px";
    pip2.style.left = "650px";
    pip2.style.top = "25px";
    document.body.appendChild(pip2);
    canvaspip2 = document.createElement('canvas');
    canvaspip2.width = 512;
    canvaspip2.height = 512;
    canvaspip2.id = "canvaspip2";
    pip2.appendChild(canvaspip2);

    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(512, 512);
    pip.appendChild(renderer.domElement);

    renderTarget = new THREE.WebGLRenderTarget( 512, 512 );

    var ambient = new THREE.AmbientLight( 0xffffff ); 
    scene.add( ambient );

    camera = new THREE.OrthographicCamera( -256, 256, 256, -256, 1, 1e6 );
    scene.add(camera);
    camera.position.set(0, 0, 500);

    cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshNormalMaterial() );

    scene.add(cube);
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {

    var ctx = renderer.getContext("experimental-webgl",{preserveDrawingBuffer: true}) || renderer.getContext("webgl",{preserveDrawingBuffer: true});
    renderer.render(scene, camera, renderTarget);
    var arr = new Uint8Array( 4 * 512 * 512);
    ctx.readPixels(0, 0, 512, 512, ctx.RGBA, ctx.UNSIGNED_BYTE, arr);
    var c=document.getElementById("canvaspip2");
    var ctx=c.getContext("2d");
    var ImgData = ctx.createImageData(512, 512);
    ImgData.data.set( arr, 0, arr.length );

    var c=document.getElementById("canvaspip2");
    var ctx=c.getContext("2d");
    ctx.putImageData(ImgData,0,0);

    renderer.autoClear = false;
    renderer.clear();
    renderer.render(scene, camera);
}

window.onload = function() {
  init();
  animate();
}
    </script>
</body>
</html>

webGL readPixels和FireFox 35

1 个答案: