Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

@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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von 悪魔的Z計画
悪魔的Z計画vor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von Martin Erlic
Martin Erlicvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

@sea3dformat @threejs @NeedleTools e.g.

Profilbild von 🇺🇦 Maks Surguy
🇺🇦 Maks Surguyvor 4 Monaten

@sea3dformat @threejs Brother, how!???

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

@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

Profilbild von Trisha 🫆
Trisha 🫆vor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von Trisha 🫆
Trisha 🫆vor 4 Monaten

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

Profilbild von Tiger Abrodi
Tiger Abrodivor 4 Monaten

@mrdoob @sea3dformat @threejs 🔥

Profilbild von Hydrofoil Surfing - Download on Steam
Hydrofoil Surfing - Download on Steamvor 4 Monaten

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

Profilbild von Magpie
Magpievor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von Cody Bennett
Cody Bennettvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

@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

Profilbild von Cody Bennett
Cody Bennettvor 4 Monaten

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

Profilbild von Cody Bennett
Cody Bennettvor 4 Monaten

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

Profilbild von Magpie
Magpievor 4 Monaten

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

Profilbild von C4B4D4 💿
C4B4D4 💿vor 4 Monaten

@sea3dformat @threejs Insane 🤯

Profilbild von Hidden Forces
Hidden Forcesvor 4 Monaten

@sea3dformat @threejs

Profilbild von Innovus
Innovusvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

@sea3dformat @threejs Why / how?

Profilbild von scott belsky
scott belskyvor 4 Monaten

@sea3dformat @threejs super cool

Profilbild von herbst
herbstvor 4 Monaten

@sea3dformat @threejs Thanks! 😊

Profilbild von lascard M
lascard Mvor 4 Monaten

@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

Profilbild von herbst
herbstvor 4 Monaten

@sea3dformat @threejs Not sure yet!

Profilbild von Samian
Samianvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

@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

Profilbild von Mark Miller
Mark Millervor 4 Monaten

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

Profilbild von Grunk
Grunkvor 4 Monaten

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

Profilbild von Antonio Bonet
Antonio Bonetvor 4 Monaten

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

Profilbild von TheSisb
TheSisbvor 4 Monaten

@mrdoob @sea3dformat @threejs This is kinda sick

Profilbild von Shaun Kahler
Shaun Kahlervor 4 Monaten

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

Profilbild von Hugo
Hugovor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von Hugo
Hugovor 4 Monaten

@sea3dformat @threejs That is unbelievably awesome

Profilbild von hlsvortex
hlsvortexvor 4 Monaten

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

Profilbild von Grunk
Grunkvor 4 Monaten

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

Profilbild von vicen
vicenvor 4 Monaten

@vm_braindumps @sea3dformat @threejs Amazing! Congrats!!

Profilbild von TRGNRD
TRGNRDvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von Einar Petersen
Einar Petersenvor 4 Monaten

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

Profilbild von Simon Nordon
Simon Nordonvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von Sebastiano Mandalà
Sebastiano Mandalàvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von CosmicEgg.Earth
CosmicEgg.Earthvor 4 Monaten

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

Profilbild von العالِمة الجميلة
العالِمة الجميلةvor 4 Monaten

@sea3dformat @threejs plz where is the original repo ?

Profilbild von herbst
herbstvor 4 Monaten

@sea3dformat @threejs You mean Our fork is at

Profilbild von Based Tom
Based Tomvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

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

Profilbild von Based Tom
Based Tomvor 4 Monaten

@sea3dformat @threejs Agreed. That would be ideal.

Profilbild von Nelis smit
Nelis smitvor 2 Monaten

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.

Profilbild von Matt
Mattvor 4 Monaten

@sea3dformat @threejs SICK

Profilbild von Sebastiano Mandalà
Sebastiano Mandalàvor 4 Monaten

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

Profilbild von herbst
herbstvor 4 Monaten

@sea3dformat @threejs

Profilbild von Saajid Akram
Saajid Akramvor 4 Monaten

@sea3dformat @threejs wow, impressive

Profilbild von Andrew Gilgen
Andrew Gilgenvor 4 Monaten

@sea3dformat @threejs Insane

Profilbild von Max | LEGEND💎
Max | LEGEND💎vor 4 Monaten

@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

Ähnliche Videos