Closed Bug 1122465 Opened 9 years ago Closed 9 years ago

@mozilla::WebGLContext::ReadPixels returns black screen since v35

Categories

(Core :: Graphics: CanvasWebGL, defect)

Product:
Core
Component:
Graphics: CanvasWebGL
Version:
35 Branch
Platform:
x86
Windows 8.1
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1125445

People

(Reporter: yokotsumo, Assigned: jgilbert)

References

Details

(Keywords: regression, site-compat, testcase, Whiteboard: [gfx-noted])

Attachments

(1 file)

1122465.html
2.75 KB, text/html
Details 
User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36

Steps to reproduce:

I used this code until FireFox 34 to get webGL context snapshot: 

		var ctx = renderer2.getContext("experimental-webgl", {preserveDrawingBuffer: true});
		renderer.render(scene, camera, renderTarget);
		var arr = new Uint8Array( 4 * 1024 * 1024);
		ctx.readPixels(0, 0, 1024, 1024, ctx.RGBA, ctx.UNSIGNED_BYTE, arr);

and arr contained all the pixel of the webGL canvas.


Actual results:

Firefox updated itself to v35 and since then, ReadPixels return a black screen. Chrome and IE still returns the webGL canvas.


Expected results:

FF35 should return the webGL canvas pixel array.
could you attach a simple testcase, please.
Flags: needinfo?(yokotsumo)
Keywords: testcase-wanted
Below code working with FF34, IE and Chrome but not FF35. You need the latest three.js ditribution in the same folder (I used r69). With FF35, ReadPixels returns array of 0s. Is there a new way to use ReadPixels with FF35?

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> </title>
    <style>
      body {
        background-color: #000;
        color: #000;
        margin: 0px;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <script src="three.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>
Flags: needinfo?(yokotsumo)
Attached file 1122465.html — 
Reporter's testcase with three.js hosted online.
Reg range:
good=2014-10-02
bad=2014-10-03
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=2399d1ae89e9&tochange=b85c260821ab

Suspected: bug 1048108

:jgilbert, is it a valid regression?
Blocks: 1048108
Flags: needinfo?(jgilbert)
Keywords: testcase-wanted → regression, testcase
Whiteboard: [gfx-noted]
Tested on ATI x1300
http://codepen.io/anon/pen/XJMQwV
IE 11: PASS
Chrome 42: PASS
FF 32: PASS
FF 38.0a1 (2015-01-17): FAIL ( no rectangle, all black )
Keywords: site-compat
Assignee: nobody → jgilbert
Status: UNCONFIRMED → RESOLVED
Closed: 9 years ago
Resolution: --- → DUPLICATE
Blocks: 1128627
Update on behalf of Martin: 

The Benchmark in bug 1128639 is working in Nightly and Aurora Dev Edition but not on Beta and GA. We are DOA if this doesn't work for the show. 

@jgilbert, I think we need this uplifted to Beta but we need to confirm that this:

- actually is the fix we need
- is low risk enough for beta

Thank you
We're sorting this out off line and in 1128639, it's unclear that these are duplicates.
Flags: needinfo?(jgilbert)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: