Bug 229986 – WebGL Canvas will not update when using putImageData with small area update.

• Component: WebGL
• Status: RESOLVED CONFIGURATION CHANGED

[lktc420]

Created attachment 437468 [details]
The issue html that can reproduce the bug.

Overview: 

When using Three.js WebGLRender and use canvas texture, if the canvas call putImageData with small area, the associate WebGL canvas will not update image.

Steps to Reproduce: 
You can 100% easily reproduce the bug using the attachment index.html.
Just click the page to see if the canvas update and showing a small rect with random color updating.

And see this comment in file:
// Without below 2 lines, the webgl canvas will not update.
// textureCanvasCtx.fillStyle = '#00000000';
// textureCanvasCtx.fillRect(0, 0, 0, 1);

this is the workaround to fix it.

Also, when enable canvas recording in inspector, the webgl canvas will update correctly, wierd problem.

Actual Results: 
When click page, webgl canvas not updating to show the small rect.

Expected Results: 
When click page, webgl canvas should updating to show the small rect.

Build Date & Hardware: 
MacOS 11.5.2
Safari 14.1.2

[lktc420]

I tested chrome and firefox, both are ok.

[lktc420]

Also u can change the image size up to 400*400, then its ok.

[Kenneth Russell]

Is there a size threshold for enabling something like GPU-accelerated 2D canvas? Does the associated 2D canvas->WebGL texture uploading code need to take non-accelerated canvases into account?

[Kenneth Russell]

I haven't debugged into this but this is failing on Safari Technology Preview as well as Safari 14. Was thinking maybe the ImageData constructor leaving off the optional height argument was buggy, but specifying the height didn't fix this bug.

[lktc420]

Plz also notice that when enable canvas recording in inspector, the problem disappear during the recording. The canvas can update during the recording.

[Kimmo Kinnunen]

Thanks for the report!
I did a layout test for this, but not a fix yet.

After the first update, the putImageData is buggy due to some shortcutting that is visible to getImageData but is not visible when reading with WebGL. Probably related to flushes and the fact that putImageData puts the data into the memory area past CG context bookkeeping.

[Radar WebKit Bug Importer]

<rdar://problem/83094422>

[Brent Fulgham]

We believe this is working properly in STP 145 (and newer), and in the upcoming Safari release (available in Beta now).