04ENDLESS.RUNNER/Web Game

DINO 3D

Chrome's classic offline Dino runner reimagined in low-poly 3D for desktop and mobile with dynamic day/night cycles.

Role: Solo Game & Graphics Developer
Stack: Three.js / WebGL / JavaScript / Canvas API
Year: 2026
Status: Active
Links: Live app ↗Source ↗

01Context

Reimagining the classic 2D offline dinosaur runner into an engaging, responsive 3D WebGL experience playable on any screen size.

02Problem

Balancing responsive input latency on touch screens with accurate 3D collision volumes and dynamic lighting without dropping frames on mobile chipsets.

03Constraints

01Instant input response for jump action (sub-16ms latency)
02Seamless adaptation between portrait mobile (390x844) and ultra-wide desktop monitors
03Zero external asset bloat: all geometries created procedurally in-code

04Architecture

A deterministic game loop integrating Three.js scene graphs, Axis-Aligned Bounding Box (AABB) collision checks, and parametric daylight interpolation.

Fixed Timestep Loop: Decoupled game physics step from monitor refresh rate (prevents higher jump heights on 144Hz screens).
Procedural Geometry Mesh Builder: In-code vertex generation for low-poly dinosaur, cactus hazards, and ground tracks.
Atmosphere Controller: Interpolates directional light intensities, fog distance, and background color across score intervals.
Input Abstraction Layer: Unified handler normalizing Spacebar, ArrowUp, and touch taps.

05Decisions

D1Procedural low-poly geometry over heavy glTF 3D model files

Why

Instant download with zero asset loading screens, matching the classic offline game spirit.

Result

Page loads in under 300ms on 3G mobile networks.

D2Custom AABB collision detection over full physics engines like Cannon.js

Why

A runner only needs jump gravity and hazard overlap checks; a 50KB physics engine is unnecessary overhead.

Result

Negligible memory footprint and predictable hitbox tuning.

06Trade-offs

Stylized low-poly aesthetic vs photorealistic textures

Gained

+Timeless visual identity, maximum frame rates across low-end mobile devices

Gave up

−Simpler visual detail

07Performance

↯Mesh object pooling for repeating cactus and ground segments (zero runtime memory allocation/GC churn)
↯Dynamic pixel ratio clamping to 2x on high-density Retina displays to prevent mobile GPU throttling
↯Automated game loop pause when browser tab loses focus (document.hidden API)

08Challenges

#Configuring the camera frustum and vertical FOV dynamically so that incoming obstacles remain visible on tall, narrow phone screens without feeling distorted
#Preventing double-jump glitches caused by touch event bubbling on mobile browsers

09Learnings

→Game physics in JavaScript must always use elapsed delta-time or a fixed timestep accumulator to prevent speed bugs across variable refresh rate monitors (60Hz vs 120Hz ProMotion).
→Procedural 3D assets eliminate network waterfalls and versioning complexities.

10Retrospective

Implementing Web Audio API sound synthesis (synthesizing retro 8-bit blips and jumps directly in code) would eliminate external audio asset loading entirely.

11Gallery

The Premise. DINO 3D reimagines Chrome's offline Dino game in a compact third-person 3D world: one button, one horizon, and a steadily escalating test of timing.

FIG.01Real-time WebGL runner loop with obstacle spawning and day/night transition.

The Rhythm. Leap over cacti and stay alive as the run moves through bright daylight and an atmospheric night cycle. Switchable controls keep every decision readable on desktop and mobile.

Dino 3D title screen — FIG.02Minimalist title interface with instant start prompt.

The Archive. Built as a focused browser game, the project pairs low-poly forms with a restrained pixel-art language and a score chase designed for repeat runs. Desktop and mobile captures from the 390x844 mobile pass are included below.

Dino 3D runner approaching obstacles — FIG.03Third-person low-poly camera projection during daylight run.

Dino 3D runner jumping over an obstacle — FIG.04Parabolic gravity arc and jump timing over cactus hazards.

Dino 3D night run — FIG.05Dynamic night lighting shader with illuminated horizon.

Dino 3D high-score run — FIG.06High score tracking with local score persistence.

Dino 3D game-over screen — FIG.07Game over collision state with instant restart listener.

Mobile · 390×844

Dino 3D title screen on a mobile viewport — FIG.01Portrait 390x844 layout with touch gesture support.

Dino 3D obstacle run on a mobile viewport — FIG.02Mobile field-of-view adjustment for vertical aspect ratios.

Dino 3D night run on a mobile viewport — FIG.03Night cycle rendering on high-DPI mobile screens.

Next project · 05

THE AI ALMANAC →

A book-inspired reference to AI concepts, with a 791-term glossary, layered explanations, and personal reading tools.