@bigmistqke/view.gl 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigmistqke/view.gl",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "👀 Utilities for managing WebGL resources.",
   "exports": {
     ".": {
@@ -10,6 +10,10 @@
     "./tag": {
       "import": "./dist/tag.mjs",
       "types": "./dist/tag.d.mts"
+    },
+    "./gl": {
+      "import": "./dist/gl.mjs",
+      "types": "./dist/gl.d.mts"
     }
   },
   "keywords": [
@@ -26,7 +30,8 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "bumpp": "^10.3.2"
   },
   "scripts": {
     "build": "tsup",
@@ -35,10 +40,11 @@
     "dev:watch": "concurrently \"pnpm dev:preview\" \"vite dev:build --watch\"",
     "dev": "vite serve dev",
     "format": "prettier -w \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"dev/**/*.{js,ts,json,css,tsx,jsx}\"",
-    "prepublish": "pnpm build",
+    "prepublish": "pnpm test && pnpm build",
     "test": "vitest --run",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
-    "lint:types": "tsc --noEmit"
+    "lint:types": "tsc --noEmit",
+    "bump": "bumpp"
   }
 }

package/src/gl.ts

@@ -0,0 +1,45 @@
+import { GL } from "./types"
+
+export function createShader(gl: GL, type: number, source: string): WebGLShader {
+  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
+}
+
+export function createProgram(gl: GL, vertexSource: string, fragmentSource: string): WebGLProgram {
+  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}`)
+  }
+
+  // Clean up shaders after linking
+  gl.deleteShader(vertexShader)
+  gl.deleteShader(fragmentShader)
+
+  return program
+}

package/src/index.ts

@@ -22,9 +22,9 @@ import {
   isSamplerKind,
   kindToSize,
   kindToUniformFnName,
-  ObjectUtils,
 } from './utils'
 export * from './types'
+import * as ObjectUtils from "./utils/object"
 
 /**********************************************************************************/
 /*                                                                                */

package/src/tag.ts

@@ -1,4 +1,5 @@
 import { toID, view } from '.'
+import { createProgram } from './gl'
 import type { Prettify } from './type-utils'
 import type {
   AttributeDefinition,
@@ -6,6 +7,7 @@ import type {
   AttributeTokenFn as AttributeTagMethod,
   AttributeToken,
   CompileResult,
+  GL,
   GLSL,
   GLSLSlot,
   GLSLToSchema,
@@ -16,7 +18,7 @@ import type {
   ViewSchema,
   ViewSchemaPartial,
 } from './types'
-import { createProgram } from './utils'
+import { createUpsertMap } from './utils'
 
 export function glsl<TSlot extends GLSLSlot, TSlots extends TSlot[]>(
   template: TemplateStringsArray,
@@ -94,13 +96,23 @@ export function interleave<
 /*                                                                                */
 /**********************************************************************************/
 
+export interface CompileOptions<TSchema extends ViewSchemaPartial> {
+  schema?: TSchema
+  webgl2?: boolean
+}
+
 export function compile<
   TVertex extends GLSL,
   TFragment extends GLSL,
-  TOverride extends ViewSchemaPartial,
->(gl: WebGLRenderingContext, vertex: TVertex, fragment: TFragment, overrideSchema?: TOverride) {
-  const _vertex = resolveGLSLTag(vertex) as { template: string; schema: ViewSchema }
-  const _fragment = resolveGLSLTag(fragment) as { template: string; schema: ViewSchema }
+  TSchema extends ViewSchemaPartial,
+>(
+  gl: WebGLRenderingContext,
+  vertex: TVertex,
+  fragment: TFragment,
+  options?: CompileOptions<TSchema> | undefined,
+) {
+  const _vertex = resolveGLSLTag(vertex, options) as { template: string; schema: ViewSchema }
+  const _fragment = resolveGLSLTag(fragment, options) as { template: string; schema: ViewSchema }
 
   const schema = {
     uniforms: {
@@ -117,32 +129,40 @@ export function compile<
     },
   }
 
-  for (const kind in overrideSchema) {
+  // Deep merge options.schema with generated schema
+  for (const kind in options?.schema) {
     const schemaKind = schema[kind as keyof typeof schema]
-    const overrideSchemaKind = overrideSchema[kind]
+    const configSchemaKind = options?.schema[kind]
 
-    for (const key in overrideSchemaKind) {
+    for (const key in configSchemaKind) {
       schemaKind[key] = {
         ...schemaKind[key],
-        ...overrideSchemaKind[key],
+        ...configSchemaKind[key],
       }
     }
   }
 
-  const program = createProgram(gl, _vertex.template, _fragment.template)
-
-  return {
-    program,
-    schema,
-    view: view(gl, program, schema),
-    vertex: _vertex.template,
-    fragment: _fragment.template,
-  } as unknown as Prettify<CompileResult<TVertex, TFragment, TOverride>>
+  try {
+    const program = createProgram(gl, _vertex.template, _fragment.template)
+
+    return {
+      program,
+      schema,
+      view: view(gl, program, schema),
+      vertex: _vertex.template,
+      fragment: _fragment.template,
+    } as unknown as Prettify<CompileResult<TVertex, TFragment, TSchema>>
+  } catch (error) {
+    console.error('Error while creating WebGLProgram - vertex\n\n', _vertex.template)
+    console.error('Error while creating WebGLProgram - fragment\n\n', _fragment.template)
+
+    throw error
+  }
 }
 
-function resolveGLSLTag<TTag extends GLSL>(tag: TTag) {
+function resolveGLSLTag<TTag extends GLSL>(tag: TTag, options?: { webgl2?: boolean }) {
   return {
-    template: compile.toString(tag),
+    template: compile.toString(tag, options),
     schema: compile.toSchema(tag),
   }
 }
@@ -154,13 +174,13 @@ compile.toSchema = function <TTag extends GLSL>(tag: TTag) {
     interleavedAttributes: {},
   }
 
-  function handleSlot(slot: GLSLSlot) {
-    if (Array.isArray(slot)) {
-      slot.forEach(handleSlot)
+  tag.slots.forEach(function handleSlot(slot: GLSLSlot) {
+    if (typeof slot !== 'object') {
       return
     }
 
-    if (typeof slot !== 'object') {
+    if (Array.isArray(slot)) {
+      slot.forEach(handleSlot)
       return
     }
 
@@ -187,49 +207,97 @@ compile.toSchema = function <TTag extends GLSL>(tag: TTag) {
 
     // @ts-expect-error
     result[`${type}s`][name] = rest
-  }
-
-  tag.slots.forEach(handleSlot)
+  })
 
   return result as unknown as Prettify<GLSLToSchema<TTag>>
 }
 
-compile.toString = function <TTag extends GLSL>({ template: [initial, ...rest], slots }: TTag) {
-  const v300 = !!initial?.startsWith('#version 300 es')
+compile.toString = function <TTag extends GLSL>(
+  { template: [initial, ...rest], slots }: TTag,
+  config?: { webgl2?: boolean },
+) {
+  const v300 = config?.webgl2 ?? !!initial?.startsWith('#version 300 es')
 
   let template = initial ?? ''
 
   for (let i = 0; i < rest.length; i++) {
-    template += `${glslSlotToString(slots[i]!, v300)}${rest[i]}`
+    template += `${resolveGlslSlotToString(slots[i]!, v300)}${rest[i]}`
   }
 
   return template
 }
 
-function glslSlotToString(slot: GLSLSlot, v300: boolean): string {
+function resolveGlslSlotToString(slot: GLSLSlot, v300: boolean): string {
   if (typeof slot !== 'object') {
     return toID(slot)
   }
 
   if (Array.isArray(slot)) {
-    return slot.map(slot => glslSlotToString(slot, v300)).join('')
+    return slot.map(slot => resolveGlslSlotToString(slot, v300)).join('')
   }
 
-  if (slot.type === 'glsl') {
-    return compile.toString(slot)
+  switch (slot.type) {
+    case 'glsl':
+      return compile.toString(slot)
+    case 'interleavedAttribute':
+      return slot.layout.reduce(
+        (a, v) =>
+          v300 ? `${a}in ${v.kind} ${toID(v.key)};\n` : `${a}attribute ${v.kind} ${toID(v.key)};\n`,
+        '',
+      )
+    case 'uniform':
+      if ('size' in slot) {
+        return `${slot.type} ${slot.kind} ${toID(slot.key)}[${slot.size}];`
+      }
+      return `${slot.type} ${slot.kind} ${toID(slot.key)};`
   }
 
-  if (slot.type === 'interleavedAttribute') {
-    return slot.layout.reduce(
-      (a, v) =>
-        v300 ? `${a}in ${v.kind} ${toID(v.key)};\n` : `${a}attribute ${v.kind} ${toID(v.key)};\n`,
-      '',
-    )
+  if (slot.type === 'attribute') {
+    return `${v300 ? 'in' : slot.type} ${slot.kind} ${toID(slot.key)};`
   }
 
-  if (slot.type === 'uniform' && 'size' in slot) {
-    return `${slot.type} ${slot.kind} ${toID(slot.key)}[${slot.size}];`
-  }
+  throw new Error(`Unexpected slot: ${JSON.stringify(slot)}`)
+}
+
+const QUAD_FLOAT_ARRAY = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1])
+const QUAD_BUFFER_MAP = createUpsertMap(WeakMap<GL, WebGLBuffer>)
+
+compile.toQuad = function <TFragment extends GLSL, TSchema extends ViewSchemaPartial>(
+  gl: GL,
+  fragment: TFragment,
+  options?: CompileOptions<TSchema>,
+) {
+  const buffer = QUAD_BUFFER_MAP.getOrInsert(gl, gl.createBuffer.bind(gl))
+
+  const webgl2 = options?.webgl2 ?? fragment.template[0]?.startsWith('#version 300 es')
+
+  const vertex = webgl2
+    ? glsl`#version 300 es
+precision mediump float;
+
+${attribute.vec2('a_quad', { buffer })}
+
+out vec2 v_uv;
+
+void main() {
+  v_uv = a_quad;
+  gl_Position = vec4(v_uv, 0.0, 1.0);
+}`
+    : glsl`precision mediump float;
+
+${attribute.vec2('a_quad', { buffer })}
+
+varying vec2 v_uv;
+
+void main() {
+  v_uv = a_quad;
+  gl_Position = vec4(v_uv, 0.0, 1.0);
+}`
+
+  const result = compile(gl, vertex, fragment, options)
+
+  // @ts-expect-error
+  result.view.attributes.a_quad.set(QUAD_FLOAT_ARRAY)
 
-  return `${slot.type === 'attribute' && v300 ? 'in' : slot.type} ${slot.kind} ${toID(slot.key)};`
+  return result
 }

package/src/types.ts

@@ -416,7 +416,7 @@ export interface AttributeMethods<T = AttributeKind> {
 }
 
 export type AttributeView<T extends AttributeSchema> = {
-  [K in keyof T]: AttributeMethods<T[K]['kind']>
+  [K in keyof T]: Prettify<AttributeMethods<T[K]['kind']>>
 }
 
 /**********************************************************************************/
@@ -635,12 +635,12 @@ export interface ViewSchemaPartial {
 export type View<T extends ViewSchema = ViewSchema> = {
   attributes: T['attributes'] extends AttributeSchema
     ? Prettify<AttributeView<T['attributes']>>
-    : never
+    : {}
   interleavedAttributes: T['interleavedAttributes'] extends InterleavedAttributeSchema
     ? Prettify<InterleavedAttributeView<T['interleavedAttributes']>>
-    : never
-  buffers: T['buffers'] extends BufferSchema ? Prettify<BufferView<T['buffers']>> : never
-  uniforms: T['uniforms'] extends UniformSchema ? Prettify<UniformView<T['uniforms']>> : never
+    : {}
+  buffers: T['buffers'] extends BufferSchema ? Prettify<BufferView<T['buffers']>> : {}
+  uniforms: T['uniforms'] extends UniformSchema ? Prettify<UniformView<T['uniforms']>> : {}
 }
 
 /**********************************************************************************/
@@ -703,7 +703,7 @@ export interface AttributeToken<
 > {
   type: 'attribute'
   kind: TKind
-  instanced: TInstanced
+  instanced: TInstanced extends boolean ? boolean : false
   key: TKey
 }
 
@@ -768,26 +768,40 @@ type _FlattenSlots<T extends Array<GLSLSlot>> = T extends [infer First, ...infer
 export type MergeGLSLSchema<
   TVertex extends ViewSchema,
   TFragment extends ViewSchema,
-  TOverrides extends ViewSchemaPartial = {},
-> = {
-  uniforms: DeepMerge<
-    [ShallowMerge<[TVertex['uniforms'], TFragment['uniforms']]>, TOverrides['uniforms']]
-  >
-  attributes: DeepMerge<
-    [ShallowMerge<[TVertex['attributes'], TFragment['attributes']]>, TOverrides['attributes']]
-  >
-  interleavedAttributes: DeepMerge<
-    [
-      ShallowMerge<[TVertex['interleavedAttributes'], TFragment['interleavedAttributes']]>,
-      TOverrides['interleavedAttributes'],
-    ]
-  >
-}
+  TOverrides extends ViewSchemaPartial | undefined = {},
+> = TOverrides extends ViewSchemaPartial
+  ? {
+      uniforms: Prettify<
+        DeepMerge<
+          [ShallowMerge<[TVertex['uniforms'], TFragment['uniforms']]>, TOverrides['uniforms']]
+        >
+      >
+      attributes: Prettify<
+        DeepMerge<
+          [ShallowMerge<[TVertex['attributes'], TFragment['attributes']]>, TOverrides['attributes']]
+        >
+      >
+      interleavedAttributes: Prettify<
+        DeepMerge<
+          [
+            ShallowMerge<[TVertex['interleavedAttributes'], TFragment['interleavedAttributes']]>,
+            TOverrides['interleavedAttributes'],
+          ]
+        >
+      >
+    }
+  : {
+      uniforms: Prettify<ShallowMerge<[TVertex['uniforms'], TFragment['uniforms']]>>
+      attributes: Prettify<ShallowMerge<[TVertex['attributes'], TFragment['attributes']]>>
+      interleavedAttributes: Prettify<
+        ShallowMerge<[TVertex['interleavedAttributes'], TFragment['interleavedAttributes']]>
+      >
+    }
 
 export type CompileResult<
   TVertex extends GLSL,
   TFragment extends GLSL,
-  TOverrideSchema extends ViewSchemaPartial,
+  TOverrideSchema extends ViewSchemaPartial | undefined,
 > =
   MergeGLSLSchema<
     GLSLToSchema<TVertex>,

package/src/utils/index.ts

@@ -8,57 +8,11 @@ import type {
   UniformKind,
 } from '../types'
 
-export * as ObjectUtils from './object'
-
 export function assertedNotNullish<T>(value: T, message?: string): NonNullable<T> {
   if (value === undefined || value === null) throw new Error(message)
   return value
 }
 
-function createGLShader(gl: GL, type: number, source: string): WebGLShader {
-  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
-}
-
-export function createProgram(gl: GL, vertexSource: string, fragmentSource: string): WebGLProgram {
-  const program = gl.createProgram()
-  if (!program) throw new Error('Failed to create WebGL program')
-
-  const vertexShader = createGLShader(gl, gl.VERTEX_SHADER, vertexSource)
-  const fragmentShader = createGLShader(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}`)
-  }
-
-  // Clean up shaders after linking
-  gl.deleteShader(vertexShader)
-  gl.deleteShader(fragmentShader)
-
-  return program
-}
-
 /**********************************************************************************/
 /*                                                                                */
 /*                              Kind To Uniform Name                              */