webGL readPixels и FireFox 35

Я обновился до 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?


canvas firefox webgl compatibility glreadpixels
person Minichua    schedule 16.01.2015    source источник
comment
У вас есть jsfiddle или что-то подобное, на которое вы можете ссылаться с кодом, вызывающим у вас проблемы? проще было бы с этим помочь   -  person Anton    schedule 16.01.2015
comment
какие-либо сообщения в консоли JS?   -  person gman    schedule 17.01.2015

Ответы (1)


arrow_upward
1
arrow_downward

Ошибка была открыта @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>
person Minichua    schedule 17.01.2015
comment
Не могли бы вы связать ошибку? - person Craig Gidney; 08.03.2015