What is the best way to load 32-bit non-color data into a texture for WebGPU?

Questions
,
1

I have been using PNGs as the texture source, but PNG only supports 8 and 16 bit channels. I want to use f32 texture channels in my WGSL fragment shaders to represent some data in a higher resolution. For example, how would you load in a normal map with 32-bit floats in each texture channel (I know 32 bits is typically overkill for a normal map, but I have some other data I want to be very precise).

Is there another supported format that would allow this? Otherwise, is there an easy way to load a texture from multiple PNGs using the 32 bits from the 4 8-bit RGBA channels?

2

You can export Float32Array to a pure binary file.bin format.
In this case, I used.bin to store the 3d texture and Float32Array to parse the downloaded file：
Volume Cloud demo, based on threejs - Demos and projects - Babylon.js (babylonjs.com)
I think it’ll work for you, too.

3

You can try to use the .hdr loader as implemented in this PG to create a float texture:

3 Likes