Uploading ImageBitmap to texture with texImage2d / texSubImage2d is slower than using canvas
Reported by
gordonra...@gmail.com,
Apr 21 2017
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Steps to reproduce the problem: 1. Load a large (4096x4096) jpeg and use createImageBitmap to create an ImageBitmap. 2. Pass this ImageBitmap into texImage2d() to upload the texture data to the GPU 3. Observe the time taken in Chrome developer tools, versus drawing the ImageBitmap to a canvas, and using that as the source. What is the expected behavior? ImageBitmap should be faster than to upload/copy to the GPU than Canvas What went wrong? Creating an ImageBitmap, drawing it to a canvas with drawImg(), and then finally passing the resulting canvas into texImage2d() is on average twice as fast as passing in the ImageBitmap directly. For a 4k texture TexImage2d() with an ImageBitmap source, it takes around 75ms on average, which causes significant stuttering. If I copy the ImageBitmap to a canvas and use that as the source instead, it takes only around 25ms. I was under the impression that ImageBitmap was designed to be an efficient way of creating and uploading textures. Drawing the ImageBitmap to the canvas is always <1ms, which is fantastic, but surely using one as a texture source for texImage2d() should see improvements also? Did this work before? N/A Does this work in other browsers? Yes Chrome version: 60.0.3076.0 Channel: n/a OS Version: 10.0 Flash Version:
,
Apr 27 2017
,
Apr 28 2017
gordonrankin82@ Could you please help us with sample html case of this issue for our further triage. Thank You...
,
Apr 28 2017
The reason that the ImageBitmap is slower is that the image data resides in RAM, so when you call texImage2D, it needs to be uploaded to GPU memory. A 2D canvas of size 4096x4096 will be GPU accelerated, so the texImage2D call will be a GPU-to-GPU copy, which is faster. The cost of the GPU upload is paid when the image is drawn to the 2D canvas with drawImage. You wrote: "If I copy the ImageBitmap to a canvas and use that as the source instead, it takes only around 25ms." Is the 25ms the cost of the texImage2D, or is it the combined cost of drawImage+texImage2D. How are you measuring these time values? These APIs are asynchronous so measuring the function time in JavaScript does not give you the full story.
,
May 2 2017
I'm measuring in JavaScript with performance.now() so I understand that it may not be entirely accurate, however the main thread rendering loop stuttering is noticeably worse when transferring the ImageBitmap directly, which would imply that the results are at least somewhat accurate. The drawImage call to the 2d canvas is always less than 1ms when drawing a 4k texture, so the 25ms cost of texImage2d is inclusive of the 2d canvas drawImage call. So from what you've described, would I be correct in assuming that this call, and therefore the GPU upload, is happening off of the main thread?
,
May 2 2017
Thank you for providing more feedback. Adding requester "kkaluri@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 3 2017
,
May 9 2017
Assigned to get a response to the feedback.
,
Jul 25
|
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by ranjitkan@chromium.org
, Apr 24 2017