@bigmistqke/view.gl 0.1.0

package/src/index.ts

@@ -0,0 +1,313 @@
+import { getInstancedArrays, getVertexArrayObject } from './features'
+import type {
+  AttributeMethods,
+  AttributeSchema,
+  AttributeView,
+  BufferSchema,
+  BufferView,
+  GL,
+  UniformView as InferUniformView,
+  InterleavedAttributeMethods,
+  InterleavedAttributeSchema,
+  InterleavedAttributeView,
+  UniformSchema,
+  View,
+  ViewOptions,
+  ViewSchema,
+} from './types'
+import {
+  assertedNotNullish,
+  isMatKind,
+  isSamplerKind,
+  kindToSize,
+  kindToUniformFnName,
+  mapObject,
+} from './utils'
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                      View                                      */
+/*                                                                                */
+/**********************************************************************************/
+
+export function view<T extends ViewSchema>(
+  gl: GL,
+  program: WebGLProgram,
+  schema: T,
+  options?: ViewOptions,
+): View<T> {
+  return {
+    uniforms: !schema.uniforms ? undefined : uniformView(gl, program, schema.uniforms),
+    attributes: !schema.attributes
+      ? undefined
+      : attributeView(gl, program, schema.attributes, options),
+    interleavedAttributes: !schema.interleavedAttributes
+      ? undefined
+      : interleavedAttributeView(gl, program, schema.interleavedAttributes, options),
+    buffers: !schema.buffers ? undefined : bufferView(gl, schema.buffers),
+  } as View<T>
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                    Uniform View                                */
+/*                                                                                */
+/**********************************************************************************/
+
+export function uniformView<T extends UniformSchema>(
+  gl: GL,
+  program: WebGLProgram,
+  schema: T,
+): InferUniformView<T> {
+  return mapObject(schema, ({ kind, size }, name) => {
+    const location = gl.getUniformLocation(program, name)
+
+    if (isSamplerKind(kind)) {
+      return {
+        set(arg: number) {
+          gl.uniform1i(location, arg)
+        },
+      }
+    }
+
+    const fnName = `uniform${kindToUniformFnName(kind)}${size ? 'v' : ''}`
+
+    // @ts-ignore FIX WEBGL/WEBGL2 TYPES
+    const fn = gl[fnName].bind(gl)
+
+    if (isMatKind(kind)) {
+      return {
+        set(...args: any[]) {
+          fn(location, false, args[0])
+        },
+      }
+    }
+
+    return {
+      set(...args: any[]) {
+        fn(location, ...args)
+      },
+    }
+  })
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                   Attribute View                               */
+/*                                                                                */
+/**********************************************************************************/
+
+// Shared attribute helper functions
+// between attributeView and interleavedAttributeView
+function handleAttribute(
+  gl: GL,
+  location: number,
+  size: number,
+  stride: number,
+  offset: number,
+  type: 'FLOAT' | 'INT',
+  instanced?: boolean,
+) {
+  gl.enableVertexAttribArray(location)
+  gl.vertexAttribPointer(location, size, gl[type], false, stride, offset)
+
+  if (instanced) {
+    // Get instanced-arrays-feature: extension if webgl, gl if webgl2
+    assertedNotNullish(getInstancedArrays(gl)).vertexAttribDivisor(location, 1)
+  }
+}
+
+export function attributeView<T extends AttributeSchema>(
+  gl: GL,
+  program: WebGLProgram,
+  schema: T,
+  { signal }: ViewOptions = {},
+): AttributeView<T> {
+  const attributes = mapObject(
+    schema,
+    (
+      { kind, instanced, buffer = assertedNotNullish(gl.createBuffer()) },
+      name,
+    ): AttributeMethods => {
+      const location = gl.getAttribLocation(program, name)
+      if (location < 0) {
+        throw new Error(`Attribute '${name}' not found`)
+      }
+
+      const size = kindToSize(kind)
+      const type = kind.startsWith('i') ? 'INT' : 'FLOAT'
+
+      return {
+        buffer,
+        bind() {
+          gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+          handleAttribute(gl, location, size, 0, 0, type, instanced)
+        },
+        dispose() {
+          gl.deleteBuffer(buffer)
+        },
+        set(data, usage = 'STATIC_DRAW') {
+          gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+          gl.bufferData(gl.ARRAY_BUFFER, data, gl[usage])
+          return this
+        },
+      }
+    },
+  )
+
+  signal?.addEventListener('abort', function dispose() {
+    for (const name in attributes) {
+      attributes[name].dispose()
+    }
+  })
+
+  return attributes
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                               Interleaved Attribute View                       */
+/*                                                                                */
+/**********************************************************************************/
+
+export function interleavedAttributeView<T extends InterleavedAttributeSchema>(
+  gl: GL,
+  program: WebGLProgram,
+  schema: T,
+  { signal }: ViewOptions = {},
+): InterleavedAttributeView<T> {
+  // Initialize interleaved attributes
+  const interleavedAttributes = mapObject(schema, ({ layout, instanced }) => {
+    // Increment number to keep track of offset
+    let index = 0
+
+    // Calculate layout information
+    const handles = layout.map(layout => {
+      const location = gl.getAttribLocation(program, layout.name)
+
+      if (location < 0) {
+        throw new Error(`Attribute '${layout.name}' not found`)
+      }
+
+      const size = kindToSize(layout.kind)
+      const offset = index
+      const type = layout.kind.startsWith('i') ? 'INT' : 'FLOAT'
+      index += size * 4
+
+      return () => handleAttribute(gl, location, size, stride, offset, type, instanced)
+    })
+
+    // Set stride to final index
+    const stride = index
+
+    // Create a buffer
+    const buffer = assertedNotNullish(gl.createBuffer())
+
+    // Create VAO to cache attribute state
+    let vao: { unbind(): void; bind(): void; dispose(): void } | undefined = undefined
+
+    // Get VAO-feature: extension if webgl1, gl if webgl2
+    const feature = getVertexArrayObject(gl)
+    if (feature) {
+      const vertexArray = feature.createVertexArray()
+      feature.bindVertexArray(vertexArray)
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+      for (const handle of handles) {
+        handle()
+      }
+      feature.bindVertexArray(null)
+      vao = {
+        unbind() {
+          feature.bindVertexArray(null)
+        },
+        bind() {
+          feature.bindVertexArray(vertexArray)
+        },
+        dispose() {
+          feature.deleteVertexArray(vertexArray)
+        },
+      }
+    }
+
+    return {
+      bind() {
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+        if (vao) {
+          vao.bind()
+        } else {
+          // Fallback: manual attribute setup
+          for (const handle of handles) {
+            handle()
+          }
+        }
+      },
+      unbind() {
+        if (vao) {
+          vao.unbind()
+        }
+      },
+      dispose() {
+        gl.deleteBuffer(buffer)
+        if (vao) {
+          vao.dispose()
+        }
+      },
+      set(value, usage = 'STATIC_DRAW') {
+        if (vao) {
+          vao.bind()
+        } else {
+          gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+        }
+        gl.bufferData(gl.ARRAY_BUFFER, value, gl[usage])
+        if (vao) {
+          vao.unbind()
+        }
+      },
+    } satisfies InterleavedAttributeMethods
+  })
+
+  signal?.addEventListener('abort', function dispose() {
+    for (const name in interleavedAttributes) {
+      interleavedAttributes[name].dispose()
+    }
+  })
+
+  return interleavedAttributes
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                     Buffer View                                */
+/*                                                                                */
+/**********************************************************************************/
+
+export function bufferView<T extends BufferSchema>(
+  gl: GL,
+  schema: T,
+  { signal }: ViewOptions = {},
+): BufferView<T> {
+  // Initialize buffers
+  const buffers = mapObject(schema, ({ target = 'ARRAY_BUFFER', usage = 'STATIC_DRAW' }) => {
+    const buffer = assertedNotNullish(gl.createBuffer())
+    return {
+      bind() {
+        gl.bindBuffer(gl[target], buffer)
+      },
+      dispose() {
+        gl.deleteBuffer(buffer)
+      },
+      set(data: Float32Array) {
+        gl.bindBuffer(gl[target], buffer)
+        gl.bufferData(gl[target], data, gl[usage])
+      },
+    }
+  })
+
+  signal?.addEventListener('abort', function dispose() {
+    for (const name in buffers) {
+      buffers[name].dispose()
+    }
+  })
+
+  return buffers
+}

package/src/tag.ts

@@ -0,0 +1,193 @@
+import type {
+  AttributeKind,
+  AttributeOptions,
+  AttributeTag,
+  AttributeTagFn,
+  GLSL,
+  InterleaveTag,
+  Merge,
+  Prettify,
+  UniformKind,
+  UniformOptions,
+  UniformTag,
+} from './types'
+import { createProgram } from './utils'
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                  Tag Utilities                                 */
+/*                                                                                */
+/**********************************************************************************/
+
+interface UniformTagFn<TKind extends UniformKind> {
+  <const TName extends string, const TOptions extends Omit<UniformOptions, 'kind'>>(
+    name: TName,
+    TOptions: TOptions,
+  ): Prettify<UniformTag<TName, TKind, TOptions>>
+  <const TName extends string>(name: TName): Prettify<UniformTag<TName, TKind>>
+}
+
+export const uniform = new Proxy(
+  {} as {
+    [TKey in UniformKind]: UniformTagFn<TKey>
+  },
+  {
+    get(target, property) {
+      // @ts-expect-error
+      if (typeof property === 'symbol') return target[property]
+      return (name: string, options?: Omit<UniformOptions, 'kind'>) => ({
+        type: 'uniform',
+        name,
+        kind: property,
+        ...options,
+      })
+    },
+  },
+)
+
+export const attribute = new Proxy(
+  {} as {
+    [TKey in AttributeKind]: AttributeTagFn<TKey>
+  },
+  {
+    get(target, property) {
+      // @ts-expect-error
+      if (typeof property === 'symbol') return target[property]
+      return (name: string, options?: Omit<AttributeOptions, 'kind'>) => ({
+        type: 'attribute',
+        name,
+        kind: property,
+        ...options,
+      })
+    },
+  },
+)
+
+export function interleave<
+  const TName extends string,
+  const TLayout extends Array<AttributeTag<string, AttributeKind, undefined>>,
+  const TOptions extends Omit<AttributeOptions, 'kind'>,
+>(name: TName, layout: TLayout, instanced: TOptions): InterleaveTag<TName, TLayout, TOptions>
+export function interleave<
+  const TName extends string,
+  const TLayout extends Array<AttributeTag<string, AttributeKind, undefined>>,
+>(name: TName, layout: TLayout): InterleaveTag<TName, TLayout, { instanced: false }>
+export function interleave<
+  const TName extends string,
+  const TLayout extends Array<AttributeTag<string, AttributeKind, undefined>>,
+  const TOptions extends Omit<AttributeOptions, 'kind'>,
+>(name: TName, layout: TLayout, { instanced, buffer }?: TOptions = {}) {
+  return {
+    type: 'interleavedAttribute',
+    name,
+    // remove instanced- and type-property
+    layout: layout.map(({ name, kind }) => ({
+      name,
+      kind,
+    })),
+    instanced: !!instanced,
+    buffer,
+  } as InterleaveTag<TName, TLayout, TOptions>
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                       GLSL                                     */
+/*                                                                                */
+/**********************************************************************************/
+
+export function glsl<
+  Elem extends string,
+  Template extends ReadonlyArray<Elem>,
+  Hole extends UniformTag | AttributeTag | InterleaveTag | string | number,
+  Holes extends Hole[],
+>([initial, ...rest]: Template, ...holes: [...Holes]) {
+  const v300 = initial?.startsWith('#version 300 es')
+  const template = rest.reduce((out, templatePart, index) => {
+    const hole = holes[index]
+    const holePart =
+      typeof hole === 'string' || typeof hole === 'number'
+        ? hole
+        : hole.type === 'interleavedAttribute'
+        ? hole.layout.reduce(
+            (a, v) =>
+              v300 ? `${a}in ${v.kind} ${v.name};\n` : `${a}attribute ${v.kind} ${v.name};\n`,
+            '',
+          )
+        : typeof hole === 'object' && hole.type === 'uniform' && 'size' in hole
+        ? `${hole.type} ${hole.kind} ${hole.name}[${hole.size}];`
+        : `${hole.type === 'attribute' && v300 ? 'in' : hole.type} ${hole.kind} ${hole.name};`
+    return out + holePart + templatePart
+  }, initial || '')
+
+  return holes.reduce(
+    (resources, resource) => {
+      if (typeof resource === 'string' || typeof resource === 'number') {
+        return resources
+      }
+      // @ts-expect-error
+      resources[`${resource.type}s`][resource.name] = resource
+      return resources
+    },
+    {
+      template,
+      uniforms: {},
+      attributes: {},
+      interleavedAttributes: {},
+    } as {
+      template: string
+      uniforms: {
+        [K in Extract<Holes[number], UniformTag> as K['name']]: Prettify<Omit<K, 'name' | 'type'>>
+      }
+      attributes: {
+        [K in Extract<Holes[number], AttributeTag> as K['name']]: Prettify<Omit<K, 'name' | 'type'>>
+      }
+      interleavedAttributes: {
+        [K in Extract<Holes[number], InterleaveTag> as K['name']]: Prettify<
+          Omit<K, 'name' | 'type'>
+        >
+      }
+    },
+  )
+}
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                     Compile                                    */
+/*                                                                                */
+/**********************************************************************************/
+
+export function compile<TVertex extends GLSL, TFragment extends GLSL>(
+  gl: WebGLRenderingContext,
+  vertex: TVertex,
+  fragment: TFragment,
+) {
+  const program = createProgram(gl, vertex.template, fragment.template)
+
+  return {
+    program,
+    schema: {
+      uniforms: {
+        ...vertex.uniforms,
+        ...fragment.uniforms,
+      },
+      attributes: {
+        ...vertex.attributes,
+        ...fragment.attributes,
+      },
+      interleavedAttributes: {
+        ...vertex.interleavedAttributes,
+        ...fragment.interleavedAttributes,
+      },
+    },
+  } as {
+    program: WebGLProgram
+    schema: {
+      uniforms: Prettify<Merge<TVertex['uniforms'], TFragment['uniforms']>>
+      attributes: Prettify<Merge<TVertex['attributes'], TFragment['attributes']>>
+      interleavedAttributes: Prettify<
+        Merge<TVertex['interleavedAttributes'], TFragment['interleavedAttributes']>
+      >
+    }
+  }
+}