Added check function

Author: cmahnke

README.md

@@ -15,7 +15,7 @@ All changes and a bit of context are part of the [release notes for 0.1.0](docs/
 Import the required function(s):
 
 ```javascript
-import { checkHDR, checkHDRCanvas, checkHDRVideo(), checkFloat16Array } from "hdr-canvas";
+import { checkHDR, checkHDRCanvas, checkHDRVideo, checkFloat16Array, checkHDRBitDepth } from "hdr-canvas";
 ```
 
 ## Example `checkHDRCanvas()`
@@ -73,6 +73,16 @@ if (checkHDRVideo()) {
 }
 ```
 
+## Example `checkHDRBitDepth()`
+
+This can be used to check if the current screen supports HDR.
+
+```javascript
+setInterval(() => {
+  console.log(checkHDRBitDepth());
+}, 500);
+```
+
 # Canvas
 
 **Note: Currently the Chrome flag `enable-experimental-web-platform-features` needs to be enabled to have HDR support for the `canvas` element. You need to tell your visitors about that.**
@@ -174,6 +184,10 @@ Use it as you'll do with a `WebGPURenderer`.
 renderer = new HDRWebGPURenderer({ canvas: canvas, antialias: true });
 ```
 
+## Three.js WebGPU
+
+Starting with R180 the WebGPU supports the `toneMapping` which is the succesor of `colorMetadata`.
+
 ## Updating textures
 
 Starting from Three.js version 167 you need to fix imported UHDR Textures, otherwise they will appear black:

src/Float16Image.ts

@@ -1,7 +1,7 @@
 import { HDRImage } from "./HDRImage";
 
 import Color from "colorjs.io";
-import type { Coords } from "colorjs.io";
+import type { Coords, ColorTypes } from "colorjs.io";
 import { f16round } from "@petamoriken/float16";
 
 import type { HDRPredefinedColorSpace, HDRImageData, HDRImagePixelCallback } from "./types/HDRCanvas.d.ts";
@@ -17,6 +17,14 @@ export class Float16Image extends HDRImage {
   /** The default pixel format for new images, set to "rgba-float16". */
   static DEFAULT_PIXELFORMAT: ImageDataPixelFormat = "rgba-float16";
 
+  /** A mapping of predefined HDR color space names to their corresponding `colorjs.io` string representations. */
+  static COLORSPACES: Record<HDRPredefinedColorSpace, ColorTypes> = {
+    "rec2100-hlg": "rec2100hlg",
+    "display-p3": "p3",
+    srgb: "sRGB",
+    "rec2100-pq": "rec2100pq"
+  };
+
   /** The color space of the image. */
   colorSpace: HDRPredefinedColorSpace;
   /** The pixel format of the image - usualy 'rgba-float16'. */

src/HDRImage.ts

@@ -1,23 +1,13 @@
 //import type { ImageData } from "./types/ImageData.d.ts";
 import type { HDRPredefinedColorSpace, HDRImageData, HDRImageDataArray, HDRImagePixelCallback } from "./types/HDRCanvas.d.ts";
 
-import type { ColorTypes } from "colorjs.io";
-
 export abstract class HDRImage {
   /** The default color space for new images, set to "rec2100-hlg". */
   static DEFAULT_COLORSPACE: HDRPredefinedColorSpace = "rec2100-hlg";
 
   /** A multiplier used for scaling 8-bit SDR values to 16-bit. */
   static SDR_MULTIPLIER = 2 ** 16 - 1; //(2**16 - 1)
 
-  /** A mapping of predefined HDR color space names to their corresponding `colorjs.io` string representations. */
-  static COLORSPACES: Record<HDRPredefinedColorSpace, ColorTypes> = {
-    "rec2100-hlg": "rec2100hlg",
-    "display-p3": "p3",
-    srgb: "sRGB",
-    "rec2100-pq": "rec2100pq"
-  };
-
   /** The raw pixel data stored as a `Float16Array`. */
   data: HDRImageDataArray;
   /** The height of the image in pixels. */

src/index.ts

@@ -1,4 +1,4 @@
 export { Float16Image } from "./Float16Image";
 export { HDRImage } from "./HDRImage";
-export { checkHDR, checkHDRVideo, checkHDRCanvas, checkFloat16Array } from "./hdr-check";
+export { checkHDR, checkHDRVideo, checkHDRCanvas, checkFloat16Array, checkHDRBitDepth } from "./hdr-check";
 export { initHDRCanvas, defaultGetContextHDR, resetGetContext } from "./hdr-canvas";

tests/site/assets/ts/main.ts

@@ -2,43 +2,29 @@ import { checkHDR, checkHDRVideo, checkHDRCanvas, checkFloat16Array, checkHDRBit
 import { initModel } from "./hdr-three.js";
 import { initCanvas } from "./image-slider.js";
 
+function setStatus(element: HTMLDivElement, status: boolean) {
+  if (status) {
+    element.classList.add("success");
+    element.classList.remove("fail");
+  } else {
+    element.classList.add("fail");
+    element.classList.remove("success");
+  }
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   const hdrCheck = document.getElementById("hdr-check")! as HTMLDivElement;
   const hdrVideoCheck = document.getElementById("hdr-video-check")! as HTMLDivElement;
   const hdrCanvasCheck = document.getElementById("hdr-canvas-check")! as HTMLDivElement;
   const float16arrayCheck = document.getElementById("float16array-check")! as HTMLDivElement;
   const screenCheck = document.getElementById("screen-check")! as HTMLDivElement;
 
-  if (checkHDR()) {
-    hdrCheck.classList.add("success");
-  } else {
-    hdrCheck.classList.add("fail");
-  }
-
-  if (checkHDRVideo()) {
-    hdrVideoCheck.classList.add("success");
-  } else {
-    hdrVideoCheck.classList.add("fail");
-  }
-
-  if (checkHDRCanvas()) {
-    hdrCanvasCheck.classList.add("success");
-  } else {
-    hdrCanvasCheck.classList.add("fail");
-  }
-
-  if (checkFloat16Array()) {
-    float16arrayCheck.classList.add("success");
-  } else {
-    float16arrayCheck.classList.add("fail");
-  }
-
   setInterval(() => {
-    if (checkHDRBitDepth()) {
-      screenCheck.classList.add("success");
-    } else {
-      screenCheck.classList.add("fail");
-    }
+    setStatus(hdrCheck, checkHDR());
+    setStatus(hdrVideoCheck, checkHDRVideo());
+    setStatus(hdrCanvasCheck, checkHDRCanvas());
+    setStatus(float16arrayCheck, checkFloat16Array());
+    setStatus(screenCheck, checkHDRBitDepth());
   }, 500);
 
   try {

tests/site/index.html

@@ -23,6 +23,12 @@ <h2>Feature detection</h2>
           <li><div class="hdr-check-result" id="float16array-check">Check for Float16Array Image constructor Support</div></li>
           <li><div class="hdr-check-result" id="screen-check">Check for screen hardware HDR Support</div></li>
         </ul>
+        <div>
+          Note that this might be a bit off:
+          <ul>
+            <li>On Chrome on Mac this might report HDR support if Display P§ is enabled, even when HDR itself is disabled.</li>
+          </ul>
+        </div>
       </div>
       <div class="model">
         <h2>Three.js HDR</h2>