Creating Texture From Float32Array

Questions
,
1

Hi folks.
First time using Discourse as I’ve usually been able to find the solutions online without having to post questions myself however now i’m tackling something I’ve found very few people posting about.
I’ll run over the basics below

project goal -
1 - To take a range of images in .hdr or .exr format. It’s important they are in full 32 bit color, i can’t use .pngs or jpgs
2 - Load image into THREE.ShaderPass
3 - Compose together the various images to create a Photo realistic image

The issue I’m having is two things.
1
I can load a a .exr using on desktop browsers and it looks lovely…however Android mobile devices get the following error
THREE.WebGLRenderer: OES_texture_float extension not supported.
THREE.WebGLRenderer: OES_texture_half_float extension not supported.
THREE.WebGLRenderer: OES_texture_half_float_linear extension not supported.
THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
THREE.WebGLRenderer: EXT_texture_filter_anisotropic extension not supported.

INVALID_ENUM: texImage2D: invalid type
[.WebGL-0xcd591800]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

2 -
I can load a hdr using THREE.RGBELoader which loads a image into my custom ShaderPass fow both Desktop , Android and IOS…however it looks very wrong

HqF0b.jpg640×636 67 KB

Does anyone have any ideas or experience in ways of getting these types of image files into a custom shader?

Additional notes - I’ve looked into TinyEXR and was able to load a .exr image into a float32Array and into a canvas


can I use this somehow to then turn it into a THREE.Texture??

2

Is your goal to deal with full 32 bit or just to support the format? What mobile device gave you these errors? Usually most devices support these extensions and WebGL2, but there still can be devices not supporting it. A workaround could be splitting the Float32Array into 3-4 textures for each channel encoding/decoding into 8 bit components.

Maybe visit this site on the device and post a screencap: https://webglreport.com/?v=1

3

Very useful website! Thanks
Huawei P20 is the phone I am testing on for now.

WebGl 1
image

WebGL 2
image
image
image

The WebGL 2 page was rather long. Not sure that list is relevant but added it anyway.

Turning the Float32 into 3 or 4 textures sounds like a promising route. Ultimately I can load the .exr onto a mobile phone…its only until I try pushing it into the effect.uniforms[‘ENTERMAP’].value that it gives me the error.
I’m new to handling data such as these.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
If you have any sample code on how to split the Float32Array into 4 textures it would be very helpful however I will also experiment myself and post the results.

4

This is kinda confusing that the extensions aren’t supported while WebGL2 is. In WebGL2 they are standard, so using WebGL2 might already fix the issue.

You can check with renderer.capabilities.floatFragmentTextures if the required extension is supported, if it isn’t replace the renderer with a new one in which you pass a WebGL2 canvas (instructions)