DUI: render live HTML on 3D surfaces
Full-screen NUI paints a webpage over the whole screen. DUI paints a webpage onto a single GTA texture instead, so the page becomes a surface in the world: a TV, a billboard, an advert, a dashboard. The browser is the same one NUI uses. The only thing that changes is where the pixels land. This lesson builds the smallest honest DUI: a live HTML clock that replaces a prop's texture so it ticks in the world, then takes the native chain apart so you can point it at any texture you like.
DUI vs NUI: pick the right tool
Both use the same embedded Chromium browser the runtime ships with. The difference is the render target.
- NUI renders your page to a full-screen layer over the game. You reach for it when the UI is something the player looks at and interacts with directly: menus, HUDs, inventories, phones, dialogs. Input flows through
SetNuiFocusandRegisterNUICallback. - DUI renders your page to an offscreen texture you then paint onto game geometry. You reach for it when the UI lives in the world: an in-world TV, a digital billboard, a stadium screen, a slot machine display, an advert board, a gas-station price sign. A DUI surface has no cursor and no direct click input. It is pixels on a polygon. You drive it one way, from Lua, with
SendDuiMessage.
The quick test: if the player needs to move a mouse over it, that is NUI. If it is something they walk past and see, that is DUI.
Keep reading the full lesson
Sign in to start, then unlock every step of this lesson and the full FiveM School with a membership.
- Build it
- How it works
- Common mistakes
- What you can do now
- Try it yourself
The remainder of DUI: render HTML on 3D surfaces is available to FiveM School members.