chore: abstract wrapCallback and move render loop register to useRender

Author: alvarosabu

src/composables/useLoop/index.ts

@@ -30,26 +30,26 @@ export function useLoop() {
     advance,
   } = useTresContext()
 
-  function onBeforeRender(cb: Fn, index = 0) {
-    const wrappedCallback = (params: LoopCallback) => {
+  function wrapCallback(cb: Fn) {
+    return (params: LoopCallback) => {
       cb({ ...params, camera: unref(camera) as TresCamera, scene: unref(scene), renderer: unref(renderer), raycaster: unref(raycaster), controls: unref(controls), invalidate, advance })
     }
+  }
+
+  function onBeforeRender(cb: Fn, index = 0) {
+    const wrappedCallback = wrapCallback(cb)
     const { off } = loop.register(wrappedCallback, 'before', index)
     return { off }
   }
 
   function render(cb: Fn) {
-    const wrappedCallback = (params: LoopCallback) => {
-      cb({ ...params, camera: unref(camera) as TresCamera, scene: unref(scene), renderer: unref(renderer), raycaster: unref(raycaster), controls: unref(controls), invalidate, advance })
-    }
+    const wrappedCallback = wrapCallback(cb)
     const { off } = loop.register(wrappedCallback, 'render')
     return { off }
   }
 
   function onAfterRender(cb: Fn, index = 0) {
-    const wrappedCallback = (params: LoopCallback) => {
-      cb({ ...params, camera: unref(camera) as TresCamera, scene: unref(scene), renderer: unref(renderer), raycaster: unref(raycaster), controls: unref(controls), invalidate, advance })
-    }
+    const wrappedCallback = wrapCallback(cb)
     const { off } = loop.register(wrappedCallback, 'after', index)
     return { off }
   }

src/composables/useRenderer/index.ts

@@ -8,12 +8,13 @@ import {
   useDevicePixelRatio,
 } from '@vueuse/core'
 
-import type { ColorSpace, Scene, ShadowMapType, ToneMapping, WebGLRendererParameters } from 'three'
+import type { Camera, ColorSpace, Scene, ShadowMapType, ToneMapping, WebGLRendererParameters } from 'three'
+import type { RendererLoop } from 'src/core/loop'
 import { useLogger } from '../useLogger'
 import type { EmitEventFn, TresColor } from '../../types'
 import { normalizeColor } from '../../utils/normalize'
 
-import type { TresContext } from '../useTresContextProvider'
+import { type TresContext, useTresContext } from '../useTresContextProvider'
 import { get, merge, set } from '../../utils'
 
 // Solution taken from Thretle that actually support different versions https://github.com/threlte/threlte/blob/5fa541179460f0dadc7dc17ae5e6854d1689379e/packages/core/src/lib/lib/useRenderer.ts
@@ -98,14 +99,16 @@ export function useRenderer(
   {
     canvas,
     options,
-    contextParts: { sizes, render, invalidate, advance },
+    scene,
+    emit,
+    contextParts: { camera, sizes, render, invalidate, advance, loop },
   }:
   {
     canvas: MaybeRef<HTMLCanvasElement>
     scene: Scene
     options: UseRendererOptions
     emit: EmitEventFn
-    contextParts: Pick<TresContext, 'sizes' | 'camera' | 'render'> & { invalidate: () => void, advance: () => void }
+    contextParts: Pick<TresContext, 'sizes' | 'camera' | 'render'> & { invalidate: () => void, advance: () => void, loop: RendererLoop }
     disableRender: MaybeRefOrGetter<boolean>
   },
 ) {
@@ -247,9 +250,31 @@ export function useRenderer(
     }
   })
 
+  // Register loop
+
+  loop.register(() => {
+    if (camera.value && render.frames.value > 0) {
+      renderer.value.render(scene, camera.value as Camera)
+      emit('render', renderer.value)
+    }
+
+    // Reset priority
+    render.priority.value = 0
+
+    if (render.mode.value === 'always') {
+      render.frames.value = 1
+    }
+    else {
+      render.frames.value = Math.max(0, render.frames.value - 1)
+    }
+  }, 'render')
+
+  loop.start()
+
   onUnmounted(() => {
     renderer.value.dispose()
     renderer.value.forceContextLoss()
+    loop.stop()
   })
 
   return {

src/composables/useTresContextProvider/index.ts

@@ -141,6 +141,7 @@ export function useTresContextProvider({
       logWarning('`advance` can only be used when `renderMode` is set to `manual`')
     }
   }
+  const loop = createRenderLoop()
 
   const { renderer } = useRenderer(
     {
@@ -149,7 +150,7 @@ export function useTresContextProvider({
       options: rendererOptions,
       emit,
       // TODO: replace contextParts with full ctx at https://github.com/Tresjs/tres/issues/516
-      contextParts: { sizes, camera, render, invalidate, advance },
+      contextParts: { sizes, camera, render, invalidate, advance, loop },
       disableRender,
     },
   )
@@ -181,7 +182,7 @@ export function useTresContextProvider({
     registerCamera,
     setCameraActive,
     deregisterCamera,
-    loop: createRenderLoop(),
+    loop,
   }
 
   provide('useTres', ctx)
@@ -193,25 +194,6 @@ export function useTresContextProvider({
 
   // The loop
 
-  ctx.loop.register(() => {
-    if (camera.value && render.frames.value > 0) {
-      renderer.value.render(scene, camera.value)
-      emit('render', ctx.renderer.value)
-    }
-
-    // Reset priority
-    render.priority.value = 0
-
-    if (render.mode.value === 'always') {
-      render.frames.value = 1
-    }
-    else {
-      render.frames.value = Math.max(0, render.frames.value - 1)
-    }
-  }, 'render')
-
-  ctx.loop.start()
-
   onUnmounted(() => {
     ctx.loop.stop()
   })