glre 0.18.0 → 0.20.0

package/native.ts

@@ -1,64 +0,0 @@
-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
-}

package/qwik.ts

@@ -1,42 +0,0 @@
-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 const useGL = (props?: any, self = gl as unknown as GL) => {
-        const ref = useSignal<Element>()
-        useVisibleTask$(({ cleanup }) => {
-                self(props)
-                self.el = self.target = ref.value
-                self.gl = self.target.getContext('webgl2')
-                self.init()
-                self.resize()
-                frame.start()
-                window.addEventListener('resize', self.resize)
-                window.addEventListener('mousemove', self.mousemove)
-                cleanup(() => {
-                        self.clean()
-                        window.removeEventListener('resize', self.resize)
-                        window.removeEventListener('mousemove', self.mousemove)
-                })
-        })
-        return self
-}
-
-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) => {
-        useTask$(() => self.frame(fun))
-        return self
-}

package/react.ts

@@ -1,59 +0,0 @@
-import { useEffect, useMemo } from 'react'
-import { createTF, gl } from './index'
-import { frame } from 'refr'
-import { useMutable } from 'reev/react'
-import type { GL } from './types'
-import type { Fun } from 'refr'
-
-export const useGL = (props: Partial<GL> = {}, self = gl) => {
-        const memo1 = useMutable(props) as Partial<GL>
-        const memo2 = useMutable({
-                ref(target: unknown) {
-                        if (target) {
-                                self.target = target
-                                self.mount()
-                        } else self.clean()
-                },
-                mount() {
-                        self.el = self.target
-                        self.gl = self.target.getContext('webgl2')
-                        self.init()
-                        self.resize()
-                        frame.start()
-                        window.addEventListener('resize', self.resize)
-                        self.el.addEventListener('mousemove', self.mousemove)
-                },
-                clean() {
-                        self(memo2)(memo1)
-                        frame.cancel()
-                        window.removeEventListener('resize', self.resize)
-                },
-        }) as Partial<GL>
-
-        return useMemo(() => self(memo2)(memo1), [self, memo1, memo2])
-}
-
-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) => {
-        useEffect(() => void self.frame(fun), [])
-        useEffect(() => () => self.frame(fun), [])
-        return self
-}

package/solid.ts

@@ -1,52 +0,0 @@
-import { onMount, onCleanup } from 'solid-js'
-import { frame } from 'refr'
-import { createTF, gl } from './index'
-import { GL } from './types'
-import type { Fun } from 'reev/types'
-
-export const onGL = (props?: Partial<GL>, self = gl) => {
-        const memo = {
-                ref(target: unknown) {
-                        if (target) {
-                                self.target = target
-                                self.mount()
-                        }
-                },
-                mount() {
-                        self.el = self.target
-                        self.gl = self.target.getContext('webgl2')
-                        self.init()
-                        self.resize()
-                        frame.start()
-                        window.addEventListener('resize', self.resize)
-                        window.addEventListener('mousemove', self.mousemove)
-                },
-                clean() {
-                        self(props)(memo)
-                        frame.cancel()
-                        window.removeEventListener('resize', self.resize)
-                        window.removeEventListener('mousemove', self.mousemove)
-                },
-        }
-        onCleanup(self.clean)
-        return self(props)(memo)
-}
-
-export const onTF = (props?: Partial<GL>, self = gl) => {
-        const tf = createTF(props, self)
-        onMount(() => tf.mount())
-        onCleanup(() => tf.clean())
-        return tf
-}
-
-export const onFrame = (fun: Fun, self = gl) => {
-        onMount(() => self('render', fun))
-}
-
-export const setTexture = (props: any, self = gl) => {
-        return self.texture(props)
-}
-
-export const setAttribute = (props: any, self = gl) => {
-        return self.attribute(props)
-}

package/test/index.test.ts

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

package/test/utils.test.ts

@@ -1,43 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,98 +0,0 @@
-import type { Queue } from 'refr/types'
-import type { Nested, EventState } from 'reev/types'
-
-export type Uniform = number | number[]
-
-export type Attribute = number[]
-
-export type Attributes = Record<string, Attribute>
-
-export type Uniforms = Record<string, Uniform>
-
-export type GL = EventState<{
-        /**
-         * initial value
-         */
-        id: string
-        width: number
-        height: number
-        size: [number, number]
-        mouse: [number, number]
-        count: number
-        vs: string
-        fs: string
-        vert: string
-        frag: string
-        vertex: string
-        fragment: string
-        varying: string
-        int: PrecisionMode
-        float: PrecisionMode
-        sampler2D: PrecisionMode
-        samplerCube: PrecisionMode
-        lastActiveUnit: number
-
-        /**
-         * core state
-         */
-        gl: any
-        pg: any
-        el: any
-        frame: Queue
-        target: any
-        stride: Nested<number>
-        // @TODO Nested<(key: string, value: number: number[], ibo: number[]) => number>
-        location: Nested<any>
-        activeUnit: Nested<number>
-        default: any
-
-        /**
-         * events
-         */
-        ref?: any
-        init(varying?: string[]): void
-        mount(): void
-        clean(): void
-        render(): void
-        mousemove(e: Event): void
-        resize(e?: Event, width?: number, height?: number): void
-        load(e?: Event, image?: HTMLImageElement): void
-
-        /**
-         * setter
-         */
-        uniform(key: string, value: Uniform): GL
-        uniform(target: { [key: string]: Uniform }): GL
-        texture(key: string, value: string): GL
-        texture(target: { [key: string]: string }): GL
-        attribute(key: string, value: Attribute, iboValue?: Attribute): GL
-        attribute(target: { [key: string]: Attribute }): GL
-        // config(key?: keyof GL, value?: GL[keyof GL]): GL
-        // config(target?: Partial<GL>): GL
-
-        /**
-         * short hands
-         */
-        clear(key?: GLClearMode): void
-        viewport(size?: [number, number]): void
-        drawArrays(key?: GLDrawMode): void
-        drawElements(key?: GLDrawMode): void
-}>
-
-export type PrecisionMode = 'highp' | 'mediump' | 'lowp'
-
-export type GLClearMode =
-        | 'COLOR_BUFFER_BIT'
-        | 'DEPTH_BUFFER_BIT'
-        | 'STENCIL_BUFFER_BIT'
-
-export type GLDrawMode =
-        | 'POINTS'
-        | 'LINE_STRIP'
-        | 'LINE_LOOP'
-        | 'LINES'
-        | 'TRIANGLE_STRIP'
-        | 'TRIANGLE_FAN'
-        | 'TRIANGLES'
-
-export type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'

package/utils.ts

@@ -1,210 +0,0 @@
-/**
- * utils
- */
-export const uniformType = (value: number | number[], isMatrix = false) => {
-        let length = typeof value === 'number' ? 0 : value?.length
-        if (!length) return `uniform1f`
-        if (!isMatrix) return `uniform${length}fv`
-        length = Math.sqrt(length) << 0
-        return `uniformMatrix${length}fv`
-}
-
-export const vertexStride = (
-        count: number,
-        value: number[],
-        iboValue?: number[]
-) => {
-        if (iboValue) count = Math.max(...iboValue) + 1
-        const stride = value.length / count
-        if (stride !== stride << 0)
-                console.warn(`Vertex Stride Error: count ${count} is mismatch`)
-        return stride << 0
-}
-
-/**
- * graphics
- */
-export const createShader = (gl: any, source: string, type: unknown) => {
-        const shader = gl.createShader(type)
-        gl.shaderSource(shader, source)
-        gl.compileShader(shader)
-        if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-                return shader
-        } else throw 'Could not compile glsl\n\n' + gl.getShaderInfoLog(shader)
-}
-
-export const createProgram = (gl: any, vs: any, fs: any) => {
-        const program = gl.createProgram()
-        gl.attachShader(program, vs)
-        gl.attachShader(program, fs)
-        gl.linkProgram(program)
-        if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
-                gl.useProgram(program)
-                return program
-        } else {
-                console.log(gl.getProgramInfoLog(program))
-                return null
-        }
-}
-
-export const createTfProgram = (gl: any, vs: any, fs: any, varyings?: any) => {
-        const pg = gl.createProgram()
-        gl.attachShader(pg, vs)
-        gl.attachShader(pg, fs)
-        gl.transformFeedbackVaryings(pg, varyings, gl.SEPARATE_ATTRIBS)
-        gl.linkProgram(pg)
-        if (gl.getProgramParameter(pg, gl.LINK_STATUS)) {
-                gl.useProgram(pg)
-                return pg
-        } else {
-                console.warn(gl.getProgramInfoLog(pg))
-                return null
-        }
-}
-
-export const createVbo = (gl: any, data: number[]) => {
-        if (!data) return
-        const vbo = gl.createBuffer()
-        gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW)
-        gl.bindBuffer(gl.ARRAY_BUFFER, null)
-        return vbo
-}
-
-export const createIbo = (gl: any, data?: number[]) => {
-        if (!data) return
-        const ibo = gl.createBuffer()
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo)
-        gl.bufferData(
-                gl.ELEMENT_ARRAY_BUFFER,
-                new Int16Array(data),
-                gl.STATIC_DRAW
-        )
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null)
-        return ibo
-}
-
-export const createAttribute = (
-        gl: any,
-        stride: number,
-        location: any,
-        vbo: any,
-        ibo: any
-) => {
-        gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
-        gl.enableVertexAttribArray(location)
-        gl.vertexAttribPointer(location, stride, gl.FLOAT, false, 0, 0)
-        if (ibo) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo)
-}
-
-export const createFramebuffer = (gl: any, width: number, height: number) => {
-        const frameBuffer = gl.createFramebuffer()
-        gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
-        const renderBuffer = gl.createRenderbuffer()
-        gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer)
-        gl.renderbufferStorage(
-                gl.RENDERBUFFER,
-                gl.DEPTH_COMPONENT16,
-                width,
-                height
-        )
-        gl.framebufferRenderbuffer(
-                gl.FRAMEBUFFER,
-                gl.DEPTH_ATTACHMENT,
-                gl.RENDERBUFFER,
-                renderBuffer
-        )
-        const texture = gl.createTexture()
-        gl.bindTexture(gl.TEXTURE_2D, texture)
-        gl.texImage2D(
-                gl.TEXTURE_2D,
-                0,
-                gl.RGBA,
-                width,
-                height,
-                0,
-                gl.RGBA,
-                gl.UNSIGNED_BYTE,
-                null
-        )
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-        gl.framebufferTexture2D(
-                gl.FRAMEBUFFER,
-                gl.COLOR_ATTACHMENT0,
-                gl.TEXTURE_2D,
-                texture,
-                0
-        )
-        gl.bindTexture(gl.TEXTURE_2D, null)
-        gl.bindRenderbuffer(gl.RENDERBUFFER, null)
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null)
-        return { frameBuffer, renderBuffer, texture }
-}
-
-export const createFramebufferFloat = (
-        gl: any,
-        ext: any,
-        width: number,
-        height: number
-) => {
-        const flg =
-                ext.textureFloat != null
-                        ? gl.FLOAT
-                        : ext.textureHalfFloat.HALF_FLOAT_OES
-        const frameBuffer = gl.createFramebuffer()
-        const texture = gl.createTexture()
-        gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
-        gl.bindTexture(gl.TEXTURE_2D, texture)
-        gl.texImage2D(
-                gl.TEXTURE_2D,
-                0,
-                gl.RGBA,
-                width,
-                height,
-                0,
-                gl.RGBA,
-                flg,
-                null
-        )
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-        gl.framebufferTexture2D(
-                gl.FRAMEBUFFER,
-                gl.COLOR_ATTACHMENT0,
-                gl.TEXTURE_2D,
-                texture,
-                0
-        )
-        gl.bindTexture(gl.TEXTURE_2D, null)
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null)
-        return { frameBuffer, texture }
-}
-
-export const createTexture = (gl: any, img: any) => {
-        const texture = gl.createTexture()
-        gl.bindTexture(gl.TEXTURE_2D, texture)
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
-        gl.generateMipmap(gl.TEXTURE_2D)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-        gl.bindTexture(gl.TEXTURE_2D, null)
-        return texture
-}
-
-export const activeTexture = (
-        gl: any,
-        location: any,
-        activeUnit: any,
-        texture: any
-) => {
-        gl.uniform1i(location, activeUnit)
-        gl.activeTexture(gl['TEXTURE' + activeUnit])
-        gl.bindTexture(gl.TEXTURE_2D, texture)
-}