feat: Add Metrics Limits overlay (#890)

packages/@dcl/inspector/src/components/Renderer/Metrics/Metrics.css

@@ -0,0 +1,133 @@
+.Metrics {
+  --metrics-bottom: 8px;
+  --metrics-left: 8px;
+  --metrics-button-height: 30px;
+  --metrics-button-width: 30px;
+
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: var(--metrics-bottom);
+  left: var(--metrics-left);
+  z-index: 1;
+}
+
+.Metrics .Buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.Metrics .Buttons .Button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--metrics-button-height);
+  width: var(--metrics-button-width);
+  padding: 5px;
+  border-radius: 4px;
+  background-color: transparent;
+}
+
+.Metrics .Buttons .Button.Active svg {
+  color: var(--base-06);
+}
+
+.Metrics .Buttons .Button svg {
+  color: var(--base-02);
+}
+
+.Metrics > div.LimitExceeded {
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  cursor: default;
+}
+
+.Metrics > .Overlay {
+  display: flex;
+  flex-direction: column;
+  width: 250px;
+  position: absolute;
+  overflow-y: auto;
+  left: 0;
+  bottom: calc(var(--metrics-bottom) + var(--metrics-button-height) + 8px);
+  background-color: var(--base-19);
+  padding: 13px 12px;
+  border-radius: 4px;
+  gap: 16px;
+}
+
+.Metrics > .Overlay h2.Header {
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 17px;
+  color: var(--base-01);
+  margin-bottom: 0;
+  gap: 4px;
+}
+
+.Metrics > .Overlay .Item .Title,
+.Metrics > .Overlay .Item .Description,
+.Metrics > .Overlay .Item .Description .Key {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--base-01);
+  margin-bottom: 0;
+}
+
+.Metrics > .Overlay .secondary {
+  color: var(--base-09);
+}
+
+.Metrics > .Overlay .Items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.Metrics > .Overlay .Items .Item {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--base-18);
+}
+
+.Metrics > .Overlay .Items .Item:last-of-type {
+  border-bottom: none;
+}
+
+.Metrics > .Overlay .Item .Title {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.Metrics > .Overlay .Item .Description {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 4px;
+  line-height: 14px;
+}
+
+.Metrics > .Overlay .Item .Description .Key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  height: 18px;
+  border-radius: 4px;
+  background-color: var(--base-13);
+}
+
+.Metrics .Buttons .Button.LimitExceeded svg,
+.Metrics > .Overlay .Item .Description.LimitExceeded,
+.Metrics > .Overlay .Item .Description.LimitExceeded .secondary {
+  color: var(--error-dark);
+}
+
+.Metrics .Buttons .Button.Active.LimitExceeded svg {
+  color: var(--error-main);
+}

packages/@dcl/inspector/src/components/Renderer/Metrics/Metrics.tsx

@@ -0,0 +1,160 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import cx from 'classnames'
+import { IoGridOutline as SquaresGridIcon, IoAlertCircleOutline as AlertIcon } from 'react-icons/io5'
+import { CrdtMessageType } from '@dcl/ecs'
+
+import { withSdk, WithSdkProps } from '../../../hoc/withSdk'
+import { useChange } from '../../../hooks/sdk/useChange'
+import { useOutsideClick } from '../../../hooks/useOutsideClick'
+import type { Layout } from '../../../lib/utils/layout'
+import { GROUND_MESH_PREFIX, PARCEL_SIZE } from '../../../lib/utils/scene'
+import { Button } from '../../Button'
+import { getSceneLimits } from './utils'
+import type { Metrics } from './types'
+
+import './Metrics.css'
+
+const ICON_SIZE = 18
+const IGNORE_MATERIALS = ['layout_grid', 'grid', 'base-box', 'BackgroundSkyboxMaterial', 'BackgroundPlaneMaterial']
+const IGNORE_TEXTURES = [
+  'EffectLayerMainRTT',
+  'HighlightLayerBlurRTT',
+  'https://assets.babylonjs.com/environments/backgroundGround.png',
+  'https://assets.babylonjs.com/environments/backgroundSkybox.dds',
+  'https://assets.babylonjs.com/environments/environmentSpecular.env',
+  'data:EnvironmentBRDFTexture0',
+  'GlowLayerBlurRTT',
+  'GlowLayerBlurRTT2'
+]
+const IGNORE_MESHES = ['BackgroundHelper', 'BackgroundPlane', 'BackgroundSkybox']
+
+const Metrics = withSdk<WithSdkProps>(({ sdk }) => {
+  const ROOT = sdk.engine.RootEntity
+  const [showMetrics, setShowMetrics] = React.useState(false)
+  const [metrics, setMetrics] = React.useState<Metrics>({
+    triangles: 0,
+    entities: 0,
+    bodies: 0,
+    materials: 0,
+    textures: 0
+  })
+  const [sceneLayout, setSceneLayout] = React.useState<Layout>({
+    base: { x: 0, y: 0 },
+    parcels: []
+  })
+
+  const handleUpdateMetrics = useCallback(() => {
+    const meshes = sdk.scene.meshes.filter(
+      (mesh) => !(IGNORE_MESHES.includes(mesh.id) || mesh.id.startsWith(GROUND_MESH_PREFIX))
+    )
+    const triangles = meshes.reduce((acc, mesh) => acc + mesh.getTotalVertices(), 0)
+    const entities = (sdk.components.Nodes.getOrNull(ROOT)?.value ?? [ROOT]).length - 1
+    const uniqueTextures = new Set(
+      sdk.scene.textures
+        .filter((texture) => !IGNORE_TEXTURES.includes(texture.name))
+        .map((texture) => texture.getInternalTexture()!.uniqueId)
+    )
+    const uniqueMaterials = new Set(
+      sdk.scene.materials.map((material) => material.id).filter((id) => !IGNORE_MATERIALS.includes(id))
+    )
+    setMetrics({
+      triangles: triangles,
+      entities: entities,
+      bodies: meshes.length,
+      materials: uniqueMaterials.size,
+      textures: uniqueTextures.size
+    })
+  }, [sdk])
+
+  const handleUpdateSceneLayout = useCallback(() => {
+    const scene = sdk.components.Scene.get(ROOT)
+    setSceneLayout({ ...(scene.layout as Layout) })
+  }, [sdk, setSceneLayout])
+
+  useEffect(() => {
+    sdk.scene.onDataLoadedObservable.add(handleUpdateMetrics)
+    sdk.scene.onMeshRemovedObservable.add(handleUpdateMetrics)
+    handleUpdateSceneLayout()
+
+    return () => {
+      sdk.scene.onDataLoadedObservable.removeCallback(handleUpdateMetrics)
+      sdk.scene.onMeshRemovedObservable.removeCallback(handleUpdateMetrics)
+    }
+  }, [])
+
+  useChange(
+    ({ operation, component }) => {
+      if (operation === CrdtMessageType.PUT_COMPONENT && component?.componentId === sdk.components.Scene.componentId) {
+        handleUpdateSceneLayout()
+      }
+    },
+    [handleUpdateSceneLayout]
+  )
+
+  const limits = useMemo<Metrics>(() => {
+    const parcels = sceneLayout.parcels.length
+    return getSceneLimits(parcels)
+  }, [sceneLayout])
+
+  const limitsExceeded = useMemo<Record<string, boolean>>(() => {
+    return Object.fromEntries(
+      Object.entries(metrics)
+        .map(([key, value]) => [key, value > limits[key as keyof Metrics]])
+        .filter(([, value]) => value)
+    )
+  }, [metrics, limits])
+
+  const handleToggleMetricsOverlay = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement> | MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setShowMetrics((value) => !value)
+    },
+    [showMetrics, setShowMetrics]
+  )
+
+  const overlayRef = useOutsideClick(handleToggleMetricsOverlay)
+
+  return (
+    <div className="Metrics">
+      <div className="Buttons">
+        <Button
+          className={cx({ Active: showMetrics, LimitExceeded: Object.values(limitsExceeded).length > 0 })}
+          onClick={handleToggleMetricsOverlay}
+        >
+          <SquaresGridIcon size={ICON_SIZE} />
+        </Button>
+      </div>
+      {Object.values(limitsExceeded).length > 0 && (
+        <div className="LimitExceeded">
+          <AlertIcon />
+          Too many {Object.keys(limitsExceeded)[0].toUpperCase()}
+        </div>
+      )}
+      {showMetrics && (
+        <div ref={overlayRef} className="Overlay">
+          <h2 className="Header">
+            {sceneLayout.parcels.length} Parcels
+            <span className="secondary">
+              {sceneLayout.parcels.length * PARCEL_SIZE}m<sup>2</sup>
+            </span>
+          </h2>
+          <div className="Items">
+            {Object.entries(metrics).map(([key, value]) => (
+              <div className="Item" key={key}>
+                <div className="Title">{key.toUpperCase()}</div>
+                <div className={cx('Description', { LimitExceeded: limitsExceeded[key] })}>
+                  <span className="primary">{value}</span>
+                  {'/'}
+                  <span className="secondary">{limits[key as keyof Metrics]}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+})
+
+export default React.memo(Metrics)

packages/@dcl/inspector/src/components/Renderer/Metrics/index.ts

@@ -0,0 +1,2 @@
+import Metrics from './Metrics'
+export { Metrics }

packages/@dcl/inspector/src/components/Renderer/Metrics/types.ts

@@ -0,0 +1,15 @@
+export interface Metrics {
+  triangles: number
+  entities: number
+  bodies: number
+  materials: number
+  textures: number
+}
+
+export enum Limits {
+  triangles = 10000,
+  entities = 200,
+  bodies = 300,
+  materials = 20,
+  textures = 10
+}

packages/@dcl/inspector/src/components/Renderer/Metrics/utils.ts

@@ -0,0 +1,11 @@
+import { Limits, type Metrics } from './types'
+
+export function getSceneLimits(parcels: number): Metrics {
+  return {
+    triangles: parcels * Limits.triangles,
+    entities: parcels * Limits.entities,
+    bodies: parcels * Limits.bodies,
+    materials: Math.floor(Math.log2(parcels + 1) * Limits.materials),
+    textures: Math.floor(Math.log2(parcels + 1) * Limits.textures)
+  }
+}

packages/@dcl/inspector/src/components/Renderer/Renderer.css

@@ -3,11 +3,11 @@
   position: relative;
 }
 
-.Renderer>div:first-child {
+.Renderer > div:first-child {
   display: flex;
 }
 
-.Renderer>canvas {
+.Renderer > canvas {
   width: 100%;
   height: 100%;
   touch-action: none;

packages/@dcl/inspector/src/components/Renderer/Renderer.tsx

@@ -42,6 +42,7 @@ import { analytics, Event } from '../../lib/logic/analytics'
 import { Warnings } from '../Warnings'
 import { CameraSpeed } from './CameraSpeed'
 import { Shortcuts } from './Shortcuts'
+import { Metrics } from './Metrics'
 
 import './Renderer.css'
 
@@ -261,6 +262,7 @@ const Renderer: React.FC = () => {
       {isLoading && <Loading />}
       <Warnings />
       <CameraSpeed />
+      <Metrics />
       <Shortcuts canvas={canvasRef} onResetCamera={resetCamera} onZoomIn={zoomIn} onZoomOut={zoomOut} />
       <canvas ref={canvasRef} id="canvas" touch-action="none" />
     </div>

packages/@dcl/inspector/src/lib/babylon/decentraland/layout-manager.ts

@@ -15,7 +15,7 @@ import {
 import { memoize } from '../../logic/once'
 import { Layout } from '../../utils/layout'
 import { GridMaterial } from '@babylonjs/materials'
-import { PARCEL_SIZE } from '../../utils/scene'
+import { PARCEL_SIZE, GROUND_MESH_PREFIX } from '../../utils/scene'
 
 function disableGizmo(gizmo: IAxisDragGizmo) {
   gizmo.dragBehavior.detach()
@@ -104,7 +104,7 @@ export const getLayoutManager = memoize((scene: Scene) => {
       const x = parcel.x - base.x
       const y = parcel.y - base.y
 
-      const plane = MeshBuilder.CreatePlane(`ground_plane_${x}_${y}`, { size: PARCEL_SIZE }, scene)
+      const plane = MeshBuilder.CreatePlane(`${GROUND_MESH_PREFIX}_${x}_${y}`, { size: PARCEL_SIZE }, scene)
       plane.parent = layoutNode
       plane.position.x = x * PARCEL_SIZE
       plane.position.z = y * PARCEL_SIZE

packages/@dcl/inspector/src/lib/utils/scene.ts

@@ -1 +1,2 @@
 export const PARCEL_SIZE = 16
+export const GROUND_MESH_PREFIX = 'ground_plane'