Overview
Zephyr3D is a browser-based 3D rendering framework that provides two sets of APIs and a fully integrated, WYSIWYG (What You See Is What You Get) visual editor.
APIs
Device API
The Device API provides a set of low-level abstraction interfaces that allow users to call WebGL, WebGL2, and WebGPU graphics APIs in a unified way.
These interfaces cover most of the underlying graphics API capabilities, enabling easy cross-API rendering support.
One major challenge in cross-platform rendering is the difference between shader languages — WebGL and WebGL2 use GLSL, while WebGPU uses WGSL.
To solve this problem, Zephyr3D provides a dynamic shader generation system. Users can write shaders directly in native JavaScript, and the framework will automatically generate the corresponding GLSL or WGSL code for each backend.
This approach eliminates the need for complex string concatenation or extensive #ifdef preprocessing, offering high flexibility and clarity.
Scene API
The Scene API is a high-level rendering framework built on top of the Device API.
It serves both as a testing environment for the Device API and as a ready-to-use rendering system for application development.
Current features include:
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.
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.
TAA, SSGI, SSR, SSAO, bloom, motion blur, FXAA, tonemapping, color grading, and separate subsurface-scattering passes for skin.
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.
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.
Editor
The editor is itself built on the Scene and Device APIs. It covers scene editing, the content browser, node-graph material blueprints, terrain sculpting and texturing, animation editing, TypeScript scripting bound to scene entities, and a plugin API for custom tools and panels.
The desktop build (Electron) adds local project folders with persistent storage, an embedded MCP server so AI agents can drive the editor directly, and a built-in LLM assistant. API keys are stored locally, encrypted at rest.
Where to start
If you are building a 3D application in code, just read these in order:
- Installation — figure out which packages you need
- Your First Application — get the first frame on screen
- Adding Models and Materials — put things in the scene
- Shadows and Post-processing — make it look presentable
After that, go deeper into individual topics under "Using the Scene API" as needed.
If you would rather use a visual workflow, start with the editor overview.
If you are writing your own renderer and do not plan to use the engine's scene management, go straight to the low-level graphics API.