Turn The Browser GPU Into A Spatial Computer

An ordinary browser can run a visible field of parallel state machines.

Run the minimum path Inspect shader machines Follow WebGL into RTL

Direct WebGL1 and GLSL ES expose the complete path: context creation, shader compilation, textures, framebuffers, packed state, ping-pong updates, display, and readback.

The work grows from a minimal GPU program through stateful cellular automata and into Cartilage, where a GLSL fabric installs and executes circuit roles across space.

One Shader Advances An Entire Field

WebGL presents a graphics pipeline, and its programmable fragment stage can evaluate the same local rule across a rectangular data field. Textures hold input state, a framebuffer texture receives output, and one draw call invokes the fragment shader at every destination.

Stateful computation alternates between two fields. The shader reads one texture and writes the other, then JavaScript swaps their roles. A separate display shader translates packed machine state into visible marks while the update shader stays focused on computation.

The cellular automata use packed RGBA state, neighbor reads, one active update function, a swap texture, and a display pass. Cartilage extends that pattern with routing, constants, MUX roles, ports, region ownership, and circuit installation.

Every Layer Stays Visible

Control plane

JavaScript obtains the context, compiles and links shaders, allocates textures and framebuffers, binds inputs, issues draws, swaps state, and reads results.

Compute plane

GLSL ES 1.00 evaluates the local rule in parallel, using texture samples and uniform parameters.

State

Texture channels encode bits, small fields, directions, roles, ownership, or other per-cell values.

Inspection

Display shaders, readback, screenshots, and frame sequences reveal the evolving machine.

Keeping the implementation direct makes the browser-to-GPU interface part of the lesson. Readers can follow the calls that allocate, compile, bind, execute, swap, and read without losing the machine beneath a library.

Five Routes Into Browser Computation

1 · Minimum path

Run GPU Code With Raw WebGL And GLSL

Create the browser context, compile and link GLSL source, issue a draw, and produce a visible result. Sequentially runnable code blocks keep every step close to its effect.

2 · Scaffold

WebGL GPGPU Scaffolding

The support structure around a compute shader: capabilities, textures, buffers, programs, framebuffers, and the JavaScript control path.

Vortex cellular automaton rendered from packed WebGL state

3 · Stateful machines

Browser/GPU Cellular Automata

Local symbol routing, six-neighbor reads, packed state, ping-pong updates, and separate display logic across the 2019–2021 machines.

Cartilage GLSL fabric showing local cell roles and routing marks

4 · Reconfigurable fabric

Runtime Instantiation In Adjacent Space

Local ports, parent pointers, serial configuration streams, and replaceable tile roles let one region install another inside the browser GPU field.

Choose the editor, wire tracing, ownership, recovery, or simulator package and build it with Brian.

5 · Browser to hardware model

Cartilage Core

A compact WebGL1 fabric and an independent SystemVerilog implementation accept the same exact 252-bit installation; a self-checking Verilator testbench exercises the RTL.

Illustrated path from programmable film shading to GPU and matrix hardware

Context · History

Programmable Shaders Before AI Hardware

Follow programmable parallel computation from RenderMan-style shading through real-time languages, Brook, CUDA, AlexNet, and matrix engines.

The Machine Travels With Its Explanation

An ordinary browser can carry the control code, shader code, input state, display, and explanation together. A reader opens the page, watches the machine move, and inspects its source through familiar developer tools.

That portability suits architectures whose state has a spatial meaning. In Cartilage Core, the browser advances a texture ping-pong simulation one host step at a time. The SystemVerilog model uses a continuous combinational application plane and locally routed configuration-clock edges. The same installation makes their different execution models immediately comparable.

From WebGL1 Toward New Spatial Machines

The direct WebGL1 and GLSL ES 1.00 implementations establish a long, executable line of local-state computation. They make the machinery clear enough to teach, modify, and carry into new browser or native GPU systems.

WebGPU and native GLES can extend the same architecture with modern storage, compute, and deployment paths. Cartilage provides the deeper opportunity: use those capabilities to build a visual workstation where computation can create and reconfigure neighboring computation.