Material framework improvements, minor fixes

src/assetmanager/AssetManager.ts

@@ -328,8 +328,8 @@ export class AssetManager extends EventDispatcher<BaseEvent&{data: ImportResult}
         if (!viewer) return
 
         const importers: Importer[] = [
-            new Importer(TextureLoader, ['webp', 'png', 'jpeg', 'jpg', 'svg', 'ico', 'data:image'], [
-                'image/webp', 'image/png', 'image/jpeg', 'image/svg+xml', 'image/gif', 'image/bmp', 'image/tiff', 'image/x-icon',
+            new Importer(TextureLoader, ['webp', 'png', 'jpeg', 'jpg', 'svg', 'ico', 'data:image', 'avif'], [
+                'image/webp', 'image/png', 'image/jpeg', 'image/svg+xml', 'image/gif', 'image/bmp', 'image/tiff', 'image/x-icon', 'image/avif',
             ], false), // todo: use ImageBitmapLoader if supported (better performance)
 
             new Importer<JSONMaterialLoader>(JSONMaterialLoader,

src/assetmanager/import/DRACOLoader2.ts

@@ -1,7 +1,8 @@
 import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js'
-import {BufferGeometry, Color, LoadingManager, Mesh, MeshStandardMaterial} from 'three'
+import {BufferGeometry, Color, LoadingManager, Mesh} from 'three'
 import {AnyOptions} from 'ts-browser-helpers'
 import {ILoader} from '../IImporter'
+import {PhysicalMaterial} from '../../core'
 
 export class DRACOLoader2 extends DRACOLoader implements ILoader<BufferGeometry, Mesh|undefined> {
     public encoderPending: Promise<any>|null = null
@@ -20,7 +21,7 @@ export class DRACOLoader2 extends DRACOLoader implements ILoader<BufferGeometry,
     transform(res: BufferGeometry, _: AnyOptions): Mesh|undefined {
         if (!res.attributes?.normal) res.computeVertexNormals()
         // todo set mesh name from options/path
-        return res ? new Mesh(res, new MeshStandardMaterial({color: new Color(1, 1, 1)})) : undefined
+        return res ? new Mesh(res, new PhysicalMaterial({color: new Color(1, 1, 1)})) : undefined
     }
 
     preload(decoder = true, encoder = false): DRACOLoader {

src/core/IMaterial.ts

@@ -94,10 +94,10 @@ export interface IMaterial<E extends IMaterialEvent = IMaterialEvent, ET = IMate
     toJSON(meta?: SerializationMetaType, _internal?: boolean): any;
     fromJSON(json: any, meta?: SerializationMetaType, _internal?: boolean): this | null;
 
-    extraUniformsToUpload?: Record<string, IUniform>
-    materialExtensions?: MaterialExtension[]
-    registerMaterialExtensions?: (customMaterialExtensions: MaterialExtension[]) => void;
-    unregisterMaterialExtensions?: (customMaterialExtensions: MaterialExtension[]) => void;
+    extraUniformsToUpload: Record<string, IUniform>
+    materialExtensions: MaterialExtension[]
+    registerMaterialExtensions: (customMaterialExtensions: MaterialExtension[]) => void;
+    unregisterMaterialExtensions: (customMaterialExtensions: MaterialExtension[]) => void;
 
     /**
      * Managed internally, do not change manually

src/core/ITexture.ts

@@ -1,5 +1,5 @@
 import {IMaterial} from './IMaterial'
-import {Event, Texture} from 'three'
+import {Event, Source, Texture} from 'three'
 import {ChangeEvent} from 'uiconfig.js'
 import {IRenderTarget} from '../rendering'
 
@@ -33,6 +33,10 @@ export interface ITexture extends Texture {
 
     setDirty?(): void
 
+    source: Source & {
+        _sourceImgBuffer?: ArrayBuffer // see KTX2LoadPlugin and serializeTextureInExtras
+    }
+
     _target?: IRenderTarget // for internal use only. refers to the render target that this texture is attached to
 }
 

src/core/material/PhysicalMaterial.ts

@@ -24,7 +24,7 @@ import {
     IMaterialTemplate,
 } from '../IMaterial'
 import {SerializationMetaType, ThreeSerialization} from '../../utils/serialization'
-import {MaterialExtender, MaterialExtension} from '../../materials'
+import {MaterialExtension} from '../../materials'
 import {iMaterialCommons, threeMaterialPropList} from './iMaterialCommons'
 import {IObject3D} from '../IObject'
 import {ITexture} from '../ITexture'
@@ -40,8 +40,6 @@ export class PhysicalMaterial extends MeshPhysicalMaterial<IMaterialEvent, Physi
 
     public readonly isPhysicalMaterial = true
 
-    public materialExtensions: MaterialExtension[] = []
-
     readonly appliedMeshes: Set<IObject3D> = new Set()
     readonly setDirty = iMaterialCommons.setDirty
     dispose(): this {return iMaterialCommons.dispose(super.dispose).call(this)}
@@ -70,13 +68,13 @@ export class PhysicalMaterial extends MeshPhysicalMaterial<IMaterialEvent, Physi
 
     // region Material Extension
 
+    materialExtensions: MaterialExtension[] = []
     extraUniformsToUpload: Record<string, IUniform> = {}
-
     registerMaterialExtensions = iMaterialCommons.registerMaterialExtensions
     unregisterMaterialExtensions = iMaterialCommons.unregisterMaterialExtensions
 
     customProgramCacheKey(): string {
-        return super.customProgramCacheKey() + MaterialExtender.CacheKeyForExtensions(this, this.materialExtensions) + this.userData.inverseAlphaMap
+        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
@@ -110,10 +108,7 @@ export class PhysicalMaterial extends MeshPhysicalMaterial<IMaterialEvent, Physi
         }
     }
 
-    onAfterRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D): void {
-        super.onAfterRender(renderer, scene, camera, geometry, object)
-        iMaterialCommons.onAfterRender.call(this, renderer, scene, camera, geometry, object)
-    }
+    onAfterRender = iMaterialCommons.onAfterRenderOverride(super.onAfterRender)
 
     // endregion
 

src/core/material/ShaderMaterial2.ts

@@ -11,7 +11,7 @@ import {
     WebGLRenderer,
 } from 'three'
 import {IMaterial, IMaterialEvent, IMaterialEventTypes, IMaterialParameters} from '../IMaterial'
-import {MaterialExtender, MaterialExtension} from '../../materials'
+import {MaterialExtension} from '../../materials'
 import {iMaterialCommons, threeMaterialPropList} from './iMaterialCommons'
 
 export class ShaderMaterial2<E extends IMaterialEvent = IMaterialEvent, ET = IMaterialEventTypes> extends ShaderMaterial<E, ET> implements IMaterial<E, ET> {
@@ -40,8 +40,6 @@ export class ShaderMaterial2<E extends IMaterialEvent = IMaterialEvent, ET = IMa
     assetType = 'material' as const
     public readonly isAShaderMaterial = true
 
-    public materialExtensions: MaterialExtension[] = []
-
     readonly appliedMeshes: Set<any> = new Set()
     readonly setDirty = iMaterialCommons.setDirty
     dispose(): this {return iMaterialCommons.dispose(super.dispose).call(this)}
@@ -64,12 +62,13 @@ export class ShaderMaterial2<E extends IMaterialEvent = IMaterialEvent, ET = IMa
 
     // region Material Extension
 
+    materialExtensions: MaterialExtension[] = []
     extraUniformsToUpload: Record<string, IUniform> = {}
-
     registerMaterialExtensions = iMaterialCommons.registerMaterialExtensions
     unregisterMaterialExtensions = iMaterialCommons.unregisterMaterialExtensions
+
     customProgramCacheKey(): string {
-        return super.customProgramCacheKey() + MaterialExtender.CacheKeyForExtensions(this, this.materialExtensions) + this.userData.inverseAlphaMap
+        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

src/core/material/UnlitMaterial.ts

@@ -1,14 +1,10 @@
 import {
-    BufferGeometry,
-    Camera,
     Color,
     IUniform,
     Material,
     MeshBasicMaterial,
     MeshBasicMaterialParameters,
     MultiplyOperation,
-    Object3D,
-    Scene,
     Shader,
     WebGLRenderer,
 } from 'three'
@@ -21,7 +17,7 @@ import {
     IMaterialParameters,
     IMaterialTemplate,
 } from '../IMaterial'
-import {MaterialExtender, MaterialExtension} from '../../materials'
+import {MaterialExtension} from '../../materials'
 import {shaderReplaceString} from '../../utils/shader-helpers'
 import {SerializationMetaType, ThreeSerialization} from '../../utils/serialization'
 import {ITexture} from '../ITexture'
@@ -40,8 +36,6 @@ export class UnlitMaterial extends MeshBasicMaterial<IMaterialEvent, UnlitMateri
 
     public readonly isUnlitMaterial = true
 
-    public materialExtensions: MaterialExtension[] = []
-
     readonly appliedMeshes: Set<IObject3D> = new Set()
     readonly setDirty = iMaterialCommons.setDirty
     dispose(): this {return iMaterialCommons.dispose(super.dispose).call(this)}
@@ -60,16 +54,15 @@ export class UnlitMaterial extends MeshBasicMaterial<IMaterialEvent, UnlitMateri
         iMaterialCommons.upgradeMaterial.call(this)
     }
 
-
     // region Material Extension
 
+    materialExtensions: MaterialExtension[] = []
     extraUniformsToUpload: Record<string, IUniform> = {}
-
     registerMaterialExtensions = iMaterialCommons.registerMaterialExtensions
     unregisterMaterialExtensions = iMaterialCommons.unregisterMaterialExtensions
 
     customProgramCacheKey(): string {
-        return super.customProgramCacheKey() + MaterialExtender.CacheKeyForExtensions(this, this.materialExtensions) + this.userData.inverseAlphaMap
+        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
@@ -92,21 +85,18 @@ export class UnlitMaterial extends MeshBasicMaterial<IMaterialEvent, UnlitMateri
         super.onBeforeCompile(shader, renderer)
     }
 
-    onBeforeRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D): void {
-        super.onBeforeRender(renderer, scene, camera, geometry, object)
-        iMaterialCommons.onBeforeRender.call(this, renderer, scene, camera, geometry, object)
-
-        // const t = this.userData.inverseAlphaMap ? 1 : 0 // todo
-        // if (t !== this.defines.INVERSE_ALPHAMAP) {
-        //     this.defines.INVERSE_ALPHAMAP = t
-        //     this.needsUpdate = true
-        // }
-    }
-
-    onAfterRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, object: Object3D): void {
-        super.onAfterRender(renderer, scene, camera, geometry, object)
-        iMaterialCommons.onAfterRender.call(this, renderer, scene, camera, geometry, object)
-    }
+    // onBeforeRender(...args: Parameters<IMaterial['onBeforeRender']>): void {
+    //     super.onBeforeRender(...args)
+    //     iMaterialCommons.onBeforeRender.call(this, ...args)
+    //
+    //     // const t = this.userData.inverseAlphaMap ? 1 : 0 // todo
+    //     // if (t !== this.defines.INVERSE_ALPHAMAP) {
+    //     //     this.defines.INVERSE_ALPHAMAP = t
+    //     //     this.needsUpdate = true
+    //     // }
+    // }
+    onBeforeRender = iMaterialCommons.onBeforeRenderOverride(super.onBeforeRender)
+    onAfterRender = iMaterialCommons.onAfterRenderOverride(super.onAfterRender)
 
     // endregion
 

src/core/material/iMaterialCommons.ts

@@ -140,6 +140,9 @@ export const iMaterialCommons = {
             }
         },
 
+    customProgramCacheKey: function(this: IMaterial): string {
+        return MaterialExtender.CacheKeyForExtensions(this, this.materialExtensions) + this.userData.inverseAlphaMap
+    },
     registerMaterialExtensions: function(this: IMaterial, customMaterialExtensions: MaterialExtension[]): void {
         MaterialExtender.RegisterExtensions(this, customMaterialExtensions)
     },
@@ -147,6 +150,7 @@ export const iMaterialCommons = {
         MaterialExtender.UnregisterExtensions(this, customMaterialExtensions)
     },
 
+    // shader is not Shader but WebglUniforms.getParameters return value type so includes defines
     onBeforeCompile: function(this: IMaterial, shader: Shader, renderer: WebGLRenderer): void {
         if (this.materialExtensions) MaterialExtender.ApplyMaterialExtensions(this, shader, this.materialExtensions, renderer)
 
@@ -155,7 +159,6 @@ export const iMaterialCommons = {
         shader.fragmentShader = shader.fragmentShader.replaceAll('#glMarker', '// ')
         shader.vertexShader = shader.vertexShader.replaceAll('#glMarker', '// ')
     },
-
     onBeforeRender: function(this: IMaterial, renderer, scene: Scene & Partial<IScene>, camera, geometry, object) {
         if (this.envMapIntensity !== undefined && !this.userData.separateEnvMapIntensity && scene.envMapIntensity !== undefined) {
             this.userData.__envIntensity = this.envMapIntensity
@@ -182,6 +185,26 @@ export const iMaterialCommons = {
         this.dispatchEvent({type: 'afterRender', renderer, scene, camera, geometry, object})
     } as IMaterial['onAfterRender'],
 
+    onBeforeCompileOverride: (superOnBeforeCompile: Material['onBeforeCompile']): IMaterial['onBeforeCompile'] =>
+        function(this: IMaterial, shader: Shader, renderer: WebGLRenderer): void {
+            iMaterialCommons.onBeforeCompile.call(this, shader, renderer)
+            superOnBeforeCompile.call(this, shader, renderer)
+        },
+    onBeforeRenderOverride: (superOnBeforeRender: Material['onBeforeRender']): IMaterial['onBeforeRender'] =>
+        function(this: IMaterial, ...args: Parameters<Material['onBeforeRender']>): void {
+            superOnBeforeRender.call(this, ...args)
+            iMaterialCommons.onBeforeRender.call(this, ...args)
+        },
+    onAfterRenderOverride: (superOnAfterRender: Material['onAfterRender']): IMaterial['onAfterRender'] =>
+        function(this: IMaterial, ...args: Parameters<Material['onAfterRender']>): void {
+            superOnAfterRender.call(this, ...args)
+            iMaterialCommons.onAfterRender.call(this, ...args)
+        },
+    customProgramCacheKeyOverride: (superCustomPropertyCacheKey: Material['customProgramCacheKey']): IMaterial['customProgramCacheKey'] =>
+        function(this: IMaterial): string {
+            return superCustomPropertyCacheKey.call(this) + iMaterialCommons.customProgramCacheKey.call(this)
+        },
+
     upgradeMaterial: upgradeMaterial,
     // todo;
 } as const
@@ -197,7 +220,7 @@ export function upgradeMaterial(this: IMaterial): IMaterial {
     if (!this.setDirty) this.setDirty = iMaterialCommons.setDirty
     if (!this.appliedMeshes) this.appliedMeshes = new Set()
     if (!this.userData) this.userData = {}
-    this.userData.uuid = this.uuid
+    this.userData.uuid = this.uuid // for serialization
 
     // legacy
     if (!this.userData.setDirty) this.userData.setDirty = (e: any) => {
@@ -212,6 +235,16 @@ export function upgradeMaterial(this: IMaterial): IMaterial {
     this.clone = iMaterialCommons.clone(this.clone)
     this.dispatchEvent = iMaterialCommons.dispatchEvent(this.dispatchEvent)
 
+    // material extensions
+    if (!this.extraUniformsToUpload) this.extraUniformsToUpload = {}
+    if (!this.materialExtensions) this.materialExtensions = []
+    if (!this.registerMaterialExtensions) this.registerMaterialExtensions = iMaterialCommons.registerMaterialExtensions
+    if (!this.unregisterMaterialExtensions) this.unregisterMaterialExtensions = iMaterialCommons.unregisterMaterialExtensions
+    this.onBeforeCompile = iMaterialCommons.onBeforeCompileOverride(this.onBeforeCompile)
+    this.onBeforeRender = iMaterialCommons.onBeforeRenderOverride(this.onBeforeRender)
+    this.onAfterRender = iMaterialCommons.onAfterRenderOverride(this.onAfterRender)
+    this.customProgramCacheKey = iMaterialCommons.customProgramCacheKeyOverride(this.customProgramCacheKey)
+
     // todo: add uiconfig, serialization, other stuff from UnlitMaterial?
     // dispose uiconfig etc. on dispose
 

src/plugins/import/Rhino3dmLoadPlugin.ts

@@ -2,7 +2,7 @@ import {IViewerPluginSync, ThreeViewer} from '../../viewer'
 import {Importer, Rhino3dmLoader2} from '../../assetmanager'
 
 /**
- * Adds support for loading Rhino `.3dm` files.
+ * Adds support for loading Rhino `.3dm`, `model/vnd.3dm`, `model/3dm` files and data uris.
  * @category Plugins
  */
 export class Rhino3dmLoadPlugin implements IViewerPluginSync {