UE5 Nanite in WebGPU

Oh, nice. Third party implementations of Nanite playback.

Nanite is a very clever representation of graphics meshes. They're directed acyclic graphs rather than trees. Repetition is a link, not a copy. It's recursive; meshes can share submeshes, which in turn can share submeshes, all the way down. It's also set up for within-mesh level of detail support, so the submeshes drop out when they're small enough. So you can have repetitive content of very large size with a finite amount of data and fast rendering times. The insight is that there are only so many pixels on screen, so there's an upper bound on rendering work really needed.

There's a really good SIGGRAPH video on this from someone at Epic.

Current GPU designs are a mismatch for Nanite, Some new hardware operations are needed to do more of this in the GPU, where it belongs. Whether that will happen, with NVidia distracted by the AI market, is a good question.

The scene needs a lot of instancing for this to pay off. Unreal Engine demos show such things as a hall of identical statues. If each statue was different, Nanite would help far less. So it works best for projects where a limited number of objects are reused to create large areas of content. That's the case for most AAA titles. Watch a video of Cyberpunk 2077, and look for railings and trash heaps. You'll see the same ones over and over in totally different contexts.

Making a nanite mesh is complicated, with a lot of internal offsets for linking, and so far only Unreal Engine's editor does it. With playback now open source, someone will probably do that.

Those internal offsets in the format present an attack surface which probably can be exploited with carefully crafted bad content, like hostile Microsoft Word .doc files.

It's been mentioned a couple of times in this thread, but Bevy also has an implementation of Nanite's ideas (sometimes called Virtual Geometry). I'm the author of that, happy to answer questions :)

As for this project, Scthe did a great job! I've been talking with them about several parts of the process, culminating in some improvements to Bevy's code based on their experience (https://github.com/bevyengine/bevy/pull/15023). Always happy to see more people working on this, Nanite has a ton of cool ideas.

Is the demo using user agent strings to determine compatibility? That's not good, and feature compatibility should be determined on a case-by-case basis by simply attempting to detect/use the specific feature.

I am on Chromium, not Chrome, and use WebGPU all the time, but the demos tell me to use Chrome, which I cannot do ethically. Would love to try the demos out, this looks like a lot of hard work!

Here is the somewhat neglected original 2009 dissertation by Federico Ponchio, the guy who invented the dynamic mesh simplification algorithm on which Nanite is based, with lots of illustrations:

https://vcg.isti.cnr.it/~ponchio/download/ponchio_phd.pdf (107 pages!)

It's cool that it kind of works, but they had to make some nasty compromises to get around WebGPUs lack of 64 bit atomics. Hopefully that will be added as an optional extension at some point, hardware support is almost ubiquitous on desktop-class hardware at least (AMD and Nvidia have had it forever but Apple has only had it since the M3).

It says my iPhone 12 Pro Max doesn’t have WebGPU, but I enabled it in experimental features and another website[1] with WebGPU demos now works. Has anyone gotten this working on iPhone? Would be nice if the web app gave more info on what failed.

[1] https://webgpu.github.io/webgpu-samples/?sample=texturedCube

Name and description are very confusing and a trademark violation since despite the claims it seems to be completely unrelated to actual Nanite in UE5, just an implementation of something similar by a person unaffiliated with UE5.

There is also Bevy's Virtual Geometry that provides similar functionality and is probably much more useful since it's written in Rust and integrated with a game engine: https://jms55.github.io/posts/2024-06-09-virtual-geometry-be...

Note: this isn't actually UE5 Nanite in WebGPU. It's a totally independent implementation of the same idea as Nanite.

This technique is starting to appear in a variety of places. Nanite definitely made the idea famous, but Nanite is the name a specific implementation, not the name of the technique.

I wonder how other engines compare when it comes to LODs and similar systems.

Godot has automatic LOD which seems pretty cool for what it is: https://docs.godotengine.org/en/stable/tutorials/3d/mesh_lod...

Unity also has an LOD system, though despite how popular the engine is, you have to create LOD models manually: https://docs.unity3d.com/Manual/LevelOfDetail.html (unless you dig through the asset store and find a plugin)

I did see an interesting approach in a lesser known engine called NeoAxis: https://www.neoaxis.com/docs/html/NeoAxis_Levels.htm however that engine ran very poorly for me on my old RX580, although I haven't tried on my current A580.

As far as I can tell, Unreal is really quite far ahead of the competition when it comes to putting lots of things on the screen, except the downside of this is that artists will be tempted to include higher quality assets in their games, bloating the install sizes quite far.

Whenever I see rendered scenes like this (I.e., lots of repetitive static geometry) I imagine that annoying guy’s voice going on about “unlimited detail” from that old vaporware video. I guess nanite really did solve that problem for real, as opposed to whatever that old thing was using (I remember something about oct-trees or something).

Honest question: It is calim that software rasterizer is faster than hardware one. Can someone explain me why? isn't the purpose of the GPU to accelerate rasterization itself? Unless is a recent algorithm or the "software rasterizer" is actually running on the GPU and not the CPU I don't see how

Using latest chrome on M2 Max for the jinx demo:

  WebGPU error [frame][validation]: Fill size (7398781) is not a multiple of 4 
  bytes.
  - While encoding [CommandEncoder "main-frame-cmd-buffer"].ClearBuffer([Buffer 
  "rasterize-sw"], 0, 7398781).

On Windows it can't handle device loss.

  ID3D12Device::GetDeviceRemovedReason failed with   DXGI_ERROR_DEVICE_HUNG (0x887A0006)
   - While handling unexpected error type Internal when allowed errors are (Validation|DeviceLost).
      at CheckHRESULTImpl (..\..\third_party\dawn\src\dawn\native\d3d\D3DError.cpp:119)
      at CheckAndUpdateCompletedSerials (..\..\third_party\dawn\src\dawn\native\d3d12\QueueD3D12.cpp:179)
      at CheckPassedSerials (..\..\third_party\dawn\src\dawn\native\ExecutionQueue.cpp:48)
      at Tick (..\..\third_party\dawn\src\dawn\native\Device.cpp:1730)

  Backend messages:
   \* Device removed reason: DXGI_ERROR_DEVICE_HUNG (0x887A0006)

Funny coincidence, was just reading through an amazing thread on the three.js form a couple days ago about a web graphics implementation of virtual geometry (nanite). webgl, 2021: https://discourse.threejs.org/t/virtually-geometric/28420

it's closed source, but I found the discussion and description of the tradeoffs interesting

Outstanding work. Also, thanks for proving actual demos of the tech. I get 60-120fps on my MBP which is phenomenal given the amount of triangles in the scene.

Here's an actual implementation of UE5 in WebGPU, for anyone interested.

Just a disclaimer that it will only work on WebGPU-enabled browser on Windows (Chrome, Edge, etc) unfortunately Mac has issues for now. Also, there is no Nanite in this demo, but it will be possible in the future.

https://play.spacelancers.com/

Wow, I can't remember the last time I read a project summary with so much jargon - I literally didn't understand anything:

> UE5's Nanite implementation using WebGPU. Includes the meshlet LOD hierarchy, software rasterizer and billboard impostors. Culling on both per-instance and per-meshlet basis.

> No WebGPU available. Please use Chrome.

Getting that on Chromium, lol.

The camera controls on my phone are very hard to get down

getting the message

    No WebGPU available. Please use Chrome.

on chrome (Version 129.0.6668.29 (Official Build) beta (64-bit)) , under windows

Intel Mac, Chrome and ungoogled chromium: index.web.ts:159 Uncaught (in promise) OperationError: Instance dropped in popErrorScope

This is amazing! I will be so great when Safari and Firefox but finish their WebGPU implementations so it runs everywhere.

Got to love in the stated goals:

> I could have built this with Vulkan and Rust. None would touch it.

I would love to see this but it wont work on Linux + Chrome even if WebGPU is enabled.

Will virtual geometry be integrated into GPUs some day?

The examples don't work, though.

Can someone explain what Nanite is? The other day someone was saying it uses software rendering because the triangles are so small. Wtf?

> If you want to add this tech to the existing engine, I'm not a person you should be asking (I don't work in the industry).

Fucking .. bravo man.