New issue
Advanced search Search tips

Issue 886568 link

Starred by 1 user
Status: Available
Owner: ----
Cc:
susan.boorgula@chromium.org
fs...@chromium.org
phanindra.mandapaka@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

offscreen canvas + bitmaprenderer nor working?

Reported by iquilez...@hotmail.com, Sep 19 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Steps to reproduce the problem:
1. Try the self contained HTML in attachment
2. It should display a red, green and blue squares
3. But it doesn't
4. If you remove the last transfer, the second square renders

What is the expected behavior?
All red, green and blue squares should display properly

What went wrong?
Seems like Canvas::transferToImageBitmap() isn't working as expected?

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 69.0.3497.100  Channel: stable
OS Version: 10.0
Flash Version: 

<html>
<head>
<script>
function main()
{
  let options = { alpha:false, depth:false, stencil:false, antialias:false, premultipliedAlpha:false, preserveDrawingBuffer:false };

  // Adquire canvases and contexts. First 3 come from DOM, last one is offscreen/gl
  let c1 = document.getElementById("c1"); let k1 = c1.getContext("bitmaprenderer"); 
  let c2 = document.getElementById("c2"); let k2 = c2.getContext("bitmaprenderer");
  let c3 = document.getElementById("c3"); let k3 = c3.getContext("bitmaprenderer");
  let cR = new OffscreenCanvas(256, 256); let gl = cR.getContext('webgl2',options);

  // Render RED and transfer to canvas 1
  gl.clearColor( 1.0, 0.0, 1.0, 1.0 ); gl.clear( gl.COLOR_BUFFER_BIT );
  k1.transferFromImageBitmap(cR.transferToImageBitmap());

  // Render GREEN and transfer to canvas 2
  gl.clearColor( 0.0, 1.0, 0.0, 1.0 ); gl.clear( gl.COLOR_BUFFER_BIT );
  k2.transferFromImageBitmap(cR.transferToImageBitmap());

  // Render BLUE and transfer to canvas 3
  gl.clearColor( 0.0, 0.0, 1.0, 1.0 ); gl.clear( gl.COLOR_BUFFER_BIT );
  k3.transferFromImageBitmap(cR.transferToImageBitmap());
}
</script>
</head>
<body onload="main()">
<canvas id="c1" width="256" height="256" style="width:256px;height:256px"></canvas>
<canvas id="c2" width="256" height="256" style="width:256px;height:256px"></canvas>
<canvas id="c3" width="256" height="256" style="width:256px;height:256px"></canvas>
</body>
</html>
test.html
1.4 KB View Download

Comment 1 by iquilez...@hotmail.com, Sep 19 

Note - I tried to gl.finihs() and gl.flush() after the gl.glear() and before the transferToImageBitmap() calls, but that didn't help neither.

Comment 2 by iquilez...@hotmail.com, Sep 19 

This however works:

<html>
<head>
<script>
function main()
{
  let options = { alpha:false, depth:false, stencil:false, antialias:false, premultipliedAlpha:false, preserveDrawingBuffer:false };

  // Adquire canvases and contexts. First 3 come from DOM, last one is offscreen/gl
  let c1 = document.getElementById("c1"); let k1 = c1.getContext("bitmaprenderer"); 
  let c2 = document.getElementById("c2"); let k2 = c2.getContext("bitmaprenderer");
  let c3 = document.getElementById("c3"); let k3 = c3.getContext("bitmaprenderer");
  let cR = new OffscreenCanvas(256, 256); let gl = cR.getContext('webgl2',options);

  // Render RED and transfer to bitmap 1
  gl.clearColor( 1.0, 0.0, 0.0, 1.0 ); gl.clear( gl.COLOR_BUFFER_BIT );
  var b1 = cR.transferToImageBitmap();

  // Render GREEN and transfer to bitmap 2
  gl.clearColor( 0.0, 1.0, 0.0, 1.0 ); gl.clear( gl.COLOR_BUFFER_BIT );
  var b2 = cR.transferToImageBitmap();
  
  // Render BLUE and transfer to bitmap 3
  gl.clearColor( 0.0, 0.0, 1.0, 1.0 ); gl.clear( gl.COLOR_BUFFER_BIT );
  var b3 = cR.transferToImageBitmap();
  
  // transfer bitmaps to canvases
  k1.transferFromImageBitmap(b1);
  k2.transferFromImageBitmap(b2);
  k3.transferFromImageBitmap(b3);
}
</script>
</head>
<body onload="main()">
<canvas id="c1" width="256" height="256" style="width:256px;height:256px"></canvas>
<canvas id="c2" width="256" height="256" style="width:256px;height:256px"></canvas>
<canvas id="c3" width="256" height="256" style="width:256px;height:256px"></canvas>
</body>
</html>

Comment 3 by susan.boorgula@chromium.org, Sep 19

Labels: Needs-Triage-M69

Comment 4 by susan.boorgula@chromium.org, Sep 20

Cc: susan.boorgula@chromium.org
 Issue 886567  has been merged into this issue.

Comment 5 by phanindra.mandapaka@chromium.org, Oct 9

Cc: phanindra.mandapaka@chromium.org
Labels: Triaged-ET Needs-Feedback
iquilezles@ Thanks for the issue...

Tried to reproduce the issue on reported chrome version 69.0.3497.100 using Windows 10.Attaching screen-cast for reference.
Steps: 
---------
1. Launched reported chrome 
2. Created html file using given code in comment #2
3. Dragged and dropped into new tab 
As we are able see red, green and blue squares

@Reporter: Could you please check the attached screen cast and please let us know if anything missed from our end and request you to retry this issue with fresh profile without any extensions  & apps or reset all the flags and let us know if issue still persists.

Thanks..!
886568.mp4
4.5 MB View Download

Comment 6 by iquilez...@hotmail.com, Oct 10 

Hio! The comment #1 is the one that doesn't work and showcases the bug. Comment #2 is a workaround I found that I hoped would give yo a clue to the actual bug.
Project Member

Comment 7 by sheriffbot@chromium.org, Oct 10

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 8 by fs...@chromium.org, Oct 15

Cc: fs...@chromium.org
Status: Available (was: Unconfirmed)
►

Sign in to add a comment