Hi.
Some time ago, thanks to Michael Herzog I tested a very powerfull feature from WEBGL2 called Uniform Block Objects.
Is there any roadmap to include this feature in the core of official THREEJS code?
Best regards
The PR does still wait to be merged:
Some optimizations were done since our last discussion so you definitely want to use the latest code from the link. In any event, it’s better to state at github that you want this feature and a respective merge.
I’m afraid certain users doubt that intergrating UBO support will introduce a performance benefit for applications. It would be great if you can share some performance data at github to show them the difference.
HI Michael.
Which is the link with the lastest code, [r106]?
Sorry, I am not used to work with Pull Requests.
I guess that in the new code I have to change UniformBlock by UniformsGroup, is there any example about how to use it?
In my example with 200k instances I can guaranty that performance was near 20% faster using Uniform Blocks than using standard Uniforms.
Many thanks in advanced.
The PR contains an example that demonstrates the usage of UniformsGroup.
Oh, I’ve only asked to add a comment at github with your experiences, that’s all 
Hi Mugen.
My problem is that I cannot find the link with the latest code.
Could you send me the link?
Sorry for bothering you with this topic.
I will add my comment after testing the last version.
Best regards
Try this: https://github.com/mrdoob/three.js/pull/15562/files
Or just download the repository from: https://github.com/Mugen87/three.js/tree/dev25
Many thanks
: )
Hi Michael.
First I have to say sorry for the delay but until now I had no time to test your branch.
I have downloaded your github branch as you told me:
But when I tried to execute your example I got an error.
It seems that the UniformsGroup is not recognized as a valid constructor:
Could you tell me if I have to download the three.js from other allocation?
Best regards
No problem^^.
Before using three.js you have to build it. You can do this by opening a console, go to the project’s root directory and then execute npm i and then npm run build.
It works.
I will give my feedback in short.
Best regards
1 Like
Hi Michael.
After adapting the code to the new library I get more or less the same performance than before.
I am going to try with a big scene and I tell you comparing with the previous.
Best regards
There is currently very limited information on Three.js and UBO usage after this feature was made. I am a new user to the project and I’m doing a particle simulation, so I’m trying to use this and I just got it working and it was very easy to migrate to this way. This thread shows up in Google, so I thought I’d comment to help future users. Perhaps advanced users already understand the differences after reading the webgl / opengl documentation, but this feature seems more important for dealing with the limit of uniforms you can pass to a shader. On my current WebGL 2.0 devices, that limit seems to be 1024, but with this UBO feature in Three.js, you can go well beyond this. For example, I increased my particle count input data in the fragment shader uniform from 1000 to 65536 and it works but this failed to compile without changing my shader to use UBO. Another point I’d like to make about this is that the current three.js example doesn’t demonstrate that you can pass a massive array inside the UBO, it only passes a very simple object, which is doesn’t really show the potential of having the UBO feature, but thank you for providing an example!. I found the UBO also needs to be “aligned”, such as vec4, since vec3 throw an error. It would be nice if the example demonstrated the ability to surpass the uniform limit by using a large array. I think the limit for UBO for all the combined input data is 65536
on my gpu according to webglreport.com and my actual test, other gpus may vary. It also looks like you can have a combined total of over 200,000 if you are doing several shaders at once. This is a massive amount more data compared to the 1024 and very excited since the cpu usage is still very low despite using javascript. It should be faster than texture access because of simple int array access and maybe other reasons. I’m very new user, and haven’t done much with shaders yet. I’m just excited by your wonderful project and how quick I can get into the advanced features with it. I also used multiple render target feature after finding I couldn’t do that in PIXI despite fiddling with the internals, they are currently limited to just one render texture output. I also noticed the typescript types don’t have uniformsGroup in them, but I just suppressed the error and it was ok. I find Three.js to be very clean to read on the inside and out after using it for a week very intensely. I appreciate the efforts spent over the years to optimize and support the advanced features. Thank you!
2 Likes
Just for anyone hitting upon this thread in the future. I couldn’t find anything on UniformsGroup in the docs yet, but there are examples available if you search for “ubo” in the examples section 
https://threejs.org/examples/?q=ubo#webgl2_ubo_arrays