├── EXPLAINER.md
└── example.html


/EXPLAINER.md:
--------------------------------------------------------------------------------
  1 | # WebGPU Extended Range Brightness
  2 | 
  3 | ## Introduction
  4 | 
  5 | This proposal introduces a mechanism through which WebGPU can draw colors
  6 | brighter than `white` (`#FFFFFF`).
  7 | 
  8 | ## Background
  9 | 
 10 | ## Existing WebGPU Behavior
 11 | 
 12 | WebGPU can currently create a canvas with a `GPUTextureFormat` of
 13 | "rgba16float". When this is done, values that are outside of the [0, 1]
 14 | interval are clamped to the [standard dynamic range of the display device](https://www.w3.org/TR/webgpu/#canvas-color-space).
 15 | 
 16 | The current text of that section indicates
 17 | 
 18 | > During presentation, the chrominance of color values outside of the [0, 1]
 19 | > range is not to be clamped to that range; extended values may be used to
 20 | > display colors outside of the gamut defined by the canvas' color space’s
 21 | > primaries, when permitted by the configured format and the user’s display
 22 | > capabilities. This is in contrast with luminance, which is to be clamped
 23 | > to the maximum standard dynamic range luminance.
 24 | 
 25 | This is not an entirely accurate description of the current behavior. A more
 26 | accurate characterization of the behavior of all implemenations is:
 27 | 
 28 | > During presentation, the color values in the canvas are converted to the color
 29 | > space of the screen and are then clamped to the `[0, 1]` interval in that
 30 | > color space.
 31 | > 
 32 | > Canvas color values outside of the `[0, 1]` interval may be used to display
 33 | > colors outside of the gamut defined by the canvas' color space’s primaries,
 34 | > when permitted by the configured format and the user’s display capabilities.
 35 | > E.g, the color value (1.09,-0.23,-0.15) in an 'srgb' canvas will produce
 36 | > the same color as the color value (1,0,0) in 'display-p3' canvas.
 37 | 
 38 | ## Goal
 39 | 
 40 | The goal of this proposal is to provide a mechanism through which a WebGPU
 41 | canvas can indicate that its colors should not be clamped to standard
 42 | dynamic range.
 43 | 
 44 | ## API proposal
 45 | 
 46 | Add the following new dictionaries.
 47 | 
 48 | ```webidl
 49 | enum GPUCanvasToneMappingMode {
 50 |   "standard",
 51 |   "extended",
 52 | };
 53 | 
 54 | dictionary GPUCanvasToneMapping {
 55 |   GPUCanvasToneMappingMode mode = "standard";
 56 | };
 57 | 
 58 | partial dictionary GPUCanvasConfiguration {
 59 |   GPUCanvasToneMapping toneMapping;
 60 | };
 61 | ```
 62 | 
 63 | When a canvas is created with a `GPUCanvasConfiguration` which specifies a
 64 | `toneMapping` which specifies a `mode` of `"extended"`, then colors will not
 65 | be restricted to the standard dynamic range, but rather will be restricted to
 66 | the full dynamic range of the display device.
 67 | 
 68 | ## Example use
 69 | 
 70 | The following code would configure the canvas for high dynamic range, using the
 71 | Display P3 color space.
 72 | 
 73 | ```
 74 |   context.configure({
 75 |     device: device,
 76 |     format: "rgba16float",
 77 |     usage: GPUTextureUsage.RENDER_ATTACHMENT,
 78 |     alphaMode: "opaque",
 79 |     colorSpace: "display-p3",
 80 |     toneMapping: { mode:"extended" }
 81 |   });
 82 | ```
 83 | 
 84 | ## Notes on potential future metadata extensions
 85 | 
 86 | This proposal does not introduce Perceptual Quantizer (PQ) and Hybrid-Log Gamma
 87 | (HLG) transfer functions from ITU-R BT.2100 and ISO 22028-5. The natural
 88 | proposal to include this would update `PredefinedColorSpace` to include
 89 | `"rec2100-display-linear"` (for use with `"rgba16float"` formats) and
 90 | potentially `"rec2100-hlg"` and `"rec2100-pq"` (for use with `"rgb10a2unorm"`
 91 | formats, should they become available).
 92 | 
 93 | This proposal does not introduce any of the standard HDR metadata types.
 94 | These include the mastering display color volume (MDCV, from SMPTE ST
 95 | 2086:2014), content light level information (CLLI, from CTA 861.3),
 96 | content color volume (CCV), nominal diffuse white luminance (NDWL),
 97 | and reference viewing environment (REVE).
 98 | 
 99 | The natural proposal to include these would add new members to
100 | `GPUCanvasToneMapping` corresponding to the various types of metadata.
101 | 
102 | This proposal does not introduce any non-trivial (clamping) tone mapping
103 | behaviors. Additional tone mapping behaviors can be introduced by adding
104 | corresponding new members to GPUCanvasToneMappingMode.
105 | 
106 | For example, to specify HDR10 tone mapping with a default MDCV metadata
107 | and with CLLI metadata that indicates an average of 200 nits and maxmium of
108 | 1200 nits, one could specify:
109 | 
110 | ```
111 |   context.configure({
112 |     ...
113 |     colorSpace: "rec2100-display-linear",
114 |     toneMapping: { mode:"hdr10", clli:{maxFALL:200, maxCLL:1200} }
115 |   });
116 | ```
117 | 
118 | ## Notes on analogous WebGL proposal
119 | 
120 | For WebGL, the API would be shaped similarly to how the color space
121 | is specified (the `drawingBufferColorSpace` attribute). The following
122 | shows how to configure the canvas the same way as is done in the WebGPU
123 | example.
124 | 
125 | ```
126 |   gl.drawingBufferStorage(gl.RGBA16F,
127 |                           gl.drawingBufferWidth,
128 |                           gl.drawingBufferHeight);
129 |   gl.drawingBufferColorSpace = "display-p3";
130 |   gl.drawingBufferToneMapping = { mode:"extended" };
131 | ```
132 | 
133 | ## Notes on CanvasRenderingContext2D and unification of APIs
134 | 
135 | Unlike WebGL and WebGPU, CanvasRenderingContext2D does not have the ability to
136 | specify that its backbuffer (its bitmap) be of any other pixel format than 8-bit.
137 | This limitation makes this API have no effect.
138 | 
139 | When that situation changes, it would be appropriate to create a
140 | `CanvasToneMapping` dictionary and `CanvasToneMappingMode` enum, and update
141 | WebGL and WebGPU to use those.
142 | 
143 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <script>
  4 | var gpuDevice = null;
  5 | var gpuContext = null;
  6 | 
  7 | let parametricEval = function(x, a, b, c, d, e, f, g) {
  8 |   const absX = Math.abs(x);
  9 |   const sgnX = Math.sign(x);
 10 |   return sgnX * (absX <= d) ? c*absX + f : Math.pow(a*absX + b, g) + e;
 11 | }
 12 | 
 13 | let srgbToLinear = function(x) {
 14 |   return parametricEval(
 15 |       x, 1/1.055, 0.055/1.055, 1/12.92, 0.04045, 0, 0, 2.4);
 16 | }
 17 | 
 18 | let linearToSrgb = function(x) {
 19 |   return parametricEval(
 20 |       x, Math.pow(1.055, 2.4), 0, 12.92, 0.04045 / 12.92, -0.055, 0, 1/2.4);
 21 | }
 22 | 
 23 | async function drawGpuCanvas() {
 24 |   if (!gpuDevice) {
 25 |     const adapter = await navigator.gpu?.requestAdapter();
 26 |     gpuDevice = await adapter?.requestDevice();
 27 |     if (!gpuDevice) {
 28 |       console.error("Failed to initialize WebGPU device");
 29 |       return;
 30 |     }
 31 |   }
 32 |   if (!gpuContext) {
 33 |     gpuContext = GpuCanvas.getContext('webgpu');
 34 |     if (!gpuContext) {
 35 |       console.error("Failed to initialize WebGPU context");
 36 |       return;
 37 |     }
 38 |   }
 39 | 
 40 |   // Select the tone mapping mode based on the radio button.
 41 |   let toneMappingMode = null;
 42 |   if (ToneMapModeStandard.checked) {
 43 |     toneMappingMode = "standard";
 44 |   }
 45 |   if (ToneMapModeExtended.checked) {
 46 |     toneMappingMode = "extended";
 47 |   }
 48 | 
 49 |   // Select the pixel value to clear to from the slider.
 50 |   let v = PixelValueSlider.value;
 51 | 
 52 |   // Configure and clear the canvas.
 53 |   gpuContext.configure({
 54 |     device: gpuDevice,
 55 |     format: 'rgba16float',
 56 |     colorSpace: 'srgb',
 57 |     usage: GPUTextureUsage.RENDER_ATTACHMENT,
 58 |     toneMapping: {mode:toneMappingMode},
 59 |   });
 60 |   const renderPassDescriptor = {
 61 |     colorAttachments: [
 62 |       {
 63 |         view: gpuContext.getCurrentTexture().createView(),
 64 |         clearValue: { r:v, g:v, b:v, a: 1.0 },
 65 |         loadOp: 'clear',
 66 |         storeOp: 'store',
 67 |       },
 68 |     ],
 69 |   };
 70 |   const commandEncoder = gpuDevice.createCommandEncoder();
 71 |   const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
 72 |   passEncoder.setViewport(0, 0, 32, 32, 0, 1);
 73 |   passEncoder.end();
 74 |   gpuDevice.queue.submit([commandEncoder.finish()]);
 75 | }
 76 | 
 77 | let update = function() {
 78 |   // Update dynamic range query result.
 79 |   DynamicRangeMatch.innerHTML = "(unsupported)";
 80 |   if (window.matchMedia("(dynamic-range: standard)").matches) {
 81 |     DynamicRangeMatch.innerHTML = "standard";
 82 |   }
 83 |   if (window.matchMedia("(dynamic-range: high)").matches) {
 84 |     DynamicRangeMatch.innerHTML = "high";
 85 |     DynamicRangeExplanation.hidden = true;
 86 |   } else {
 87 |     DynamicRangeExplanation.hidden = false;
 88 |   }
 89 | 
 90 |   // Update pixel value text.
 91 |   PixelValue.innerHTML = Number(PixelValueSlider.value).toFixed(2);;
 92 |   PixelValueLinear.innerHTML = srgbToLinear(PixelValueSlider.value).toFixed(2);
 93 | 
 94 |   drawGpuCanvas();
 95 | }
 96 | 
 97 | function main() {
 98 |   // Configure rendering slider.
 99 |   PixelValueSlider.addEventListener('input', update, false);
100 | 
101 |   update();
102 | }
103 | </script>
104 | </head>
105 | 
106 | <body onload='main()'>
107 | 
108 | <h1>HDR support</h1>
109 | <p>The <tt>dynamic-range</tt> media query matches <tt id="DynamicRangeMatch">?</tt>.</p>
110 | 
111 | <p id="DynamicRangeExplanation" hidden>This means that, on this display, setting the tone mapping mode to <tt>extended</tt> will have no effect (it will be the same as setting it to <tt>standard</tt>).</p>
112 | 
113 | <p>
114 | This demo requires that "Experimental Web Platform features" be enabled in chrome://flags.
115 | </p>
116 | 
117 | <h1>Rendering settings</h1>
118 | <p>
119 |   Pixel value:
120 |   <input id="PixelValueSlider" type="range" min="0" max="3" step="0.01" value="1" list="PixelValueSliderTicks""/>
121 |   <datalist id="PixelValueSliderTicks">
122 |     <option value="0" label="0"></option>
123 |     <option value="1" label="1"></option>
124 |     <option value="2" label="2"></option>
125 |     <option value="3" label="3"></option>
126 |   </datalist>
127 |   <tt id="PixelValue"></tt> (sRGB-encoded), <tt id="PixelValueLinear">?</tt> (linear-encoded)
128 | </p>
129 | 
130 | 
131 | <p>
132 | Tone map mode: 
133 | <input type="radio" name="ToneMapMode" id="ToneMapModeStandard" onchange="update();" checked="true">
134 | <label for="ToneMapModeStandard"><tt>standard</tt></label>
135 | <input type="radio" name="ToneMapMode" id="ToneMapModeExtended" onchange="update();">
136 | <label for="ToneMapModeExtended"><tt>extended</tt></label>
137 | </p>
138 | 
139 | <h1>Canvas</h1>
140 | <canvas id="GpuCanvas" style="width:32px; height:32px; border:1px solid black;"></canvas>
141 | 
142 | </html>
143 | 


--------------------------------------------------------------------------------