Hi everyone!
Last week, I released Uno UI, a library for building high-performance, pixel-perfect user interfaces for Three.js and other WebGPU rendering engines.
Uno UI and Three.js can share the same canvas and WebGPU device, letting you render UI behind your scene, on top of it, or in world space.
You can use it standalone or with React, Vue, and Solid.js.
Key features
- Works with any WebGPU rendering engine
- Supports standalone use, React, Vue, and Solid.js
- World-space UI integration
- Pixel-perfect parity with DOM rendering
- High-quality MTSDF text rendering with strokes and shadows
- Accurate text measurement and layout powered by Pretext
- Flexbox layout powered by Yoga
- Fine-grained updates for efficient rendering
Demos
Examples
Both examples use the same React UI, showing two ways to integrate it with Three.js:
- Background and foreground UI: an animated UI background, a Three.js cube, and the React UI in the foreground, all rendered on the same canvas.
- World-space UI: the same React UI rendered within the 3D scene.
I’d love to hear your feedback, and please let me know if you have any questions.