feat: invalidate once first when is `renderMode !== 'always'`

playground/src/pages/rendering-modes/index.vue

@@ -2,11 +2,13 @@
 import { TresCanvas } from '@tresjs/core'
 
 import Scene from './scene.vue'
+
+const clearColor = ref('#82DBC5')
 </script>
 
 <template>
   <TresCanvas
-    clear-color="#82DBC5"
+    :clear-color="clearColor"
     render-mode="on-demand"
   >
     <Scene />

playground/src/pages/rendering-modes/scene.vue

@@ -9,18 +9,23 @@ function onControlChange() {
 }
 
 const positionX = ref(0)
+const showMesh = ref(true)
 
 setTimeout(() => {
-  positionX.value = 1
+  /*  positionX.value = 1 */
+  showMesh.value = false
 }, 3000)
 
-invalidate()
+/* invalidate() */
 </script>
 
 <template>
   <OrbitControls @change="onControlChange" />
   <TresGridHelper />
-  <TresMesh :position-x="positionX">
+  <TresMesh
+    v-if="showMesh"
+    :position-x="positionX"
+  >
     <TresBoxGeometry />
     <TresMeshNormalMaterial />
   </TresMesh>

src/composables/useRenderer/index.ts

@@ -111,7 +111,7 @@ export function useRenderer(
     canvas,
     options,
     disableRender,
-    contextParts: { sizes, camera, internal },
+    contextParts: { sizes, camera, internal, invalidate },
   }:
   {
     canvas: MaybeRef<HTMLCanvasElement>
@@ -218,7 +218,11 @@ export function useRenderer(
     if (renderMode === 'always') {
       // If the render mode is 'always', ensure there's always a frame pending
       internal.frames.value = Math.max(1, internal.frames.value)
-    } 
+    }
+    else {
+      // Invalidate for the first time
+      invalidate()
+    }
 
     const getValue = <T>(option: MaybeRefOrGetter<T>, pathInThree: string): T | undefined => {
       const value = toValue(option)

src/composables/useTresContextProvider/index.ts

@@ -97,7 +97,7 @@ export function useTresContextProvider({
       scene,
       canvas,
       options: rendererOptions,
-      contextParts: { sizes, camera, internal },
+      contextParts: { sizes, camera, internal, invalidate },
       disableRender,
     })