hdr-canvas 0.1.1 → 0.1.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hdr-canvas",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "HDR capable HTML canvas",
   "main": "dist/hdr-canvas.cjs",
   "module": "dist/hdr-canvas.js",
@@ -74,10 +74,10 @@
     "@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.83",
     "@types/jsdom": "^27.0.0",
     "@types/semver": "^7.7.1",
     "@types/three": "^0.181.0",
@@ -107,6 +107,7 @@
     "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

@@ -9,6 +9,7 @@ import { REVISION, HalfFloatType } from 'three/src/constants.js';
  *
  * @class
  * @augments {WebGPUBackend}
+ * @deprecated Use WebGPUBackend instead
  */
 
 class HDRWebGPUBackend extends WebGPUBackend {

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 {
   /**