search

bvibber / yuv-canvas

JS class to draw YUV image frame buffers to an HTML5 canvas
MIT License
273 stars 60 forks source link

WebGLFrameSink.stripe results in flipped, quarter-size image in Firefox #37

Closed mart-jansink closed 2 years ago

mart-jansink commented 2 years ago

WebGLFrameSink.stripe is enabled by default since e8d262f08aeb17e20966d46aa06258dee40ba3cc. However, I'm now seeing a flipped, quarter-size image in only the bottom right corner:

Screenshot 2022-04-04 at 14 36 03

This at least happens in the latest (nightly) version of Firefox on macOS Monterey running on an M1 MacBook Pro, not in Safari or Chrome. Setting WebGLFrameSink.stripe = false solves the problem, but of course disables the performance improvements as well.

bvibber commented 2 years ago

Urgh. I'll get on this.

bvibber commented 2 years ago

(Can confirm in Firefox on M1 MacBook Air)

bvibber commented 2 years ago

Bad news is I don't know what's actually wrong -- something's awry with the scaling on the texture when using the intermediate framebuffer, but I'm not sure why only Firefox on Mac gets it wrong. :(

Good news is I realized why the non-stripe code path was slow on some browsers in recent times: it was running texImage2d to upload new textures instead of texSubImage2d to update existing ones. So if all goes well in testing, I'll take that back out, use proper caching of textures for the non-stripe path, and be fixed. :D

mart-jansink commented 2 years ago

Thanks for the quick response! Weird that it really only happens with Firefox on M1 CPUs, but this solution is fine of course.

bvibber commented 2 years ago

Oh it wasn't just M1 -- it happened also on Intel and AMD GPUs on macOS 12.3 (only in Firefox).