hdr-canvas 0.0.1

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "hdr-canvas",
+  "version": "0.0.1",
+  "description": "HDR capable HTML canvas",
+  "main": "dist/hdr-canvas.js",
+  "files": [
+    "dist/hdr-canvas.d.ts",
+    "dist/hdr-canvas.js",
+    "dist/hdr-canvas.js.map",
+    "dist/hdr-canvas.min.js",
+    "dist/hdr-canvas.min.js.map",
+    "dist/hdr-canvas.cjs",
+    "dist/hdr-canvas.cjs.map",
+    "three",
+    "src"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint . -c eslint.config.mjs --report-unused-disable-directives",
+    "tsc": "tsc",
+    "build": "rimraf ./dist ./build && tsc && rollup --config",
+    "clean": "rimraf ./dist ./build",
+    "format": "prettier . --check"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cmahnke/hdr-canvas.git"
+  },
+  "keywords": [
+    "HDR",
+    "canvas",
+    "3D",
+    "Three.js"
+  ],
+  "author": "Christian Mahnke",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cmahnke/hdr-canvas/issues"
+  },
+  "homepage": "https://github.com/cmahnke/hdr-canvas#readme",
+  "devDependencies": {
+    "@eslint/js": "^9.6.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/eslint__js": "^8.42.3",
+    "eslint": "^9.6.0",
+    "prettier": "^3.3.2",
+    "rimraf": "^5.0.7",
+    "rollup": "^4.18.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "three": "^0.166.1",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.0-alpha.10"
+  },
+  "dependencies": {
+    "colorjs.io": "^0.5.2"
+  }
+}

package/src/@types/HDRCanvas.d.ts

@@ -0,0 +1,25 @@
+// See https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
+
+type HDRHTMLCanvasOptionsType = "mode";
+type HDRHTMLCanvasOptions = { [key in HDRHTMLCanvasOptionsType]?: string };
+
+interface HDRHTMLCanvasElement extends HTMLCanvasElement {
+  configureHighDynamicRange(options: HDRHTMLCanvasOptions): void;
+}
+
+interface HDRImageData {
+  readonly colorSpace: PredefinedColorSpace;
+  readonly data: Uint8ClampedArray | Uint16Array;
+  readonly height: number;
+  readonly width: number;
+}
+
+// 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";
+
+//enum HDRPredefinedColorSpace {"display-p3", "srgb", "rec2100-hlg", "rec2100-pq", "rec2100-display-linear"};

package/src/Uint16Image.ts

@@ -0,0 +1,156 @@
+import Color from "colorjs.io";
+import type { Coords, ColorTypes } from "colorjs.io";
+
+type Uint16ImagePixelCallback = (
+  red: number,
+  green: number,
+  blue: number,
+  alpha: number,
+) => Uint16Array;
+
+/*
+interface ColorSpaceMapping {
+  [key: HDRPredefinedColorSpace]: string
+}
+*/
+
+export class Uint16Image {
+  height: number;
+  width: number;
+  data: Uint16Array;
+  static DEFAULT_COLORSPACE: HDRPredefinedColorSpace = "rec2100-hlg";
+  static SDR_MULTIPLIER = 2 ** 16 - 1; //(2**16 - 1)
+  static COLORSPACES: Record<HDRPredefinedColorSpace, ColorTypes> = {
+    "rec2100-hlg": "rec2100hlg",
+    "display-p3": "p3",
+    srgb: "sRGB",
+    "rec2100-pq": "rec2100pq",
+  };
+  colorSpace: HDRPredefinedColorSpace;
+
+  constructor(width: number, height: number, colorspace?: string) {
+    if (colorspace === undefined || colorspace === null) {
+      this.colorSpace = Uint16Image.DEFAULT_COLORSPACE;
+    } else {
+      this.colorSpace = colorspace as HDRPredefinedColorSpace;
+    }
+
+    this.height = height;
+    this.width = width;
+    this.data = new Uint16Array(height * width * 4);
+  }
+
+  fill(color: number[]): Uint16Image | undefined {
+    if (color.length != 4) {
+      return;
+    }
+    for (let i = 0; i < this.data.length; i += 4) {
+      this.data[i] = color[0];
+      this.data[i + 1] = color[1];
+      this.data[i + 2] = color[2];
+      this.data[i + 3] = color[3];
+    }
+    return this;
+  }
+
+  getPixel(w: number, h: number): Uint16Array {
+    const pos = (h * this.width + w) * 4;
+
+    return this.data.slice(pos, pos + 4);
+  }
+
+  setPixel(w: number, h: number, px: number[]): void {
+    const pos = (h * this.width + w) * 4;
+    this.data[pos + 0] = px[0];
+    this.data[pos + 1] = px[1];
+    this.data[pos + 2] = px[2];
+    this.data[pos + 3] = px[3];
+  }
+
+  // Only use this for aplha, since it doesn't to color space conversions
+  static scaleUint8ToUint16(val: number): number {
+    return (val << 8) | val;
+  }
+
+  getImageData(): ImageData | null {
+    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 },
+    );
+  }
+
+  static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Uint16Array {
+    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,
+    );
+    const rec2100hlgColor = srgbColor.to(colorJScolorSpace);
+    const hlg: Array<number> = rec2100hlgColor.coords.map((band: number) => {
+      return Math.round(band * Uint16Image.SDR_MULTIPLIER);
+    });
+    // Readd alpha
+    hlg.push(rec2100hlgColor.alpha * Uint16Image.SDR_MULTIPLIER);
+
+    return Uint16Array.from(hlg);
+  }
+
+  static convertArrayToRec2100_hlg(data: Uint8ClampedArray): Uint16Array {
+    const uint16Data = new Uint16Array(data.length);
+    for (let i = 0; i < data.length; i += 4) {
+      const rgbPixel: Uint8ClampedArray = data.slice(i, i + 4);
+      const pixel = Uint16Image.convertPixelToRec2100_hlg(rgbPixel);
+      uint16Data.set(pixel, i);
+    }
+    return uint16Data;
+  }
+
+  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,
+      );
+    }
+  }
+
+  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,
+      );
+    } else if (imageData.colorSpace == Uint16Image.DEFAULT_COLORSPACE) {
+      i.data = <Uint16Array>imageData.data;
+    } else {
+      throw new Error(`ColorSpace ${imageData.colorSpace} isn't supported!`);
+    }
+    return i;
+  }
+
+  setImageData(imageData: HDRImageData): void {
+    this.width = imageData.width;
+    this.height = imageData.height;
+    if (imageData.colorSpace == "srgb") {
+      this.data = Uint16Image.convertArrayToRec2100_hlg(
+        <Uint8ClampedArray>imageData.data,
+      );
+    } else if (imageData.colorSpace == Uint16Image.DEFAULT_COLORSPACE) {
+      this.data = <Uint16Array>imageData.data;
+    } else {
+      throw new Error(`ColorSpace ${imageData.colorSpace} isn't supported!`);
+    }
+    this.colorSpace = Uint16Image.DEFAULT_COLORSPACE;
+  }
+}

package/src/hdr-canvas.ts

@@ -0,0 +1,7 @@
+import {Uint16Image} from './Uint16Image'
+
+export function initHDRCanvas(canvas : HDRHTMLCanvasElement) : RenderingContext | null {
+  canvas.configureHighDynamicRange({mode: 'extended'});
+  const ctx = canvas.getContext("2d", {colorSpace: Uint16Image.DEFAULT_COLORSPACE, pixelFormat: 'float16'});
+  return ctx;
+}

package/src/hdr-check.ts

@@ -0,0 +1,58 @@
+export function checkHDR(): boolean {
+  try {
+    const bitsPerChannel: number = screen.colorDepth / 3;
+    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;
+    if (colorGamutMQ && dynamicRangeHighMQ) {
+      if (bitsPerChannel !== Math.round(bitsPerChannel)) {
+        // iOS bug
+        return false;
+      } else if (hdrSupported) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+    return false;
+  } catch (e) {
+    /* eslint-disable no-console */
+    console.error("Bad window.screen test", e);
+    /* eslint-enable */
+    return false;
+  }
+}
+
+export function checkHDRCanvas(): boolean {
+  const colorSpace: string = "rec2100-pq";
+
+  try {
+    const canvas: HTMLCanvasElement = document.createElement("canvas");
+    if (!canvas.getContext) {
+      return false;
+    }
+    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;
+  } catch (e) {
+    /* eslint-disable no-console */
+    console.error("Bad canvas ColorSpace test", e);
+    /* eslint-enable */
+    return false;
+  }
+}

package/src/index.ts

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

package/three/HDRWebGPUBackend.js

@@ -0,0 +1,87 @@
+import WebGPUBackend from 'three/addons/renderers/webgpu/WebGPUBackend.js';
+import { GPUFeatureName, GPUTextureFormat, GPUTextureUsage } from 'three/addons/renderers/webgpu/utils/WebGPUConstants.js';
+
+class HDRWebGPUBackend extends WebGPUBackend {
+
+  // See https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPUBackend.js#L123
+  async init( renderer ) {
+
+		await super.init( renderer );
+
+		//
+
+		const parameters = this.parameters;
+
+		// create the device if it is not passed with parameters
+
+		let device;
+
+		if ( parameters.device === undefined ) {
+
+			const adapterOptions = {
+				powerPreference: parameters.powerPreference
+			};
+
+			const adapter = await navigator.gpu.requestAdapter( adapterOptions );
+
+			if ( adapter === null ) {
+
+				throw new Error( 'WebGPUBackend: Unable to create WebGPU adapter.' );
+
+			}
+
+			// feature support
+
+			const features = Object.values( GPUFeatureName );
+
+			const supportedFeatures = [];
+
+			for ( const name of features ) {
+
+				if ( adapter.features.has( name ) ) {
+
+					supportedFeatures.push( name );
+
+				}
+
+			}
+
+			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
+		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();
+
+	}
+
+}
+
+export default HDRWebGPUBackend;

package/three/HDRWebGPURenderer.js

@@ -0,0 +1,40 @@
+import WebGPU from 'three/addons/capabilities/WebGPU.js';
+
+import Renderer from 'three/addons/renderers/common/Renderer.js';
+import WebGLBackend from 'three/addons/renderers/webgl/WebGLBackend.js';
+import HDRWebGPUBackend from './HDRWebGPUBackend.js';
+
+class HDRWebGPURenderer extends Renderer {
+  constructor( parameters = {} ) {
+
+		let BackendClass;
+
+		if ( parameters.forceWebGL ) {
+
+			BackendClass = WebGLBackend;
+
+		} else if ( WebGPU.isAvailable() ) {
+
+			BackendClass = HDRWebGPUBackend;
+
+		} else {
+
+			BackendClass = WebGLBackend;
+
+      /* eslint-disable no-console */
+			console.warn( 'THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.' );
+      /* eslint-enable no-console */
+
+		}
+
+		const backend = new BackendClass( parameters );
+
+		super( backend, parameters );
+
+		this.isWebGPURenderer = true;
+
+	}
+
+}
+
+export default HDRWebGPURenderer;