glre 0.15.0 → 0.17.0

package/index.ts

@@ -1,158 +1,202 @@
-import { event, durable, nested } from 'reev'
-import { queue, frame } from 'refr'
-import {
-        uniformType,
-        vertexStride,
-        createProgram,
-        createTfProgram,
-        createShader,
-        createAttribute,
-        createTexture,
-        createVbo,
-        createIbo,
-        activeTexture,
-} from './utils'
-import type { GL } from './types'
-
-const a_position = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]
-
-const _defaultVertex = `
-  attribute vec4 a_position;
-  void main() {
-    gl_Position = a_position;
-  }
-`
-
-const _defaultFragment = `
-  precision mediump float;
-  uniform vec2 iResolution;
-  void main() {
-    gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-  }
-`
-
-let iTime = performance.now(),
-        iPrevTime = 0,
-        iDeltaTime = 0
-
-const self = event<Partial<GL>>({
-        vertex: _defaultVertex,
-        fragment: _defaultFragment,
-        size: [0, 0],
-        mouse: [0, 0],
-        count: 6,
-        counter: 0,
-        init(varying?: string[]) {
-                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 = varying
-                        ? createTfProgram(gl, vs, fs, 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 stride = vertexStride(self.count, value, iboValue)
-                        createAttribute(self.gl, stride, loc, vbo, ibo)
-                })
-        },
-        _texture(key: string, src: string) {
-                if (typeof window === 'undefined') return
-                const image = new Image()
-                image.addEventListener(
-                        'load',
-                        (_) => self.load(_, image),
-                        false
-                )
-                Object.assign(image, {
-                        src,
-                        alt: key,
-                        crossOrigin: 'anonymous',
-                })
-        },
-        resize(
-                _e: any,
-                width = window.innerWidth,
-                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
-                self.mouse[0] = (x - w / 2) / (w / 2)
-                self.mouse[1] = -(y - 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 texture = createTexture(self.gl, image)
-                        self.frame(() => {
-                                activeTexture(self.gl, loc, unit, texture)
-                                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') {
-                self.gl.drawElements(
-                        self.gl[mode],
-                        self.count,
-                        self.gl[type],
-                        0
-                )
-        },
-}) as GL
-
-self.frame = queue()
-self.texture = durable(self._texture)
-self.uniform = durable(self._uniform)
-self.attribute = durable(self._attribute)
-
-// @TODO
-// export const clone = gl.clone()
-
-export { self as gl }
-
-export default self
+import { event, durable, nested } from 'reev'
+import { queue, frame } from 'refr'
+import {
+        uniformType,
+        vertexStride,
+        createProgram,
+        createTfProgram,
+        createShader,
+        createAttribute,
+        createTexture,
+        createVbo,
+        createIbo,
+        activeTexture,
+} from './utils'
+import type { GL } from './types'
+
+const a_position = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]
+
+const _defaultVertex = `
+  attribute vec4 a_position;
+  void main() {
+    gl_Position = a_position;
+  }
+`
+
+const _defaultFragment = `
+  precision mediump float;
+  uniform vec2 iResolution;
+  void main() {
+    gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
+  }
+`
+
+let iTime = performance.now(),
+        iPrevTime = 0,
+        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,
+                size: [0, 0],
+                mouse: [0, 0],
+                count: 6,
+                counter: 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(_texture)
+        self.uniform = durable(_uniform)
+        self.attribute = durable(_attribute)
+
+        return self
+}
+
+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, clean })
+        return tf
+}
+
+export default self

package/native.ts

@@ -1,58 +1,64 @@
-import { useEffect, useMemo } from 'react'
-import { Dimensions } from 'react-native'
-import { useMutable } from 'reev/react'
-import { gl } from './index'
-import { frame } from 'refr'
-import type { GL } from './types'
-import type { Fun } from 'refr'
-
-export const useGL = (props: Partial<GL> = {}, self = gl) => {
-        const change = () => {
-                self.resize(
-                        void 0,
-                        self.gl.drawingBufferWidth,
-                        self.gl.drawingBufferHeight
-                )
-        }
-        const memo1 = useMutable(props) as Partial<GL>
-        const memo2 = useMutable({
-                ref(gl: any) {
-                        self.el = {}
-                        self.gl = gl
-                        self.mount()
-                },
-                mount() {
-                        self.init()
-                        change()
-                        frame.start()
-                        Dimensions.addEventListener('change', change)
-                },
-                clean() {
-                        self(memo2)(memo1)
-                        frame.cancel()
-                },
-        }) as Partial<GL>
-
-        useEffect(() => self.clean, [self])
-
-        return useMemo(() => self(memo2)(memo1), [self, memo2, memo1])
-}
-
-export function useTexture(props: any, self = gl) {
-        return self.texture(props)
-}
-
-export function useAttribute(props: any, self = gl) {
-        return self.attribute(props)
-}
-
-export function 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), [])
-        return self
-}
+import { useEffect, useMemo } from 'react'
+import { Dimensions } from 'react-native'
+import { useMutable } from 'reev/react'
+import { gl, createTF } from './index'
+import { frame } from 'refr'
+import type { GL } from './types'
+import type { Fun } from 'refr'
+
+export const useGL = (props: Partial<GL> = {}, self = gl) => {
+        const change = () => {
+                self.resize(
+                        void 0,
+                        self.gl.drawingBufferWidth,
+                        self.gl.drawingBufferHeight
+                )
+        }
+        const memo1 = useMutable(props) as Partial<GL>
+        const memo2 = useMutable({
+                ref(gl: any) {
+                        self.el = {}
+                        self.gl = gl
+                        self.mount()
+                },
+                mount() {
+                        self.init()
+                        change()
+                        frame.start()
+                        Dimensions.addEventListener('change', change)
+                },
+                clean() {
+                        self(memo2)(memo1)
+                        frame.cancel()
+                },
+        }) as Partial<GL>
+
+        useEffect(() => self.clean, [self])
+
+        return useMemo(() => self(memo2)(memo1), [self, memo2, memo1])
+}
+export const useTF = (props: Partial<GL>, self = gl) => {
+        const memo = useMutable(props) as Partial<GL>
+        const tf = useMemo(() => createTF(memo, self), [memo, self])
+        useEffect(() => void tf.mount() || tf.clean, [self])
+        return tf
+}
+
+export const useTexture = (props: any, self = gl) => {
+        return self.texture(props)
+}
+
+export const useAttribute = (props: any, self = gl) => {
+        return self.attribute(props)
+}
+
+export const useUniform = (props: any, self = gl) => {
+        return self.uniform(props)
+}
+
+export const useFrame = (fun: Fun, self = gl) => {
+        const ref = useMutable(fun)
+        useEffect(() => self.frame(fun), [])
+        useEffect(() => () => self.frame(ref), [])
+        return self
+}