Lowfi Engine — WebGL2 3D Engine Showcase

Engine Highlights

Lowfi Engine is constructed from scratch without third-party rendering frameworks. Every system is built against verifiable specifications and verified through automated test suites.

WebGL2

Linear Renderer

Blinn-Phong lighting in linear space with ACES tone mapping, 2048×2048 sun shadows (3×3 PCF), up to 8 point lights per object, frustum culling, and GL context loss resilience.

60 Hz

WASM Physics

Rapier WASM on a fixed timestep with interpolated rendering positions. Capsule character controller supporting autostep, slope sliding, and mantle.

20 Hz

WebRTC P2P

Serverless peer-to-peer networking via Trystero (Nostr/BitTorrent). Host-authoritative simulation, binary message schema (186 B/state), client prediction, and lag compensation.

1,350+

Unit & CDP Tests

1,350+ passing Vitest unit tests plus headless Chrome CDP scripts validating frame times, physics, network latency, and rendering output against quantitative controls.

Engine in Action

Visual captures from test scenes, greybox environments, and weapon viewmodels.

WebGL2 engine 3D rendering test scene showing lighting, shadows, and glTF models. — **WebGL2 Test Scene** Directional sun shadow mapping (2048×2048 PCF), up to 8 active point lights per object, Blinn-Phong lighting in linear color space with ACES tone mapping, and glTF 2.0 model loading.

Shooting range in greybox map with target posts and player crosshair. — **Greybox Shooting Range** Rapier WASM physical colliders generated directly from drawn trimeshes, fixed-step player movement, target posts measuring time-to-kill (TTK), and dynamic crosshairs.

First-person view of the QX-9 Spark handgun held in hand at the shooting range. — **First-Person Viewmodel & Weapon Handling** Hand-crafted keyframe animations with cross-faded clip blending, fixed pattern recoil, aim-down-sights (ADS) transitions, and muzzle flash particle emitters.

Technical Architecture

A detailed look at the core subsystems built into engine/.

WebGL2 Renderer & Pipeline

Linear Color Space & Tone Mapping: Textures are decoded as sRGB (via GPU decoding) and shaders calculate lighting in linear space with ACES filmic tone mapping before linear-to-sRGB conversion (#include <color_space>).
Lighting Model: Blinn-Phong lighting with hemispherical ambient light, directional sun light, and up to 8 active point lights per object selected CPU-side by distance and intensity.
Directional Shadow Mapping: 2048×2048 depth texture (DirectionalShadow) using hardware comparison sampling (sampler2DShadow), 3×3 PCF kernel, and slope bias (polygonOffset) aligned to texel grids.
Frustum Culling & Batching: Gribb & Hartmann 6-plane frustum extraction (frustumFromMatrix) with AABB tests (aabbInFrustum) reducing draw calls by up to 99% in occluded views. MeshRenderer sorts draws by shared material to minimise GPU state changes.
WebGL Context Loss Recovery: RenderDevice tracks all GPU resources (VAOs, VBOs, programs, textures, framebuffers) and rebuilds them seamlessly from CPU descriptions upon context restoration without reloading the page.

Asset Pipeline & Animations

glTF 2.0 Loader & Parser: Custom GLB / .gltf parser (loadGltf) handling interleaved buffers, emissive strengths (KHR_materials_emissive_strength), sparse accessors, and multi-node model instantiation.
Blender Pipeline: Automated Python build scripts (scripts/blender/) generate map assets and props from Blender. Budget limits (triangles & texture size) are strictly enforced in CI (tests/asset-budgets.test.ts).
GPU Skeletal Skinning: Joint and weight attributes (JOINTS_0, WEIGHTS_0) evaluated on the GPU with slerp rotation interpolation. Evaluated poses match Blender's native animation output within a maximum deviation of 0.13 mm across 9 keyframes.
Viewmodel & Clip Blending: ClipBlender cross-fades animation clips starting from the active displayed pose, ensuring smooth transitions even when a fade is interrupted by another action.

Physics & Character Movement

Fixed Timestep WASM Physics: Rapier physics initialized dynamically on demand (loadRapier()), advancing in a strict 60 Hz fixed timestep (world.step()). Rendered positions and rotations are interpolated (world.interpolate(alpha)).
Kinematic Capsule Controller: Custom character controller (CharacterController) with slope velocity projection, autostep for stairs (up to 30 cm), ground snapping on descent, steep slope sliding (> 50°), and mantle (ledge grab up to 1 m).
Trimesh Colliders: Static map colliders are generated directly from the drawn mesh geometry (trimeshShape), preventing collision discrepancies between visual models and physical surfaces.
Particle System: Pre-allocated typed array particle pool (ParticlePool) yielding zero Garbage Collection overhead. Quad-instanced rendering (drawArraysInstanced) executes in a single draw call per effect.

WebRTC P2P & Spatial Audio

Serverless WebRTC Networking: Peer-to-peer data channels via Trystero using Nostr relays or BitTorrent trackers, requiring no dedicated server infrastructure.
Host-Authoritative 20 Hz Simulation: Packed binary message schemas (engine/net/schema.ts) compress 12-player state snapshots into 186 bytes (vs 485 bytes in JSON).
Prediction & Lag Compensation: Client-side prediction with input buffer replay and character controller reconciliation (MovementInput.nudge). Host-side lag compensation rewinds player history by the measured round trip, up to 400 ms.
Interpolated Remote Entities: Remote players rendered 100 ms in the past using shortest-path angle interpolation to prevent jitter between 20 Hz state ticks and high-framerate displays (e.g. 144 Hz).
Host Migration: Symmetric election (hostAmong) allows seamless host re-election when an host leaves without sending network messages.
Spatial Web Audio: Web Audio API graph with 3D PannerNode, linear distance attenuation (footsteps audible at 8m, 22m, or 32m based on movement style), and lowpass wall occlusion filtering.

Automated Verification & Testing

Every performance, physical, and rendering claim is quantitatively measured against controls using a comprehensive suite of unit tests and headless Chrome CDP scripts.

Vitest Unit Suite

Over 1,350 unit tests (tests/*.test.ts) verify mathematical formulas, TTK ballistics, schema serialization, animation sampling, and physics against real Rapier WASM instances.

Maths & Bounds: gl-matrix transforms, AABB bounds, frustum plane extraction.
Network Schemas: Binary encoding, token bucket rate limiting, fuzz testing with 100,000 malformed messages.
Ballistics & TTK: Fixed recoil patterns, damage falloff curves, shotgun pellet spreads, time-to-kill formulas.

Chrome CDP Browser Checks

50+ browser verification scripts (tests/checks/) launch headless Chrome via Chrome DevTools Protocol (CDP) to measure real runtime metrics against controls.

Render Parity: Pixel-for-pixel image comparisons against Blender Workbench renders (IoU 0.998+).
Frame Timing: Verification of 0 hitching frames (> 33 ms) after pre-warming GPU pipelines.
Multiplayer Simulation: Automated multi-tab WebRTC test runs evaluating prediction latency, lag compensation, and disconnect handling.