PDA

View Full Version : load floating point images in browser and use them as textures in WebGL



lummxx
11-30-2015, 01:12 AM
I need to store some (longitude = RED, latitude = GREEN, time= BLUE, day= ALPHA) information in a texture and then do some queries in fragment shared for a data viz prototype. All the values are normalized [0,1].

I am using java to create a PNG files but is there a way I can create a float PNG file and load it in the browser.

I thought reading them as binary file but I am not very familiar with web technologies yet. I am sorry for that.

Another idea is to use 2 channels so that I will have 16 bit precision. That will complicate things a lot I guess and the deadline for this prototype is on 15th of December.

So far I have everything working except for this and changing the texture format in webGL once i solve this problem.

GClements
11-30-2015, 06:31 AM
Core WebGL 1.0 only requires 8 bits per component, so trying to use 16-bit or float textures is inherently non-portable. WebGL 2.0 (https://www.khronos.org/registry/webgl/specs/latest/2.0/) supports sized internal formats, but that's not widely supported yet. Floating-point textures are covered by the OES_texture_float and OES_texture_half_float extensions.

The PNG format doesn't support floating-point data, but it does support 16 bits per component. But I have no idea whether current browsers support 16-bit PNG files, whether they support passing 16-bit PNG files to e.g. texImage2D(), or whether they will actually pass 16-bit data (many programs which can handle 16-bit PNG files do so by asking libpng to convert it to 8-bit).

You can read binary data from JavaScript by creating a XMLHttpRequest and settting the .responseType member to "arraybuffer". The data passed to the callback will be an ArrayBuffer (https://www.khronos.org/registry/typedarray/specs/latest/).

lummxx
11-30-2015, 05:49 PM
Yes, I managed to make everything work with XMLHttpRequest. I store 4.2milion records from Brightkite in a 2k by 2k floating point texture (https://snap.stanford.edu/data/loc-brightkite.html). I would like to use negative values that are in the datasetalso but i guess normalized values are fine for a prototype.

I read in a article that if i use LUMINANCE i can store negative values. I will check this after Wednesday because i have a midterm that day.

I store the file as a binary and so far it is working great. Now it is time to develop queries.

Thanks for help.

EDIT: Here is the post about LUMINANCE https://www.opengl.org/discussion_boards/showthread.php/176051-Texture-can-not-keep-negative-value