Skip to content
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

BatchedMesh: Add support for per-object opaque and transparent sorting #27168

Merged
merged 6 commits into from Nov 17, 2023

Conversation

gkjohnson
Copy link
Collaborator

@gkjohnson gkjohnson commented Nov 10, 2023

Related issue: #22376, #27111

Description

Adds BatchedMesh.sortObjects which enables sorting every individual batched object from front to back or back to front depending on whether the material is transparent. This helps address GPU overdraw performance issues, as well - similar to WebGLRenderer's sort. Updated demo with new flags here.

Here's a before and after enabling sorting for a 0.9 opacity material:

sortObjects = false sortObjects = true
image image

Upcoming PRs

  • Move to core
  • Add support to ObjectLoader
  • Documentation

@gkjohnson gkjohnson added this to the r159 milestone Nov 10, 2023
Copy link

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev Filesize PR Diff
656.7 kB (162.8 kB) 656.8 kB (162.9 kB) +31 B

🌳 Bundle size after tree-shaking

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

Filesize dev Filesize PR Diff
449.2 kB (108.8 kB) 449.2 kB (108.8 kB) +31 B

@gkjohnson
Copy link
Collaborator Author

gkjohnson commented Nov 17, 2023

@Mugen87 Are there any issues with this PR? I'd like to get it merged and make a PR moving the file into core before the next release if possible.

The diff may be easier to look at with no whitespace changes:

https://github.com/mrdoob/three.js/pull/27168/files?w=1

@mrdoob mrdoob merged commit fec1161 into mrdoob:dev Nov 17, 2023
12 checks passed
@mrdoob
Copy link
Owner

mrdoob commented Nov 17, 2023

This helps address GPU overdraw performance issues, as well - similar to WebGLRenderer's sort. Updated demo with new flags here.

We should probably add increase the maximum number of objects...

Screenshot 2023-11-17 at 6 27 20 PM

On a M1 Pro the Naive approach runs at 60FPS too 😅

@gkjohnson gkjohnson deleted the batched-sort branch November 17, 2023 10:11
AdaRoseCannon pushed a commit to AdaRoseCannon/three.js that referenced this pull request Jan 15, 2024
mrdoob#27168)

* Add support for sorting objects to BatchedMesh

* Add transparency to the demo

* Class rename

* Comments, removed variables, fixed condition

* Add copy and toJSON support for object sorting
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.

None yet

3 participants