@bigmistqke/view.gl 0.1.13 → 0.1.15

package/src/gl.ts

@@ -0,0 +1,128 @@
+import { RemoveSuffix } from './type-utils'
+import type { GL } from './types'
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                 Create Shader                                  */
+/*                                                                                */
+/**********************************************************************************/
+
+export function createShader(gl: GL, type: number, source: string): WebGLShader {
+  const shader = gl.createShader(type)
+  if (!shader) throw new Error('Failed to create shader')
+
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(shader)
+    gl.deleteShader(shader)
+    throw new Error(
+      `Failed to compile ${type === gl.VERTEX_SHADER ? 'vertex' : 'fragment'} shader: ${info}`,
+    )
+  }
+
+  return shader
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                Create Program                                  */
+/*                                                                                */
+/**********************************************************************************/
+
+export function createProgram(gl: GL, vertexSource: string, fragmentSource: string): WebGLProgram {
+  const program = gl.createProgram()
+  if (!program) throw new Error('Failed to create WebGL program')
+
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource)
+  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource)
+
+  gl.attachShader(program, vertexShader)
+  gl.attachShader(program, fragmentShader)
+  gl.linkProgram(program)
+
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const info = gl.getProgramInfoLog(program)
+    gl.deleteProgram(program)
+    gl.deleteShader(vertexShader)
+    gl.deleteShader(fragmentShader)
+    throw new Error(`Failed to link program: ${info}`)
+  }
+
+  // Clean up shaders after linking
+  gl.deleteShader(vertexShader)
+  gl.deleteShader(fragmentShader)
+
+  return program
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                              Get Instanced Arrays                              */
+/*                                                                                */
+/**********************************************************************************/
+
+const INSTANCED_ARRAYS_WRAPPER_MAP = new WeakMap<
+  GL,
+  RemoveSuffix<
+    Pick<
+      ANGLE_instanced_arrays,
+      'drawArraysInstancedANGLE' | 'drawElementsInstancedANGLE' | 'vertexAttribDivisorANGLE'
+    >,
+    'ANGLE'
+  > | null
+>()
+export function getInstancedArrays(gl: GL) {
+  if (gl instanceof WebGL2RenderingContext) return gl
+
+  const cached = INSTANCED_ARRAYS_WRAPPER_MAP.get(gl)
+  if (cached) return cached
+
+  const ext = gl.getExtension('ANGLE_instanced_arrays')
+  if (!ext) return undefined
+
+  const wrapper = {
+    drawArraysInstanced: ext.drawArraysInstancedANGLE.bind(ext),
+    drawElementsInstanced: ext.drawElementsInstancedANGLE.bind(ext),
+    vertexAttribDivisor: ext.vertexAttribDivisorANGLE.bind(ext),
+  }
+  INSTANCED_ARRAYS_WRAPPER_MAP.set(gl, wrapper)
+
+  return wrapper
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                             Get Vertex Array Object                            */
+/*                                                                                */
+/**********************************************************************************/
+
+const VERTEX_ARRAY_OBJECT_WRAPPER_MAP = new WeakMap<
+  GL,
+  RemoveSuffix<
+    Pick<
+      OES_vertex_array_object,
+      'bindVertexArrayOES' | 'createVertexArrayOES' | 'deleteVertexArrayOES'
+    >,
+    'OES'
+  > | null
+>()
+export function getVertexArrayObject(gl: GL) {
+  if (gl instanceof WebGL2RenderingContext) return gl
+
+  const cached = VERTEX_ARRAY_OBJECT_WRAPPER_MAP.get(gl)
+  if (cached) return cached
+
+  const ext = gl.getExtension('OES_vertex_array_object')
+  if (!ext) return null
+
+  const wrapper = {
+    bindVertexArray: ext.bindVertexArrayOES.bind(ext),
+    createVertexArray: ext.createVertexArrayOES.bind(ext),
+    deleteVertexArray: ext.deleteVertexArrayOES.bind(ext),
+  }
+  VERTEX_ARRAY_OBJECT_WRAPPER_MAP.set(gl, wrapper)
+
+  return wrapper
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-import { getInstancedArrays, getVertexArrayObject } from './features'
+import { getInstancedArrays, getVertexArrayObject } from './gl'
 import type {
   AttributeMethods,
   AttributeSchema,
@@ -15,15 +15,8 @@ import type {
   ViewOptions,
   ViewSchema,
 } from './types'
-import {
-  assertedNotNullish,
-  createUpsertMap,
-  isMatKind,
-  isSamplerKind,
-  kindToSize,
-  kindToUniformFnName,
-  ObjectUtils,
-} from './utils'
+import { isSamplerKind, kindToUniformFnName, isMatKind, assertedNotNullish, kindToSize, forEachObject } from './utils'
+import { createUpsertMap, mapObject } from './utils'
 export * from './types'
 
 /**********************************************************************************/
@@ -94,7 +87,7 @@ export function uniformView<T extends UniformSchema>(
   schema: T,
 ): InferUniformView<T> {
   // @ts-expect-error - conditional return type based on size is hard to infer
-  return ObjectUtils.map(schema, ({ kind, size }, key) => {
+  return mapObject(schema, ({ kind, size }, key) => {
     const name = toID(key)
 
     if (isSamplerKind(kind)) {
@@ -191,7 +184,7 @@ export function attributeView<T extends AttributeSchema>(
   schema: T,
   { signal }: ViewOptions = {},
 ): AttributeView<T> {
-  const attributes = ObjectUtils.map(
+  const attributes = mapObject(
     schema,
     (
       { kind, instanced, buffer = assertedNotNullish(gl.createBuffer()) },
@@ -226,7 +219,7 @@ export function attributeView<T extends AttributeSchema>(
   )
 
   signal?.addEventListener('abort', function dispose() {
-    ObjectUtils.forEach(attributes, value => value.dispose())
+    forEachObject(attributes, value => value.dispose())
   })
 
   return attributes
@@ -245,7 +238,7 @@ export function interleavedAttributeView<T extends InterleavedAttributeSchema>(
   { signal }: ViewOptions = {},
 ): InterleavedAttributeView<T> {
   // Initialize interleaved attributes
-  const interleavedAttributes = ObjectUtils.map(schema, ({ layout, instanced }) => {
+  const interleavedAttributes = mapObject(schema, ({ layout, instanced }) => {
     // Increment number to keep track of offset
     let index = 0
 
@@ -325,9 +318,8 @@ export function interleavedAttributeView<T extends InterleavedAttributeSchema>(
       set(value, usage = 'STATIC_DRAW') {
         if (vao) {
           vao.bind()
-        } else {
-          gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
         }
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
         gl.bufferData(gl.ARRAY_BUFFER, value, gl[usage])
         if (vao) {
           vao.unbind()
@@ -337,7 +329,7 @@ export function interleavedAttributeView<T extends InterleavedAttributeSchema>(
   })
 
   signal?.addEventListener('abort', function dispose() {
-    ObjectUtils.forEach(interleavedAttributes, value => value.dispose())
+    forEachObject(interleavedAttributes, value => value.dispose())
   })
 
   return interleavedAttributes
@@ -355,7 +347,7 @@ export function bufferView<T extends BufferSchema>(
   { signal }: ViewOptions = {},
 ): BufferView<T> {
   // Initialize buffers
-  const buffers = ObjectUtils.map(schema, ({ target = 'ARRAY_BUFFER', usage = 'STATIC_DRAW' }) => {
+  const buffers = mapObject(schema, ({ target = 'ARRAY_BUFFER', usage = 'STATIC_DRAW' }) => {
     const buffer = assertedNotNullish(gl.createBuffer())
     return {
       bind() {
@@ -372,7 +364,7 @@ export function bufferView<T extends BufferSchema>(
   })
 
   signal?.addEventListener('abort', function dispose() {
-    ObjectUtils.forEach(buffers, value => value.dispose())
+    forEachObject(buffers, value => value.dispose())
   })
 
   return buffers

package/src/tag.ts

@@ -1,4 +1,5 @@
 import { toID, view } from '.'
+import { createProgram } from './gl'
 import type { Prettify } from './type-utils'
 import type {
   AttributeDefinition,
@@ -17,7 +18,7 @@ import type {
   ViewSchema,
   ViewSchemaPartial,
 } from './types'
-import { createProgram, createUpsertMap } from './utils'
+import { createUpsertMap } from './utils'
 
 export function glsl<TSlot extends GLSLSlot, const TSlots extends TSlot[]>(
   template: TemplateStringsArray,

package/src/{utils/index.ts → utils.ts}

@@ -6,59 +6,13 @@ import type {
   KIND_TO_UNIFORM_FN_NAME_MAP,
   TextureDefinition,
   UniformKind,
-} from '../types'
-
-export * as ObjectUtils from './object'
+} from './types'
 
 export function assertedNotNullish<T>(value: T, message?: string): NonNullable<T> {
   if (value === undefined || value === null) throw new Error(message)
   return value
 }
 
-function createGLShader(gl: GL, type: number, source: string): WebGLShader {
-  const shader = gl.createShader(type)
-  if (!shader) throw new Error('Failed to create shader')
-
-  gl.shaderSource(shader, source)
-  gl.compileShader(shader)
-
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(shader)
-    gl.deleteShader(shader)
-    throw new Error(
-      `Failed to compile ${type === gl.VERTEX_SHADER ? 'vertex' : 'fragment'} shader: ${info}`,
-    )
-  }
-
-  return shader
-}
-
-export function createProgram(gl: GL, vertexSource: string, fragmentSource: string): WebGLProgram {
-  const program = gl.createProgram()
-  if (!program) throw new Error('Failed to create WebGL program')
-
-  const vertexShader = createGLShader(gl, gl.VERTEX_SHADER, vertexSource)
-  const fragmentShader = createGLShader(gl, gl.FRAGMENT_SHADER, fragmentSource)
-
-  gl.attachShader(program, vertexShader)
-  gl.attachShader(program, fragmentShader)
-  gl.linkProgram(program)
-
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const info = gl.getProgramInfoLog(program)
-    gl.deleteProgram(program)
-    gl.deleteShader(vertexShader)
-    gl.deleteShader(fragmentShader)
-    throw new Error(`Failed to link program: ${info}`)
-  }
-
-  // Clean up shaders after linking
-  gl.deleteShader(vertexShader)
-  gl.deleteShader(fragmentShader)
-
-  return program
-}
-
 /**********************************************************************************/
 /*                                                                                */
 /*                              Kind To Uniform Name                              */
@@ -292,3 +246,31 @@ export function createUpsertMap<T extends UpsertMapKind<any, any> = Map<any, any
     },
   })
 }
+
+export function forEachObject<T extends Record<string, any>>(
+  value: T,
+  callback: (value: T[keyof T], key: keyof T, index: number) => void,
+) {
+  let index = 0
+  for (const key in value) {
+    callback(value[key], key, index)
+    index++
+  }
+  for (const key of Object.getOwnPropertySymbols(value)) {
+    callback(value[key as keyof T], key as keyof T, index)
+    index++
+  }
+}
+
+export function mapObject<T extends Record<string, any>, TReturn>(
+  value: T,
+  callback: (value: T[keyof T], key: keyof T, index: number) => TReturn,
+): { [TKey in keyof T]: TReturn } {
+  const result = {} as { [TKey in keyof T]: TReturn }
+
+  forEachObject(value, (value, key, index) => {
+    result[key] = callback(value, key, index)
+  })
+
+  return result
+}

package/tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: ['src/index.ts', 'src/tag.ts'],
+  entry: ['src/index.ts', 'src/tag.ts', 'src/gl.ts'],
   format: ['esm'],
   splitting: true,
   sourcemap: true,

package/dev/dist/404.html

@@ -1,19 +0,0 @@
-<!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-DuLTb2d1.js

@@ -1,294 +0,0 @@
-import { i as interleave, u as uniform, a as attribute, g as glsl, c as compile, v as view } from './tag-C_bg62fD.js';
-import { c as createElement, a as cursor } from './utils-CvCgsM08.js';
-
-const canvas = createElement("canvas");
-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, schema: curveSchema } = compile(gl, curveVertex, curveFragment);
-const curveView = view(gl, curveProgram, curveSchema);
-const { program: pointProgram, schema: pointSchema } = compile(gl, pointVertex, pointFragment);
-const pointView = view(gl, pointProgram, pointSchema);
-const { program: lineProgram, schema: lineSchema } = compile(gl, lineVertex, lineFragment);
-const lineView = view(gl, lineProgram, lineSchema);
-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() {
-  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();