WebGL을 readPixels 및 파이어 폭스 35

내가 FireFox35에 업데이트 한 다음 코드는 더 이상 작동하지 않습니다 :WebGL을 readPixels 및 파이어 폭스 35

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 반환 된 배열이 완전히 검은 색입니다. WebGL 캔버스 스냅 샷을 반환하는 FireFox 34까지 작동하며 IE 및 Chrome에서 계속 작동합니다.

webGL 캔버스에서 픽셀 데이터를 얻는 방법이나 다른 방법이 있습니까?

출처

2015-01-16 Minichua

당신이 jsfiddle 또는 당신이 당신에게 문제의 원인이되는 코드에 링크 할 수있는 비슷한 있나요? JS 콘솔의 메시지를 – Anton

과 함께 도울 수 있습니까? – gman

@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>

출처

2015-01-17 19:41:25 Minichua

버그를 연결할 수 있습니까? –

https://bugzilla.mozilla.org/show_bug.cgi?id=1122465 – Minichua

WebGL을 readPixels 및 파이어 폭스 35

답변

관련 문제