hdr-canvas 0.1.1 → 0.2.0

package/README.md

@@ -15,7 +15,7 @@ All changes and a bit of context are part of the [release notes for 0.1.0](docs/
 Import the required function(s):
 
 ```javascript
-import { checkHDR, checkHDRCanvas } from "hdr-canvas";
+import { checkHDR, checkHDRCanvas, checkHDRVideo, checkFloat16Array, checkHDRBitDepth } from "hdr-canvas";
 ```
 
 ## Example `checkHDRCanvas()`
@@ -37,7 +37,7 @@ This can be useful to add a warning (using the [`fillText()`](https://developer.
 ## Example `checkHDRCanvas()`
 
 ```javascript
-const hdrCanvasStatus = document.getElementById("hdr-check-status")! as HTMLDivElement;
+const hdrCanvasStatus = document.getElementById("hdr-canvas-check")! as HTMLDivElement;
 if (checkHDRCanvas()) {
   hdrCanvasStatus.innerText = "HDR Canvas are supported";
   hdrCanvasStatus.style.color = "green";
@@ -50,7 +50,7 @@ if (checkHDRCanvas()) {
 ## Example `checkHDRVideo()`
 
 ```javascript
-const hdrCanvasStatus = document.getElementById("hdr-check-status")! as HTMLDivElement;
+const hdrCanvasStatus = document.getElementById("hdr-video-check")! as HTMLDivElement;
 if (checkHDRVideo()) {
   hdrCanvasStatus.innerText = "HDR Video is supported";
   hdrCanvasStatus.style.color = "green";
@@ -60,6 +60,29 @@ if (checkHDRVideo()) {
 }
 ```
 
+## Example `checkFloat16Array()`
+
+```javascript
+const float16ArrayStatus = document.getElementById("float16array-check")! as HTMLDivElement;
+if (checkHDRVideo()) {
+  hdrCanvasStatus.innerText = "Float16Array in Image constructor is supported";
+  hdrCanvasStatus.style.color = "green";
+} else {
+  hdrCanvasStatus.innerText = "Float16Array in Image constructor is not supported";
+  hdrCanvasStatus.style.color = "red";
+}
+```
+
+## Example `checkHDRBitDepth()`
+
+This can be used to check if the current screen supports HDR.
+
+```javascript
+setInterval(() => {
+  console.log(checkHDRBitDepth());
+}, 500);
+```
+
 # Canvas
 
 **Note: Currently the Chrome flag `enable-experimental-web-platform-features` needs to be enabled to have HDR support for the `canvas` element. You need to tell your visitors about that.**
@@ -161,6 +184,10 @@ Use it as you'll do with a `WebGPURenderer`.
 renderer = new HDRWebGPURenderer({ canvas: canvas, antialias: true });
 ```
 
+## Three.js WebGPU
+
+Starting with R180 the WebGPU supports the `toneMapping` which is the succesor of `colorMetadata`. But currently this is still limited in colorspaces.
+
 ## Updating textures
 
 Starting from Three.js version 167 you need to fix imported UHDR Textures, otherwise they will appear black:
@@ -223,17 +250,12 @@ All examples requires a Chromium based browser (like Chrome, Edge, Opera and Bra
 
 The following things might be improved:
 
-- [x] Change `pixelFormat` in `HTMLCanvasElement.getContext("2d")` to `colorType` (["unorm8", "float16"]) while keeping some downward compatibility - [#151](https://github.com/cmahnke/hdr-canvas/issues/151)
-- [ ] Try to detect change of screen for HDR detection - [#107](https://github.com/cmahnke/hdr-canvas/issues/107)
-- [ ] Remove `Uint16Image`
+- [x] Try to detect change of screen for HDR detection - [#107](https://github.com/cmahnke/hdr-canvas/issues/107) - implemented but not documented
 - [ ] Improve speed
   - [ ] Provide WebWorker
 - [ ] Documentation
   - [ ] Link to browser HDR support
-  - [x] Document `Uint16Image`
-- [ ] Tests and examples
-  - [x] Provide examples from blog
-  - [x] Provide simple sanity tests
+  - [ ] Give a overview on current status
 
 # References
 

package/dist/@types/hdr-canvas.d.ts

@@ -1,5 +1,3 @@
-import { ColorTypes } from 'colorjs.io';
-
 // See https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
 /// <reference lib="dom" />
 
@@ -44,7 +42,6 @@ interface CanvasRenderingContext2DHDR extends CanvasRenderingContext2D {}
 declare abstract class HDRImage {
     static DEFAULT_COLORSPACE: HDRPredefinedColorSpace;
     static SDR_MULTIPLIER: number;
-    static COLORSPACES: Record<HDRPredefinedColorSpace, ColorTypes>;
     data: HDRImageDataArray;
     height: number;
     width: number;
@@ -61,21 +58,6 @@ declare abstract class HDRImage {
     clone(): this;
 }
 
-declare class Uint16Image extends HDRImage {
-    data: Uint16Array;
-    colorSpace: HDRPredefinedColorSpace;
-    constructor(width: number, height: number, colorspace?: string);
-    fill(color: number[]): this | undefined;
-    static scaleUint8ToUint16(val: number): number;
-    getImageData(): ImageData | null;
-    static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Uint16Array;
-    static convertArrayToRec2100_hlg(data: Uint8ClampedArray): Uint16Array;
-    pixelCallback(fn: HDRImagePixelCallback): void;
-    static fromImageData(imageData: HDRImageData): Uint16Image;
-    static fromURL(url: URL): Promise<Uint16Image | undefined>;
-    setImageData(imageData: HDRImageData): void;
-}
-
 declare class Float16Image extends HDRImage {
     data: Float16Array;
     static DEFAULT_PIXELFORMAT: ImageDataPixelFormat;
@@ -85,7 +67,6 @@ declare class Float16Image extends HDRImage {
     fill(color: number[]): this | undefined;
     static scaleUint8ToFloat16(val: number): number;
     getImageData(): ImageData | null;
-    static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Float16Array;
     static convertArrayToRec2100_hlg(data: Uint8ClampedArray): Float16Array;
     pixelCallback(fn: HDRImagePixelCallback): void;
     static fromImageData(imageData: HDRImageData): Float16Image;
@@ -95,11 +76,14 @@ declare class Float16Image extends HDRImage {
     clone(): this;
 }
 
+declare function checkHDRVideo(): boolean;
 declare function checkHDR(): boolean;
 declare function checkHDRCanvas(): boolean;
+declare function checkFloat16Array(): boolean;
+declare function checkHDRBitDepth(): boolean;
 
 declare function initHDRCanvas(canvas: HDRHTMLCanvasElement): CanvasRenderingContext2DHDR | null;
 declare function defaultGetContextHDR(): void;
 declare function resetGetContext(): void;
 
-export { Float16Image, HDRImage, Uint16Image, checkHDR, checkHDRCanvas, defaultGetContextHDR, initHDRCanvas, resetGetContext };
+export { Float16Image, HDRImage, checkFloat16Array, checkHDR, checkHDRBitDepth, checkHDRCanvas, checkHDRVideo, defaultGetContextHDR, initHDRCanvas, resetGetContext };