Introduction

Build high-performance and pixel-perfect user interfaces for WebGPU. Use the rendering engine and UI framework of your choice.

Motivation

When you build a video game's UI with a library such as Three.js, you typically use HTML and CSS for the layout. This approach has two drawbacks. First, it ties your game to the web, so you must ship it for browsers, Electron, or another environment with a WebView. Second, it separates your UI from your game because they live in two different worlds.

uno UI solves both problems by rendering the UI directly through the game's rendering pipeline, without relying on HTML or the DOM. This lets your game run in non-web environments while keeping the UI and game in the same rendering system.

Key Features

• Works with any WebGPU rendering engine
• Use it standalone or with React, Vue or SolidJS
• World-space integrations for Three.js, Babylon.js, Babylon Lite and PlayCanvas
• Pixel-perfect parity with DOM rendering
• High-quality text rendering with strokes and shadows using MTSDF
• Accurate text measurement and layout powered by Pretext
• Flexbox layout powered by Yoga
• Fine-grained updates for efficient rendering
• Lightweight, basic setup is around 280kb (93kb gzip)

Getting Started

• First Layout: installation and your first WebGPU layout.
• Interactivity: responding to node events.
• Images: loading and displaying image resources.
• Texts & Fonts: generating font atlases and rendering text.
• Destroy: cleaning up nodes, UIs, and shared resources.

Components

• React: components, event props, and UI access with React.
• Vue: components, styles, and event bindings with Vue.
• Solid: components, reactive updates, and compiler setup with Solid.

Engines

• Three.js: background and foreground UI with Three.js.
• Three.js World Space: interactive UI on Three.js meshes.
• Pixi.js: background and foreground UI with Pixi.js.
• Babylon.js: background and foreground UI with Babylon.js.
• Babylon.js World Space: interactive UI on Babylon.js meshes.
• Babylon Lite: UI composition using Babylon Lite render tasks.
• Babylon Lite World Space: interactive UI on Babylon Lite meshes.
• PlayCanvas: background and foreground UI with PlayCanvas.
• PlayCanvas World Space: interactive UI on PlayCanvas entities.
• TypeGPU: UI composition with shared WebGPU command encoders.

API reference

• Styles: supported style properties and values.
• Events: supported events, event data, propagation, and custom definitions.
• UI: creation, viewport, events, updates, and drawing.
• Node: tree operations, styles, text, layout, and listeners.
• ResourcesWebGPU: shared WebGPU resources and image and font registration.
• UIWorldSpace: engine factories, cameras, materials, and custom meshes.