glre 0.40.0 → 0.42.0

package/src/addons/sdf/starSDF.ts

@@ -0,0 +1,47 @@
+import { Fn, Vec2, Int, Float, vec2, atan2, step, float } from '../../node'
+import { TAU } from '../math/const'
+import { scale2dWithCenter } from '../space/scale'
+
+export function starSDF(st: Vec2, V: Int, s: Float): Float
+export function starSDF(st: Vec2, V: Int): Float
+export function starSDF(st: Vec2, V: any, s?: any): any {
+        if (s !== undefined) {
+                return starSDFWithScale(st, V, s)
+        } else {
+                return starSDFSimple(st, V)
+        }
+}
+
+export const starSDFWithScale = Fn(([st, V, s]: [Vec2, Int, Float]): Float => {
+        const centeredSt = st.sub(0.5).mul(2).toVar('centeredSt')
+        const a = atan2(centeredSt.y, centeredSt.x).div(TAU).toVar('a')
+        const seg = a.mul(V.toFloat()).toVar('seg')
+        const finalA = seg
+                .floor()
+                .add(0.5)
+                .div(V.toFloat())
+                .add(s.mix(s.negate(), step(0.5, seg.fract())))
+                .mul(TAU)
+                .toVar('finalA')
+        return vec2(finalA.cos(), finalA.sin()).dot(centeredSt).abs()
+}).setLayout({
+        name: 'starSDFWithScale',
+        type: 'float',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 'V', type: 'int' },
+                { name: 's', type: 'float' },
+        ],
+})
+
+export const starSDFSimple = Fn(([st, V]: [Vec2, Int]): Float => {
+        const scaledSt = scale2dWithCenter(st, V.toFloat().reciprocal().mul(12), vec2(0.5))
+        return starSDFWithScale(scaledSt as any, V, float(0.1))
+}).setLayout({
+        name: 'starSDFSimple',
+        type: 'float',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 'V', type: 'int' },
+        ],
+})

package/src/addons/sdf/superShapeSDF.ts

@@ -0,0 +1,73 @@
+import { Fn, Vec2, Float, vec2, cos, sin, pow, abs, float } from '../../node'
+import { cart2polar } from '../space/cart2polar'
+
+export const superShapeSDFCenter = Fn(
+        ([st, center, s, a, b, n1, n2, n3, m]: [
+                Vec2,
+                Vec2,
+                Float,
+                Float,
+                Float,
+                Float,
+                Float,
+                Float,
+                Float
+        ]): Float => {
+                st.assign(st.sub(center))
+                const polar = cart2polar(st).toVar('polar')
+                const d = polar.y.mul(5).toVar('d')
+                const theta = polar.x.toVar('theta')
+                const t1 = abs(
+                        float(1)
+                                .div(a)
+                                .mul(cos(m.mul(theta).mul(0.25)))
+                ).toVar('t1')
+                t1.assign(pow(t1, n2))
+                const t2 = abs(
+                        float(1)
+                                .div(b)
+                                .mul(sin(m.mul(theta).mul(0.25)))
+                ).toVar('t2')
+                t2.assign(pow(t2, n3))
+                const t3 = t1.add(t2).toVar('t3')
+                const r = pow(t3, float(-1).div(n1)).toVar('r')
+                const q = s
+                        .mul(r)
+                        .mul(vec2(cos(theta), sin(theta)))
+                        .toVar('q')
+                return d.sub(q.length())
+        }
+).setLayout({
+        name: 'superShapeSDFCenter',
+        type: 'float',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 'center', type: 'vec2' },
+                { name: 's', type: 'float' },
+                { name: 'a', type: 'float' },
+                { name: 'b', type: 'float' },
+                { name: 'n1', type: 'float' },
+                { name: 'n2', type: 'float' },
+                { name: 'n3', type: 'float' },
+                { name: 'm', type: 'float' },
+        ],
+})
+
+export const superShapeSDF = Fn(
+        ([st, s, a, b, n1, n2, n3, m]: [Vec2, Float, Float, Float, Float, Float, Float, Float]): Float => {
+                return superShapeSDFCenter(st, vec2(0.5), s, a, b, n1, n2, n3, m)
+        }
+).setLayout({
+        name: 'superShapeSDF',
+        type: 'float',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 's', type: 'float' },
+                { name: 'a', type: 'float' },
+                { name: 'b', type: 'float' },
+                { name: 'n1', type: 'float' },
+                { name: 'n2', type: 'float' },
+                { name: 'n3', type: 'float' },
+                { name: 'm', type: 'float' },
+        ],
+})

package/src/addons/sdf/tetrahedronSDF.ts

@@ -0,0 +1,21 @@
+import { Fn, Vec3, Float, vec2 } from '../../node'
+
+export const tetrahedronSDF = Fn(([p, h]: [Vec3, Float]): Float => {
+        const q = p.abs().toVar('q')
+        const y = p.y.toVar('y')
+        const d1 = q.z.sub(y.max(0)).toVar('d1')
+        const d2 = q.x
+                .mul(0.5)
+                .add(y.mul(0.5))
+                .max(0)
+                .sub(h.min(h.add(y)))
+                .toVar('d2')
+        return vec2(d1, d2).max(0.005).length().add(d1.max(d2).min(0))
+}).setLayout({
+        name: 'tetrahedronSDF',
+        type: 'float',
+        inputs: [
+                { name: 'p', type: 'vec3' },
+                { name: 'h', type: 'float' },
+        ],
+})

package/src/addons/sdf/torusSDF.ts

@@ -0,0 +1,27 @@
+import { Fn, Vec3, Vec2, Float, vec2, select } from '../../node'
+
+export const torusSDF = Fn(([p, t]: [Vec3, Vec2]): Float => {
+        return vec2(vec2(p.x, p.z).length().sub(t.x), p.y).length().sub(t.y)
+}).setLayout({
+        name: 'torusSDF',
+        type: 'float',
+        inputs: [
+                { name: 'p', type: 'vec3' },
+                { name: 't', type: 'vec2' },
+        ],
+})
+
+export const torusSDFSector = Fn(([p, sc, ra, rb]: [Vec3, Vec2, Float, Float]): Float => {
+        const px = p.x.abs().toVar('px')
+        const k = select(vec2(px, p.y).length(), vec2(px, p.y).dot(sc), sc.y.mul(px).greaterThan(sc.x.mul(p.y)))
+        return p.dot(p).add(ra.mul(ra)).sub(ra.mul(k).mul(2)).sqrt().sub(rb)
+}).setLayout({
+        name: 'torusSDFSector',
+        type: 'float',
+        inputs: [
+                { name: 'p', type: 'vec3' },
+                { name: 'sc', type: 'vec2' },
+                { name: 'ra', type: 'float' },
+                { name: 'rb', type: 'float' },
+        ],
+})

package/src/addons/sdf/triPrismSDF.ts

@@ -0,0 +1,13 @@
+import { Fn, Vec3, Vec2, Float } from '../../node'
+
+export const triPrismSDF = Fn(([p, h]: [Vec3, Vec2]): Float => {
+        const q = p.abs().toVar('q')
+        return q.z.sub(h.y).max(q.x.mul(0.866025).add(p.y.mul(0.5)).max(p.y.negate()).sub(h.x.mul(0.5)))
+}).setLayout({
+        name: 'triPrismSDF',
+        type: 'float',
+        inputs: [
+                { name: 'p', type: 'vec3' },
+                { name: 'h', type: 'vec2' },
+        ],
+})

package/src/addons/sdf/triSDF.ts

@@ -1,14 +1,22 @@
-import { Fn, Vec2, Float, max, abs, float } from '../../node'
+import { Fn, Vec2, Float } from '../../node'
 
 export const triSDF = Fn(([st]: [Vec2]): Float => {
-	const normalized = st.sub(0.5).mul(5).toVar()
-	const sqrt3_2 = float(0.866025) // sqrt(3)/2
-	return max(
-		abs(normalized.x).mul(sqrt3_2).add(normalized.y.div(2)),
-		normalized.y.div(-2)
-	)
+        const centered = st.sub(0.5).mul(5).toVar('centered')
+        return centered.x.abs().mul(0.866025).add(centered.y.mul(0.5)).max(centered.y.negate().mul(0.5))
 }).setLayout({
-	name: 'triSDF',
-	type: 'float',
-	inputs: [{ name: 'st', type: 'vec2' }],
-})
+        name: 'triSDF',
+        type: 'float',
+        inputs: [{ name: 'st', type: 'vec2' }],
+})
+
+export const triSDFCenter = Fn(([st, center]: [Vec2, Vec2]): Float => {
+        const centered = st.sub(center).mul(5).toVar('centered')
+        return centered.x.abs().mul(0.866025).add(centered.y.mul(0.5)).max(centered.y.negate().mul(0.5))
+}).setLayout({
+        name: 'triSDFCenter',
+        type: 'float',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 'center', type: 'vec2' },
+        ],
+})

package/src/addons/sdf/vesicaSDF.ts

@@ -0,0 +1,23 @@
+import { Fn, Vec2, Float, vec2, float } from '../../node'
+
+export const vesicaSDF = Fn(([st, w]: [Vec2, Float]): Float => {
+        const offset = vec2(w.mul(0.5), 0)
+        const circle1 = st.sub(offset).length().sub(0.5)
+        const circle2 = st.add(offset).length().sub(0.5)
+        return circle1.max(circle2)
+}).setLayout({
+        name: 'vesicaSDF',
+        type: 'float',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 'w', type: 'float' },
+        ],
+})
+
+export const vesicaSDFDefault = Fn(([st]: [Vec2]): Float => {
+        return vesicaSDF(st, float(0.5))
+}).setLayout({
+        name: 'vesicaSDFDefault',
+        type: 'float',
+        inputs: [{ name: 'st', type: 'vec2' }],
+})

package/src/addons/space/bracketing.ts

@@ -1,7 +1,6 @@
 import { Fn, Vec2, Float, mat2, atan2, cos, sin, mod, vec2, float } from '../../node'
+import { PI, TWO_PI } from '../math/const'
 
-const PI = float(3.1415926535897932384626433832795)
-const TWO_PI = float(6.283185307179586476925286766559)
 const BRACKETING_ANGLE_DELTA = PI.div(20.0)
 
 export const bracketingAxis0 = Fn(([dir]: [Vec2]): Vec2 => {

package/src/addons/space/kaleidoscope.ts

@@ -1,6 +1,5 @@
 import { Fn, Vec2, Float, vec2, float, length, atan2, floor, min, max, cos, sin } from '../../node'
-
-const TWO_PI = 6.283185307179586
+import { TWO_PI } from '../math/const'
 
 const kaleidoscopeCore = (coord: Vec2, segmentCount: Float, phase: Float) => {
         const uv = coord.sub(0.5).toVar('uv')

package/src/addons/space/scale.ts

@@ -1,13 +1,48 @@
-import { Fn, vec2, vec3, vec4, Float, Vec2, Vec3, Vec4, X } from '../../node'
+import { Fn, Vec2, Vec3, Float, vec2, vec3 } from '../../node'
 
-export const scale = Fn(([st, s, center]: [X, X, X]): X => {
+export const scale2d = Fn(([st, s]: [Vec2, Float]): Vec2 => {
+        return st.sub(vec2(0.5)).mul(s).add(vec2(0.5))
+}).setLayout({
+        name: 'scale2d',
+        type: 'vec2',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 's', type: 'float' },
+        ],
+})
+
+export const scale2dWithCenter = Fn(([st, s, center]: [Vec2, Float, Vec2]): Vec2 => {
         return st.sub(center).mul(s).add(center)
 }).setLayout({
-        name: 'scale',
-        type: 'auto',
+        name: 'scale2dWithCenter',
+        type: 'vec2',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 's', type: 'float' },
+                { name: 'center', type: 'vec2' },
+        ],
+})
+
+export const scale2dVec = Fn(([st, s]: [Vec2, Vec2]): Vec2 => {
+        return st.sub(vec2(0.5)).mul(s).add(vec2(0.5))
+}).setLayout({
+        name: 'scale2dVec',
+        type: 'vec2',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 's', type: 'vec2' },
+        ],
+})
+
+export const scale3d = Fn(([st, s]: [Vec3, Float]): Vec3 => {
+        return st.sub(vec3(0.5)).mul(s).add(vec3(0.5))
+}).setLayout({
+        name: 'scale3d',
+        type: 'vec3',
         inputs: [
-                { name: 'st', type: 'auto' },
-                { name: 's', type: 'auto' },
-                { name: 'center', type: 'auto' },
+                { name: 'st', type: 'vec3' },
+                { name: 's', type: 'float' },
         ],
 })
+
+export const scale = scale2dVec

package/src/addons/space/windmillTile.ts

@@ -1,4 +1,5 @@
 import { Fn, Vec2, Vec4, Float, mod, abs, vec4 } from '../../node'
+import { TWO_PI } from '../math'
 import { rotate2DBasic } from './rotate'
 import { sqTile } from './sqTile'
 
@@ -20,7 +21,7 @@ export const windmillTileDefault = Fn(([t]: [Vec4]): Vec4 => {
         const a = abs(mod(t.z, 2).sub(mod(t.w, 2)))
                 .add(mod(t.w, 2).mul(2))
                 .mul(0.25)
-        return vec4(rotate2DBasic(t.xy, a.mul(6.283185307179586)), t.zw)
+        return vec4(rotate2DBasic(t.xy, a.mul(TWO_PI)), t.zw)
 }).setLayout({
         name: 'windmillTileDefault',
         type: 'vec4',

package/src/node/create.ts

@@ -2,7 +2,7 @@ import { compute, fragment, vertex } from './build'
 import { addToScope, assign, toVar } from './scope'
 import { code, getConstant, isConversion, isFunction, isOperator, getId, isArrayAccess } from './utils'
 import { is } from '../utils/helpers'
-import type { Constants as C, Functions, NodeProps, NodeTypes, Operators, X, Y } from './types'
+import type { Bool, Constants as C, Functions, NodeProps, NodeTypes, Operators, X, Y } from './types'
 
 const toPrimitive = (x: Y, hint: string) => {
         if (hint === 'string') return code(x as any, null)
@@ -15,7 +15,6 @@ export const create = <T extends C>(type: NodeTypes, props?: NodeProps | null, .
         const get = (_: unknown, key: string | Symbol) => {
                 if (key === 'type') return type
                 if (key === 'props') return props
-                if (key === '__nodeType') return undefined // Will be inferred by TypeScript
                 if (key === 'toVar') return toVar.bind(null, x)
                 if (key === 'isProxy') return true
                 if (key === 'toString') return code.bind(null, x)
@@ -70,7 +69,7 @@ export const member = <T extends C>(x: X, index: Y) => create<T>('member', null,
 export const element = <T extends C>(x: X, index: Y) => create<T>('element', null, x, index)
 export const gather = <T extends C>(x: X, index: Y) => create<T>('gather', null, x, index)
 export const scatter = <T extends C>(x: X, index: Y) => create<T>('scatter', null, x, index)
-export const select = <T extends C>(x: Y, y: Y, z: Y) => create<T>('ternary', null, x, y, z) // z ? x : y @TODO REMOVE
+export const select = <T extends C>(x: Y<T>, y: Y<T>, z: Bool) => create<T>('ternary', null, x, y, z) // z ? x : y @TODO REMOVE
 export const operator = <T extends C>(key: Operators, ...x: Y[]) => create<T>('operator', null, key, ...x)
 export const function_ = <T extends C>(key: Functions, ...x: Y[]) => create<T>('function', null, key, ...x)
 export const conversion = <T extends C>(key: T, ...x: Y[]) => create<T>('conversion', null, key, ...x)

package/src/node/scope.ts

@@ -1,4 +1,3 @@
-import { getId } from './utils'
 import { conversion, create } from './create'
 import type {
         FnLayout,
@@ -12,6 +11,7 @@ import type {
         X,
         Y,
 } from './types'
+import { getId } from './utils'
 
 let scope: X | null = null
 let define: X | null = null
@@ -122,8 +122,9 @@ export const Switch = (x: Y) => {
 }
 
 export function Fn<T extends X | Struct | void, Args extends any[]>(fun: (args: Args) => T, layout?: FnLayout) {
+        const defaultId = getId()
         const ret = (...args: any[]) => {
-                const id = layout?.name || getId()
+                const id = layout?.name || defaultId
                 const paramVars: X[] = []
                 const paramDefs: NodeProps[] = []
                 for (let i = 0; i < args.length; i++) {

package/src/node/types.ts

@@ -224,7 +224,7 @@ type XImpl<T extends C> = _X<T> & {
 type C = Constants
 
 export type X<T extends C = C> = T extends keyof ConstantsToType ? ConstantsToType[T] : _X<T>
-export type Y<T extends C = C> = number | number[] | string | boolean | undefined | X<T>
+export type Y<T extends C = C> = number | number[] | string | boolean | undefined | HTMLElement | X<T>
 
 type Methods =
         | Functions

package/src/node/utils/index.ts

@@ -17,7 +17,7 @@ import {
         parseUniformHead,
         parseVaryingHead,
 } from './parse'
-import { getBluiltin, getConversions, getOperator, initNodeContext, setupEvent } from './utils'
+import { getBluiltin, getConversions, getOperator, initNodeContext, isElement, isX, setupEvent } from './utils'
 import { is } from '../../utils/helpers'
 import { mod } from '..'
 import type { Constants as C, NodeContext, Y } from '../types'
@@ -38,6 +38,7 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
         }
         if (is.bol(target)) return target ? 'true' : 'false'
         if (!target) return ''
+        if (!isX(target)) return ''
         const { type, props = {} } = target
         const { id = 'i', children = [], fields, initialValues } = props
         const [x, y, z, w] = children

package/src/node/utils/infer.ts

@@ -1,4 +1,4 @@
-import { isConstants, isX, isSwizzle } from './utils'
+import { isConstants, isElement, isX, isSwizzle } from './utils'
 import {
         BUILTIN_TYPES,
         COMPONENT_COUNT_TO_TYPE,
@@ -24,6 +24,7 @@ export const inferPrimitiveType = <T extends C>(x: Y<T>) => {
         if (is.str(x)) return 'texture' as T
         if (is.num(x)) return 'float' as T // @TODO FIX:  Number.isInteger(x) ? 'int' : 'float'
         if (is.arr(x)) return COMPONENT_COUNT_TO_TYPE[x.length as keyof typeof COMPONENT_COUNT_TO_TYPE] as T
+        if (isElement(x)) return 'texture' as T
         return 'void' as T
 }
 

package/src/node/utils/utils.ts

@@ -8,17 +8,7 @@ import {
         WGSL_TO_GLSL_BUILTIN,
 } from './const'
 import { is } from '../../utils/helpers'
-import type {
-        Constants as C,
-        Conversions,
-        Functions,
-        NodeContext,
-        NodeTypes,
-        Operators,
-        Swizzles,
-        X,
-        Y,
-} from '../types'
+import type { Constants as C, Conversions, Functions, NodeContext, Operators, Swizzles, X, Y } from '../types'
 import { storageSize } from '../../utils/program'
 
 export const isSwizzle = (key: unknown): key is Swizzles => {
@@ -33,6 +23,11 @@ export const isFunction = (key: unknown): key is Functions => {
         return FUNCTIONS.includes(key as Functions)
 }
 
+export const isElement = (x: unknown): x is Element => {
+        if (is.obj(x)) return false
+        return x instanceof Element
+}
+
 export const isConversion = (key: unknown): key is Conversions => {
         return CONVERSIONS.includes(key as Conversions)
 }

package/src/types.ts

@@ -58,9 +58,9 @@ export type GL = EventState<{
         _uniform?(key: string, value: Uniform, isMatrix?: boolean): GL
         uniform(key: string, value: Uniform, isMatrix?: boolean): 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
+        _texture?(key: string, value: Texture): GL
+        texture(key: string, value: Texture): GL
+        texture(target: { [key: string]: Texture }): GL
         _attribute?(key: string, value: Attribute, iboValue?: Attribute): GL
         attribute(key: string, value: Attribute, iboValue?: Attribute): GL
         attribute(target: { [key: string]: Attribute }): GL
@@ -73,6 +73,7 @@ export type GL = EventState<{
 }>
 
 type Uniform = number | number[] | Float32Array
+type Texture = string | HTMLImageElement | HTMLVideoElement
 type Attribute = number[] | Float32Array
 type Storage = number[] | Float32Array
 

package/src/utils/helpers.ts

@@ -1,5 +1,3 @@
-import type { GL } from './../types'
-
 export const is = {
         arr: Array.isArray,
         bol: (a: unknown): a is boolean => typeof a === 'boolean',
@@ -49,16 +47,35 @@ export const isFloat32 = (value: unknown): value is Float32Array => {
         return value instanceof Float32Array
 }
 
-export const loadingImage = (gl: GL, src: string, fun: (source: HTMLImageElement) => void) => {
-        gl.loading++
+const loadingImage = (src: string, fun: (source: HTMLImageElement) => void) => {
         const source = new Image()
         Object.assign(source, { src, crossOrigin: 'anonymous' })
-        source.decode().then(() => {
-                fun(source)
-                gl.loading--
-        })
+        source.decode().then(() => fun(source))
+}
+
+const loadingVideo = (src: string, fun: (source: HTMLVideoElement) => void) => {
+        const source = document.createElement('video')
+        source.crossOrigin = 'anonymous'
+        source.muted = true
+        source.loop = true
+        source.src = src
+        source.load()
+        source.play()
+        source.addEventListener('canplay', fun.bind(null, source), { once: true })
 }
 
+export function loadingTexture(src: string, fun: (source: HTMLVideoElement, isVideo: true) => void): void
+
+export function loadingTexture(src: string, fun: (source: HTMLImageElement, isVideo: false) => void): void
+
+export function loadingTexture(src: string | HTMLImageElement | HTMLVideoElement, fun: Function) {
+        if (!is.str(src)) return fun(src, src instanceof HTMLVideoElement)
+        const isVideo = /\.(mp4|webm|ogg|avi|mov)$/i.test(src)
+        const loader = isVideo ? loadingVideo : loadingImage
+        loader(src, (el: HTMLImageElement | HTMLVideoElement) => {
+                fun(el as HTMLVideoElement, isVideo)
+        })
+}
 const isValidStride = (stride: number) => [1, 2, 3, 4, 9, 16].includes(stride)
 
 const calcStride = (arrayLength: number, count = 3) => {

package/src/utils/program.ts

@@ -67,14 +67,15 @@ export const updateUniform = (c: WebGL2RenderingContext, loc: WebGLUniformLocati
 
 export const createTexture = (
         c: WebGL2RenderingContext,
-        img: HTMLImageElement,
+        el: HTMLImageElement | HTMLVideoElement,
         loc: WebGLUniformLocation,
-        unit: number
+        unit: number,
+        isVideo = false
 ) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, img)
-        c.generateMipmap(c.TEXTURE_2D)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el)
+        if (!isVideo) c.generateMipmap(c.TEXTURE_2D)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MIN_FILTER, c.LINEAR)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MAG_FILTER, c.LINEAR)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
@@ -83,6 +84,12 @@ export const createTexture = (
         c.uniform1i(loc, unit)
         c.activeTexture(c.TEXTURE0 + unit)
         c.bindTexture(c.TEXTURE_2D, texture)
+        if (isVideo)
+                return () => {
+                        c.activeTexture(c.TEXTURE0 + unit)
+                        c.bindTexture(c.TEXTURE_2D, texture)
+                        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el)
+                }
 }
 
 /**

package/src/utils/webgl.ts

@@ -1,5 +1,5 @@
 import { nested as cached } from 'reev'
-import { is, loadingImage, getStride, GLSL_VS, GLSL_FS } from './helpers'
+import { is, getStride, GLSL_VS, GLSL_FS, loadingTexture } from './helpers'
 import {
         createArrayBuffer,
         cleanStorage,
@@ -105,9 +105,13 @@ export const webgl = async (gl: GL) => {
         }
 
         const _texture = (key: string, src: string) => {
+                gl.loading++
                 c.useProgram(pg)
-                loadingImage(gl, src, (source) => {
-                        createTexture(c, source, uniforms(key)!, units(key))
+                loadingTexture(src, (source, isVideo) => {
+                        const unit = units(key)
+                        const loop = createTexture(c, source, uniforms(key)!, unit, isVideo)
+                        if (loop) gl({ loop })
+                        gl.loading--
                 })
         }
 
@@ -128,8 +132,10 @@ export const webgl = async (gl: GL) => {
         }
 
         if (gl.isDepth) {
+                c.enable(c.DEPTH_TEST)
                 c.depthFunc(c.LEQUAL)
                 c.enable(c.CULL_FACE)
+                c.cullFace(c.BACK)
         }
 
         const webgl: WebGLState = { context: c, program: pg, storages: cp?.storages }

package/src/utils/webgpu.ts

@@ -1,5 +1,5 @@
 import { nested as cached } from 'reev'
-import { is, loadingImage, getStride, WGSL_FS, WGSL_VS } from './helpers'
+import { is, getStride, WGSL_FS, WGSL_VS, loadingTexture } from './helpers'
 import {
         createArrayBuffer,
         createBindGroup,
@@ -105,10 +105,18 @@ export const webgpu = async (gl: GL) => {
         }
 
         const _texture = (key: string, src: string) => {
-                loadingImage(gl, src, (source) => {
-                        const { width, height } = source
+                gl.loading++
+                loadingTexture(src, (source, isVideo) => {
+                        const [width, height] = isVideo
+                                ? [source.videoWidth, source.videoHeight]
+                                : [source.width, source.height]
                         const { texture } = textures(key, width, height)
-                        device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
+                        const loop = () => {
+                                device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
+                        }
+                        loop()
+                        if (isVideo) gl({ loop })
+                        gl.loading--
                 })
         }