@bigmistqke/view.gl 0.1.0 → 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

@@ -0,0 +1,18 @@
+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>;
+/**********************************************************************************/
+/**********************************************************************************/
+declare function uniformView<T extends UniformSchema>(gl: GL, program: WebGLProgram, schema: T): UniformView<T>;
+declare function attributeView<T extends AttributeSchema>(gl: GL, program: WebGLProgram, schema: T, { signal }?: ViewOptions): AttributeView<T>;
+/**********************************************************************************/
+/**********************************************************************************/
+declare function interleavedAttributeView<T extends InterleavedAttributeSchema>(gl: GL, program: WebGLProgram, schema: T, { signal }?: ViewOptions): InterleavedAttributeView<T>;
+/**********************************************************************************/
+/**********************************************************************************/
+declare function bufferView<T extends BufferSchema>(gl: GL, schema: T, { signal }?: ViewOptions): BufferView<T>;
+
+export { attributeView, bufferView, interleavedAttributeView, toID, uniformView, view };