webGL readPixels 和 FireFox 35答案

【问题标题】：webGL readPixels and FireFox 35webGL readPixels 和 FireFox 35
【发布时间】：2015-01-16 10:42:38
【问题描述】：

我已更新到 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 画布获取像素数据？

【问题讨论】：

您是否有一个 jsfiddle 或类似的东西可以链接到导致您出现问题的代码？帮助它会更容易
JS 控制台中的任何消息？

标签： firefox canvas webgl compatibility glreadpixels

【解决方案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>

【讨论】：

你能链接错误吗？