fix: manual rendering blank (#685)

* fix: increate time to advance on manual mode

* chore: correct playground

playground/src/components/TheSphere.vue

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

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { useTres } from '@tresjs/core'
+import BlenderCube from '../../../components/BlenderCube.vue'
+
+const { advance } = useTres()
+
+onMounted(() => {
+ advance()
+})
+</script>
+
+<template>
+ <TresPerspectiveCamera
+ :position="[5, 5, 5]"
+ :look-at="[0, 0, 0]"
+ />
+ <Suspense>
+ <BlenderCube />
+ </Suspense>
+ <TresGridHelper />
+ <OrbitControls @change="advance" />
+ <TresAmbientLight :intensity="1" />
+ <TresDirectionalLight
+ :position="[0, 8, 4]"
+ :intensity="0.7"
+ />
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { useState } from '../../../composables/state'
+
+import GraphPane from '../../../components/GraphPane.vue'
+import ManualExperience from './experience.vue'
+
+const { renderingTimes } = useState()
+
+function onRender() {
+ renderingTimes.value = 1
+}
+</script>
+
+<template>
+ <GraphPane />
+ <TresCanvas
+ render-mode="manual"
+ clear-color="#82DBC5"
+ @render="onRender"
+ >
+ <ManualExperience />
+ </TresCanvas>
+</template>

playground/src/pages/advanced/on-demand/experience.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { useTres } from '@tresjs/core'
+import { ref, watch } from 'vue'
+import BlenderCube from '../../../components/BlenderCube.vue'
+
+const { invalidate } = useTres()
+
+const blenderCubeRef = ref()
+
+watch(blenderCubeRef, (prev, next) => {
+ if (!next) { return }
+ invalidate()
+})
+
+function onControlChange() {
+ invalidate()
+}
+</script>
+
+<template>
+ <TresPerspectiveCamera
+ :position="[5, 5, 5]"
+ :look-at="[0, 0, 0]"
+ />
+ <Suspense>
+ <BlenderCube ref="blenderCubeRef" />
+ </Suspense>
+ <TresGridHelper />
+ <OrbitControls @change="onControlChange" />
+ <TresAmbientLight :intensity="1" />
+ <TresDirectionalLight
+ :position="[0, 8, 4]"
+ :intensity="0.7"
+ />
+</template>

playground/src/pages/advanced/on-demand/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { useState } from '../../../composables/state'
+import GraphPane from '../../../components/GraphPane.vue'
+import OnDemandExperience from './experience.vue'
+
+const { renderingTimes } = useState()
+
+function onRender() {
+ renderingTimes.value = 1
+}
+</script>
+
+<template>
+ <GraphPane />
+ <TresCanvas
+ render-mode="on-demand"
+ clear-color="#82DBC5"
+ @render="onRender"
+ >
+ <OnDemandExperience />
+ </TresCanvas>
+</template>

playground/src/router/routes/advanced.ts

@@ -2,7 +2,12 @@ export const advancedRoutes = [
  {
  path: '/advanced/on-demand',
  name: 'On Demand',
- component: () => import('../../pages/advanced/OnDemand.vue'),
+ component: () => import('../../pages/advanced/on-demand/index.vue'),
+ },
+ {
+ path: '/advanced/manual',
+ name: 'Manual rendering',
+ component: () => import('../../pages/advanced/manual/index.vue'),
  },
  {
  path: '/advanced/take-over-loop',

src/composables/useRenderer/index.ts

@@ -187,7 +187,7 @@ export function useRenderer(
  // Advance for the first time, setTimeout to make sure there is something to render
  setTimeout(() => {
  advance()
- }, 1)
+ }, 100)
  }
 
  watchEffect(() => {