W3C Workshop
on Wide Color Gamut
and High Dynamic Range
for the Web

Hello, everybody.

Welcome to The Deep Dive, on high dynamic range, wide color gamut and linear rendering in the WebGL and WebGPU API's.

This is a joint presentation between Jeff Gilbert of Mozilla.

And my name is Ken Russell, I work at Google.

For a little bit of background, the WebGL and forthcoming WebGPU APIs both provide GPU accelerated immediate mode graphics rendering to the web.

Now native game engines and image processing applications have pushed the forefront of rendering fidelity, and the web must keep up in order to stay competitive.

Most game engines today operate in a linear gamma space to support Physically Based Rendering or PBR.

Real-time PBR is one of the major innovations in 3D graphics in recent years.

The Unity engine is an important customer publishing games to the web.

And Unity documents their linear versus nonlinear gamma workflows.

All of Unity's tiny examples use the linear workflow.

These examples run in Web Assembly and JavaScript and do their rendering with WebGL.

For example, you can take a look at the tiny racing mini game to get a feel for their rendering quality.

Both WebGL and WebGPU support these so-called sRGB-encoded texture formats needed for an eight-bit-per-channel linear rendering workflow.

However, currently WebGL always uses an eight-bit normalized backbuffer format.

And this is unsuitable for linear rendering.

Therefore, working in the SRGB encoded formats needed for linear rendering, currently imposes a full canvas blit at the end of each frame.

And this is prohibitively expensive on many GPU's, both desktop and mobile.

Now Jeff's gonna show you what the code looks like for this.

Thanks, Ken.

So here's what the code looks like today.

You can see it's really obvious where the extraneous full screen copies are coming from.

We have two calls to blit frame buffer.

They are calls that are copying the entire width and height of the frame.

First, to resolve from multi sample to single sample, the resolve frame buffer.

And then again, copying from the resolve frame buffer to the drawing buffer for WebGL.

What we're hoping to do instead is on the next slide,

where we're able to give you a back-buffer which is already compatible with your multi sample frame buffer.

What this means is that one of your whole blit frame buffers is gone.

You only have a resolve directly from your multi sampled frame buffer down to your WebGL draw buffer in the format that you wanted.

What code is actually making that possible?

Well, in WebGL, that would be the new drawing buffer storage function that we're looking to add.

This would be very similar to the render buffer storage commands you may be used to if you're used to WebGL.

You specify the format you want, sRGB eight alpha eight in this case and that's what we set your back-buffer to.

And that's what lets you skip that full-screen blit that we talked about earlier.

We considered some alternatives here, but we decided not to move forward with them.

At the time, one of the alternatives was for context creation.

Specifying it context creation becomes a little bit confusing in WebGL one when you don't necessarily know which extensions you have enabled.

Like when the context is first created.

So we're going with the drawing buffer storage for now.

For WebGPU it's similar.

It already has support for this.

WebGPU's a little bit different from WebGL because you have this separate concept of a swap chain.

So in WebGPU, it's done by specify configuring the swap chain with this format.

So this is expected to work just straight out of the box in WebGPU.

Wide color gamut support is another big one.

That's being able to specify usually a bigger color space than default for your WebGPU or WebGL content.

What we're looking for here is we're probably just gonna add it to WebGL's rendering context directly.

So you'd just sayglL.colorspace = display-p3 That gives you the nice big modern display-p3 color space instead of the much narrower traditional sRGB color space.

We expect for WebGPU it's going to be really similar, but again it's gonna be on the swap chain instead.

That's the only real difference the functionality is going to be pretty much the same.

Like it's going to give you, you're going to write out colors and the colors are going to be interpreted in the color space that you give us.

For high dynamic range support, again, it's gonna be pretty similar between WebGL and WebGPU.

We really want to get apps to be able to take advantage of these new HDR displays that are becoming more and more common.

One of the caveats here is that HDR does take a lot more power.

Usually because you have frame buffers that are like at least twice as big in terms of just like larger pixel formats.

So we can't like turn it on by default.

We need to have it be opt-in by the application.

And we need clear signals from the application about how it wants us to render them.

Chris Cameron has made a great proposal for how to how to deal with this in WebGL and WebGPU in canvas in general.

That's the direction we're currently going right now.

On the next slide you can see what that looks like.

Again, you can see the drawing buffer storage command that we talked about.

You can see the gl.colorspace command that we talked about, or attributes that we talked about.

And you can see now at canvas.configureHDR where we're opting into an extended range.

And then right after that, we're calling clearBufferfv with a super red two zero zero one color.

Which normally we would just truncate down and you'd get one zero zero one just like normal, full red.

When you have HDR enabled that lets you go all the way up to whatever the maximum display for the display is.

So you can display these like super reds.

And again, here we see that with WebGPU it's gonna be really similar.

Since it's on the canvas you just, again, you set it on the canvas you draw these otherwise super illuminant colors to it and it just works.

And I can pass it back over to Ken to talk about where this work is happening.

Thanks Jeff.

So these new proposals for linear gamma rendering, extended color spaces and high dynamic range, enable a new level of rendering fidelity in WebGL and WebGPU.

They're under active development and collaboration here.

So please join the discussions and contribute.

The work's ongoing in the color web community group, the WebGL working group and the WebGPU community group.

We'd like to extend a special thanks to Chris Cameron from Google, for driving many of these discussions and proposals.

So thanks to you all, and we're looking forward to working with you in the color web community group workshop.