feat!: useLoop and useRenderLoop refactoring (#1035)

BREAKING CHANGE: onAfterRender has been renamed to onRender

* refactor: type improvements in createPriorityEventHook

* wip

* wip

* improved test

* added context to useCreateRenderLoop and tests

* fixed typing

* added clock

* wip

* refactor: remove deprecated loop implementation and update related composables

- Removed the old `useCreateRenderLoop` and its associated tests.
- Updated `useLoop` to utilize the new `useRenderLoop` for better event handling.
- Commented out `OrbitControls` in relevant Vue components for potential future use.
- Cleaned up unused code and comments in `useTresContextProvider`.

* added some todos

* refactor: removed redundant eventhook

* refactor: simplify renderer setup by removing loop parameter

* refactor: enhance useRenderLoop to accept notifyFrameRendered callback

* chore: removed obsolete comment

* chore: made TresCanvas use correct event hook

* refactor!: omitted frame in render manager return

* refactor: restored renderEventHook

* chore: added comments after meeting

* refactor: made render loop more generic in it's naming

* refactor: made useLoop use useTres context

* chore: added jsdoc description for useLoop

* refactor: rename LoopContext to RafLoopContext and update related references

* refactor: replaced setTimeout with useTimeout

* refactor: update useLoop tests to use useCreateRafLoop and adjust rendering logic

* test: enhance useLoop tests with fake timers and add new callback functionality

* chore: removed debug code

* fix: initialize frames based on renderMode to ensure correct rendering behavior

* refactor: fixed multiple playgrounds

* feat: added loop and beforeLoop events to canvas

* fix: fixed playground experience
rafactor: renamed replaceCycleFunction to replaceLoopFunction

* fix: fixed some more playgrounds

* fixed some more playgrounds

* refactor!: renamed onBeforeRender to onBeforeLoop and onRender to onLoop
fix: fixed playgrounds

* fixed test

* refactor: tiny code styling improvement

* refactor: omitted export of useCreateRafLoop

* linting fixes

* refactor: tiny improvement for fbo demo

* refactor: rename fboRef to groupRef for clarity in FBO demo

* refactor: renamed onBeforeLoop back to onBeforeRender and onLoop back to onRender

* restored usage of orbit controls

* more restoring of orbitcontrols usages

* refactor: updated loop handling by renaming onLoop to onRender in TakeOverRenderExperience.vue and adjusted related emit definitions in TresCanvas.vue

* removed obsolete comment

* chore(playground): fixed related playgrounds (#1039)

* refactor!: TresCanvas: changed type of event "render" to TresContext.

---------

Co-authored-by: Alvaro Saburido <[email protected]>

Author: Tinoooo

playground/vue/src/App.vue

@@ -10,9 +10,6 @@ function setBodyClass(routeName: string) {
 }
 watch([route], () => setBodyClass(route.name?.toString() ?? ''))
 provide('v-route', route)
-provide('useTres', {
-  message: `Im not the real useTres, but I can provide you with some data!`,
-})
 </script>
 
 <template>

playground/vue/src/components/AnimatedObjectUseUpdate.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
+import { whenever } from '@vueuse/core'
 
-const { nodes } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+const emit = defineEmits<{
+  ready: []
+}>()
+const { nodes, isReady } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 const model = computed(() => nodes.value.BlenderCube)
 
 defineExpose({
   model,
 })
+
+whenever(
+  isReady,
+  () => emit('ready'),
+  { once: true },
+)
 </script>
 
 <template>

playground/vue/src/components/BlenderCube.vue

@@ -298,7 +298,7 @@ const {
   mouseButtons,
 } = toRefs(props)
 
-const { camera: activeCamera, renderer, extend, controls, invalidate } = useTresContext()
+const { camera: activeCamera, renderer, extend, controls } = useTresContext()
 
 const controlsRef = shallowRef<OrbitControls | null>(null)
 
@@ -317,7 +317,7 @@ watch(controlsRef, (value) => {
 function addEventListeners() {
   useEventListener(controlsRef.value as any, 'change', () => {
     emit('change', controlsRef.value)
-    invalidate()
+    renderer.invalidate()
   })
   useEventListener(controlsRef.value as any, 'start', () => emit('start', controlsRef.value))
   useEventListener(controlsRef.value as any, 'end', () => emit('end', controlsRef.value))
@@ -370,6 +370,6 @@ defineExpose({ instance: controlsRef })
     :enable-rotate="enableRotate"
     :rotate-speed="rotateSpeed"
     :mouse-buttons="mouseButtons"
-    :args="[camera || activeCamera, domElement || renderer.domElement]"
+    :args="[camera || activeCamera, domElement || renderer.instance.domElement]"
   />
 </template>

playground/vue/src/components/LocalOrbitControls.vue

@@ -6,10 +6,10 @@ const sphereRef = ref()
 
 const { onBeforeRender } = useLoop()
 
-onBeforeRender((state) => {
+onBeforeRender(({ invalidate, elapsed }) => {
   if (!sphereRef.value) { return }
-  sphereRef.value.position.y += Math.sin(state.elapsed) * 0.01
-  state.invalidate()
+  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
+  invalidate()
 })
 </script>
 

playground/vue/src/components/TheSphere.vue

@@ -20,6 +20,7 @@ watchEffect(() => {
   <TresMesh>
     <TresBoxGeometry :args="[1, 1, 1]" />
     <TresMeshBasicMaterial
+      v-if="fboTarget"
       :color="0xFF8833"
       :map="fboTarget.texture ?? null"
     />

playground/vue/src/pages/advanced/fbo/FBOCube.vue

@@ -1,31 +1,31 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import FBOCube from './FBOCube.vue'
 import '@tresjs/leches/styles'
 
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
+const groupRef = ref()
+
+const onLoop = ({ elapsed }: { elapsed: number }) => {
+  groupRef.value.position.y = Math.sin(elapsed)
 }
 </script>
 
 <template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" />
+  <TresCanvas clear-color="#82DBC5" @loop="onLoop">
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
     <OrbitControls />
-    <!--  <Fbo
-      ref="fboRef"
-      v-bind="state"
-    /> -->
-
-    <FBOCube />
-    <AnimatedObjectUseUpdate />
+    <TresGroup ref="groupRef">
+      <FBOCube />
+    </TresGroup>
+    <TresMesh :position="[4, 0, 0]">
+      <TresTorusKnotGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresMesh :position="[-4, 0, 0]">
+      <TresTorusGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>

playground/vue/src/pages/advanced/fbo/index.vue

@@ -1,4 +1,3 @@
-import type { Camera } from 'three'
 import type { Ref } from 'vue'
 /* eslint-disable no-console */
 import { useLoop, useTres } from '@tresjs/core'
@@ -75,7 +74,9 @@ export function useFBO(options: FboOptions) {
     logBefore()
     renderer.setRenderTarget(target.value)
     renderer.clear()
-    renderer.render(scene, camera as Camera)
+    if (camera.value) {
+      renderer.render(scene.value, camera.value)
+    }
     renderer.setRenderTarget(null)
   }, Number.POSITIVE_INFINITY)
 

playground/vue/src/pages/advanced/fbo/useFBO.ts

@@ -15,7 +15,7 @@ onMounted(() => {
     :position="[5, 5, 5]"
     :look-at="[0, 0, 0]"
   />
-  <BlenderCube />
+  <BlenderCube @ready="advance" />
 
   <TresGridHelper />
   <OrbitControls @change="advance" />

playground/vue/src/pages/advanced/manual/experience.vue

@@ -1,54 +1,43 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 
-import { useLoop } from '@tresjs/core'
+import { useLoop, useTres } from '@tresjs/core'
 import { useControls } from '@tresjs/leches'
+import type { Mesh } from 'three'
 
-const { render, pauseRender, resumeRender } = useLoop()
+const { render, onRender } = useLoop()
+const { renderer, scene, camera } = useTres()
 
-const { off } = render(({ renderer, scene, camera }) => {
-  renderer.instance.render(scene, camera)
+const { shouldRender } = useControls({
+  shouldRender: true,
 })
 
-const { isRenderPaused, unregisterRender } = useControls({
-  isRenderPaused: {
-    value: false,
-    type: 'boolean',
-    label: 'Pause Render',
-  },
-  unregisterRender: {
-    value: false,
-    type: 'boolean',
-    label: 'Unregister render callback',
-  },
-})
-
-watchEffect(() => {
-  if (unregisterRender.value) {
-    off()
+render((notifySuccess) => {
+  if (shouldRender.value && camera.value) {
+    renderer.render(scene.value, camera.value)
+    notifySuccess()
   }
 })
 
-watchEffect(() => {
-  if (isRenderPaused.value) {
-    pauseRender()
-  }
-  else {
-    resumeRender()
+const boxRef = ref<Mesh>()
+
+onRender(() => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += 0.01
   }
 })
-
-const showGrid = ref(true)
-
-setTimeout(() => {
-  showGrid.value = false
-}, 10000)
 </script>
 
 <template>
-  <TresPerspectiveCamera :position="[3, 3, 3]" />
+  <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
   <OrbitControls make-default />
-  <AnimatedObjectUseUpdate />
-  <TresGridHelper v-if="showGrid" />
+  <TresMesh
+    ref="boxRef"
+    :position="[0, 0, 0]"
+    cast-shadow
+  >
+    <TresBoxGeometry />
+    <TresMeshNormalMaterial />
+  </TresMesh>
   <TresAmbientLight :intensity="1" />
 </template>