glre 0.34.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
         "name": "glre",
-        "version": "0.34.0",
+        "version": "0.35.0",
         "author": "tseijp",
         "license": "MIT",
         "private": false,

package/src/index.ts

@@ -45,9 +45,10 @@ const defaultVertex = () =>
         )
 
 export const createGL = (props?: Partial<GL>) => {
-        const gl = event<Partial<GL>>({
+        const gl = event({
                 isNative: false,
                 isWebGL: true,
+                isError: false,
                 isLoop: true,
                 isGL: true,
                 size: [0, 0],
@@ -55,6 +56,12 @@ export const createGL = (props?: Partial<GL>) => {
                 count: 6,
                 webgl: {},
                 webgpu: {},
+                loading: 0,
+                error() {
+                        gl.isError = true
+                        gl.isLoop = false
+                        gl.clean()
+                },
         }) as EventState<GL>
 
         gl.queue = createQueue()
@@ -72,10 +79,12 @@ export const createGL = (props?: Partial<GL>) => {
                 if (gl.isWebGL) {
                         gl((await webgl(gl)) as GL)
                 } else gl((await webgpu(gl)) as GL)
+                if (gl.isError) return // stop if error
                 gl.resize()
                 gl.frame(() => {
                         gl.loop()
                         gl.queue.flush()
+                        if (gl.loading) return true // wait for textures @TODO FIX
                         gl.render()
                         return gl.isLoop
                 })
@@ -86,7 +95,6 @@ export const createGL = (props?: Partial<GL>) => {
 
         gl('clean', () => {
                 gl.frame.stop()
-                gl.frame.clean(gl.render)
                 if (gl.isNative) return
                 window.removeEventListener('resize', gl.resize)
                 gl.el.removeEventListener('mousemove', gl.mousemove)

package/src/node/code.ts

@@ -32,7 +32,7 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (is.bol(target)) return target ? 'true' : 'false'
         if (!target) return ''
         const { type, props } = target
-        const { id = '', children = [], fields, initialValues } = props
+        const { id = 'i', children = [], fields, initialValues } = props
         const [x, y, z, w] = children
         /**
          * variables
@@ -49,8 +49,10 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
                 return `(${code(y, c)} ${getOperator(x)} ${code(z, c)})`
         }
         if (type === 'function') {
-                if (x === 'negate') return `(-${parseArray(children.slice(1), c)})`
+                if (x === 'negate') return `(-${code(y, c)})`
+                if (x === 'oneMinus') return `(1.0-${code(y, c)})`
                 if (x === 'texture') return parseTexture(c, y, z, w)
+                if (x === 'atan2' && c.isWebGL) return `atan(${code(y, c)}, ${code(z, c)})`
                 return `${x}(${parseArray(children.slice(1), c)})`
         }
         /**
@@ -61,8 +63,8 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (type === 'return') return `return ${code(x, c)};`
         if (type === 'loop')
                 return c.isWebGL
-                        ? `for (int i = 0; i < ${code(x, c)}; i += 1) {\n${code(y, c)}\n}`
-                        : `for (var i: i32 = 0; i < ${code(x, c)}; i++) {\n${code(y, c)}\n}`
+                        ? `for (int ${id} = 0; ${id} < ${code(x, c)}; ${id} += 1) {\n${code(y, c)}\n}`
+                        : `for (var ${id}: i32 = 0; ${id} < ${code(x, c)}; ${id}++) {\n${code(y, c)}\n}`
         if (type === 'if') return parseIf(c, x, y, children)
         if (type === 'switch') return parseSwitch(c, x, children)
         if (type === 'declare') return parseDeclare(c, x, y)

package/src/node/index.ts

@@ -2,7 +2,7 @@ import { is } from '../utils/helpers'
 import { code } from './code'
 import { builtin, conversion as c, function_ as f, uniform as u } from './node'
 import { hex2rgb, sortHeadersByDependencies } from './utils'
-import type { Constants as C, NodeContext, X, Vec2, Float } from './types'
+import type { Constants as C, NodeContext, X, Vec2, Float, NodeProxy } from './types'
 export * from './code'
 export * from './node'
 export * from './scope'
@@ -56,7 +56,7 @@ export const vertex = (x: X, c: NodeContext) => {
         }
         ret.push('}')
         const main = ret.filter(Boolean).join('\n').trim()
-        console.log(`↓↓↓generated↓↓↓\n${main}`)
+        // console.log(`↓↓↓generated↓↓↓\n${main}`)
         return main
 }
 
@@ -79,7 +79,7 @@ export const fragment = (x: X, c: NodeContext) => {
         }
         ret.push('}')
         const main = ret.filter(Boolean).join('\n').trim()
-        console.log(`↓↓↓generated↓↓↓\n${main}`)
+        // console.log(`↓↓↓generated↓↓↓\n${main}`)
         return main
 }
 
@@ -219,3 +219,4 @@ export const difference = <T extends C>(x: X<T>, y: X) => f<T>('difference', x,
 export const equals = (x: X, y: X) => f<'bool'>('equals', x, y)
 export const faceforward = <T extends C>(N: X<T>, I: X, Nref: X) => f<T>('faceforward', N, I, Nref)
 export const transformDirection = <T extends C>(dir: X<T>, matrix: X) => f<T>('transformDirection', dir, matrix)
+export const mod = <T extends C>(x: NodeProxy<T>, y: X<T>) => x.sub(x.div(y).floor().mul(y))

package/src/node/parse.ts

@@ -58,37 +58,6 @@ export const parseDeclare = (c: NodeContext, x: X, y: X) => {
         return `var ${varName}: ${wgslType} = ${code(x, c)};`
 }
 
-export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Constants) => {
-        const { id, children = [], layout } = props
-        const [x, ...args] = children
-        const argParams: [name: string, type: string][] = []
-        const params: string[] = []
-        if (layout?.inputs)
-                for (const input of layout.inputs) {
-                        argParams.push([input.name, input.type])
-                }
-        else
-                for (let i = 0; i < args.length; i++) {
-                        argParams.push([`p${i}`, infer(args[i], c)])
-                }
-        const ret = []
-        if (c?.isWebGL) {
-                for (const [paramId, type] of argParams) {
-                        addDependency(c, id!, type)
-                        params.push(`${type} ${paramId}`)
-                }
-                addDependency(c, id!, returnType)
-                ret.push(`${returnType} ${id}(${params}) {`)
-        } else {
-                for (const [paramId, type] of argParams) params.push(`${paramId}: ${formatConversions(type, c)}`)
-                ret.push(`fn ${id}(${params}) -> ${formatConversions(returnType, c)} {`)
-        }
-        const scopeCode = code(x, c)
-        if (scopeCode) ret.push(scopeCode)
-        ret.push('}')
-        return ret.join('\n')
-}
-
 export const parseStructHead = (c: NodeContext, id: string, fields: Record<string, NodeProxy> = {}) => {
         const lines: string[] = []
         for (const key in fields) {
@@ -123,6 +92,40 @@ export const parseStruct = (
         }
 }
 
+/**
+ * define
+ */
+export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Constants) => {
+        const { id, children = [], layout } = props
+        const [x, ...args] = children
+        const argParams: [name: string, type: string][] = []
+        const params: string[] = []
+        if (layout?.inputs)
+                for (const input of layout.inputs) {
+                        argParams.push([input.name, input.type])
+                }
+        else
+                for (let i = 0; i < args.length; i++) {
+                        argParams.push([`p${i}`, infer(args[i], c)])
+                }
+        const ret = []
+        if (c?.isWebGL) {
+                for (const [paramId, type] of argParams) {
+                        addDependency(c, id!, type)
+                        params.push(`${type} ${paramId}`)
+                }
+                addDependency(c, id!, returnType)
+                ret.push(`${returnType} ${id}(${params}) {`)
+        } else {
+                for (const [paramId, type] of argParams) params.push(`${paramId}: ${formatConversions(type, c)}`)
+                ret.push(`fn ${id}(${params}) -> ${formatConversions(returnType, c)} {`)
+        }
+        const scopeCode = code(x, c)
+        if (scopeCode) ret.push(scopeCode)
+        ret.push('}')
+        return ret.join('\n')
+}
+
 /**
  * headers
  */

package/src/node/scope.ts

@@ -82,8 +82,9 @@ export const If = (x: NodeProxy, fun: () => void) => {
 
 export const Loop = (x: NodeProxy, fun: (params: { i: Int }) => void) => {
         const y = node('scope')
-        scoped(y, () => fun({ i: node<'int'>('variable', { id: 'i', inferFrom: [conversion('int', 0)] }) }))
-        const ret = node('loop', null, x, y)
+        const id = getId()
+        scoped(y, () => fun({ i: node<'int'>('variable', { id, inferFrom: [conversion('int', 0)] }) }))
+        const ret = node('loop', { id }, x, y)
         addToScope(ret)
         return ret
 }

package/src/node/utils.ts

@@ -46,7 +46,7 @@ export const hex2rgb = (hex: number) => {
 
 let count = 0
 
-export const getId = () => `i${count++}`
+export const getId = () => `x${count++}`
 
 export const formatConversions = <T extends Constants>(x: X<T>, c?: NodeContext) => {
         if (!is.str(x)) return ''
@@ -79,7 +79,7 @@ export const getEventFun = (c: NodeContext, id: string, isAttribute = false, isT
 }
 
 export const safeEventCall = <T extends Constants>(x: X<T>, fun: (value: unknown) => void) => {
-        if (!x) return
+        if (is.und(x)) return
         if (!isNodeProxy(x)) return fun(x) // for uniform(1)
         if (x.type !== 'conversion') return
         const value = x.props.children?.slice(1).filter(Boolean)

package/src/types.ts

@@ -59,20 +59,22 @@ export type GL = EventState<{
          */
         isNative: boolean
         isWebGL: boolean
+        isError: boolean
         isLoop: boolean
         isGL: true
-        width: number
-        height: number
+        width?: number
+        height?: number
         size: [number, number]
         mouse: [number, number]
         count: number
+        loading: number
         el: HTMLCanvasElement
-        vs: string | Vec4
-        fs: string | Vec4
-        vert: string | Vec4
-        frag: string | Vec4
-        vertex: string | Vec4
-        fragment: string | Vec4
+        vs?: string | Vec4
+        fs?: string | Vec4
+        vert?: string | Vec4
+        frag?: string | Vec4
+        vertex?: string | Vec4
+        fragment?: string | Vec4
 
         /**
          * core state
@@ -86,13 +88,13 @@ export type GL = EventState<{
          * events
          */
         ref?: any
-        init(): void
-        loop(): void
         mount(): void
         clean(): void
+        error(e?: string): void
         render(): void
         resize(e?: Event): void
         mousemove(e: Event): void
+        loop(): void
 
         /**
          * setter

package/src/utils/program.ts

@@ -1,27 +1,26 @@
-const createShader = (c: WebGLRenderingContext, source: string, type: number) => {
+const createShader = (c: WebGLRenderingContext, source: string, type: number, onError = console.warn) => {
         const shader = c.createShader(type)
-        if (!shader) throw new Error('Failed to create shader')
+        if (!shader) return onError('Failed to create shader')
         c.shaderSource(shader, source.trim())
         c.compileShader(shader)
         if (c.getShaderParameter(shader, c.COMPILE_STATUS)) return shader
         const error = c.getShaderInfoLog(shader)
         c.deleteShader(shader)
-        console.warn(`Could not compile shader: ${error}`)
+        onError(`Could not compile shader: ${error}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, vert: string, frag: string, onError = () => {}) => {
+export const createProgram = (c: WebGLRenderingContext, vert: string, frag: string, onError = console.warn) => {
         const pg = c.createProgram()
-        const fs = createShader(c, frag, c.FRAGMENT_SHADER)
-        const vs = createShader(c, vert, c.VERTEX_SHADER)
-        if (!fs || !vs) return onError()
-        c.attachShader(pg, vs)
-        c.attachShader(pg, fs)
+        const fs = createShader(c, frag, c.FRAGMENT_SHADER, onError)
+        const vs = createShader(c, vert, c.VERTEX_SHADER, onError)
+        if (!fs || !vs) return
+        c.attachShader(pg, vs!)
+        c.attachShader(pg, fs!)
         c.linkProgram(pg)
         if (c.getProgramParameter(pg, c.LINK_STATUS)) return pg
         const error = c.getProgramInfoLog(pg)
         c.deleteProgram(pg)
-        onError()
-        console.warn(`Could not link program: ${error}`)
+        onError(`Could not link program: ${error}`)
 }
 
 export const createVbo = (c: WebGLRenderingContext, data: number[]) => {

package/src/webgl.ts

@@ -4,24 +4,29 @@ import { is } from './utils/helpers'
 import { createAttrib, createIbo, createProgram, createTexture, createVbo, getStride } from './utils/program'
 import type { GL, WebGLState } from './types'
 
-export const webgl = async (gl: Partial<GL>) => {
+export const webgl = async (gl: GL) => {
         const c = gl.el!.getContext('webgl2')!
         const config = { isWebGL: true, gl }
         const fs = fragment(gl.fs, config)
         const vs = vertex(gl.vs, config)
-        const pg = createProgram(c, vs, fs, () => void (gl.isLoop = false))!
+        const pg = createProgram(c, vs, fs, gl.error)!
         c.useProgram(pg)
 
-        let _activeUnit = 0
+        let activeUnit = 0
         const uniforms = cached((key) => c.getUniformLocation(pg, key))
         const attribs = cached((key) => c.getAttribLocation(pg, key))
-        const units = cached(() => _activeUnit++)
+        const units = cached(() => activeUnit++)
 
-        const clean = () => c.deleteProgram(pg)
+        const clean = () => {
+                c.deleteProgram(pg)
+                c.getExtension('WEBGL_lose_context')?.loseContext()
+                gl.el.width = 1
+                gl.el.height = 1
+        }
 
         const render = () => {
                 c.clear(c.COLOR_BUFFER_BIT)
-                c.viewport(0, 0, ...gl.size!)
+                c.viewport(0, 0, ...gl.size)
                 c.drawArrays(c.TRIANGLES, 0, 3)
         }
 
@@ -29,7 +34,7 @@ export const webgl = async (gl: Partial<GL>) => {
                 const loc = attribs(key, true)
                 const vbo = createVbo(c, value)
                 const ibo = createIbo(c, iboValue)
-                const str = getStride(gl.count!, value, iboValue)
+                const str = getStride(gl.count, value, iboValue)
                 createAttrib(c, str, loc, vbo, ibo)
         }
 
@@ -43,14 +48,18 @@ export const webgl = async (gl: Partial<GL>) => {
         }
 
         const _texture = (key: string, src: string) => {
+                gl.loading++
                 const image = new Image()
                 Object.assign(image, { src, crossOrigin: 'anonymous' })
                 image.decode().then(() => {
                         const loc = uniforms(key)
                         const unit = units(key)
                         createTexture(c, image, loc, unit)
+                        gl.loading--
                 })
         }
 
-        return { render, clean, _attribute, _uniform, _texture, webgl: { context: c, program: pg } as WebGLState }
+        const webgl: WebGLState = { context: c, program: pg }
+
+        return { webgl, render, clean, _attribute, _uniform, _texture }
 }

package/src/webgpu.ts

@@ -15,14 +15,14 @@ import {
 import type { GL, WebGPUState } from './types'
 import { fragment, vertex } from './node'
 
-export const webgpu = async (gl: Partial<GL>) => {
+export const webgpu = async (gl: GL) => {
         const context = gl.el!.getContext('webgpu') as GPUCanvasContext
         const { device, format } = await createDevice(context)
+        device.onuncapturederror = (e) => gl.error(e.error.message)
         const bindings = createBindings()
         let frag: string
         let vert: string
         let flush = (_pass: GPURenderPassEncoder) => {}
-        let imageLoading = 0
         let needsUpdate = true
         let depthTexture: GPUTexture
 
@@ -42,7 +42,7 @@ export const webgpu = async (gl: Partial<GL>) => {
 
         const attribs = cached((_key, value: number[]) => {
                 needsUpdate = true
-                const stride = value.length / gl.count!
+                const stride = value.length / gl.count
                 const { location } = bindings.attrib()
                 const { array, buffer } = createAttribBuffer(device, value)
                 return { array, buffer, location, stride }
@@ -60,7 +60,7 @@ export const webgpu = async (gl: Partial<GL>) => {
                         pass.setPipeline(pipeline)
                         bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
                         vertexBuffers.forEach((v, i) => pass.setVertexBuffer(i, v))
-                        pass.draw(gl.count!, 1, 0, 0)
+                        pass.draw(gl.count, 1, 0, 0)
                         pass.end()
                 }
         }
@@ -71,7 +71,7 @@ export const webgpu = async (gl: Partial<GL>) => {
                         frag = fragment(gl.fs, config)
                         vert = vertex(gl.vs, config)
                 }
-                if (imageLoading) return // MEMO: loading after build node
+                if (gl.loading) return // MEMO: loading after build node
                 if (needsUpdate) update()
                 needsUpdate = false
                 const encoder = device.createCommandEncoder()
@@ -86,7 +86,11 @@ export const webgpu = async (gl: Partial<GL>) => {
         }
 
         const clean = () => {
+                device.destroy()
                 depthTexture?.destroy()
+                for (const { texture } of textures.map.values()) texture.destroy()
+                for (const { buffer } of uniforms.map.values()) buffer.destroy()
+                for (const { buffer } of attribs.map.values()) buffer.destroy()
         }
 
         const _attribute = (key = '', value: number[]) => {
@@ -103,13 +107,13 @@ export const webgpu = async (gl: Partial<GL>) => {
         }
 
         const _texture = (key: string, src: string) => {
-                imageLoading++
+                gl.loading++
                 const source = Object.assign(new Image(), { src, crossOrigin: 'anonymous' })
                 source.decode().then(() => {
                         const { width, height } = source
                         const { texture } = textures(key, width, height)
                         device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
-                        imageLoading--
+                        gl.loading--
                 })
         }