feat: spheres-only benchmark with large batches

Drop the in-scene box control group — the comparison is this scene on an
old Explorer build (no mesh sharing) vs a new one (shared mesh). Spheres
only, ADD_BATCH raised to 1000, footprint widened to span the parcels and
stack upward.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: dalkia

scenes/40,40-sphere-mesh-sharing-benchmark/README.md

@@ -4,50 +4,44 @@
 
 This scene validates a Unity Explorer memory optimization: `SpherePrimitive`
 now shares **one immutable `Mesh` asset** across every sphere entity in the
-scene, instead of allocating a brand new `Mesh` per entity. `Box` / `Plane` /
-`Cylinder` primitives are unaffected — they still allocate a distinct mesh
-per entity.
+scene, instead of allocating a brand new `Mesh` per entity.
 
-The scene starts **empty** and gives you an on-screen panel to spawn shapes in
-real time, so you can watch the Memory Profiler react as you add each batch:
+The comparison is made **across Explorer builds**, not within the scene: run
+this same scene on an **old build** (no sharing) and on a **new build** (shared
+mesh) and watch the Memory Profiler in each. There is deliberately no in-scene
+control group — the old build *is* the control.
 
-- **`+N spheres`** — spawns a batch of sphere entities (`MeshRenderer.setSphere`)
-  in the **left half** (blue) — the **optimized** path.
-- **`+N boxes`** — spawns a batch of box entities (`MeshRenderer.setBox`) in the
-  **right half** (red) — the **control/unoptimized** path.
-- **`Delete all`** — removes every spawned shape so you can start over.
+The scene starts **empty** and gives you an on-screen panel to pile on spheres
+in real time:
 
-The panel also shows the live sphere and box counts. Adding spheres leaves mesh
-memory flat; adding boxes climbs it 1:1 — the difference is attributable to the
-mesh allocation strategy, not scene layout (both use the same spacing and scale).
+- **`+N spheres`** — spawns a batch of sphere entities (`MeshRenderer.setSphere`).
+- **`Delete all`** — removes every spawned sphere so you can start over.
 
-Each button press spawns `ADD_BATCH` entities (default `100`). To change the
+Each button press spawns `ADD_BATCH` spheres (default `1000`). To change the
 batch size, edit the single constant near the top of
 [`src/spawner.ts`](src/spawner.ts):
 
 ```ts
-export const ADD_BATCH = 100
+export const ADD_BATCH = 1000
 ```
 
 ## Code layout
 
 - [`src/index.ts`](src/index.ts) — entry point; just wires up the UI.
 - [`src/spawner.ts`](src/spawner.ts) — all spawn/registry logic (`addSpheres`,
-  `addBoxes`, `deleteAll`, live counts) and the layout constants.
-- [`src/ui.tsx`](src/ui.tsx) — the on-screen panel with the buttons and counters.
+  `deleteAll`, live count) and the layout constants.
+- [`src/ui.tsx`](src/ui.tsx) — the on-screen panel with the buttons and counter.
 
 ## Scene layout
 
 - Parcels: `40,40` (base) and `41,40` — a 2-parcel-wide, 1-parcel-deep strip
-  (32m × 16m in local coordinates), large enough to hold both groups side by
-  side.
-- Spheres fill the **left half**, anchored at local `x: 2, z: 2`.
-- Boxes fill the **right half**, anchored at local `x: 17.4, z: 2`.
-- Each group grows a grid `GRID_COLUMNS = 20` wide with 0.6m spacing between
-  entity centers and a 0.4m entity scale, wrapping to a new row (`+z`) as more
-  are added. At the default parcel depth that's ~26 rows before a group runs
-  past the parcel edge; add parcels or reduce `SPACING` if you plan to spawn
-  many thousands per group.
+  (32m × 16m in local coordinates).
+- Spheres fill a fixed `GRID_COLUMNS × GRID_DEPTH` footprint (48 × 24) anchored
+  at local `x: 2, z: 1`, with 0.6m spacing and a 0.4m entity scale so spheres
+  never touch.
+- Once a layer fills (`48 × 24 = 1152` spheres), the stack grows **upward**
+  (`+y`) into the next layer. The 2-parcel scene height limit (~31m) allows
+  roughly 50 layers before the top starts clipping.
 
 ## How to run / preview
 
@@ -58,23 +52,21 @@ npm install
 npm run start
 ```
 
-Or open this folder in VS Code with the Decentraland Editor extension and
-press **Run Scene**.
+Then open `http://127.0.0.1:8000?position=40,40` in a browser, or use the
+desktop-client link the server prints. Or open this folder in VS Code with the
+Decentraland Editor extension and press **Run Scene**.
 
 ## How to validate in the Unity Explorer Profiler
 
-1. Launch the Unity Explorer and preview this scene (point it at the local
-   preview server started by `npm run start`, or deploy to a test catalyst).
-2. Once the scene has loaded, open the **Profiler** window and switch to the
-   **Memory** module. Keep it visible next to the scene.
-3. Click **`+N spheres`** several times and watch the **Mesh** asset category:
-   the sphere group should stay at a **single shared Mesh asset**, and mesh
-   memory should stay flat no matter how many spheres you add.
-4. Now click **`+N boxes`** several times: the box group should show a **new
-   distinct Mesh asset per entity**, with total mesh memory climbing linearly
-   with the box count.
-5. Click **`Delete all`** and confirm both counts drop to zero and the
-   corresponding mesh memory is released.
-
-That contrast — spheres staying flat while boxes climb 1:1, live as you click —
-is the proof that the optimization is working.
+1. Load this scene on the **old** Explorer build. Open the **Profiler** →
+   **Memory** module and note the **Mesh** asset category.
+2. Click **`+N spheres`** several times. On the old build, the Mesh asset count
+   and total mesh memory climb **1:1 with the sphere count**.
+3. Click **`Delete all`** and confirm the count and memory drop back down.
+4. Now load the exact same scene on the **new** Explorer build and repeat.
+5. This time the Mesh asset category should stay at a **single shared Mesh
+   asset**, and mesh memory should stay **flat** no matter how many spheres you
+   spawn.
+
+That difference between the two builds — mesh memory climbing on the old build
+vs. staying flat on the new one — is the proof that the optimization is working.

scenes/40,40-sphere-mesh-sharing-benchmark/src/spawner.ts

@@ -4,92 +4,79 @@ import { Color4 } from '@dcl/sdk/math'
 /**
  * Sphere mesh-sharing benchmark — runtime spawner
  * ------------------------------------------------------------------
- * Validates a Unity Explorer memory optimization: SpherePrimitive shares
- * ONE immutable Mesh asset across every sphere entity, instead of allocating
- * a new Mesh per entity (Box/Plane/Cylinder still allocate a distinct mesh
- * per entity).
+ * Validates a Unity Explorer memory optimization: SpherePrimitive shares ONE
+ * immutable Mesh asset across every sphere entity, instead of allocating a new
+ * Mesh per entity.
  *
- * The UI (see ui.tsx) drives this module in real time so the effect is
- * observable live in the Explorer's Memory Profiler: click "Add spheres"
- * repeatedly and mesh memory stays flat (shared mesh); click "Add boxes" and
- * mesh memory climbs 1:1 with the box count.
+ * The comparison is made ACROSS Explorer builds: run this same scene on an old
+ * build (no sharing) and on a new build (shared mesh) and watch the Memory
+ * Profiler. On the old build, mesh memory climbs 1:1 with the sphere count; on
+ * the new build it stays flat no matter how many spheres you spawn. That's why
+ * there's no in-scene control group — the control is the old build itself.
+ *
+ * The UI (see ui.tsx) drives this module in real time: click "Add spheres" to
+ * pile on thousands of spheres, "Delete all" to reset.
  */
 
-// How many entities each button press spawns. Small enough to click through
-// several batches while watching the Profiler, large enough that a single box
-// batch is visible in the memory graph.
-export const ADD_BATCH = 100
+// How many spheres each button press spawns. Large so the mesh-memory
+// divergence between old and new builds becomes obvious after just a click or
+// two.
+export const ADD_BATCH = 1000
 
-// Stack layout: each group fills a fixed GRID_COLUMNS x GRID_DEPTH footprint and
-// grows UPWARD (+y), layer by layer. GRID_COLUMNS * GRID_DEPTH is sized to equal
-// ADD_BATCH, so every button press drops one complete new layer on top of the
-// previous one — the stack visibly rises with each click.
-const GRID_COLUMNS = 10 // entities along x
-const GRID_DEPTH = 10 // entities along z  (COLUMNS * DEPTH === ADD_BATCH === one layer)
+// Stack layout: spheres fill a fixed GRID_COLUMNS x GRID_DEPTH footprint (sized
+// to span most of the 2-parcel scene) and grow UPWARD (+y), layer by layer, as
+// more are added.
+const GRID_COLUMNS = 48 // entities along x
+const GRID_DEPTH = 24 // entities along z
 const PER_LAYER = GRID_COLUMNS * GRID_DEPTH
 const SPACING = 0.6 // meters between entity centers
-const ENTITY_SCALE = 0.4 // meters (diameter/side length) — smaller than SPACING so entities never touch
+const ENTITY_SCALE = 0.4 // meters (diameter) — smaller than SPACING so spheres never touch
 const BASE_HEIGHT = 0.5 // meters, y of the bottom layer
 
-// Local-coordinate anchors for each grid's near corner. Scene base parcel is
+// Local-coordinate anchor for the stack's near corner. Scene base parcel is
 // "40,40" with a second parcel at "41,40" (see scene.json), giving a local
-// coordinate space of x: 0..32, z: 0..16. Spheres fill the left half, boxes the
-// right half.
-const SPHERE_GRID_ORIGIN = { x: 2, z: 2 }
-const BOX_GRID_ORIGIN = { x: 17.4, z: 2 }
+// coordinate space of x: 0..32, z: 0..16. The footprint above fits inside it.
+const GRID_ORIGIN = { x: 2, z: 1 }
 
-const SPHERE_COLOR = Color4.create(0.15, 0.35, 0.95, 1) // blue = optimized/shared-mesh path
-const BOX_COLOR = Color4.create(0.9, 0.2, 0.15, 1) // red = control/distinct-mesh path
+const SPHERE_COLOR = Color4.create(0.15, 0.35, 0.95, 1) // blue
 
-// Live registries of every entity we've spawned, so "Delete all" can remove
-// them and the UI can display current counts.
+// Live registry of every sphere we've spawned, so "Delete all" can remove them
+// and the UI can display the current count.
 const spheres: Entity[] = []
-const boxes: Entity[] = []
 
 export function getSphereCount(): number {
   return spheres.length
 }
 
-export function getBoxCount(): number {
-  return boxes.length
-}
-
 export function addSpheres(count: number = ADD_BATCH) {
   for (let i = 0; i < count; i++) {
-    spheres.push(createSphere(stackPosition(SPHERE_GRID_ORIGIN, spheres.length)))
-  }
-}
-
-export function addBoxes(count: number = ADD_BATCH) {
-  for (let i = 0; i < count; i++) {
-    boxes.push(createBox(stackPosition(BOX_GRID_ORIGIN, boxes.length)))
+    spheres.push(createSphere(stackPosition(spheres.length)))
   }
 }
 
 export function deleteAll() {
   for (const entity of spheres) engine.removeEntity(entity)
-  for (const entity of boxes) engine.removeEntity(entity)
   spheres.length = 0
-  boxes.length = 0
 }
 
-// Places the entity at index `i` within a stack anchored at `origin`. Each layer
-// is a GRID_COLUMNS x GRID_DEPTH slab in the x/z plane; once a layer fills, the
-// stack grows upward (+y) into the next layer.
-function stackPosition(origin: { x: number; z: number }, i: number): { x: number; y: number; z: number } {
+// Places the sphere at index `i` within the stack. Each layer is a
+// GRID_COLUMNS x GRID_DEPTH slab in the x/z plane; once a layer fills, the stack
+// grows upward (+y) into the next layer.
+function stackPosition(i: number): { x: number; y: number; z: number } {
   const layer = Math.floor(i / PER_LAYER)
   const withinLayer = i % PER_LAYER
   const column = withinLayer % GRID_COLUMNS
   const row = Math.floor(withinLayer / GRID_COLUMNS)
   return {
-    x: origin.x + column * SPACING,
+    x: GRID_ORIGIN.x + column * SPACING,
     y: BASE_HEIGHT + layer * SPACING,
-    z: origin.z + row * SPACING
+    z: GRID_ORIGIN.z + row * SPACING
   }
 }
 
-// Optimized path: MeshRenderer.setSphere reuses a single shared, immutable Mesh
-// asset across every sphere entity instead of allocating its own.
+// MeshRenderer.setSphere reuses a single shared, immutable Mesh asset across
+// every sphere entity (on builds with the optimization) instead of allocating
+// its own.
 function createSphere(position: { x: number; y: number; z: number }): Entity {
   const entity = engine.addEntity()
   Transform.create(entity, {
@@ -100,16 +87,3 @@ function createSphere(position: { x: number; y: number; z: number }): Entity {
   Material.setPbrMaterial(entity, { albedoColor: SPHERE_COLOR, roughness: 0.6 })
   return entity
 }
-
-// Control/unoptimized path: MeshRenderer.setBox allocates a distinct Mesh asset
-// per entity, so this group's Mesh count scales 1:1 with the box count.
-function createBox(position: { x: number; y: number; z: number }): Entity {
-  const entity = engine.addEntity()
-  Transform.create(entity, {
-    position,
-    scale: { x: ENTITY_SCALE, y: ENTITY_SCALE, z: ENTITY_SCALE }
-  })
-  MeshRenderer.setBox(entity)
-  Material.setPbrMaterial(entity, { albedoColor: BOX_COLOR, roughness: 0.6 })
-  return entity
-}

scenes/40,40-sphere-mesh-sharing-benchmark/src/ui.tsx

@@ -1,27 +1,26 @@
 import { Color4 } from '@dcl/sdk/math'
 import ReactEcs, { Button, Label, ReactEcsRenderer, UiEntity } from '@dcl/sdk/react-ecs'
-import { ADD_BATCH, addBoxes, addSpheres, deleteAll, getBoxCount, getSphereCount } from './spawner'
+import { ADD_BATCH, addSpheres, deleteAll, getSphereCount } from './spawner'
 
 export function setupUi() {
   ReactEcsRenderer.setUiRenderer(uiComponent)
 }
 
 const uiComponent = () => (
-  // Full-screen wrapper: pin the panel to the vertical middle of the right edge.
+  // Full-screen wrapper; the panel itself is absolutely positioned against the
+  // right edge, 25% down from the top of the screen.
   <UiEntity
     uiTransform={{
       width: '100%',
-      height: '100%',
-      flexDirection: 'row',
-      alignItems: 'center', // vertical center → "mid"
-      justifyContent: 'flex-end' // right edge
+      height: '100%'
     }}
   >
     <UiEntity
       uiTransform={{
         width: 520,
-        height: 620,
-        margin: '0 32px 0 0',
+        height: 460,
+        positionType: 'absolute',
+        position: { top: '25%', right: 32 },
         padding: 20,
         flexDirection: 'column',
         alignItems: 'center',
@@ -30,22 +29,16 @@ const uiComponent = () => (
       uiBackground={{ color: Color4.create(0, 0, 0, 0.6) }}
     >
       <Label
-        value="Mesh-sharing benchmark"
-        fontSize={34}
+        value="Sphere mesh-sharing benchmark"
+        fontSize={32}
         color={Color4.White()}
         uiTransform={{ width: '100%', height: 50, margin: '0 0 8px 0' }}
       />
       <Label
-        value={`Spheres: ${getSphereCount()}  (shared mesh)`}
-        fontSize={26}
+        value={`Spheres: ${getSphereCount()}`}
+        fontSize={28}
         color={Color4.create(0.4, 0.6, 1, 1)}
-        uiTransform={{ width: '100%', height: 40 }}
-      />
-      <Label
-        value={`Boxes: ${getBoxCount()}  (mesh per entity)`}
-        fontSize={26}
-        color={Color4.create(1, 0.4, 0.35, 1)}
-        uiTransform={{ width: '100%', height: 40, margin: '0 0 12px 0' }}
+        uiTransform={{ width: '100%', height: 44, margin: '0 0 12px 0' }}
       />
       <Button
         uiTransform={{ width: '100%', height: 90, margin: '8px 0' }}
@@ -54,13 +47,6 @@ const uiComponent = () => (
         fontSize={30}
         onMouseDown={() => addSpheres()}
       />
-      <Button
-        uiTransform={{ width: '100%', height: 90, margin: '8px 0' }}
-        value={`+${ADD_BATCH} boxes`}
-        variant="primary"
-        fontSize={30}
-        onMouseDown={() => addBoxes()}
-      />
       <Button
         uiTransform={{ width: '100%', height: 90, margin: '8px 0' }}
         value="Delete all"