关于canvas：webGL readPixels和FireFox 35

webGL readPixels and FireFox 35

我已经更新到FireFox35，以下代码不再起作用：

1
2
3
4

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画布获取像素数据的另一种方法？

相关讨论

已打开一个错误@Bugzilla。这似乎是一种回归。

例：
http://codepen.io/anon/pen/XJMQwV

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

<!DOCTYPE html>
<html lang="en">
<head>

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

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();
}

</body>
</html>