Video wird geladen...
Video konnte nicht geladen werden
Casually rendering ~a hundred million triangles, in the browser. All thanks to Sunag's cool Nanite-style renderer for Three.js. I've added GLB-to-meshlet and PBR rendering to it, very exciting to see where this is going!
207,462 Aufrufe • vor 4 Monaten •via X (Twitter)
65 Kommentare

@threejs You can try it out here, and drop GLBs to see them processed + rendered:

@threejs Meshlets are basically chunks of meshes, that get rendered with a mix of rasterization and compute. So despite tons of stuff being on screen, actual rendering is more like "the pixels you see"

@threejs Everything is pretty custom at the moment – a custom shader that is able to render the meshlet instances with their original data / texture / UVs etc – but the overall direction feels good

@threejs Meshlets are generated via @zeuxcg MeshOptimizer, not sure if I'm doing everything right there but I get small compressed meshlets and can render them. Hacked browser-based meshlet generation into meshopt, too, so that you can drop your own GLBs to pulverize them!

@sea3dformat @threejs 素晴らしい!仮想化ジオメトリシステムですね! unity用のやつだと以下にあります

@sea3dformat @threejs Yes, that’s also using meshoptimizer under the hood:

@sea3dformat @threejs okay now how do i get this into my project?

@sea3dformat @threejs 😄 wonderful model. You either grab the source from the @NeedleTools three.js fork and hack around with it, or you wait for a proper three.js integration into TSL, or you use an alternative like Needle Progressive 3D (not quite Nanite but best web streaming solution for glb)

@sea3dformat @threejs @NeedleTools e.g.

@sea3dformat @threejs Brother, how!???

@sea3dformat @threejs The three PR with some discussion of the technique is here: Hope we can make this mass-adoptable at some point, and not a bunch of custom things bolted on top of each other!

@msurguy @sea3dformat @threejs I think you can read the file in the three.js repo to learn more, visit or my adaption and ask AI how it works

@sea3dformat @threejs 🥺 I want this features, any resources for reading would be great.

@sea3dformat @threejs You can read the PR for a start, link is under my post

@sea3dformat @threejs Wow! 💃 Very much appreciated. I’ll look into it. Many thanks.🥰

@mrdoob @sea3dformat @threejs 🔥

@sea3dformat @threejs thats cool i rendered a hundred and one million trianglers, in the brower

@sea3dformat @threejs Wild! will be looking into this, ty. Does it support rigging and animation for a field of assets the size of your vid? Incredbile if so.

@sea3dformat @threejs At the moment it’s static meshes, but in principal rigging/anim can happen on the GPU as well, yes

@ALASKANmagpie @sea3dformat @threejs This would be a win for hardware rasterization, actually. Tencent Games does not use software rasterization in their 2024 SIGGRAPH presentation, as they target mid to high end mobile. Also not sure if people read the code, but it can't represent enough unique triangles as-is.

@ALASKANmagpie @sea3dformat @threejs Animation would need to be represented in a way that per-instance data can carry it, right? Like a vertex offset lookup texture

@ALASKANmagpie @sea3dformat @threejs Yes. The problem that initially stopped Nanite from supporting skinning and displacement itself is that cluster bounds have to be very tight for occlusion culling to be correct and efficient. But computing tight-skinned bounds is very expensive if dynamic (character controller).

@ALASKANmagpie @sea3dformat @threejs Another problem is the lack of a vertex cache with software rasterization which is going to hurt more here than Nanite since you aren't just targeting upper mid-range to high-end GPUs but consumer mobile and integrated devices. This needs to diverge toward hardware rasterization.

@hybridherbst @sea3dformat @threejs Thanks to both of you, dry very illustrative. Learned a lot

@sea3dformat @threejs Insane 🤯

@sea3dformat @threejs

@sea3dformat @threejs It's a UNIX system, I know this.

@sea3dformat @threejs Why / how?

@sea3dformat @threejs super cool

@sea3dformat @threejs Thanks! 😊

@sea3dformat @threejs Nanite est véritablement remarquable vraiment !! comment a ton attendus si longtemps pour pensé a utiliser ce system de réduction polygonal je suit plus trop dans la 3d en ce moment. mes sa marche aussi pour les simulation de particule ? ou pas encore

@sea3dformat @threejs Not sure yet!

@sea3dformat @threejs meshlet conversion at that scale is no joke. how are you handling LOD transitions

@sea3dformat @threejs Right now each instance chooses its LOD (so no partial meshlet switching at the moment), so an object switches from one meshlet set to another and meshopt makes that (mostly) seamless

@TAbrodi @sea3dformat @threejs So cool! Thanks for sharing! I’ll definitely use this

@sea3dformat @threejs The outlines are a bit choppy as if anti-aliasing isn't on. Is that normal?

@sea3dformat @threejs This is great, specially as the web has a lot of CAD converted files for product viewers and those tend to have messy geo and heavy asf. So this is amazing to have!

@mrdoob @sea3dformat @threejs This is kinda sick

@sea3dformat @threejs Really great visualization of the rendering process as well

@sea3dformat @threejs Is it still the gpu rendering all the data ?

@sea3dformat @threejs It’s all happening in shaders, yes, but only partially through the „regular“ hardware rasterizer, the rest is compute shaders

@sea3dformat @threejs That is unbelievably awesome

@sea3dformat @threejs Let’s goo! Unreal threejs! Got to check this out.

@sea3dformat @threejs @ThreatInteract You did a video digging into Unreal's Nanite system a while back. What are your thoughts on this one in three.js?

@vm_braindumps @sea3dformat @threejs Amazing! Congrats!!

@sea3dformat @threejs @godotengine How realistic is it to add something like this to Godot? It would be an absolute killer feature. AI-driven pipelines are becoming more and more relevant. We really need something like nanite for Godot.

@_JAROL_ @sea3dformat @threejs @godotengine I think there’s some efforts already to port this:

@sea3dformat @threejs Nicely done. Be interesting to see something like this incorporated in game engines.

@sea3dformat @threejs Does it require the meshes to be instanced?

@sea3dformat @threejs It turns meshes to meshlet patches and instances those

@SimonNordon @sea3dformat @threejs I will need to read it , but does it truly cover all the nanite features ?

@SimonNordon @sea3dformat @threejs Not all, but the basics of virtualized rendering with meshlets and mixed hardware/compute rasterizer

@mrdoob @sea3dformat @threejs Incredible! And yet, we have to wait for 10 seconds when trying to Save as...

@sea3dformat @threejs plz where is the original repo ?

@sea3dformat @threejs You mean Our fork is at

@sea3dformat @threejs Looks like this suffers from the same issue as Nanite. It gets insanely grainy at a distance, which doesn't have this issue with LOD models.

@sea3dformat @threejs Yes, that’s why for faraway distances I think it can be combined with impostors as last LOD

@sea3dformat @threejs Agreed. That would be ideal.

The culling doing the heavy lifting here is the unlock - truly innovative. The compounding is the exciting part for me. Shout out to you game developers, but I'm here for the product configurators, property walkthroughs, digital twins, marketing experiences. The web gets a lot more interesting when web 3D is "good enough" for the average brand and those stop being tech demos and start being the default.

@sea3dformat @threejs SICK

@sea3dformat @threejs The link on their profile doesn't work, what's the GitHub link?

@sea3dformat @threejs

@sea3dformat @threejs wow, impressive

@sea3dformat @threejs Insane

@sea3dformat @threejs Does this work on a huge variety of meshes? You have a lot of meshes cloned, but would that still be lightweight with 50 or 100 different assets? Very exciting stuff

