WebGL的readPixels和FireFox 35

我已經更新到的firefox和下面的代碼是不工作了：WebGL的readPixels和FireFox 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返回數組是全黑的。它一直工作到FireFox 34返回webGL畫布快照，並且它仍然在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和FireFox 35

回答

相關問題