hdr-canvas 0.1.0 → 0.1.2

package/docs/release-notes-0.1.0.md

@@ -2,18 +2,18 @@
 
 # Introduction
 
-Since the last release many areas of handling HDR contet in the browser have evolved.
-Most notably is certainly the introduction of the `Float16Array` in the `ImageData` construtor:
+Since the last release many areas of handling HDR content in the browser have evolved.
+Most notably is certainly the introduction of the `Float16Array` in the `ImageData` constructor:
 
-- The [WhatWG spec](https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagedataarray), [MDN](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData#syntax) and [BCD]([new ImageData(new Float16Array(4), 1, 1, {pixelFormat:"rgba-float16"})](https://github.com/mdn/browser-compat-data/issues/27547)) have been updated accordingly. You can test your own browser using `new ImageData(new Float16Array(4), 1, 1, {pixelFormat:"rgba-float16"})`.
+- The [WhatWG spec](https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagedataarray), [MDN](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData#syntax) and [BCD](https://github.com/mdn/browser-compat-data/issues/27547)) have been updated accordingly. You can test your own browser using `new ImageData(new Float16Array(4), 1, 1, {pixelFormat:"rgba-float16"})`.
   - Still open in [Firefox](https://bugzil.la/1958830)
   - Hidden behind flag in [Safari](https://webkit.org/b/291196)
-  - Chromium has implemented it starting with [137](https://source.chromium.org/chromium/chromium/src/+/refs/tags/137.0.7104.0:third_party/blink/renderer/core/html/canvas/image_data.idl): \*\*The `ImageData` constructor only acceppts `Float16Array` instead of `Uint16Array`. This makes older versions of this modue obsolute, since they targeted the chromium specific solution.
+  - Chromium has implemented it starting with [137](https://source.chromium.org/chromium/chromium/src/+/refs/tags/137.0.7104.0:third_party/blink/renderer/core/html/canvas/image_data.idl): \*\*The `ImageData` constructor only accepts `Float16Array` instead of `Uint16Array`. This makes older versions of this module obsolete, since they targeted the chromium specific solution.
   - If Safari enables it by default it will be also in the [Typescript DOM types](https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/2107)
 
 As [@reitowo](https://github.com/reitowo) pointed out, there has been a change to the `getContext("2d")` method. The key `pixelFormat` has been replaced by `colorType`.
 
-In parallel threre have been changes to the UltraHDR image format, especially te encoding of gain map matadata. While this used to be don in XMP it's now done according to ISO 21496-1. This ihas been adopted by Google and Apple in newer OS versions like Android 15 and iOS 18 to avoid cross-platform fragmentation. The [UltraHDR Library](https://github.com/google/libultrahdr) has already changed to ussin the [ISO format as default](https://github.com/google/libultrahdr/blob/main/docs/building.md).
+In parallel there have been changes to the UltraHDR image format, especially the encoding of gain map metadata. While this used to be don in XMP it's now done according to ISO 21496-1. This has been adopted by Google and Apple in newer OS versions like Android 15 and iOS 18 to avoid cross-platform fragmentation. The [UltraHDR Library](https://github.com/google/libultrahdr) has already changed to using the [ISO format as default](https://github.com/google/libultrahdr/blob/main/docs/building.md).
 
 Currently the ThreeJS UHDR loader doesn't know how to handle this change, see [mrdoob/three.js#32293](https://github.com/mrdoob/three.js/issues/32293).
 
@@ -29,7 +29,7 @@ The documentation have been greatly improved, there is now also a [site](https:/
 
 ## Examples
 
-The examples fro the blog are now part of this repository:
+The examples from the blog are now part of this repository:
 
 - [`tests/site/assets/ts/hdr-three.js.ts`](tests/site/assets/ts/hdr-three.js.ts) - Three JS with HDR texture
 - [`tests/site/assets/ts/image-slider.ts`](tests/site/assets/ts/image-slider.ts) - Generated HDR content

package/docs/release-notes-0.1.1.md

@@ -0,0 +1,19 @@
+# `hdr-canvas` 0.1.1
+
+# Introduction
+
+Since the last release many areas of handling HDR content in the browser have evolved. This also applies for WebGPU renderings using ThreeJS
+
+The changes in initializing a `canvas for a Rendere are described in the [explainer](https://github.com/ccameron-chromium/webgpu-hdr/blob/main/EXPLAINER.md).
+
+The important change is the renaming from `colorMetadata` to:
+
+```
+toneMapping: { mode: "extended" }
+```
+
+This is also reflected by the ThreeJS API so a custom HDR WebGPU Renderer and Backend aren't strictly needed anymore. They will be removed soon.
+
+# Key Changes & New Features
+
+- Fix ThreeJS HDR Renderer and Backend

package/docs/release-notes-0.1.2.md

@@ -0,0 +1,16 @@
+# `hdr-canvas` 0.1.2
+
+# Introduction
+
+The color scaling of `Float16Image` was off.
+
+This is certainly the last release before the removal:
+
+- of the ThreeJS components, they aren't needed anymore.
+- of the Uint16Image it's outdated and only still works since Chrom(e|ium) due to backwards compatibility.
+- the support for Chrom(e|ium) < 140
+- of the bundle UMD build since ESM is the way to go.
+
+# Key Changes & New Features
+
+- Fix `Float16Image` color scaling

package/docs/release.md

@@ -0,0 +1,13 @@
+# How to release a new version
+
+# Create a tag
+
+```
+git tag 0.1.0
+```
+
+# Create a release on GitHub
+
+- https://github.com/cmahnke/hdr-canvas/releases/new
+- Add Title and notes
+- Check "Set as the latest release"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hdr-canvas",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "HDR capable HTML canvas",
   "main": "dist/hdr-canvas.cjs",
   "module": "dist/hdr-canvas.js",
@@ -74,14 +74,14 @@
     "@eslint/markdown": "^7.5.1",
     "@fontsource-utils/scss": "^0.2.2",
     "@fontsource-variable/league-spartan": "^5.2.8",
+    "@napi-rs/canvas": "^0.1.83",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@napi-rs/canvas": "^0.1.82",
     "@types/jsdom": "^27.0.0",
     "@types/semver": "^7.7.1",
     "@types/three": "^0.181.0",
-    "@typescript-eslint/parser": "^8.46.4",
+    "@typescript-eslint/parser": "^8.48.0",
     "@typescript/lib-dom": "npm:@types/web@^0.0.294",
     "better-docs": "^2.7.3",
     "eslint": "^9.39.1",
@@ -89,24 +89,25 @@
     "globals": "^16.5.0",
     "jsdoc": "^4.0.5",
     "jsdom": "^27.2.0",
-    "knip": "^5.69.1",
+    "knip": "^5.70.2",
     "pkg-types": "^2.3.0",
-    "prettier": "^3.6.2",
-    "rimraf": "^6.1.0",
-    "rollup": "^4.53.2",
-    "rollup-plugin-dts": "^6.2.3",
-    "sass": "^1.94.0",
+    "prettier": "^3.7.1",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.53.3",
+    "rollup-plugin-dts": "^6.3.0",
+    "sass": "^1.94.2",
     "semver": "^7.7.3",
-    "stylelint": "^16.25.0",
+    "stylelint": "^16.26.1",
     "stylelint-config-standard-scss": "^16.0.0",
-    "three": "^0.181.1",
+    "three": "^0.181.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.2",
-    "vitest": "^4.0.9"
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.14"
   },
   "dependencies": {
+    "@petamoriken/float16": "^3.9.3",
     "colorjs.io": "^0.5.2"
   }
 }

package/scripts/check.sh

@@ -10,3 +10,4 @@ npx rollup --config
 npx prettier --check .
 npm run build
 npm run site
+npm publish --dry-run

package/src/Float16Image.ts

@@ -2,6 +2,7 @@ import { HDRImage } from "./HDRImage";
 
 import Color from "colorjs.io";
 import type { Coords } from "colorjs.io";
+import { f16round } from "@petamoriken/float16";
 
 import type { HDRPredefinedColorSpace, HDRImageData, HDRImagePixelCallback } from "./types/HDRCanvas.d.ts";
 
@@ -97,6 +98,7 @@ export class Float16Image extends HDRImage {
    *
    * @param {Uint8ClampedArray} pixel - An array of four 8-bit numbers (R, G, B, A).
    * @returns {Float16Array} The converted 16-bit pixel in the `rec2100-hlg` color space.
+   * @deprecated
    */
   static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Float16Array {
     const colorJScolorSpace = <string>Float16Image.COLORSPACES["rec2100-hlg" as HDRPredefinedColorSpace];
@@ -126,13 +128,14 @@ export class Float16Image extends HDRImage {
    * @returns {Float16Array} The converted 16-bit pixel data.
    */
   static convertArrayToRec2100_hlg(data: Uint8ClampedArray): Float16Array {
-    const uint16Data = new Float16Array(data.length);
-    for (let i = 0; i < data.length; i += 4) {
-      const rgbPixel: Uint8ClampedArray = data.slice(i, i + 4);
-      const pixel = Float16Image.convertPixelToRec2100_hlg(rgbPixel);
-      uint16Data.set(pixel, i);
+    const float16Array = new Float16Array(data.length);
+
+    for (let i = 0; i < data.length; i++) {
+      const normalizedFloat = data[i] / 255.0;
+      float16Array[i] = f16round(normalizedFloat);
     }
-    return uint16Data;
+
+    return float16Array;
   }
 
   /**
@@ -142,7 +145,17 @@ export class Float16Image extends HDRImage {
    */
   pixelCallback(fn: HDRImagePixelCallback) {
     for (let i = 0; i < this.data.length; i += 4) {
-      this.data.set(fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]), i);
+      const pixel = fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]);
+
+      //TODO: Check if we should implicitly should operate on int pixel vaulues
+      /*
+      for (let i = 0; i < pixel.length; i++) {
+        const normalizedFloat = pixel[i] / 255.0;
+        pixel[i] = f16round(normalizedFloat);
+      }
+      */
+
+      this.data.set(pixel, i);
     }
   }
 

package/src/Uint16Image.ts

@@ -9,6 +9,7 @@ import type { HDRPredefinedColorSpace, HDRImageData, HDRImagePixelCallback } fro
  * Represents an image using a `Uint16Array` for its pixel data,
  * providing support for high dynamic range (HDR) color spaces.
  * **Don't use this anymore, it's just here for migrating to Float16Array!**
+ * @deprecated Use Uint16Image instead
  */
 export class Uint16Image extends HDRImage {
   /** The raw pixel data stored as a `Uint16Array`. */

package/src/hdr-canvas.ts

@@ -15,6 +15,7 @@ export function getHdrOptions(): CanvasRenderingContext2DHDRSettings {
   if (browserMajorVersion == null) {
     console.warn(`Unsupported / untested browser (${navigator.userAgent}) detected - using more modern defaults`);
     hdrOptions["colorType"] = "float16";
+    hdrOptions["toneMapping"] = { mode: "extended" };
   } else {
     if (browserMajorVersion < 134) {
       console.warn("Older Chrome / chromium based browser detected, using older `pixelFormat`");
@@ -22,7 +23,6 @@ export function getHdrOptions(): CanvasRenderingContext2DHDRSettings {
       hdrOptions["pixelFormat"] = "float16";
     }
   }
-
   return hdrOptions;
 }
 
@@ -34,7 +34,10 @@ export function getHdrOptions(): CanvasRenderingContext2DHDRSettings {
  * @returns {CanvasRenderingContext2DHDR | null} The 2D rendering context, or `null` if the context cannot be created. Can be cast down to `CanvasRenderingContext2D` or `RenderingContext`
  */
 export function initHDRCanvas(canvas: HDRHTMLCanvasElement): CanvasRenderingContext2DHDR | null {
-  canvas.configureHighDynamicRange({ mode: "extended" });
+  const browserMajorVersion = getBrowserVersion();
+  if (browserMajorVersion !== null && browserMajorVersion < 134) {
+    canvas.configureHighDynamicRange({ mode: "extended" });
+  }
   const ctx = canvas.getContext("2d", getHdrOptions());
   return ctx as CanvasRenderingContext2DHDR;
 }

package/src/types/HDRCanvas.d.ts

@@ -21,6 +21,8 @@ interface HDRImageData {
 // See https://github.com/w3c/ColorWeb-CG/blob/main/hdr_html_canvas_element.md
 // "rec2100-display-linear" is left out because of mapping issues
 type HDRPredefinedColorSpace = "display-p3" | "srgb" | "rec2100-hlg" | "rec2100-pq";
+type HDRCanvasToneMapping = { mode: HDRCanvasToneMappingMode };
+type HDRCanvasToneMappingMode = "standard" | "extended";
 
 //enum HDRPredefinedColorSpace {"display-p3", "srgb", "rec2100-hlg", "rec2100-pq", "rec2100-display-linear"};
 
@@ -43,11 +45,14 @@ interface CanvasRenderingContext2DHDRSettings {
   colorSpace: HDRPredefinedColorSpace;
   pixelFormat?: "uint8" | "float16";
   colorType?: "unorm8" | "float16";
+  toneMapping?: HDRCanvasToneMapping;
 }
 
 export {
   HDRHTMLCanvasElement,
   HDRPredefinedColorSpace,
+  HDRCanvasToneMapping,
+  HDRCanvasToneMappingMode,
   HDRImageDataArray,
   HDRImageData,
   HDRImagePixelCallback,

package/three/HDRWebGPUBackend.js

@@ -1,5 +1,5 @@
 import WebGPUBackend from 'three/src/renderers/webgpu/WebGPUBackend.js';
-import { GPUFeatureName, GPUTextureFormat } from 'three/src/renderers/webgpu/utils/WebGPUConstants.js';
+import { REVISION, HalfFloatType } from 'three/src/constants.js';
 
 /**
  * An HDR-enabled WebGPU backend for three.js, extending the standard `WebGPUBackend`.
@@ -9,100 +9,63 @@ import { GPUFeatureName, GPUTextureFormat } from 'three/src/renderers/webgpu/uti
  *
  * @class
  * @augments {WebGPUBackend}
+ * @deprecated Use WebGPUBackend instead
  */
 
 class HDRWebGPUBackend extends WebGPUBackend {
 
-  /**
-   * Initializes the backend, including requesting a WebGPU device and configuring the context.
-   * This method overrides the parent `init` to set a specific HDR color space.
-   *
-   * @param {WebGLRenderer} renderer - The three.js renderer instance.
-   * @returns {Promise<void>} A promise that resolves when the initialization is complete.
-   */
-  // See https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPUBackend.js#L123
-  async init( renderer ) {
+  get context() {
 
-		await super.init( renderer );
+    const canvasTarget = this.renderer.getCanvasTarget();
+    const canvasData = this.get( canvasTarget );
 
-		//
+    let context = canvasData.context;
 
-		const parameters = this.parameters;
+    if ( context === undefined ) {
 
-		// create the device if it is not passed with parameters
+      const parameters = this.parameters;
 
-		let device;
+      if ( canvasTarget.isDefaultCanvasTarget === true && parameters.context !== undefined ) {
 
-		if ( parameters.device === undefined ) {
+        context = parameters.context;
 
-			const adapterOptions = {
-				powerPreference: parameters.powerPreference
-			};
+      } else {
 
-			const adapter = await navigator.gpu.requestAdapter( adapterOptions );
+        context = canvasTarget.domElement.getContext( 'webgpu' );
 
-			if ( adapter === null ) {
+      }
 
-				throw new Error( 'WebGPUBackend: Unable to create WebGPU adapter.' );
+      // OffscreenCanvas does not have setAttribute, see #22811
+      if ( 'setAttribute' in canvasTarget.domElement ) canvasTarget.domElement.setAttribute( 'data-engine', `three.js r${ REVISION } webgpu` );
 
-			}
+      const alphaMode = parameters.alpha ? 'premultiplied' : 'opaque';
 
-			// feature support
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const toneMappingMode = parameters.outputType === HalfFloatType ? 'extended' : 'standard';
 
-			const features = Object.values( GPUFeatureName );
+      // See https://github.com/ccameron-chromium/webgpu-hdr/blob/main/EXPLAINER.md#example-use
+      /**
+       * Configures the WebGPU context with HDR settings.
+       * The `colorSpace` is set to `rec2100-hlg` for High Dynamic Range support.
+       * @see {@link https://github.com/ccameron-chromium/webgpu-hdr/blob/main/EXPLAINER.md#example-use | WebGPU HDR Explainer}
+       */
 
-			const supportedFeatures = [];
+      context.configure( {
+        device: this.device,
+        format: this.utils.getPreferredCanvasFormat(),
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+        alphaMode: alphaMode,
+        colorSpace: "rec2100-hlg",
+        toneMapping: { mode: "extended" }
+      } );
 
-			for ( const name of features ) {
+      canvasData.context = context;
 
-				if ( adapter.features.has( name ) ) {
+    }
 
-					supportedFeatures.push( name );
+    return context;
 
-				}
-
-			}
-
-			const deviceDescriptor = {
-				requiredFeatures: supportedFeatures,
-				requiredLimits: parameters.requiredLimits
-			};
-
-			device = await adapter.requestDevice( deviceDescriptor );
-
-		} else {
-
-			device = parameters.device;
-
-		}
-
-		const context = ( parameters.context !== undefined ) ? parameters.context : renderer.domElement.getContext( 'webgpu' );
-
-		this.device = device;
-		this.context = context;
-
-		const alphaMode = parameters.alpha ? 'premultiplied' : 'opaque';
-
-    // See https://github.com/ccameron-chromium/webgpu-hdr/blob/main/EXPLAINER.md#example-use
-    /**
-     * Configures the WebGPU context with HDR settings.
-     * The `colorSpace` is set to `rec2100-hlg` for High Dynamic Range support.
-     * @see {@link https://github.com/ccameron-chromium/webgpu-hdr/blob/main/EXPLAINER.md#example-use | WebGPU HDR Explainer}
-     */
-		this.context.configure( {
-			device: this.device,
-			format: GPUTextureFormat.BGRA8Unorm,
-      //format: GPUTextureFormat.RGBA16Float,
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
-			alphaMode: alphaMode,
-      //colorSpace: "display-p3",
-      colorSpace: "rec2100-hlg",
-      colorMetadata: { mode:"extended" }
-		} );
-
-		this.updateSize();
-
-	}
+  }
 
 }
 

package/three/HDRWebGPURenderer.js

@@ -12,6 +12,7 @@ import HDRWebGPUBackend from './HDRWebGPUBackend.js';
  * @fires contextrestored
  * @fires contextlost
  * @see {@link https://threejs.org/docs/#api/en/renderers/WebGLRenderer | WebGLRenderer}
+ * @deprecated Use WebGPURenderer instead
  */
 class HDRWebGPURenderer extends Renderer {
   /**