@bigmistqke/view.gl 0.2.0 → 0.4.0

package/README.md

@@ -60,7 +60,7 @@ bun add @bigmistqke/view.gl
 
 ## 👁️ view.gl
 
-The view system provides type-safe WebGL resource management for uniforms, attributes, and buffers
+The view system provides type-safe WebGL resource management for uniforms and attributes
 
 ### 🚀 Basic Usage
 
@@ -74,9 +74,6 @@ const { uniforms, attributes } = view(gl, program, {
     position: { kind: 'vec3' },
     uv: { kind: 'vec2' },
   },
-  buffers: {
-    indices: { target: 'ELEMENT_ARRAY_BUFFER' },
-  },
 })
 
 // Type-safe uniform setting
@@ -93,7 +90,7 @@ attributes.position.bind()
 The `view()` function creates type-safe WebGL resource managers from a schema.
 
 ```typescript
-const { uniforms, attributes, buffers } = view(gl, program, schema)
+const { uniforms, attributes } = view(gl, program, schema)
 ```
 
 **Parameters:**
@@ -106,14 +103,29 @@ const { uniforms, attributes, buffers } = view(gl, program, schema)
 
 - `uniforms`: Type-safe uniform setters
 - `attributes`: Attribute managers with buffer handling
-- `buffers`: Generic buffer managers
+- `dispose`: Deletes everything the view made — see [Disposal](#-disposal)
 
 #### 📋 ViewSchema
 The complete schema object that defines all WebGL resources. Contains mappings for:
 - [`UniformSchema`](#-uniformschema) - uniform variable definitions
 - [`AttributeSchema`](#-attributeschema) - vertex attribute definitions  
 - [`InterleavedAttributeSchema`](#-interleavedattributeschema) - interleaved vertex data definitions
-- [`BufferSchema`](#-bufferschema) - generic buffer definitions
+- [`BufferSchema`](#-bufferschema) - buffers the view owns
+
+A buffer is the one schema member with no name in the source, so it is not
+resolved against the program the way a uniform or an attribute is — a buffer key
+is a label for the reader. What putting it in the schema decides is its
+**lifetime**, and that is the question worth answering at the declaration:
+
+| the buffer | declare it | disposed by |
+| --- | --- | --- |
+| lives and dies with the view | `buffers:` in the schema | the view |
+| outlives the view, or is shared between views | a standalone [`bufferView`](#-bufferview) | you |
+| belongs to somebody else | name it on an attribute | nobody — it is borrowed |
+
+An index buffer whose lifetime is its program's belongs in the schema, beside
+the attributes it is drawn with, on the one signal. A quad cached per context,
+or a buffer handed from one program's view to another's, is its own thing.
 
 <details>
 <summary>TypeScript Types</summary>
@@ -123,12 +135,52 @@ interface ViewSchema {
   uniforms: UniformSchema
   attributes: AttributeSchema
   interleavedAttributes: InterleavedAttributeSchema
-  buffers: BufferSchema
 }
 ```
 
 </details>
 
+### 🗑️ Disposal
+
+Everything that creates a WebGL resource takes an `AbortSignal` and offers a
+`dispose()`, and the two are the same teardown reached two ways:
+
+```typescript
+const controller = new AbortController()
+
+const { view, dispose } = compile(gl, vertex, fragment, { signal: controller.signal })
+const buffers = bufferView(gl, { indices: {} }, { signal: controller.signal })
+const target = createFramebuffer(gl, definition, { signal: controller.signal })
+
+controller.abort() // deletes the program, the buffers, the vertex arrays, the framebuffer
+```
+
+Two rules make this safe to reach for.
+
+**Only what it made.** A resource handed in from outside is borrowed, never
+deleted: a buffer named by an attribute schema, a texture passed to
+`createFramebuffer`. Those belong to whoever created them, and the same buffer
+often feeds several views. Delete one out from under its owner and WebGL does
+not fault where it happened — the object survives while it is bound, so the
+handle is invalidated and the *other* view fails later, on its next upload.
+
+**Once.** Every `dispose()` is idempotent. Disposing by hand and then aborting,
+or aborting twice, deletes each resource exactly once.
+
+| creates | disposed by |
+| --- | --- |
+| `view()` | its own attribute, layout and schema buffers, and vertex arrays still held from `vao()` |
+| `compile()` | the program, and its view |
+| `attributeView` / `interleavedAttributeView` | the buffer, unless the schema named one |
+| `bufferView` | its buffers |
+| `vaoView` | the vertex array, never its participants |
+| `createProgram` | the program |
+| `createTexture` | the texture |
+| `createFramebuffer` | the framebuffer, and the texture unless one was passed in |
+
+`uniformView` takes no signal: a uniform location is not a resource, so there is
+nothing to delete.
+
 ### 👀 Resource Views
 
 Each view type can be imported individually.
@@ -316,8 +368,10 @@ const buffers = bufferView(gl, {
   data: { target: 'ARRAY_BUFFER', usage: 'DYNAMIC_DRAW' },
 })
 
-buffers.indices.set(indexData).bind()
-buffers.data.set(dynamicData).bind()
+buffers.indices.set(indexData)
+buffers.data.set(dynamicData)
+
+const unbind = buffers.indices.bind()
 
 // bind() returns a disposer restoring the previous binding for that target.
 // Worth calling for ELEMENT_ARRAY_BUFFER, whose binding is recorded in the
@@ -628,19 +682,23 @@ You can provide an optional override schema to enhance or override the automatic
 
 ```typescript
 const { program, schema, view } = compile(gl, vertexShader, fragmentShader, {
-  uniforms: {
-    // Add additional uniforms not automatically inferred
-    customTime: { kind: 'float' },
-  },
-  buffers: {
-    // Add buffer definitions
-    indices: { target: 'ELEMENT_ARRAY_BUFFER' },
+  schema: {
+    uniforms: {
+      // Add additional uniforms not automatically inferred
+      customTime: { kind: 'float' },
+    },
   },
 })
 
 // The override schema is merged with the extracted schema
 view.uniforms.customTime.set(123.45)
-view.buffers.indices.set(indexData).bind()
+
+// An index buffer that outlives this program — shared between views, or cached
+// per context — is its own thing. One that dies with the view goes in the
+// schema instead, and is disposed with it.
+const buffers = bufferView(gl, { indices: { target: 'ELEMENT_ARRAY_BUFFER' } })
+buffers.indices.set(indexData)
+const vao = view.vao([view.attributes.position, buffers.indices])
 ```
 
 **Returns**:
@@ -773,7 +831,7 @@ uniforms[u_time].set(performance.now())
 Creates and links a WebGL program from vertex and fragment shader sources.
 
 ```typescript
-const program = createProgram(gl, vertexShaderSource, fragmentShaderSource)
+const program = createProgram(gl, vertexShaderSource, fragmentShaderSource, { signal })
 ```
 
 ### 🖼️ createTexture
@@ -795,6 +853,7 @@ const texture = createTexture(
     wrapT: 'CLAMP_TO_EDGE',
   },
   data,
+  { signal },
 )
 ```
 
@@ -805,18 +864,26 @@ Automatically validates WebGL2-only formats and provides fallbacks for WebGL1.
 Creates a framebuffer with attached texture for render-to-texture operations.
 
 ```typescript
-const { framebuffer, texture } = createFramebuffer(gl, {
-  width: 512,
-  height: 512,
-  attachment: 'color',
-  internalFormat: 'RGBA',
-  format: 'RGBA',
-  type: 'UNSIGNED_BYTE',
-})
+const { framebuffer, texture, dispose } = createFramebuffer(
+  gl,
+  {
+    width: 512,
+    height: 512,
+    attachment: 'color',
+    internalFormat: 'RGBA',
+    format: 'RGBA',
+    type: 'UNSIGNED_BYTE',
+  },
+  { signal },
+)
 ```
 
 Supports color, depth, stencil, and combined depth-stencil attachments with completeness validation.
 
+Pass a `texture` to attach one you already have — ping-ponging a pair of
+framebuffers over shared textures, say. `dispose()` then deletes the framebuffer
+and leaves that texture alone, because it is not the framebuffer's to delete.
+
 ## 🔍 WebGL Type Compatibility
 
 ### 🎯 Uniform Types

package/dev/dist/404.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>view.gl</title>
+  <script>
+    // Redirect to index.html with the current path as a query parameter
+    const path = window.location.pathname.slice(1); // Remove leading slash
+    if (path) {
+      window.location.replace(window.location.origin + '/?redirect=' + path);
+    } else {
+      window.location.replace(window.location.origin);
+    }
+  </script>
+</head>
+<body>
+  Redirecting...
+</body>
+</html>

package/dev/dist/assets/bezier-DrA4cU_H.js

@@ -0,0 +1,292 @@
+import { i as interleave, u as uniform, a as attribute, g as glsl, c as compile } from './tag-C0Vskpp8.js';
+import { d as dom, c as cursor } from './utils-2dzuv_bW.js';
+
+const canvas = dom("canvas", { parentElement: document.body });
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+const gl = canvas.getContext("webgl2", { antialias: true });
+if (!gl) {
+  throw new Error("WebGL not supported");
+}
+const state = {
+  position: { x: 0, y: 0 },
+  // Pan offset in screen pixels
+  scale: 1,
+  // Zoom level
+  controlPoints: [
+    { x: 200, y: 400 },
+    // P0: Start point of the bezier curve
+    { x: 400, y: 100 },
+    // P1: Control point (influences curvature)
+    { x: 600, y: 400 }
+    // P2: End point of the bezier curve
+  ],
+  dragIndex: -1
+  // Index of control point being dragged (-1 = none)
+};
+function screenToWorld(screenX, screenY) {
+  return {
+    x: (screenX - state.position.x) / state.scale,
+    y: (screenY - state.position.y) / state.scale
+  };
+}
+function worldToScreen(worldX, worldY) {
+  return {
+    x: worldX * state.scale + state.position.x,
+    y: worldY * state.scale + state.position.y
+  };
+}
+function getControlPointAt(x, y, threshold = 20) {
+  for (let i = 0; i < state.controlPoints.length; i++) {
+    const screen = worldToScreen(state.controlPoints[i].x, state.controlPoints[i].y);
+    const dx = x - screen.x;
+    const dy = y - screen.y;
+    if (dx * dx + dy * dy < threshold * threshold) {
+      return i;
+    }
+  }
+  return -1;
+}
+canvas.addEventListener("pointerdown", (event) => {
+  const hitIndex = getControlPointAt(event.clientX, event.clientY);
+  if (hitIndex >= 0) {
+    state.dragIndex = hitIndex;
+    cursor(event, (event2) => {
+      const world = screenToWorld(event2.clientX, event2.clientY);
+      state.controlPoints[state.dragIndex] = world;
+      render();
+    });
+  } else {
+    cursor(event, (event2) => {
+      state.position.x -= event2.deltaX;
+      state.position.y -= event2.deltaY;
+      render();
+    });
+  }
+});
+canvas.addEventListener(
+  "wheel",
+  (event) => {
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    const scaleFactor = event.deltaY > 0 ? 0.95 : 1.05;
+    const oldScale = state.scale;
+    const newScale = Math.max(0.1, Math.min(10, oldScale * scaleFactor));
+    const worldX = (mouseX - state.position.x) / oldScale;
+    const worldY = (mouseY - state.position.y) / oldScale;
+    state.scale = newScale;
+    state.position.x = mouseX - worldX * newScale;
+    state.position.y = mouseY - worldY * newScale;
+    render();
+  },
+  { passive: true }
+);
+window.addEventListener("resize", () => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  render();
+});
+const curveVertex = glsl`#version 300 es
+// Attributes (per-vertex data)
+${interleave("data", [
+  attribute.float("a_t"),
+  attribute.float("a_side")
+])}     // Bezier parameter t ∈ [0,1]
+
+// Uniforms (shared data for all vertices)
+${uniform.vec2("u_resolution")}   // Canvas size in pixels
+${uniform.vec2("u_offset")}       // Pan offset in pixels
+${uniform.float("u_scale")}       // Zoom level
+${uniform.vec2("u_p0")}          // Control point P0 (start)
+${uniform.vec2("u_p1")}          // Control point P1 (control)
+${uniform.vec2("u_p2")}          // Control point P2 (end)
+${uniform.float("u_thickness")}   // Curve thickness in world units
+
+void main() {
+  // STEP 1: Evaluate the quadratic bezier curve at parameter t
+  // Quadratic bezier formula: B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
+  float t = a_t;
+  float s = 1.0 - t;  // s is often used for (1-t) for brevity
+  
+  // Calculate the position on the curve
+  vec2 position = s * s * u_p0 +         // (1-t)² * P0
+                  2.0 * s * t * u_p1 +   // 2(1-t)t * P1
+                  t * t * u_p2;          // t² * P2
+  
+  // STEP 2: Calculate the tangent vector at this point
+  // The derivative of the bezier curve gives us the tangent
+  // B'(t) = 2(1-t)(P1-P0) + 2t(P2-P1)
+  vec2 tangent = 2.0 * s * (u_p1 - u_p0) + 2.0 * t * (u_p2 - u_p1);
+  
+  // STEP 3: Create a normal vector (perpendicular to tangent)
+  // Rotate tangent 90 degrees: (x,y) → (-y,x)
+  vec2 normal = normalize(vec2(-tangent.y, tangent.x));
+  
+  // STEP 4: Offset the curve position to create thickness
+  // Move the vertex perpendicular to the curve by thickness * side
+  vec2 offsetPosition = position + normal * u_thickness * a_side;
+  
+  // STEP 5: Transform from world space to screen space
+  vec2 screenPos = offsetPosition * u_scale + u_offset;
+  
+  // STEP 6: Convert to clip space (OpenGL's coordinate system)
+  // Screen space: (0,0) is top-left, (width,height) is bottom-right
+  // Clip space: (-1,-1) is bottom-left, (1,1) is top-right
+  vec2 clipPos = (screenPos / u_resolution) * 2.0 - 1.0;
+  clipPos.y = -clipPos.y;  // Flip Y to match screen coordinates
+  
+  gl_Position = vec4(clipPos, 0, 1);
+}`;
+const curveFragment = glsl`#version 300 es
+precision mediump float;
+out vec4 fragColor;
+
+void main() {
+  // Output a solid blue color for the curve
+  vec3 curveColor = vec3(0.2, 0.6, 1.0);
+  fragColor = vec4(curveColor, 1.0);
+}`;
+const pointVertex = glsl`#version 300 es
+${attribute.vec2("a_vertex")}      // Quad vertex position (-1 to 1)
+${uniform.vec2("u_resolution")}     // Canvas size
+${uniform.vec2("u_offset")}         // Pan offset
+${uniform.float("u_scale")}         // Zoom level
+${uniform.vec2("u_pointPos")}       // Control point position in world space
+
+void main() {
+  // Create a small square around the control point position
+  vec2 screenPos = (u_pointPos * u_scale + u_offset) + a_vertex * 8.0;
+  
+  // Transform to clip space
+  vec2 clipPos = (screenPos / u_resolution) * 2.0 - 1.0;
+  clipPos.y = -clipPos.y;
+  gl_Position = vec4(clipPos, 0, 1);
+}`;
+const pointFragment = glsl`#version 300 es
+precision mediump float;
+out vec4 fragColor;
+
+void main() {
+  // Red color for control points
+  fragColor = vec4(1.0, 0.3, 0.3, 1.0);
+}`;
+const lineVertex = glsl`#version 300 es
+${attribute.vec2("a_position")}     // Line vertex position
+${uniform.vec2("u_resolution")}      // Canvas size
+${uniform.vec2("u_offset")}          // Pan offset
+${uniform.float("u_scale")}          // Zoom level
+
+void main() {
+  // Transform world position to screen space then clip space
+  vec2 screenPos = a_position * u_scale + u_offset;
+  vec2 clipPos = (screenPos / u_resolution) * 2.0 - 1.0;
+  clipPos.y = -clipPos.y;
+  gl_Position = vec4(clipPos, 0, 1);
+}`;
+const lineFragment = glsl`#version 300 es
+precision mediump float;
+out vec4 fragColor;
+
+void main() {
+  // Semi-transparent gray for control polygon
+  fragColor = vec4(0.5, 0.5, 0.5, 0.5);
+}`;
+const { program: curveProgram, view: curveView } = compile(gl, curveVertex, curveFragment);
+const { program: pointProgram, view: pointView } = compile(gl, pointVertex, pointFragment);
+const { program: lineProgram, view: lineView } = compile(gl, lineVertex, lineFragment);
+const curveSegments = 100;
+function generateTriangleStrip() {
+  return new Float32Array(
+    function* () {
+      for (let i = 0; i <= curveSegments; i++) {
+        const t = i / curveSegments;
+        yield t;
+        yield -1;
+        yield t;
+        yield 1;
+      }
+    }()
+  );
+}
+const stripData = generateTriangleStrip();
+curveView.interleavedAttributes.data.set(stripData);
+const pointVertices = new Float32Array([
+  -1,
+  -1,
+  // Bottom-left
+  1,
+  -1,
+  // Bottom-right
+  -1,
+  1,
+  // Top-left
+  -1,
+  1,
+  // Top-left (repeated for second triangle)
+  1,
+  -1,
+  // Bottom-right (repeated for second triangle)
+  1,
+  1
+  // Top-right
+]);
+pointView.attributes.a_vertex.set(pointVertices);
+function updateLineData() {
+  const lineVerticesData = new Float32Array([
+    state.controlPoints[0].x,
+    state.controlPoints[0].y,
+    // P0
+    state.controlPoints[1].x,
+    state.controlPoints[1].y,
+    // P1
+    state.controlPoints[1].x,
+    state.controlPoints[1].y,
+    // P1 (repeated)
+    state.controlPoints[2].x,
+    state.controlPoints[2].y
+    // P2
+  ]);
+  lineView.attributes.a_position.set(lineVerticesData);
+}
+updateLineData();
+function render() {
+  console.log("render!");
+  if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+  gl.viewport(0, 0, canvas.width, canvas.height);
+  gl.clearColor(0.1, 0.1, 0.15, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  updateLineData();
+  gl.useProgram(lineProgram);
+  lineView.attributes.a_position.bind();
+  lineView.uniforms.u_resolution.set(canvas.width, canvas.height);
+  lineView.uniforms.u_offset.set(state.position.x, state.position.y);
+  lineView.uniforms.u_scale.set(state.scale);
+  gl.drawArrays(gl.LINES, 0, 4);
+  gl.useProgram(curveProgram);
+  curveView.interleavedAttributes.data.bind();
+  curveView.uniforms.u_resolution.set(canvas.width, canvas.height);
+  curveView.uniforms.u_offset.set(state.position.x, state.position.y);
+  curveView.uniforms.u_scale.set(state.scale);
+  curveView.uniforms.u_p0.set(state.controlPoints[0].x, state.controlPoints[0].y);
+  curveView.uniforms.u_p1.set(state.controlPoints[1].x, state.controlPoints[1].y);
+  curveView.uniforms.u_p2.set(state.controlPoints[2].x, state.controlPoints[2].y);
+  curveView.uniforms.u_thickness.set(5);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, (curveSegments + 1) * 2);
+  curveView.interleavedAttributes.data.unbind();
+  gl.useProgram(pointProgram);
+  pointView.attributes.a_vertex.bind();
+  pointView.uniforms.u_resolution.set(canvas.width, canvas.height);
+  pointView.uniforms.u_offset.set(state.position.x, state.position.y);
+  pointView.uniforms.u_scale.set(state.scale);
+  for (const point of state.controlPoints) {
+    pointView.uniforms.u_pointPos.set(point.x, point.y);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  }
+}
+render();

package/dev/dist/assets/game-of-life-BYlzWhEL.js

@@ -0,0 +1,186 @@
+import { b as createFramebuffer, u as uniform, g as glsl, c as compile } from './tag-C0Vskpp8.js';
+import { d as dom } from './utils-2dzuv_bW.js';
+
+let playing = false;
+const canvas = dom("canvas");
+const gl = canvas.getContext("webgl", { antialias: false });
+if (!gl) {
+  throw new Error("WebGL not supported");
+}
+document.body.append(canvas);
+function spray() {
+  return Math.floor(Math.random() * 8) * (Math.random() < 0.5 ? 1 : -1);
+}
+canvas.addEventListener("mousedown", (event) => {
+  const rect = canvas.getBoundingClientRect();
+  const controller = new AbortController();
+  playing = false;
+  window.addEventListener(
+    "mousemove",
+    (event2) => {
+      const x = Math.floor((event2.clientX - rect.left - spray()) * (canvas.width / rect.width));
+      const y = Math.floor((rect.bottom - event2.clientY - spray()) * (canvas.height / rect.height));
+      const dimensions = [2, 2];
+      const data = new Uint8Array(
+        function* () {
+          for (let i = 0; i < dimensions[0] * dimensions[1]; i++) {
+            yield 255;
+            yield 0;
+            yield 0;
+            yield 255;
+          }
+        }()
+      );
+      gl.bindTexture(gl.TEXTURE_2D, read.texture);
+      gl.texSubImage2D(
+        gl.TEXTURE_2D,
+        0,
+        x,
+        y,
+        dimensions[0],
+        dimensions[1],
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        data
+      );
+      gl.bindTexture(gl.TEXTURE_2D, write.texture);
+      gl.texSubImage2D(
+        gl.TEXTURE_2D,
+        0,
+        x,
+        y,
+        dimensions[0],
+        dimensions[1],
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        data
+      );
+      render();
+    },
+    controller
+  );
+  window.addEventListener(
+    "mouseup",
+    () => {
+      controller.abort();
+      playing = true;
+      animate();
+    },
+    controller
+  );
+});
+canvas.width = 256 * 2;
+canvas.height = 256 * 2;
+const WIDTH = canvas.width;
+const HEIGHT = canvas.height;
+const stepFragment = glsl`
+  precision mediump float;
+  varying vec2 v_uv;
+  ${uniform.sampler2D("u_texture")}
+  ${uniform.vec2("u_texelSize")}
+
+  int getCell(vec2 uv) {
+    // Wrap around (toroidal)
+    uv = mod(uv, 1.0);
+    float val = texture2D(u_texture, uv).r;
+    return int(step(0.5, val));
+  }
+
+  void main() {
+    vec2 uv  = v_uv * 0.5 + 0.5;
+
+    int sum = 0;
+    // Iterate neighbors -1,0,1
+    for (int y = -1; y <= 1; y++) {
+      for (int x = -1; x <= 1; x++) {
+        if (x == 0 && y == 0) continue;
+        sum += getCell(uv + vec2(float(x), float(y)) * u_texelSize);
+      }
+    }
+    int current = getCell(uv);
+
+    int nextState = 0;
+    if (current == 1) {
+      if (sum == 2 || sum == 3) nextState = 1;
+      else nextState = 0;
+    } else {
+      if (sum == 3) nextState = 1;
+      else nextState = 0;
+    }
+
+    gl_FragColor = vec4(float(nextState), 0.0, 0.0, 1.0);
+  }`;
+const renderFragment = glsl`
+  precision mediump float;
+  varying vec2 v_uv;
+  ${uniform.sampler2D("u_texture")}
+  
+  void main() {
+    vec2 uv  = v_uv * 0.5 + 0.5;
+    float cell = texture2D(u_texture, uv).r;
+    gl_FragColor = vec4(vec3(cell), 1.0);
+  }`;
+const { program: stepProgram, view: stepView } = compile.toQuad(gl, stepFragment);
+const { program: renderProgram, view: renderView } = compile.toQuad(gl, renderFragment);
+const framebufferOptions = {
+  attachment: "color",
+  width: WIDTH,
+  height: HEIGHT,
+  type: "UNSIGNED_BYTE",
+  magFilter: "NEAREST",
+  minFilter: "NEAREST"
+};
+let read = createFramebuffer(gl, framebufferOptions);
+let write = createFramebuffer(gl, framebufferOptions);
+gl.bindTexture(gl.TEXTURE_2D, read.texture);
+gl.texSubImage2D(
+  gl.TEXTURE_2D,
+  0,
+  0,
+  0,
+  WIDTH,
+  HEIGHT,
+  gl.RGBA,
+  gl.UNSIGNED_BYTE,
+  new Uint8Array(
+    function* () {
+      for (let i = 0; i < WIDTH * HEIGHT; i++) {
+        yield 0;
+        yield 0;
+        yield 0;
+        yield 255;
+      }
+    }()
+  )
+);
+function step() {
+  gl.bindFramebuffer(gl.FRAMEBUFFER, write.framebuffer);
+  gl.viewport(0, 0, WIDTH, HEIGHT);
+  gl.useProgram(stepProgram);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, read.texture);
+  stepView.uniforms.u_texture.set(0);
+  stepView.uniforms.u_texelSize.set(1 / WIDTH, 1 / HEIGHT);
+  stepView.attributes.a_quad.bind();
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function render() {
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.useProgram(renderProgram);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, write.texture);
+  renderView.uniforms.u_texture.set(0);
+  renderView.attributes.a_quad.bind();
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function animate() {
+  if (playing) {
+    step();
+    render();
+    [read, write] = [write, read];
+    requestAnimationFrame(animate);
+  }
+}
+playing = true;
+animate();