glre 0.16.0 → 0.18.0

package/index.ts

@@ -36,6 +36,84 @@ let iTime = performance.now(),
         iDeltaTime = 0
 
 export const createGL = (props?: Partial<GL>) => {
+        const init = () => {
+                self(props)
+                const gl = self.gl
+                const _v = self.vs || self.vert || self.vertex
+                const _f = self.fs || self.frag || self.fragment
+                const vs = createShader(gl, _v, gl.VERTEX_SHADER)
+                const fs = createShader(gl, _f, gl.FRAGMENT_SHADER)
+                if (self.count === 6) self.attribute({ a_position })
+                frame(() => void self.render() || 1)
+                self.pg = self.varying
+                        ? createTfProgram(gl, vs, fs, self.varying)
+                        : createProgram(gl, vs, fs)
+                self.lastActiveUnit = 0
+                self.activeUnit = nested(() => self.lastActiveUnit++)
+                self.location = nested((key, isAttribute = false) => {
+                        return isAttribute
+                                ? gl?.getAttribLocation(self.pg, key)
+                                : gl?.getUniformLocation(self.pg, key)
+                })
+        }
+
+        const render = () => {
+                self.gl.useProgram(self.pg)
+                self.frame.flush()
+                iPrevTime = iTime
+                iTime = performance.now() / 1000
+                iDeltaTime = iTime - iPrevTime
+                self.uniform({ iTime, iPrevTime, iDeltaTime })
+        }
+
+        const resize = (
+                _e: any,
+                width = self.width || window.innerWidth,
+                height = self.height || window.innerHeight
+        ) => {
+                self.size[0] = self.el.width = width
+                self.size[1] = self.el.height = height
+                self.uniform('iResolution', self.size)
+        }
+
+        const mousemove = (_e: any, x = _e.clientX, y = _e.clientY) => {
+                const [w, h] = self.size
+                const { top, left } = self.el.getBoundingClientRect()
+                self.mouse[0] = (x - top - w / 2) / (w / 2)
+                self.mouse[1] = -(y - left - h / 2) / (h / 2)
+                self.uniform('iMouse', self.mouse)
+        }
+
+        const load = (_: any, image: any) => {
+                self.frame(() => {
+                        const loc = self.location(image.alt)
+                        const unit = self.activeUnit(image.alt)
+                        const tex = createTexture(self.gl, image)
+                        self.frame(() => {
+                                activeTexture(self.gl, loc, unit, tex)
+                                return true
+                        })
+                })
+        }
+
+        const clear = (key = 'COLOR_BUFFER_BIT') => {
+                self.gl.clear(self.gl[key])
+        }
+
+        const viewport = (size: number[] = self.size) => {
+                self.gl.viewport(0, 0, ...size)
+        }
+
+        const drawArrays = (mode = 'TRIANGLES') => {
+                self.gl.drawArrays(self.gl[mode], 0, self.count)
+        }
+
+        const drawElements = (mode = 'TRIANGLES', type = 'UNSIGNED_SHORT') => {
+                mode = self.gl[mode]
+                type = self.gl[type]
+                self.gl.drawElements(mode, self.count, type, 0)
+        }
+
         const self = event<Partial<GL>>({
                 vertex: _defaultVertex,
                 fragment: _defaultFragment,
@@ -43,106 +121,57 @@ export const createGL = (props?: Partial<GL>) => {
                 mouse: [0, 0],
                 count: 6,
                 counter: 0,
-                init() {
-                        self(props)
-                        const gl = self.gl
-                        const _v = self.vs || self.vert || self.vertex
-                        const _f = self.fs || self.frag || self.fragment
-                        const vs = createShader(gl, _v, gl.VERTEX_SHADER)
-                        const fs = createShader(gl, _f, gl.FRAGMENT_SHADER)
-                        if (self.count === 6) self.attribute({ a_position })
-                        frame(() => void self.render() || 1)
-                        self.pg = self.varying
-                                ? createTfProgram(gl, vs, fs, self.varying)
-                                : createProgram(gl, vs, fs)
-                        self.lastActiveUnit = 0
-                        self.activeUnit = nested(() => self.lastActiveUnit++)
-                        self.location = nested((key, isAttribute = false) => {
-                                return isAttribute
-                                        ? gl?.getAttribLocation(self.pg, key)
-                                        : gl?.getUniformLocation(self.pg, key)
-                        })
-                },
-                render() {
-                        self.gl.useProgram(self.pg)
-                        self.frame.flush()
-                        iPrevTime = iTime
-                        iTime = performance.now() / 1000
-                        iDeltaTime = iTime - iPrevTime
-                        self.uniform({ iTime, iPrevTime, iDeltaTime })
-                },
-                _uniform(key: string, value = 0, isMatrix = false) {
-                        const type = uniformType(value, isMatrix)
-                        self.frame(() => {
-                                const loc = self.location(key)
-                                if (isMatrix) self.gl[type](loc, false, value)
-                                else self.gl[type](loc, value)
-                        })
-                },
-                _attribute(key: string, value: number[], iboValue?: number[]) {
-                        self.frame(() => {
-                                const loc = self.location(key, true)
-                                const vbo = createVbo(self.gl, value)
-                                const ibo = createIbo(self.gl, iboValue)
-                                const n = self.count
-                                const stride = vertexStride(n, value, iboValue)
-                                createAttribute(self.gl, stride, loc, vbo, ibo)
-                        })
-                },
-                _texture(alt: string, src: string, crossOrigin = 'anonymous') {
-                        if (typeof window === 'undefined') return
-                        const image = new Image()
-                        const callback = (_: any) => self.load(_, image)
-                        image.addEventListener('load', callback, false)
-                        Object.assign(image, { src, alt, crossOrigin })
-                },
-                resize(
-                        _e: any,
-                        width = self.width || window.innerWidth,
-                        height = self.height || window.innerHeight
-                ) {
-                        self.size[0] = self.el.width = width
-                        self.size[1] = self.el.height = height
-                        self.uniform('iResolution', self.size)
-                },
-                mousemove(_e: any, x = _e.clientX, y = _e.clientY) {
-                        const [w, h] = self.size
-                        const { top, left } = self.el.getBoundingClientRect()
-                        self.mouse[0] = (x - top - w / 2) / (w / 2)
-                        self.mouse[1] = -(y - left - h / 2) / (h / 2)
-                        self.uniform('iMouse', self.mouse)
-                },
-                load(_: any, image: any) {
-                        self.frame(() => {
-                                const loc = self.location(image.alt)
-                                const unit = self.activeUnit(image.alt)
-                                const tex = createTexture(self.gl, image)
-                                self.frame(() => {
-                                        activeTexture(self.gl, loc, unit, tex)
-                                        return true
-                                })
-                        })
-                },
-                clear(key = 'COLOR_BUFFER_BIT') {
-                        self.gl.clear(self.gl[key])
-                },
-                viewport(size: number[] = self.size) {
-                        self.gl.viewport(0, 0, ...size)
-                },
-                drawArrays(mode = 'TRIANGLES') {
-                        self.gl.drawArrays(self.gl[mode], 0, self.count)
-                },
-                drawElements(mode = 'TRIANGLES', type = 'UNSIGNED_SHORT') {
-                        mode = self.gl[mode]
-                        type = self.gl[type]
-                        self.gl.drawElements(mode, self.count, type, 0)
-                },
+                init,
+                render,
+                resize,
+                mousemove,
+                load,
+                clear,
+                viewport,
+                drawArrays,
+                drawElements,
         }) as GL
 
+        const _texture = (
+                alt: string,
+                src: string,
+                crossOrigin = 'anonymous'
+        ) => {
+                if (typeof window === 'undefined') return
+                const image = new Image()
+                const callback = (_: any) => self.load(_, image)
+                image.addEventListener('load', callback, false)
+                Object.assign(image, { src, alt, crossOrigin })
+        }
+
+        const _uniform = (key: string, value = 0, isMatrix = false) => {
+                const type = uniformType(value, isMatrix)
+                self.frame(() => {
+                        const loc = self.location(key)
+                        if (isMatrix) self.gl[type](loc, false, value)
+                        else self.gl[type](loc, value)
+                })
+        }
+
+        const _attribute = (
+                key: string,
+                value: number[],
+                iboValue?: number[]
+        ) => {
+                self.frame(() => {
+                        const loc = self.location(key, true)
+                        const vbo = createVbo(self.gl, value)
+                        const ibo = createIbo(self.gl, iboValue)
+                        const n = self.count
+                        const stride = vertexStride(n, value, iboValue)
+                        createAttribute(self.gl, stride, loc, vbo, ibo)
+                })
+        }
+
         self.frame = queue()
-        self.texture = durable(self._texture)
-        self.uniform = durable(self._uniform)
-        self.attribute = durable(self._attribute)
+        self.texture = durable(_texture)
+        self.uniform = durable(_uniform)
+        self.attribute = durable(_attribute)
 
         return self
 }
@@ -150,22 +179,24 @@ export const createGL = (props?: Partial<GL>) => {
 export const gl = createGL()
 
 export const createTF = (props?: Partial<GL>, self = gl) => {
+        const mount = () => {
+                tf(props)
+                tf.el = self.el
+                tf.gl = self.gl
+                tf.frame = self.frame
+                tf.init()
+                self({ resize: tf.resize, mousemove: tf.mousemove })
+        }
+
+        const clean = () => {
+                tf(props)
+                self({ resize: tf.resize, mousemove: tf.mousemove })
+        }
+
         const tf = createGL()
-        tf({
-                mount() {
-                        tf(props)
-                        tf.el = self.el
-                        tf.gl = self.gl
-                        tf.frame = self.frame
-                        tf.init()
-                        self({ resize: tf.resize, mousemove: tf.mousemove })
-                },
-                clean() {
-                        tf(props)
-                        self({ resize: tf.resize, mousemove: tf.mousemove })
-                },
-        })
+
+        tf({ mount, clean })
         return tf
 }
 
-export default self
+export default gl

package/native.ts

@@ -44,19 +44,19 @@ export const useTF = (props: Partial<GL>, self = gl) => {
         return tf
 }
 
-export function useTexture(props: any, self = gl) {
+export const useTexture = (props: any, self = gl) => {
         return self.texture(props)
 }
 
-export function useAttribute(props: any, self = gl) {
+export const useAttribute = (props: any, self = gl) => {
         return self.attribute(props)
 }
 
-export function useUniform(props: any, self = gl) {
+export const useUniform = (props: any, self = gl) => {
         return self.uniform(props)
 }
 
-export function useFrame(fun: Fun, self = gl) {
+export const useFrame = (fun: Fun, self = gl) => {
         const ref = useMutable(fun)
         useEffect(() => self.frame(fun), [])
         useEffect(() => () => self.frame(ref), [])

package/package.json

@@ -1,21 +1,18 @@
 {
         "name": "glre",
+        "version": "0.18.0",
         "author": "tseijp",
         "license": "MIT",
-        "version": "0.16.0",
-        "module": "index.js",
-        "types": "index.ts",
-        "main": "index.cjs.js",
-        "umd": "index.develop.js",
         "private": false,
         "sideEffect": false,
         "publishConfig": {
                 "access": "public"
         },
-        "dependencies": {
-                "reev": "0.10.0",
-                "refr": "0.3.0"
+        "bugs": {
+                "url": "https://github.com/tseijp/glre/issues"
         },
+        "repository": "tseijp/glre",
+        "homepage": "https://glre.tsei.jp",
         "keywords": [
                 "glsl",
                 "webgl",
@@ -27,6 +24,120 @@
                 "solidjs",
                 "typescript"
         ],
+        "main": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "module": "./dist/index.mjs",
+        "exports": {
+                "./packages.json": "./packages.json",
+                ".": {
+                        "types": "./dist/index.d.ts",
+                        "import": {
+                                "types": "./dist/index.d.ts",
+                                "default": "./dist/index.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/index.d.ts",
+                                "default": "./dist/index.mjs"
+                        },
+                        "require": "./dist/index.js",
+                        "default": "./dist/index.js"
+                },
+                "./*": {
+                        "types": "./dist/index.d.ts",
+                        "import": {
+                                "types": "./dist/index.d.ts",
+                                "default": "./dist/index.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/index.d.ts",
+                                "default": "./dist/index.mjs"
+                        },
+                        "require": "./dist/index.js",
+                        "default": "./dist/index.js"
+                },
+                "./react": {
+                        "types": "./dist/react.d.ts",
+                        "import": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "require": "./dist/react.js",
+                        "default": "./dist/react.js"
+                },
+                "./react/*": {
+                        "types": "./dist/react.d.ts",
+                        "import": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/react.d.ts",
+                                "default": "./dist/react.mjs"
+                        },
+                        "require": "./dist/react.js",
+                        "default": "./dist/react.js"
+                },
+                "./native": {
+                        "types": "./dist/native.d.ts",
+                        "import": {
+                                "types": "./dist/native.d.ts",
+                                "default": "./dist/native.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/native.d.ts",
+                                "default": "./dist/native.mjs"
+                        },
+                        "require": "./dist/native.js",
+                        "default": "./dist/native.js"
+                },
+                "./native/*": {
+                        "types": "./dist/native.d.ts",
+                        "import": {
+                                "types": "./dist/native.d.ts",
+                                "default": "./dist/native.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/native.d.ts",
+                                "default": "./dist/native.mjs"
+                        },
+                        "require": "./dist/native.js",
+                        "default": "./dist/native.js"
+                },
+                "./solid": {
+                        "types": "./dist/solid.d.ts",
+                        "import": {
+                                "types": "./dist/solid.d.ts",
+                                "default": "./dist/solid.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/solid.d.ts",
+                                "default": "./dist/solid.mjs"
+                        },
+                        "require": "./dist/solid.js",
+                        "default": "./dist/solid.js"
+                },
+                "./solid/*": {
+                        "types": "./dist/solid.d.ts",
+                        "import": {
+                                "types": "./dist/solid.d.ts",
+                                "default": "./dist/solid.mjs"
+                        },
+                        "module": {
+                                "types": "./dist/solid.d.ts",
+                                "default": "./dist/solid.mjs"
+                        },
+                        "require": "./dist/solid.js",
+                        "default": "./dist/solid.js"
+                }
+        },
+        "dependencies": {
+                "reev": "0.12.0",
+                "refr": "0.3.0"
+        },
         "peerDependencies": {
                 "expo": "*",
                 "expo-gl": "*",
@@ -50,18 +161,5 @@
                 "solid-js": {
                         "optional": true
                 }
-        },
-        "files": [
-                "index.js",
-                "index.cjs.js",
-                "index.develop.js",
-                "index.product.js",
-                "index.ts",
-                "native.ts",
-                "qwik.ts",
-                "react.ts",
-                "solid.ts",
-                "types.ts",
-                "utils.ts"
-        ]
+        }
 }

package/qwik.ts

@@ -1,10 +1,10 @@
-import { useSignal, useVisibleTask$, $ } from '@builder.io/qwik'
+import { useSignal, useTask$, useVisibleTask$ } from '@builder.io/qwik'
 import { gl } from './index'
 import { frame } from 'refr'
 import type { GL } from './types'
 import type { Fun } from 'reev/types'
 
-export function useGL(props?: any, self = $(gl) as unknown as GL) {
+export const useGL = (props?: any, self = gl as unknown as GL) => {
         const ref = useSignal<Element>()
         useVisibleTask$(({ cleanup }) => {
                 self(props)
@@ -24,19 +24,19 @@ export function useGL(props?: any, self = $(gl) as unknown as GL) {
         return self
 }
 
-export function useTexture(props: any, self = gl) {
+export const useTexture = (props: any, self = gl) => {
         return self?.texture(props)
 }
 
-export function useAttribute(props: any, self = gl) {
+export const useAttribute = (props: any, self = gl) => {
         return self.attribute(props)
 }
 
-export function useUniform(props: any, self = gl) {
+export const useUniform = (props: any, self = gl) => {
         return self.uniform(props)
 }
 
-export function useFrame(fun: Fun, self = gl) {
+export const useFrame = (fun: Fun, self = gl) => {
         useTask$(() => self.frame(fun))
         return self
 }

package/react.ts

@@ -1,15 +1,9 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { createTF, gl } from './index'
 import { frame } from 'refr'
-import { mutable } from 'reev'
+import { useMutable } from 'reev/react'
 import type { GL } from './types'
 import type { Fun } from 'refr'
-import type { MutableArgs } from 'reev/types'
-
-export const useMutable = <T extends object>(...args: MutableArgs<T>) => {
-        const [memo] = useState(() => mutable<T>())
-        return memo(...args)
-}
 
 export const useGL = (props: Partial<GL> = {}, self = gl) => {
         const memo1 = useMutable(props) as Partial<GL>
@@ -46,21 +40,20 @@ export const useTF = (props: Partial<GL>, self = gl) => {
         return tf
 }
 
-export function useTexture(props: any, self = gl) {
+export const useTexture = (props: any, self = gl) => {
         return self.texture(props)
 }
 
-export function useAttribute(props: any, self = gl) {
+export const useAttribute = (props: any, self = gl) => {
         return self.attribute(props)
 }
 
-export function useUniform(props: any, self = gl) {
+export const useUniform = (props: any, self = gl) => {
         return self.uniform(props)
 }
 
-export function useFrame(fun: Fun, self = gl) {
-        const ref = useMutable(fun)
-        useEffect(() => self.frame(fun), [])
-        useEffect(() => () => self.frame(ref), [])
+export const useFrame = (fun: Fun, self = gl) => {
+        useEffect(() => void self.frame(fun), [])
+        useEffect(() => () => self.frame(fun), [])
         return self
 }

package/solid.ts

@@ -1,9 +1,10 @@
 import { onMount, onCleanup } from 'solid-js'
 import { frame } from 'refr'
-import { gl } from './index'
+import { createTF, gl } from './index'
+import { GL } from './types'
 import type { Fun } from 'reev/types'
 
-export function createGL(props?: any, self = gl) {
+export const onGL = (props?: Partial<GL>, self = gl) => {
         const memo = {
                 ref(target: unknown) {
                         if (target) {
@@ -31,21 +32,21 @@ export function createGL(props?: any, self = gl) {
         return self(props)(memo)
 }
 
-export const createTF = (props: any, self = gl) => {
+export const onTF = (props?: Partial<GL>, self = gl) => {
         const tf = createTF(props, self)
         onMount(() => tf.mount())
         onCleanup(() => tf.clean())
         return tf
 }
 
-export function onFrame(fun: Fun, self = gl) {
+export const onFrame = (fun: Fun, self = gl) => {
         onMount(() => self('render', fun))
 }
 
-export function setTexture(props: any, self = gl) {
+export const setTexture = (props: any, self = gl) => {
         return self.texture(props)
 }
 
-export function setAttribute(props: any, self = gl) {
+export const setAttribute = (props: any, self = gl) => {
         return self.attribute(props)
 }

package/test/index.test.ts

@@ -0,0 +1,5 @@
+describe('core', () => {
+        it('should work', () => {
+                expect(true).toBeTruthy()
+        })
+})

package/test/utils.test.ts

@@ -0,0 +1,43 @@
+import {
+    interleave,
+    isTemplateLiteral,
+    concat,
+    switchUniformType,
+} from 'glre/utils'
+
+describe('utils', () => {
+        const _ = (str, ...args) => [str, args] as [any, any]
+        const _0 = _`foo${false}bar${undefined}baz${null}`
+        const _1 = _`foo${  0  }bar${   NaN   }baz${ -1 }`
+        it('interleave merge strings', () => {
+                expect(interleave(..._0)).toEqual(`foofalsebarundefinedbaznull`)
+                expect(interleave(..._1)).toEqual(`foo0barNaNbaz-1`)
+        })
+        it('isTemplateLiteral', () => {
+                expect(isTemplateLiteral(_0[0])).toEqual(true)
+                expect(isTemplateLiteral(_1[0])).toEqual(true)
+        })
+
+        const headerUniform = `uniform vec2 iMouse;`;
+        const withUniform = `void main() { gl_FragColor = vec4(iMouse, 0., 1.); }`
+        const noneUniform = `void main() { gl_FragColor = vec4(0., 1., 0., 1.); }`
+        it.each`
+                i    | key         | shader                         | toBe
+                ${0} | ${void 0}   | ${                withUniform} | ${headerUniform + withUniform}
+                ${1} | ${"iMouse"} | ${                withUniform} | ${headerUniform + withUniform}
+                ${2} | ${"iMouse"} | ${                noneUniform} | ${noneUniform}
+                ${3} | ${void 0}   | ${headerUniform + withUniform} | ${headerUniform + withUniform}
+                ${4} | ${"iMouse"} | ${headerUniform + withUniform} | ${headerUniform + withUniform}
+                ${5} | ${"iMouse"} | ${headerUniform + noneUniform} | ${headerUniform + noneUniform}
+        `('concat $i', ({ key, shader, toBe }) => {
+                expect(concat(shader, headerUniform, key)).toBe(toBe)
+        })
+        it.each`
+                i    | uniformType           | uniformKey | isMatrix | value
+                ${0} | ${'uniform1f'}        | ${'float'} | ${false} | ${10}
+                ${1} | ${'uniform2fv'}       | ${'vec2'}  | ${false} | ${[0, 1]}
+                ${2} | ${`uniformMatrix2fv`} | ${'mat2'}  | ${true}  | ${[0, 1, 2, 3]}
+        `('switchUniformType $i', ({ value, isMatrix, uniformType, uniformKey }) => {
+                expect(switchUniformType(value, isMatrix)).toEqual([uniformType, uniformKey])
+        })
+})

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'tsup'
+import { defaultConfig } from '../../tsup.config.base'
+
+export default defineConfig((options) => {
+        return defaultConfig(
+                {
+                        entry: [
+                                'index.ts',
+                                'native.ts',
+                                'react.ts',
+                                'solid.ts',
+                        ],
+                },
+                options
+        )
+})

package/types.ts

@@ -61,13 +61,10 @@ export type GL = EventState<{
         /**
          * setter
          */
-        _uniform(key: string, value: Uniform): GL
         uniform(key: string, value: Uniform): GL
         uniform(target: { [key: string]: Uniform }): GL
-        _texture(key: string, value: string): GL
         texture(key: string, value: string): GL
         texture(target: { [key: string]: string }): GL
-        _attribute(key: string, value: Attribute, iboValue?: Attribute): GL
         attribute(key: string, value: Attribute, iboValue?: Attribute): GL
         attribute(target: { [key: string]: Attribute }): GL
         // config(key?: keyof GL, value?: GL[keyof GL]): GL