hdr-canvas 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hdr-canvas",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "HDR capable HTML canvas",
   "main": "dist/hdr-canvas.js",
   "files": [
@@ -40,19 +40,19 @@
   "homepage": "https://github.com/cmahnke/hdr-canvas#readme",
   "devDependencies": {
     "@eslint/js": "^9.6.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/eslint__js": "^8.42.3",
-    "eslint": "^9.9.0",
+    "eslint": "^9.13.0",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "rollup": "^4.21.0",
+    "rollup": "^4.24.0",
     "rollup-plugin-dts": "^6.1.1",
-    "three": "^0.167.1",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.2.0"
+    "three": "^0.169.0",
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.10.0"
   },
   "dependencies": {
     "colorjs.io": "^0.5.2"

package/src/Uint16Image.ts

@@ -1,12 +1,9 @@
 import Color from "colorjs.io";
 import type { Coords, ColorTypes } from "colorjs.io";
 
-type Uint16ImagePixelCallback = (
-  red: number,
-  green: number,
-  blue: number,
-  alpha: number,
-) => Uint16Array;
+import type { HDRPredefinedColorSpace, HDRImageData } from "./types/HDRCanvas.d.ts";
+
+type Uint16ImagePixelCallback = (red: number, green: number, blue: number, alpha: number) => Uint16Array;
 
 /*
 interface ColorSpaceMapping {
@@ -24,7 +21,7 @@ export class Uint16Image {
     "rec2100-hlg": "rec2100hlg",
     "display-p3": "p3",
     srgb: "sRGB",
-    "rec2100-pq": "rec2100pq",
+    "rec2100-pq": "rec2100pq"
   };
   colorSpace: HDRPredefinedColorSpace;
 
@@ -76,25 +73,20 @@ export class Uint16Image {
     if (this.data === undefined || this.data === null) {
       return null;
     }
-    return new ImageData(
-      this.data as unknown as Uint8ClampedArray,
-      this.width,
-      this.height,
-      { colorSpace: this.colorSpace as PredefinedColorSpace },
-    );
+    return new ImageData(this.data as unknown as Uint8ClampedArray, this.width, this.height, {
+      colorSpace: this.colorSpace as PredefinedColorSpace
+    });
   }
 
   static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Uint16Array {
-    const colorJScolorSpace = <string>(
-      Uint16Image.COLORSPACES["rec2100-hlg" as HDRPredefinedColorSpace]
-    );
+    const colorJScolorSpace = <string>Uint16Image.COLORSPACES["rec2100-hlg" as HDRPredefinedColorSpace];
 
     const srgbColor = new Color(
       "srgb",
       Array.from(pixel.slice(0, 3)).map((band: number) => {
         return band / 255;
       }) as Coords,
-      pixel[3] / 255,
+      pixel[3] / 255
     );
     const rec2100hlgColor = srgbColor.to(colorJScolorSpace);
     const hlg: Array<number> = rec2100hlgColor.coords.map((band: number) => {
@@ -118,10 +110,7 @@ export class Uint16Image {
 
   pixelCallback(fn: Uint16ImagePixelCallback) {
     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,
-      );
+      this.data.set(fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]), i);
     }
   }
 
@@ -146,9 +135,7 @@ export class Uint16Image {
   static fromImageData(imageData: HDRImageData): Uint16Image {
     const i = new Uint16Image(imageData.width, imageData.height);
     if (imageData.colorSpace == "srgb") {
-      i.data = Uint16Image.convertArrayToRec2100_hlg(
-        <Uint8ClampedArray>imageData.data,
-      );
+      i.data = Uint16Image.convertArrayToRec2100_hlg(<Uint8ClampedArray>imageData.data);
     } else if (imageData.colorSpace == Uint16Image.DEFAULT_COLORSPACE) {
       i.data = <Uint16Array>imageData.data;
     } else {
@@ -158,22 +145,18 @@ export class Uint16Image {
   }
 
   static async fromURL(url: URL): Promise<Uint16Image | undefined> {
-    return Uint16Image.loadSDRImageData(url).then(
-      (data: HDRImageData | undefined) => {
-        if (data !== undefined) {
-          return Uint16Image.fromImageData(data);
-        }
-      },
-    );
+    return Uint16Image.loadSDRImageData(url).then((data: HDRImageData | undefined) => {
+      if (data !== undefined) {
+        return Uint16Image.fromImageData(data);
+      }
+    });
   }
 
   setImageData(imageData: HDRImageData): void {
     this.width = imageData.width;
     this.height = imageData.height;
     if (imageData.colorSpace == "srgb") {
-      this.data = Uint16Image.convertArrayToRec2100_hlg(
-        <Uint8ClampedArray>imageData.data,
-      );
+      this.data = Uint16Image.convertArrayToRec2100_hlg(<Uint8ClampedArray>imageData.data);
     } else if (imageData.colorSpace == Uint16Image.DEFAULT_COLORSPACE) {
       this.data = <Uint16Array>imageData.data;
     } else {

package/src/hdr-canvas.ts

@@ -1,5 +1,7 @@
 import {Uint16Image} from './Uint16Image'
 
+import type {HDRHTMLCanvasElement} from './types/HDRCanvas.d.ts'
+
 const hdr_options = {colorSpace: Uint16Image.DEFAULT_COLORSPACE, pixelFormat: 'float16'}
 
 export function initHDRCanvas(canvas : HDRHTMLCanvasElement) : RenderingContext | null {

package/src/hdr-check.ts

@@ -4,12 +4,8 @@ export function checkHDR(): boolean {
     const hdrSupported: boolean = bitsPerChannel > 8;
 
     //TODO: Test if this works as expected
-    const dynamicRangeHighMQ: boolean = window.matchMedia(
-      "(dynamic-range: high)",
-    ).matches;
-    const colorGamutMQ: boolean =
-      window.matchMedia("(color-gamut: rec2020)").matches ||
-      window.matchMedia("(color-gamut: p3)").matches;
+    const dynamicRangeHighMQ: boolean = window.matchMedia("(dynamic-range: high)").matches;
+    const colorGamutMQ: boolean = window.matchMedia("(color-gamut: rec2020)").matches || window.matchMedia("(color-gamut: p3)").matches;
     if (colorGamutMQ && dynamicRangeHighMQ) {
       if (bitsPerChannel !== Math.round(bitsPerChannel)) {
         // iOS bug
@@ -37,22 +33,24 @@ export function checkHDRCanvas(): boolean {
     if (!canvas.getContext) {
       return false;
     }
-    const ctx: CanvasRenderingContext2D | null = <CanvasRenderingContext2D>(
-      canvas.getContext("2d", {
-        colorSpace: colorSpace,
-        pixelFormat: "float16",
-      })
-    );
+    const ctx: CanvasRenderingContext2D | null = <CanvasRenderingContext2D>canvas.getContext("2d", {
+      colorSpace: colorSpace,
+      pixelFormat: "float16"
+    });
     //canvas.drawingBufferColorSpace = colorSpace;
     //canvas.unpackColorSpace = colorSpace;
     if (ctx === null) {
       return false;
     }
     return true;
+    /* eslint-disable no-console, @typescript-eslint/no-unused-vars */
   } catch (e) {
-    /* eslint-disable no-console */
-    console.error("Bad canvas ColorSpace test", e);
-    /* eslint-enable */
+    //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;
   }
+  /* eslint-enable */
 }

package/src/index.ts

@@ -1,7 +1,3 @@
 export { Uint16Image } from "./Uint16Image";
 export { checkHDR, checkHDRCanvas } from "./hdr-check";
-export {
-  initHDRCanvas,
-  defaultGetContextHDR,
-  resetGetContext,
-} from "./hdr-canvas";
+export { initHDRCanvas, defaultGetContextHDR, resetGetContext } from "./hdr-canvas";

package/src/{@types → types}/HDRCanvas.d.ts

@@ -1,4 +1,5 @@
 // See https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
+/// <reference lib="dom" />
 
 type HDRHTMLCanvasOptionsType = "mode";
 type HDRHTMLCanvasOptions = { [key in HDRHTMLCanvasOptionsType]?: string };
@@ -17,10 +18,8 @@ interface HDRImageData {
 
 // See https://github.com/w3c/ColorWeb-CG/blob/main/hdr_html_canvas_element.md
 // "rec2100-display-linear" is left out beacause of mapping issues
-type HDRPredefinedColorSpace =
-  | "display-p3"
-  | "srgb"
-  | "rec2100-hlg"
-  | "rec2100-pq";
+type HDRPredefinedColorSpace = "display-p3" | "srgb" | "rec2100-hlg" | "rec2100-pq";
 
 //enum HDRPredefinedColorSpace {"display-p3", "srgb", "rec2100-hlg", "rec2100-pq", "rec2100-display-linear"};
+
+export { HDRHTMLCanvasElement, HDRPredefinedColorSpace, HDRImageData };

package/three/HDRWebGPUBackend.js

@@ -1,5 +1,5 @@
-import WebGPUBackend from 'three/renderers/webgpu/WebGPUBackend.js';
-import { GPUFeatureName, GPUTextureFormat } from 'three/renderers/webgpu/utils/WebGPUConstants.js';
+import WebGPUBackend from 'three/src/renderers/webgpu/WebGPUBackend.js';
+import { GPUFeatureName, GPUTextureFormat } from 'three/src/renderers/webgpu/utils/WebGPUConstants.js';
 
 class HDRWebGPUBackend extends WebGPUBackend {
 

package/three/HDRWebGPURenderer.js

@@ -1,7 +1,7 @@
 import WebGPU from './WebGPU.js';
 
-import Renderer from 'three/renderers/common/Renderer.js';
-import WebGLBackend from 'three/renderers/webgl/WebGLBackend.js';
+import Renderer from 'three/src/renderers/common/Renderer.js';
+import WebGLBackend from 'three/src/renderers/webgl-fallback/WebGLBackend.js';
 import HDRWebGPUBackend from './HDRWebGPUBackend.js';
 
 class HDRWebGPURenderer extends Renderer {