forked from w3c/ColorWeb-CG
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
804 lines (779 loc) · 37.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
<!DOCTYPE html>
<html>
<head>
<title>High Dynamic Range and Wide Gamut Color on the Web</title>
<meta charset="utf-8">
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove" defer></script>
<script class="remove">
var respecConfig = {
specStatus: "CG-NOTE",
edDraftURI: "https://w3c.github.io/ColorWeb-CG/",
shortName: "hdr-wcg-color",
editors: [
{
name: "Chris Needham",
mailto: "[email protected]",
company: "British Broadcasting Corporation",
companyURL: "https://www.bbc.co.uk"
},
{
name: "Chris Lilley",
mailto: "[email protected]",
company: "The World Wide Web Consortium (W3C)",
companyURL: "https://www.w3.org/"
}
],
group: "colorweb",
charterDisclosureURI: "https://www.w3.org/community/about/agreements/cla/",
github: {
repoURL: "https://github.com/w3c/ColorWeb-CG/",
branch: "master"
},
localBiblio: {
"media-capabilities-explainer": {
title: "Media Capabilities Explainer",
href: "https://github.com/w3c/media-capabilities/blob/master/explainer.md",
publisher: "W3C",
date: "24 July 2019"
},
"canvas-colorspace": {
title: "Color managing canvas contents",
href: "https://github.com/WICG/canvas-color-space/blob/master/CanvasColorSpaceProposal.md",
publisher: "WICG",
date: "22 March 2018"
},
"css-color-hdr": {
title: "CSS Color HDR Module Level 1",
href: "https://drafts.csswg.org/css-color-hdr/",
publisher: "W3C",
date: "3 June 2020"
},
"css-typed-om": {
title: "CSS Typed OM Level 1",
href: "https://drafts.css-houdini.org/css-typed-om-1/",
publisher: "W3C",
date: "August 2020"
},
"Fairchild-CAM": {
title: "Color Appearance Models, 3rd Edition",
author: "Fairchild, Mark D.",
publisher: "Wiley",
date: "2013"
},
"hdr-chrome": {
title: "Principles of HDR in Chrome",
href: "https://docs.google.com/document/d/1A__vvTDKXt4qcuCcSN-vLzcQKuchnYmu8TFMDseIZJE/edit",
publisher: "Google",
date: "2017"
},
"hdr-hlg-faq": {
title: "Frequently Asked Questions on High Dynamic Range and Hybrid Log-Gamma",
href: "https://downloads.bbc.co.uk/rd/pubs/papers/HDR/BBC_HDRTV_FAQ.pdf",
publisher: "BBC",
date: "December 2016"
},
"html-color-input": {
title: "Color state (type=color)",
href: "https://html.spec.whatwg.org/multipage/input.html#color-state-(type%3Dcolor)",
publisher: "WhatWG",
date: "November 2019"
},
"mediaqueries-5": {
title: "Media Queries Level 5",
href: "https://drafts.csswg.org/mediaqueries-5/",
publisher: "W3C",
date: "August 2019"
},
"netflix-hdr": {
title: "Enhancing the Netflix UI Experience with HDR",
authors: [
"Yuji Mano", "Benbuck Nason", "Joe Drago"
],
href: "https://medium.com/netflix-techblog/enhancing-the-netflix-ui-experience-with-hdr-1e7506ad3e8",
publisher: "Netflix",
date: "24 September 2018",
},
"webgpu": {
title: "WebGPU",
href: "https://gpuweb.github.io/gpuweb/",
publisher: "W3C",
date: "August 2020"
}
}
};
</script>
<style>
.closed {color: #999;}
</style>
</head>
<body>
<section id="abstract">
<p>
The Note is a gap analysis document.
It identifieds the next steps
for enabling
Wide Color Gamut (WCG)
and
High Dynamic Range (HDR)
on the Open Web Platform.
</p>
</section>
<section id="sotd">
</section>
<section>
<h2>Introduction</h2>
<p>The initial commercial application of Color Science
(principally colorimetry, rather than color appearance modelling)
to the reproduction of color
was concerned with surface colors
such as painted or printed objects,
lit by a single illuminant.
The achievable luminance range was thus constrained
to the luminance of a perfect diffuse reflector
(practically, an unprinted sheet of good paper)
at the high end,
and the densest printed or painted black
that could be achieved without the paper tearing or deforming,
at the darkest end. This produced luminance ranges
from as low as 20:1
to as high as 90:1 (Fairchild, p.399 [[Fairchild-CAM]]).
The achievable Chroma range was also limited
by the vibrancy of mass-produced paints and inks,
and the prohibitive cost of using additional spot colors
to extend the gamut.
<!-- add UCS diagram of coated and uncoated FOGRA21 and 39 -->
Self-luminous displays, in that commercial environment,
were primarily used at low luminances
for soft proofing of an eventual printed product,
and were intended to replicate the appearance of a viewing booth.
</p>
<p>Over time, self-luminous displays were seen
as a worthy color management target in their own right:
for computer displays,
for the display of digital photography,
for digital cinema,
and for the consumption of media such as television and movies in the home.
The luminance range increased:
media consumed in near-dark environments such as the cinema
could have much deeper blacks,
while media consumed in dim to normal viewing environments
enjoyed an increased peak white luminance of 200 to 300 cd/m².
The darkest blacks in such environments were constrained by viewing flare,
which is why the sRGB standard mandated a viewing flare of 5%,
typical for glossy glass CRT displays of the time;
coupled with a peak luminance of only 80cd/m²
the luminance range was still relatively modest.
The introduction of matt LCD and OLED screens,
and the commercial success of HDTV, increased the dynamic range somewhat,
but it was still comfortable encoded in 8 bits per gamma-corrected component.
This is referred to as <b>Standard Dynamic Range (SDR)</b>.
The achievable Chroma range for sRGB and Rec.709 HDTV, although extending beyond that of printed material at the primaries, was also relatively modest.
Wider gamut displays were available professionally,
covering most of the Adobe 1998 RGB™ colorspace,
but wre typically not found in a home or office environment.
<!-- sRGB gamut on UCS diagram -->
</p>
</p>Commercial availability of displays covering the Display P3 gamut
(a derivative of DCI P3 used for digital cinema,
but altered to account for a non-dark viewing environment,
with an sRGB transfer curve ,and D65 white point)
meant that <b>Wide Color Gamut (WCG)</b> displays became commonplace
on laptops, external monitors, mobile phones, and even watches.
WCG requires a modest increase in the
number of bits per gamma-corrected component,
from 8 to 10 or 12 (for the widest gamut
in common use for content delivery,
Rec.2020).</p>
<p>The deployment of 4k and then 8k television,
accompanied by digital content delivery,
brought not only a similarly increased color gamut
to the media space, but also a greatly increased dynamic range
of 4000:1 or more.
Increased phosphor efficiency and purity,
together with bright and modulatable backlights,
brought <b>High Dynamic Range (HDR)</b> into widespread use.
Computers, however, remained limited to SDR for the most part.</p>
<p>
The human visual system can,
with appropriate adaptation,
function over an enormous luminance range —
from starlight or moonlight at 0.01 cd/m² and 0.1 cd/m²,
through the dim lighting at dawn and dusk (10 cd/m²),
office lighting (100 cd/m²),
modern displays (800 cd/m²),
overcast daylight (1,000 cd/m²),
bright daylight (10,000 cd/m²)
and full direct sunlight (100,000 cd/m²).
However, the full range cannot be simultaneously percieved
in the same scene
at the same time.
</p>
<p>
There are two main
systems defined for HDR video:
Hyprid Log Gamma (HLG), developed by BBC and NHK, and
Dolby Perceptual Quantizer (PQ).
While improvement in video quality has driven the innovation of HDR,
support for content on the web more generally, e.g., for static images,
the <code><canvas></code> element, and in CSS in general, is still
needed.
</p>
<p class="note">
Add a brief description of PQ and HLG approaches, including: use of
metadata, absolute vs relative brightness, proprietary vs open standard,
etc.
</p>
<p>
The BBC has published a frequently-asked questions document
[[hdr-hlg-faq]] that gives a high level introduction to HDR, and the
PQ and HLG solutions.
</p>
<p>
Fredrik Hubinette from Google has written a useful document
[[hdr-chrome]] that discusses the issues with presenting, and in
particular compositing, SDR and HDR content. This was presented at
TPAC 2017. It considers both PQ and HLG. (<a href="https://www.w3.org/2017/11/07-colorweb-minutes.html">minutes
of the TPAC 2017 meeting</a>)
</p>
<p>
On the web, SDR, and HDR content using both HLG and PQ is expected to
coexist, potentially within the same page, as authors can include
arbitrary content in their web pages. An example is a page that contains
multiple embedded videos, or their poster images. This raises the
question of how to composite content with different color spaces and
dynamic range encodings.
</p>
</section>
<section>
<h2>Goals</h2>
<p>
Support for HDR and WCG on the web is important to allow color and
luminance matching between HDR video content and surrounding or
overlaid graphic and textual content in web pages.
</p>
<p>
Some specific goals include:
</p>
<ul>
<li>
Ensure support for HDR encoded video as a first class citizen on the
web, including both HLG and PQ, with appropriate rules defined for
composition of content.
</li>
<li>
Enable support for HDR static images, texual content, and graphics
rendered via Canvas or SVG.
</li>
<li>
Promote understanding of HDR graphics issues among the web developer
community.
</li>
</ul>
<p>
There are a number of specifications potentially impacted by HDR.
One of the purposes of this document is to identify all documents that
are possibly affected, so that we can review them and determine any
changes needed.
</p>
<ul>
<li>Media Capabilities API [[media-capabilities]], [[media-capabilities-explainer]]</li>
<li>CSSOM View Module [[cssom-view]]</li>
<li>CSS Color Module Level 4 [[css-color-4]]</li>
<li>HTML canvas Element [[canvas-colorspace]]</li>
<li>HTML input type="color" [[html-color-input]]</li>
<li>Media Queries 5 [[mediaqueries-5]]</li>
<li>Scalable Vector Graphics (SVG2) [[svg2]]</li>
<li>TTML2 [[ttml2]], IMSC1.1 [[ttml-imsc1.1]]</li>
<li>Using the ITU BT.2100 PQ EOTF with the PNG Format [[png-hdr-pq]]</li>
</ul>
</section>
<section>
<h2>Specifying Colors in Web Pages</h2>
<section>
<h3>CSS Color Module</h3>
<p>
CSS defines several ways of specifying the colors to use in web
pages, in the CSS Color Module specifications. The current Recommendation is
Level 3 [[css-color-3]], and its successor, Level 4, is becoming stable
and starting to be implemented [[css-color-4]].
The various methods in Level 4 cover WCG but not HDR, and are:
</p>
<ul>
<li>sRGB (Red, Green, Blue), using the <code>rgb()</code> and <code>rgba()</code> functions</li>
<li>Named colors, from early HTML and X11, e.g., 'aqua', 'black', 'blue', 'fuchsia', etc</li>
<li>HSL (Hue, Saturation, Lightness), using the <code>hsl()</code> and <code>hsla()</code> functions</li>
<li>(*) HWB (Hue, Whiteness, Blackness), using the <code>hwb()</code> function</li>
<li>(*) Lab and LCH (Lightness, Chroma, Hue), using the <code>lab()</code> and <code>lch()</code> functions</li>
<li>(*) Profiled, device-dependent colors:
<ul>
<li>predefined colorspaces: <code>display-p3</code>, <code>a98-rgb</code> (compatible with Adobe® RGB (1998)), <code>prophoto-rgb</code>, <code>rec-2020</code> </li>
<li>calibrated colorspaces, using <code>@profile</code> to link to an ICC profile.
This is not limited to RGB: <a href="https://drafts.csswg.org/css-color-4/#cal-cmyk">CMYK and wide-gamut print spaces</a> are also covered.</li>
</ul>
</li>
</ul>
<p>Items marked (*) are new in Level 4. <code>rgb()</code>,
<code>named colors</code>, <code>HSL</code> and <code>HWB</code>
all resolve to sRGB. The others are WCG.
To date, all of these are SDR colorspaces.</p>
<p>
Section 12 in [[css-color-4]] is titled "Working Color Space", and
currently empty. It is intended to cover compositing multiple colorspaces.
There is as yet no consensus on whether this should be per-document or a per-element property;
nor on whether a single value is appropriate for all operations.
We need to define how should compositing work, if
there is HLG, PQ, and SDR content present. The [[hdr-chrome]]
discussion document provides useful input. This will require defining
where black, media/paper white, and peak whites (full-screen and small-area hilights)
map in the various spaces.
</p>
<p>
The draft CSS Color Module Level 4 [[css-color-4]],
adds WCG support. Rec. 2020 is covered, but only for SDR.
The range of CIE Lightness (in Lab and LCH)
is not constrained to 100,
and a figure of 400 is mentioned because
it is known that Lab is a fair model for
up to four times the luminance of diffuse white
(Fairchild, pp.403-413 [[Fairchild-CAM]]),
but no meaning is yet ascribed for values greater than 100.
</p>
<p class="note">
Rec. 2100, with both HLG and Dolby PQ is added to CSS
in an Unofficial Draft [[css-color-hdr]].
It also adds J<sub>z</sub>a<sub>z</sub>b<sub>z</sub> (which uses the PQ transfer characteristic),
J<sub>z</sub>C<sub>z</sub>h<sub>z</sub> (the polar form),
and Dolby ICtCp. Lastly, it adds a (normative) section "Compositing SDR and HDR content".
</p>
<p>
Other CSS specifications assume that all colors are sRGB.
For example, CSS Images
(which defines linear, radial, and conic gradients)
assumes that all color stops are sRGB colors
and mandates that interpolation happen as premultiplied,
gamma-encoded, sRGB values.
</p>
<section>
<h4>Open Issues</h4>
<p>There are a few open issues that relate to HDR and WCG support:</p>
<ul>
<li><a href="https://github.com/w3c/csswg-drafts/issues/554">SDR and HDR compositing</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/553">Predefined HDR profile with BT.2100 and the PQ transfer curve</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/300">Working color space</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/4471">Dealing with bi-plane (video/graphics) when reporting values</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/3844">Effect of working color space on computed & used values</a></li>
<li class="closed"><a href="https://github.com/w3c/csswg-drafts/issues/3435">sRGB doesn't really use 80 cd/m^2 white luminance</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/3249">extend rgb() for HDR</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/296">Canvas may add a half-float, gamma-corrected, Rec. 2020 colorspace </a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/299">black point compensation</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/5323">Compositing SDR in HDR outputs</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/5322"> Query 9: Black Level</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/4647">Do gradients/animations using lab/lch colors interpolate in the Lab colorspace?</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/5669">sRGBA assumption on gradients, and premultiplied other color spaces</a></li>
</ul>
</section>
</section>
<section>
<h3>Canvas API</h3>
<p>
The HTML <code><canvas></code> element provides web applications
with a resolution-dependent bitmap canvas, which can be used for
rendering graphs, game graphics, art, or other visual images on the
fly. The <code><canvas></code> element supports either 2D or
WebGL rendering.
</p>
<p>
The 2D API [[canvas-2d]] defines primitive operations for drawing
graphics in to a <code><canvas></code> element, such as drawing
lines, shapes, and text.
</p>
<p>
The "Color managing canvas contents" proposal [[canvas-colorspace]]
attempts to address the following use cases:
</p>
<blockquote>
<ul>
<li>
Content displayed through a <code><canvas></code> element
should be color managed in order to minimize differences in
appearance across browsers and display devices. Improving color
fidelity matters a lot for artistic uses (e.g., photo and paint
apps) and for e-commerce (product presentation).
</li>
<li>
Canvases should be able to take advantage of the full color gamut
and dynamic range of the display device.
</li>
<li>
Creative apps that do image manipulation generally prefer
compositing, filtering and interpolation calculations to be
performed in a linear color space.
</li>
</ul>
</blockquote>
<p class="note">
The proposal [[canvas-colorspace]] is not currently
HDR capable <code><canvas></code>; the proposal adds WCG support.
See <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/QILBb4Oqb-k/tvdXEy7dBwAJ">
Blink Intent to Ship</a>,
<a href="https://github.com/w3ctag/design-reviews/issues/315">TAG
review</a>, and <a href="https://github.com/whatwg/html/issues/4167">
this issue</a> against the HTML standard.
</p>
<section>
<h4>Open Issues</h4>
<p>Merging of a <a href="https://github.com/WICG/canvas-color-space/pull/28">recent pull reqest</a>
indicates the canvas-colorspace proposal might move forward again.
In particular, colorspaces are now defined relative to CSS Color 4 predefined RGB spaces,
instead of being assumed to be sRGB.
</p>
<ul>
<li><a href="https://github.com/GoogleChromeLabs/squoosh/issues/802">HDR / wide color gamut support</a></li>
<li><a href="https://github.com/w3c/ColorWeb-CG/issues/5">Canvas, bitmap rendering context and readback</a></li>
<li><a href="https://github.com/WICG/canvas-color-space/issues/24">CSS for HDR values?</a></li>
<li><a href="https://github.com/WICG/canvas-color-space/issues/19">Allow colorSpace attributes in getImageData and toDataURL</a></li>
<li><a href="https://github.com/WICG/canvas-color-space/issues/16">Absolute vs relative luminance</a></li>
<li><a href="https://github.com/WICG/canvas-color-space/issues/15">Question on scope + P3</a></li>
</ul>
</section>
</section>
<section>
<h3>Filter Effects</h3>
<p>The CSS Filter Effects Module [[filter-effects]],
which generalizes to CSS and HTML the filter effect already available on SVG,
performs all operations in linear-light sRGB colorspace.
For example, the <a href="https://drafts.fxtf.org/filter-effects/#feColorMatrixElement"><code>luminanceToAlpha</code> definition</a>
hard-codes the matrix operations for linear-sRGB to Luminance.
Operations are defined in terms of an equivalent SG filter function.
</p>
<p>It would be desirable to extend the filteroperations to at least other RGB spaces, such as display-p3; provided this can be done
in an opt-in manner, without Web-incompatible changes to existing content. Currently, the SVG WG is focussed on documenting existing implementations rather than extending SVG.</p>
<section>
<h4>Open Issues</h4>
<ul>
<li><a href="https://github.com/w3c/ColorWeb-CG/issues/6">Filters and WCG</a></li>
<li><a href="https://github.com/w3c/fxtf-drafts/issues/364">How to handle feColorMatrix with type=saturate and values outside a 0..1 range?</a></li>
<li><a href="https://github.com/w3c/fxtf-drafts/issues/326">Clarify color-interpolation-filters behavior on feMerge</a></li>
</ul>
</section>
</section>
<section>
<h3>HTML color input</h3>
<p>
The HTML input element has a color type, <input type="color">
which allows the user to pick or otherwise indicate a color.
The picker is constrained to produce what HTML calls a
<a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#simple-colour">'simple color'</a>
such as '#123456'. This is limited to sRGB, and 8 bits per component precision.
</p>
<blockquote>
A simple color consists of three 8-bit numbers in the range 0..255,
representing the red, green, and blue components of the color respectively,
in the sRGB color space.
</blockquote>
<section>
<h4>Open issues</h4>
<ul>
<li><a href="https://github.com/whatwg/html/issues/3400">Allow <input type="color"> to give an alpha channel?</a> is also discussing WCG and higher precision than 8bits/component. Not considering HDR at this time.</li>
</ul>
</section>
</section>
</section>
<section>
<h2>Device Capabilities and APIs</h2>
<section>
<h3>Media Capabilities API</h3>
<p>
Media Capabilities [[media-capabilities]] is a draft specification
being developed by the Media Working Group. It intends to provide APIs
to allow websites to make an optimal decision when picking audiovisual
media content for the user. The APIs will expose information about the
decoding and encoding capabilities for a given format but also output
capabilities to find the best match based on the device's display.
</p>
<p>
The API is a replacement for the existing <code>canPlayType()</code>
function in HTML [canplaytype], and <code>isTypeSupported()</code> in
Media Source Extensions [[media-source]].
</p>
<p>
The Introduction document [media-capabilities-intro] gives a good
explanation of the problem that this API is trying to solve.
</p>
<section>
<h4>Open Issues</h4>
<p>
There are a number of open issues where the Color on the Web CG
could usefully provide input.
</p>
<ul>
<li>
<a href="https://github.com/w3c/media-capabilities/issues/10">Need
to add EOTF support for HDR</a>
</li>
<li>
<a href="https://github.com/WICG/media-capabilities/issues/14">
Distinguish video rendering and screen support for color gamut</a>
</li>
<li>
<a href=">https://github.com/WICG/media-capabilities/issues/67">
Define an audio or video configuration by supplying the init
segment</a>
</li>
<li><a href="https://github.com/w3c/media-capabilities/issues/136">DolbyVision HDR Metadata</a></li>
<li><a href="https://github.com/w3c/media-capabilities/issues/135">hdrSupported - Screen.video or simply Screen?</a></li>
<li><a href="https://github.com/w3c/media-capabilities/issues/119">Add Support for Querying HDR & 4K Video Display Capabilities</a></li>
</ul>
</section>
</section>
<section>
<h3>CSS Media Queries</h3>
<p>
Media Queries 4 [[mediaqueries-4]] allow authors to test and query
values or features of the browser or display device, independent of
the document being rendered. They are used in the CSS
<code>@media</code> rule to conditionally apply styles to a document,
and in various other contexts and languages, such as HTML and
JavaScript.
<a href="https://drafts.csswg.org/mediaqueries-4/#color-gamut">
Section 6.4</a> describes the <code>color-gamut</code> feature, which
describes the approximate range of colors that are supported by the
browser and output device.
</p>
<p>
Media Queries 5 [[mediaqueries-5]]
also allows authors to test and query
the ambient light level (<code>dim | normal | washed</code>),
although the assumption seems to be
that <code>dim</code> means
"excessive contrast and brightness would be distracting or uncomfortable"
rather than
"standard viewing conditions for HDR content".
The enumeration is,
deliberately,
not tied to specific light levels,
although ambient light sensors are mentioned.
</p>
<p>
Media Queries 5 also adds
<a href="https://drafts.csswg.org/mediaqueries-5/#dynamic-range"><code>dynamic-range</code></a> and
<a href="https://drafts.csswg.org/mediaqueries-5/#video-dynamic-range"><code>video-dynamic-range </code> features</a>, both with the values <code>standard</code> and <code>high</code>,
for SDR and HDR respectively. The two queries can return different results
in the case of, for example, a 4k TV with HDR video plane and SDR content overlay plane.
</p>
<section>
<h4>Open Issues</h4>
<ul>
<li><a href="https://github.com/w3c/csswg-drafts/issues/3882">Detect all available color schemes</a> </li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/4471">Dealing with bi-plane (video/graphics) when reporting values</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/1727">Clarify definition and use cases for light-level feature</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/5045">In-gamut media query</a></li>
</ul>
</section>
</section>
<section>
<h3>CSSOM View Module</h3>
<p>The CSS Object Model View Module [[cssom-view-1]] has a
<a href="https://drafts.csswg.org/cssom-view/#the-screen-interface">screen interface</a>
with a <a href="https://drafts.csswg.org/cssom-view/#dom-screen-colordepth">colorDepth</a>
attribute which typically returns the value 24 for an 8 bits-per-component display.
An example in the specification combines colorDepth (with a value of 48!)
with a Media Query for the p3 gamut and unspecified "other checks"
to probe for an HDR screen.
</p>
<section>
<h4>Open Issues</h4>
<p>No open WCG or HDR issues. However,
CSSWG decided that the color-related aspects of the CSS OM
should migrate from that specification to CSS Color 4.
That migration is in progress, with <a href="https://drafts.csswg.org/css-color-4/#serializing-color-values">CSS Color 4 defining serialization of WCG colorspaces</a>.
</p>
</section>
</section>
<section>
<h3>CSS Typed OM Level 1</h3>
<p>The CSS Typed OM Level 1 [[css-typed-om]]
is an extensible API for the CSSOM that reduces
the burden of manipulating a CSS property's value via string manipulation.
It does so by exposing CSS values as typed JavaScript objects
rather than strings. There is <a href="https://github.com/w3c/css-houdini-drafts/blob/master/css-typed-om/README.md">an explainer document</a>.
</p>
<section>
<h4>Open Issues</h4>
<p>There is current discussion on extending the CSS Typed OM
for WCG and perhaps HDR color.
Helper functions to calculate luminance contrast (for WCAG) are also in scope.</p>
<p>There is <a href="https://colorjs.io/">initial prototyping work</a> for an object-oriented,
typed, CSS Color model.</p>
<ul>
<li><a href="https://github.com/w3c/css-houdini-drafts/issues/989">Color conversion and contrast ratio</a></li>
<li><a href="https://github.com/w3c/css-houdini-drafts/issues/1014">Inputs for the CSSColorValue constructors</a></li>
</ul>
</section>
</section>
</section>
<section>
<h2>Timed Text</h2>
<p>Timed Text Markup Language [[TTML2]] has a
<a href="https://www.w3.org/TR/ttml/#style-attribute-color">tts:color attribute</a>
whose <a href="https://www.w3.org/TR/ttml/#style-value-color">type</a>
is defined to be a value in sRGB, with 8-bit percomponent precision.
Titles in TTML are thus SDR.</p>
<p>However, subtitles are composited onto video content
and TTML does provide a (non-normative)
<a href="https://www.w3.org/TR/ttml/#hdr-compositing">Appendix Q
High Dynamic Range Compositing</a>
which gives equations for converting the sRGB values into either
<a href="https://www.w3.org/TR/ttml/#pq-hdr">PQ</a> or
<a href="https://www.w3.org/TR/ttml/#hlg-hdr">HLG</a>
for compositing onto HDR video.</p>
<p>Realizing that sRGB is defined to have a peak luminance
of 80 cd/m² in theory,
and a somewhat higher value in practice,
TTML also provides a
<a href="https://www.w3.org/TR/ttml/#style-attribute-luminanceGain">tts:luminanceGain</a>
attribute to boost that value for systems (such as PQ)
which require an absolute luminance value.
</p>
<section>
<h4>Open Issues</h4>
<ul>
<li><a href="https://github.com/w3c/ttml2/issues/1119">Add non-normative Appendix to cover SDR compositing</a> </li>
<li><a href="https://github.com/w3c/ttml2/issues/1118">Add informative note to tts:luminanceGain recommending that the content author override the initial value.</a> </li>
<li><a href="https://github.com/w3c/ttml2/issues/1070">Gamma approximation in luminance gain</a> </li>
</ul>
</section>
</section>
<section>
<h2>Static Image Formats</h2>
<section>
<h3>Requirements</h3>
<p>
A static image format is required to store graphics (both camera-capture
and artificially generated). Suggested use cases include, but are not
limited to:
</p>
<ul>
<li>
Video catch-up website layout objects e.g., a content provider log
rendered by a browser UI on a television
</li>
<li>
Images of programme content shown on websites
</li>
</ul>
<p>
Any such graphics format would need to:
</p>
<ul>
<li>
Store the information with sufficient bit-depth to allow correct
display of HDR material
</li>
<li>
Allow use of the correct primaries and white point
</li>
<li>
Allow use of the correct transfer function
</li>
</ul>
<p>
Knowledge of the image primaries allows correct display of color on all
displays, including displays which would need to apply a gamut reduction
to the image.
</p>
<p>
ICC Profiles store data which allows the correct mapping of captured
data to/from an all encompassing color space and from/to the all
encompassing color space to a display device. Version 4 has only a
D50 based color space and lookup-table based transforms. Version 5
allows different color working spaces and an algorithmic calculator
for the transforms. Version 5 is not well supported.
</p>
<p class="note">
Open questions: How can we define an ICC / ICCMax profile for HLG?
If we define an ICC / ICCMax profile for HLG, how can we test it?
Lars Borg has written an HLG profile.
</p>
<p>
Netflix have published a blog post [[netflix-hdr]] that describes their
approach for static images.
</p>
<p>HDR-oriented <a href="https://afontenot.github.io/image-formats-comparison/#bath-from-alexandra-park&avif=s&png=s">image-formats-comparision</a></p>
</section>
<section>
<h3>Candidates</h3>
<section>
<h4>PNG</h4>
<p>
Portable Network Graphics (PNG) can
store graphics using 16-bits per channel and it is possible to store the
primaries and white point. Two methods of storing the transfer function
exist: the storage of a value for gamma, and the storage of an ICC
profile. The first method, storage of gamma would allow a backwards
compatible image to be displayed on non-HDR monitors. The second would
allow the correct display of this image on an HDR display.
A new, HDR-specific tag (with values "HLG" and "PQ") could be a third option
</p>
<p>
The Timed Text Working Group has published a draft specification
[[png-hdr-pq]] that extends the PNG format to include an iCCP chunk with
the name "ITUR_2100_PQ_FULL". The chunk contains a given ICC profile,
linked from the specification, although this profile is not actually
used, and only its presence is used to enable external rendering of the
PQ encoded image by the platform. See
<a href="https://lists.w3.org/Archives/Public/public-colorweb/2017May/0001.html">
this discussion</a> on the Color on the Web CG mailing list.
</p>
</section>
<section>
<h4>AVIF</h4>
<p>Mozilla bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1634741">AVIF (AV1 Image File Format): ICC profile support</a></p>
</section>
</section>
</section>
<section>
<h2>WebGL</h2>
<p class="note">
TODO: (might be moot, see WebGPU)
</p>
<section>
<h4>Open Issues</h4>
<ul>
<li><a href="https://github.com/KhronosGroup/WebGL/issues/2508">Issues needing to be solved in WEBGL_video_texture proposal </a></li>
</ul>
</section>
</section>
<section>
<h2>WebGPU</h2>
<p>The GPU on the Web Working Group develops the WebGPU API [[webgpu]],
a more modern version of WebGL. The draft spec does not mention "color spaces".
It has an RGBA color object, which consists of four double-precision floats.
It therefore has the potential to cover HDR, as well as WCG;
but the meaning of the values, their range, transfer function,
and colorspace is currently undefined.
However, a passing mention of the
naming convention for texture formats
<a href="https://gpuweb.github.io/gpuweb/#texture-formats">seems to indicate
that both gamma-corrected and linear sRGB are supported,
with conversion on-the-fly.</a>
</p>
<section>
<h3>Open Issues</h3>
<ul>
<li><a href="https://github.com/w3c/ColorWeb-CG/issues/8">WebGPU, WCG and HDR</a></li>
</ul>
</section>
</section>
<section>
<h2>Recommendations</h2>
<p class="note">
TODO: ...
</p>
</section>
<!-- To be added somewhere
MQ5 add ambient light level dim | normal | washed
https://drafts.csswg.org/mediaqueries-5/#light-level
-->
</body>
</html>