@bigmistqke/view.gl 0.1.1 → 0.1.2

package/dev/{pix_sim.ts → src/examples/pix_sim.ts}

@@ -2,6 +2,7 @@ import { FramebufferOptions } from 'src/types'
 import { createFramebuffer } from 'src/utils'
 import { view } from 'view.gl'
 import { attribute, compile, glsl, uniform } from 'view.gl/tag'
+import { createElement } from '../utils'
 
 export const MATERIALS = {
   SAND: {
@@ -21,126 +22,140 @@ export const MATERIALS = {
 const MATERIAL_SIZE = Object.keys(MATERIALS).length
 
 let playing = false
-let currentMaterial = MATERIALS.SAND.id
-
-const canvas = document.createElement('canvas')
-const gl = canvas.getContext('webgl2', { antialias: false })!
-if (!gl) {
-  throw new Error('WebGL not supported')
-}
+let currentMaterial: (typeof MATERIALS)[keyof typeof MATERIALS]['id'] = MATERIALS.SAND.id
 
 // Create UI container
-const container = document.createElement('div')
-container.style.cssText = 'display: flex; flex-direction: column; align-items: center; gap: 10px;'
+const container = createElement('div', {
+  style: 'display: flex; flex-direction: column; align-items: center; gap: 10px;',
+  parentElement: document.body,
+})
 
 // Create material buttons
-const buttonContainer = document.createElement('div')
-buttonContainer.style.cssText = 'display: flex; gap: 10px; margin-bottom: 10px;'
+const buttonContainer = createElement('div', {
+  style: 'display: flex; gap: 10px; margin-bottom: 10px;',
+  parentElement: container,
+})
 
 Object.entries(MATERIALS).forEach(([name, material]) => {
-  const button = document.createElement('button')
-  button.textContent = name.toLowerCase()
-  button.style.cssText = `
-    padding: 5px 10px;
+  createElement('button', {
+    textContent: name.toLowerCase(),
+    'data-name': name,
+    'data-id': material.id.toString(),
+    style: `padding: 5px 10px;
     font-size: 14px;
-    font-family: times new roman;
+    font-family: arial;
     cursor: pointer;
+    color: black;
     background: ${
       currentMaterial === material.id
         ? `rgb(${material.color.map(c => Math.floor(c * 255)).join(',')})`
-        : 'transparent'
+        : `rgba(${material.color.map(c => Math.floor(c * 255)).join(',')}, 0.75)`
     };
     border-color: ${name === 'SAND' ? 'black' : 'white'};
     border: 2px solid rgb(${material.color.map(c => Math.floor(c * 255)).join(',')});
     border-radius: 2px;
-  `
-  button.onclick = () => {
-    currentMaterial = material.id
-    // Update all button borders
-    buttonContainer.querySelectorAll('button').forEach((btn, idx) => {
-      btn.style.background =
-        idx === material.id - 1
-          ? `rgb(${material.color.map(c => Math.floor(c * 255)).join(',')})`
-          : 'transparent'
-    })
-  }
-  buttonContainer.appendChild(button)
+  `,
+    onclick() {
+      currentMaterial = material.id
+      // Update all button borders
+      buttonContainer.querySelectorAll('button').forEach(btn => {
+        const name = btn.getAttribute('data-name') as keyof typeof MATERIALS
+        const id = btn.getAttribute('data-id')
+        if (id === currentMaterial.toString()) {
+          btn.style.background = `rgb(${MATERIALS[name].color
+            .map(c => Math.floor(c * 255))
+            .join(',')})`
+        } else {
+          btn.style.background = `rgba(${MATERIALS[name].color
+            .map(c => Math.floor(c * 255))
+            .join(',')}, 0.75)`
+        }
+      })
+    },
+    parentElement: buttonContainer,
+  })
 })
 
-container.appendChild(canvas)
-container.appendChild(buttonContainer)
-document.body.append(container)
-
 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',
-    event => {
-      const x = Math.floor((event.clientX - rect.left + spray()) * (canvas.width / rect.width))
-      const y = Math.floor((rect.bottom - event.clientY + spray()) * (canvas.height / rect.height))
-
-      const dimensions = [8, 8] as const
-
-      // Encode selected material using bit encoding
-      const data = new Uint8Array(
-        (function* () {
-          for (let i = 0; i < dimensions[0] * dimensions[1]; i++) {
-            yield (currentMaterial & 1) * 255 // Red channel (bit 0)
-            yield ((currentMaterial >> 1) & 1) * 255 // Green channel (bit 1)
-            yield ((currentMaterial >> 2) & 1) * 255 // Blue channel (bit 2)
-            yield 255 // Alpha channel
-          }
-        })(),
-      )
-
-      // Update both read and write textures
-      gl.bindTexture(gl.TEXTURE_2D, read.texture)
-      gl.texSubImage2D(
-        gl.TEXTURE_2D,
-        0,
-        Math.max(0, Math.min(WIDTH - dimensions[0], x)),
-        Math.max(0, Math.min(HEIGHT - dimensions[1], y)),
-        dimensions[0],
-        dimensions[1],
-        gl.RGBA,
-        gl.UNSIGNED_BYTE,
-        data,
-      )
-
-      gl.bindTexture(gl.TEXTURE_2D, write.texture)
-      gl.texSubImage2D(
-        gl.TEXTURE_2D,
-        0,
-        Math.max(0, Math.min(WIDTH - dimensions[0], x)),
-        Math.max(0, Math.min(HEIGHT - dimensions[1], y)),
-        dimensions[0],
-        dimensions[1],
-        gl.RGBA,
-        gl.UNSIGNED_BYTE,
-        data,
-      )
-
-      render()
-    },
-    controller,
-  )
-  window.addEventListener(
-    'mouseup',
-    () => {
-      controller.abort()
-      // playing = true
-      // animate()
-    },
-    controller,
-  )
+const canvas = createElement('canvas', {
+  parentElement: container,
+  onmousedown() {
+    const rect = canvas.getBoundingClientRect()
+    const controller = new AbortController()
+    // playing = false
+    window.addEventListener(
+      'mousemove',
+      event => {
+        const x = Math.floor((event.clientX - rect.left + spray()) * (canvas.width / rect.width))
+        const y = Math.floor(
+          (rect.bottom - event.clientY + spray()) * (canvas.height / rect.height),
+        )
+
+        const dimensions = [8, 8] as const
+
+        // Encode selected material using bit encoding
+        const data = new Uint8Array(
+          (function* () {
+            for (let i = 0; i < dimensions[0] * dimensions[1]; i++) {
+              yield (currentMaterial & 1) * 255 // Red channel (bit 0)
+              yield ((currentMaterial >> 1) & 1) * 255 // Green channel (bit 1)
+              yield ((currentMaterial >> 2) & 1) * 255 // Blue channel (bit 2)
+              yield 255 // Alpha channel
+            }
+          })(),
+        )
+
+        // Update both read and write textures
+        gl.bindTexture(gl.TEXTURE_2D, read.texture)
+        gl.texSubImage2D(
+          gl.TEXTURE_2D,
+          0,
+          Math.max(0, Math.min(WIDTH - dimensions[0], x)),
+          Math.max(0, Math.min(HEIGHT - dimensions[1], y)),
+          dimensions[0],
+          dimensions[1],
+          gl.RGBA,
+          gl.UNSIGNED_BYTE,
+          data,
+        )
+
+        gl.bindTexture(gl.TEXTURE_2D, write.texture)
+        gl.texSubImage2D(
+          gl.TEXTURE_2D,
+          0,
+          Math.max(0, Math.min(WIDTH - dimensions[0], x)),
+          Math.max(0, Math.min(HEIGHT - dimensions[1], y)),
+          dimensions[0],
+          dimensions[1],
+          gl.RGBA,
+          gl.UNSIGNED_BYTE,
+          data,
+        )
+
+        render()
+      },
+      controller,
+    )
+    window.addEventListener(
+      'mouseup',
+      () => {
+        controller.abort()
+        // playing = true
+        // animate()
+      },
+      controller,
+    )
+  },
 })
 
+const gl = canvas.getContext('webgl2', { antialias: false })!
+if (!gl) {
+  throw new Error('WebGL not supported')
+}
+
 canvas.width = 256 * 2
 canvas.height = 256 * 2
 const WIDTH = canvas.width

package/dev/src/examples/symbol.ts

@@ -0,0 +1,79 @@
+import { view } from 'view.gl'
+import { attribute, compile, glsl, uniform } from 'view.gl/tag'
+import { createElement } from '../utils'
+
+const canvas = createElement('canvas', {
+  width: window.innerWidth,
+  height: window.innerHeight,
+  parentElement: document.body,
+  style: 'width: 100%; height: 100%',
+})
+
+new ResizeObserver(() => {
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+  gl.viewport(0, 0, canvas.width, canvas.height)
+  draw(performance.now())
+}).observe(canvas)
+
+const gl = canvas.getContext('webgl2')!
+gl.viewport(0, 0, canvas.width, canvas.height)
+
+const vertex = glsl`
+precision mediump float;
+
+${attribute.vec2('a_vertex')}
+${uniform.float('u_time')}
+
+void main() {
+  float s = sin(u_time);
+  float c = cos(u_time);
+  mat2 rotation = mat2(
+    c, -s,
+    s,  c
+  );
+  vec2 position = a_vertex * rotation;
+  gl_Position = vec4(position, 0.0,  1.0);
+}`
+
+const u_color = Symbol('color')
+
+const fragment = glsl`
+precision mediump float;
+
+${uniform.vec3(u_color)}
+
+void main() {
+  gl_FragColor = vec4(${u_color}, 1.0);
+}`
+
+const { program, schema } = compile(gl, vertex, fragment)
+const { attributes, uniforms } = view(gl, program, schema)
+
+gl.useProgram(program)
+
+uniforms[u_color].set(0, 255, 0)
+
+// Create triangle vertex buffer
+attributes.a_vertex
+  .set(
+    new Float32Array([
+      // top
+      0.0, 1.0,
+      // bottom left
+      -1.0, -1.0,
+      // bottom right
+      1.0, -1.0,
+    ]),
+  )
+  .bind()
+
+function draw(delta: number) {
+  requestAnimationFrame(draw)
+
+  // Set uniform
+  uniforms.u_time.set(delta / 1_000)
+
+  gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, 100)
+}
+requestAnimationFrame(draw)

package/dev/{tetris.ts → src/examples/tetris.ts}

@@ -429,6 +429,7 @@ function createTetris() {
     if (checkCollision()) {
       next()
     }
+    render()
     animationTimeout.set(animate, 1_000)
   }
   setTimeout(animate, 1_000)

package/dev/src/index.css

@@ -0,0 +1,12 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0px;
+  height: 100%;
+  overscroll-behavior-y: none;
+}
+canvas {
+  margin: auto;
+  image-rendering: pixelated;
+}

package/dev/src/index.ts

@@ -0,0 +1,69 @@
+import css from './index.css?url'
+import { createElement } from './utils'
+
+const iframe = document.querySelector('iframe')!
+const nav = document.querySelector('nav')!
+
+createElement('h3', { innerText: 'Examples', parentElement: nav })
+
+const urls = Object.fromEntries(
+  Object.entries(import.meta.glob('./examples/*.ts', { eager: false })).map(([key, entry]) => {
+    const name = key.split('/').pop()!.replace('.ts', '')
+    const chunk = entry.toString().match(/import\(['"]([^'"]+)['"]/)![1]!
+    return [name, chunk] as const
+  }),
+)
+
+Object.entries(urls).forEach(([name, localUrl]) => {
+  createElement('button', {
+    onclick(event) {
+      event.preventDefault()
+      load(name, localUrl)
+    },
+    innerHTML: name,
+    parentElement: nav,
+    'data-route': name,
+  })
+})
+
+function load(name: string, url: string) {
+  // Use hash routing instead of pushState for GitHub Pages compatibility
+  window.location.hash = name
+
+  URL.revokeObjectURL(iframe.src)
+
+  nav.querySelectorAll('button').forEach(button => {
+    if (button.getAttribute('data-route') === name) {
+      button.classList.add('active')
+    } else {
+      button.classList.remove('active')
+    }
+  })
+
+  iframe.src = URL.createObjectURL(
+    new Blob(
+      [
+        `<head>
+<link rel="stylesheet" href="${new URL(css, import.meta.url).href}"></link>
+<script type="module" src="${new URL(url, import.meta.url).href}"></script></head>`,
+      ],
+      {
+        type: 'text/html',
+      },
+    ),
+  )
+}
+
+// Handle hash-based routing
+const hash = window.location.hash.slice(1) // Remove #
+if (hash && hash in urls) {
+  load(hash, urls[hash]!)
+}
+
+// Listen for hash changes
+window.addEventListener('hashchange', () => {
+  const hash = window.location.hash.slice(1)
+  if (hash && hash in urls) {
+    load(hash, urls[hash]!)
+  }
+})

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

@@ -48,11 +48,17 @@ export function createElement<T extends keyof HTMLElementTagNameMap>(
   {
     parentElement,
     ...options
-  }: Partial<Omit<HTMLElementTagNameMap[T], 'style'> & { style: string }> = {},
+  }: Partial<Omit<HTMLElementTagNameMap[T], 'style'> & { style: string }> &
+    Record<`data-${string}`, string> = {},
 ) {
   const element = document.createElement(tag)
+
   for (const key in options) {
-    element[key] = options[key]
+    if (key.startsWith('data-')) {
+      element.setAttribute(key, options[key])
+    } else {
+      element[key] = options[key]
+    }
   }
 
   ;(parentElement ?? document.body).appendChild(element)

package/dev/vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({
-  base: './',
+  base: process.env.GITHUB_ACTIONS ? 'https://bigmistqke.github.io/view.gl/' : undefined,
   assetsInclude: ['assets/**/*'],
   plugins: [
     tsconfigPaths(),
@@ -38,5 +38,13 @@ export default defineConfig({
   build: {
     target: 'esnext',
     minify: false,
+    rollupOptions: {
+      input: {
+        main: './dev/index.html',
+        index: './dev/src/index.ts', // Separate entry for index.ts
+        utils: './dev/src/utils.ts', // Separate entry for utils.ts
+        404: './dev/404.html',
+      },
+    },
   },
 })

package/dist/index.d.mts

@@ -1,5 +1,6 @@
-import { V as ViewSchema, G as GL, a as ViewOptions, b as View, U as UniformSchema, c as UniformView, A as AttributeSchema, d as AttributeView, I as InterleavedAttributeSchema, e as InterleavedAttributeView, B as BufferSchema, f as BufferView } from './types-DxpS9Bae.mjs';
+import { V as ViewSchema, G as GL, a as ViewOptions, b as View, U as UniformSchema, c as UniformView, A as AttributeSchema, d as AttributeView, I as InterleavedAttributeSchema, e as InterleavedAttributeView, B as BufferSchema, f as BufferView } from './types-DoFAJoh-.mjs';
 
+declare function toID(key: string | number | symbol): any;
 /**********************************************************************************/
 /**********************************************************************************/
 declare function view<T extends ViewSchema>(gl: GL, program: WebGLProgram, schema: T, options?: ViewOptions): View<T>;
@@ -14,4 +15,4 @@ declare function interleavedAttributeView<T extends InterleavedAttributeSchema>(
 /**********************************************************************************/
 declare function bufferView<T extends BufferSchema>(gl: GL, schema: T, { signal }?: ViewOptions): BufferView<T>;
 
-export { attributeView, bufferView, interleavedAttributeView, uniformView, view };
+export { attributeView, bufferView, interleavedAttributeView, toID, uniformView, view };

package/dist/index.mjs

@@ -1,3 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+
 // src/features.ts
 var INSTANCED_ARRAYS_WRAPPER_MAP = /* @__PURE__ */ new WeakMap();
 function getInstancedArrays(gl) {
@@ -30,12 +36,32 @@ function getVertexArrayObject(gl) {
   return wrapper;
 }
 
-// src/utils.ts
-function mapObject(value, callback) {
-  return Object.fromEntries(
-    Object.entries(value).map(([key, value2], index) => [key, callback(value2, key, index)])
-  );
+// src/utils/object.ts
+var object_exports = {};
+__export(object_exports, {
+  forEach: () => forEach,
+  map: () => map
+});
+function forEach(value, callback) {
+  let index2 = 0;
+  for (const key in value) {
+    callback(value[key], key, index2);
+    index2++;
+  }
+  for (const key of Object.getOwnPropertySymbols(value)) {
+    callback(value[key], key, index2);
+    index2++;
+  }
+}
+function map(value, callback) {
+  const result = {};
+  forEach(value, (value2, key, index2) => {
+    result[key] = callback(value2, key, index2);
+  });
+  return result;
 }
+
+// src/utils/index.ts
 function assertedNotNullish(value, message) {
   if (value === void 0 || value === null) throw new Error(message);
   return value;
@@ -71,17 +97,47 @@ var kindToSize = (kind) => {
   switch (kind[0]) {
     case "m":
       const [a, b] = kind.match(/\d+/g).map(Number);
-      return a * (b || a);
+      return a * (b ?? a);
     case "v":
-      return +kind.match(/\d/)[0];
+    case "i":
+    case "b":
+    case "u":
+      const match = kind.match(/\d/);
+      return match ? +match[0] : 1;
     default:
       return 1;
   }
 };
 var isMatKind = (kind) => kind.includes("mat");
 var isSamplerKind = (kind) => kind.includes("sampler");
+function createUpsertMap(constructor) {
+  const map2 = new (constructor ?? Map)();
+  return Object.assign(map2, {
+    getOrInsert(key, value) {
+      let result = map2.get(key);
+      if (result) {
+        return result;
+      }
+      result = value();
+      map2.set(key, result);
+      return result;
+    }
+  });
+}
 
 // src/index.ts
+var index = 0;
+var PREFIX = "VIEW_GL_ALIAS";
+var SYMBOL_MAP = createUpsertMap(WeakMap);
+function toID(key) {
+  if (typeof key === "string") {
+    return key;
+  }
+  if (typeof key === "symbol") {
+    return SYMBOL_MAP.getOrInsert(key, () => `${PREFIX}_${index++}`);
+  }
+  return key.toString();
+}
 function view(gl, program, schema, options) {
   return {
     uniforms: !schema.uniforms ? void 0 : uniformView(gl, program, schema.uniforms),
@@ -91,7 +147,8 @@ function view(gl, program, schema, options) {
   };
 }
 function uniformView(gl, program, schema) {
-  return mapObject(schema, ({ kind, size }, name2) => {
+  return object_exports.map(schema, ({ kind, size }, key) => {
+    const name2 = toID(key);
     const location = gl.getUniformLocation(program, name2);
     if (isSamplerKind(kind)) {
       return {
@@ -124,9 +181,10 @@ function handleAttribute(gl, location, size, stride, offset, type, instanced) {
   }
 }
 function attributeView(gl, program, schema, { signal } = {}) {
-  const attributes = mapObject(
+  const attributes = object_exports.map(
     schema,
-    ({ kind, instanced, buffer = assertedNotNullish(gl.createBuffer()) }, name2) => {
+    ({ kind, instanced, buffer = assertedNotNullish(gl.createBuffer()) }, key) => {
+      const name2 = toID(key);
       const location = gl.getAttribLocation(program, name2);
       if (location < 0) {
         throw new Error(`Attribute '${name2}' not found`);
@@ -151,27 +209,26 @@ function attributeView(gl, program, schema, { signal } = {}) {
     }
   );
   signal?.addEventListener("abort", function dispose() {
-    for (const name2 in attributes) {
-      attributes[name2].dispose();
-    }
+    object_exports.forEach(attributes, (value) => value.dispose());
   });
   return attributes;
 }
 function interleavedAttributeView(gl, program, schema, { signal } = {}) {
-  const interleavedAttributes = mapObject(schema, ({ layout, instanced }) => {
-    let index = 0;
+  const interleavedAttributes = object_exports.map(schema, ({ layout, instanced }) => {
+    let index2 = 0;
     const handles = layout.map((layout2) => {
-      const location = gl.getAttribLocation(program, layout2.name);
+      const name2 = toID(layout2.key);
+      const location = gl.getAttribLocation(program, name2);
       if (location < 0) {
-        throw new Error(`Attribute '${layout2.name}' not found`);
+        throw new Error(`Attribute '${name2}' not found`);
       }
       const size = kindToSize(layout2.kind);
-      const offset = index;
+      const offset = index2;
       const type = layout2.kind.startsWith("i") ? "INT" : "FLOAT";
-      index += size * 4;
+      index2 += size * 4;
       return () => handleAttribute(gl, location, size, stride, offset, type, instanced);
     });
-    const stride = index;
+    const stride = index2;
     const buffer = assertedNotNullish(gl.createBuffer());
     let vao = void 0;
     const feature = getVertexArrayObject(gl);
@@ -231,14 +288,12 @@ function interleavedAttributeView(gl, program, schema, { signal } = {}) {
     };
   });
   signal?.addEventListener("abort", function dispose() {
-    for (const name2 in interleavedAttributes) {
-      interleavedAttributes[name2].dispose();
-    }
+    object_exports.forEach(interleavedAttributes, (value) => value.dispose());
   });
   return interleavedAttributes;
 }
 function bufferView(gl, schema, { signal } = {}) {
-  const buffers = mapObject(schema, ({ target = "ARRAY_BUFFER", usage = "STATIC_DRAW" }) => {
+  const buffers = object_exports.map(schema, ({ target = "ARRAY_BUFFER", usage = "STATIC_DRAW" }) => {
     const buffer = assertedNotNullish(gl.createBuffer());
     return {
       bind() {
@@ -254,9 +309,7 @@ function bufferView(gl, schema, { signal } = {}) {
     };
   });
   signal?.addEventListener("abort", function dispose() {
-    for (const name2 in buffers) {
-      buffers[name2].dispose();
-    }
+    object_exports.forEach(buffers, (value) => value.dispose());
   });
   return buffers;
 }
@@ -264,6 +317,7 @@ export {
   attributeView,
   bufferView,
   interleavedAttributeView,
+  toID,
   uniformView,
   view
 };