webGL readPixels 和 FireFox 35

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);

Thre returned 数组完全是黑色的。它一直工作到 FireFox 34 到 return webGL canvas 快照并且它仍在 IE 和 Chrome.

中工作

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

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

webGL readPixels and FireFox 35

firefox

compatibility

canvas

glreadpixels

webgl