Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 4 месяцев назад •via X (Twitter)

Комментарии: 65

Фото профиля herbst
herbst4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

@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
herbst4 месяцев назад

@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
herbst4 месяцев назад

@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計画
悪魔的Z計画4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

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

Фото профиля Martin Erlic
Martin Erlic4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

@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
herbst4 месяцев назад

@sea3dformat @threejs @NeedleTools e.g.

Фото профиля 🇺🇦 Maks Surguy
🇺🇦 Maks Surguy4 месяцев назад

@sea3dformat @threejs Brother, how!???

Фото профиля herbst
herbst4 месяцев назад

@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
herbst4 месяцев назад

@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 🫆
Trisha 🫆4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

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

Фото профиля Trisha 🫆
Trisha 🫆4 месяцев назад

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

Фото профиля Tiger Abrodi
Tiger Abrodi4 месяцев назад

@mrdoob @sea3dformat @threejs 🔥

Фото профиля Hydrofoil Surfing - Download on Steam
Hydrofoil Surfing - Download on Steam4 месяцев назад

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

Фото профиля Magpie
Magpie4 месяцев назад

@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
herbst4 месяцев назад

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

Фото профиля Cody Bennett
Cody Bennett4 месяцев назад

@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
herbst4 месяцев назад

@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
Cody Bennett4 месяцев назад

@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
Cody Bennett4 месяцев назад

@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
Magpie4 месяцев назад

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

Фото профиля C4B4D4 💿
C4B4D4 💿4 месяцев назад

@sea3dformat @threejs Insane 🤯

Фото профиля Hidden Forces
Hidden Forces4 месяцев назад

@sea3dformat @threejs

Фото профиля Innovus
Innovus4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

@sea3dformat @threejs Why / how?

Фото профиля scott belsky
scott belsky4 месяцев назад

@sea3dformat @threejs super cool

Фото профиля herbst
herbst4 месяцев назад

@sea3dformat @threejs Thanks! 😊

Фото профиля lascard M
lascard M4 месяцев назад

@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
herbst4 месяцев назад

@sea3dformat @threejs Not sure yet!

Фото профиля Samian
Samian4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

@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
Mark Miller4 месяцев назад

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

Фото профиля Grunk
Grunk4 месяцев назад

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

Фото профиля Antonio Bonet
Antonio Bonet4 месяцев назад

@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
TheSisb4 месяцев назад

@mrdoob @sea3dformat @threejs This is kinda sick

Фото профиля Shaun Kahler
Shaun Kahler4 месяцев назад

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

Фото профиля Hugo
Hugo4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

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

Фото профиля Hugo
Hugo4 месяцев назад

@sea3dformat @threejs That is unbelievably awesome

Фото профиля hlsvortex
hlsvortex4 месяцев назад

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

Фото профиля Grunk
Grunk4 месяцев назад

@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
vicen4 месяцев назад

@vm_braindumps @sea3dformat @threejs Amazing! Congrats!!

Фото профиля TRGNRD
TRGNRD4 месяцев назад

@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
herbst4 месяцев назад

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

Фото профиля Einar Petersen
Einar Petersen4 месяцев назад

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

Фото профиля Simon Nordon
Simon Nordon4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

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

Фото профиля Sebastiano Mandalà
Sebastiano Mandalà4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

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

Фото профиля CosmicEgg.Earth
CosmicEgg.Earth4 месяцев назад

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

Фото профиля العالِمة الجميلة
العالِمة الجميلة4 месяцев назад

@sea3dformat @threejs plz where is the original repo ?

Фото профиля herbst
herbst4 месяцев назад

@sea3dformat @threejs You mean Our fork is at

Фото профиля Based Tom
Based Tom4 месяцев назад

@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
herbst4 месяцев назад

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

Фото профиля Based Tom
Based Tom4 месяцев назад

@sea3dformat @threejs Agreed. That would be ideal.

Фото профиля Nelis smit
Nelis smit2 месяцев назад

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
Matt4 месяцев назад

@sea3dformat @threejs SICK

Фото профиля Sebastiano Mandalà
Sebastiano Mandalà4 месяцев назад

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

Фото профиля herbst
herbst4 месяцев назад

@sea3dformat @threejs

Фото профиля Saajid Akram
Saajid Akram4 месяцев назад

@sea3dformat @threejs wow, impressive

Фото профиля Andrew Gilgen
Andrew Gilgen4 месяцев назад

@sea3dformat @threejs Insane

Фото профиля Max | LEGEND💎
Max | LEGEND💎4 месяцев назад

@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

Похожие видео