Hilo3D GitHub

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
Start building Explore 70+ examples
npm install hilo3d WebGPU · WebGL 2
Stylized game world concept with a luminous gateway and floating islands PBR + glTF Render Graph WebGPU WebGL 2
Scene→Render Graph→RHI WebGPU native · WebGL 2 portable
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.

Browse 70+ examples →
Garden of the Last Star HDR Bloom scene
WebGPU · Bloom · Compute

Garden of the Last Star

32,768 compute-driven fireflies feed a linear HDR scene before the engine shapes that energy into light.

Layered glTF materials on a copper lamp
WebGPU · WebGL 2 · glTF

Real assets. Layered materials.

Clearcoat, transmission, volume and anisotropy on Khronos assets.
Progressive WebGPU compute path tracing scene
WebGPU · Compute · Path tracing

Progressive light transport

Denoised tracing, spectral caustics and HDR output in one GPU path.

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
Public scene Stage Nodes · Cameras · Lights
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
01 · Shared frontend

One renderer owns the frame.

Scene collection, culling, sorting, instancing, shadows and post-processing stay backend-neutral.

02 · Transactional graph

Validate, submit, then commit.

Invalid dependencies stop before GPU work. Frame-local state commits only after a valid submission and rolls back on failure.

03 · Portable execution

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 one asynchronous stage. Auto mode selects a compatible WebGPU adapter first and uses WebGL 2 when WebGPU is unavailable.

Documentation → API reference → Examples gallery → 中文文档 → Breaking changes →
main.ts Hilo3D 2.0 
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);
Ready webgpu → webgl2

Open source · MIT

Ship your next
realtime world.

Read the docs → View on GitHub