hdr-canvas 0.0.7
Install from the command line:
Learn more about npm packages
$ npm install @cmahnke/hdr-canvas@0.0.7
Install via package.json:
"@cmahnke/hdr-canvas": "0.0.7"
About this version
This module contains a collection of functions and classes to work with the HDR support for HTML canvas elements in chromium based (like Chrome, Edge, Opera and Brave) browsers.
This should only be considered as proof of concept or alpha code, don't use it in production environments!
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;
}This can be useful to add a warning (using the fillText() method) to the canvas if it doesn't support HDR content.
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 });See this blog post for an example in action, requires a Chromium based browser (like Chrome, Edge, Opera and Brave) and a HDR-enable monitor.
The following things might be improved:
- Try to detect change of screen for HDR detection
- Improve speed
- Provide WebWorker
- Documentation
- Link to browser HDR support
- Document
Uint16Image
