ˆ

src/composables/useTresContextProvider/index.ts

@@ -14,19 +14,6 @@ import useSizes, { type SizesType } from '../useSizes'
 import { type TresEventManager, useTresEventManager } from '../useTresEventManager'
 import { whenever } from '@vueuse/core'
 
-export interface PerformanceState {
-  maxFrames: number
-  fps: {
-    value: number
-    accumulator: number[]
-  }
-  memory: {
-    currentMem: number
-    allocatedMem: number
-    accumulator: number[]
-  }
-}
-
 export interface TresContext {
   scene: ShallowRef<TresScene>
   sizes: SizesType
@@ -36,7 +23,6 @@ export interface TresContext {
   controls: Ref<TresControl | null>
   renderer: UseRendererManagerReturn
   raycaster: ShallowRef<Raycaster>
-  perf: PerformanceState
   // Loop
   loop: RendererLoop
   // Camera
@@ -94,18 +80,6 @@ export function useTresContextProvider({
     renderer,
     raycaster: shallowRef(new Raycaster()),
     controls: ref(null),
-    perf: {
-      maxFrames: 160,
-      fps: {
-        value: 0,
-        accumulator: [],
-      },
-      memory: {
-        currentMem: 0,
-        allocatedMem: 0,
-        accumulator: [],
-      },
-    },
     extend,
     registerCamera,
     setCameraActive,

src/devtools/setupDevtools.ts

@@ -7,6 +7,19 @@ import { onUnmounted } from 'vue'
 export function setupTresDevtools(ctx: TresContext) {
   if (!ctx) { return }
 
+  const performanceState: PerformanceState = {
+    maxFrames: 160,
+    fps: {
+      value: 0,
+      accumulator: [],
+    },
+    memory: {
+      currentMem: 0,
+      allocatedMem: 0,
+      accumulator: [],
+    },
+  }
+
   // Performance
   const updateInterval = 100 // Update interval in milliseconds
   const fps = useFps({ every: updateInterval })
@@ -22,7 +35,7 @@ export function setupTresDevtools(ctx: TresContext) {
     // Update WebGL Memory Usage (Placeholder for actual logic)
     // perf.memory.value = calculateMemoryUsage(gl)
     if (ctx.scene.value) {
-      ctx.perf.memory.allocatedMem = calculateMemoryUsage(ctx.scene.value as unknown as TresObject)
+      performanceState.memory.allocatedMem = calculateMemoryUsage(ctx.scene.value as unknown as TresObject)
     }
 
     // Update memory usage
@@ -30,17 +43,17 @@ export function setupTresDevtools(ctx: TresContext) {
       lastUpdateTime = timestamp
 
       // Update FPS
-      boundedPush(ctx.perf.fps.accumulator, fps.value as never, maxFrames)
+      boundedPush(performanceState.fps.accumulator, fps.value as never, maxFrames)
 
-      ctx.perf.fps.value = fps.value
+      performanceState.fps.value = fps.value
 
       // Update memory
       if (isSupported.value && memory.value?.usedJSHeapSize) {
-        boundedPush(ctx.perf.memory.accumulator, memory.value.usedJSHeapSize / 1024 / 1024 as never, maxFrames)
+        boundedPush(performanceState.memory.accumulator, memory.value.usedJSHeapSize / 1024 / 1024 as never, maxFrames)
 
-        if (ctx.perf.memory.accumulator.length > 0) {
-          ctx.perf.memory.currentMem
-        = ctx.perf.memory.accumulator.reduce((a, b) => a + b, 0) / ctx.perf.memory.accumulator.length
+        if (performanceState.memory.accumulator.length > 0) {
+          performanceState.memory.currentMem
+        = performanceState.memory.accumulator.reduce((a, b) => a + b, 0) / performanceState.memory.accumulator.length
         }
       }
     }
@@ -56,7 +69,10 @@ export function setupTresDevtools(ctx: TresContext) {
 
     // Check if the accumulated time is greater than or equal to the interval
     if (accumulatedTime >= interval) {
-      window.__TRES__DEVTOOLS__.cb(ctx)
+      window.__TRES__DEVTOOLS__.cb({
+        context: ctx,
+        performance: performanceState,
+      })
 
       // Reset the accumulated time
       accumulatedTime = 0

src/env.d.ts

@@ -7,10 +7,25 @@ declare module '*.vue' {
   export default component
 }
 
+interface PerformanceState {
+  maxFrames: number
+  fps: {
+    value: number
+    accumulator: number[]
+  }
+  memory: {
+    currentMem: number
+    allocatedMem: number
+    accumulator: number[]
+  }
+}
+
 interface Window {
   __TRES__DEVTOOLS__?: {
-
-    cb: (...args: any[]) => void
+    cb: (
+      { context, performance }:
+      { context: TresContext, performance: PerformanceState } // TODO https://github.com/Tresjs/nuxt/issues/163 this type should come from the devtools package
+    ) => void
     // You can add other properties of __TRES__DEVTOOLS__ here if needed
   }
 }