1864882 - transferFromImageBitmap from OffscreenCanvas is unusably slow

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[ashley]

Steps to reproduce:

A useful technique for rendering a WebGL canvas to multiple views is to render each view and then copy the result to a different canvas. One way of doing this is to draw it to a 2D context, which is unusably slow (issue 1163426, filed back in 2015). Another way is to draw it to an OffscreenCanvas, and use imageBitmapRenderingCtx. transferFromImageBitmap(offscreenCanvas.transferToImageBitmap()). However this is also unusably slow.

Here is a minimal repro: http://localhost:63000/offscreencanvas-transfer-webgl-slow.html
View it in a maximized window in Firefox. It logs the FPS to the console once a second.

Actual results:

This approach can achieve barely 15 FPS on my system with a NVIDIA GeForce RTX 4070.

Expected results:

It should run smoothly, like it does in Chrome, which can achieve a steady 60 FPS on the same system.

We're planning on launching a new feature that relies on this multi-view rendering approach in the next couple of months. Due to both this issue and issue 1163426, it seems there is no way to achieve good performance with this feature in Firefox. This may block the feature or encourage switching to Chrome for better performance. I would guess it is doing a CPU copy rather than being GPU accelerated. Thanks for any help!

Comment 1

[Robert Longson [:longsonr]]

Your testcase is on localhost so only you can run it.

Comment 2

[ashley]

D'oh, sorry, pasted the wrong link. Here's what I meant to share: https://downloads.scirra.com/labs/bugs/offscreencanvas-transfer-webgl-slow.html

Comment 3

[ashley]

FWIW Safari 17.1 appears to also run this perfectly smoothly, so it seems Firefox is the only browser with a performance problem here.

Comment 4

[Kelsey Gilbert [:jgilbert]]

Attachment: Canvas draw WebGL test.htm

Comment 5

[ayagawap]

This issue is also occurring with Firefox 143.0.3.
When I open the test page in the Attachments section on my MacBook Air (Apple M2, 2022, macOS Tahoe 26.1), the console reports approximately 45fps.
In Safari 26.1 and Chrome Dev 145.0.7587.4, the output is 60fps.
Are there any plans to fix this issue?

Comment 6

[iamdjj]

I investigated this locally with Firefox.

For the WebGL OffscreenCanvas case, the slow part is not transferFromImageBitmap() itself. In my logs, ImageBitmapRenderingContext::TransferFromImageBitmap() / TransferAsImage() / Redraw() are essentially ~0ms.

The expensive part is OffscreenCanvas.transferToImageBitmap() creating the ImageBitmap:

OffscreenCanvas::TransferToImageBitmap
→ ImageBitmap::CreateFromOffscreenCanvas
→ nsLayoutUtils::SurfaceFromOffscreenCanvas
→ ClientWebGLContext::GetSurfaceSnapshot
→ ClientWebGLContext::BackBufferSnapshot
→ DoReadPixels

On my machine with a 2560×1912 WebGL OffscreenCanvas, DoReadPixels alone commonly takes ~15–30ms per frame, with occasional higher spikes. The full BackBufferSnapshot / CreateFromOffscreenCanvas path is dominated by that CPU readback.

So Firefox appears to implement this path as: WebGL OffscreenCanvas → readPixels CPU DataSourceSurface → SourceSurfaceImage → ImageBitmap → bitmaprenderer

Chromium appears to avoid this CPU readback when GPU compositing is available. Its path is:

OffscreenCanvas.transferToImageBitmap
→ WebGLRenderingContextBase::TransferToImageBitmapBase
→ DrawingBuffer::TransferToStaticBitmapImage
→ ExportSharedImageFromBackBuffer
→ AcceleratedStaticBitmapImage::CreateFromCanvasSharedImage
→ ImageBitmapRenderingContext::SetImage

So Chromium effectively transfers/wraps a GPU SharedImage instead of reading the WebGL backbuffer to CPU memory.

Pinned Chromium references:

• OffscreenCanvas delegates transfer to context: https://github.com/chromium/chromium/blob/4f4d95833f1c499296f5b1c7acefbd783e6780be/third_party/blink/renderer/core/offscreencanvas/offscreen_canvas.cc#L252

• WebGL transfer uses DrawingBuffer::TransferToStaticBitmapImage: https://github.com/chromium/chromium/blob/4f4d95833f1c499296f5b1c7acefbd783e6780be/third_party/blink/renderer/modules/webgl/webgl_rendering_context_base.cc#L835

• DrawingBuffer exports a GPU SharedImage when GPU compositing is available: https://github.com/chromium/chromium/blob/4f4d95833f1c499296f5b1c7acefbd783e6780be/third_party/blink/renderer/platform/graphics/gpu/drawing_buffer.cc#L708

• AcceleratedStaticBitmapImage wraps the shared GPU image: https://github.com/chromium/chromium/blob/4f4d95833f1c499296f5b1c7acefbd783e6780be/third_party/blink/renderer/platform/graphics/accelerated_static_bitmap_image.cc#L45