← Back to CV

Engine Experience

Web & Browser

Games and real-time 3D that run from a link. Three.js sits on top of WebGL, and WebGL is graphics programming — which is where I have spent most of the last three decades. Four things are live right now: the raytraced surface behind this text, a scene you can fly around, a 6DOF flight combat game, and Senet with AI opponents and peer-to-peer multiplayer. All four are AI-assisted builds, and there is a breakdown of each below.

Play Them How They Work
WebGL Live On This Page
WebRTC Peer-To-Peer Multiplayer
4 Playable In Browser
0 Installs Required

What I Bring To It

🌐

The Layer Underneath

Three.js is a friendly wrapper over WebGL. Buffers, framebuffers, texture state, draw calls and the GL state machine are the level I actually work at — so when the abstraction leaks, or a project needs something outside what it exposes, that is not a wall.

WebGLWebGPUOpenGLState Machine
🎨

Shader Authoring

GLSL and HLSL written regularly for years across engines and platforms. Custom materials, raymarching, procedural texturing and full post-processing chains rather than parameter tweaking.

GLSLHLSLRaymarchingPost FX
📏

Graphics Maths

Mathematics and physics are the hobby as well as the job — implicit surfaces, root finding, analytic normals, projections and numerical methods. The pieces of 3D that are maths problems wearing a rendering costume.

MathsImplicit SurfacesNumerics
⚡

Browser Performance

The browser is a constrained target: one main thread, integrated GPUs, wildly varying device pixel ratios. Heavy work goes off that thread into Web Workers, or onto the GPU as WebGPU compute where it fits. Same optimisation discipline as console work — measure, budget, cut.

Web WorkersWebGPUDPR ScalingFrame Budget
📱

Reach

No install, no store, no certification — a link. Useful for demos, tools and visualisation, and a natural fit alongside the mobile and cross-platform delivery already in the CV.

JavaScriptCross-platformMobile Web
🔮

Visualisation

Astronomical and scientific visualisation from Star Chart and Known Space, and creative tooling from Mischief and NUKE — the same problems, in a canvas element.

DatavizAstronomyCreative Tools

This Page

The background above is not a video or a library demo. It is a raytracer in GLSL and plain WebGL, with no dependencies, rendering a Chmutov sextic surface in real time — a port of my earlier work, done with AI assistance. Here is what happens every frame.

1. Ray Marching an Implicit Surface

Scene pass

GLSL
  • The surface is the Chmutov sextic — the zero isosurface of the scalar field T6(x) + T6(y) + T6(z), where T6 is the sixth Chebyshev polynomial of the first kind. There is no mesh, no vertices and no geometry to load
  • A bounding box slab test skips empty space, then 80 fixed steps sample the field looking for a sign change. It is not a distance field, so a crossing is bracketed rather than sphere traced, then refined by 8 iterations of bisection
  • Normals come from central differences of the field — its gradient at the hit point — shaded with two lights, Blinn-Phong specular, Fresnel and distance fog

2. Procedural Texturing

Scene pass

GLSL
  • Spherical UVs feed a hash-driven procedural texture — a grid, flickering offset squares and eight layers of animated bars
  • Every element is generated in the shader from a hash function, so there are no texture assets to download

3. Bloom Chain

Post-processing

5 passes
  • The scene renders at half brightness into a framebuffer to keep headroom in an 8-bit target
  • A luminance bright-pass at half resolution, then two iterations of a separable 9-tap Gaussian blur — four passes for a wide, soft glow

4. Composite & Tonemap

Final pass

To screen
  • Scene and bloom are combined, vignetted, tonemapped and gamma corrected on the way to the default framebuffer
  • Device pixel ratio is capped and an IntersectionObserver stops the whole chain when the canvas scrolls off screen — it costs nothing when you cannot see it
  • Read the source

The Other Four

What is actually running in each of the playable projects below. Like the background above, all four are AI-assisted builds.

Hedron Yard

d1.redmarmosetstudios.com

Three.js
  • A raytraced scene you fly around — 2,400 polyhedra lit by roughly 96,000 lights, 40 to an object, with WASD to fly, drag to look and Tab for the controls panel
  • Shadows and reflections are traced, not faked: no shadow maps, no reflection probes. Each object carries its own lists — up to 32 lights bathing it, 16 of those casting shadows, and 26 reflection neighbours for the polished, low-roughness materials
  • The scene is built in parallel across Web Workers, one per core up to eight, so the packing and light assignment never block the main thread
  • An orbit-camera toggle and a live stats overlay sit on top of the scene
  • A chiptune soundtrack with a real transport — play and pause, scrubbing, volume, mute and per-track notes
  • Ships as a bundled ES module build: one page, no install, no store

SA-43: Hammerhead

d2.redmarmosetstudios.com

Three.js
  • Six-degree-of-freedom flight in an endo/exo-atmospheric attack craft — pitch, yaw and roll rather than a fixed horizon
  • A weapon menu, target locking and an eject button, with gamepad support alongside mouse and keyboard
  • Peer-to-peer networking over WebRTC, so sessions connect browser to browser instead of through a game server
  • Stats overlay and credits screen in-page; bundled ES modules, nothing to download

We Have A Problem!

whap.redmarmosetstudios.com

WebGPU
  • A space sandbox in progress — a block-based ship builder with saveable prefabs, asteroids to work, multiple camera rigs, and a rendering stack that runs to star fields and black holes
  • WebGPU does the compute: adapter and limits are probed at startup, WGSL compute pipelines are dispatched for the heavy passes, and there is a fallback path for browsers without it
  • Web Workers carry the rest off the main thread — chunk meshing, ship meshing, surface field evaluation, texture packing and saving each run in their own worker

Senet

senet.redmarmosetstudios.com

No framework
  • The oldest known board game, around 3500 BCE — against the AI, hot-seat, or online with friends, across two rule reconstructions
  • Seven AI tiers built on an opening book and Monte Carlo tree search, so the difficulty ladder is search depth rather than cheating
  • Peer-to-peer multiplayer over WebRTC, with no game server in the middle
  • Lessons, puzzles and a rated leaderboard, and it also runs as a Discord Activity
  • Plain ES modules loaded straight from source, with only PeerJS, marked and DOMPurify vendored alongside — no framework, no Three.js

Demos & Games

Everything here runs in place — no install, no download, just a link. All of it is built with AI assistance.

Browser · Three.js

Graphics Demo

Hedron Yard — a raytraced scene you can fly around, with 2,400 polyhedra, some 96,000 lights, traced shadows and reflections, and an FPS overlay over a chiptune soundtrack. WASD to fly, drag to look, Tab for the controls panel.

Play now →

Browser · Three.js

SA-43: Hammerhead

Six-degree-of-freedom flight combat in an endo/exo-atmospheric attack craft. Pitch, yaw and roll, a weapon menu, target locking and an eject button. Gamepad supported.

Play now →

Browser · Three.js · WebGPU · In development

We Have A Problem!

A space sandbox in progress — a block-based ship builder with saveable prefabs, asteroids to work, multiple camera rigs, and a rendering stack that runs to star fields and black holes. WebGPU compute and Web Workers underneath.

Play now →

Browser · No framework

Senet

The oldest known board game, playable online. Seven AI tiers using an opening book and Monte Carlo tree search, peer-to-peer multiplayer over WebRTC, a Discord Activity, 19 interactive lessons and a rated leaderboard. Plain ES modules — no Three.js, no framework.

Play now →

The first three are built on Three.js; Senet is plain ES modules. You can also read the renderer behind this page on GitHub.

Other Engines