Add mappings for three.js constants, add support for extraUniforms in @uniform, add support for extraDefines and improvements in @matDefine

src/three/utils/const-mappings.ts

@@ -0,0 +1,95 @@
+import {
+    AdditiveBlending,
+    AnyMapping,
+    BasicDepthPacking,
+    Blending,
+    ByteType,
+    ColorSpace,
+    CubeReflectionMapping,
+    CubeUVReflectionMapping,
+    CustomBlending,
+    DepthPackingStrategies,
+    DisplayP3ColorSpace,
+    EquirectangularReflectionMapping,
+    FloatType,
+    HalfFloatType,
+    IntType,
+    LinearSRGBColorSpace,
+    MultiplyBlending,
+    NoBlending,
+    NormalBlending,
+    RGBADepthPacking,
+    RGBM16ColorSpace,
+    ShortType,
+    SRGBColorSpace,
+    SubtractiveBlending,
+    TextureDataType,
+    UnsignedByteType,
+    UnsignedInt248Type,
+    UnsignedIntType,
+    UnsignedShort4444Type,
+    UnsignedShort5551Type,
+    UnsignedShortType,
+    UVMapping,
+} from 'three'
+import {UiObjectConfig} from 'uiconfig.js'
+
+const blending: Record<string, Blending> = {
+    None: NoBlending,
+    Normal: NormalBlending,
+    Additive: AdditiveBlending,
+    Subtractive: SubtractiveBlending,
+    Multiply: MultiplyBlending,
+    Custom: CustomBlending,
+}
+
+const mapping: Record<string, AnyMapping> = {
+    UV: UVMapping,
+    Cube: CubeReflectionMapping,
+    // CubeRefraction: CubeRefractionMapping,
+    CubeUV: CubeUVReflectionMapping,
+    Equirectangular: EquirectangularReflectionMapping,
+    // EquirectangularRefraction: EquirectangularRefractionMapping,
+}
+
+const colorSpace: Record<string, ColorSpace> = {
+    None: '',
+    SRGB: SRGBColorSpace,
+    LinearSRGB: LinearSRGBColorSpace,
+    RGBM16: RGBM16ColorSpace,
+    DisplayP3: DisplayP3ColorSpace,
+}
+
+const textureDataType: Record<string, TextureDataType> = {
+    UnsignedByte: UnsignedByteType,
+    Byte: ByteType,
+    Short: ShortType,
+    UnsignedShort: UnsignedShortType,
+    Int: IntType,
+    UnsignedInt: UnsignedIntType,
+    Float: FloatType,
+    HalfFloat: HalfFloatType,
+    UnsignedShort4444: UnsignedShort4444Type,
+    UnsignedShort5551: UnsignedShort5551Type,
+    UnsignedInt248: UnsignedInt248Type,
+}
+
+const depthPackingStrategies: Record<string, DepthPackingStrategies> = {
+    Basic: BasicDepthPacking,
+    RGBADepthPacking: RGBADepthPacking,
+}
+
+function makeMapping<T extends string|number|symbol>(a: Record<string, T>) {
+    return {
+        map: a,
+        inv: Object.fromEntries(Object.entries(a).map(([k, v]) => [v, k])) as Record<T, string>,
+        uiConfig: Object.entries(a).map(([k, v]) => ({label: k, value: v})) as UiObjectConfig[],
+    } as const
+}
+export const threeConstMappings = {
+    Blending: makeMapping(blending),
+    AnyMapping: makeMapping(mapping),
+    ColorSpace: makeMapping(colorSpace),
+    TextureDataType: makeMapping(textureDataType),
+    DepthPackingStrategies: makeMapping(depthPackingStrategies),
+} as const

src/three/utils/decorators.ts

@@ -1,4 +1,4 @@
-import {safeSetProperty} from 'ts-browser-helpers'
+import {AnyFunction, safeSetProperty} from 'ts-browser-helpers'
 
 /**
  *
@@ -14,7 +14,7 @@ export function uniform({uniforms, propKey, thisTarget = false}: {uniforms?: any
 
     return (targetPrototype: any, propertyKey: string|symbol) => {
         const getUniform = (target: any)=>{
-            const uniforms1 = isThis ? target : cUniforms ? uniforms : target.uniforms || target._uniforms
+            const uniforms1 = isThis ? target : cUniforms ? uniforms : target.uniforms || target._uniforms || target.extraUniforms
             let propKey1 = cPropKey ? propKey : propertyKey
             if (isThis) propKey1 = '_' + (propKey1 as string)
             let a = uniforms1[propKey1!]
@@ -44,33 +44,37 @@ export function uniform({uniforms, propKey, thisTarget = false}: {uniforms?: any
  * @param key - define name
  * @param thisMat - access this.defines instead of this.material.defines
  */
-export function matDefine(key?: string|symbol, customDefines?: any, thisMat = false, onChange?: (...args: any[]) => any): PropertyDecorator {
+export function matDefine(key?: string|symbol, customDefines?: any, thisMat = false, onChange?: (...args: any[]) => any, processVal?: (newVal: any)=>any, invProcessVal?: (val:any)=>any): PropertyDecorator {
     // backing up properties as values are different when called again, no idea why.
     const cDefines = !!customDefines
     const cPropKey = !!key
 
     return (targetPrototype: any, propertyKey: string|symbol) => {
         const getTarget = (mat: any)=>{
-            const t = cDefines ? customDefines : mat.defines || mat._defines
+            const t = cDefines ? customDefines : mat.defines || mat._defines || mat.extraDefines
             const p = cPropKey ? key : propertyKey
             return {t, p}
         }
         Object.defineProperty(targetPrototype, propertyKey, {
             get() {
                 const {t, p} = getTarget(thisMat ? this : this.material)
-                return t[p]
+                let res = t[p]
+                if (invProcessVal) res = invProcessVal(res)
+                return res
             },
             set(newVal: any) {
                 const {t, p} = getTarget(thisMat ? this : this.material)
+                if (processVal) newVal = processVal(newVal)
                 safeSetProperty(t, p, newVal, true)
-                if (typeof onChange === 'function') {
+                if (newVal === undefined) delete t[p]
+                if (onChange && typeof onChange === 'function') {
                     const params = [p, newVal]
-                    // same logic as onChange in refl.ts
+                    // same logic as onChange in ts-browser-helpers. todo: loop through object prototype chain like in onChange?
                     if (onChange.name) {
-                        const fn = this[onChange.name]
+                        const fn: AnyFunction = this[onChange.name]
                         if (fn === onChange)
                             onChange.call(this, ...params)
-                        else if (fn.name === `bound ${onChange.name}`)
+                        else if (fn.name.endsWith(`bound ${onChange.name}`))
                             fn(...params)
                         else onChange(...params)
                     } else {

src/three/utils/index.ts

@@ -5,5 +5,6 @@ export {uniform, matDefine} from './decorators'
 export {getEncodingComponents, getTexelEncoding, getTexelDecoding, getTexelDecoding2, getTexelDecodingFunction, getTexelEncodingFunction, getTextureColorSpaceFromMap} from './encoding'
 export {generateUUID, toIndexedGeometry} from './misc'
 export {getTextureDataType, textureToCanvas, textureDataToImageData, textureToDataUrl, texImageToCanvas} from './texture'
+export {threeConstMappings} from './const-mappings'
 
 // export {} from './constants'