Part of the Khronos Group
OpenGL.org

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Results 1 to 3 of 3

Thread: load floating point images in browser and use them as textures in WebGL

  1. #1
    Intern Contributor
    Join Date
    Sep 2014
    Location
    Tucson
    Posts
    62

    load floating point images in browser and use them as textures in WebGL

    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.

  2. #2
    Senior Member OpenGL Guru
    Join Date
    Jun 2013
    Posts
    2,926
    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 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.

  3. #3
    Intern Contributor
    Join Date
    Sep 2014
    Location
    Tucson
    Posts
    62
    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_bo...negative-value

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •