Real-time WebGL study

Runner

A skinned figure wrapped in pulsing wire, shedding particles as it runs. Scroll to move the camera.

Loading scene…

Play Runner+

How it's built

Everything above renders live in the browser with three.js: one rigged model, a handful of custom shaders, and no pre-rendered frames.

random start → 128 steps along mesh edges

Wire strands

Strands are generated at load by walking the body's vertex graph, then skinned by the same skeleton as the body so they deform with every stride.

0.25 s 0.5 s 0.75 s older, faster

Shed particles

Four times a second a shell of points is dropped on the current pose and streams away behind the runner, timed with a flash through the wires.

clear zone front view · one instanced draw call

Light streaks

A few hundred instanced bars on a half-tunnel, drawn in a single call, carry the sense of forward speed.

camera mirrored camera blur + normal offset

Reflective floor

The scene is rendered a second time mirrored, blurred, and distorted by a normal map that scrolls under the runner's feet.

0 1 2 3 runner + fractal noise top view

Handheld camera

Scroll position blends four keyframes, with fractal noise layered on top so the frame never sits perfectly still.

rendered + bloom render bloom grey SMAA + wires

Post-processing

Bloom supplies the neon glow, and the image drains to grey as the camera swings behind the figure.

A technique study inspired by the hero on zuinc.com/about, re-implemented from scratch. Character and run cycle from Mixamo. Back to the portfolio.