search

image-js / fast-png

PNG image decoder and encoder written entirely in JavaScript
MIT License
334 stars 19 forks source link

Encoding 16 bit floating point data to BT.2100 PQ PNG file #40

Open hybridherbst opened 3 months ago

hybridherbst commented 3 months ago

Hey, I'm trying to figure out if one of the available PNG libraries is flexible enough to let me write HDR – BT.2100 PQ PNG files in the browser, coming from 16-bit floating point data (such as captured from a WebGL render target).

Here's an example of such a file – on Chrome on MacOS/Windows with a HDR display it will display in HDR in the browser:

lonely_road_afternoon_puresky_1k2

And here's example input (in EXR) for such a file: lonely_road_afternoon_puresky_1k.exr.zip

targos commented 3 months ago

Hello, it's possible to encode data from a Uint16Array using:

encode({
  width: imageWidth,
  height: imageHeight,
  data: imageDataUint16,
  depth: 16
  channels: numberOfChannels // (4 if RGBA data)
});

If I understand correctly, https://www.w3.org/TR/png-hdr-pq/ is the spec we would need to implement for the HDR format. I'm not sure if it's enough to add the new chunks or if the data needs to be transformed too.