From 009b4baae7924113946e70321db3754a624cc16d Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Sat, 1 Feb 2025 11:29:45 +0100
Subject: [PATCH 1/7] refactor: improve memory test and object disposal

---
 .gitignore                                    |  1 +
 .../src/pages/advanced/MemoryTresObjects.vue  | 59 +++++++-------
 src/components/TresCanvas.vue                 | 11 ++-
 src/composables/useRenderer/index.ts          |  2 +
 src/utils/index.ts                            | 79 ++++++++++++++-----
 5 files changed, 99 insertions(+), 53 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2d65a6026..71d0be2f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ docs/.vitepress/cache/
 
 .env
 .env.local
+reports/
diff --git a/playground/vue/src/pages/advanced/MemoryTresObjects.vue b/playground/vue/src/pages/advanced/MemoryTresObjects.vue
index 8d36ee55a..11e6acd8a 100644
--- a/playground/vue/src/pages/advanced/MemoryTresObjects.vue
+++ b/playground/vue/src/pages/advanced/MemoryTresObjects.vue
@@ -1,63 +1,66 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
+import { onUnmounted, ref } from 'vue'
 
-const toggleMax = 1000
+const toggleMax = 400
 const numObjectsMax = 2000
-const startTimeMS = Date.now()
+const startTimeMS = ref(0)
 
 const toggleCount = ref(0)
 const show = ref(false)
-const msg = ref('Test is running.')
+const msg = ref('Click Start Test to begin.')
 const r = ref(null)
-const isPaused = ref(true)
+const isStarted = ref(false)
 
-let intervalId: ReturnType<typeof setInterval>
+let rafId: number
 
-const startInterval = () => {
-  intervalId = setInterval(() => {
+const startTest = () => {
+  isStarted.value = true
+  startTimeMS.value = Date.now()
+  msg.value = 'Test is running...'
+  show.value = true // Start by showing the canvas
+
+  const tick = () => {
     if (toggleCount.value < toggleMax) {
-      // NOTE: Make sure that objects are mounted by
-      // checking `!!r.value`.
-      if (r.value) {
+      if (r.value && show.value) {
         show.value = false
         toggleCount.value++
       }
-      else {
+      else if (!show.value) {
         show.value = true
       }
+      rafId = requestAnimationFrame(tick)
     }
     else {
-      clearInterval(intervalId)
-      const elapsedSec = (Date.now() - startTimeMS) / 1000
+      const elapsedSec = (Date.now() - startTimeMS.value) / 1000
       msg.value = `Test completed in ${elapsedSec} seconds.`
     }
-  }, 1000 / 120)
-}
-
-const togglePause = () => {
-  isPaused.value = !isPaused.value
-  if (!isPaused.value) {
-    startInterval()
-  }
-  else {
-    clearInterval(intervalId)
   }
+
+  rafId = requestAnimationFrame(tick)
 }
 
-onUnmounted(() => clearInterval(intervalId))
+onUnmounted(() => {
+  if (rafId) {
+    cancelAnimationFrame(rafId)
+  }
+})
 </script>
 
 <template>
   <OverlayInfo>
     <h1>Memory test: Tres Objects</h1>
     <h2>Setup</h2>
-    <p>This page will successively create and remove a TresCanvas containing a number of objects.</p>
+    <p>This test will create and remove {{ toggleMax }} TresCanvas instances with {{ numObjectsMax }} objects each.</p>
     <h2>Status</h2>
     <p>{{ msg }}</p>
     <p>Number of TresCanvases created: {{ toggleCount }} / {{ toggleMax }}</p>
-    <p>Number of Objects per TresCanvas: {{ numObjectsMax }}</p>
-    <button style="padding: 8px 16px; margin-top: 10px;" @click="togglePause">
-      {{ isPaused ? 'Start Test' : 'Pause Test' }}
+    <button
+      v-if="!isStarted"
+      style="padding: 8px 16px; margin-top: 10px;"
+      @click="startTest"
+    >
+      Start Test
     </button>
   </OverlayInfo>
   <div v-if="show" style="width: 90%; height: 90%; border: 1px solid #F00">
diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index 51a355461..1b372c192 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -164,6 +164,13 @@ const dispose = (context: TresContext, force = false) => {
     context.renderer.value.dispose()
     context.renderer.value.renderLists.dispose()
     context.renderer.value.forceContextLoss()
+
+    // Clear WebGL context
+    const gl = context.renderer.value.getContext()
+    if (gl) {
+      const loseContext = gl.getExtension('WEBGL_lose_context')
+      loseContext?.loseContext()
+    }
   }
   (scene.value as TresScene).__tres = {
     root: context,
@@ -234,10 +241,6 @@ onMounted(() => {
   )
 
   if (!camera.value) {
-    logWarning(
-      'No camera found. Creating a default perspective camera. '
-      + 'To have full control over a camera, please add one to the scene.',
-    )
     addDefaultCamera()
   }
 
diff --git a/src/composables/useRenderer/index.ts b/src/composables/useRenderer/index.ts
index 99d1603fa..824f76725 100644
--- a/src/composables/useRenderer/index.ts
+++ b/src/composables/useRenderer/index.ts
@@ -157,6 +157,7 @@ export function useRenderer(
 
   const { logError } = useLogger()
 
+  // TODO: This is a hack to get the defaults of the renderer. We should find a better way to do this.
   const getThreeRendererDefaults = () => {
     const plainRenderer = new WebGLRenderer()
 
@@ -170,6 +171,7 @@ export function useRenderer(
       outputColorSpace: plainRenderer.outputColorSpace,
     }
     plainRenderer.dispose()
+    plainRenderer.forceContextLoss()
 
     return defaults
   }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 80704a841..0eb91d7ff 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,8 +1,8 @@
 import type { nodeOps } from 'src/core/nodeOps'
 import type { AttachType, LocalState, TresInstance, TresObject, TresPrimitive } from 'src/types'
-import type { Material, Mesh, Object3D, Texture } from 'three'
+import type { Material, Object3D, Texture } from 'three'
+import { BufferAttribute, BufferGeometry, DoubleSide, InterleavedBufferAttribute, Light, Line, MathUtils, Mesh, MeshBasicMaterial, Points, Scene, Vector3 } from 'three'
 import type { TresContext } from '../composables/useTresContextProvider'
-import { DoubleSide, MathUtils, MeshBasicMaterial, Scene, Vector3 } from 'three'
 import { HightlightMesh } from '../devtools/highlight'
 import * as is from './is'
 
@@ -279,42 +279,79 @@ function hasMap(material: Material): material is Material & { map: Texture | nul
 export function disposeMaterial(material: Material): void {
   if (hasMap(material) && material.map) {
     material.map.dispose()
+    // material.map = null
   }
 
   material.dispose()
 }
 
 export function disposeObject3D(object: TresObject): void {
-  if (object.parent) {
-    object.removeFromParent?.()
-  }
-  delete object.__tres
   // Clone the children array to safely iterate
   const children = [...object.children]
   children.forEach(child => disposeObject3D(child))
 
-  if (object instanceof Scene) {
-    // Optionally handle Scene-specific cleanup
+  // Remove the object from its parent
+  if (object.parent) {
+    object.removeFromParent?.()
   }
-  else {
-    const mesh = object as unknown as Partial<Mesh>
-    if (object) {
-      object.dispose?.()
+
+  if (object instanceof Mesh || object instanceof Points || object instanceof Line) {
+    if (object.geometry) {
+      object.geometry.dispose()
+      // object.geometry = null
     }
-    if (mesh.geometry) {
-      mesh.geometry.dispose()
-      delete mesh.geometry
+    if (object.material) {
+      disposeMaterial(object.material)
+      // object.material = null
     }
+  }
 
-    if (Array.isArray(mesh.material)) {
-      mesh.material.forEach(material => disposeMaterial(material))
-      delete mesh.material
+  // Handle lights
+  if (object instanceof Light) {
+    if (object.shadow?.map) {
+      object.shadow.map.dispose()
     }
-    else if (mesh.material) {
-      disposeMaterial(mesh.material)
-      delete mesh.material
+  }
+
+  // Clean up any custom properties
+  if (object.userData) {
+    // Clear any custom user data that might hold references
+    object.userData = {}
+  }
+
+  // Clear any animations
+  if (object.animations) {
+    object.animations = []
+  }
+
+  // Clear buffers if present
+  if (object instanceof BufferGeometry) {
+    Object.values(object.attributes).forEach((attribute: BufferAttribute | InterleavedBufferAttribute) => {
+      if (attribute instanceof BufferAttribute && attribute.array) {
+        attribute.array = new Float32Array(0)
+      }
+      else if (attribute instanceof InterleavedBufferAttribute && attribute.data?.array) {
+        attribute.data.array = new Float32Array(0)
+      }
+    })
+    object.attributes = {}
+  }
+
+  if (object instanceof Scene) {
+    object.background = null
+    object.environment = null
+
+    if (object.fog) {
+      object.fog = null
     }
   }
+
+  // Remove tres state
+  delete object.__tres
+
+  if (object.clear) {
+    object.clear()
+  }
 }
 
 /**

From d24d2e9d2aa568ea82c6e39df3b0d342ab6378ed Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Sat, 1 Feb 2025 11:29:57 +0100
Subject: [PATCH 2/7] fix: safely remove helpers in vDistanceTo and
 vLightHelper directives

---
 src/directives/vDistanceTo.ts  | 4 +++-
 src/directives/vLightHelper.ts | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/directives/vDistanceTo.ts b/src/directives/vDistanceTo.ts
index 7eacfd988..6b416fcc0 100644
--- a/src/directives/vDistanceTo.ts
+++ b/src/directives/vDistanceTo.ts
@@ -33,6 +33,8 @@ export const vDistanceTo = {
   },
   unmounted: (el: TresObject) => {
     arrowHelper?.dispose()
-    el.parent.remove(arrowHelper)
+    if (el.parent) {
+      el.parent.remove(arrowHelper)
+    }
   },
 }
diff --git a/src/directives/vLightHelper.ts b/src/directives/vLightHelper.ts
index 9a14f1fe5..c891bd5df 100644
--- a/src/directives/vLightHelper.ts
+++ b/src/directives/vLightHelper.ts
@@ -51,11 +51,11 @@ export const vLightHelper = {
       logWarning(`${el.type} is not a light`)
       return
     }
-    currentInstance = el.parent.children.find((child: TresObject) => child instanceof CurrentHelper)
-
     if (currentInstance && currentInstance.dispose) {
       currentInstance.dispose()
     }
-    el.parent.remove(currentInstance)
+    if (el.parent) {
+      el.parent.remove(currentInstance)
+    }
   },
 }

From 2362e0f25737fd3ffc888a24ecb4ff65ec17c2cc Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Sat, 1 Feb 2025 11:53:35 +0100
Subject: [PATCH 3/7] refactor: remove unused logger import in TresCanvas
 component

---
 src/components/TresCanvas.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index 1b372c192..0704d4bf4 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -28,7 +28,6 @@ import {
 import pkg from '../../package.json'
 import {
   type TresContext,
-  useLogger,
   useTresContextProvider,
 } from '../composables'
 import { extend } from '../core/catalogue'
@@ -97,8 +96,6 @@ const slots = defineSlots<{
   default: () => any
 }>()
 
-const { logWarning } = useLogger()
-
 const canvas = ref<HTMLCanvasElement>()
 
 /*

From 5fcd0bcda752d9bddba30d7eed20e37125d4319b Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Sat, 1 Feb 2025 13:00:58 +0100
Subject: [PATCH 4/7] refactor: replace requestAnimationFrame with setInterval
 in memory test

---
 .../vue/src/pages/advanced/MemoryTresObjects.vue   | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/playground/vue/src/pages/advanced/MemoryTresObjects.vue b/playground/vue/src/pages/advanced/MemoryTresObjects.vue
index 11e6acd8a..b1d6ebcb6 100644
--- a/playground/vue/src/pages/advanced/MemoryTresObjects.vue
+++ b/playground/vue/src/pages/advanced/MemoryTresObjects.vue
@@ -12,7 +12,7 @@ const msg = ref('Click Start Test to begin.')
 const r = ref(null)
 const isStarted = ref(false)
 
-let rafId: number
+let intervalId: ReturnType<typeof setInterval>
 
 const startTest = () => {
   isStarted.value = true
@@ -20,7 +20,7 @@ const startTest = () => {
   msg.value = 'Test is running...'
   show.value = true // Start by showing the canvas
 
-  const tick = () => {
+  intervalId = setInterval(() => {
     if (toggleCount.value < toggleMax) {
       if (r.value && show.value) {
         show.value = false
@@ -29,20 +29,18 @@ const startTest = () => {
       else if (!show.value) {
         show.value = true
       }
-      rafId = requestAnimationFrame(tick)
     }
     else {
+      clearInterval(intervalId)
       const elapsedSec = (Date.now() - startTimeMS.value) / 1000
       msg.value = `Test completed in ${elapsedSec} seconds.`
     }
-  }
-
-  rafId = requestAnimationFrame(tick)
+  }, 1000 / 120)
 }
 
 onUnmounted(() => {
-  if (rafId) {
-    cancelAnimationFrame(rafId)
+  if (intervalId) {
+    clearInterval(intervalId)
   }
 })
 </script>

From 87da70c4d1fc3e57048beaf0a2be5ead39f536a5 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Mon, 3 Feb 2025 19:58:33 +0100
Subject: [PATCH 5/7] feat: add comparative memory test for Tres and plain
 Vue/THREE

---
 .../src/pages/advanced/MemoryTresObjects.vue  | 160 ++++++++++++++----
 1 file changed, 125 insertions(+), 35 deletions(-)

diff --git a/playground/vue/src/pages/advanced/MemoryTresObjects.vue b/playground/vue/src/pages/advanced/MemoryTresObjects.vue
index b1d6ebcb6..96073955d 100644
--- a/playground/vue/src/pages/advanced/MemoryTresObjects.vue
+++ b/playground/vue/src/pages/advanced/MemoryTresObjects.vue
@@ -1,73 +1,163 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
+import type { Group, Material } from 'three'
+import { BoxGeometry, Color, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from 'three'
 import { onUnmounted, ref } from 'vue'
 
 const toggleMax = 400
 const numObjectsMax = 2000
 const startTimeMS = ref(0)
-
+const width = 900
+const height = 600
 const toggleCount = ref(0)
-const show = ref(false)
+const showTres = ref(false)
+const showVueThree = ref(false)
 const msg = ref('Click Start Test to begin.')
 const r = ref(null)
-const isStarted = ref(false)
-
 let intervalId: ReturnType<typeof setInterval>
-
-const startTest = () => {
-  isStarted.value = true
-  startTimeMS.value = Date.now()
-  msg.value = 'Test is running...'
-  show.value = true // Start by showing the canvas
-
-  intervalId = setInterval(() => {
+const testVueThree = (() => {
+  let renderer: WebGLRenderer | null = null
+  let scene: Scene | null = null
+  let camera: PerspectiveCamera | null = null
+  let frameCount = 0
+  function testVueThree() {
     if (toggleCount.value < toggleMax) {
-      if (r.value && show.value) {
-        show.value = false
-        toggleCount.value++
+      if (r.value) {
+        if (renderer) {
+          if (frameCount < 2) {
+            frameCount++
+            renderer.render(scene!, camera!)
+          }
+          else {
+            camera?.removeFromParent()
+            scene!.children.forEach((m) => { ((m as Mesh).material as Material).dispose(); (m as Mesh).geometry.dispose() })
+            renderer.dispose()
+            frameCount = 0
+            camera = null
+            scene = null
+            renderer = null
+            showVueThree.value = false
+            toggleCount.value++
+          }
+        }
+        else {
+          renderer = new WebGLRenderer({ canvas: r.value })
+          renderer.setSize(width, height)
+          renderer.setClearColor(new Color('#EEE'))
+          scene = new Scene()
+          camera = new PerspectiveCamera()
+          camera.position.x = 10
+          camera.position.y = 10
+          camera.lookAt(new Vector3(0, 0, 0))
+          for (let i = 0; i < numObjectsMax; i++) {
+            scene.add(new Mesh(new BoxGeometry(), new MeshBasicMaterial()))
+          }
+          scene.add(camera)
+          renderer.render(scene, camera)
+        }
       }
-      else if (!show.value) {
-        show.value = true
+      else if (!showVueThree.value) {
+        showVueThree.value = true
       }
     }
     else {
+      const elapsedSec = (Date.now() - startTimeMS.value) / 1000
+      msg.value = `Plain Vue/THREE test completed in ${elapsedSec} seconds.`
       clearInterval(intervalId)
+    }
+  }
+  return testVueThree
+})()
+const testTres = (() => {
+  let frameCount = 0
+  return () => {
+    if (toggleCount.value < toggleMax) {
+      if (r.value && frameCount < 2) {
+        // NOTE: Wait until Tres has actually rendered before
+        // removing the canvas.
+        ((r.value as Group).children[0] as Mesh).onAfterRender = () => { frameCount++ }
+      }
+      else {
+        if (frameCount < 1) {
+          showTres.value = true
+        }
+        else {
+          toggleCount.value++
+          showTres.value = false
+          frameCount = 0
+        }
+      }
+    }
+    else {
       const elapsedSec = (Date.now() - startTimeMS.value) / 1000
-      msg.value = `Test completed in ${elapsedSec} seconds.`
+      msg.value = `Tres test completed in ${elapsedSec} seconds.`
+      clearInterval(intervalId)
     }
-  }, 1000 / 120)
+  }
+})()
+const isStarted = ref(false)
+const startTestTres = () => {
+  isStarted.value = true
+  startTimeMS.value = Date.now()
+  // NOTE: Using `setInterval`; it typically will keep
+  // running in situations were `requestAnimationFrame` will pause.
+  intervalId = setInterval(testTres, 1000 / 60)
+  msg.value = 'Test is running...'
+}
+const startTestVueThree = () => {
+  isStarted.value = true
+  startTimeMS.value = Date.now()
+  // NOTE: Using `setInterval`; it typically will keep
+  // running in situations were `requestAnimationFrame` will pause.
+  intervalId = setInterval(testVueThree, 1000 / 60)
+  msg.value = 'Test is running...'
 }
-
 onUnmounted(() => {
-  if (intervalId) {
-    clearInterval(intervalId)
-  }
+  clearInterval(intervalId)
 })
 </script>
 
 <template>
   <OverlayInfo>
-    <h1>Memory test: Tres Objects</h1>
+    <h1>Memory test: Canvases with objects – Tres vs Plain Vue/THREE</h1>
+    <p><span style="color: red">IMPORTANT</span> Epileptic warning: the tests run on this page cause the screen to flash rapidly.</p>
     <h2>Setup</h2>
-    <p>This test will create and remove {{ toggleMax }} TresCanvas instances with {{ numObjectsMax }} objects each.</p>
+    <p>This test will create and remove {{ toggleMax }} canvas instances with {{ numObjectsMax }} objects/materials/geometries each.</p>
+    <h2>Note</h2>
+    <ul>
+      <li>These tests are intended to help spot memory leaks.</li>
+      <li>Faster/slower test duration does not indicate a problem.</li>
+    </ul>
     <h2>Status</h2>
     <p>{{ msg }}</p>
-    <p>Number of TresCanvases created: {{ toggleCount }} / {{ toggleMax }}</p>
+    <p>Number of canvases created: {{ toggleCount }} / {{ toggleMax }}</p>
+    <button
+      v-if="!isStarted"
+      style="padding: 8px 16px; margin-top: 10px;"
+      @click="startTestTres"
+    >
+      Start Tres test
+    </button>
+
     <button
       v-if="!isStarted"
       style="padding: 8px 16px; margin-top: 10px;"
-      @click="startTest"
+      @click="startTestVueThree"
     >
-      Start Test
+      Start plain Vue/THREE test
     </button>
   </OverlayInfo>
-  <div v-if="show" style="width: 90%; height: 90%; border: 1px solid #F00">
-    <TresCanvas clear-color="black">
-      <TresGroup ref="r" />
-      <TresMesh v-for="_, i of Array.from({ length: numObjectsMax })" :key="i">
-        <TresMeshBasicMaterial />
-        <TresBoxGeometry />
-      </TresMesh>
+  <div v-if="showTres" :style="{ width: `${width}px`, height: `${height}px` }">
+    <TresCanvas clear-color="#EEE">
+      <TresGroup ref="r">
+        <TresMesh v-for="_, i of Array.from({ length: numObjectsMax })" :key="i">
+          <TresMeshBasicMaterial />
+          <TresBoxGeometry />
+        </TresMesh>
+      </TresGroup>
     </TresCanvas>
   </div>
+  <div v-if="showVueThree">
+    <canvas ref="r" clear-color="black"></canvas>
+  </div>
 </template>

From 431b82eabcd6084afa912a8f72afe67fc40741b2 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Tue, 4 Feb 2025 10:31:12 +0100
Subject: [PATCH 6/7] fix: improve renderer and object disposal safety

---
 src/components/TresCanvas.vue                 | 14 ++++++-----
 src/composables/useRaycaster/index.ts         |  2 +-
 .../useTresContextProvider/index.ts           |  2 +-
 src/devtools/plugin.ts                        |  2 +-
 src/utils/index.ts                            | 23 +++++++------------
 5 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index 0704d4bf4..344bb4851 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -158,16 +158,18 @@ const mountCustomRenderer = (context: TresContext, empty = false) => {
 const dispose = (context: TresContext, force = false) => {
   disposeObject3D(context.scene.value as unknown as TresObject)
   if (force) {
-    context.renderer.value.dispose()
-    context.renderer.value.renderLists.dispose()
-    context.renderer.value.forceContextLoss()
-
-    // Clear WebGL context
-    const gl = context.renderer.value.getContext()
+    // Clear WebGL context first
+    const gl = context.renderer.value?.getContext()
     if (gl) {
       const loseContext = gl.getExtension('WEBGL_lose_context')
       loseContext?.loseContext()
     }
+
+    // Then dispose renderer
+    context.renderer.value?.dispose()
+    context.renderer.value?.renderLists.dispose()
+    context.renderer.value?.forceContextLoss()
+    context.renderer.value = null
   }
   (scene.value as TresScene).__tres = {
     root: context,
diff --git a/src/composables/useRaycaster/index.ts b/src/composables/useRaycaster/index.ts
index da7795009..1eb91c687 100644
--- a/src/composables/useRaycaster/index.ts
+++ b/src/composables/useRaycaster/index.ts
@@ -13,7 +13,7 @@ export const useRaycaster = (
   ctx: TresContext,
 ) => {
   // having a separate computed makes useElementBounding work
-  const canvas = computed(() => ctx.renderer.value.domElement as HTMLCanvasElement)
+  const canvas = computed(() => ctx.renderer.value?.domElement as HTMLCanvasElement)
   const intersects: ShallowRef<Intersection[]> = shallowRef([])
   const { x, y } = usePointer({ target: canvas })
   let delta = 0
diff --git a/src/composables/useTresContextProvider/index.ts b/src/composables/useTresContextProvider/index.ts
index 66658a8b5..6b1cd5e64 100644
--- a/src/composables/useTresContextProvider/index.ts
+++ b/src/composables/useTresContextProvider/index.ts
@@ -55,7 +55,7 @@ export interface TresContext {
   camera: ComputedRef<Camera | undefined>
   cameras: DeepReadonly<Ref<Camera[]>>
   controls: Ref<TresControl | null>
-  renderer: ShallowRef<WebGLRenderer>
+  renderer: ShallowRef<WebGLRenderer | null>
   raycaster: ShallowRef<Raycaster>
   perf: PerformanceState
   render: RenderState
diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
index 8b4ab89cb..aa46f2a95 100644
--- a/src/devtools/plugin.ts
+++ b/src/devtools/plugin.ts
@@ -186,7 +186,7 @@ export function registerTresDevtools(app: DevtoolsApp, tres: TresContext) {
               }),
           }
 
-          if (instance.isScene) {
+          if (instance.isScene && tres.renderer.value) {
             payload.state.info = {
               objects: instance.children.length,
               memory: calculateMemoryUsage(instance),
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0eb91d7ff..63e6ed643 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,7 +1,7 @@
 import type { nodeOps } from 'src/core/nodeOps'
 import type { AttachType, LocalState, TresInstance, TresObject, TresPrimitive } from 'src/types'
 import type { Material, Object3D, Texture } from 'three'
-import { BufferAttribute, BufferGeometry, DoubleSide, InterleavedBufferAttribute, Light, Line, MathUtils, Mesh, MeshBasicMaterial, Points, Scene, Vector3 } from 'three'
+import { BufferAttribute, BufferGeometry, DoubleSide, InterleavedBufferAttribute, Line, MathUtils, Mesh, MeshBasicMaterial, Points, Scene, Vector3 } from 'three'
 import type { TresContext } from '../composables/useTresContextProvider'
 import { HightlightMesh } from '../devtools/highlight'
 import * as is from './is'
@@ -285,7 +285,8 @@ export function disposeMaterial(material: Material): void {
   material.dispose()
 }
 
-export function disposeObject3D(object: TresObject): void {
+export function disposeObject3D(object: TresObject | null): void {
+  if (!object) { return }
   // Clone the children array to safely iterate
   const children = [...object.children]
   children.forEach(child => disposeObject3D(child))
@@ -306,13 +307,6 @@ export function disposeObject3D(object: TresObject): void {
     }
   }
 
-  // Handle lights
-  if (object instanceof Light) {
-    if (object.shadow?.map) {
-      object.shadow.map.dispose()
-    }
-  }
-
   // Clean up any custom properties
   if (object.userData) {
     // Clear any custom user data that might hold references
@@ -336,6 +330,10 @@ export function disposeObject3D(object: TresObject): void {
     })
     object.attributes = {}
   }
+  // Remove tres state if it exists
+  if ('__tres' in object) {
+    delete object.__tres
+  }
 
   if (object instanceof Scene) {
     object.background = null
@@ -344,13 +342,8 @@ export function disposeObject3D(object: TresObject): void {
     if (object.fog) {
       object.fog = null
     }
-  }
-
-  // Remove tres state
-  delete object.__tres
 
-  if (object.clear) {
-    object.clear()
+    object = null
   }
 }
 

From 869f7e5dd1293fa4298d2b162b57604de002fdbc Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Wed, 5 Feb 2025 16:11:00 +0100
Subject: [PATCH 7/7] refactor: revert nullable renderer

---
 src/components/TresCanvas.vue                   | 1 -
 src/composables/useRaycaster/index.ts           | 2 +-
 src/composables/useTresContextProvider/index.ts | 2 +-
 src/devtools/plugin.ts                          | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index 344bb4851..242e2db91 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -169,7 +169,6 @@ const dispose = (context: TresContext, force = false) => {
     context.renderer.value?.dispose()
     context.renderer.value?.renderLists.dispose()
     context.renderer.value?.forceContextLoss()
-    context.renderer.value = null
   }
   (scene.value as TresScene).__tres = {
     root: context,
diff --git a/src/composables/useRaycaster/index.ts b/src/composables/useRaycaster/index.ts
index 1eb91c687..da7795009 100644
--- a/src/composables/useRaycaster/index.ts
+++ b/src/composables/useRaycaster/index.ts
@@ -13,7 +13,7 @@ export const useRaycaster = (
   ctx: TresContext,
 ) => {
   // having a separate computed makes useElementBounding work
-  const canvas = computed(() => ctx.renderer.value?.domElement as HTMLCanvasElement)
+  const canvas = computed(() => ctx.renderer.value.domElement as HTMLCanvasElement)
   const intersects: ShallowRef<Intersection[]> = shallowRef([])
   const { x, y } = usePointer({ target: canvas })
   let delta = 0
diff --git a/src/composables/useTresContextProvider/index.ts b/src/composables/useTresContextProvider/index.ts
index 6b1cd5e64..66658a8b5 100644
--- a/src/composables/useTresContextProvider/index.ts
+++ b/src/composables/useTresContextProvider/index.ts
@@ -55,7 +55,7 @@ export interface TresContext {
   camera: ComputedRef<Camera | undefined>
   cameras: DeepReadonly<Ref<Camera[]>>
   controls: Ref<TresControl | null>
-  renderer: ShallowRef<WebGLRenderer | null>
+  renderer: ShallowRef<WebGLRenderer>
   raycaster: ShallowRef<Raycaster>
   perf: PerformanceState
   render: RenderState
diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
index aa46f2a95..8b4ab89cb 100644
--- a/src/devtools/plugin.ts
+++ b/src/devtools/plugin.ts
@@ -186,7 +186,7 @@ export function registerTresDevtools(app: DevtoolsApp, tres: TresContext) {
               }),
           }
 
-          if (instance.isScene && tres.renderer.value) {
+          if (instance.isScene) {
             payload.state.info = {
               objects: instance.children.length,
               memory: calculateMemoryUsage(instance),