@bigmistqke/view.gl 0.1.0

package/dev/tetris.ts

@@ -0,0 +1,439 @@
+import { GL } from 'src/types'
+import { attributeView, uniformView } from 'view.gl'
+import { attribute, compile, glsl, uniform } from 'view.gl/tag'
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                      Utils                                     */
+/*                                                                                */
+/**********************************************************************************/
+
+function rotate(data: Float32Array, size: number, clockwise: boolean = true): void {
+  for (let layer = 0; layer < Math.floor(size / 2); layer++) {
+    const first = layer
+    const last = size - 1 - layer
+
+    for (let i = 0; i < last - first; i++) {
+      const top = getColorIndex(data, first, first + i, size)
+      const right = getColorIndex(data, first + i, last, size)
+      const bottom = getColorIndex(data, last, last - i, size)
+      const left = getColorIndex(data, last - i, first, size)
+
+      if (clockwise) {
+        // top -> right, right -> bottom, bottom -> left, left -> top
+        setColorIndex(data, first + i, last, size, top)
+        setColorIndex(data, last, last - i, size, right)
+        setColorIndex(data, last - i, first, size, bottom)
+        setColorIndex(data, first, first + i, size, left)
+      } else {
+        // top -> left, left -> bottom, bottom -> right, right -> top
+        setColorIndex(data, last - i, first, size, top)
+        setColorIndex(data, last, last - i, size, left)
+        setColorIndex(data, first + i, last, size, bottom)
+        setColorIndex(data, first, first + i, size, right)
+      }
+    }
+  }
+
+  function getColorIndex(buf: Float32Array, x: number, y: number, size: number) {
+    return buf[y * size + x]!
+  }
+
+  function setColorIndex(buf: Float32Array, x: number, y: number, size: number, pixel: number) {
+    buf[y * size + x] = pixel
+  }
+}
+
+function createTimeout() {
+  let timeout: number
+  return {
+    set(callback: () => void, time: number) {
+      clearTimeout(timeout)
+      timeout = setTimeout(callback, time)
+    },
+    clear() {
+      clearTimeout(timeout)
+    },
+  }
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                    Constants                                   */
+/*                                                                                */
+/**********************************************************************************/
+
+const WIDTH = 10
+const HEIGHT = 20
+
+export const TETROMINO = {
+  I: {
+    dimensions: [4, 4] as const,
+    pixels: () => new Float32Array([0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0]),
+    color: [0, 1, 1], // Cyan
+  },
+  O: {
+    dimensions: [2, 2] as const,
+    pixels: () => new Float32Array([2, 2, 2, 2]),
+    color: [1, 1, 0], // Yellow
+  },
+  T: {
+    dimensions: [3, 3] as const,
+    pixels: () => new Float32Array([0, 3, 0, 3, 3, 3, 0, 0, 0]),
+    color: [0.6, 0, 1], // Purple
+  },
+  S: {
+    dimensions: [3, 3] as const,
+    pixels: () => new Float32Array([0, 4, 4, 4, 4, 0, 0, 0, 0]),
+    color: [0, 1, 0],
+  },
+  Z: {
+    dimensions: [3, 3] as const,
+    pixels: () => new Float32Array([5, 5, 0, 0, 5, 5, 0, 0, 0]),
+    color: [1, 0, 0],
+  },
+  J: {
+    dimensions: [3, 3] as const,
+    pixels: () => new Float32Array([6, 0, 0, 6, 6, 6, 0, 0, 0]),
+    color: [0, 0, 1],
+  },
+  L: {
+    dimensions: [3, 3] as const,
+    pixels: () => new Float32Array([0, 0, 7, 7, 7, 7, 0, 0, 0]),
+    color: [1, 0.5, 0],
+  },
+} as const
+
+const TETROMINO_KIND = Object.keys(TETROMINO) as Array<keyof typeof TETROMINO>
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                Create Tetromino                                */
+/*                                                                                */
+/**********************************************************************************/
+
+function getRandomTetrominoKind() {
+  return TETROMINO_KIND[Math.floor(Math.random() * TETROMINO_KIND.length)]!
+}
+
+function createTetromino(
+  gl: GL,
+  program: WebGLProgram,
+  schema: {
+    a_index: { kind: 'float'; instanced: true }
+    a_pixel: { kind: 'float'; instanced: true }
+  },
+) {
+  const { a_index, a_pixel } = attributeView(gl, program, schema)
+
+  let pixels: Float32Array = null!
+  let dimensions: [number, number] = null!
+  let offset: [number, number] = null!
+  let pixelCount: number = null!
+
+  function next(kind = getRandomTetrominoKind()) {
+    const template = TETROMINO[kind]
+    pixels = template.pixels()
+    pixelCount = template.dimensions[0] * template.dimensions[1]
+    offset = [Math.ceil((WIDTH - template.dimensions[0]) / 2), HEIGHT - template.dimensions[1]] as [
+      number,
+      number,
+    ]
+    dimensions = template.dimensions as [number, number]
+
+    a_index.set(new Float32Array(Array.from({ length: pixelCount }, (_, index) => index)))
+    a_pixel.set(pixels)
+  }
+
+  next()
+
+  return {
+    get dimensions() {
+      return dimensions
+    },
+    get pixels() {
+      return pixels
+    },
+    get offset() {
+      return offset
+    },
+    get pixelCount() {
+      return pixelCount
+    },
+    bindAttributes() {
+      a_index.bind()
+      a_pixel.bind()
+    },
+    next,
+    rotate(clockwise = true) {
+      rotate(pixels, dimensions[1], clockwise)
+      a_pixel.set(pixels).bind()
+    },
+  }
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                   Create Board                                 */
+/*                                                                                */
+/**********************************************************************************/
+
+function createBoard(
+  gl: GL,
+  program: WebGLProgram,
+  schema: {
+    a_index: { kind: 'float'; instanced: true }
+    a_pixel: { kind: 'float'; instanced: true }
+  },
+) {
+  const { a_index, a_pixel } = attributeView(gl, program, schema)
+  const array = new Float32Array(Array.from({ length: WIDTH * HEIGHT }, () => 0))
+
+  a_index.set(new Float32Array(Array.from({ length: WIDTH * HEIGHT }, (_, index) => index)))
+  a_pixel.set(array)
+
+  return {
+    bindAttributes() {
+      a_index.bind()
+      a_pixel.bind()
+    },
+    array,
+    blit({ pixelCount, offset, dimensions, pixels }: ReturnType<typeof createTetromino>) {
+      for (let i = 0; i < pixelCount; i++) {
+        const pixel = pixels[i]!
+
+        if (pixel) {
+          const x = offset[0] + (i % dimensions[0])
+          const y = offset[1] + Math.floor(i / dimensions[0]) + 1
+          const index = x + y * WIDTH
+          array[index] = pixel
+        }
+      }
+
+      let writeRow = 0
+
+      for (let y = 0; y < HEIGHT; y++) {
+        let isComplete = true
+
+        for (let x = 0; x < WIDTH; x++) {
+          if (array[x + y * WIDTH] === 0) {
+            isComplete = false
+            break
+          }
+        }
+
+        if (!isComplete) {
+          if (writeRow !== y) {
+            for (let x = 0; x < WIDTH; x++) {
+              array[x + writeRow * WIDTH] = array[x + y * WIDTH]!
+            }
+          }
+          writeRow++
+        }
+      }
+
+      a_pixel.set(array)
+    },
+  }
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                  Create Tetris                                 */
+/*                                                                                */
+/**********************************************************************************/
+
+const vertex = glsl`
+precision mediump float;
+
+${attribute.float('a_index', { instanced: true })}
+${attribute.float('a_pixel', { instanced: true })}
+${attribute.vec2('a_vertex')}
+${uniform.vec2('u_offset')}
+${uniform.vec2('u_dimensions')}
+${uniform.vec3('u_palette', { size: 7 })}
+
+varying vec3 v_color;
+
+void main(){
+  float columns = mod(a_index, u_dimensions.x);
+  float rows = floor(a_index / u_dimensions.x);
+
+  vec2 offset = (vec2(columns, rows) + u_offset);
+
+  vec2 base = offset + 0.5;
+  vec2 pos = (a_vertex + base) / vec2(10., 20.);
+
+  gl_Position = vec4(pos * 2.0 - 1.0, 0.0, 1.0);
+
+  if(a_pixel == 0.){
+    v_color = vec3(0., 0., 0.);
+  }else{
+    v_color = u_palette[int(a_pixel) - 1];
+  }
+}`
+
+const fragment = glsl`
+precision mediump float;
+
+varying vec3 v_color;
+
+void main() {
+  if(v_color.x + v_color.y + v_color.z == 0.){
+    discard;
+  }
+  gl_FragColor = vec4(v_color, 1.0);
+}`
+
+function createTetris() {
+  // Setup canvas
+  const canvas = document.createElement('canvas')
+  canvas.width = WIDTH * 30
+  canvas.height = HEIGHT * 30
+  document.body.append(canvas)
+
+  const animationTimeout = createTimeout()
+
+  // Setup gl
+  const gl = canvas.getContext('webgl2')!
+  gl.viewport(0, 0, canvas.width, canvas.height)
+
+  // Setup program + schema
+  const { program, schema } = compile(gl, vertex, fragment)
+  gl.useProgram(program)
+
+  // Setup views
+  const { u_dimensions, u_offset, u_palette } = uniformView(gl, program, schema.uniforms)
+  const { a_vertex, ...localSchema } = schema.attributes
+  const globalAttributes = attributeView(gl, program, { a_vertex })
+
+  // Setup board
+  const board = createBoard(gl, program, localSchema)
+
+  // Setup tetromino
+  const tetromino = createTetromino(gl, program, localSchema)
+
+  // Inititalize static uniforms/attributes
+  u_palette.set(new Float32Array(Object.values(TETROMINO).flatMap(({ color }) => color)))
+  globalAttributes.a_vertex
+    .set(
+      new Float32Array([
+        // triangle 1
+        -0.5, -0.5, 0.5, -0.5, -0.5, 0.5,
+        // triangle 2
+        -0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
+      ]),
+    )
+    .bind()
+
+  function checkCollision() {
+    for (let i = 0; i < tetromino.pixelCount; i++) {
+      const x = (i % tetromino.dimensions[0]) + tetromino.offset[0]
+      const y = Math.floor(i / tetromino.dimensions[0]) + tetromino.offset[1]
+
+      let pixel = tetromino.pixels[i]!
+
+      if (pixel > 0) {
+        if (x < 0) return true
+        if (x >= WIDTH) return true
+        if (y < 0) return true
+
+        const boardPixel = board.array[x + y * WIDTH]
+
+        if (boardPixel !== 0) {
+          return true
+        }
+      }
+    }
+  }
+
+  function next() {
+    board.blit(tetromino)
+    tetromino.next()
+
+    if (checkCollision()) {
+      document.removeEventListener('keydown', handleKeyDown)
+      animationTimeout.clear()
+    } else {
+      render()
+      animationTimeout.set(animate, 1_000)
+    }
+  }
+
+  // Initialize event listeners
+  function handleKeyDown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowUp':
+        tetromino.rotate()
+        if (checkCollision()) {
+          tetromino.rotate(false)
+        } else {
+          render()
+        }
+        break
+      case 'ArrowDown':
+        tetromino.offset[1]--
+        if (checkCollision()) {
+          next()
+        } else {
+          render()
+        }
+        break
+      case 'ArrowLeft':
+        tetromino.offset[0]--
+        if (checkCollision()) {
+          tetromino.offset[0]++
+        } else {
+          render()
+        }
+        break
+      case 'ArrowRight':
+        tetromino.offset[0]++
+        if (checkCollision()) {
+          tetromino.offset[0]--
+        } else {
+          render()
+        }
+        break
+      case ' ':
+        while (true) {
+          tetromino.offset[1]--
+          if (checkCollision()) {
+            next()
+            break
+          }
+        }
+    }
+  }
+  document.addEventListener('keydown', handleKeyDown)
+
+  function render() {
+    gl.clearColor(0.0, 0.5, 0.0, 0.3)
+    gl.clear(gl.COLOR_BUFFER_BIT)
+
+    // Draw board
+    u_offset.set(0, 0)
+    u_dimensions.set(WIDTH, HEIGHT)
+    board.bindAttributes()
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, WIDTH * HEIGHT)
+
+    // Draw tetromino
+    u_offset.set(...tetromino.offset)
+    u_dimensions.set(...tetromino.dimensions)
+    tetromino.bindAttributes()
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, tetromino.pixelCount)
+  }
+
+  function animate() {
+    tetromino.offset[1]--
+    if (checkCollision()) {
+      next()
+    }
+    animationTimeout.set(animate, 1_000)
+  }
+  setTimeout(animate, 1_000)
+
+  render()
+}
+
+createTetris()

package/dev/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["."]
+}

package/dev/utils.ts

@@ -0,0 +1,61 @@
+type CursorEvent = PointerEvent & {
+  distanceX: number
+  distanceY: number
+  deltaX: number
+  deltaY: number
+}
+
+export function cursor(event: PointerEvent, callback: (event: CursorEvent) => void) {
+  const { promise, resolve } = Promise.withResolvers<void>()
+  const controller = new AbortController()
+
+  const initialX = event.clientX
+  const initialY = event.clientY
+
+  let previousX = event.clientX
+  let previousY = event.clientY
+
+  window.addEventListener(
+    'pointermove',
+    event => {
+      callback(
+        Object.assign(event, {
+          distanceX: initialX - event.clientX,
+          distanceY: initialY - event.clientY,
+          deltaX: previousX - event.clientX,
+          deltaY: previousY - event.clientY,
+        }),
+      )
+      previousX = event.clientX
+      previousY = event.clientY
+    },
+    controller,
+  )
+  window.addEventListener(
+    'pointerup',
+    () => {
+      controller.abort()
+      resolve()
+    },
+    controller,
+  )
+
+  return promise
+}
+
+export function createElement<T extends keyof HTMLElementTagNameMap>(
+  tag: T,
+  {
+    parentElement,
+    ...options
+  }: Partial<Omit<HTMLElementTagNameMap[T], 'style'> & { style: string }> = {},
+) {
+  const element = document.createElement(tag)
+  for (const key in options) {
+    element[key] = options[key]
+  }
+
+  ;(parentElement ?? document.body).appendChild(element)
+
+  return element
+}

package/dev/vite.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  base: './',
+  assetsInclude: ['assets/**/*'],
+  plugins: [
+    tsconfigPaths(),
+    {
+      name: 'Reaplace env variables',
+      transform(code, id) {
+        if (id.includes('node_modules')) {
+          return code
+        }
+        return code
+          .replace(/process\.env\.SSR/g, 'false')
+          .replace(/process\.env\.DEV/g, 'true')
+          .replace(/process\.env\.PROD/g, 'false')
+          .replace(/process\.env\.NODE_ENV/g, '"development"')
+          .replace(/import\.meta\.env\.SSR/g, 'false')
+          .replace(/import\.meta\.env\.DEV/g, 'true')
+          .replace(/import\.meta\.env\.PROD/g, 'false')
+          .replace(/import\.meta\.env\.NODE_ENV/g, '"development"')
+      },
+    },
+  ],
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis',
+      },
+      plugins: [],
+    },
+  },
+  server: {
+    port: 3000,
+  },
+  build: {
+    target: 'esnext',
+    minify: false,
+  },
+})

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@bigmistqke/view.gl",
+  "version": "0.1.0",
+  "description": "",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "types": "./index.d.mts"
+    },
+    "./tag": {
+      "import": "./tag.mjs",
+      "types": "./tag.d.mts"
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {},
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.2",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "scripts": {
+    "dev": "vite serve dev",
+    "build": "tsup"
+  }
+}

package/src/features.ts

@@ -0,0 +1,59 @@
+import type { GL, RemoveSuffix } from './types'
+
+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
+}
+
+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
+}