Skip to content

WebGLBackend: Optimize vertex state definition. #30562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 20, 2025
Merged

Conversation

Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented Feb 19, 2025

Related issue: #30560

Description

While investigating #30560, I have noticed a lot of redundant vertex state definitions in the WebGL backend of WebGPURenderer.

VAOs and index buffers can be cached and bindVertexArray() and bindBuffer() must only be executed if there is a state change.

Copy link

📦 Bundle size

Full ESM build, minified and gzipped.

Before After Diff
WebGL 336.51
78.38
336.51
78.38
+0 B
+0 B
WebGPU 521.78
144.83
522.05
144.92
+273 B
+90 B
WebGPU Nodes 521.25
144.72
521.52
144.81
+273 B
+90 B

🌳 Bundle size after tree-shaking

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

Before After Diff
WebGL 465.51
112.23
465.51
112.23
+0 B
+0 B
WebGPU 592.15
160.44
592.43
160.53
+273 B
+92 B
WebGPU Nodes 547.28
149.88
547.56
149.98
+273 B
+93 B

@Mugen87 Mugen87 marked this pull request as ready for review February 19, 2025 13:04
@Mugen87
Copy link
Collaborator Author

Mugen87 commented Feb 19, 2025

These are screenshots from SpectorJS that show the WebGL state changes in the live example from #30560. Notice how the redundant bindVertexArray() commands are gone in the second screenshot.

WebGPURenderer with WebGL2:

image

With this PR:

image


if ( indexBuffer !== null ) {

gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, indexBuffer );
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: The index is no part of the VAO anymore similar to WebGLRenderer. If not doing this, there are scenarios where the index buffer is not correctly bound which results in a "no elements buffer bound" warning in WebGL. If that happens, the affected primitives won't render.

@Mugen87 Mugen87 merged commit a5df72e into mrdoob:dev Feb 20, 2025
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant