Better bump scale fix

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "threepipe",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "threepipe",
-      "version": "0.0.43",
+      "version": "0.0.44",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.158.1002/package.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "threepipe",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

plugins/3d-tiles-renderer/package-lock.json

@@ -17,7 +17,7 @@
             }
         },
         "../../node_modules/three": {
-            "version": "0.157.1007",
+            "version": "0.158.1001",
             "license": "MIT",
             "devDependencies": {
                 "@puppeteer/browsers": "^1.4.1",
@@ -25,6 +25,7 @@
                 "@rollup/plugin-terser": "^0.4.0",
                 "chalk": "^5.2.0",
                 "concurrently": "^8.0.1",
+                "dpdm": "^3.14.0",
                 "eslint": "^8.37.0",
                 "eslint-config-mdcs": "^5.0.0",
                 "eslint-plugin-compat": "^4.1.2",

src/assetmanager/MaterialManager.ts

@@ -1,4 +1,4 @@
-import {ColorManagement, Event, EventDispatcher, EventListener2, Material, Texture} from 'three'
+import {ColorManagement, Event, EventDispatcher, EventListener2, Material, ShaderChunk, Texture} from 'three'
 import {
     IMaterial,
     iMaterialCommons,
@@ -16,6 +16,7 @@ import {downloadFile} from 'ts-browser-helpers'
 import {MaterialExtension} from '../materials'
 import {generateUUID, isInScene} from '../three'
 import {IMaterialEventMap} from '../core/IMaterial'
+import {shaderReplaceString} from '../utils'
 
 /**
  * Material Manager
@@ -38,6 +39,7 @@ export class MaterialManager<TEventMap extends object = object> extends EventDis
 
     constructor() {
         super()
+        legacyBumpScaleFixSetup()
     }
 
     /**
@@ -83,20 +85,6 @@ export class MaterialManager<TEventMap extends object = object> extends EventDis
         const lastColorManagementEnabled = ColorManagement.enabled
         if (legacyColors) ColorManagement.enabled = false
 
-        // bump map scale fix
-        // https://github.com/repalash/three.js/commit/7b13bb515866f6a002928bd28d0a793cafeaeb1a
-        const legacyBumpScale = (oldMaterial as any)?.metadata && (oldMaterial as any)?.metadata.version <= 4.6
-        if (legacyBumpScale && (oldMaterial as any)?.bumpScale !== undefined && (oldMaterial as any)?.bumpMap) {
-            // if (Math.abs((oldMaterial as any).bumpScale) > 0.01) {
-            //     (oldMaterial as any).bumpScale *= 430 // test model - http://asset-samples.threepipe.org/tests/bumpmap_normalize_migrate.glb
-            //     console.warn('MaterialManager: Old format material loaded, bump map scaled by 430, it might be incorrect.', (oldMaterial as any).bumpScale)
-            // } else {
-            console.warn('MaterialManager: Old format material loaded, bump map might be incorrect.', oldMaterial, (oldMaterial as any).bumpScale)
-            // }
-        }
-
-
-
         const material = template.generator(template.params || {})
         if (oldMaterial && material) material.setValues(oldMaterial, true)
 
@@ -391,3 +379,16 @@ export class MaterialManager<TEventMap extends object = object> extends EventDis
 
 }
 
+function legacyBumpScaleFixSetup() {
+    const a = `
+		vec3 vSigmaX = normalize( dFdx( surf_pos.xyz ) );
+		vec3 vSigmaY = normalize( dFdy( surf_pos.xyz ) );
+`
+    ShaderChunk.bumpmap_pars_fragment = shaderReplaceString(ShaderChunk.bumpmap_pars_fragment, a, `
+    #ifdef BUMP_MAP_SCALE_LEGACY
+        ${a.replace(/normalize/g, '')}
+    #else
+        ${a}
+    #endif
+    `)
+}

src/assetmanager/gltf/GLTFMaterialExtrasExtension.ts

@@ -12,7 +12,7 @@ export class GLTFMaterialExtrasExtension {
      * Also {@link Export}
      * @param loadConfigResources
      */
-    static Import = (loadConfigResources: (res: any)=>any)=> (_: GLTFParser): GLTFLoaderPlugin=>({
+    static Import = (loadConfigResources: (res: any)=>any)=> (parser: GLTFParser): GLTFLoaderPlugin=>({
         name: '__' + GLTFMaterialExtrasExtension.WebGiMaterialExtrasExtension, // __ is prefix so that the extension is added to userdata, and we can process later in afterRoot
         afterRoot: async(result: GLTF) => {
             const scenes = result.scenes || (result.scene ? [result.scene] : [])
@@ -22,7 +22,7 @@ export class GLTFMaterialExtrasExtension {
 
                 s.traverse((obj: any)=>{
                     const o = obj?.material
-                    if (!o?.isMaterial) return
+                    if (!o?.isMaterial) return // todo array materials
                     const ext = o.userData?.gltfExtensions?.[GLTFMaterialExtrasExtension.WebGiMaterialExtrasExtension]
                     if (!ext) return
 
@@ -120,6 +120,16 @@ export class GLTFMaterialExtrasExtension {
 
                     delete o.userData.gltfExtensions[GLTFMaterialExtrasExtension.WebGiMaterialExtrasExtension]
 
+                    // legacy bump map scale fix, test model - test model - http://asset-samples.threepipe.org/tests/bumpmap_normalize_migrate.glb
+                    const assetVersion = parser.json?.asset?.version ? parseFloat(parser.json?.asset?.version) : null
+                    // https://github.com/repalash/three.js/commit/7b13bb515866f6a002928bd28d0a793cafeaeb1a
+                    if ((o.userData.legacyBumpScale || assetVersion && assetVersion <= 2.0) && (o as any)?.bumpScale !== undefined && o?.bumpMap && o.defines) {
+                        console.warn('MaterialManager: Old format material loaded, bump map might be incorrect.', o, (o as any).bumpScale)
+                        o.defines.BUMP_MAP_SCALE_LEGACY = '1'
+                        o.userData.legacyBumpScale = true
+                        o.needsUpdate = true
+                    }
+
                 })
 
                 // todo: check for resources that are not used and dispose them? see todo in ThreeViewer.fromJSON

src/assetmanager/import/GLTFLoader2.ts

@@ -147,31 +147,6 @@ export class GLTFLoader2 extends GLTFLoader implements ILoader<GLTF, Object3D|un
         if (res.cameras) res.cameras.forEach(c => !c.parent && scene.add(c))
         if (res.asset) scene.userData.gltfAsset = res.asset // todo: put back in gltf in GLTFExporter2
 
-        // todo
-        if (res.asset?.version) {
-            const version = parseFloat(res.asset.version)
-            if (version <= 2.0) {
-                // bump map scale fix
-                // https://github.com/repalash/three.js/commit/7b13bb515866f6a002928bd28d0a793cafeaeb1a
-                // const bounds = new Box3B().expandByObject(scene)
-                // const size = bounds.getSize(new Vector3()).length() / 2
-                const fixBump = (material: any) => {
-                    if (!material || !material.bumpMap || material.bumpScale === undefined) return
-                    // if (Math.abs(material.bumpScale) > 0.01) {
-                    //     material.bumpScale *= 430 / Math.max(size, 0.1) // test model - http://asset-samples.threepipe.org/tests/bumpmap_normalize_migrate.glb
-                    //     console.warn(`GLTFLoader2: Old format material loaded, bump map scaled by ${430 / Math.max(size, 0.1)}, it might be incorrect.`, material, material.bumpScale)
-                    // } else {
-                    console.warn('GLTFLoader2: Old format material loaded, bump map might be incorrect.', material, material.bumpScale)
-                    // }
-                }
-                scene?.traverse((obj: any)=>{
-                    if (!obj?.material) return
-                    const mats = Array.isArray(obj.material) ? obj.material : [obj.material]
-                    mats.forEach(fixBump)
-                })
-            }
-        }
-
         return scene
     }
 

src/core/material/iMaterialCommons.ts

@@ -104,6 +104,16 @@ export const iMaterialCommons = {
 
             if (userData) copyMaterialUserData(this.userData, userData)
 
+            // bump map scale fix todo: move this to Material.fromJSON
+            // https://github.com/repalash/three.js/commit/7b13bb515866f6a002928bd28d0a793cafeaeb1a
+            const legacyBumpScale = (parameters as any)?.metadata && (parameters as any)?.metadata.version <= 4.6
+            if ((legacyBumpScale || this.userData.legacyBumpScale) && (this as any)?.bumpScale !== undefined && this?.bumpMap && this.defines) {
+                console.warn('MaterialManager: Old format material loaded, bump map might be incorrect.', parameters, (parameters as any).bumpScale)
+                this.defines.BUMP_MAP_SCALE_LEGACY = '1'
+                this.userData.legacyBumpScale = true
+                this.needsUpdate = true
+            }
+
             if (legacyColors) ColorManagement.enabled = lastColorManagementEnabled
 
             this.setDirty?.()

src/plugins/material/shaders/CustomBumpMapPlugin.glsl

@@ -71,9 +71,15 @@ vec2 dHdxy_fwd_cb() {
 #ifndef USE_BUMPMAP
 vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) {
 
+    #ifdef BUMP_MAP_SCALE_LEGACY
+    vec3 vSigmaX = ( dFdx( surf_pos.xyz ) );
+    vec3 vSigmaY = ( dFdy( surf_pos.xyz ) );
+    #else
     // normalize is done to ensure that the bump map looks the same regardless of the texture's scale
     vec3 vSigmaX = normalize( dFdx( surf_pos.xyz ) );
     vec3 vSigmaY = normalize( dFdy( surf_pos.xyz ) );
+    #endif
+
     vec3 vN = surf_norm; // normalized
 
     vec3 R1 = cross( vSigmaY, vN );

src/plugins/material/shaders/NoiseBumpMaterialPlugin.pars.glsl

@@ -12,9 +12,14 @@ uniform vec3 flakeFallOffParams; // useFallOff, fallOffFactor
 
 vec3 perturbNormalArb_nb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) {
 
+    #ifdef BUMP_MAP_SCALE_LEGACY
+    vec3 vSigmaX = ( dFdx( surf_pos.xyz ) );
+    vec3 vSigmaY = ( dFdy( surf_pos.xyz ) );
+    #else
     // normalize is done to ensure that the bump map looks the same regardless of the texture's scale
     vec3 vSigmaX = normalize( dFdx( surf_pos.xyz ) );
     vec3 vSigmaY = normalize( dFdy( surf_pos.xyz ) );
+    #endif
     vec3 vN = surf_norm; // normalized
 
     vec3 R1 = cross( vSigmaY, vN );

src/viewer/version.ts

@@ -1 +1 @@
-export const VERSION = '0.0.43'
+export const VERSION = '0.0.44'