Loading video...

Video Failed to Load

Go Home

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 views • 4 months ago •via X (Twitter)

65 Comments

herbst's profile picture
herbst4 months ago

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

herbst's profile picture
herbst4 months ago

@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"

herbst's profile picture
herbst4 months ago

@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

herbst's profile picture
herbst4 months ago

@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!

悪魔的Z計画's profile picture
悪魔的Z計画4 months ago

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

herbst's profile picture
herbst4 months ago

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

Martin Erlic's profile picture
Martin Erlic4 months ago

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

herbst's profile picture
herbst4 months ago

@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)

herbst's profile picture
herbst4 months ago

@sea3dformat @threejs @NeedleTools e.g.

🇺🇦 Maks Surguy's profile picture
🇺🇦 Maks Surguy4 months ago

@sea3dformat @threejs Brother, how!???

herbst's profile picture
herbst4 months ago

@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!

herbst's profile picture
herbst4 months ago

@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

Trisha 🫆's profile picture
Trisha 🫆4 months ago

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

herbst's profile picture
herbst4 months ago

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

Trisha 🫆's profile picture
Trisha 🫆4 months ago

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

Tiger Abrodi's profile picture
Tiger Abrodi4 months ago

@mrdoob @sea3dformat @threejs 🔥

Hydrofoil Surfing - Download on Steam's profile picture
Hydrofoil Surfing - Download on Steam4 months ago

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

Magpie's profile picture
Magpie4 months ago

@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.

herbst's profile picture
herbst4 months ago

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

Cody Bennett's profile picture
Cody Bennett4 months ago

@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.

herbst's profile picture
herbst4 months ago

@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

Cody Bennett's profile picture
Cody Bennett4 months ago

@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).

Cody Bennett's profile picture
Cody Bennett4 months ago

@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.

Magpie's profile picture
Magpie4 months ago

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

C4B4D4 💿's profile picture
C4B4D4 💿4 months ago

@sea3dformat @threejs Insane 🤯

Hidden Forces's profile picture
Hidden Forces4 months ago

@sea3dformat @threejs

Innovus's profile picture
Innovus4 months ago

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

herbst's profile picture
herbst4 months ago

@sea3dformat @threejs Why / how?

scott belsky's profile picture
scott belsky4 months ago

@sea3dformat @threejs super cool

herbst's profile picture
herbst4 months ago

@sea3dformat @threejs Thanks! 😊

lascard M's profile picture
lascard M4 months ago

@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

herbst's profile picture
herbst4 months ago

@sea3dformat @threejs Not sure yet!

Samian's profile picture
Samian4 months ago

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

herbst's profile picture
herbst4 months ago

@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

Mark Miller's profile picture
Mark Miller4 months ago

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

Grunk's profile picture
Grunk4 months ago

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

Antonio Bonet's profile picture
Antonio Bonet4 months ago

@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!

TheSisb's profile picture
TheSisb4 months ago

@mrdoob @sea3dformat @threejs This is kinda sick

Shaun Kahler's profile picture
Shaun Kahler4 months ago

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

Hugo's profile picture
Hugo4 months ago

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

herbst's profile picture
herbst4 months ago

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

Hugo's profile picture
Hugo4 months ago

@sea3dformat @threejs That is unbelievably awesome

hlsvortex's profile picture
hlsvortex4 months ago

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

Grunk's profile picture
Grunk4 months ago

@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?

vicen's profile picture
vicen4 months ago

@vm_braindumps @sea3dformat @threejs Amazing! Congrats!!

TRGNRD's profile picture
TRGNRD4 months ago

@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.

herbst's profile picture
herbst4 months ago

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

Einar Petersen's profile picture
Einar Petersen4 months ago

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

Simon Nordon's profile picture
Simon Nordon4 months ago

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

herbst's profile picture
herbst4 months ago

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

Sebastiano Mandalà's profile picture
Sebastiano Mandalà4 months ago

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

herbst's profile picture
herbst4 months ago

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

CosmicEgg.Earth's profile picture
CosmicEgg.Earth4 months ago

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

العالِمة الجميلة's profile picture
العالِمة الجميلة4 months ago

@sea3dformat @threejs plz where is the original repo ?

herbst's profile picture
herbst4 months ago

@sea3dformat @threejs You mean Our fork is at

Based Tom's profile picture
Based Tom4 months ago

@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.

herbst's profile picture
herbst4 months ago

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

Based Tom's profile picture
Based Tom4 months ago

@sea3dformat @threejs Agreed. That would be ideal.

Nelis smit's profile picture
Nelis smit2 months ago

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.

Matt's profile picture
Matt4 months ago

@sea3dformat @threejs SICK

Sebastiano Mandalà's profile picture
Sebastiano Mandalà4 months ago

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

herbst's profile picture
herbst4 months ago

@sea3dformat @threejs

Saajid Akram's profile picture
Saajid Akram4 months ago

@sea3dformat @threejs wow, impressive

Andrew Gilgen's profile picture
Andrew Gilgen4 months ago

@sea3dformat @threejs Insane

Max | LEGEND💎's profile picture
Max | LEGEND💎4 months ago

@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

Related Videos