Batched Mesh For Chrome Versions < 139

Author: AlexD717

fission/src/mirabuf/MirabufInstance.ts

@@ -8,6 +8,23 @@ import { ParseErrorSeverity } from "./MirabufParser.ts"
 type MirabufPartInstanceGUID = string
 
 const WIREFRAME = false
+const CHROME_VERSION_FOR_INSTANCED_MESH = 139
+
+const detectInstancedMeshSupport = (): boolean => {
+    const userAgent = navigator.userAgent
+    const chromeMatch = userAgent.match(/Chrome\/(\d+)/)
+    
+    if (chromeMatch) {
+        const chromeVersion = parseInt(chromeMatch[1], 10)
+        console.log(`Detected Chrome ${chromeVersion}, using ${chromeVersion >= CHROME_VERSION_FOR_INSTANCED_MESH ? 'InstancedMesh' : 'BatchedMesh'}`)
+        return chromeVersion >= CHROME_VERSION_FOR_INSTANCED_MESH
+    }
+    
+    console.log(`Non-Chrome browser detected (${userAgent}), using BatchedMesh`)
+    return false
+}
+
+const USE_INSTANCED_MESH = detectInstancedMeshSupport()
 
 export enum MaterialStyle {
     REGULAR = 0,
@@ -93,8 +110,8 @@ const transformGeometry = (geometry: THREE.BufferGeometry, mesh: mirabuf.IMesh)
 class MirabufInstance {
     private _mirabufParser: MirabufParser
     private _materials: Map<string, THREE.Material>
-    private _meshes: Map<MirabufPartInstanceGUID, Array<[THREE.InstancedMesh, number]>>
-    private _batches: Array<THREE.InstancedMesh>
+    private _meshes: Map<MirabufPartInstanceGUID, Array<[THREE.InstancedMesh | THREE.BatchedMesh, number]>>
+    private _batches: Array<THREE.InstancedMesh | THREE.BatchedMesh>
 
     public get parser() {
         return this._mirabufParser
@@ -160,6 +177,17 @@ class MirabufInstance {
      * Creates ThreeJS meshes from the parsed mirabuf file.
      */
     private createMeshes() {
+        if (USE_INSTANCED_MESH) {
+            this.createInstancedMeshes()
+        } else {
+            this.createBatchedMeshes()
+        }
+    }
+
+    /**
+     * Creates InstancedMesh objects, as newer version of Chrome break with BatchedMesh
+     */
+    private createInstancedMeshes() {
         const assembly = this._mirabufParser.assembly
         const instances = assembly.data!.parts!.partInstances!
 
@@ -202,6 +230,105 @@ class MirabufInstance {
         })
     }
 
+    /**
+     * Creates BatchedMesh, more efficient, but broken in newer versions of Chrome
+     */
+    private createBatchedMeshes() {
+        const assembly = this._mirabufParser.assembly
+        const instances = assembly.data!.parts!.partInstances!
+
+        interface BatchCounts {
+            maxInstances: number
+            maxVertices: number
+            maxIndices: number
+        }
+
+        const batchMap = new Map<THREE.Material, Map<string, [mirabuf.IBody, Array<mirabuf.IPartInstance>]>>()
+        const countMap = new Map<THREE.Material, BatchCounts>()
+        
+        // Filter all instances by first material, then body
+        Object.values(instances).forEach(instance => {
+            const definition = assembly.data!.parts!.partDefinitions![instance.partDefinitionReference!]
+            const bodies = definition?.bodies ?? []
+            bodies.forEach(body => {
+                const mesh = body?.triangleMesh?.mesh
+                if (!mesh?.verts || !mesh.normals || !mesh.uv || !mesh.indices) return
+
+                const appearanceOverride = body.appearanceOverride
+                const material = WIREFRAME
+                    ? new THREE.MeshStandardMaterial({ wireframe: true, color: 0x000000 })
+                    : appearanceOverride && this._materials.has(appearanceOverride)
+                      ? this._materials.get(appearanceOverride)!
+                      : fillerMaterials[nextFillerMaterial++ % fillerMaterials.length]
+
+                let materialBodyMap = batchMap.get(material)
+                if (!materialBodyMap) {
+                    materialBodyMap = new Map<string, [mirabuf.IBody, Array<mirabuf.IPartInstance>]>()
+                    batchMap.set(material, materialBodyMap)
+                }
+
+                const partBodyGuid = this.getPartBodyGuid(definition, body)
+                let bodyInstances = materialBodyMap.get(partBodyGuid)
+                if (!bodyInstances) {
+                    bodyInstances = [body, []]
+                    materialBodyMap.set(partBodyGuid, bodyInstances)
+                }
+                bodyInstances[1].push(instance)
+
+                if (countMap.has(material)) {
+                    const count = countMap.get(material)!
+                    count.maxInstances += 1
+                    count.maxVertices += mesh.verts.length / 3
+                    count.maxIndices += mesh.indices.length
+                    return
+                }
+
+                const count: BatchCounts = {
+                    maxInstances: 1,
+                    maxVertices: mesh.verts.length / 3,
+                    maxIndices: mesh.indices.length,
+                }
+                countMap.set(material, count)
+            })
+        })
+
+        // Construct batched meshes
+        batchMap.forEach((materialBodyMap, material) => {
+            const count = countMap.get(material)!
+            const batchedMesh = new THREE.BatchedMesh(count.maxInstances, count.maxVertices, count.maxIndices)
+            this._batches.push(batchedMesh)
+
+            batchedMesh.material = material
+            batchedMesh.castShadow = true
+            batchedMesh.receiveShadow = true
+
+            materialBodyMap.forEach(instances => {
+                const body = instances[0]
+                instances[1].forEach(instance => {
+                    const mat = this._mirabufParser.globalTransforms.get(instance.info!.GUID!)!
+
+                    const geometry = new THREE.BufferGeometry()
+                    transformGeometry(geometry, body.triangleMesh!.mesh!)
+                    const geoId = batchedMesh.addGeometry(geometry)
+                    const instanceId = batchedMesh.addInstance(geoId)
+                    batchedMesh.setMatrixAt(instanceId, mat)
+
+                    let bodies = this._meshes.get(instance.info!.GUID!)
+                    if (!bodies) {
+                        bodies = []
+                        this._meshes.set(instance.info!.GUID!, bodies)
+                    }
+
+                    bodies.push([batchedMesh, geoId])
+                })
+            })
+        })
+    }
+
+    private getPartBodyGuid(partDef: mirabuf.IPartDefinition, body: mirabuf.IPartDefinition) {
+        return `${partDef.info!.GUID!}_BODY_${body.info!.GUID!}`
+    }
+
     /**
      * Adds all the meshes to the ThreeJs scene.
      *

fission/src/mirabuf/MirabufSceneObject.ts

@@ -471,9 +471,12 @@ class MirabufSceneObject extends SceneObject implements ContextSupplier {
                 .clone()
                 .premultiply(transform)
             const meshes = this._mirabufInstance.meshes.get(part) ?? []
-            meshes.forEach(([instancedMesh, instanceIndex]) => {
-                instancedMesh.setMatrixAt(instanceIndex, partTransform)
-                instancedMesh.instanceMatrix.needsUpdate = true
+            meshes.forEach(([mesh, index]) => {
+                mesh.setMatrixAt(index, partTransform)
+                // Only update instanceMatrix for InstancedMesh
+                if ('instanceMatrix' in mesh) {
+                    mesh.instanceMatrix.needsUpdate = true
+                }
             })
         })
     }