Rule 110 in WebGPU
If you’re running the latest Google Chrome Canary,
and you’ve enabled the “Unsafe WebGPU” experiment,
then you should two funny triangles below.
The first is just an image;
the second is calculated with WebGPU,
a bleeding-edge, partially implemented web browser feature.
Most of you reading this won’t have this feature enabled,
so you’ll just see the image.
The image is Rule 110,
a cellular automaton.
It’s calculated using this GLSL:
#version 450
layout(std430, set = 0, binding = 0) buffer StateInMatrix { uint size; uint cells[]; } stateIn;
layout(std430, set = 0, binding = 1) buffer StateOutMatrix { uint size; uint cells[]; } stateOut;
uint s(uint i) {
return i < stateIn.size ? stateIn.cells[i] : 0;
}
void main() {
uint x = gl_GlobalInvocationID.x;
uint n = (s(x-1) << 2) | (s(x) << 1) | s(x+1);
uint newState = (n == 6 || n == 5 || n == 3 || n == 2 || n == 1) ? 1 : 0;
stateOut.cells[gl_GlobalInvocationID.x] = newState;
}
This GLSL runs one step of a simulated world,
from stateIn
to stateOut
.
The main
function runs once for every cell
in the world.
At the time of writing,
Google Chrome hasn’t implemented any way to draw GPU buffers to the screen.
But it does let you extract a buffer as an ArrayBuffer
.
So instead,
I use a 2d
canvas context, and call ctx.putImageData
with that ArrayBuffer
.
I use some more GLSL to render the state to a pixel buffer,
in a format that can be written to a canvas:
#version 450
layout(std430, set = 0, binding = 0) buffer StateMatrix { uint size; uint cells[]; } state;
layout(std430, set = 0, binding = 1) buffer ScreenMatrix { uint pixels[]; } screen;
uint rgba(uint r, uint g, uint b, uint a) {
// Note "little-endian" order of uints!
return a<<24 | b<<16 | g<<8 | r;
}
void main() {
uint x = gl_GlobalInvocationID.x;
screen.pixels[x] = state.cells[x] == 0 ? rgba(255,255,255,255) : rgba(0,0,0,255);
}
For some reason, the simulation is really slow.
It takes around a second to render this 400px canvas.
Maybe I’m doing something wrong,
or this WebGPU implementation is very inefficient.
I’m sure it would be faster in vanilla JavaScript.
The WebGPU API is pretty low-level.
I needed ~150 lines of JavaScript to run this simulation.
I won’t explain it all here -
not least because I don’t understand it all.
I recommend reading “Get started with GPU Compute on the Web”,
which is where I started.
More by Jim
Smear phishing: a new Android vulnerability
Trick Android to display an SMS as coming from any contact. Convincing phishing vuln, but still unpatched. 2020-08-06
A probabilistic pub quiz for nerds
A “true or false” quiz where you respond with your confidence level, and the optimal strategy is to report your true belief. 2020-04-26
Time is running out to catch COVID-19
Simulation shows it’s rational to deliberately infect yourself with COVID-19 early on to get treatment, but after healthcare capacity is exceeded, it’s better to avoid infection. Includes interactive parameters and visualizations. 2020-03-14
The inception bar: a new phishing method
2019-04-27
The hacker hype cycle
I got started with simple web development, but because enamored with increasingly esoteric programming concepts, leading to a “trough of hipster technologies” before returning to more productive work. 2019-03-23
Project C-43: the lost origins of asymmetric crypto
Bob invents asymmetric cryptography by playing loud white noise to obscure Alice’s message, which he can cancel out but an eavesdropper cannot. This idea, published in 1944 by Walter Koenig Jr., is the forgotten origin of asymmetric crypto. 2019-02-16
How Hacker News stays interesting
Hacker News buried my post on conspiracy theories in my family due to overheated discussion, not censorship. Moderation keeps the site focused on interesting technical content. 2019-01-26
My parents are Flat-Earthers
2019-01-20
The dots do matter: how to scam a Gmail user
Gmail’s “dots don’t matter” feature lets scammers create an account on, say, Netflix, with your email address but different dots. Results in convincing phishing emails. 2018-04-07
The sorry state of OpenSSL usability
OpenSSL’s inadequate documentation, confusing key formats, and deprecated interfaces make it difficult to use, despite its importance. 2017-12-02
I hate telephones
I hate telephones. Some rational reasons: lack of authentication, no spam filtering, forced synchronous communication. But also just a visceral fear. 2017-11-08
The Three Ts of Time, Thought and Typing: measuring cost on the web
2017-10-26
Granddad died today
Granddad died. The unspoken practice of death-by-dehydration in the NHS. The Liverpool Care Pathway. Assisted dying in the UK. The importance of planning in end-of-life care. 2017-05-19
How do I call a program in C, setting up standard pipes?
A C function to create a new process, set up its standard input/output/error pipes, and return a struct containing the process ID and pipe file descriptors. 2017-02-17
Your syntax highlighter is wrong
2014-05-11
Tagged #programming, #webgpu. All content copyright James Fisher 2020. This post is not associated with my employer.Found an error? Edit this page.