hdr-canvas 0.1.0 → 0.1.1

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.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.1",
   "description": "HDR capable HTML canvas",
   "main": "dist/hdr-canvas.cjs",
   "module": "dist/hdr-canvas.js",
@@ -77,11 +77,11 @@
     "@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",
+    "@napi-rs/canvas": "^0.1.83",
     "@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,22 +89,22 @@
     "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": {
     "colorjs.io": "^0.5.2"

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`.
@@ -13,96 +13,58 @@ import { GPUFeatureName, GPUTextureFormat } from 'three/src/renderers/webgpu/uti
 
 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();
-
-	}
+  }
 
 }