01 · Unified graphics interface
One RHI. WebGPU and WebGL 2.
A backend-neutral resource, pipeline and command contract keeps the renderer portable while each backend stays native to its API.
Modern graphics rendering engine
Modern graphics. One unified engine.
Build production 3D experiences on a portable RHI for WebGPU and WebGL 2, a validated Render Graph, and a fully scriptable render pipeline.
npm install hilo3d
ESM · strict TypeScript
Scene
Render Graph
WebGPU
WebGL 2
RHIWebGPU + WebGL 2
Graphvalidated render scheduling
SRPscriptable render pipeline
TSstrict TypeScript API
Rendering architecture
The architecture behind every frame.
One shared rendering frontend connects portable hardware access, validated scheduling and a pipeline you can shape for production.
02 · Validated Render Graph
Declare first.
Execute with confidence.
Resource dependencies, descriptors and pass ordering are validated before the RHI frame begins, with explicit setup, prepare and execute phases.
03 · Scriptable Render Pipeline
Own the pipeline.
Keep the engine.
Extend or replace render sequencing through the public pipeline contract without bypassing the Render Graph or portable RHI.
Production showcase
Built for more than demos.
Hilo3D has powered character worlds, social games, and interactive 3D products at real consumer scale.
01
Virtual identity
淘宝人生
Character creation and an immersive personal 3D world.
02
Casual game
堆堆乐
A playful physics-driven stacking experience built for mobile.
03
3D world
天天惠星球
A colorful isometric planet filled with interactive 3D spaces.
Explore the engine
From first triangle
to GPU-driven scenes.
WebGPU · Compute
↗
65K GPU particles
Persistent simulation, indirect draws and interactive force fields.
WebGPU · WebGL 2
↗
Physically based rendering
Metallic, roughness and image-based lighting on both backends.
glTF · Loader
↗
Production glTF viewer
Load, inspect and render modern 3D assets in the browser.
Start building
From install to
first frame.
Create one asynchronous stage. Auto mode selects a compatible WebGPU adapter first and uses WebGL 2 when WebGPU is unavailable.
main.ts
TypeScript
import * as Hilo3d from 'hilo3d';
const stage = await Hilo3d.Stage.create({
backend: 'auto',
container,
camera
});
new Hilo3d.Mesh({
geometry: new Hilo3d.BoxGeometry(),
material: new Hilo3d.PBRMaterial()
}).addTo(stage);Open source · MIT