revert: b62bd00 shallowRef

playground/vue/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "5.0.0-next.0",
+    "@tresjs/cientos": "5.0.0-next.2",
     "@tresjs/core": "workspace:^",
     "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@b34e795",
     "vue-router": "^4.5.0"

src/components/TresCanvas.vue

@@ -34,6 +34,7 @@ import { nodeOps } from '../core/nodeOps'
 
 import { disposeObject3D } from '../utils/'
 import { registerTresDevtools } from '../devtools'
+import { whenever } from '@vueuse/core'
 import type { TresPointerEventName } from '../utils/pointerEvents'
 
 const props = withDefaults(defineProps<TresCanvasProps>(), {
@@ -130,11 +131,9 @@ const mountCustomRenderer = (context: TresContext, empty = false) => {
 const dispose = (context: TresContext, force = false) => {
   disposeObject3D(context.scene.value as unknown as TresObject)
   if (force) {
-    context.renderer.instance.dispose()
-    if (context.renderer.instance instanceof WebGLRenderer) {
-      context.renderer.instance.renderLists.dispose()
-      context.renderer.instance.forceContextLoss()
-    }
+    context.renderer.instance.value.dispose()
+    context.renderer.instance.value.renderLists.dispose()
+    context.renderer.instance.value.forceContextLoss()
   }
   (scene.value as TresScene).__tres = {
     root: context,

src/composables/useRenderer/useRendererManager.ts

@@ -9,7 +9,7 @@ import {
   useDevicePixelRatio,
 } from '@vueuse/core'
 import { Material, Mesh, WebGLRenderer } from 'three'
-import { computed, onUnmounted, ref, toValue, watch, watchEffect } from 'vue'
+import { computed, onUnmounted, readonly, ref, shallowRef, toValue, watch, watchEffect } from 'vue'
 import type { MaybeRef, ShallowRef } from 'vue'
 import type { Renderer } from 'three/webgpu'
 
@@ -225,6 +225,7 @@ export function useRendererManager(
   }
 
   const renderer = getRenderer()
+  const instance = shallowRef(renderer)
 
   const frames = ref(0)
   const maxFrames = 60
@@ -275,11 +276,13 @@ export function useRendererManager(
 
   const readyEventHook = createEventHook<TresRenderer>()
   let hasTriggeredReady = false
+  const isReady = ref(false)
 
   if (isRenderer(renderer)) {
     // Initialize the WebGPU context
     renderer.init()
     readyEventHook.trigger(renderer)
+    isReady.value = true
   }
 
   loop.register(() => {
@@ -301,6 +304,7 @@ export function useRendererManager(
     if (!hasTriggeredReady && renderer.domElement.width && renderer.domElement.height) {
       readyEventHook.trigger(renderer)
       hasTriggeredReady = true
+      isReady.value = true
     }
 
     invalidateOnDemand()
@@ -399,7 +403,8 @@ export function useRendererManager(
   })
 
   return {
-    instance: renderer,
+    instance,
+    isReady: readonly(isReady),
     advance,
     onRender: renderEventHook.on,
     onReady: readyEventHook.on,

src/composables/useTresContextProvider/index.ts

@@ -1,4 +1,5 @@
 import type { MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
+import { whenever } from '@vueuse/core'
 
 import type { RendererLoop } from '../../core/loop'
 import type { TresControl, TresScene } from '../../types'
@@ -78,8 +79,11 @@ export function useTresContextProvider({
   ctx.loop.setReady(false)
   ctx.loop.start()
 
-  renderer.onReady(() => {
+  whenever(renderer.isReady, () => { // TODO #994 This does not belong here, see https://github.com/Tresjs/tres/issues/595
     ctx.loop.setReady(true)
+  }, {
+    once: true,
+    immediate: true,
   })
 
   onUnmounted(() => {

src/devtools/inspectorHandlers.ts

@@ -279,19 +279,19 @@ export const inspectorStateHandler = (tres: TresContext, { highlightMesh, prevIn
               value: {
                 objects: instance.children.length,
                 memory: calculateMemoryUsage(instance),
-                calls: tres.renderer.instance.info.render.calls,
-                triangles: tres.renderer.instance.info.render.triangles,
-                points: tres.renderer.instance.info.render.points,
-                lines: tres.renderer.instance.info.render.lines,
+                calls: tres.renderer.instance.value.info.render.calls,
+                triangles: tres.renderer.instance.value.info.render.triangles,
+                points: tres.renderer.instance.value.info.render.points,
+                lines: tres.renderer.instance.value.info.render.lines,
               },
             },
           ],
         }
 
-        if ('programs' in tres.renderer.instance.info) {
+        if ('programs' in tres.renderer.instance.value.info) {
           sceneState.state.push({
             key: 'Programs',
-            value: tres.renderer.instance.info.programs?.map(program => ({
+            value: tres.renderer.instance.value.info.programs?.map(program => ({
               ...program,
               programName: program.name,
             })),