WebGLUniformsGroups: Support for array of Uniform Buffer Object

[RenaudRohlinger]

Description:
Support for array of Uniform Buffer Object and included a demo of 51 unique mesh sharing a light UBO consisting of 300 point lights.

The way I implemented is that you can blend arrays of UBOs and simple UBOs among the same Group:

glsl:

uniform LightingData {
  vec4 lightPosition[POINTLIGHTS_MAX];
  vec4 lightColor[POINTLIGHTS_MAX];
  float pointLightsCount;
};

js:

const ubo = new THREE.UniformsGroup();
ubo.setName( 'LightingData' );
ubo.add([new THREE.Uniform(),new THREE.Uniform(),new THREE.Uniform(),...]) // array of vec4 lightPosition
ubo.add([new THREE.Uniform(),new THREE.Uniform(),new THREE.Uniform(),...]) // array of vec4 lightColor
ubo.add(new THREE.Uniform()]) // float pointLightsCount

Important to know, if we add a size of array of uniform !== than the size specified in the shader it will break, which is pretty normal behavior IMO. Should we fill with empty clones or throw a warning somewhere if it's not the case?

Next it could be great to add support to struct format (doesn't break but driver issues), I added a TODO for another PR.
Also I believe there is not Integer support in the UBOs so far, added a TODO for this one so we don't forget.

Preview: https://raw.githack.com/renaudrohlinger/three.js/ubo-patch3/examples/webgl2_ubo_arrays.html

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
668.9 kB (166.1 kB)	669.1 kB (166.1 kB)	+121 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Filesize dev	Filesize PR	Diff
450 kB (109 kB)	450.1 kB (109 kB)	+53 B

[Mugen87]

I understand you have added this line to prevent a processing from a uniforms group without defined uniforms.

But is this a real use case? Why should a developer setup an instance of UniformsGroup like that?

[RenaudRohlinger]

I would say that's coming from a bad habits of always wanting to protect most use case even if I don't encounter the issues in my code. But I understand that's not something we would want in threejs as the shader will break if the developer forget to bind the UBO.
Anyway UBOs are something pretty advanced, as you mentioned in the other comment let's wait and see if developers complains.

For the moment I removed it 👍

[RenaudRohlinger]

Also regarding UBOs errors are sometimes misleading.

For example if you forget to bind it in JS it will throw the error GL_INVALID_OPERATION: It is undefined behaviours to use a uniform buffer that is too small..

Maybe we can add another PR in the future just to help developers to make it easier to understand.

[Mugen87]

I'm not sure we need this kind of validation. IMO, UniformsGroup should be used like geometries or textures. After the first render, devs should not alter the number of uniforms in their group. If this is required, they can call dispose() and create a new group.

Changing the layout of uniforms means the shader changes so a call of dispose() on the respective shader material is required as well.

[Mugen87]

Do you mind removing the build files from the PR?

It was a good idea to update the files so it's possible to preview the demo but for the merge it's better to remove them.

Side note: I have slightly updated webgl2_ubo_array via b630bfa to make its structure more similar to other demos.

[Mugen87]

The changes in WebGLUniformsGroups look good, btw!

[Mugen87]

Important to know, if we add a size of array of uniform !== than the size specified in the shader it will break, which is pretty normal behavior IMO.

That sounds good to me! I would not add further validation checking until devs start requesting such a feature.

[RenaudRohlinger]

Should be good to go! Next I will try to add Integers and Struct support in two other PR.