hdr-canvas 0.0.9 → 0.0.10

package/README.md

@@ -4,6 +4,8 @@ This module contains a collection of functions and classes to work with the HDR
 
 **This should only be considered as proof of concept or alpha code, don't use it in production environments!**
 
+**Even if the display of HDR images works, the HDR support for the `canvas` element needs the browser flag `enable-experimental-web-platform-features` to be enabled. For example, open chrome://flags#enable-experimental-web-platform-features in Chrome to activate it.**
+
 **Especially operations on the `ImageData` arrays are not optimized, e.g. quite slow.**
 
 # Feature detection
@@ -44,6 +46,8 @@ if (checkHDRCanvas()) {
 
 # 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.**
+
 The HDR `canvas` support is activated by initializing a canvas context using the following snippet:
 
 ```javascript
@@ -51,7 +55,7 @@ const colorSpace = "rec2100-hlg";
 canvas.configureHighDynamicRange({ mode: "extended" });
 const ctx = canvas.getContext("2d", {
   colorSpace: colorSpace,
-  pixelFormat: "float16",
+  pixelFormat: "float16"
 });
 ```
 
@@ -63,6 +67,31 @@ The snippet above is also available as function:
 import { initHDRCanvas } from "hdr-canvas";
 ```
 
+## Implicit Canvas setup
+
+It's now also possible to use a HDR enabled Canvas by wrapping the browser internal `getContext()` function, by calling `defaultGetContextHDR()`.
+
+```
+import {defaultGetContextHDR, checkHDR, checkHDRCanvas} from 'hdr-canvas';
+
+if (checkHDR() && checkHDRCanvas()) {
+  defaultGetContextHDR();
+  console.log('Enabled HDR Canvas');
+}
+```
+
+**Note:** This example wraps the call to `defaultGetContextHDR()` into a check (`checkHDR() && checkHDRCanvas()`), because calling the function in a browser that isn't HDR-capable will break every subsequent call to `getContext()`.
+
+## Resetting default HDR canvas
+
+Use the method `resetGetContext()` to undo the changes by `defaultGetContextHDR()`.
+
+```
+import {resetGetContext} from 'hdr-canvas';
+
+resetGetContext();
+```
+
 ## Importing `Uint16Image`
 
 Afterwards one can use [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) with a `float16` array, first the `Uint16Image` needs to be imported:
@@ -73,7 +102,7 @@ import { Uint16Image } from "hdr-canvas";
 
 ## Example: Loading an image
 
-Thisexample assumes `image` to be a [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) including an existing image.
+This example assumes `image` to be a [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) including an existing image.
 
 ```javascript
 const offscreen = new OffscreenCanvas(image.width, image.height);
@@ -96,21 +125,66 @@ ctx.putImageData(rec210hglImage.getImageData(), 0, 0);
 
 **Note**: Make sure to have Three.js added as a dependency.
 
-This is just a drop in replacement for the regular `WebGPURenderer` of Three.js.
+This is just a drop-in-replacement for the regular `WebGPURenderer` of Three.js.
 
 ```javascript
 import HDRWebGPURenderer from "hdr-canvas/three/HDRWebGPURenderer.js";
 ```
 
+**Note:** Starting Three.js 167 the WebGPU renderer is the new default renderer. This has several consequences for the required imports. Use this import instead of the official one and if your using Vite _don't_ provide an import map of resolver alias configuration.
+
+```
+import * as THREE from 'three/src/Three.js';
+```
+
 Use it as you'll do with a `WebGPURenderer`.
 
 ```javascript
 renderer = new HDRWebGPURenderer({ canvas: canvas, antialias: true });
 ```
 
-# Example
+## Updating textures
+
+Starting from Three.js version 167 you need to fix imported UHDR Textures, otherwise they will appear black:
+
+```
+model = gltf.scene;
+model.traverse((element) => {
+  if (element?.material?.type != undefined) {
+    let targetMaterial = new THREE.MeshBasicMaterial();
+    THREE.MeshBasicMaterial.prototype.copy.call(targetMaterial, element.material);
+    element.material = targetMaterial;
+  }
+});
+scene.add(model);
+```
+
+## Compatibility
+
+This currently doesn't work with Firefox, due to missing support for HDR and only partial WebGPU support.
+One can import `WebGPU` and use also a HDR check to guard from errors:
+
+```
+import WebGPU from 'hdr-canvas/three/WebGPU.js';
+```
+
+Only use the provided renderer if the browser supports WebGPU and HDR:
+
+```
+if (WebGPU.isAvailable() && checkHDRCanvas()) {
+  renderer = new HDRWebGPURenderer({canvas: canvas, antialias: true});
+} else {
+  renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
+}
+```
+
+# Examples
+
+All examples requires a Chromium based browser (like Chrome, Edge, Opera and Brave) and a HDR-enable monitor.
 
-See [this](https://christianmahnke.de/en/post/hdr-image-analysis/) blog post for an example in action, requires a Chromium based browser (like Chrome, Edge, Opera and Brave) and a HDR-enable monitor.
+- [Contrast enhancement for UV images using HDR](https://christianmahnke.de/en/post/hdr-image-analysis/)
+- [HDR IIIF](https://christianmahnke.de/en/post/hdr-iiif/)
+- [Ultraviolet Photogrammetry](https://christianmahnke.de/en/post/uv-photogrammetry/)
 
 ---
 

package/dist/hdr-canvas.cjs

@@ -5752,6 +5752,18 @@ Color.extend(interpolation);
 Color.extend(contrastMethods);
 
 class Uint16Image {
+    height;
+    width;
+    data;
+    static DEFAULT_COLORSPACE = "rec2100-hlg";
+    static SDR_MULTIPLIER = 2 ** 16 - 1;
+    static COLORSPACES = {
+        "rec2100-hlg": "rec2100hlg",
+        "display-p3": "p3",
+        srgb: "sRGB",
+        "rec2100-pq": "rec2100pq"
+    };
+    colorSpace;
     constructor(width, height, colorspace) {
         if (colorspace === undefined || colorspace === null) {
             this.colorSpace = Uint16Image.DEFAULT_COLORSPACE;
@@ -5793,10 +5805,12 @@ class Uint16Image {
         if (this.data === undefined || this.data === null) {
             return null;
         }
-        return new ImageData(this.data, this.width, this.height, { colorSpace: this.colorSpace });
+        return new ImageData(this.data, this.width, this.height, {
+            colorSpace: this.colorSpace
+        });
     }
     static convertPixelToRec2100_hlg(pixel) {
-        const colorJScolorSpace = (Uint16Image.COLORSPACES["rec2100-hlg"]);
+        const colorJScolorSpace = Uint16Image.COLORSPACES["rec2100-hlg"];
         const srgbColor = new Color("srgb", Array.from(pixel.slice(0, 3)).map((band) => {
             return band / 255;
         }), pixel[3] / 255);
@@ -5831,11 +5845,11 @@ class Uint16Image {
             const { width, height } = bitmap;
             const offscreen = new OffscreenCanvas(width, height);
             const ctx = offscreen.getContext("2d");
-            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(bitmap, 0, 0);
+            ctx?.drawImage(bitmap, 0, 0);
             return ctx;
         })
             .then((ctx) => {
-            return ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(0, 0, ctx === null || ctx === void 0 ? void 0 : ctx.canvas.width, ctx === null || ctx === void 0 ? void 0 : ctx.canvas.height);
+            return ctx?.getImageData(0, 0, ctx?.canvas.width, ctx?.canvas.height);
         });
     }
     static fromImageData(imageData) {
@@ -5878,22 +5892,13 @@ class Uint16Image {
         return i;
     }
 }
-Uint16Image.DEFAULT_COLORSPACE = "rec2100-hlg";
-Uint16Image.SDR_MULTIPLIER = 2 ** 16 - 1;
-Uint16Image.COLORSPACES = {
-    "rec2100-hlg": "rec2100hlg",
-    "display-p3": "p3",
-    srgb: "sRGB",
-    "rec2100-pq": "rec2100pq",
-};
 
 function checkHDR() {
     try {
         const bitsPerChannel = screen.colorDepth / 3;
         const hdrSupported = bitsPerChannel > 8;
         const dynamicRangeHighMQ = window.matchMedia("(dynamic-range: high)").matches;
-        const colorGamutMQ = window.matchMedia("(color-gamut: rec2020)").matches ||
-            window.matchMedia("(color-gamut: p3)").matches;
+        const colorGamutMQ = window.matchMedia("(color-gamut: rec2020)").matches || window.matchMedia("(color-gamut: p3)").matches;
         if (colorGamutMQ && dynamicRangeHighMQ) {
             if (bitsPerChannel !== Math.round(bitsPerChannel)) {
                 return false;
@@ -5919,17 +5924,17 @@ function checkHDRCanvas() {
         if (!canvas.getContext) {
             return false;
         }
-        const ctx = (canvas.getContext("2d", {
+        const ctx = canvas.getContext("2d", {
             colorSpace: colorSpace,
-            pixelFormat: "float16",
-        }));
+            pixelFormat: "float16"
+        });
         if (ctx === null) {
             return false;
         }
         return true;
     }
     catch (e) {
-        console.error("Bad canvas ColorSpace test", e);
+        console.error("Bad canvas ColorSpace test - make sure that the Chromium browser flag 'enable-experimental-web-platform-features' has been enabled");
         return false;
     }
 }