@bigmistqke/view.gl 0.1.8 → 0.1.10

package/dev/src/examples/ray-casting.ts

@@ -0,0 +1,455 @@
+import { compile, glsl, uniform } from '../../../src/tag.ts'
+import { dom } from '../utils.ts'
+
+// Sphere data: [x, y, z, radius]
+const sphereData = [
+  [0, 0, 0, 1.0], // Center sphere
+  [3, 1, -2, 0.8], // Right sphere
+  [-3, -1, 1, 0.9], // Left sphere
+  [1, 3, -1, 0.7], // Top sphere
+  [-2, -3, 2, 0.6], // Bottom sphere
+  [4, -2, -3, 0.5], // Far right sphere
+  [-4, 2, 3, 0.8], // Far left sphere
+  [0, -1, -4, 1.2], // Back sphere
+] as const
+
+// Sphere colors (RGB)
+const sphereColors = [
+  [1.0, 0.3, 0.3], // Red
+  [0.3, 1.0, 0.3], // Green
+  [0.3, 0.3, 1.0], // Blue
+  [1.0, 1.0, 0.3], // Yellow
+  [1.0, 0.3, 1.0], // Magenta
+  [0.3, 1.0, 1.0], // Cyan
+  [1.0, 0.7, 0.3], // Orange
+  [0.7, 0.3, 1.0], // Purple
+] as const
+
+// Box data: [x, y, z, size] (size is half-extents for all dimensions)
+const boxData = [
+  [2, 0, -1, 0.8], // Right box
+  [-2, 0, 1, 0.6], // Left box
+  [0, -2, -2, 0.7], // Bottom box
+] as const
+
+// Box colors (RGB)
+const boxColors = [
+  [0.8, 0.8, 0.2], // Yellow-green
+  [0.2, 0.8, 0.8], // Cyan
+  [0.8, 0.2, 0.8], // Magenta
+] as const
+
+let SHAPE_COUNTER = 0
+
+const controller = new AbortController()
+const canvas = dom('canvas', { parentElement: document.body })
+
+const gl = canvas.getContext('webgl2')!
+
+const NUM_SPHERES = 8
+const NUM_BOXES = 3
+
+const SHAPE_SPHERE = Symbol('SHAPE_SPHERE')
+
+const sphereModule = glsl`
+#define NUM_SPHERES ${NUM_SPHERES}
+#define ${SHAPE_SPHERE} ${SHAPE_COUNTER++}
+
+struct Sphere {
+	vec3 position;
+	float radius;
+	vec3 color;
+};
+
+${uniform.vec4('sphereData', { size: NUM_SPHERES })}
+${uniform.vec3('sphereColors', { size: NUM_SPHERES })}
+
+float sphereIntersection(in vec3 rayOrigin, in vec3 rayDirection, in Sphere sphere)
+{
+	// We're shooting a ray from the camera and checking if it hits a sphere
+	// Think of it like shining a laser pointer at a ball
+	
+	vec3 rayToSphere = rayOrigin - sphere.position;
+	
+	// Step 1: Find the closest point on the ray to the sphere's position
+	// This is like finding where the laser beam passes nearest to the ball's position
+	float closestApproach = dot(rayToSphere, rayDirection);
+	
+	// Step 2: Check if we're already inside the sphere
+	// If negative, we're outside and pointing away from sphere position
+	float rayStartDistanceSquared = dot(rayToSphere, rayToSphere) - sphere.radius * sphere.radius;
+	
+	// Step 3: Use geometry to check if the ray can reach the sphere
+	// If this value is negative, the ray misses the sphere entirely
+	float canReachSphere = closestApproach * closestApproach - rayStartDistanceSquared;
+	
+	if(canReachSphere < 0.0) {
+		return -1.0; // Ray misses the sphere
+	}
+	
+	// Step 4: Calculate how far along the ray we hit the sphere
+	// We want the nearest intersection point (there can be two when ray goes through)
+	float hitDistance = -closestApproach - sqrt(canReachSphere);
+	
+	return hitDistance;
+}
+
+// Calculate normal vector at hit point on sphere surface
+vec3 sphereNormal(in vec3 hitPosition, in Sphere sphere)
+{
+	return (hitPosition - sphere.position) / sphere.radius;
+}
+
+// Find closest sphere intersection, returns distance and sets hitIndex and hitType
+float findClosestSphere(in vec3 rayOrigin, in vec3 rayDirection, in float maxDistance, out int hitIndex, out int hitType)
+{
+	float closestDistance = maxDistance;
+	hitIndex = -1;
+	hitType = -1;
+	
+	for(int i = 0; i < NUM_SPHERES; i++) {
+		Sphere sphere = Sphere(sphereData[i].xyz, sphereData[i].w, sphereColors[i]);
+		float distance = sphereIntersection(rayOrigin, rayDirection, sphere);
+		
+		if(distance > 0.0 && distance < closestDistance) {
+			closestDistance = distance;
+			hitIndex = i;
+			hitType = ${SHAPE_SPHERE};
+		}
+	}
+	
+	return hitIndex >= 0 ? closestDistance : -1.0;
+}
+
+// Calculate sphere normal and color at hit point
+void calculateSphereHit(in vec3 hitPosition, in int hitIndex, out vec3 normal, out vec3 color)
+{
+	Sphere hitSphere = Sphere(sphereData[hitIndex].xyz, sphereData[hitIndex].w, sphereColors[hitIndex]);
+	normal = sphereNormal(hitPosition, hitSphere);
+	color = sphereColors[hitIndex];
+}`
+
+const SHAPE_BOX = Symbol('SHAPE_BOX')
+
+const boxModule = glsl`
+#define ${SHAPE_BOX} ${SHAPE_COUNTER++}
+#define NUM_BOXES ${NUM_BOXES}
+
+struct Box {
+	vec3 position;
+	float size;
+	vec3 color;
+};
+
+${uniform.vec4('boxData', { size: NUM_BOXES })}
+${uniform.vec3('boxColors', { size: NUM_BOXES })}
+
+float boxIntersection(in vec3 rayOrigin, in vec3 rayDirection, in Box box)
+{
+	// Ray-box intersection using slab method
+	// A box is defined by 6 planes, we find where the ray enters and exits each pair of parallel planes
+	
+	vec3 boxMin = box.position - vec3(box.size);
+	vec3 boxMax = box.position + vec3(box.size);
+	
+	// Calculate intersection distances for each axis
+	vec3 invDir = 1.0 / rayDirection;
+	vec3 t1 = (boxMin - rayOrigin) * invDir;
+	vec3 t2 = (boxMax - rayOrigin) * invDir;
+	
+	// Find the min and max for each axis (handles negative direction)
+	vec3 tMin = min(t1, t2);
+	vec3 tMax = max(t1, t2);
+	
+	// The ray enters the box at the maximum of all tMin values
+	float tNear = max(max(tMin.x, tMin.y), tMin.z);
+	
+	// The ray exits the box at the minimum of all tMax values  
+	float tFar = min(min(tMax.x, tMax.y), tMax.z);
+	
+	// If tNear > tFar, ray misses the box
+	// If tFar < 0, box is behind the ray
+	if(tNear > tFar || tFar < 0.0) {
+		return -1.0;
+	}
+	
+	// Return the nearest intersection (tNear, unless we're inside the box)
+	return tNear > 0.0 ? tNear : tFar;
+}
+
+// Calculate normal vector at hit point on box surface
+vec3 boxNormal(in vec3 hitPosition, in Box box)
+{
+	// Find which face of the box we hit by checking which coordinate is closest to the box boundary
+	vec3 localPos = hitPosition - box.position;
+	vec3 absLocal = abs(localPos);
+	
+	// Return normal for the face that's closest to the box size
+	if(absLocal.x > absLocal.y && absLocal.x > absLocal.z) {
+		return vec3(sign(localPos.x), 0.0, 0.0);
+	} else if(absLocal.y > absLocal.z) {
+		return vec3(0.0, sign(localPos.y), 0.0);
+	} else {
+		return vec3(0.0, 0.0, sign(localPos.z));
+	}
+}
+
+// Find closest box intersection, returns distance and sets hitIndex and hitType
+float findClosestBox(in vec3 rayOrigin, in vec3 rayDirection, in float maxDistance, out int hitIndex, out int hitType)
+{
+	float closestDistance = maxDistance;
+	hitIndex = -1;
+	hitType = -1;
+	
+	for(int i = 0; i < NUM_BOXES; i++) {
+		Box box = Box(boxData[i].xyz, boxData[i].w, boxColors[i]);
+		float distance = boxIntersection(rayOrigin, rayDirection, box);
+		
+		if(distance > 0.0 && distance < closestDistance) {
+			closestDistance = distance;
+			hitIndex = i;
+			hitType = ${SHAPE_BOX};
+		}
+	}
+	
+	return hitIndex >= 0 ? closestDistance : -1.0;
+}
+
+// Calculate box normal and color at hit point
+void calculateBoxHit(in vec3 hitPosition, in int hitIndex, out vec3 normal, out vec3 color)
+{
+	Box hitBox = Box(boxData[hitIndex].xyz, boxData[hitIndex].w, boxColors[hitIndex]);
+	normal = boxNormal(hitPosition, hitBox);
+	color = boxColors[hitIndex];
+}
+
+`
+
+const fragment = glsl`#version 300 es
+precision mediump float;
+
+struct HitInfo {
+	bool hit;
+	float distance;
+	vec3 position;
+	vec3 normal;
+	vec3 color;
+};
+
+${sphereModule}
+${boxModule}
+
+${uniform.float('aspectRatio')}
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+vec3 lightPos = vec3(5.0, 5.0, 5.0);
+
+vec3 calculateLighting(in vec3 position, in vec3 normal, in vec3 color)
+{
+	vec3 lightDirection = normalize(lightPos - position);
+	float diffuse = max(0.0, dot(normal, lightDirection));
+	return color * (diffuse * 0.8 + 0.2); // 80% diffuse + 20% ambient
+}
+
+void main()
+{	
+	// Ray from camera through pixel
+	vec3 rayOrigin = vec3(0.0, 0.0, 4.0);
+	vec3 rayDirection = normalize(vec3(v_uv.x * aspectRatio, v_uv.y, -1.0));
+	
+// Find closest intersection across all shapes
+float closestDistance = 1000.0;
+int hitType = -1;
+int hitIndex = -1;
+
+// Check spheres
+int sphereIndex, sphereType;
+float sphereDistance = findClosestSphere(rayOrigin, rayDirection, closestDistance, sphereIndex, sphereType);
+if(sphereDistance > 0.0) {
+  closestDistance = sphereDistance;
+  hitType = sphereType;
+  hitIndex = sphereIndex;
+}
+
+// Check boxes
+int boxIndex, boxType;
+float boxDistance = findClosestBox(rayOrigin, rayDirection, closestDistance, boxIndex, boxType);
+if(boxDistance > 0.0) {
+  closestDistance = boxDistance;
+  hitType = boxType;
+  hitIndex = boxIndex;
+}
+
+vec3 color = vec3(0.1, 0.1, 0.2); // Background color
+
+// Calculate normal and lighting only for the closest hit
+if(hitType >= 0) {
+  vec3 hitPosition = rayOrigin + closestDistance * rayDirection;
+  vec3 normal;
+  vec3 hitColor;
+  
+  switch(hitType) {
+    case ${SHAPE_SPHERE}:
+      calculateSphereHit(hitPosition, hitIndex, normal, hitColor);
+      color = calculateLighting(hitPosition, normal, hitColor);
+      break;
+    case ${SHAPE_BOX}:
+      calculateBoxHit(hitPosition, hitIndex, normal, hitColor);
+      color = calculateLighting(hitPosition, normal, hitColor);
+      break;
+  }
+}
+	
+	// Gamma correction
+	color = pow(color, vec3(1.0 / 2.2));
+	
+	fragColor = vec4(color, 1.0);
+}`
+
+const { program, view } = compile.toQuad(gl, fragment)
+
+gl.useProgram(program)
+
+// Bind quad buffer
+view.attributes.a_quad.bind()
+
+// Create typed arrays for sphere data and colors
+const spheresArray = new Float32Array(
+  (function* () {
+    for (const sphere of sphereData) {
+      yield sphere[0]
+      yield sphere[1]
+      yield sphere[2]
+      yield sphere[3]
+    }
+  })(),
+)
+const sphereColorsArray = new Float32Array(
+  (function* () {
+    for (const color of sphereColors) {
+      yield color[0]
+      yield color[1]
+      yield color[2]
+    }
+  })(),
+)
+
+// Create typed arrays for box data and colors
+const boxesArray = new Float32Array(
+  (function* () {
+    for (const box of boxData) {
+      yield box[0]
+      yield box[1]
+      yield box[2]
+      yield box[3]
+    }
+  })(),
+)
+const boxColorsArray = new Float32Array(
+  (function* () {
+    for (const color of boxColors) {
+      yield color[0]
+      yield color[1]
+      yield color[2]
+    }
+  })(),
+)
+
+// Set the uniform arrays
+view.uniforms.sphereData.set(spheresArray)
+view.uniforms.sphereColors.set(sphereColorsArray)
+view.uniforms.boxData.set(boxesArray)
+view.uniforms.boxColors.set(boxColorsArray)
+
+// Set initial aspect ratio
+view.uniforms.aspectRatio.set(canvas.width / canvas.height)
+
+function animate(timestamp: number) {
+  const time = timestamp / 1000
+
+  // Make the center sphere pulse
+  const pulseFactor = 0.8 + 0.4 * Math.sin(time * 2)
+  spheresArray[3] = pulseFactor // Update radius of sphere 0
+
+  // Orbit some spheres
+  const orbitRadius = 2.5
+
+  // Update sphere 1
+  spheresArray[4] = Math.cos(time * 0.8) * orbitRadius
+  spheresArray[5] = Math.sin(time * 1.2) * 1.5
+  spheresArray[6] = Math.sin(time * 0.8) * orbitRadius
+
+  // Update sphere 2
+  spheresArray[8] = Math.cos(time * 0.6 + Math.PI) * orbitRadius
+  spheresArray[9] = Math.cos(time * 0.9) * 1.2
+  spheresArray[10] = Math.sin(time * 0.6 + Math.PI) * orbitRadius
+
+  // Sphere 3 - vertical bobbing
+  spheresArray[13] = 1 + Math.sin(time * 1.5) * 2 // y position
+
+  // Sphere 4 - figure-8 motion
+  spheresArray[16] = Math.sin(time * 0.7) * 2.5 // x
+  spheresArray[17] = Math.sin(time * 1.4) * 1.5 // y
+  spheresArray[18] = -2 + Math.cos(time * 0.7) // z
+
+  // Sphere 5 - circular motion + size change
+  spheresArray[20] = Math.cos(time) * 3.5 // x
+  spheresArray[22] = Math.sin(time) * 3.5 // z
+  spheresArray[23] = 0.4 + 0.2 * Math.sin(time * 3) // radius
+
+  // Sphere 6 - diagonal wave motion
+  spheresArray[24] = -4 + Math.sin(time * 0.8) * 1.5 // x
+  spheresArray[25] = 2 + Math.sin(time * 1.2) * 1 // y
+
+  // Sphere 7 - rotating in back
+  spheresArray[28] = Math.cos(time * 0.5) * 2 // x
+  spheresArray[29] = -1 + Math.sin(time * 0.5) * 0.5 // y
+
+  // Animate colors for more spheres
+  sphereColorsArray[0] = 0.5 + 0.5 * Math.sin(time * 3) // Red channel of sphere 0
+  sphereColorsArray[4] = 0.5 + 0.5 * Math.cos(time * 2) // Green channel of sphere 1
+  sphereColorsArray[9] = 0.5 + 0.5 * Math.sin(time * 2.5) // Blue channel of sphere 3
+  sphereColorsArray[15] = 0.3 + 0.7 * Math.abs(Math.sin(time * 1.8)) // All channels sphere 5 (pulsing cyan)
+  sphereColorsArray[16] = 0.3 + 0.7 * Math.abs(Math.sin(time * 1.8))
+  sphereColorsArray[17] = 0.3 + 0.7 * Math.abs(Math.sin(time * 1.8))
+
+  // Animate some boxes
+  // Box 0 - rotate around Y axis
+  boxesArray[0] = 2 + Math.cos(time * 0.7) * 0.5 // x
+  boxesArray[2] = -1 + Math.sin(time * 0.7) * 0.5 // z
+
+  // Box 1 - scale up and down
+  boxesArray[7] = 0.6 + 0.3 * Math.sin(time * 2) // size
+
+  // Update the uniform arrays with the animated data
+  view.uniforms.sphereData?.set(spheresArray)
+  view.uniforms.sphereColors?.set(sphereColorsArray)
+  view.uniforms.boxData?.set(boxesArray)
+  view.uniforms.boxColors?.set(boxColorsArray)
+}
+
+// Animation loop
+function draw(timestamp: number) {
+  if (controller.signal.aborted) return
+
+  animate(timestamp)
+
+  gl.drawArrays(gl.TRIANGLES, 0, 6)
+
+  requestAnimationFrame(draw)
+}
+
+requestAnimationFrame(draw)
+
+// Handle canvas resizing
+new ResizeObserver(() => {
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+  gl.viewport(0, 0, canvas.width, canvas.height)
+
+  // Update aspect ratio uniform
+  view.uniforms.aspectRatio.set(canvas.width / canvas.height)
+  draw(performance.now())
+}).observe(document.body)

package/dev/src/examples/sdf.ts

@@ -0,0 +1,98 @@
+import { attribute, compile, glsl, uniform } from 'view.gl/tag'
+import { GLSLToken, GLSLToView, View } from '../../../src'
+import { dom } from '../utils'
+
+function createModule<TTag>(callback: (symbol: symbol) => TTag) {
+  const symbol = Symbol()
+  return {
+    pointer: symbol,
+    module: callback(symbol),
+  }
+}
+const controller = new AbortController()
+const canvas = dom('canvas', { parentElement: document.body }) // (<canvas />) as HTMLCanvasElement;
+
+const gl = canvas.getContext('webgl2')!
+gl.viewport(0, 0, canvas.width, canvas.height)
+
+new ResizeObserver(() => {
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+  gl.viewport(0, 0, canvas.width, canvas.height)
+  draw(performance.now())
+}).observe(canvas)
+
+const circle = createModule(
+  symbol => glsl`
+${uniform.vec2('u_base')}
+
+bool ${symbol}(vec2 position){
+  return distance(position + u_base, vec2(0., 0.)) < 1.0;
+}`,
+)
+
+const vertex = glsl`
+precision mediump float;
+
+${attribute.vec2('a_vertex')}
+
+varying vec2 position;
+
+void main() {
+  position = a_vertex;
+  gl_Position = vec4(position, 0.0,  1.0);
+}`
+
+const fragment = glsl`
+precision mediump float;
+varying vec2 position;
+${uniform.vec3('u_color')}
+
+${circle.module}
+
+void main() {
+  if(${circle.pointer}(position) == false){
+    discard;
+  }
+  gl_FragColor = vec4(${'u_color'}, 1.0);
+}`
+
+const {
+  program,
+  view: { attributes, uniforms },
+} = compile(gl, vertex, fragment)
+
+gl.useProgram(program)
+
+uniforms.u_color.set(0, 255, 0)
+
+uniforms.u_base.set(1, 1)
+
+// Create triangle vertex buffer
+attributes.a_vertex.set(new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1])).bind()
+
+function draw(delta: number) {
+  if (controller.signal.aborted) return
+  requestAnimationFrame(draw)
+  gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, 100)
+}
+requestAnimationFrame(draw)
+
+abstract class Module {
+  symbol = Symbol()
+  abstract view?: View
+  abstract template: GLSLToken
+}
+
+class CircleModule extends Module {
+  view?: GLSLToView<typeof this.template>
+  base = Symbol()
+  template = glsl`
+${uniform.vec2(this.base)}    
+bool ${this.symbol}(vec2 position){
+  return distance(position + ${this.base}, vec2(0., 0.)) < 1.0;
+}`
+  setBase(x: number, y: number) {
+    this.view?.uniforms[this.base]?.set(x, y)
+  }
+}

package/dev/src/examples/symbol.ts

@@ -1,7 +1,7 @@
 import { attribute, compile, glsl, uniform } from 'view.gl/tag'
-import { createElement } from '../utils'
+import { dom } from '../utils'
 
-const canvas = createElement('canvas', {
+const canvas = dom('canvas', {
   width: window.innerWidth,
   height: window.innerHeight,
   parentElement: document.body,

package/dev/src/index.ts

@@ -1,10 +1,10 @@
 import css from './index.css?url'
-import { createElement } from './utils'
+import { dom } from './utils'
 
 const iframe = document.querySelector('iframe')!
 const nav = document.querySelector('nav')!
 
-createElement('h3', { innerText: 'Examples', parentElement: nav })
+nav.append(dom('h3', { innerText: 'Examples' }))
 
 const urls = Object.fromEntries(
   Object.entries(import.meta.glob('./examples/*.ts', { eager: false })).map(([key, entry]) => {
@@ -15,15 +15,16 @@ const urls = Object.fromEntries(
 )
 
 Object.entries(urls).forEach(([name, localUrl]) => {
-  createElement('button', {
-    onclick(event) {
-      event.preventDefault()
-      load(name, localUrl)
-    },
-    innerHTML: name.replaceAll('-', ' '),
-    parentElement: nav,
-    'data-route': name,
-  })
+  nav.append(
+    dom('button', {
+      onclick(event) {
+        event.preventDefault()
+        load(name, localUrl)
+      },
+      innerHTML: name.replaceAll('-', ' '),
+      'data-route': name,
+    }),
+  )
 })
 
 function load(name: string, url: string) {

package/dev/src/utils.ts

@@ -43,25 +43,39 @@ export function cursor(event: PointerEvent, callback: (event: CursorEvent) => vo
   return promise
 }
 
-export function createElement<T extends keyof HTMLElementTagNameMap>(
+export function dom<T extends keyof HTMLElementTagNameMap>(
   tag: T,
   {
     parentElement,
     ...options
-  }: Partial<Omit<HTMLElementTagNameMap[T], 'style'> & { style: string }> &
+  }: Partial<Omit<HTMLElementTagNameMap[T], 'style'> & { style: Partial<CSSStyleDeclaration> }> &
     Record<`data-${string}`, string> = {},
 ) {
   const element = document.createElement(tag)
 
   for (const key in options) {
     if (key.startsWith('data-')) {
-      element.setAttribute(key, options[key])
+      element.setAttribute(
+        key,
+        // @ts-expect-error
+        options[key],
+      )
+    } else if (key == 'style') {
+      if (typeof options.style === 'string') {
+        element.style = options.style
+      } else {
+        for (const prop in options.style!) {
+          // @ts-expect-error
+          element.style[prop] = options.style![prop as any]
+        }
+      }
     } else {
+      // @ts-expect-error
       element[key] = options[key]
     }
   }
 
-  ;(parentElement ?? document.body).appendChild(element)
+  parentElement?.appendChild(element)
 
   return element
 }

package/dist/gl.d.mts

@@ -0,0 +1,6 @@
+import { G as GL } from './types-DaV9McmR.mjs';
+
+declare function createShader(gl: GL, type: number, source: string): WebGLShader;
+declare function createProgram(gl: GL, vertexSource: string, fragmentSource: string): WebGLProgram;
+
+export { createProgram, createShader };

package/dist/gl.mjs

@@ -0,0 +1,39 @@
+// src/gl.ts
+function createShader(gl, type, source) {
+  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;
+}
+function createProgram(gl, vertexSource, fragmentSource) {
+  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}`);
+  }
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  return program;
+}
+export {
+  createProgram,
+  createShader
+};
+//# sourceMappingURL=gl.mjs.map

package/dist/gl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/gl.ts"],"sourcesContent":["import { GL } from \"./types\"\n\nexport function createShader(gl: GL, type: number, source: string): WebGLShader {\n  const shader = gl.createShader(type)\n  if (!shader) throw new Error('Failed to create shader')\n\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    const info = gl.getShaderInfoLog(shader)\n    gl.deleteShader(shader)\n    throw new Error(\n      `Failed to compile ${type === gl.VERTEX_SHADER ? 'vertex' : 'fragment'} shader: ${info}`,\n    )\n  }\n\n  return shader\n}\n\nexport function createProgram(gl: GL, vertexSource: string, fragmentSource: string): WebGLProgram {\n  const program = gl.createProgram()\n  if (!program) throw new Error('Failed to create WebGL program')\n\n  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource)\n  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource)\n\n  gl.attachShader(program, vertexShader)\n  gl.attachShader(program, fragmentShader)\n  gl.linkProgram(program)\n\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    const info = gl.getProgramInfoLog(program)\n    gl.deleteProgram(program)\n    gl.deleteShader(vertexShader)\n    gl.deleteShader(fragmentShader)\n    throw new Error(`Failed to link program: ${info}`)\n  }\n\n  // Clean up shaders after linking\n  gl.deleteShader(vertexShader)\n  gl.deleteShader(fragmentShader)\n\n  return program\n}"],"mappings":";AAEO,SAAS,aAAa,IAAQ,MAAc,QAA6B;AAC9E,QAAM,SAAS,GAAG,aAAa,IAAI;AACnC,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,yBAAyB;AAEtD,KAAG,aAAa,QAAQ,MAAM;AAC9B,KAAG,cAAc,MAAM;AAEvB,MAAI,CAAC,GAAG,mBAAmB,QAAQ,GAAG,cAAc,GAAG;AACrD,UAAM,OAAO,GAAG,iBAAiB,MAAM;AACvC,OAAG,aAAa,MAAM;AACtB,UAAM,IAAI;AAAA,MACR,qBAAqB,SAAS,GAAG,gBAAgB,WAAW,UAAU,YAAY,IAAI;AAAA,IACxF;AAAA,EACF;AAEA,SAAO;AACT;AAEO,SAAS,cAAc,IAAQ,cAAsB,gBAAsC;AAChG,QAAM,UAAU,GAAG,cAAc;AACjC,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,gCAAgC;AAE9D,QAAM,eAAe,aAAa,IAAI,GAAG,eAAe,YAAY;AACpE,QAAM,iBAAiB,aAAa,IAAI,GAAG,iBAAiB,cAAc;AAE1E,KAAG,aAAa,SAAS,YAAY;AACrC,KAAG,aAAa,SAAS,cAAc;AACvC,KAAG,YAAY,OAAO;AAEtB,MAAI,CAAC,GAAG,oBAAoB,SAAS,GAAG,WAAW,GAAG;AACpD,UAAM,OAAO,GAAG,kBAAkB,OAAO;AACzC,OAAG,cAAc,OAAO;AACxB,OAAG,aAAa,YAAY;AAC5B,OAAG,aAAa,cAAc;AAC9B,UAAM,IAAI,MAAM,2BAA2B,IAAI,EAAE;AAAA,EACnD;AAGA,KAAG,aAAa,YAAY;AAC5B,KAAG,aAAa,cAAc;AAE9B,SAAO;AACT;","names":[]}