Add defines to shader type in MaterialExtender, other minor fixes

src/core/material/LegacyPhongMaterial.ts

@@ -86,7 +86,7 @@ export class LegacyPhongMaterial extends MeshPhongMaterial<IMaterialEvent, Phong
         for (const vElement of f) shader.fragmentShader = shaderReplaceString(shader.fragmentShader, vElement[0], '#glMarker ' + vElement[1] + '\n' + vElement[0])
 
         iMaterialCommons.onBeforeCompile.call(this, shader, renderer)
-        // ;(shader as any).defines.INVERSE_ALPHAMAP = this.userData.inverseAlphaMap ? 1 : 0 // todo
+        // shader.defines.INVERSE_ALPHAMAP = this.userData.inverseAlphaMap ? 1 : 0 // todo
 
         super.onBeforeCompile(shader, renderer)
     }

src/core/material/PhysicalMaterial.ts

@@ -80,7 +80,7 @@ export class PhysicalMaterial extends MeshPhysicalMaterial<IMaterialEvent, Physi
         return super.customProgramCacheKey() + iMaterialCommons.customProgramCacheKey.call(this)
     }
 
-    onBeforeCompile(shader: Shader, renderer: WebGLRenderer): void { // shader is not Shader but WebglUniforms.getParameters return value type so includes defines
+    onBeforeCompile(shader: Shader&{defines: any}, renderer: WebGLRenderer): void { // shader is not Shader but WebglUniforms.getParameters return value type so includes defines
         const f = [
             ['vec3 totalDiffuse = ', 'afterModulation'],
             ['#include <aomap_fragment>', 'beforeModulation'],
@@ -95,7 +95,7 @@ export class PhysicalMaterial extends MeshPhysicalMaterial<IMaterialEvent, Physi
 
         iMaterialCommons.onBeforeCompile.call(this, shader, renderer)
 
-        ;(shader as any).defines && ((shader as any).defines.INVERSE_ALPHAMAP = this.userData.inverseAlphaMap ? 1 : 0)
+        shader.defines && (shader.defines.INVERSE_ALPHAMAP = this.userData.inverseAlphaMap ? 1 : 0)
 
         super.onBeforeCompile(shader, renderer)
     }

src/core/material/UnlitMaterial.ts

@@ -84,7 +84,7 @@ export class UnlitMaterial extends MeshBasicMaterial<IMaterialEvent, UnlitMateri
         for (const vElement of f) shader.fragmentShader = shaderReplaceString(shader.fragmentShader, vElement[0], '#glMarker ' + vElement[1] + '\n' + vElement[0])
 
         iMaterialCommons.onBeforeCompile.call(this, shader, renderer)
-        // ;(shader as any).defines.INVERSE_ALPHAMAP = this.userData.inverseAlphaMap ? 1 : 0 // todo
+        // shader.defines.INVERSE_ALPHAMAP = this.userData.inverseAlphaMap ? 1 : 0 // todo
 
         super.onBeforeCompile(shader, renderer)
     }

src/materials/MaterialExtender.ts

@@ -39,7 +39,7 @@ export class MaterialExtender {
             updateMaterialDefines(materialExtension.extraDefines, material)
 
         // Call shaderExtender if defined
-        materialExtension.shaderExtender?.(shader, material, renderer)
+        materialExtension.shaderExtender?.(shader as any, material, renderer)
         // Save last shader so that it can be used to check if shader has changed in extensions
         material.lastShader = shader
     }
@@ -150,3 +150,27 @@ function materialAfterRender({target, object, renderer}:{object?: Object3D, rend
         value.onAfterRender?.(object, material, renderer)
     }
 }
+
+
+/**
+ * Creates a {@link MaterialExtension} with getUiConfig that also caches the config for the material based on uuid
+ * @param getUiConfig - function that returns a ui config. make sure its static.
+ * @param uuid uuid to use.
+ */
+export function uiConfigMaterialExtension(getUiConfig: Required<MaterialExtension>['getUiConfig'], uuid?: string) {
+    const uuid1 = uuid || generateUUID()
+    return {
+        uuid: uuid1,
+
+        // todo clean code.
+        getUiConfig: material => {
+            if (!(material as any).__uiConfigs) (material as any).__uiConfigs = {} as any // todo remove reference sometime after plugin removed
+            if ((material as any).__uiConfigs[uuid1]) return (material as any).__uiConfigs[uuid1]
+            const config = getUiConfig(material);
+            (material as any).__uiConfigs[uuid1] = config
+            return config
+        },
+
+        isCompatible: () => true,
+    } as MaterialExtension
+}

src/materials/MaterialExtension.ts

@@ -25,7 +25,7 @@ export interface MaterialExtension{
      * @param material
      * @param renderer
      */
-    shaderExtender?: (shader: Shader, material: IMaterial, renderer: WebGLRenderer) => void,
+    shaderExtender?: (shader: Shader&{defines: any; extensionDerivatives?: boolean}, material: IMaterial, renderer: WebGLRenderer) => void,
     /**
      * Extra code to add to the top of the fragment shader
      * Value can be a string or a function that returns a string

src/plugins/material/ClearcoatTintPlugin.ts

@@ -75,7 +75,7 @@ vec3 clearcoatTint(const in float dotNV, const in float dotNL, const in float cl
                 'outgoingLight = outgoingLight * ( 1.0 - material.clearcoat * Fcc ) + clearcoatSpecular * material.clearcoat;',
                 'outgoingLight *= clearcoatTint(dotNVcc, dotNVcc, material.clearcoat);\n', {prepend: true})
 
-            ;(shader as any).defines.USE_UV = ''
+            shader.defines.USE_UV = ''
 
         },
         onObjectRender: (_, material) => {

src/plugins/material/CustomBumpMapPlugin.ts

@@ -100,7 +100,7 @@ export class CustomBumpMapPlugin extends AViewerPluginSync<''> {
                 `, {prepend: true},
             )
 
-            ;(shader as any).defines.USE_UV = ''
+            shader.defines.USE_UV = ''
         },
         onObjectRender: (object: IObject3D, material) => {
             const userData = material.userData

src/plugins/material/NoiseBumpMaterialPlugin.ts

@@ -67,8 +67,8 @@ export class NoiseBumpMaterialPlugin extends AViewerPluginSync<''> {
         shaderExtender: (shader, material: PhysicalMaterial) => {
             if (this.isDisabled() || !material?.userData._noiseBumpMat?.hasBump) return
             shader.fragmentShader = shaderReplaceString(shader.fragmentShader, '#glMarker beforeAccumulation', NoiseBumpMaterialPluginPatch, {prepend: true})
-            ;(shader as any).defines.USE_UV = ''
-            ;(shader as any).extensionDerivatives = true
+            shader.defines.USE_UV = ''
+            shader.extensionDerivatives = true
         },
         onObjectRender: (_: IObject3D, material) => {
             const tfUd = material.userData._noiseBumpMat

src/postprocessing/ScreenPass.ts

@@ -13,7 +13,7 @@ import {CopyShader} from 'three/examples/jsm/shaders/CopyShader.js'
 import {IPassID, IPipelinePass} from './Pass'
 import {uiDropdown, uiFolderContainer, UiObjectConfig, uiToggle} from 'uiconfig.js'
 import {ViewerRenderManager} from '../viewer'
-import {matDefine, threeConstMappings} from '../three'
+import {matDefineBool, threeConstMappings} from '../three'
 import ScreenPassShader from './ScreenPass.glsl'
 import {shaderReplaceString} from '../utils'
 
@@ -68,8 +68,9 @@ export class ScreenPass extends ExtendedShaderPass implements IPipelinePass<'scr
         super.dispose()
     }
 
-    @matDefine('CLIP_BACKGROUND', undefined, undefined, ScreenPass.prototype.setDirty, (v)=>v ? '1' : undefined, (v)=>!!v)
-    @uiToggle() clipBackground = false
+    // todo test
+    @matDefineBool('CLIP_BACKGROUND', undefined, undefined, ScreenPass.prototype.setDirty, true)
+    @uiToggle() clipBackground = false // todo show warning that gbuffer is required
 
     beforeRender(_: IScene, _1: ICamera, renderManager: ViewerRenderManager) {
         this.material.uniforms.tTransparent.value = renderManager.renderPass.preserveTransparentTarget ? renderManager.renderPass.transparentTarget?.texture || null : null

src/three/utils/decorators.ts

@@ -51,7 +51,7 @@ function callOnChange(this: any, onChange: (...args: any[]) => any, params: any[
 }
 
 /**
- * Decorator to create a three.js style define in this or this.material and bind to a property.
+ * Decorator to create a three.js style define in this.material or this and bind to a property.
  * see also - {@link matDefineBool}
  * @param key - define name
  * @param customDefines - object for setting define value (like ShaderMaterial.defines), otherwise this.material.defines is taken

src/three/utils/index.ts

@@ -1,7 +1,7 @@
 export {computeScreenSpaceBoundingBox} from './bbox'
 export {overrideThreeCache} from './cache'
 export {dataTextureFromColor, dataTextureFromVec4, halfFloatToRgbe} from './conversion'
-export {uniform, matDefine} from './decorators'
+export {uniform, matDefine, matDefineBool, bindToValue} from './decorators'
 export {getEncodingComponents, getTexelEncoding, getTexelDecoding, getTexelDecoding2, getTexelDecodingFunction, getTexelEncodingFunction, getTextureColorSpaceFromMap} from './encoding'
 export {generateUUID, toIndexedGeometry, isInScene, localToWorldQuaternion, worldToLocalQuaternion} from './misc'
 export {getTextureDataType, textureToCanvas, textureDataToImageData, textureToDataUrl, textureToBlob, texImageToCanvas} from './texture'

src/utils/shaders/randomHelpers.glsl

@@ -1,6 +1,5 @@
 #ifndef BASIC_RANDOM_HELPERS
 #define BASIC_RANDOM_HELPERS
-uniform float frameCount;
 
 float random(float n){return fract(sin(n) * 43758.5453123);}