Search code examples
javascriptimage-processingwebgl

Looking to access 16-bit image data in Javascript/WebGL


I'm trying to download 16-bit image data from a server and push it into a WebGL texture without browser plug-ins. texImage2d will work with: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement. I'm looking for some javascript (a library or code sample) which can decode 16-bit TIFF or similar (hdf5, etc.) image data into one of these object types.

I have no problem doing this is 8-bit per channel RGB by using an to load a PNG but this doesn't work with 16-bit per channel data since there aren't any "standard" browser supported image formats which are 16-bit.


Solution

  • I don't think the main browsers natively support any 16-bit/channel image format at the moment.

    One way to achieve the same effect would be to create two PNG images, one with the top 8 bits of each colour channel in the image and one with the bottom 8 bits. Then bind the images as two textures and combine the values in your shader, e.g.

    highp float val = texture2d(samplerTop8bits, tex_coord) * (256.0 / 257.0);
    val += texture2d(samplerBottom8bits, tex_coord) * (1.0 / 257.0);
    

    (Note: you need highp precision to represent your data correctly in a 16-bit range)

    Another method is only possible if floating point textures are supported in your target browser(s). You would, in the browser, combine the two PNG images into a floating point texture then access that normally. This may not be any faster and will probably use twice the amount of texture memory.