WebGL2: Added support for Uniform Buffer Objects. #21558

Mugen87 · 2021-04-01T08:52:04Z

Related issue: Fixed #13700

Description

Successor of #15562.

MajorSquirrelTVS · 2021-10-08T09:41:41Z

@Mugen87 Any chance this awesome feature will be added in a future release ?

mrdoob · 2021-10-08T16:07:59Z

@Mugen87 Should we give it a go this month?

Mugen87 · 2021-10-08T16:18:32Z

@mrdoob Yes, I would give this a try so devs can start using UBOs with their custom materials. The PR should be a safe change since the additions should no affect existing apps.

We should just keep in mind that UniformsGroup will be a WebGL thing. With WebGPURenderer and node material, we don't need it since UBOs are used internally by default.

Mugen87 · 2021-10-11T07:48:42Z

BTW: I'm adding documentation if the PR is going to be merged.

erichlof · 2021-12-07T15:57:00Z

Hello @Mugen87 ,
Thank you for adding this! Is this feature available to the current WebGL2 renderer as of yet?

I am needing this feature because I want to send to my fragment shader 64 4x4 invMatrices as well as a top level dynamic BVH that is packed into 256 vec4's. The 64 3D game objects that these sets of uniforms belong to are constantly moving every frame, so writing to and reading from data textures (like I did for static path traced scenes) is too slow.

Also, writing 64 4x4 matrices and 256 vec4's as normal old-style individual uniforms works on my laptop, but fails on mobile because there is a lower limit of how many uniforms you can send. So I end up blowing out my uniform slots on my phone for instance.

This new UBO feature sounds like the perfect solution for my uniforms requirements! Thanks again for working on this.

Mugen87 · 2021-12-07T16:04:08Z

Thank you for adding this! Is this feature available to the current WebGL2 renderer as of yet?

No sorry. Since the PR is not merged it's not yet possible to use UBOs with custom materials.

Clean up.

RenaudRohlinger · 2022-03-20T04:20:30Z

UBO is a great feature. It would be awesome to see this one merged! 😊

robertlong · 2022-04-23T21:52:02Z

Is this mainly blocked on documentation at this point? How do you feel about this implementation?

snagy · 2022-06-21T16:49:32Z

What needs to get done before this gets merged? Is there anything we can help with?

robertlong · 2022-06-22T23:29:15Z

Yup. Been waiting a while for this. Pretty sure we have the interest to get this done. We need details on what's holding it up. Is the design alright @mrdoob ? Anything you would like changed?

mrdoob · 2022-07-07T04:53:32Z

Sorry for the delay. Was waiting for things to get a bit under control 😅

mrdoob · 2022-07-07T04:53:41Z

Thanks!

CodyJasonBennett · 2022-07-07T05:51:25Z

Nit: on the topic of documentation, grammatically I believe this would be uniformGroups rather than uniformsGroups.

Edit: I see this is more consistent with other utils (#15562 (comment)).

bergden-resonai · 2022-07-31T11:09:41Z

src/renderers/WebGLRenderer.js

+
+		if ( material.isShaderMaterial || material.isRawShaderMaterial ) {
+
+			const groups = material.uniformsGroups;


@Mugen87 I had an exception on this line using a package which had an old TypeScript types of three.js (134)
I'm not sure how it works but seems like something along the way stripped this member from the RawSahderMaterial instance (internally in package this member was initialized correctly to an [])
uniformsGroups didn't exist on the instance at all, so the groups.length was the actual exception
So I feel like there's a backwards compatibility issue here but I can't create a JSFiddle with an example

That is strange since UBO support was added with r143 and all related classes and properties were added with this release.

I'll clarify, I use threejs 143 (no typescript in the project)
I import a package that's using 134+ts
The package somehow creates ShaderMaterials without this property
So the package is not ahead of my project - which I think should be supported
I'll try to work tomorrow on a jsfiddle, but I'm really not sure how I'll import 2 versions of threejs :)

but I'm really not sure how I'll import 2 versions of threejs :)

That would be an invalid workflow anyway. Try using the types from https://github.com/three-types/three-ts-types. They have a r143 release.

I patched the package on our private copy, so I don't have the issue anymore (doing what you mentioned)
But I believe that given 2 packages A and B where:

A uses typescript and is using three.js r134 (or anything below 143), and if creating objects to be rendered by B.

B uses three.js r143 or up (and is not using typescript? not sure it matters), B is running the main rendering loop and is responsible to create the canvas and renderer etc.
A will produce objects which are illegal in B (since this field doesn't exist in r134).
I have very little knowledge on how A and B are interacting with one another, might be a misconfiguration on that particular package and how it's imported.

Seems like I'm wrong, this example shows the same scenario:
https://codesandbox.io/s/pix4d-three-potree-loader-example-forked-s6i6i1?file=/package.json

The imported package uses r139
But the example uses r143 without a problem

It might work to combine three.js from different releases but officially it is not supported. If library A creates an instance of THREE.Mesh from r100 there is absolutely no guarantee that application B using r143 can process it. Let's be honest, it's quite unrealistic to support such a scenario.

* WebGL2: Added support for Uniform Buffer Objects. * Update WebGLState.js Clean up. * Fix example.

unphased · 2024-10-05T00:09:47Z

Hi, it seems like this feature exists, but is totally undocumented. Is that expected?

I had a question about usage. I'm working on something that may benefit from UBOs, but I don't really have more than around 384 8 bit components I need my shader to be able to reference. This would appear to still fit in the 1024~4096 or so components that I could expect WebGL2 to give me on most devices, so I most likely do not need to transition to using UBOs for such a need until I have 10x or more of this kind of data. Since I do not update this data except periodically there should be no performance benefit in switching to uniform buffers from uniform arrays.

mrdoob · 2024-10-22T09:00:18Z

Please use one of the links below for help / support:

Mugen87 · 2024-10-22T09:30:51Z

Hi, it seems like this feature exists, but is totally undocumented. Is that expected?

@unphased The UBO support in WebGLRenderer is considered as experimental. That's why the built-in materials don't use UBOs and there is no documentation. This will be different in WebGPURenderer where UBOs are a more integral part of the renderer.

Mugen87 mentioned this pull request Apr 1, 2021

WebGL2: Added support for Uniform Buffer Objects. #15562

Closed

Mugen87 added the WebGL2 label Apr 1, 2021

WebGL2: Added support for Uniform Buffer Objects.

2e8677a

Mugen87 force-pushed the dev46 branch from c337d63 to 2e8677a Compare April 1, 2021 11:07

Merge branch 'dev' into dev46

f03ddac

mrdoob added this to the r129 milestone Apr 22, 2021

mrdoob modified the milestones: r129, r130 May 27, 2021

mrdoob mentioned this pull request Jun 26, 2021

VAO performance issues on Radeon 460 #21503

Closed

mrdoob modified the milestones: r130, r131 Jun 30, 2021

mrdoob modified the milestones: r131, r132 Jul 28, 2021

mrdoob modified the milestones: r132, r133 Aug 26, 2021

mrdoob modified the milestones: r133, r134 Sep 30, 2021

Merge remote-tracking branch 'upstream/dev' into dev46

51accd1

mrdoob modified the milestones: r134, r135 Oct 28, 2021

mrdoob modified the milestones: r135, r136 Nov 26, 2021

Merge branch 'dev' into dev46

fd54c78

Update WebGLState.js

8dcaf69

Clean up.

mrdoob modified the milestones: r137, r138 Jan 26, 2022

Merge branch 'dev' into dev46

0df6f88

mrdoob modified the milestones: r138, r139 Feb 23, 2022

Fix example.

c5b8f1b

mrdoob modified the milestones: r139, r140 Mar 24, 2022

mrdoob modified the milestones: r140, r141 Apr 30, 2022

mrdoob modified the milestones: r141, r142 May 26, 2022

mrdoob modified the milestones: r142, r143 Jun 29, 2022

mrdoob merged commit bd61eb4 into mrdoob:dev Jul 7, 2022

joshuaellis mentioned this pull request Jul 18, 2022

r143 three-types/three-ts-types#238

Closed

4 tasks

bergden-resonai reviewed Jul 31, 2022

View reviewed changes

abernier pushed a commit to abernier/three.js that referenced this pull request Sep 16, 2022

WebGL2: Added support for Uniform Buffer Objects. (mrdoob#21558)

7b11b7f

* WebGL2: Added support for Uniform Buffer Objects. * Update WebGLState.js Clean up. * Fix example.

snagy pushed a commit to snagy/three.js-1 that referenced this pull request Sep 21, 2022

WebGL2: Added support for Uniform Buffer Objects. (mrdoob#21558)

5500063

* WebGL2: Added support for Uniform Buffer Objects. * Update WebGLState.js Clean up. * Fix example.

Mugen87 mentioned this pull request Feb 6, 2024

Feature Suggestion: Support Global Uniforms #16922

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebGL2: Added support for Uniform Buffer Objects. #21558

WebGL2: Added support for Uniform Buffer Objects. #21558

Mugen87 commented Apr 1, 2021

MajorSquirrelTVS commented Oct 8, 2021

mrdoob commented Oct 8, 2021

Mugen87 commented Oct 8, 2021 •

edited

Loading

Mugen87 commented Oct 11, 2021

erichlof commented Dec 7, 2021

Mugen87 commented Dec 7, 2021 •

edited

Loading

RenaudRohlinger commented Mar 20, 2022

robertlong commented Apr 23, 2022

snagy commented Jun 21, 2022

robertlong commented Jun 22, 2022

mrdoob commented Jul 7, 2022

mrdoob commented Jul 7, 2022

CodyJasonBennett commented Jul 7, 2022 •

edited

Loading

bergden-resonai Jul 31, 2022

Mugen87 Jul 31, 2022 •

edited

Loading

bergden-resonai Jul 31, 2022

Mugen87 Jul 31, 2022 •

edited

Loading

bergden-resonai Jul 31, 2022

bergden-resonai Jul 31, 2022

Mugen87 Jul 31, 2022 •

edited

Loading

unphased commented Oct 5, 2024 •

edited

Loading

mrdoob commented Oct 22, 2024

Mugen87 commented Oct 22, 2024


		if ( material.isShaderMaterial \|\| material.isRawShaderMaterial ) {

		const groups = material.uniformsGroups;

WebGL2: Added support for Uniform Buffer Objects. #21558

WebGL2: Added support for Uniform Buffer Objects. #21558

Conversation

Mugen87 commented Apr 1, 2021

MajorSquirrelTVS commented Oct 8, 2021

mrdoob commented Oct 8, 2021

Mugen87 commented Oct 8, 2021 • edited Loading

Mugen87 commented Oct 11, 2021

erichlof commented Dec 7, 2021

Mugen87 commented Dec 7, 2021 • edited Loading

RenaudRohlinger commented Mar 20, 2022

robertlong commented Apr 23, 2022

snagy commented Jun 21, 2022

robertlong commented Jun 22, 2022

mrdoob commented Jul 7, 2022

mrdoob commented Jul 7, 2022

CodyJasonBennett commented Jul 7, 2022 • edited Loading

bergden-resonai Jul 31, 2022

Choose a reason for hiding this comment

Mugen87 Jul 31, 2022 • edited Loading

Choose a reason for hiding this comment

bergden-resonai Jul 31, 2022

Choose a reason for hiding this comment

Mugen87 Jul 31, 2022 • edited Loading

Choose a reason for hiding this comment

bergden-resonai Jul 31, 2022

Choose a reason for hiding this comment

bergden-resonai Jul 31, 2022

Choose a reason for hiding this comment

Mugen87 Jul 31, 2022 • edited Loading

Choose a reason for hiding this comment

unphased commented Oct 5, 2024 • edited Loading

mrdoob commented Oct 22, 2024

Mugen87 commented Oct 22, 2024

Mugen87 commented Oct 8, 2021 •

edited

Loading

Mugen87 commented Dec 7, 2021 •

edited

Loading

CodyJasonBennett commented Jul 7, 2022 •

edited

Loading

Mugen87 Jul 31, 2022 •

edited

Loading

Mugen87 Jul 31, 2022 •

edited

Loading

Mugen87 Jul 31, 2022 •

edited

Loading

unphased commented Oct 5, 2024 •

edited

Loading