zephyr3d

A modern TypeScript rendering engine for the web — one codebase, WebGL / WebGL2 / WebGPU

Documentation  |  Demos  |  Online Editor  |  API Reference

What is Zephyr3D

Zephyr3D is a 3D rendering engine for the browser, written in TypeScript. It gives you two levels to work at, and a visual editor on top of both:

• Device API — a graphics abstraction over WebGL, WebGL2 and WebGPU, including a shader system where you write shaders in TypeScript and the engine generates GLSL or WGSL per backend.
• Scene API — a complete renderer built on the Device API: scene graph, PBR materials, clustered lighting, shadows, character rendering, terrain, water, animation and post-processing, organized behind a render graph.
• Editor — a browser-based visual editor, plus an Electron desktop build with local projects and an embedded MCP server for agent-driven automation.

Click any image to run it live.  ·  All demos →

Quick start

npm install --save @zephyr3d/base @zephyr3d/scene @zephyr3d/backend-webgl @zephyr3d/backend-webgpu

A lit sphere you can orbit around:

import { Vector3, Vector4 } from '@zephyr3d/base';
import {
  Scene, Application, LambertMaterial, Mesh,
  OrbitCameraController, PerspectiveCamera, SphereShape,
  DirectionalLight, getInput, getEngine
} from '@zephyr3d/scene';
import { backendWebGL2 } from '@zephyr3d/backend-webgl';

const myApp = new Application({
  backend: backendWebGL2,
  canvas: document.querySelector('#my-canvas')
});

myApp.ready().then(function () {
  const scene = new Scene();
  const light = new DirectionalLight(scene);
  light.lookAt(Vector3.one(), Vector3.zero(), Vector3.axisPY());

  const material = new LambertMaterial();
  material.albedoColor = new Vector4(1, 0, 0, 1);
  new Mesh(scene, new SphereShape(), material);

  scene.mainCamera = new PerspectiveCamera(scene, Math.PI / 3, 1, 100);
  scene.mainCamera.lookAt(new Vector3(0, 0, 4), Vector3.zero(), Vector3.axisPY());
  scene.mainCamera.controller = new OrbitCameraController();
  getInput().use(scene.mainCamera.handleEvent, scene.mainCamera);

  getEngine().setRenderable(scene, 0);
  myApp.run();
});

Real projects usually prefer WebGPU and fall back to WebGL — see Basic Framework for backend selection, the HTML scaffold and what each step does. Which packages you actually need depends on your case; Installation has the breakdown.

Features

Rendering pipeline Forward+ pipeline organized as a render graph with automatic resource pooling and history buffers for temporal effects. Clustered lighting, Hi-Z, depth prepass, GPU picking, geometry instancing, render bundles, multi-view rendering.

Materials and lighting PBR (metallic-roughness and specular-glossiness), image-based lighting, physical lighting units, Lambert/Blinn/Unlit, MToon for stylized shading, and a mixin-based system for custom materials. Material blueprints author materials as node graphs in the editor.

Character rendering Skin with subsurface scattering profiles, eye material with socket occlusion, and hair as both Kajiya-Kay and Marschner models with strand-level geometry expanded on the GPU.

Shadows PCF (several variants), PCSS, ESM, VSM, SSM and DOM shadows, with cascaded shadow maps and receiver bias control. Pick per light based on the quality/cost tradeoff you want.

Post-processing TAA, SSGI, SSR, SSAO, bloom, motion blur, FXAA, tonemapping, color grading, and separate subsurface-scattering passes for skin.

Transparency Three order-independent transparency backends: A-buffer (WebGPU), dual depth peeling, and weighted blended.

Terrain, sky and water Clipmap terrain with runtime texturing and grass layers, atmospheric sky, and ocean water driven by FFT, Gerstner or FBM wave generators.

Animation and simulation Skeletal and keyframe animation with blending, masks and an action controller. Inverse kinematics (CCD, FABRIK, two-bone), joint dynamics, spring chains, GPU cloth, GPU hair simulation, morph targets and geometry caches.

Asset pipeline glTF/GLB, FBX, Alembic and hair curve importers, a prefab system, virtual file system, and reference-counted resources.

The documentation covers these topic by topic — when to use each one, how to tune it, and its backend limitations — rather than just listing properties.

Shaders in TypeScript

Rather than maintaining parallel GLSL and WGSL sources, you describe the shader once in TypeScript:

const program = device.buildRenderProgram({
  vertex(pb) {
    this.$inputs.pos = pb.vec3().attrib('position');
    this.$inputs.uv  = pb.vec2().attrib('texCoord0');
    this.$outputs.uv = pb.vec2();

    this.xform = pb.defineStruct([pb.mat4('mvpMatrix')])().uniform(0);

    pb.main(function () {
      this.$builtins.position =
        pb.mul(this.xform.mvpMatrix, pb.vec4(this.$inputs.pos, 1));
      this.$outputs.uv = this.$inputs.uv;
    });
  },

  fragment(pb) {
    this.$outputs.color = pb.vec4();
    this.tex = pb.tex2D().uniform(0);

    pb.main(function () {
      this.$outputs.color = pb.textureSample(this.tex, this.$inputs.uv);
    });
  }
});

From this single source the engine emits WebGL1 GLSL (attributes/varyings, classic uniforms), WebGL2 GLSL (std140 UBOs, explicit outputs), WGSL, and the matching WebGPU bind group layouts with computed buffer layouts. Bindings and shader code stay in sync, and you avoid hand-written variants that drift apart.

The Writing Shaders guide shows the generated output side by side for each backend.

Editor

Try it in your browser →  ·  **[Download the desktop build →](https://github.