One renderer owns the frame.
Scene collection, culling, sorting, instancing, shadows and post-processing stay backend-neutral.
Modern Web graphics engine
Render the web. Own every frame.
Build high-performance 2D and 3D experiences with a modern TypeScript graphics engine. Run the same scene on WebGPU and WebGL 2, customize every render pass, and stay in control from scene to screen.
2D + 3D
PBR + glTF
HDR + Post FX
GPU Compute
npm install hilo3d
WebGPU · WebGL 2
PBR + glTF
Render Graph
WebGPU
WebGL 2
One frontendone scene across WebGPU and WebGL 2
Validated framesvalidate passes before GPU submission
Your pipelinecompose and customize without an engine fork
Modern renderingPBR · glTF · HDR · Bloom · GPU Compute
Live engine studies
Light, materials and compute—in motion.
WebGPU · WebGL 2 · ECS
↗
World to first frame
Compose a renderable Entity and submit one extracted RenderWorld.
WebGPU · WebGL 2 · glTF
↗
Assets become Entities.
Load a glTF prefab and instantiate it directly into a World.
WebGPU · WebGL 2 · Rapier
↗
Physics without bindings
Put MeshRenderer, RigidBody, and Collider on the same Entity.
Rendering architecture
One rendering path. Native on both backends.
Scene processing, draw preparation, shadows, post-processing, and resource lifecycle stay in one shared frontend. Every frame is compiled through a validated Render Graph and executed through native WebGPU or WebGL 2 backends.
Production frame path
One shared frontend · two native backends
Simulation + extraction
World ECS
Entities · Components · Systems
→
Shared frontend
Renderer
Collect · Cull · Sort · Instance
→
Extension layer
Pipeline Host + SRP
Default path · Custom passes
→
Frame compiler
Render Graph
Setup · Compile · Prepare · Execute
→
Portable contract
RHI
Resources · Pipelines · Commands
→
Native backends
WebGPU
WebGL 2
Shared frame state & lifecycle
Frame Arena
Upload Batch
Resource Registry
Persistent Resources
Submission Tracking
Device Recovery
Validate, submit, then commit.
Invalid dependencies stop before GPU work. Frame-local state commits only after a valid submission and rolls back on failure.
Native APIs behind one contract.
Resources, pipelines, bindings, commands and recovery cross the RHI while native access stays inside backend boundaries.
Production showcase
Built for worlds people enter.
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.
Start building
From install to
first frame.
Create a World and Engine. Auto mode selects a compatible WebGPU adapter first and uses WebGL 2 when WebGPU is unavailable.
main.ts
Hilo3D 2.0
import * as Hilo3d from 'hilo3d';
const world = await Hilo3d.World.create({
systems: [
Hilo3d.createTransformSystem(),
Hilo3d.createRenderExtractionSystem()
]
});
const engine = await Hilo3d.Engine.create({
backend: 'auto',
container
});
const cube = world.createEntity();
world.add(cube, Hilo3d.LocalTransform, {});
world.add(cube, Hilo3d.MeshRenderer, {
geometry: new Hilo3d.BoxGeometry(),
material: new Hilo3d.PBRMaterial()
});
const camera = world.createEntity();
world.add(camera, Hilo3d.LocalTransform, { position: [0, 0, 5] });
world.add(camera, Hilo3d.PerspectiveCamera, { aspect: 16 / 9 });
world.add(camera, Hilo3d.CameraOutput, { enabled: true });
engine.frame(world, 0);Open source · MIT