Zdog — Round Flat Designer-Friendly Pseudo-3D Engine

Introduction

Zdog is a pseudo-3D engine that renders shapes with flat, round, designer-friendly aesthetics. It calculates 3D positions and rotations but draws shapes without perspective distortion or shading, producing an illustrated look that is unique compared to traditional 3D libraries.

What Zdog Does

• Renders 3D scenes to Canvas or SVG without WebGL
• Provides shape primitives: sphere, cylinder, cone, box, hemisphere, torus, and custom paths
• Supports full 3D rotation, translation, and scaling with matrix transforms
• Groups shapes into hierarchical scene graphs with parent-child relationships
• Produces a flat-shaded illustrative style with consistent stroke rendering

Architecture Overview

Zdog uses a scene graph where each shape stores its 3D position, rotation, and geometry. On each render frame, it performs a depth sort of all shapes and draws them back-to-front using the painter's algorithm. Shapes are rendered as 2D paths with uniform stroke widths, creating the signature round flat look. No perspective projection is applied—objects do not shrink with distance, maintaining the illustration aesthetic.

Self-Hosting & Configuration

• Install via npm or include from CDN as a script tag
• Create an Illustration bound to a canvas or SVG element
• Add shapes with addTo to build the scene graph hierarchy
• Call updateRenderGraph() in an animation loop for interactive rotation
• No build step required; works as a standalone ES module or global script

Key Features

• Pseudo-3D rendering without WebGL dependency or GPU requirements
• Flat illustration style produces clean vector-like output at any resolution
• Scene graph with grouping (Anchor, Group) for modular 3D compositions
• Path-based custom shapes with moveTo, lineTo, arc, and bezier commands
• Lightweight at under 3KB gzipped with zero dependencies

Comparison with Similar Tools

• Three.js — full 3D with lighting, textures, WebGL; Zdog is flat-styled without GPU
• Babylon.js — game-grade 3D engine; Zdog targets illustrations, not photorealism
• CSS 3D transforms — limited to flat planes; Zdog handles actual 3D geometry
• Paper.js — 2D vector scripting; Zdog adds the third dimension
• p5.js WEBGL mode — perspective 3D; Zdog's flat style is its defining feature

FAQ

Q: Can Zdog render complex 3D models? A: It handles dozens to hundreds of shapes well. For complex meshes with thousands of faces, use a WebGL engine instead.

Q: Does it support animations? A: Yes. Update rotation or position in a requestAnimationFrame loop and call updateRenderGraph() each frame.

Q: Can I export Zdog scenes as SVG? A: Yes. Use an SVG element as the render target and the output is standard SVG markup.

Q: Why no perspective? A: The flat orthographic style is an intentional design choice for an illustrated, toy-like aesthetic.

Sources

• https://github.com/metafizzy/zdog
• https://zzz.dog/