feat: use outline instead of bounding box (#737)

decentraland · Sep 15, 2023 · 88f3deb · 88f3deb
1 parent dd17bb7
commit 88f3deb
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 6 deletions.
diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/editorComponents/selection.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/editorComponents/selection.ts
@@ -1,12 +1,49 @@
+import { AbstractMesh, Color3, Vector3 } from '@babylonjs/core'
 import { ComponentType } from '@dcl/ecs'
 import { EcsEntity } from '../EcsEntity'
 import type { ComponentOperation } from '../component-operations'
 
+let addedCameraObservable = false
+const highlightedMeshes = new Set<AbstractMesh>()
+
+export function toggleSelection(mesh: AbstractMesh, value: boolean) {
+  mesh.renderOutline = value
+  mesh.outlineColor = Color3.White()
+  mesh.renderOverlay = value
+  mesh.overlayColor = Color3.White()
+  mesh.overlayAlpha = 0.1
+  if (value) {
+    highlightedMeshes.add(mesh)
+  } else {
+    highlightedMeshes.delete(mesh)
+  }
+}
+
 export const putEntitySelectedComponent: ComponentOperation = (entity, component) => {
   if (component.componentType === ComponentType.LastWriteWinElementSet) {
     const componentValue = component.getOrNull(entity.entityId) as { gizmo: number } | null
+    const scene = entity.context.deref()!.scene
+
+    if (!addedCameraObservable && scene.activeCamera) {
+      scene.activeCamera.onViewMatrixChangedObservable.add(() => {
+        if (!scene.activeCamera) return
+        for (const mesh of highlightedMeshes) {
+          const distance = Vector3.Distance(scene.activeCamera.position, mesh.position)
+          mesh.outlineWidth = distance / 500
+        }
+      })
+      addedCameraObservable = true
+    }
+
     if (entity.meshRenderer) {
-      entity.meshRenderer.showBoundingBox = !!componentValue
+      toggleSelection(entity.meshRenderer, !!componentValue)
+    }
+
+    if (entity.gltfContainer) {
+      for (const mesh of entity.gltfContainer.getChildMeshes()) {
+        if (mesh.name.includes('collider')) continue
+        toggleSelection(mesh, !!componentValue)
+      }
     }
 
     updateGizmoManager(entity, componentValue)

diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/mesh-renderer.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/mesh-renderer.ts
@@ -1,9 +1,9 @@
-import * as BABYLON from '@babylonjs/core'
-import { MeshBuilder, VertexBuffer } from '@babylonjs/core'
+import { Mesh, MeshBuilder, VertexBuffer } from '@babylonjs/core'
 import { ComponentType, PBMeshRenderer } from '@dcl/ecs'
 
 import type { ComponentOperation } from '../component-operations'
 import { EcsEntity } from '../EcsEntity'
+import { toggleSelection } from '../editorComponents/selection'
 import { setMeshRendererMaterial } from './material'
 
 export const putMeshRendererComponent: ComponentOperation = (entity, component) => {
@@ -15,7 +15,7 @@ export const putMeshRendererComponent: ComponentOperation = (entity, component)
     // this is not optimal for production code, re-using when possible is RECOMMENDED
     removeMeshRenderer(entity)
 
-    let mesh: BABYLON.Mesh | undefined = undefined
+    let mesh: Mesh | undefined = undefined
 
     // then proceed to create the desired MeshRenderer
     if (newValue?.mesh?.$case === 'box') {
@@ -57,8 +57,10 @@ export const putMeshRendererComponent: ComponentOperation = (entity, component)
     // make the renderer interactable only if the entity is Pickable
     if (entity.meshRenderer) {
       entity.meshRenderer.isPickable = true
-      entity.meshRenderer.showBoundingBox =
+      toggleSelection(
+        entity.meshRenderer,
         entity.context.deref()?.editorComponents.Selection.has(entity.entityId) || false
+      )
     }
 
     setMeshRendererMaterial(entity)
@@ -74,7 +76,7 @@ function removeMeshRenderer(entity: EcsEntity) {
   }
 }
 
-function setMeshUvs(mesh: BABYLON.Mesh, uvs: number[] = []) {
+function setMeshUvs(mesh: Mesh, uvs: number[] = []) {
   if (!uvs.length) {
     mesh.updateVerticesData(VertexBuffer.UVKind, [0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0])
   } else {