From 1b119c49a1d3744bc8ee6fa07860da7d5c98ccfa Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 14 Apr 2026 04:15:17 +0900 Subject: [PATCH] update --- packages/frontend/package.json | 8 +- packages/frontend/src/utility/room/engine.ts | 47 +++++------ pnpm-lock.yaml | 85 +++++++++----------- 3 files changed, 62 insertions(+), 78 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index b08d3e383b..15e87bc5f7 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -17,10 +17,10 @@ }, "dependencies": { "@analytics/google-analytics": "1.1.0", - "@babylonjs/core": "9.0.0", - "@babylonjs/loaders": "9.0.0", - "@babylonjs/materials": "9.0.0", - "@babylonjs/inspector": "9.0.0", + "@babylonjs/core": "9.2.1", + "@babylonjs/loaders": "9.2.1", + "@babylonjs/materials": "9.2.1", + "@babylonjs/inspector": "9.2.1", "@discordapp/twemoji": "16.0.1", "@github/webauthn-json": "2.1.1", "@mcaptcha/core-glue": "0.1.0-alpha-5", diff --git a/packages/frontend/src/utility/room/engine.ts b/packages/frontend/src/utility/room/engine.ts index 8252adc2ff..306eff0df9 100644 --- a/packages/frontend/src/utility/room/engine.ts +++ b/packages/frontend/src/utility/room/engine.ts @@ -37,6 +37,7 @@ const BAKE_TRANSFORM = false; // 実験的 const SNAPSHOT_RENDERING = false; // 実験的 const SNAPSHOT_RENDERING_NON_SUPPORTED_OBJECTS = ['aromaReedDiffuser', 'tv', 'petBottle', 'aquarium', 'lavaLamp', 'beamLamp']; +const IGNORE_OBJECTS: string[] = []; // for debug import * as BABYLON from '@babylonjs/core'; import { AxesViewer } from '@babylonjs/core/Debug/axesViewer'; @@ -267,14 +268,7 @@ class ModelManager { toMerge.push(newMesh); } - // 一度に(multiMultiMaterials: trueで)マージするよりも、いったん同じマテリアルを持つもの同士で(multiMultiMaterials: falseで)マージしてから、改めてそれらを(multiMultiMaterials: trueで)マージした方が(なぜか)ドローコールが減ってお得 - const pre = []; - const groupedByMaterial = Object.groupBy(toMerge, m => m.material?.uniqueId ?? -1); - for (const group of Object.values(groupedByMaterial)) { - const merged = BABYLON.Mesh.MergeMeshes(group, true, true, undefined, false, false); - pre.push(merged); - } - const merged = BABYLON.Mesh.MergeMeshes(pre, true, true, undefined, false, true); + const merged = BABYLON.Mesh.MergeMeshes(toMerge, true, true, undefined, false, true); merged.parent = this.root; merged.material.freeze(); if (merged.material instanceof BABYLON.MultiMaterial) { @@ -470,7 +464,7 @@ export class RoomEngine { private xGridPreviewPlane: BABYLON.Mesh; private yGridPreviewPlane: BABYLON.Mesh; private zGridPreviewPlane: BABYLON.Mesh; - private selectionOutlineLayer: BABYLON.SelectionOutlineLayer | null = null; + private selectionOutlineLayer: BABYLON.SelectionOutlineLayer; public isEditMode = false; public isSitting = ref(false); public ui = reactive({ @@ -588,9 +582,7 @@ export class RoomEngine { this.shadowGeneratorForSunLight.usePoissonSampling = true; if (!SNAPSHOT_RENDERING) this.shadowGeneratorForSunLight.getShadowMap().refreshRate = 60; // snapshot renderingではrefreshRateが設定されているとなぜかクラッシュする - if (!SNAPSHOT_RENDERING) { // Snapshot renderingでClustered Lightingが有効だとなんかエラーが出る - this.lightContainer = new BABYLON.ClusteredLightContainer('clustered', [], this.scene); - } + this.lightContainer = new BABYLON.ClusteredLightContainer('clustered', [], this.scene); this.turnOnRoomLight(); @@ -687,6 +679,8 @@ export class RoomEngine { this.zGridPreviewPlane.isPickable = false; this.zGridPreviewPlane.isVisible = false; + this.selectionOutlineLayer = new BABYLON.SelectionOutlineLayer('outliner', this.scene); + let isDragging = false; this.canvas.addEventListener('pointerdown', (ev) => { @@ -763,7 +757,7 @@ export class RoomEngine { public async init() { await this.loadRoomModel(); //await this.loadEnvModel(); - await Promise.all(this.roomState.installedObjects.filter(o => !SNAPSHOT_RENDERING || !SNAPSHOT_RENDERING_NON_SUPPORTED_OBJECTS.includes(o.type)).map(o => this.loadObject({ + await Promise.all(this.roomState.installedObjects.filter(o => !IGNORE_OBJECTS.includes(o.type) && (!SNAPSHOT_RENDERING || !SNAPSHOT_RENDERING_NON_SUPPORTED_OBJECTS.includes(o.type))).map(o => this.loadObject({ id: o.id, type: o.type, position: new BABYLON.Vector3(...o.position), @@ -1252,11 +1246,19 @@ export class RoomEngine { if (mesh.material) { if (mesh.material instanceof BABYLON.MultiMaterial) { for (const subMat of mesh.material.subMaterials) { + if ((subMat as BABYLON.PBRMaterial).subSurface.isRefractionEnabled) { + (subMat as BABYLON.PBRMaterial).subSurface.isRefractionEnabled = false; // 有効にするとドローコールが激増する(babylonのバグか仕様かは不明) + (subMat as BABYLON.PBRMaterial).transparencyMode = BABYLON.PBRMaterial.PBRMATERIAL_ALPHABLEND; + } (subMat as BABYLON.PBRMaterial).reflectionTexture = this.envMapIndoor; (subMat as BABYLON.PBRMaterial).useGLTFLightFalloff = true; // Clustered Lightingではphysical falloffを持つマテリアルはアーチファクトが発生する https://doc.babylonjs.com/features/featuresDeepDive/lights/clusteredLighting/#materials-with-a-physical-falloff-may-cause-artefacts (subMat as BABYLON.PBRMaterial).anisotropy.isEnabled = false; // なんかきれいにレンダリングされないため } } else { + if ((mesh.material as BABYLON.PBRMaterial).subSurface.isRefractionEnabled) { + (mesh.material as BABYLON.PBRMaterial).subSurface.isRefractionEnabled = false; // 有効にするとドローコールが激増する(babylonのバグか仕様かは不明) + (mesh.material as BABYLON.PBRMaterial).transparencyMode = BABYLON.PBRMaterial.PBRMATERIAL_ALPHABLEND; + } (mesh.material as BABYLON.PBRMaterial).reflectionTexture = this.envMapIndoor; (mesh.material as BABYLON.PBRMaterial).useGLTFLightFalloff = true; // Clustered Lightingではphysical falloffを持つマテリアルはアーチファクトが発生する https://doc.babylonjs.com/features/featuresDeepDive/lights/clusteredLighting/#materials-with-a-physical-falloff-may-cause-artefacts (mesh.material as BABYLON.PBRMaterial).anisotropy.isEnabled = false; // なんかきれいにレンダリングされないため @@ -1277,7 +1279,7 @@ export class RoomEngine { options: args.options, model, id: args.id, - stickyMarkerMeshUpdated: (mesh: BABYLON.Mesh) => { + stickyMarkerMeshUpdated: (mesh) => { // TODO //// stickyな子の位置を更新 //if (mesh.name.includes('__TOP__')) { @@ -1313,18 +1315,12 @@ export class RoomEngine { } private highlightMeshes(meshes: BABYLON.AbstractMesh[]) { - this.clearHighlight(); // SelectionOutlineLayerは存在するだけでドローコールが増えるので都度dispose https://forum.babylonjs.com/t/selectionoutlinelayer-doubles-the-number-of-draw-calls-despite-having-no-selection/63084 - this.selectionOutlineLayer = new BABYLON.SelectionOutlineLayer('outliner', this.scene); + this.clearHighlight(); this.selectionOutlineLayer.addSelection(meshes); } private clearHighlight() { - if (this.selectionOutlineLayer != null) { - // SelectionOutlineLayerは存在するだけでドローコールが増えるのでclearじゃなく都度dispose - // あとこれ https://forum.babylonjs.com/t/selectionoutlinelayer-error-when-webgpus-compatibilitymode-is-false/63067 - this.selectionOutlineLayer.dispose(); - this.selectionOutlineLayer = null; - } + this.selectionOutlineLayer.clearSelection(); } public beginSelectedInstalledObjectGrabbing() { @@ -1545,16 +1541,11 @@ export class RoomEngine { } if (m.subMeshes != null && m.subMeshes.length > 0 && m.material.subMaterials != null) { - const irradianceTexture = m.material.reflectionTexture?.irradianceTexture; const multiGhostMaterial = m.material.clone(`${m.material.name}_ghost`) as BABYLON.MultiMaterial; - if (multiGhostMaterial.reflectionTexture) multiGhostMaterial.reflectionTexture.irradianceTexture = irradianceTexture; // babylonのバグか知らんが、特定の環境テクスチャを使用しているマテリアルをcloneすると元のマテリアルのreflectionTextureのirradianceTextureがなぜかnullになってしまいエラーとなるので救済 https://forum.babylonjs.com/t/cloning-a-material-that-uses-a-cubetexture-with-an-irradiancetexture-causes-the-irradiancetexture-to-be-lost-from-both-the-original-and-the-cloned-material/63066 for (let i = 0; i < multiGhostMaterial.subMaterials.length; i++) { const subMaterial = multiGhostMaterial.subMaterials[i]; - const irradianceTexture = subMaterial.reflectionTexture?.irradianceTexture; - const ghostMaterial = subMaterial.clone(`${subMaterial.name}_ghost`); - if (ghostMaterial.reflectionTexture) ghostMaterial.reflectionTexture.irradianceTexture = irradianceTexture; // babylonのバグか知らんが、特定の環境テクスチャを使用しているマテリアルをcloneすると元のマテリアルのreflectionTextureのirradianceTextureがなぜかnullになってしまいエラーとなるので救済 https://forum.babylonjs.com/t/cloning-a-material-that-uses-a-cubetexture-with-an-irradiancetexture-causes-the-irradiancetexture-to-be-lost-from-both-the-original-and-the-cloned-material/63066 ghostMaterial.alpha = 0.3; ghostMaterial.transparencyMode = BABYLON.Material.MATERIAL_ALPHABLEND; multiGhostMaterial.subMaterials[i] = ghostMaterial; @@ -1562,9 +1553,7 @@ export class RoomEngine { m.material = multiGhostMaterial; } } else { - const irradianceTexture = m.material.reflectionTexture?.irradianceTexture; const ghostMaterial = m.material.clone(`${m.material.name}_ghost`); - if (ghostMaterial.reflectionTexture) ghostMaterial.reflectionTexture.irradianceTexture = irradianceTexture; // babylonのバグか知らんが、特定の環境テクスチャを使用しているマテリアルをcloneすると元のマテリアルのreflectionTextureのirradianceTextureがなぜかnullになってしまいエラーとなるので救済 https://forum.babylonjs.com/t/cloning-a-material-that-uses-a-cubetexture-with-an-irradiancetexture-causes-the-irradiancetexture-to-be-lost-from-both-the-original-and-the-cloned-material/63066 ghostMaterial.alpha = 0.3; ghostMaterial.transparencyMode = BABYLON.Material.MATERIAL_ALPHABLEND; materials.set(m.material, ghostMaterial); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a7b589adb5..8cd5b731fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -654,17 +654,17 @@ importers: specifier: 1.1.0 version: 1.1.0 '@babylonjs/core': - specifier: 9.0.0 - version: 9.0.0 + specifier: 9.2.1 + version: 9.2.1 '@babylonjs/inspector': - specifier: 9.0.0 - version: 9.0.0(9f8197eccccfecf8894cb1158583c2d5) + specifier: 9.2.1 + version: 9.2.1(849bccafbb30a6bd996df5e5f9be2a10) '@babylonjs/loaders': - specifier: 9.0.0 - version: 9.0.0(@babylonjs/core@9.0.0)(babylonjs-gltf2interface@8.51.2) + specifier: 9.2.1 + version: 9.2.1(@babylonjs/core@9.2.1)(babylonjs-gltf2interface@8.51.2) '@babylonjs/materials': - specifier: 9.0.0 - version: 9.0.0(@babylonjs/core@9.0.0) + specifier: 9.2.1 + version: 9.2.1(@babylonjs/core@9.2.1) '@discordapp/twemoji': specifier: 16.0.1 version: 16.0.1 @@ -1872,8 +1872,8 @@ packages: peerDependencies: '@babylonjs/core': ^8.0.0 - '@babylonjs/core@9.0.0': - resolution: {integrity: sha512-Y4xbHFUw28X4EC5C7NOSzPCOaenxZQgztCB1QZ64y0C85FjZaq5DfWd6gy+EUYklbigmcMIFzCpLj78Wc8EwVw==} + '@babylonjs/core@9.2.1': + resolution: {integrity: sha512-G3409wiBQTMJPzbTPV8Lz36cfmCsvp2+7nXYRisnMet1qnelogWXM+XOcZZIzDjMCwV7eII1UzETnnS0GpBfTQ==} '@babylonjs/gui-editor@8.51.2': resolution: {integrity: sha512-+kG9551b0iPK/BcPhdK3QUlaA+BJ9pt3LGiWkhyEMKYfZ0dJRjjmoFZuCAehlYU9sxEiWf1C/y96BrPt2QodIA==} @@ -1888,8 +1888,9 @@ packages: peerDependencies: '@babylonjs/core': ^8.0.0 - '@babylonjs/inspector@9.0.0': - resolution: {integrity: sha512-xZvRP4LWehg66K2489Fc/63U/pE5qIhccdDLDcywAlhIIYBKJNksWO9zK9EdHzPINFItTDo+a30ldZE0JX5S+g==} + '@babylonjs/inspector@9.2.1': + resolution: {integrity: sha512-gaxBDNuRlQjsDtTFb+TbPcL2TfRHHplkp91EsGkQW4+KM1TwUuSyskZPlFajpdX+AMMKWGDjqejIvHK40WyFrg==} + hasBin: true peerDependencies: '@babylonjs/addons': ^9.0.0 '@babylonjs/core': ^9.0.0 @@ -1905,14 +1906,14 @@ packages: react-dom: '>=16.14.0 <20.0.0' usehooks-ts: ^3.1.1 - '@babylonjs/loaders@9.0.0': - resolution: {integrity: sha512-zK8Mh5DmYOj6QILV1ljaEwNqSIxwPLKxFD0U6U8c9x5RbjcMGC0X5KUT05FIVr8tcZI2XCJp6LOd00Xj2NXPIA==} + '@babylonjs/loaders@9.2.1': + resolution: {integrity: sha512-3OZF38a/fwirBsi5H2M4uvz7YTB49laJ4BVyFZZbXxRXvraH8bWsw4hsFLjoeBAkOAJZEMoqBZtw5tCuFlgtmg==} peerDependencies: '@babylonjs/core': ^9.0.0 babylonjs-gltf2interface: ^9.0.0 - '@babylonjs/materials@9.0.0': - resolution: {integrity: sha512-wATGzT/IQZ9/h9VhjgrZt8W59ZWXZ/mEZdCP2zHdopz3fqKP3gpJlbGt8UpAQUQF6XFKJrGuzVe7Vesrg36vyw==} + '@babylonjs/materials@9.2.1': + resolution: {integrity: sha512-Jdk/i/PBlDkJdmQLJI+efBB9+Ut4bPcVCYjEM1PpAQl+mzuxehD6yBzCGndYkI+Pv9aqhc410TN/Q3wkR2GbBA==} peerDependencies: '@babylonjs/core': ^9.0.0 @@ -5547,10 +5548,6 @@ packages: eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 typescript: '>=4.8.4 <6.0.0' - '@typescript-eslint/types@8.57.0': - resolution: {integrity: sha512-dTLI8PEXhjUC7B9Kre+u0XznO696BhXcTlOn0/6kf1fHaQW8+VjJAVHJ3eTI14ZapTxdkOmc80HblPQLaEeJdg==} - engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@typescript-eslint/types@8.57.2': resolution: {integrity: sha512-/iZM6FnM4tnx9csuTxspMW4BOSegshwX5oBDznJ7S4WggL7Vczz5d2W11ecc4vRrQMQHXRSxzrCsyG5EsPPTbA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -12831,32 +12828,32 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.28.5 - '@babylonjs/addons@8.51.2(@babylonjs/core@9.0.0)': + '@babylonjs/addons@8.51.2(@babylonjs/core@9.2.1)': dependencies: - '@babylonjs/core': 9.0.0 + '@babylonjs/core': 9.2.1 - '@babylonjs/core@9.0.0': {} + '@babylonjs/core@9.2.1': {} - '@babylonjs/gui-editor@8.51.2(@babylonjs/core@9.0.0)(@babylonjs/gui@8.51.2(@babylonjs/core@9.0.0))(@types/react-dom@19.2.3(@types/react@19.2.2))(@types/react@19.2.2)': + '@babylonjs/gui-editor@8.51.2(@babylonjs/core@9.2.1)(@babylonjs/gui@8.51.2(@babylonjs/core@9.2.1))(@types/react-dom@19.2.3(@types/react@19.2.2))(@types/react@19.2.2)': dependencies: - '@babylonjs/core': 9.0.0 - '@babylonjs/gui': 8.51.2(@babylonjs/core@9.0.0) + '@babylonjs/core': 9.2.1 + '@babylonjs/gui': 8.51.2(@babylonjs/core@9.2.1) '@types/react': 19.2.2 '@types/react-dom': 19.2.3(@types/react@19.2.2) - '@babylonjs/gui@8.51.2(@babylonjs/core@9.0.0)': + '@babylonjs/gui@8.51.2(@babylonjs/core@9.2.1)': dependencies: - '@babylonjs/core': 9.0.0 + '@babylonjs/core': 9.2.1 - '@babylonjs/inspector@9.0.0(9f8197eccccfecf8894cb1158583c2d5)': + '@babylonjs/inspector@9.2.1(849bccafbb30a6bd996df5e5f9be2a10)': dependencies: - '@babylonjs/addons': 8.51.2(@babylonjs/core@9.0.0) - '@babylonjs/core': 9.0.0 - '@babylonjs/gui': 8.51.2(@babylonjs/core@9.0.0) - '@babylonjs/gui-editor': 8.51.2(@babylonjs/core@9.0.0)(@babylonjs/gui@8.51.2(@babylonjs/core@9.0.0))(@types/react-dom@19.2.3(@types/react@19.2.2))(@types/react@19.2.2) - '@babylonjs/loaders': 9.0.0(@babylonjs/core@9.0.0)(babylonjs-gltf2interface@8.51.2) - '@babylonjs/materials': 9.0.0(@babylonjs/core@9.0.0) - '@babylonjs/serializers': 8.51.2(@babylonjs/core@9.0.0)(babylonjs-gltf2interface@8.51.2) + '@babylonjs/addons': 8.51.2(@babylonjs/core@9.2.1) + '@babylonjs/core': 9.2.1 + '@babylonjs/gui': 8.51.2(@babylonjs/core@9.2.1) + '@babylonjs/gui-editor': 8.51.2(@babylonjs/core@9.2.1)(@babylonjs/gui@8.51.2(@babylonjs/core@9.2.1))(@types/react-dom@19.2.3(@types/react@19.2.2))(@types/react@19.2.2) + '@babylonjs/loaders': 9.2.1(@babylonjs/core@9.2.1)(babylonjs-gltf2interface@8.51.2) + '@babylonjs/materials': 9.2.1(@babylonjs/core@9.2.1) + '@babylonjs/serializers': 8.51.2(@babylonjs/core@9.2.1)(babylonjs-gltf2interface@8.51.2) '@fluentui-contrib/react-virtualizer': 0.5.4(@fluentui/react-shared-contexts@9.26.1(@types/react@19.2.2)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@fluentui/react-components': 9.73.0(@types/react-dom@19.2.3(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(scheduler@0.27.0) '@fluentui/react-icons': 2.0.319(react@19.2.4) @@ -12864,18 +12861,18 @@ snapshots: react-dom: 19.2.4(react@19.2.4) usehooks-ts: 3.1.1(react@19.2.4) - '@babylonjs/loaders@9.0.0(@babylonjs/core@9.0.0)(babylonjs-gltf2interface@8.51.2)': + '@babylonjs/loaders@9.2.1(@babylonjs/core@9.2.1)(babylonjs-gltf2interface@8.51.2)': dependencies: - '@babylonjs/core': 9.0.0 + '@babylonjs/core': 9.2.1 babylonjs-gltf2interface: 8.51.2 - '@babylonjs/materials@9.0.0(@babylonjs/core@9.0.0)': + '@babylonjs/materials@9.2.1(@babylonjs/core@9.2.1)': dependencies: - '@babylonjs/core': 9.0.0 + '@babylonjs/core': 9.2.1 - '@babylonjs/serializers@8.51.2(@babylonjs/core@9.0.0)(babylonjs-gltf2interface@8.51.2)': + '@babylonjs/serializers@8.51.2(@babylonjs/core@9.2.1)(babylonjs-gltf2interface@8.51.2)': dependencies: - '@babylonjs/core': 9.0.0 + '@babylonjs/core': 9.2.1 babylonjs-gltf2interface: 8.51.2 '@bcoe/v8-coverage@0.2.3': {} @@ -16771,7 +16768,7 @@ snapshots: '@stylistic/eslint-plugin@5.5.0(eslint@9.39.4)': dependencies: '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4) - '@typescript-eslint/types': 8.57.0 + '@typescript-eslint/types': 8.57.2 eslint: 9.39.4 eslint-visitor-keys: 4.2.1 espree: 10.4.0 @@ -17472,8 +17469,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/types@8.57.0': {} - '@typescript-eslint/types@8.57.2': {} '@typescript-eslint/typescript-estree@8.57.2(typescript@5.9.3)':