fix: manual rendering blank (#685)

* fix: increate time to advance on manual mode

* chore: correct playground

playground/src/components/RenderingLogger.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import { onMounted } from 'vue'
-
-/* const { renderingTimes } = useState() */
-
-const state = useTresContext()
-
-function manualInvalidate() {
-  state.invalidate()
-}
-
-onMounted(() => {
-  manualInvalidate()
-})
-</script>
-
-<template>
-  <OrbitControls
-    @change="manualInvalidate"
-  />
-</template>

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/OnDemand.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { useState } from '../../composables/state'
-import BlenderCube from '../../components/BlenderCube.vue'
-import GraphPane from '../../components/GraphPane.vue'
-import RenderingLogger from '../../components/RenderingLogger.vue'
-
-const { renderingTimes } = useState()
-
-function onRender() {
-  renderingTimes.value = 1
-}
-</script>
-
-<template>
-  <GraphPane />
-  <TresCanvas
-    render-mode="on-demand"
-    clear-color="#82DBC5"
-    @render="onRender"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :look-at="[0, 0, 0]"
-    />
-    <Suspense>
-      <BlenderCube />
-    </Suspense>
-    <TresGridHelper />
-    <RenderingLogger />
-    <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight
-      :position="[0, 8, 4]"
-      :intensity="0.7"
-    />
-    <TheSphere />
-  </TresCanvas>
-</template>

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(() => {