Fatal编程技术网
  • firefox/
  • webGL readPixels和FireFox 35

webGL readPixels和FireFox 35

firefox canvas webgl

webGL readPixels和FireFox 35,firefox,canvas,webgl,compatibility,glreadpixels,Firefox,Canvas,Webgl,Compatibility,Glreadpixels,我已更新到FireFox35，以下代码不再工作： var ctx = renderer2.getContext("experimental-webgl",{preserveDrawingBuffer: true}) || renderer2.getContext("webgl",{preserveDrawingBuffer: true}); renderer2.render(scene2, camera2, renderTarget); var arr = new Uin

我已更新到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);
返回的数组是完全黑色的。它一直工作到Firefox34返回webGL画布快照，并且仍然在IE和Chrome中工作

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

已在@Bugzilla打开一个bug。这似乎是一种倒退

例如： 


身体{
背景色：#000；
颜色：#000；
边际：0px；
溢出：隐藏；
}
var渲染器、摄影机、渲染目标；
var场景、元素；
环境变量；
函数createPIP（）{
}
函数init（）{
pip=document.createElement（'div'）；
pip.id=“divPIP”；
pip.style.width=512；
pip.style.height=512；
pip.style.position='绝对'；
pip.style.backgroundColor='黑色'；
pip.style.borderRadius=“5px”；
pip.style.border='2px纯白'；
pip.style.padding=“0px 20px”；
pip.style.left=“50px”；
pip.style.top=“25px”；
文件.body.appendChild（pip）；
pip2=document.createElement（'div'）；
pip2.id=“divpip2”；
pip2.style.width=512；
pip2.style.height=512；
pip2.style.position='绝对'；
pip2.style.backgroundColor='黑色'；
pip2.style.borderRadius=“5px”；
pip2.style.border='2px纯白'；
pip2.style.padding=“0px 20px”；
pip2.style.left=“650px”；
pip2.style.top=“25px”；
文件.body.appendChild（pip2）；
canvaspip2=document.createElement（'canvas'）；
canvaspip2.width=512；
canvaspip2.height=512；
canvaspip2.id=“canvaspip2”；
pip2.appendChild（canvaspip2）；
场景=新的三个。场景（）；
renderer=new THREE.WebGLRenderer（）；
设置大小（512）；
pip.appendChild（renderer.domeElement）；
renderTarget=new THREE.WebGLRenderTarget（512）；
var环境光=新的三个环境光（0xffffff）；
场景。添加（环境光）；
摄像机=新的三个正交摄像机（-256，256，256，-256，1，1e6）；
场景。添加（摄影机）；
摄像机位置设置（0,0,500）；
立方体=新的THREE.Mesh（新的THREE.CubeGeometry（200200200200），新的THREE.MeshNormalMaterial（））；
场景.添加（立方体）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
var ctx=renderer.getContext（“实验性webgl”{preserveDrawingBuffer:true}）| | renderer.getContext（“webgl”{preserveDrawingBuffer:true}）；
渲染器。渲染（场景、摄影机、渲染目标）；
var arr=新的UINT8阵列（4*512*512）；
读取像素（0，0，512，512，ctx.RGBA，ctx.UNSIGNED_字节，arr）；
var c=document.getElementById（“canvaspip2”）；
var ctx=c.getContext（“2d”）；
var ImgData=ctx.createImageData（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；
.clear（）；
渲染器。渲染（场景、摄影机）；
}
window.onload=函数（）{
init（）；
制作动画（）；
}
您是否有一个JSFIDLE或类似的东西，可以链接到导致您出现问题的代码？在JS控制台中帮助处理itany消息会更容易些？你能链接这个bug吗？ 
<!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>