feat: reserve index 1 for late-updates

playground/src/components/AnimatedObjectUseUpdate.vue

@@ -2,10 +2,15 @@
 <script setup lang="ts">
 import { useUpdate } from '@tresjs/core'
 import { useControls } from '@tresjs/leches'
+import { useThrottleFn } from '@vueuse/core'
 
 const sphereRef = ref()
+
+const log = useThrottleFn(() => console.log('updating sphere'), 3000)
+
 const { pause, resume } = useUpdate((state) => {
   if (!sphereRef.value) { return }
+  log()
   sphereRef.value.position.y += Math.sin(state.elapsed) * 0.01
 })
 
@@ -25,6 +30,11 @@ watchEffect(() => {
     resume()
   }
 })
+const anotherLog = useThrottleFn(() => console.log('after render'), 3000)
+
+/* useUpdate(() => {
+  anotherLog()
+}, 1) */
 
 /* useUpdate(() => {
   console.count('update loop 1')
@@ -52,7 +62,7 @@ useUpdate((state) => {
 <template>
   <TresMesh
     ref="sphereRef"
-    :position="[2, 2, 0]"
+    :position="[2, 0, 0]"
     name="sphere"
     cast-shadow
   >

playground/src/components/FBOCube.vue

@@ -9,6 +9,10 @@ const fboTarget = useFBO({
     samples: 1,
   },
 })
+
+watchEffect(() => {
+  console.log('Target', fboTarget.value)
+})
 </script>
 
 <template>
@@ -16,7 +20,7 @@ const fboTarget = useFBO({
     <TresBoxGeometry :args="[1, 1, 1]" />
     <TresMeshBasicMaterial
       :color="0xFF8833"
-      :map="fboTarget?.texture ?? null"
+      :map="fboTarget.texture ?? null"
     />
   </TresMesh>
 </template>

playground/src/components/TakeOverLoopExperience.vue

@@ -3,9 +3,9 @@ import { useRender } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { useControls } from '@tresjs/leches'
 
-const { pause, resume } = useRender(({ renderer, scene, camera }) => {
+/* const { pause, resume } = useRender(({ renderer, scene, camera }) => {
   renderer.value.render(scene.value, camera.value)
-})
+}) */
 
 const { isRenderPaused } = useControls({
   isRenderPaused: {

playground/src/composables/useFBO.ts

@@ -3,6 +3,7 @@ import type { Camera, WebGLRenderTargetOptions } from 'three'
 import { DepthTexture, FloatType, HalfFloatType, LinearFilter, WebGLRenderTarget } from 'three'
 import type { Ref } from 'vue'
 import { isReactive, onBeforeUnmount, reactive, ref, toRefs, watchEffect } from 'vue'
+import { useThrottleFn } from '@vueuse/core'
 
 export interface FboOptions {
   /*
@@ -46,8 +47,8 @@ export function useFBO(options: FboOptions) {
 
   const { height, width, settings, depth } = isReactive(options) ? toRefs(options) : toRefs(reactive(options))
 
-  const { onLoop } = useRenderLoop()
-  const { camera, renderer, scene, sizes } = useTresContext()
+  /*   const { onLoop } = useRenderLoop() */
+  const { camera, scene, sizes } = useTresContext()
 
   watchEffect(() => {
     target.value?.dispose()
@@ -67,31 +68,15 @@ export function useFBO(options: FboOptions) {
       )
     }
   })
+  const logBefore = useThrottleFn(() => console.log('FBO: just before render'), 3000)
 
-  useUpdate(() => {
+  useUpdate(({ renderer, scene, camera }) => {
+    logBefore()
     renderer.value.setRenderTarget(target.value)
     renderer.value.clear()
     renderer.value.render(scene.value, camera.value as Camera)
-  })
-
-  useUpdate(() => {
-    renderer.value.setRenderTarget(null)
-  }, 2)
-
-  /* onLoop(() => {
-    renderer.value.setRenderTarget(target.value)
-    renderer.value.clear()
-    renderer.value.render(scene.value, camera.value as Camera)
-
-    renderer.value.setRenderTarget(null)
-  }) */
-  /* useRender(() => {
-    renderer.value.setRenderTarget(target.value)
-    renderer.value.clear()
-    renderer.value.render(scene.value, camera.value as Camera)
-
     renderer.value.setRenderTarget(null)
-  }) */
+  }, 1)
 
   onBeforeUnmount(() => {
     target.value?.dispose()

playground/vite.config.ts

@@ -7,13 +7,13 @@ import glsl from 'vite-plugin-glsl'
 import UnoCSS from 'unocss/vite'
 import { templateCompilerOptions } from '@tresjs/core'
 import { qrcode } from 'vite-plugin-qrcode'
-import VueDevTools from 'vite-plugin-vue-devtools'
+/* import VueDevTools from 'vite-plugin-vue-devtools' */
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     glsl(),
-    VueDevTools(),
+/*     VueDevTools(), */
     vue({
       script: {
         propsDestructure: true,

src/composables/useRender/index.ts

@@ -13,7 +13,7 @@ export function useRender(cb: (arg0: any) => void) {
   const wrappedCallback = (params: any) => {
     cb({ ...params, camera, scene, renderer, invalidate })
   }
-  loop.onLoop(wrappedCallback as Fn, 1)
+  loop.onLoop(wrappedCallback as Fn, 2)
   return {
     pause: loop.pauseRender,
     resume: loop.resumeRender,

src/composables/useTresContextProvider/index.ts

@@ -1,5 +1,5 @@
 import type { Fn } from '@vueuse/core'
-import { useFps, useMemory, useRafFn } from '@vueuse/core'
+import { useFps, useMemory, useRafFn, useThrottleFn } from '@vueuse/core'
 import { computed, inject, onUnmounted, provide, readonly, ref, shallowRef } from 'vue'
 import type { Camera, EventDispatcher, WebGLRenderer } from 'three'
 import { Raycaster } from 'three'
@@ -194,9 +194,11 @@ export function useTresContextProvider({
   }
 
   // The loop
+  const log = useThrottleFn(() => console.log('rendering'), 3000)
 
   ctx.loop.onLoop(() => {
     if (camera.value && render.frames.value > 0) {
+      log()
       renderer.value.render(scene, camera.value)
       emit('render', ctx.renderer.value)
     }
@@ -210,7 +212,7 @@ export function useTresContextProvider({
     else {
       render.frames.value = Math.max(0, render.frames.value - 1)
     }
-  }, 1)
+  }, 2)
   ctx.loop.start()
 
   onUnmounted(() => {

src/composables/useUpdate/index.ts

@@ -6,7 +6,7 @@ export function useUpdate(cb: (arg0: any) => void, index = 0) {
   // `useUpdate` with index 1, we will automatically change it to index 2 so
   // it doesn't interfere with the main loop
 
-  const priority = index === 1 ? 2 : index
+  const priority = index === 2 ? 3 : index
   const {
     camera,
     scene,

src/core/loop.ts

@@ -32,7 +32,7 @@ export function createRenderLoop(): RendererLoop {
   }) => void
 
   function registerCallback(callback: LoopCallback, index = 0) {
-    if (index === 1) {
+    if (index === 2) {
       // Take control over the main loop
       subscribers.set(index, [callback])
     }
@@ -92,8 +92,8 @@ export function createRenderLoop(): RendererLoop {
       .sort((a, b) => a - b) // Ensure numerical order
       .forEach((index) => {
         subscribers.get(index).forEach((callback: LoopCallback) => {
-          if (index !== 1 && !isActive.value) { return }
-          if (index === 1) {
+          if (index !== 2 && !isActive.value) { return }
+          if (index === 2) {
             if (isRenderPaused.value) {
               callback({ delta, elapsed, clock })
             }