Read out 16 bit image files for depth calculations

Questions
1

Meanwhile I have overcome many hurdles in my project. Now I found a new one. I would like to read out 16 bit image pixels. Why do I need this?
For depth values. I have a grayscale image and in gimp the pixels have decimal places as I want them. For example 12.7
How can I read out 16 bit image data?
“getImageData” is limited to 8 bits

//my 8 bit imageData read function
GetOffscreenImageData: function(image) {		
   const canvas = new OffscreenCanvas(image.width, image.height);
   const context = canvas.getContext('2d');
   context.drawImage( image, 0, 0 );

   return context.getImageData( 0, 0, image.width, image.height );
}

I don’t know if the textureLoader already makes reductions. So I thought to start all from the scretch. Starting with the imageloading:

const arrayBuffer = await((await fetch('./resources/maps/depth/depthtest1.png')).arrayBuffer());

But before I do unnecessary work I would like to ask if anyone has experience reading 16 bit greyscale image pixel values

2

I found a great solution.
There is a suitable framework called fast-png. You can download it from github “GitHub - image-js/fast-png: PNG image decoder and encoder written entirely in JavaScript” or simply install it via npm and import it

import { decode } from 'fast-png';



let arrayBuffer = await(await fetch('./resources/maps/depths/depth0.png')).arrayBuffer();
let depthData = decode(arrayBuffer);
let data = depthData.data;
let width = depthData.width;
let height = depthData.height;
arrayBuffer = depthData = null;

// I filter only the depth values
data = data.filter(e => e%2 === 0);
1 Like