glre 0.23.0 → 0.25.0

package/package.json

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

package/src/index.ts

@@ -20,6 +20,7 @@ export const isGL = (a: unknown): a is EventState<GL> => {
         if ('isGL' in a) return true
         return false
 }
+
 export const isServer = () => {
         return typeof window === 'undefined'
 }
@@ -29,9 +30,7 @@ export const isWebGPUSupported = () => {
         return 'gpu' in navigator
 }
 
-let iTime = performance.now(),
-        iPrevTime = 0,
-        iDeltaTime = 0
+let iTime = performance.now()
 
 export const createGL = (props?: Partial<GL>) => {
         const gl = event<Partial<GL>>({
@@ -50,17 +49,21 @@ export const createGL = (props?: Partial<GL>) => {
         gl.frame = createFrame()
 
         gl.attribute = durable((k, v, i) => gl.queue(() => gl._attribute?.(k, v, i)))
-        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)))
         gl.texture = durable((k, v) => gl.queue(() => gl._texture?.(k, v)))
+        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)))
+        gl.uniform({ iResolution: gl.size, iMouse: [0, 0], iTime })
 
         gl('mount', async () => {
+                gl.vs = gl.vs || gl.vert || gl.vertex
+                gl.fs = gl.fs || gl.frag || gl.fragment
                 if (!isWebGPUSupported()) gl.isWebGL = true
                 if (gl.isWebGL) {
-                        await webgl(gl)
-                } else await webgpu(gl)
+                        gl((await webgl(gl)) as GL)
+                } else gl((await webgpu(gl)) as GL)
                 gl.resize()
                 gl.frame(() => {
                         gl.loop()
+                        gl.queue.flush()
                         gl.render()
                         return gl.isLoop
                 })
@@ -77,14 +80,6 @@ export const createGL = (props?: Partial<GL>) => {
                 gl.el.removeEventListener('mousemove', gl.mousemove)
         })
 
-        gl('loop', () => {
-                iPrevTime = iTime
-                iTime = performance.now() / 1000
-                iDeltaTime = iTime - iPrevTime
-                gl.uniform({ iPrevTime, iTime, iDeltaTime })
-                // if (gl.fragmentNode) updateUniforms({ time: iTime }) // @TODO FIX
-        })
-
         gl('resize', () => {
                 const w = gl.width || window.innerWidth
                 const h = gl.height || window.innerHeight
@@ -101,6 +96,11 @@ export const createGL = (props?: Partial<GL>) => {
                 gl.uniform('iMouse', gl.mouse)
         })
 
+        gl('loop', () => {
+                iTime = performance.now() / 1000
+                gl.uniform('iTime', iTime)
+        })
+
         return gl(props)
 }
 

package/src/node/index.ts

@@ -43,8 +43,8 @@ export const If = (condition: X, callback: () => void): ConditionalNode => {
 }
 
 // 組み込み変数
-export const gl_FragCoord = node('vec4', undefined)
-export const gl_Position = node('vec4', undefined)
+export const fragCoord = node('vec4', undefined)
+export const position = node('vec4', undefined)
 export const iTime = uniform(0.0)
 export const iResolution = uniform([1920, 1080])
 export const iMouse = uniform([0, 0])

package/src/types.ts

@@ -6,6 +6,7 @@ export type GPUContext = any // GPUCanvasContext https://developer.mozilla.org/e
 export type GPUDevice = any //
 export type GPUBuffer = any //
 export type GPUPipeline = any //
+export type GPUBindGroup = any
 export type Uniform = number | number[]
 export type Attribute = number[]
 export type Attributes = Record<string, Attribute>
@@ -28,9 +29,15 @@ export interface WebGLState {
 }
 
 export interface WebGPUState {
+        uniforms: any
+        textures: any
         device: GPUDevice
         context: GPUContext
+        groups: any[]
         pipeline: GPUPipeline
+        resources: any[]
+        loadingImg: number
+        needsUpdate: boolean
 }
 
 export type GL = EventState<{

package/src/utils/pipeline.ts

@@ -1,17 +1,7 @@
-import { GPUContext, GPUDevice, GPUPipeline } from '../types'
-
-export const initWebGPUDevice = async (el: HTMLCanvasElement) => {
-        const gpu = (navigator as any).gpu
-        if (!gpu) return null
-        const adapter = await gpu.requestAdapter()
-        if (!adapter) return null
-        const device = await adapter.requestDevice()
-        const context = el.getContext('webgpu') as GPUContext
-        if (!context) return null
-        const format = gpu.getPreferredCanvasFormat()
-        context.configure({ device, format })
-        return { device, context, format }
-}
+import { wgsl } from '../code/wgsl'
+import { X } from '../node'
+import { is } from './helpers'
+import type { GPUContext, GPUDevice, GPUPipeline } from '../types'
 
 const defaultVertexWGSL = `
 @vertex
@@ -23,19 +13,34 @@ fn main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
 `
 
 const defaultFragmentWGSL = `
+@group(0) @binding(0) var<uniform> iResolution: vec2f;
+
 @fragment
 fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-  return vec4f(position.xy / vec2f(1280, 800), 0.0, 1.0);
+  return vec4f(position.xy / iResolution, 0.0, 1.0);
 }
 `
 
-export const createRenderPipeline = (
+export const createDevive = async (c: GPUContext) => {
+        const gpu = (navigator as any).gpu
+        const format = gpu.getPreferredCanvasFormat()
+        const adapter = await gpu.requestAdapter()
+        const device = await adapter.requestDevice()
+        c.configure({ device, format, alphaMode: 'opaque' })
+        return { device, format }
+}
+
+export const createPipeline = (
         device: GPUDevice,
         format: string,
-        vs = defaultVertexWGSL,
-        fs = defaultFragmentWGSL,
-        buffers: any[]
+        buffers: any[],
+        layouts: any[],
+        vs: string | X = defaultVertexWGSL,
+        fs: string | X = defaultFragmentWGSL
 ) => {
+        if (is.obj(fs)) fs = wgsl(fs)
+        if (is.obj(vs)) vs = wgsl(vs)
+        const layout = device.createPipelineLayout({ bindGroupLayouts: layouts })
         return device.createRenderPipeline({
                 vertex: {
                         module: device.createShaderModule({ code: vs.trim() }),
@@ -47,11 +52,30 @@ export const createRenderPipeline = (
                         entryPoint: 'main',
                         targets: [{ format }],
                 },
-                layout: 'auto',
+                layout,
                 primitive: { topology: 'triangle-list' },
         }) as GPUPipeline
 }
 
+export const createBindGroup = (device: GPUDevice, resources: any[]) => {
+        const entries0 = [] as any[]
+        const entries1 = [] as any[]
+        resources.forEach((resource, binding) => {
+                if (!resource) return
+                const isUniform = 'buffer' in resource // @ts-ignore
+                const isTexture = resource instanceof GPUTextureView // @ts-ignore
+                const isSampler = resource instanceof GPUSampler // @ts-ignore
+                if (isUniform) entries0.push({ binding, visibility: 3, buffer: { type: 'uniform' } })
+                else if (isTexture) entries0.push({ binding, visibility: 2, texture: {} })
+                else if (isSampler) entries0.push({ binding, visibility: 2, sampler: {} })
+                else return
+                entries1.push({ binding, resource })
+        })
+        const layout = device.createBindGroupLayout({ entries: entries0 })
+        const bindGroup = device.createBindGroup({ layout, entries: entries1 })
+        return [layout, bindGroup]
+}
+
 export const createDescriptor = (c: GPUContext) => {
         return {
                 colorAttachments: [
@@ -64,65 +88,25 @@ export const createDescriptor = (c: GPUContext) => {
                 ],
         }
 }
-export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
 
-export const createUniformBuffer = (device: GPUDevice, size: number) => {
-        return device.createBuffer({ size: alignTo256(size), usage: 0x40 | 0x4 }) as Buffer
-}
+export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
 
-export const createVertexBuffer = (device: GPUDevice, value: number[]) => {
+export const createUniformBuffer = (device: GPUDevice, value: number[]) => {
         const array = new Float32Array(value)
-        const buffer = device.createBuffer({ size: array.byteLength, usage: 0x20 | 0x4 })
-        device.queue.writeBuffer(buffer, 0, array)
-        return buffer as Buffer
-}
-
-export const createBindGroup = (device: GPUDevice, pipeline: GPUPipeline, entries: any[]) => {
-        const layout = pipeline.getBindGroupLayout(0)
-        return device.createBindGroup({ layout, entries })
-}
-
-export const updateBindGroup = (
-        device: GPUDevice,
-        pipeline: GPUPipeline,
-        uniformBuffer: Buffer,
-        textures: any = {},
-        sampler: any = null
-) => {
-        const entries = [{ binding: 0, resource: { buffer: uniformBuffer } }]
-        let binding = 1
-        Object.values(textures).forEach((texture: any) => {
-                entries.push({ binding: binding++, resource: texture.createView() })
-        })
-        if (sampler && Object.keys(textures).length > 0) entries.push({ binding: binding++, resource: sampler })
-        return createBindGroup(device, pipeline, entries)
-}
-
-export const createUniform = (device: GPUDevice, buffer: any, data: Float32Array, offset = 0) => {
-        device.queue.writeBuffer(buffer, offset, data)
+        const size = alignTo256(array.byteLength)
+        const buffer = device.createBuffer({ size, usage: 72 }) as Buffer // 72 === GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        return { array, buffer }
 }
 
-export const createDeviceTexture = (device: GPUDevice, image: HTMLImageElement) => {
-        const texture = device.createTexture({
-                size: { width: image.width, height: image.height },
-                format: 'rgba8unorm',
-                usage: 0x4 | 0x2,
-        })
-        device.queue.copyExternalImageToTexture(
-                { source: image },
-                { texture },
-                { width: image.width, height: image.height }
-        )
-        return texture
-}
-
-export const createSampler = (device: GPUDevice) => {
-        return device.createSampler({
-                magFilter: 'linear',
-                minFilter: 'linear',
-                addressModeU: 'clamp-to-edge',
-                addressModeV: 'clamp-to-edge',
-        })
+export const createTextureSampler = (device: GPUDevice, width = 1280, height = 800) => {
+        const texture = device.createTexture({ size: [width, height], format: 'rgba8unorm', usage: 22 })
+        const sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' })
+        return [texture, sampler] as const
 }
 
-export const getDefaultVertices = () => new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1])
+// export const createVertexBuffer = (device: GPUDevice, value: number[]) => {
+//         const array = new Float32Array(value)
+//         const buffer = device.createBuffer({ size: array.byteLength, usage: 0x20 | 0x4 })
+//         device.queue.writeBuffer(buffer, 0, array)
+//         return buffer as Buffer
+// }

package/src/utils/program.ts

@@ -1,3 +1,7 @@
+import { glsl } from '../code/glsl'
+import { X } from '../node'
+import { is } from './helpers'
+
 export const defaultVertexGLSL = /* cpp */ `
 #version 300 es
 void main() {
@@ -17,7 +21,7 @@ void main() {
 }
 `
 
-export const createShader = (c: WebGLRenderingContext, source: string, type: number) => {
+const createShader = (c: WebGLRenderingContext, source: string, type: number) => {
         const shader = c.createShader(type)
         if (!shader) throw new Error('Failed to create shader')
         c.shaderSource(shader, source.trim())
@@ -28,7 +32,13 @@ export const createShader = (c: WebGLRenderingContext, source: string, type: num
         throw new Error(`Could not compile shader: ${error}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, vs = defaultVertexGLSL, fs = defaultFragmentGLSL) => {
+export const createProgram = (
+        c: WebGLRenderingContext,
+        vs: string | X = defaultVertexGLSL,
+        fs: string | X = defaultFragmentGLSL
+) => {
+        if (is.obj(fs)) fs = glsl(fs as X)
+        if (is.obj(vs)) vs = glsl(vs as X)
         const pg = c.createProgram()
         c.attachShader(pg, createShader(c, vs, c.VERTEX_SHADER))
         c.attachShader(pg, createShader(c, fs, c.FRAGMENT_SHADER))
@@ -55,20 +65,26 @@ export const createIbo = (c: WebGLRenderingContext, data: number[]) => {
         return buffer
 }
 
+export const getStride = (count: number, value: number[], iboValue?: number[]) => {
+        if (iboValue) count = Math.max(...iboValue) + 1
+        const stride = value.length / count
+        return Math.floor(stride)
+}
+
 export const createAttrib = (
         c: WebGLRenderingContext,
         stride: number,
-        location: any,
+        loc: any,
         vbo: WebGLBuffer,
         ibo?: WebGLBuffer
 ) => {
         c.bindBuffer(c.ARRAY_BUFFER, vbo)
-        c.enableVertexAttribArray(location)
-        c.vertexAttribPointer(location, stride, c.FLOAT, false, 0, 0)
+        c.enableVertexAttribArray(loc)
+        c.vertexAttribPointer(loc, stride, c.FLOAT, false, 0, 0)
         if (ibo) c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, ibo)
 }
 
-export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement) => {
+export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, loc: any, unit: number) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
         c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, img)
@@ -78,17 +94,7 @@ export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement) =
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_T, c.CLAMP_TO_EDGE)
         c.bindTexture(c.TEXTURE_2D, null)
-        return texture
-}
-
-export const activeTexture = (
-        c: WebGLRenderingContext,
-        location: WebGLUniformLocation | null,
-        unit: number,
-        texture: WebGLTexture
-) => {
-        if (!location) return
-        c.uniform1i(location, unit)
+        c.uniform1i(loc, unit)
         c.activeTexture(c.TEXTURE0 + unit)
         c.bindTexture(c.TEXTURE_2D, texture)
 }

package/src/webgl.ts

@@ -1,78 +1,54 @@
-import { nested } from 'reev'
-import { glsl } from './code/glsl'
+import { nested as cached } from 'reev'
 import { is } from './utils/helpers'
-import type { X } from './node'
-import type { GL } from './types'
-import { activeTexture, createAttrib, createIbo, createProgram, createTexture, createVbo } from './utils/program'
+import { createAttrib, createIbo, createProgram, createTexture, createVbo, getStride } from './utils/program'
+import type { GL, WebGLState } from './types'
 
-export const webgl = async (gl: GL) => {
-        let vs = gl.vs || gl.vert || gl.vertex
-        let fs = gl.fs || gl.frag || gl.fragment
-        if (is.obj(fs)) fs = glsl(fs as X)
-        if (is.obj(vs)) vs = glsl(vs as X)
-        const c = gl.el.getContext('webgl2')!
-        const pg = createProgram(c, vs, fs)
+export const webgl = async (gl: Partial<GL>) => {
+        const c = gl.el!.getContext('webgl2')!
+        const pg = createProgram(c, gl.vs, gl.fs)
+        const state = { context: c, program: pg } as WebGLState
+        c.useProgram(pg)
 
         let _activeUnit = 0
-        const activeUnits = nested(() => _activeUnit++)
+        const activeUnits = cached(() => _activeUnit++)
 
-        const locations = nested((key, bool = false) => {
-                if (bool) return c.getAttribLocation(pg, key)
-                return c.getUniformLocation(pg, key) as WebGLUniformLocation
-        })
+        const uniformLocations = cached((key) => c.getUniformLocation(pg, key))
+        const attribLocations = cached((key) => c.getAttribLocation(pg, key))
 
-        const strides = nested((_, count: number, value: number[], iboValue?: number[]) => {
-                if (iboValue) count = Math.max(...iboValue) + 1
-                const stride = value.length / count
-                if (stride !== Math.floor(stride)) console.warn(`Vertex Stride Error: count ${count} is mismatch`)
-                return Math.floor(stride)
-        })
+        const clean = () => c.deleteProgram(pg)
 
-        const uniforms = nested((key, value: number | number[]) => {
-                const loc = locations(key)
-                if (is.num(value)) return (value: any) => c.uniform1f(loc, value)
-                let l = value.length as 3
-                if (l <= 4) return (value: any) => c[`uniform${l}fv`](loc, value)
-                l = (Math.sqrt(l) << 0) as 3
-                return (value: any) => c[`uniformMatrix${l}fv`](loc, false, value)
-        })
-
-        gl('clean', () => c.deleteProgram(pg))
-
-        gl('render', () => {
-                c.useProgram(pg)
-                gl.queue.flush()
+        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)
-        })
+        }
 
-        gl('_attribute', (key = '', value: number[], iboValue: number[]) => {
-                const loc = locations(key, true)
+        const _attribute = (key = '', value: number[], iboValue: number[]) => {
+                const loc = attribLocations(key, true)
                 const vbo = createVbo(c, value)
                 const ibo = createIbo(c, iboValue)
-                const str = strides(key, gl.count, value, iboValue)
+                const str = getStride(gl.count!, value, iboValue)
                 createAttrib(c, str, loc, vbo, ibo)
-        })
-
-        gl('_uniform', (key: string, value: number | number[]) => {
-                uniforms(key, value)(value)
-        })
+        }
 
-        const _loadFn = (image: HTMLImageElement) => {
-                const loc = locations(image.alt)
-                const unit = activeUnits(image.alt)
-                const tex = createTexture(c, image)
-                activeTexture(c, loc, unit, tex)
+        const _uniform = (key: string, value: number | number[]) => {
+                const loc = uniformLocations(key)
+                if (is.num(value)) return c.uniform1f(loc, value)
+                let l = value.length
+                if (l <= 4) return c[`uniform${l as 2}fv`](loc, value)
+                l = Math.sqrt(l) << 0
+                c[`uniformMatrix${l as 2}fv`](loc, false, value)
         }
 
-        gl('_texture', (alt: string, src: string) => {
+        const _texture = (alt: string, src: string) => {
                 const image = new Image()
-                image.addEventListener('load', _loadFn.bind(null, image), false)
                 Object.assign(image, { src, alt, crossOrigin: 'anonymous' })
-        })
-
-        gl.webgl = { context: c, program: pg }
+                image.decode().then(() => {
+                        const loc = uniformLocations(image.alt)
+                        const unit = activeUnits(image.alt)
+                        createTexture(c, image, loc, unit)
+                })
+        }
 
-        return gl
+        return { webgl: state, render, clean, _attribute, _uniform, _texture }
 }

package/src/webgpu.ts

@@ -1,70 +1,92 @@
-import { wgsl } from './code/wgsl'
 import { is } from './utils/helpers'
 import {
-        createRenderPipeline,
+        createDevive,
+        createPipeline,
         createDescriptor,
-        // createUniformBuffer,
-        // updateBindGroup,
-        // createVertexBuffer,
-        // createUniform,
-        // createDeviceTexture,
-        // createSampler,
+        createUniformBuffer,
+        createBindGroup,
+        createTextureSampler,
 } from './utils/pipeline'
-import type { X } from './node'
-import type { GL, GPUPipeline } from './types'
+import type { GL, WebGPUState } from './types'
 
-const quadVertexCount = 3
+export const webgpu = async (gl: Partial<GL>) => {
+        const c = gl.el!.getContext('webgpu') as any
+        const { device, format } = await createDevive(c)
+        const state = {
+                device,
+                context: c,
+                uniforms: {},
+                textures: {},
+                resources: [[], []],
+                loadingImg: 0,
+                needsUpdate: true,
+        } as WebGPUState
 
-export const webgpu = async (gl: GL) => {
-        let vs = gl.vs || gl.vert || gl.vertex
-        let fs = gl.fs || gl.frag || gl.fragment
-        if (is.obj(vs)) vs = wgsl(vs as X)
-        if (is.obj(fs)) fs = wgsl(fs as X)
-        const c = gl.el.getContext('webgpu') as any
-        const gpu = (navigator as any).gpu
-        const adapter = await gpu.requestAdapter()
-        const device = await adapter.requestDevice()
-        const format = gpu.getPreferredCanvasFormat()
-        c.configure({ device, format, alphaMode: 'opaque' })
+        const initUniform = (value: number[]) => {
+                const { array, buffer } = createUniformBuffer(device, value)
+                state.resources[0].push({ buffer })
+                state.needsUpdate = true
+                return { array, buffer }
+        }
 
-        gl('clean', () => {})
+        const initTexutre = (source: HTMLImageElement) => {
+                const { width, height } = source
+                const [texture, sampler] = createTextureSampler(device, width, height)
+                state.resources[1].push(sampler, texture.createView())
+                state.needsUpdate = true
+                return { texture, width, height }
+        }
 
-        let pipeline: GPUPipeline
+        const update = () => {
+                const layouts = [] as any
+                state.groups = []
+                state.resources.forEach((resource) => {
+                        if (!resource.length) return
+                        const [layout, group] = createBindGroup(device, resource)
+                        layouts.push(layout)
+                        state.groups.push(group)
+                })
+                state.pipeline = createPipeline(device, format, [], layouts, gl.vs, gl.fs)
+        }
 
-        gl('render', () => {
-                if (!pipeline) pipeline = createRenderPipeline(device, format, vs, fs, [])
+        const render = () => {
+                if (state.loadingImg) return // ignore if loading img
+                if (state.needsUpdate) update() // first rendering
+                state.needsUpdate = false
                 const encoder = device.createCommandEncoder()
                 const pass = encoder.beginRenderPass(createDescriptor(c))
-                pass.setPipeline(pipeline)
-                pass.draw(quadVertexCount, 1, 0, 0)
+                pass.setPipeline(state.pipeline)
+                state.groups.forEach((v, i) => pass.setBindGroup(i, v))
+                pass.draw(gl.count, 1, 0, 0)
                 pass.end()
                 device.queue.submit([encoder.finish()])
-        })
+        }
 
-        gl('_attribute', (key = '', value: number[]) => {
-                // @TODO FIX
-                // vertexBuffers(key, value)
-        })
+        const clean = () => {}
 
-        gl('_uniform', (key: string, value = 0) => {
+        const _attribute = (key = '', value: number[]) => {
                 // @TODO FIX
-                // if (!device || !uniformBuffer) return
-                // uniforms[key] = value
-                // const uniformData = new Float32Array(Object.values(uniforms))
-                // createUniform(device, uniformBuffer, uniformData)
-        })
+                // vertexBuffers(key, value)
+        }
 
-        // const _loadFun = (image: HTMLImageElement, gl: GL) => {
-        //         const texture = createDeviceTexture(device, image)
-        //         // bindGroup = updateBindGroup(device, pipeline, uniformBuffer, textures, sampler)
-        // }
+        const _uniform = (key: string, value: number | number[]) => {
+                if (is.num(value)) value = [value]
+                if (!state.uniforms[key]) state.uniforms[key] = initUniform(value)
+                const { array, buffer } = state.uniforms[key]
+                array.set(value)
+                device.queue.writeBuffer(buffer, 0, array)
+        }
 
-        gl('_texture', (alt: string, src: string) => {
-                // @TODO FIX
-                // const image = new Image()
-                // image.addEventListener('load', _loadFun.bind(null, image, gl), false)
-                // Object.assign(image, { src, alt, crossOrigin: 'anonymous' })
-        })
+        const _texture = (key: string, src: string) => {
+                state.loadingImg++
+                const source = Object.assign(new Image(), { src, crossOrigin: 'anonymous' })
+                source.decode().then(() => {
+                        if (!state.textures[key]) state.textures[key] = initTexutre(source)
+                        const { texture, width, height } = state.textures[key]
+                        device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
+                        state.loadingImg--
+                })
+        }
 
-        return gl
+        return { webgpu: state, render, clean, _attribute, _uniform, _texture }
 }