How to pass large amounts of data to a fragment shader?

Questions
1

I’ve found 3 approaches:

  • uniforms - limit is too small (limit in effect even when I tried batching the array into multiple arrays)
  • through vertex attributes from BufferAttribute (vertex attributes don’t seem to allow arrays & might have an even smaller limit from what I’ve read)
  • textures (I already have a texture I’m working with, but that should be fine, I think multiple are allowed in the shader… BUT isn’t a texture also passed in a uniform?)

I need to pass vec4 of floats in my array (or a format where I can pass 3 coordinates & 1 count)

What would be the best approach?

Thanks!

2

Hi!

I think, THREE.DataTexture will help in this case.
As an example: Spline + DataTexture
I put data of a spline in DataTexture and pass it in a uniform to shaders.

Also, have a look at the related stuff:

  1. GitHub - zz85/threejs-path-flow: 🐬🐟 ↶Mesh Deformation / Bending / Following on a Curve
  2. modifier - curve and its main module
2 Likes
3

Thank you for the suggestion! I sent the data to the fragment shader via a DataTexture but I’m still getting the ‘too many uniforms’ error in the shader program’s diagnosis. I want to be able to pass a large number of vectors (the number can go into thousands and tens of thousands).

4

If you can demonstrate this issue with a live example, it’s possible to see in the debugger what’s going wrong.

I would also start with a data texture since this approach is used at other places, too. E.g. the skinning implementation of three.js uses a data texture to encode the skeleton/bones into a single texture. Using uniforms for bone matrices would make it impossible to render more complex skinned meshes.

2 Likes
5

Hi Maggie,

Did you end up figuring it out.

I have the same issue and I would like to know what you came up with

Thanks !