Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 4 ay önce •via X (Twitter)

65 Yorum

herbst profil fotoğrafı
herbst4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

@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計画 profil fotoğrafı
悪魔的Z計画4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

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

Martin Erlic profil fotoğrafı
Martin Erlic4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

@sea3dformat @threejs @NeedleTools e.g.

🇺🇦 Maks Surguy profil fotoğrafı
🇺🇦 Maks Surguy4 ay önce

@sea3dformat @threejs Brother, how!???

herbst profil fotoğrafı
herbst4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

@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 🫆 profil fotoğrafı
Trisha 🫆4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

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

Trisha 🫆 profil fotoğrafı
Trisha 🫆4 ay önce

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

Tiger Abrodi profil fotoğrafı
Tiger Abrodi4 ay önce

@mrdoob @sea3dformat @threejs 🔥

Hydrofoil Surfing - Download on Steam profil fotoğrafı
Hydrofoil Surfing - Download on Steam4 ay önce

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

Magpie profil fotoğrafı
Magpie4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

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

Cody Bennett profil fotoğrafı
Cody Bennett4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

@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 profil fotoğrafı
Cody Bennett4 ay önce

@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 profil fotoğrafı
Cody Bennett4 ay önce

@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 profil fotoğrafı
Magpie4 ay önce

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

C4B4D4 💿 profil fotoğrafı
C4B4D4 💿4 ay önce

@sea3dformat @threejs Insane 🤯

Hidden Forces profil fotoğrafı
Hidden Forces4 ay önce

@sea3dformat @threejs

Innovus profil fotoğrafı
Innovus4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

@sea3dformat @threejs Why / how?

scott belsky profil fotoğrafı
scott belsky4 ay önce

@sea3dformat @threejs super cool

herbst profil fotoğrafı
herbst4 ay önce

@sea3dformat @threejs Thanks! 😊

lascard M profil fotoğrafı
lascard M4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

@sea3dformat @threejs Not sure yet!

Samian profil fotoğrafı
Samian4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

@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 profil fotoğrafı
Mark Miller4 ay önce

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

Grunk profil fotoğrafı
Grunk4 ay önce

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

Antonio Bonet profil fotoğrafı
Antonio Bonet4 ay önce

@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 profil fotoğrafı
TheSisb4 ay önce

@mrdoob @sea3dformat @threejs This is kinda sick

Shaun Kahler profil fotoğrafı
Shaun Kahler4 ay önce

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

Hugo profil fotoğrafı
Hugo4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

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

Hugo profil fotoğrafı
Hugo4 ay önce

@sea3dformat @threejs That is unbelievably awesome

hlsvortex profil fotoğrafı
hlsvortex4 ay önce

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

Grunk profil fotoğrafı
Grunk4 ay önce

@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 profil fotoğrafı
vicen4 ay önce

@vm_braindumps @sea3dformat @threejs Amazing! Congrats!!

TRGNRD profil fotoğrafı
TRGNRD4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

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

Einar Petersen profil fotoğrafı
Einar Petersen4 ay önce

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

Simon Nordon profil fotoğrafı
Simon Nordon4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

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

Sebastiano Mandalà profil fotoğrafı
Sebastiano Mandalà4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

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

CosmicEgg.Earth profil fotoğrafı
CosmicEgg.Earth4 ay önce

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

العالِمة الجميلة profil fotoğrafı
العالِمة الجميلة4 ay önce

@sea3dformat @threejs plz where is the original repo ?

herbst profil fotoğrafı
herbst4 ay önce

@sea3dformat @threejs You mean Our fork is at

Based Tom profil fotoğrafı
Based Tom4 ay önce

@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 profil fotoğrafı
herbst4 ay önce

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

Based Tom profil fotoğrafı
Based Tom4 ay önce

@sea3dformat @threejs Agreed. That would be ideal.

Nelis smit profil fotoğrafı
Nelis smit2 ay önce

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 profil fotoğrafı
Matt4 ay önce

@sea3dformat @threejs SICK

Sebastiano Mandalà profil fotoğrafı
Sebastiano Mandalà4 ay önce

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

herbst profil fotoğrafı
herbst4 ay önce

@sea3dformat @threejs

Saajid Akram profil fotoğrafı
Saajid Akram4 ay önce

@sea3dformat @threejs wow, impressive

Andrew Gilgen profil fotoğrafı
Andrew Gilgen4 ay önce

@sea3dformat @threejs Insane

Max | LEGEND💎 profil fotoğrafı
Max | LEGEND💎4 ay önce

@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

Benzer Videolar