[css-color-hdr] Added sample code for rec2100 colorspaces

Author: svgeesus

css-color-hdr-1/ICtCp.js

@@ -1,6 +1,6 @@
 
 function XYZ_to_ICtCp (XYZ) {
-	// convert an array of absolute, D65 XYZ to the ICtCp form of LMS
+    // convert an array of absolute, D65 XYZ to the ICtCp form of LMS
 
     // The matrix below includes the 4% crosstalk components
     // and is from the procedure in the Dolby "What is ICtCp" paper"
@@ -32,17 +32,17 @@ function LMStoICtCp (LMS) {
         [ 17933 / 4096, -17390 / 4096,  -543 / 4096 ],
     ];
 
-	// apply the PQ EOTF
-	// we can't ever be dividing by zero because of the "1 +" in the denominator
-	let PQLMS = LMS.map (function (val) {
-		let num = c1 + (c2 * ((val / 10000) ** m1));
-		let denom = 1 + (c3 * ((val / 10000) ** m1));
+    // apply the PQ EOTF
+    // we can't ever be dividing by zero because of the "1 +" in the denominator
+    let PQLMS = LMS.map (function (val) {
+        let num = c1 + (c2 * ((val / 10000) ** m1));
+        let denom = 1 + (c3 * ((val / 10000) ** m1));
 
-		return (num / denom)  ** m2;
-	});
+        return (num / denom)  ** m2;
+    });
 
-	// LMS to IPT, with rotation for Y'C'bC'r compatibility
-	return multiplyMatrices(M, PQLMS);
+    // LMS to IPT, with rotation for Y'C'bC'r compatibility
+    return multiplyMatrices(M, PQLMS);
 }
 
 function ICtCp_to_XYZ (ICtCp) {
@@ -55,7 +55,7 @@ function ICtCp_to_XYZ (ICtCp) {
     ];
 
     let LMS = ICtCptoLMS(ICtCp);
-	return multiplyMatrices(M, LMS);
+    return multiplyMatrices(M, LMS);
 }
 
 function ICtCptoLMS (ICtCp) {
@@ -72,14 +72,14 @@ function ICtCptoLMS (ICtCp) {
         [ 0.9999999999999998,  0.5600313357106791, -0.3206271749873188 ],
     ];
 
-	let PQLMS = multiplyMatrices(M, ICtCp);
+    let PQLMS = multiplyMatrices(M, ICtCp);
 
-	// Undo PQ encoding, From BT.2124-0 Annex 2 Conversion 3
-	let LMS = PQLMS.map (function (val) {
-		let num  = Math.max((val ** im2) - c1, 0);
-		let denom = (c2 - (c3 * (val ** im2)));
-		return 10000 * ((num / denom) ** im1);
-	});
+    // Undo PQ encoding, From BT.2124-0 Annex 2 Conversion 3
+    let LMS = PQLMS.map (function (val) {
+        let num  = Math.max((val ** im2) - c1, 0);
+        let denom = (c2 - (c3 * (val ** im2)));
+        return 10000 * ((num / denom) ** im1);
+    });
 
-	return LMS;
+    return LMS;
 }

css-color-hdr-1/Overview.bs

@@ -1074,6 +1074,37 @@ Serializing values of the ''color()'' function</h3>
 	as the ones used in ''ICtCp'',
 	take care to use the right ones!
 
+<h3 id="rec2100-linear_code">
+	Sample code for ''rec2100-linear''
+</h3>
+
+The BT.2020 and BT.2100 color spaces 
+use the same RGB primaries and white point,
+and both place media white at a component value of 1.0.
+
+<pre class="include-code lang-javascript">
+	path: rec2100-linear.js
+	highlight: js
+</pre>
+
+<h3 id="rec2100-pq_code">
+	Sample code for ''rec2100-pq''
+</h3>
+
+<pre class="include-code lang-javascript">
+	path: rec2100-pq.js
+	highlight: js
+</pre>
+
+<h3 id="rec2100-pq_code">
+	Sample code for ''rec2100-hlg''
+</h3>
+
+<pre class="include-code lang-javascript">
+	path: rec2100-hlg.js
+	highlight: js
+</pre>
+
 <h3 id="ictcp_code">
 	Sample code for ''ICtCp''
 </h3>

css-color-hdr-1/rec2100-hlg.js

@@ -0,0 +1,54 @@
+function XYZ_to_hlg_2100(XYZ) {
+    // convert an array of D65 XYZ to HLG-encoded BT.2100 RGB
+    // such that [0,0,0] is black and [0.75,0.75,0.75] is media white
+
+    let linRGB = XYZ_to_lin_2100(XYZ);
+    return hlg_encode(linRGB);
+}
+
+function hlg_2100_to_XYZ(RGB) {
+    // convert an array of PQ-encoded BT.2100 RGB values
+    // to D65 XYZ
+
+    let linRGB = hlg_decode(RGB);
+    return lin_2100_to_XYZ(linRGB);
+}
+
+function hlg_encode(RGB) {
+
+    const a = 0.17883277;
+    const b = 0.28466892; // 1 - (4 * a)
+    const c = 0.55991073; // 0.5 - a * Math.log(4 *a)
+    const scale = 3.7743;    // Place 18% grey at HLG 0.38, so media white at 0.75
+
+    return RGB.map(function (val) {
+        // first scale to put linear-light media white at 1/3
+        val /= scale;
+        // now the HLG OETF
+        // ITU-R BT.2390-10 p.23
+        // 6.1 The hybrid log-gamma opto-electronic transfer function (OETF)
+        if (val <= 1 / 12) {
+            return spow(3 * val, 0.5);
+        }
+        return a * Math.log(12 * val - b) + c;
+    });
+}
+
+function hlg_decode(RGB) {
+
+    const a = 0.17883277;
+    const b = 0.28466892; // 1 - (4 * a)
+    const c = 0.55991073; // 0.5 - a * Math.log(4 *a)
+    const scale = 3.7743;    // Place 18% grey at HLG 0.38, so media white at 0.75
+
+    return RGB.map(function (val) {
+        // first the HLG EOTF
+        // ITU-R BT.2390-10 p.30 section
+        // 6.3 The hybrid log-gamma electro-optical transfer function (EOTF)
+        // Then scale by 3 so media white is 1.0
+        if (val <= 0.5) {
+            return (val ** 2) / 3 * scale;
+        }
+        return ((Math.exp((val - c) / a) + b) / 12) * scale;
+    });
+}

css-color-hdr-1/rec2100-linear.js

@@ -0,0 +1,16 @@
+// These functions use the color conversion functions from CSS Color 4
+
+function XYZ_to_lin_2100(XYZ) {
+    // convert an array of D65 XYZ to linear-light BT.2100 RGB
+    // such that [0,0,0] is black and [1,1,1] is media white.
+    // component values greater than 1 indicate HDR colors
+
+    return  XYZ_to_lin_2020(XYZ);
+}
+
+function lin_2100_to_XYZ(RGB) {
+    // convert an array of linear-light BT.2100 RGB values
+    // to D65 XYZ
+
+    return lin_2020_to_XYZ(RGB);
+}

css-color-hdr-1/rec2100-pq.js

@@ -0,0 +1,53 @@
+function XYZ_to_pq_2100(XYZ) {
+    // convert an array of D65 XYZ to PQ-encoded BT.2100 RGB
+    // such that [0,0,0] is black and [1,1,1] is 10,000 cd/m^2 white;
+    // media white is at [0.5807,0.5807,0.5807] (to four significant figures).
+
+    let linRGB = XYZ_to_lin_2100(XYZ);
+    return pq_encode(linRGB);
+}
+
+function pq_2100_to_XYZ(RGB) {
+    // convert an array of PQ-encoded BT.2100 RGB values
+    // to D65 XYZ
+
+    let linRGB = pq_decode(RGB);
+    return lin_2100_to_XYZ(linRGB);
+}
+
+function pq_encode(RGB) {
+
+    const Yw = 203;    // absolute luminance of media white, cd/m²
+    const n = 2610 / (2 ** 14);
+    const m = 2523 / (2 ** 5);
+    const c1 = 3424 / (2 ** 12);
+    const c2 = 2413 / (2 ** 7);
+    const c3 = 2392 / (2 ** 7);
+
+    // given PQ encoded component in range [0, 1]
+    // return media-white relative linear-light
+    return RGB.map(function (val) {
+        let x = Math.max(val * Yw / 10000, 0);     // absolute luminance of peak white is 10,000 cd/m².
+        let num = (c1 + (c2 * (x ** n)));
+        let denom = (1 + (c3 * (x ** n)));
+
+        return ((num / denom)  ** m);
+    });
+}
+
+function pq_decode(RGB) {
+
+    const Yw = 203;    // absolute luminance of media white, cd/m²
+    const ninv = (2 ** 14) / 2610;
+    const minv = (2 ** 5) / 2523;
+    const c1 = 3424 / (2 ** 12);
+    const c2 = 2413 / (2 ** 7);
+    const c3 = 2392 / (2 ** 7);
+
+    // given PQ encoded component in range [0, 1]
+    // return media-white relative linear-light
+    return RGB.map(function (val) {
+        let x = ((Math.max(((val ** minv) - c1), 0) / (c2 - (c3 * (val ** minv)))) ** ninv);
+        return (x * 10000 / Yw);     // luminance relative to diffuse white, [0, 70 or so].
+    });
+}