Z-Buffer Demo

Left / Right: cycle model · Click or tap: cycle model · Space: reset speed

A real-time software Z-buffer 3D rendering engine. Originally written in Borland Turbo Pascal and x86 Assembly for DOS in December 1993, targeting VGA Mode 13h (320×200, 256 colors). Since modern systems cannot run DOS executables, the original code was transpiled to JavaScript/Canvas in 2026.

The demo renders rotating 3D polygon objects and pre-rendered sphere sprites into the same scene, all composited through a shared Z-buffer for correct depth ordering. Polygon faces are flat-shaded based on their Z-depth (closer = brighter). Sphere sprites use a pre-computed depth map so they correctly occlude and are occluded by the polygon geometry.

Features

Software Z-buffer — per-pixel depth test for all geometry and sprites
Depth shading — closer fragments appear brighter (automatic fog effect)
3D polygon rasterizer with scanline-based edge walking
Full XYZ Euler rotation with perspective projection
Backface culling via cross-product normal test
Pre-computed sphere depth map (64×54) for sprite Z-compositing
Multiple 3D models (dome, wing, torus, pyramid) loaded from original .CON binary files
Bouncing sphere sprites with palette-based coloring
Keyboard controls for model switching (left/right arrow) and speed reset
2×2 pixel zoom via CSS scaling (pixelated rendering)
60 fps frame limit via requestAnimationFrame

Parameters (ZBUFFER_CFG)

Name	Type	Description	Default
`model`	number	Starting model index (0=halb/dome, 1=wing, 2=ring/torus)	0

Keyboard Controls

Key / Input	Action
Arrow Left / Right	Cycle through 3D models
Click or tap canvas	Cycle through 3D models
Space	Reset rotation speed to defaults

Code Example

<canvas id="game" width="640" height="400"></canvas>
<script>var ZBUFFER_CFG = { model: 0 };</script>
<script src="zbufferdemo.min.js"></script>

Original Program

Originally written in Borland Turbo Pascal 7.0 with TASM x86 Assembly (December 1993). The JavaScript port uses the authentic original data: 3D models parsed from the binary .CON files (HALB, WING, RING, WURF1), the sphere Z-depth map from KUGEL.DAT, the 5 sphere textures and the 256-color palette from KUGELN!.PCX — all embedded directly in the script. The rendering logic (Z-buffer compositing, scanline polygon rasterizer, depth-based shading, sphere placement) faithfully follows ZERO3D2.PAS.