hdr-canvas 0.0.4
Install from the command line:
Learn more about npm packages
$ npm install @cmahnke/hdr-canvas@0.0.4
Install via package.json:
"@cmahnke/hdr-canvas": "0.0.4"
About this version
This Module contains a collection of functions and classes to work with the HDR support for HTML canvas elements i chrome based browsers. This should only be considered as proof of concept or alpha code, don't use it in production environments.
This module is intended as a proof of concept (PoC), especially operations on the ImageData arrays are not optimized, e.g. quite slow.
Import the required function(s):
import { checkHDR, checkHDRCanvas } from "hdr-canvas";The functions return true if HDR is supported, example:
const canvas = document.getElementById("canvas");
if (checkHDRCanvas()) {
canvas.configureHighDynamicRange({ mode: "extended" });
} else {
console.debug("hdr not supported");
return;
}if (checkHDRCanvas()) {
hdrCanvas.innerText = "HDR Canvas are supported";
hdrCanvas.style.color = "green";
} else {
hdrCanvas.innerText = "HDR Canvas are not supported";
hdrCanvas.style.color = "red";
}The HDR canvas support is activated by initializing a canvas context using the following snippet:
const colorSpace = "rec2100-hlg";
canvas.configureHighDynamicRange({ mode: "extended" });
const ctx = canvas.getContext("2d", {
colorSpace: colorSpace,
pixelFormat: "float16",
});The snippet above is also available as function:
import { initHDRCanvas } from "hdr-canvas";Afterwards one can use ImageData with a float16 array, first the Uint16Image needs to be imported:
import { Uint16Image } from "hdr-canvas";Thisexample assumes image to be a HTMLImageElement including an existing image.
const offscreen = new OffscreenCanvas(image.width, image.height);
const loadCtx = offscreen.getContext("2d");
loadCtx.drawImage(image, 0, 0);
const imData = loadCtx.getImageData(0, 0, image.width, image.height);
console.log(imData);
var hdrCanvas = document.createElement("canvas");
hdrCanvas.width = image.width;
hdrCanvas.height = image.height;
const rec210hglImage = Uint16Image.fromImageData(imData);
const ctx = initHDRCanvas(hdrCanvas);
ctx.putImageData(rec210hglImage.getImageData(), 0, 0);Note: Make sure to have Three.js added as a dependency.
This is just a drop in replacement for the regular WebGPURenderer of Three.js.
import HDRWebGPURenderer from "hdr-canvas/three/HDRWebGPURenderer.js";Use it as you'll do with a WebGPURenderer.
renderer = new HDRWebGPURenderer({ canvas: canvas, antialias: true });The following things might be improved:
- Try to detect change of screen for HDR detection
- Improve speed
- Provide WebWorker
