glre 0.40.0 → 0.41.0

package/dist/react.d.ts

@@ -155,7 +155,7 @@ type Color = XImpl<'color'>;
 type Mat2 = XImpl<'mat2'>;
 type Mat3 = XImpl<'mat3'>;
 type Mat4 = XImpl<'mat4'>;
-type Texture = XImpl<'texture'>;
+type Texture$1 = XImpl<'texture'>;
 type Sampler2D = XImpl<'sampler2D'>;
 type StructBase = XImpl<'struct'>;
 interface ConstantsToType {
@@ -180,7 +180,7 @@ interface ConstantsToType {
     mat2: Mat2;
     mat3: Mat3;
     mat4: Mat4;
-    texture: Texture;
+    texture: Texture$1;
     sampler2D: Sampler2D;
     struct: StructBase;
 }
@@ -386,10 +386,10 @@ type GL = EventState<{
     uniform(target: {
         [key: string]: Uniform;
     }): GL;
-    _texture?(key: string, value: string): GL;
-    texture(key: string, value: string): GL;
+    _texture?(key: string, value: Texture): GL;
+    texture(key: string, value: Texture): GL;
     texture(target: {
-        [key: string]: string;
+        [key: string]: Texture;
     }): GL;
     _attribute?(key: string, value: Attribute, iboValue?: Attribute): GL;
     attribute(key: string, value: Attribute, iboValue?: Attribute): GL;
@@ -408,6 +408,7 @@ type GL = EventState<{
     }): GL;
 }>;
 type Uniform = number | number[] | Float32Array;
+type Texture = string | HTMLImageElement | HTMLVideoElement;
 type Attribute = number[] | Float32Array;
 type Storage = number[] | Float32Array;
 /**
@@ -501,10 +502,10 @@ declare const createGL: (props?: Partial<GL>) => EventState<{
     uniform(target: {
         [key: string]: number | number[] | Float32Array<ArrayBufferLike>;
     }): GL;
-    _texture?(key: string, value: string): GL;
-    texture(key: string, value: string): GL;
+    _texture?(key: string, value: string | HTMLImageElement | HTMLVideoElement): GL;
+    texture(key: string, value: string | HTMLImageElement | HTMLVideoElement): GL;
     texture(target: {
-        [key: string]: string;
+        [key: string]: string | HTMLImageElement | HTMLVideoElement;
     }): GL;
     _attribute?(key: string, value: number[] | Float32Array<ArrayBufferLike>, iboValue?: number[] | Float32Array<ArrayBufferLike>): GL;
     attribute(key: string, value: number[] | Float32Array<ArrayBufferLike>, iboValue?: number[] | Float32Array<ArrayBufferLike>): GL;

package/dist/solid.d.ts

@@ -155,7 +155,7 @@ type Color = XImpl<'color'>;
 type Mat2 = XImpl<'mat2'>;
 type Mat3 = XImpl<'mat3'>;
 type Mat4 = XImpl<'mat4'>;
-type Texture = XImpl<'texture'>;
+type Texture$1 = XImpl<'texture'>;
 type Sampler2D = XImpl<'sampler2D'>;
 type StructBase = XImpl<'struct'>;
 interface ConstantsToType {
@@ -180,7 +180,7 @@ interface ConstantsToType {
     mat2: Mat2;
     mat3: Mat3;
     mat4: Mat4;
-    texture: Texture;
+    texture: Texture$1;
     sampler2D: Sampler2D;
     struct: StructBase;
 }
@@ -386,10 +386,10 @@ type GL = EventState<{
     uniform(target: {
         [key: string]: Uniform;
     }): GL;
-    _texture?(key: string, value: string): GL;
-    texture(key: string, value: string): GL;
+    _texture?(key: string, value: Texture): GL;
+    texture(key: string, value: Texture): GL;
     texture(target: {
-        [key: string]: string;
+        [key: string]: Texture;
     }): GL;
     _attribute?(key: string, value: Attribute, iboValue?: Attribute): GL;
     attribute(key: string, value: Attribute, iboValue?: Attribute): GL;
@@ -408,6 +408,7 @@ type GL = EventState<{
     }): GL;
 }>;
 type Uniform = number | number[] | Float32Array;
+type Texture = string | HTMLImageElement | HTMLVideoElement;
 type Attribute = number[] | Float32Array;
 type Storage = number[] | Float32Array;
 /**
@@ -501,10 +502,10 @@ declare const createGL: (props?: Partial<GL>) => EventState<{
     uniform(target: {
         [key: string]: number | number[] | Float32Array<ArrayBufferLike>;
     }): GL;
-    _texture?(key: string, value: string): GL;
-    texture(key: string, value: string): GL;
+    _texture?(key: string, value: string | HTMLImageElement | HTMLVideoElement): GL;
+    texture(key: string, value: string | HTMLImageElement | HTMLVideoElement): GL;
     texture(target: {
-        [key: string]: string;
+        [key: string]: string | HTMLImageElement | HTMLVideoElement;
     }): GL;
     _attribute?(key: string, value: number[] | Float32Array<ArrayBufferLike>, iboValue?: number[] | Float32Array<ArrayBufferLike>): GL;
     attribute(key: string, value: number[] | Float32Array<ArrayBufferLike>, iboValue?: number[] | Float32Array<ArrayBufferLike>): GL;

package/package.json

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

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, setupEvent } from './utils'
 import { is } from '../../utils/helpers'
 import { mod } from '..'
 import type { Constants as C, NodeContext, Y } from '../types'
@@ -37,6 +37,7 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
                 return ret + '.0'
         }
         if (is.bol(target)) return target ? 'true' : 'false'
+        if (isElement(target)) throw `` // IGNORE
         if (!target) return ''
         const { type, props = {} } = target
         const { id = 'i', children = [], fields, initialValues } = props

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--
                 })
         }
 

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--
                 })
         }