Undersaturated output in the webcodec sample: video decode display (with WebGPU renderer and 4K video)

kalradivyanshu commented 1 year ago

I cloned this repo and ran the webcodec video decode display sample, it worked fine for the provided 720p video, I wanted to push it so I got a 4k video (attached below) and it was okayish for 2D, webgl and webGL2 but for WebGPU the video is undersaturated and bright. For WebGL/2D the colors were muted and a bit off, but for WebGPU it looked really bad:

Original:

WebGL2:

WebGPU:

Original:

WebGL2:

WebGPU:

Steps to reproduce:

Clone this repo
Change the video decode demo to use this video instead: costa_rica_4k30.mp4
Run with WebGL, and 2D, the colors will be muted in comparison to original video
Run with WebGPU, the colors will be undersaturated and the video will looks very bright.

Maybe this is an issue with mp4box? Is it an issue with webcodec or in the rendering step?

GPU info: Graphics Feature Status.txt

dalecurtis commented 1 year ago

This seems like a chromium bug, please file at https://crbug.com/new -- I suspect you need HDR canvas enabled to work with HDR content. I don't think we have a tone-mapping stage in the draw path otherwise.

kalradivyanshu commented 1 year ago

So from what I understand for HDR to be properly displayed on canvas, https://github.com/w3c/ColorWeb-CG/blob/master/hdr_html_canvas_element.md (chrome_bug) this needs to be implemented by browsers? In the meanwhile is there any other way to programmatically change HDR videoframe to SDR for better colors?

dalecurtis commented 1 year ago

Yes that's correct AFAIK.

You'd need your own tone mapping shader you apply with WebGL/WebGPU. You can see Chrome's here: https://source.chromium.org/chromium/chromium/src/+/main:ui/gfx/color_transform.cc;l=1138?ss=chromium&q=ToneMap

kalradivyanshu commented 1 year ago

Great! thanks 🙌

w3c / webcodecs

Undersaturated output in the webcodec sample: video decode display (with WebGPU renderer and 4K video) #665