[WebGL] GLES based fragment shader + 'bigdata'

Unity Engine
1

I’m trying to do volume rendering in WebGL

GLES doesn’t support one dimensional textures (which I needed).
No problem there, I simply pass my N values as [N,1] texture (=2D).

But GLES doesn’t seem to like 3d textures either. When I tried
passing my 3d texture with dimensions WxHxD as 2d texture [W,H*D]
unity complains that the textures width/height is off the charts. (e.g. 128x65k)

Should this (at least in theory) be possible? Is there any other way to
throw some bigger chunks of data into the readable realm of my fragshader?

2

I think your texture might be a bit too big at 65k, not sure of the WebGL limits.

For instance the max texture in DirectX 11/12 is 16k (Direct3D feature levels - Win32 apps | Microsoft Learn)

So try reducing the size, you can use the halving rule to quickly find a workable texture size.

3

I think you didn’t get my point here…: my 3d texture is 128x256x256 bytes (=8Mb). Since GLES 2.0 has no sampler3D (search the spec) I thought something like:

If I can’t pass 8Mb as 3d texture, maybe I can simply put the slices one after each other and pass a 128x65536 texture
(128x(256*256) == still 8Mb)

To be honest, for my use case 128x256x256 is already a very reduced dataset.

What I’ve found out thus far is that GLES really likes NPOT textures (which I’ve got)
and it gives you the possibility to get the max texture resolution (see here).
Mozilla says the limit should be at least 2o48 squared, which would be 4Mb.

Is there any other way than textures to pass big chunks of (readonly) memory to a fragment shader?

4

And does your GPU support 65k wide textures?

Maybe it is limited to 16,364 x 16,364 or lower texture size, so it’s not the memory size but the dimensions used.

5

Yes, I already got that part. But I’m still looking for a way to accomplish this :slight_smile:

GLES 3.1 seems to have sampler3D support…

6

Some browsers have work in progress WebGL 2.0 features (you can turn on), you might be able to find a browser that supports the features you need?

Found this great looking tutorial on Volume rendering using WebGL → GitHub - lebarba/WebGLVolumeRendering: WebGL Volume Rendering made easy

7

This sounds exactly like what i was looking for. Big up!

EDIT: after 2 minutes of reading: Leandro does exactly what i tried (concat all slices of the 3d texture into one image/2d-texture) but I think the doesnt put them all next to one each other in the same direction but lay them out more intelligent.