diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index a40c8fda..d8757b66 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -16,9 +16,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup Pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
diff --git a/playground/components.d.ts b/playground/components.d.ts
index 09766ef1..f707e945 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
     AkuAku: typeof import('./src/components/AkuAku.vue')['default']
     FboCube: typeof import('./src/components/FboCube.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
+    GraphPane: typeof import('./src/components/GraphPane.vue')['default']
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/playground/src/components/GraphPane.vue b/playground/src/components/GraphPane.vue
new file mode 100644
index 00000000..e952173e
--- /dev/null
+++ b/playground/src/components/GraphPane.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRafFn } from '@vueuse/core'
+import { useState } from '../composables/state'
+
+const width = 160
+const height = 40
+const strokeWidth = 2
+const updateInterval = 100 // Update interval in milliseconds
+const topOffset = 0 // Offset from the top
+
+const points = ref('')
+const frameTimes = ref([])
+const maxFrames = ref(width / strokeWidth)
+
+let lastUpdateTime = performance.now()
+
+const { renderingTimes } = useState()
+
+useRafFn(({ timestamp }) => {
+  if (timestamp - lastUpdateTime >= updateInterval) {
+    lastUpdateTime = timestamp
+
+    frameTimes.value.push(renderingTimes?.value)
+    renderingTimes.value = 0
+
+    if (frameTimes.value.length > maxFrames.value) {
+      frameTimes.value.shift()
+    }
+
+    points.value = frameTimes.value
+      .map(
+        (value, index) =>
+          `${index * strokeWidth},${
+            height + topOffset - strokeWidth / 2 - (value * (height + topOffset - strokeWidth)) / 2
+          }`,
+      )
+      .join(' ')
+  }
+})
+</script>
+
+<template>
+  <div
+    class="absolute
+      left-2
+      top-2
+      flex
+      px-4
+      py-1
+      justify-between
+      gap-4
+      items-center
+      mb-2
+      z-10
+      bg-white
+      dark:bg-dark
+      shadow-xl
+      rounded
+      border-4
+      border-solid
+      bg-primary
+      border-primary
+      pointer-events-none
+      overflow-hidden"
+  >
+    <label class="text-secondary text-xs w-1/3">Rendering Activity</label>
+
+    <div
+      class="
+        bg-gray-100
+        dark:bg-gray-600
+        relative
+        w-2/3
+        p-1
+        rounded
+        text-right
+        text-xs
+        focus:border-gray-200
+        outline-none
+        border-none
+        font-sans
+      "
+    >
+      <svg
+        :width="width"
+        :height="height"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+      >
+        <polyline
+          :points="points"
+          stroke="lightgray"
+          :stroke-width="strokeWidth"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
diff --git a/playground/src/composables/state.ts b/playground/src/composables/state.ts
new file mode 100644
index 00000000..227164b7
--- /dev/null
+++ b/playground/src/composables/state.ts
@@ -0,0 +1,11 @@
+import { reactive, toRefs } from 'vue'
+
+const state = reactive({
+  renderingTimes: 0,
+})
+export function useState() {
+  return {
+    ...toRefs(state),
+
+  }
+}
diff --git a/playground/src/pages/abstractions/AnimatedSprite.vue b/playground/src/pages/abstractions/AnimatedSpriteDemo.vue
similarity index 97%
rename from playground/src/pages/abstractions/AnimatedSprite.vue
rename to playground/src/pages/abstractions/AnimatedSpriteDemo.vue
index 5b92a500..1fe23c4a 100644
--- a/playground/src/pages/abstractions/AnimatedSprite.vue
+++ b/playground/src/pages/abstractions/AnimatedSpriteDemo.vue
@@ -7,6 +7,7 @@ import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
 import { degToRad } from 'three/src/math/MathUtils.js'
 import type { Atlasish } from '../../../../src/core/abstractions/AnimatedSprite/Atlas'
+import { useState } from '../../composables/state'
 
 const ASSETS_URL = 'https://raw.githubusercontent.com/andretchen0/tresjs_assets/'
   + '462ad0f669f78d2c5ed7007b5134b419f646efad/textures/animated-sprite/'
@@ -119,16 +120,23 @@ const centerDemoImgData = (() => {
   canvas.parentElement?.removeChild(canvas)
   return imgData
 })()
+
+const { renderingTimes } = useState()
+
+function onRender() {
+  renderingTimes.value = 1
+}
 </script>
 
 <template>
   <TresLeches />
+  <GraphPane />
   <div style="position:absolute; top:0; z-index:1; font: 10px sans-serif; padding:10px;">
     <p>@frame: {{ lastFrame }}</p>
     <p>@end: {{ lastEnd }}</p>
     <p>@loop: {{ lastLoop }}</p>
   </div>
-  <TresCanvas v-bind="gl">
+  <TresCanvas v-bind="gl" render-mode="on-demand" @render="onRender">
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
     <TresGroup :position="[0, 0, -4]">
diff --git a/playground/src/pages/abstractions/FBODemo.vue b/playground/src/pages/abstractions/FBODemo.vue
deleted file mode 100644
index f631b3fe..00000000
--- a/playground/src/pages/abstractions/FBODemo.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Fbo, OrbitControls, Stats } from '@tresjs/cientos'
-import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
-
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: ACESFilmicToneMapping,
-}
-
-const fboRef = ref(null)
-const materialRef = ref(null)
-const torusRef = shallowRef(null)
-const capsuleRef = shallowRef(null)
-
-const { onLoop, resume } = useRenderLoop()
-
-const state = shallowReactive({
-  depth: false,
-  settings: {
-    samples: 1,
-  },
-})
-
-onMounted(async () => {
-  await nextTick()
-
-  onLoop(({ elapsed }) => {
-    torusRef.value.rotation.x = elapsed * 0.745
-    torusRef.value.rotation.y = elapsed * 0.361
-
-    capsuleRef.value.rotation.x = elapsed * 0.471
-    capsuleRef.value.rotation.z = elapsed * 0.632
-  })
-  resume()
-})
-
-const { 'Depth Buffer': isUseDepthBuffer, 'MSAA Samples': numMsaaSamples } = useControls({
-  'Depth Buffer': state.depth,
-  'MSAA Samples': {
-    label: 'MSAA Samples',
-    value: state.settings.samples,
-    min: 0,
-    max: 8,
-    step: 1,
-  },
-})
-
-watch(
-  isUseDepthBuffer.value,
-  () => { state.depth = isUseDepthBuffer.value.value },
-)
-watch(
-  numMsaaSamples.value,
-  () => { state.settings.samples = numMsaaSamples.value.value },
-)
-</script>
-
-<template>
-  <TresLeches />
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
-    <OrbitControls />
-
-    <TresGridHelper :args="[10, 10]" />
-    <Stats />
-    <Fbo
-      ref="fboRef"
-      v-bind="state"
-    />
-
-    <TresMesh>
-      <TresBoxGeometry :args="[1, 1, 1]" />
-      <TresMeshBasicMaterial
-        ref="materialRef"
-        :color="0xFF8833"
-        :map="fboRef?.instance.texture ?? null"
-      />
-    </TresMesh>
-
-    <TresMesh
-      ref="torusRef"
-      :position="[3, 0, 0]"
-    >
-      <TresTorusGeometry :args="[1, 0.5, 16, 100]" />
-      <TresMeshNormalMaterial />
-    </TresMesh>
-
-    <TresMesh
-      ref="capsuleRef"
-      :position="[-2, 0, 0]"
-    >
-      <TresCapsuleGeometry :args="[0.4, 1, 4, 8]" />
-      <TresMeshNormalMaterial />
-    </TresMesh>
-  </TresCanvas>
-</template>
diff --git a/playground/src/pages/abstractions/PositionalAudio.vue b/playground/src/pages/abstractions/PositionalAudioDemo.vue
similarity index 92%
rename from playground/src/pages/abstractions/PositionalAudio.vue
rename to playground/src/pages/abstractions/PositionalAudioDemo.vue
index bb4cab7b..1423acbd 100644
--- a/playground/src/pages/abstractions/PositionalAudio.vue
+++ b/playground/src/pages/abstractions/PositionalAudioDemo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { Box, OrbitControls, PositionalAudio } from '@tresjs/cientos'
+import { useState } from '../../composables/state'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -31,6 +32,12 @@ const handlerAudio = (action: string) => {
 const onContinue = () => {
   ready.value = true
 }
+
+const { renderingTimes } = useState()
+
+function onRender() {
+  renderingTimes.value = 1
+}
 </script>
 
 <template>
@@ -65,8 +72,8 @@ const onContinue = () => {
       </button>
     </div>
   </div>
-
-  <TresCanvas v-bind="gl">
+  <GraphPane />
+  <TresCanvas v-bind="gl" render-mode="on-demand" @render="onRender">
     <TresPerspectiveCamera :position="[0, 0.5, 5]" />
     <OrbitControls />
 
diff --git a/playground/src/pages/abstractions/Sampler.vue b/playground/src/pages/abstractions/Sampler.vue
index 907bd53b..c0412f09 100644
--- a/playground/src/pages/abstractions/Sampler.vue
+++ b/playground/src/pages/abstractions/Sampler.vue
@@ -30,7 +30,7 @@ const { samples } = useControls({
 
 <template>
   <TresLeches />
-  <TresCanvas v-bind="gl">
+  <TresCanvas v-bind="gl" render-mode="on-demand">
     <TresPerspectiveCamera :position="[0, 0.5, 5]" />
     <OrbitControls />
 
diff --git a/playground/src/pages/abstractions/fbo/FBODemo.vue b/playground/src/pages/abstractions/fbo/FBODemo.vue
new file mode 100644
index 00000000..a4537c2a
--- /dev/null
+++ b/playground/src/pages/abstractions/fbo/FBODemo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useLoop } from '@tresjs/core'
+import { Fbo, OrbitControls, Stats } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+
+const fboRef = ref(null)
+const materialRef = ref(null)
+const torusRef = shallowRef(null)
+const capsuleRef = shallowRef(null)
+
+const { onBeforeRender, resume } = useLoop()
+
+const state = shallowReactive({
+  depth: false,
+  settings: {
+    samples: 1,
+  },
+})
+
+onMounted(async () => {
+  await nextTick()
+
+  onBeforeRender(({ elapsed /* invalidate */ }) => {
+    torusRef.value.rotation.x = elapsed * 0.745
+    torusRef.value.rotation.y = elapsed * 0.361
+
+    capsuleRef.value.rotation.x = elapsed * 0.471
+    capsuleRef.value.rotation.z = elapsed * 0.632
+
+    /*  invalidate() */
+  })
+  resume()
+})
+
+const { 'Depth Buffer': isUseDepthBuffer, 'MSAA Samples': numMsaaSamples } = useControls({
+  'Depth Buffer': state.depth,
+  'MSAA Samples': {
+    label: 'MSAA Samples',
+    value: state.settings.samples,
+    min: 0,
+    max: 8,
+    step: 1,
+  },
+})
+
+watch(
+  isUseDepthBuffer.value,
+  () => { state.depth = isUseDepthBuffer.value.value },
+)
+watch(
+  numMsaaSamples.value,
+  () => { state.settings.samples = numMsaaSamples.value.value },
+)
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+  <OrbitControls />
+
+  <TresGridHelper :args="[10, 10]" />
+  <Stats />
+  <Fbo
+    ref="fboRef"
+    v-bind="state"
+  />
+
+  <TresMesh>
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshBasicMaterial
+      ref="materialRef"
+      :color="0xFF8833"
+      :map="fboRef?.instance.texture ?? null"
+    />
+  </TresMesh>
+
+  <TresMesh
+    ref="torusRef"
+    :position="[3, 0, 0]"
+  >
+    <TresTorusGeometry :args="[1, 0.5, 16, 100]" />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+
+  <TresMesh
+    ref="capsuleRef"
+    :position="[-2, 0, 0]"
+  >
+    <TresCapsuleGeometry :args="[0.4, 1, 4, 8]" />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+</template>
diff --git a/playground/src/pages/abstractions/fbo/index.vue b/playground/src/pages/abstractions/fbo/index.vue
new file mode 100644
index 00000000..39df979a
--- /dev/null
+++ b/playground/src/pages/abstractions/fbo/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import Experiment from './FBODemo.vue'
+
+useControls('fpsgraph')
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clear-color="#c0ffee">
+    <Experiment />
+  </TresCanvas>
+</template>
diff --git a/playground/src/pages/abstractions/useFBODemo.vue b/playground/src/pages/abstractions/fbo/useFBODemo.vue
similarity index 100%
rename from playground/src/pages/abstractions/useFBODemo.vue
rename to playground/src/pages/abstractions/fbo/useFBODemo.vue
diff --git a/playground/src/pages/abstractions/lensflare/LensflareDemo.vue b/playground/src/pages/abstractions/lensflare/LensflareDemo.vue
new file mode 100644
index 00000000..b19fffde
--- /dev/null
+++ b/playground/src/pages/abstractions/lensflare/LensflareDemo.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useLoop } from '@tresjs/core'
+import { Lensflare, OrbitControls, Torus } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+import { shallowRef } from 'vue'
+import '@tresjs/leches/styles'
+
+const [x, z] = [shallowRef(0), shallowRef(0)]
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(({ elapsed }) => {
+  z.value = Math.cos(elapsed * 0.5) * 2
+  x.value = Math.sin(elapsed)
+})
+
+const { value: scale } = useControls({
+  scale: { value: 0.33, min: 0.01, max: 2, step: 0.01 },
+})
+</script>
+
+<template>
+  <OrbitControls />
+  <TresPointLight :position="[x, 0, z]">
+    <Lensflare
+      :seed="1028"
+      :scale="scale"
+    />
+  </TresPointLight>
+  <Torus
+    v-for="n in [-2, 0, 2]"
+    :key="n"
+    :args="[0.7, 0.15]"
+    :position-z="n"
+    :rotation-y="Math.PI * 0.5"
+  >
+    <TresMeshPhongMaterial color="#888" />
+  </Torus>
+  <TresGridHelper :position="[0, -0.9, 0]" />
+</template>
diff --git a/playground/src/pages/abstractions/lensflare/index.vue b/playground/src/pages/abstractions/lensflare/index.vue
new file mode 100644
index 00000000..3dfba338
--- /dev/null
+++ b/playground/src/pages/abstractions/lensflare/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import Experiment from './LensflareDemo.vue'
+
+useControls('fpsgraph')
+</script>
+
+<template>
+  <TresLeches class="important-top-4 important-left-4" />
+  <TresCanvas clear-color="#333" render-mode="on-demand">
+    <Experiment />
+  </TresCanvas>
+</template>
diff --git a/playground/src/pages/controls/KeyboardControls.vue b/playground/src/pages/controls/KeyboardControlsDemo.vue
similarity index 95%
rename from playground/src/pages/controls/KeyboardControls.vue
rename to playground/src/pages/controls/KeyboardControlsDemo.vue
index 5d4fbfa1..3928fbdb 100644
--- a/playground/src/pages/controls/KeyboardControls.vue
+++ b/playground/src/pages/controls/KeyboardControlsDemo.vue
@@ -22,7 +22,7 @@ const hasChange = (state: any) => {
 </script>
 
 <template>
-  <TresCanvas v-bind="gl">
+  <TresCanvas v-bind="gl" render-mode="on-demand">
     <TresPerspectiveCamera :position="[0, 3, 10]" />
     <StatsGl />
     <!-- <Sky /> -->
diff --git a/playground/src/pages/controls/OrbitControlsDemo.vue b/playground/src/pages/controls/OrbitControlsDemo.vue
index 3e3d4216..2011a811 100644
--- a/playground/src/pages/controls/OrbitControlsDemo.vue
+++ b/playground/src/pages/controls/OrbitControlsDemo.vue
@@ -6,6 +6,7 @@ import { OrbitControls } from '@tresjs/cientos'
 import { reactive } from 'vue'
 import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
+import { useState } from '../../composables/state'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -174,11 +175,18 @@ function onStart() {
 function onEnd() {
   /*   console.log('end') */
 }
+
+const { renderingTimes } = useState()
+
+function onRender() {
+  renderingTimes.value = 1
+}
 </script>
 
 <template>
   <TresLeches />
-  <TresCanvas v-bind="gl">
+  <GraphPane />
+  <TresCanvas v-bind="gl" render-mode="on-demand" @render="onRender">
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls
       v-bind="controlsState"
diff --git a/playground/src/pages/controls/PointerLockControls.vue b/playground/src/pages/controls/PointerLockControlsDemo.vue
similarity index 100%
rename from playground/src/pages/controls/PointerLockControls.vue
rename to playground/src/pages/controls/PointerLockControlsDemo.vue
diff --git a/playground/src/pages/materials/WobbleMaterial.vue b/playground/src/pages/materials/WobbleMaterialDemo.vue
similarity index 97%
rename from playground/src/pages/materials/WobbleMaterial.vue
rename to playground/src/pages/materials/WobbleMaterialDemo.vue
index 02ed09e5..74ecaab6 100644
--- a/playground/src/pages/materials/WobbleMaterial.vue
+++ b/playground/src/pages/materials/WobbleMaterialDemo.vue
@@ -20,6 +20,7 @@ const context = ref()
   <TresCanvas
     v-bind="gl"
     ref="context"
+    render-mode="on-demand"
   >
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <TresMesh>
diff --git a/playground/src/pages/misc/BakeShadows.vue b/playground/src/pages/misc/BakeShadowsDemo.vue
similarity index 100%
rename from playground/src/pages/misc/BakeShadows.vue
rename to playground/src/pages/misc/BakeShadowsDemo.vue
diff --git a/playground/src/pages/staging/FitDemo.vue b/playground/src/pages/staging/FitDemo.vue
deleted file mode 100644
index b63d6752..00000000
--- a/playground/src/pages/staging/FitDemo.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Fit, OrbitControls } from '@tresjs/cientos'
-import { Box3, BoxGeometry, Mesh, MeshBasicMaterial, Vector3 } from 'three'
-import RandUtils from '../../../../src/core/abstractions/Lensflare/RandUtils'
-
-function getPositions(seed: number, count = 40, radius = 10) {
-  // NOTE: Generate some randomish positions for
-  // some child components of `<Fit />`
-  const positions: Vector3[] = []
-  const rng = new RandUtils(seed)
-  const rand = () => rng.rand()
-  const offsetX = rand() * 10
-  const offsetY = rand() * 10
-  const offsetZ = rand() * 10
-  const radX = rand() * radius + 1
-  const radY = rand() * radius + 1
-  const radZ = rand() * radius + 1
-  for (let i = 0; i < count; i++) {
-    positions.push(
-      new Vector3(
-        rand() * radX + offsetX,
-        rand() * radY + offsetY,
-        rand() * radZ + offsetZ,
-      ),
-    )
-  }
-  return positions
-}
-
-// NOTE: Create some refs so we can scale, rotate, and twist
-// the container and `<Fit />` elements. We want to make sure
-// that it works in chains with the usual transforms.
-const [sx0, sy0, sz0, rx0, ry0, rz0, x0, y0, z0, sx1, sy1, sz1, rx1, ry1, rz1, x1, y1, z1, sx2, sy2, sz2, rx2, ry2, rz2, x2, y2, z2, x3, y3] = Array.from({ length: 30 })
-  .fill(0)
-  .map(_ => shallowRef(0))
-const fit0 = shallowRef({ fit: () => {} })
-const fit1 = shallowRef({ fit: () => {} })
-const fit2 = shallowRef({ fit: () => {} })
-const { sin, cos, PI } = Math
-useRenderLoop().onLoop(({ elapsed }) => {
-  rx0.value = sin(elapsed * 0.05) * PI
-  ry0.value = sin(elapsed * 0.11) * PI
-  rz0.value = sin(elapsed * 0.22) * PI
-  rx1.value = sin(elapsed * 0.66) * PI
-  ry1.value = sin(elapsed * 0.77) * PI
-  rz1.value = sin(elapsed * 0.88) * PI
-  rx2.value = sin(elapsed * 1.33) * PI
-  ry2.value = sin(elapsed * 1.44) * PI
-  rz2.value = sin(elapsed * 1.55) * PI
-
-  x0.value = sin(elapsed * 0.33)
-  y0.value = sin(elapsed * 0.44)
-  z0.value = sin(elapsed * 0.55)
-  x1.value = sin(elapsed * 0.99)
-  y1.value = sin(elapsed * 1.11)
-  z1.value = sin(elapsed * 1.22)
-  x2.value = sin(elapsed * 1.66)
-  y2.value = sin(elapsed * 1.77)
-  z2.value = sin(elapsed * 1.88)
-
-  x3.value = sin(elapsed)
-  y3.value = cos(elapsed)
-
-  sx0.value = cos(elapsed * 0.22)
-  sy0.value = cos(elapsed * 0.33)
-  sz0.value = cos(elapsed * 0.33)
-  sx1.value = cos(elapsed * 0.22)
-  sy1.value = cos(elapsed * 0.44)
-  sz1.value = cos(elapsed * 0.55)
-  sx2.value = cos(elapsed * 0.66)
-  sy2.value = cos(elapsed * 0.77)
-  sz2.value = cos(elapsed * 0.88)
-
-  fit0.value.update()
-  fit1.value.update()
-  fit2.value.update()
-})
-
-// NOTE: Make choices for `:into` options
-// radio buttons.
-const object = new Mesh(new BoxGeometry(), new MeshBasicMaterial({ wireframe: true }))
-const choices = [
-  { label: 'Turn off' },
-  { label: 'null', value: null },
-  { label: 'Default – fit into 1 x 1 x 1 box at world origin' },
-  { label: 'undefined', value: undefined },
-  { label: 'Scale' },
-  { label: 'Number', value: 1 },
-  { label: 'Number', value: 2 },
-  { label: 'Number', value: 3 },
-  { label: 'Array', value: [1, 1, 1] as [number, number, number] },
-  { label: 'Array', value: [1, 2, 3] as [number, number, number] },
-  { label: 'Array', value: [3, 2, 1] as [number, number, number] },
-  { label: 'Array', value: [5, 6, 7] as [number, number, number] },
-  { label: 'Array', value: [7, 7, 7] as [number, number, number] },
-  { label: 'Vector3', value: new Vector3(1, 1, 1) },
-  { label: 'Vector3', value: new Vector3(1, 2, 3) },
-  { label: 'Vector3', value: new Vector3(3, 2, 1) },
-  { label: 'Scale and position' },
-  { label: 'Box3(0,0,0, 1,1,1)', value: new Box3(new Vector3(0, 0, 0), new Vector3(1, 1, 1)) },
-  { label: 'Box3(-1,-1,-1, 1,1,1)', value: new Box3(new Vector3(-1, -1, -1), new Vector3(1, 1, 1)) },
-  { label: 'Box3(-5,0,-5, 5,10,5)', value: new Box3(new Vector3(-5, 0, -5), new Vector3(5, 10, 5)) },
-  { label: 'Object', value: object },
-]
-const choice = shallowRef(choices[1])
-</script>
-
-<template>
-  <div class="overlay">
-    <h2><code>:into</code> value</h2>
-    <template
-      v-for="c, i of choices"
-      :key="i"
-    >
-      <div>
-        <div v-if="'value' in c">
-          <input
-            :id="`id-${i}`"
-            :checked="c === choice"
-            type="radio"
-            value="c.label"
-            name="choice"
-            @change="() => { choice = c; }"
-          />
-          <label :for="`id-${i}`">{{ `${c.label} - ${JSON.stringify(c.value)?.substring(0, 25)}` }}</label>
-        </div>
-        <h2 v-else>
-          {{ c.label }}
-        </h2>
-      </div>
-    </template>
-    <p>N.B.: <code>fit.update()</code> is called continuously in the update loop.</p>
-  </div>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <TresGroup
-      :rotation="[rx0, ry0, rz0]"
-      :position="[x0, y0, z0]"
-      :scale="[sx0, sy0, sz0]"
-    >
-      <TresGroup
-        :rotation="[rx1, ry1, rz1]"
-        :position="[x1, y1, z1]"
-        :scale="[sx1, sy1, sz1]"
-      >
-        <TresGroup
-          :rotation="[-1, 0, 0]"
-          :visible="choice.value === object"
-        >
-          <primitive :object="object" />
-        </TresGroup>
-        <TresGroup
-          :rotation="[rx2, ry2, rz2]"
-          :position="[x2, y2, z2]"
-          :scale="[sx2, sy2, sz2]"
-        >
-          <Fit
-            ref="fit0"
-            :into="choice.value"
-          >
-            <TresMesh
-              v-for="(p, ii) of getPositions(0)"
-              :key="ii"
-              :position="p"
-            >
-              <TresBoxGeometry />
-              <TresMeshBasicMaterial color="red" />
-            </TresMesh>
-          </Fit>
-        </TresGroup>
-      </TresGroup>
-    </TresGroup>
-    <Fit
-      ref="fit1"
-      :into="choice.value"
-    >
-      <TresMesh :position="[x3, y3, 3]">
-        <TresTorusGeometry />
-        <TresMeshBasicMaterial color="blue" />
-      </TresMesh>
-      <TresMesh :position="[x3, y3, 0]">
-        <TresTorusGeometry />
-        <TresMeshBasicMaterial color="blue" />
-      </TresMesh>
-      <TresMesh :position="[x3, y3, -3]">
-        <TresTorusGeometry />
-        <TresMeshBasicMaterial color="blue" />
-      </TresMesh>
-    </Fit>
-    <Fit
-      ref="fit2"
-      :into="choice.value"
-    >
-      <TresMesh :position="[0, 0, -5]">
-        <TresSphereGeometry />
-        <TresMeshBasicMaterial color="green" />
-      </TresMesh>
-    </Fit>
-    <OrbitControls />
-    <TresGridHelper />
-  </TresCanvas>
-</template>
-
-<style scoped>
-.overlay {
-  z-index: 2;
-  position: fixed;
-  width: 240px;
-  padding: 10px;
-  margin: 5px;
-  font-family: sans-serif;
-  font-size: 10px;
-  background-color: white;
-  border-radius: 5px;
-}
-</style>
diff --git a/playground/src/pages/staging/fit/FitDemo.vue b/playground/src/pages/staging/fit/FitDemo.vue
new file mode 100644
index 00000000..2b5d92be
--- /dev/null
+++ b/playground/src/pages/staging/fit/FitDemo.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { TresObject3D } from '@tresjs/core'
+import { useLoop,
+} from '@tresjs/core'
+import { Fit, OrbitControls } from '@tresjs/cientos'
+import { Vector3 } from 'three'
+import RandUtils from '../../../../../src/core/abstractions/Lensflare/RandUtils'
+
+defineProps<{
+  choice: Ref<TresObject3D>
+  object: Ref<TresObject3D>
+}>()
+function getPositions(seed: number, count = 40, radius = 10) {
+  // NOTE: Generate some randomish positions for
+  // some child components of `<Fit />`
+  const positions: Vector3[] = []
+  const rng = new RandUtils(seed)
+  const rand = () => rng.rand()
+  const offsetX = rand() * 10
+  const offsetY = rand() * 10
+  const offsetZ = rand() * 10
+  const radX = rand() * radius + 1
+  const radY = rand() * radius + 1
+  const radZ = rand() * radius + 1
+  for (let i = 0; i < count; i++) {
+    positions.push(
+      new Vector3(
+        rand() * radX + offsetX,
+        rand() * radY + offsetY,
+        rand() * radZ + offsetZ,
+      ),
+    )
+  }
+  return positions
+}
+
+// NOTE: Create some refs so we can scale, rotate, and twist
+// the container and `<Fit />` elements. We want to make sure
+// that it works in chains with the usual transforms.
+const [sx0, sy0, sz0, rx0, ry0, rz0, x0, y0, z0, sx1, sy1, sz1, rx1, ry1, rz1, x1, y1, z1, sx2, sy2, sz2, rx2, ry2, rz2, x2, y2, z2, x3, y3] = Array.from({ length: 30 })
+  .fill(0)
+  .map(_ => shallowRef(0))
+const fit0 = shallowRef({ fit: () => {} })
+const fit1 = shallowRef({ fit: () => {} })
+const fit2 = shallowRef({ fit: () => {} })
+const { sin, cos, PI } = Math
+
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(({ elapsed }) => {
+  rx0.value = sin(elapsed * 0.05) * PI
+  ry0.value = sin(elapsed * 0.11) * PI
+  rz0.value = sin(elapsed * 0.22) * PI
+  rx1.value = sin(elapsed * 0.66) * PI
+  ry1.value = sin(elapsed * 0.77) * PI
+  rz1.value = sin(elapsed * 0.88) * PI
+  rx2.value = sin(elapsed * 1.33) * PI
+  ry2.value = sin(elapsed * 1.44) * PI
+  rz2.value = sin(elapsed * 1.55) * PI
+
+  x0.value = sin(elapsed * 0.33)
+  y0.value = sin(elapsed * 0.44)
+  z0.value = sin(elapsed * 0.55)
+  x1.value = sin(elapsed * 0.99)
+  y1.value = sin(elapsed * 1.11)
+  z1.value = sin(elapsed * 1.22)
+  x2.value = sin(elapsed * 1.66)
+  y2.value = sin(elapsed * 1.77)
+  z2.value = sin(elapsed * 1.88)
+
+  x3.value = sin(elapsed)
+  y3.value = cos(elapsed)
+
+  sx0.value = cos(elapsed * 0.22)
+  sy0.value = cos(elapsed * 0.33)
+  sz0.value = cos(elapsed * 0.33)
+  sx1.value = cos(elapsed * 0.22)
+  sy1.value = cos(elapsed * 0.44)
+  sz1.value = cos(elapsed * 0.55)
+  sx2.value = cos(elapsed * 0.66)
+  sy2.value = cos(elapsed * 0.77)
+  sz2.value = cos(elapsed * 0.88)
+
+  fit0.value.update()
+  fit1.value.update()
+  fit2.value.update()
+})
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[5, 5, 5]" />
+  <TresGroup
+    :rotation="[rx0, ry0, rz0]"
+    :position="[x0, y0, z0]"
+    :scale="[sx0, sy0, sz0]"
+  >
+    <TresGroup
+      :rotation="[rx1, ry1, rz1]"
+      :position="[x1, y1, z1]"
+      :scale="[sx1, sy1, sz1]"
+    >
+      <TresGroup
+        :rotation="[-1, 0, 0]"
+        :visible="choice.value === object"
+      >
+        <primitive :object="object" />
+      </TresGroup>
+      <TresGroup
+        :rotation="[rx2, ry2, rz2]"
+        :position="[x2, y2, z2]"
+        :scale="[sx2, sy2, sz2]"
+      >
+        <Fit
+          ref="fit0"
+          :into="choice.value"
+        >
+          <TresMesh
+            v-for="(p, ii) of getPositions(0)"
+            :key="ii"
+            :position="p"
+          >
+            <TresBoxGeometry />
+            <TresMeshBasicMaterial color="red" />
+          </TresMesh>
+        </Fit>
+      </TresGroup>
+    </TresGroup>
+  </TresGroup>
+  <Fit
+    ref="fit1"
+    :into="choice.value"
+  >
+    <TresMesh :position="[x3, y3, 3]">
+      <TresTorusGeometry />
+      <TresMeshBasicMaterial color="blue" />
+    </TresMesh>
+    <TresMesh :position="[x3, y3, 0]">
+      <TresTorusGeometry />
+      <TresMeshBasicMaterial color="blue" />
+    </TresMesh>
+    <TresMesh :position="[x3, y3, -3]">
+      <TresTorusGeometry />
+      <TresMeshBasicMaterial color="blue" />
+    </TresMesh>
+  </Fit>
+  <Fit
+    ref="fit2"
+    :into="choice.value"
+  >
+    <TresMesh :position="[0, 0, -5]">
+      <TresSphereGeometry />
+      <TresMeshBasicMaterial color="green" />
+    </TresMesh>
+  </Fit>
+  <OrbitControls />
+  <TresGridHelper />
+</template>
diff --git a/playground/src/pages/staging/fit/index.vue b/playground/src/pages/staging/fit/index.vue
new file mode 100644
index 00000000..2114a513
--- /dev/null
+++ b/playground/src/pages/staging/fit/index.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box3, BoxGeometry, Mesh, MeshBasicMaterial, Vector3 } from 'three'
+import { useState } from '../../../composables/state'
+import TheExperience from './FitDemo.vue'
+
+// NOTE: Make choices for `:into` options
+// radio buttons.
+const object = new Mesh(new BoxGeometry(), new MeshBasicMaterial({ wireframe: true }))
+
+const choices = [
+  { label: 'Turn off' },
+  { label: 'null', value: null },
+  { label: 'Default – fit into 1 x 1 x 1 box at world origin' },
+  { label: 'undefined', value: undefined },
+  { label: 'Scale' },
+  { label: 'Number', value: 1 },
+  { label: 'Number', value: 2 },
+  { label: 'Number', value: 3 },
+  { label: 'Array', value: [1, 1, 1] as [number, number, number] },
+  { label: 'Array', value: [1, 2, 3] as [number, number, number] },
+  { label: 'Array', value: [3, 2, 1] as [number, number, number] },
+  { label: 'Array', value: [5, 6, 7] as [number, number, number] },
+  { label: 'Array', value: [7, 7, 7] as [number, number, number] },
+  { label: 'Vector3', value: new Vector3(1, 1, 1) },
+  { label: 'Vector3', value: new Vector3(1, 2, 3) },
+  { label: 'Vector3', value: new Vector3(3, 2, 1) },
+  { label: 'Scale and position' },
+  { label: 'Box3(0,0,0, 1,1,1)', value: new Box3(new Vector3(0, 0, 0), new Vector3(1, 1, 1)) },
+  { label: 'Box3(-1,-1,-1, 1,1,1)', value: new Box3(new Vector3(-1, -1, -1), new Vector3(1, 1, 1)) },
+  { label: 'Box3(-5,0,-5, 5,10,5)', value: new Box3(new Vector3(-5, 0, -5), new Vector3(5, 10, 5)) },
+  { label: 'Object', value: object },
+]
+const choice = shallowRef(choices[1])
+
+const { renderingTimes } = useState()
+
+function onRender() {
+  renderingTimes.value = 1
+}
+</script>
+
+<template>
+  <div class="overlay">
+    <h2><code>:into</code> value</h2>
+    <template
+      v-for="c, i of choices"
+      :key="i"
+    >
+      <div>
+        <div v-if="'value' in c">
+          <input
+            :id="`id-${i}`"
+            :checked="c === choice"
+            type="radio"
+            value="c.label"
+            name="choice"
+            @change="() => { choice = c; }"
+          />
+          <label :for="`id-${i}`">{{ `${c.label} - ${JSON.stringify(c.value)?.substring(0, 25)}` }}</label>
+        </div>
+        <h2 v-else>
+          {{ c.label }}
+        </h2>
+      </div>
+    </template>
+    <p>N.B.: <code>fit.update()</code> is called continuously in the update loop.</p>
+  </div>
+  <GraphPane />
+  <TresCanvas render-mode="on-demand" @render="onRender">
+    <TheExperience :object="object" :choice="choice" />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.overlay {
+  z-index: 2;
+  position: fixed;
+  width: 240px;
+  padding: 10px;
+  margin: 5px;
+  font-family: sans-serif;
+  font-size: 10px;
+  background-color: white;
+  border-radius: 5px;
+}
+</style>
diff --git a/playground/src/router/routes/abstractions.ts b/playground/src/router/routes/abstractions.ts
index 1dc766c1..1c10a6f8 100644
--- a/playground/src/router/routes/abstractions.ts
+++ b/playground/src/router/routes/abstractions.ts
@@ -17,7 +17,7 @@ export const abstractionsRoutes = [
   {
     path: '/abstractions/lensflare',
     name: 'Lensflare',
-    component: () => import('../../pages/abstractions/LensflareDemo.vue'),
+    component: () => import('../../pages/abstractions/lensflare/index.vue'),
   },
   {
     path: '/abstractions/reflector-mesh',
@@ -32,12 +32,12 @@ export const abstractionsRoutes = [
   {
     path: '/abstractions/fbo',
     name: 'Fbo',
-    component: () => import('../../pages/abstractions/FBODemo.vue'),
+    component: () => import('../../pages/abstractions/fbo/index.vue'),
   },
   {
     path: '/abstractions/use-fbo',
     name: 'useFbo',
-    component: () => import('../../pages/abstractions/useFBODemo.vue'),
+    component: () => import('../../pages/abstractions/fbo/useFBODemo.vue'),
   },
   {
     path: '/abstractions/use-surface-sampler',
@@ -52,11 +52,11 @@ export const abstractionsRoutes = [
   {
     path: '/abstractions/positional-audio',
     name: 'PositionalAudio',
-    component: () => import('../../pages/abstractions/PositionalAudio.vue'),
+    component: () => import('../../pages/abstractions/PositionalAudioDemo.vue'),
   },
   {
     path: '/abstractions/animated-sprite',
     name: 'AnimatedSprite',
-    component: () => import('../../pages/abstractions/AnimatedSprite.vue'),
+    component: () => import('../../pages/abstractions/AnimatedSpriteDemo.vue'),
   },
 ]
diff --git a/playground/src/router/routes/controls.ts b/playground/src/router/routes/controls.ts
index 3d8eea05..931aa55f 100644
--- a/playground/src/router/routes/controls.ts
+++ b/playground/src/router/routes/controls.ts
@@ -22,12 +22,12 @@ export const controlsRoutes = [
   {
     path: '/controls/keyboard-controls',
     name: 'KeyboardControls',
-    component: () => import('../../pages/controls/KeyboardControls.vue'),
+    component: () => import('../../pages/controls/KeyboardControlsDemo.vue'),
   },
   {
     path: '/controls/pointerlock-controls',
     name: 'PointerLockControls',
-    component: () => import('../../pages/controls/PointerLockControls.vue'),
+    component: () => import('../../pages/controls/PointerLockControlsDemo.vue'),
   },
   {
     path: '/controls/scroll-controls',
diff --git a/playground/src/router/routes/materials.ts b/playground/src/router/routes/materials.ts
index 8daf59e3..976a558a 100644
--- a/playground/src/router/routes/materials.ts
+++ b/playground/src/router/routes/materials.ts
@@ -2,7 +2,7 @@ export const materialsRoutes = [
   {
     path: '/materials/wobble-material',
     name: 'WobbleMaterial',
-    component: () => import('../../pages/materials/WobbleMaterial.vue'),
+    component: () => import('../../pages/materials/WobbleMaterialDemo.vue'),
   },
   {
     path: '/materials/glass-material',
diff --git a/playground/src/router/routes/misc.ts b/playground/src/router/routes/misc.ts
index d2f98785..ee134671 100644
--- a/playground/src/router/routes/misc.ts
+++ b/playground/src/router/routes/misc.ts
@@ -22,7 +22,7 @@ export const miscRoutes = [
   {
     path: '/misc/bake-shadows',
     name: 'BakeShadows',
-    component: () => import('../../pages/misc/BakeShadows.vue'),
+    component: () => import('../../pages/misc/BakeShadowsDemo.vue'),
   },
   {
     path: '/misc/gltfExporter',
diff --git a/playground/src/router/routes/staging.ts b/playground/src/router/routes/staging.ts
index 895e678c..e6141523 100644
--- a/playground/src/router/routes/staging.ts
+++ b/playground/src/router/routes/staging.ts
@@ -47,6 +47,6 @@ export const stagingRoutes = [
   {
     path: '/staging/fit',
     name: 'Fit',
-    component: () => import('../../pages/staging/FitDemo.vue'),
+    component: () => import('../../pages/staging/fit/index.vue'),
   },
 ]
diff --git a/src/composables/useOnDemandInvalidation.ts b/src/composables/useOnDemandInvalidation.ts
new file mode 100644
index 00000000..9b0b0d04
--- /dev/null
+++ b/src/composables/useOnDemandInvalidation.ts
@@ -0,0 +1,20 @@
+import { watch } from 'vue'
+import { useTresContext } from '@tresjs/core' // Replace with the actual import path
+
+export function useOnDemandInvalidation(props: Record<string, any>) {
+  const { render, invalidate } = useTresContext()
+
+  function invalidateOnDemand() {
+    if (render.mode.value === 'on-demand') {
+      invalidate()
+    }
+  }
+
+  watch(props, () => {
+    invalidateOnDemand()
+  })
+
+  return {
+    invalidateOnDemand,
+  }
+}
diff --git a/src/core/abstractions/AnimatedSprite/component.vue b/src/core/abstractions/AnimatedSprite/component.vue
index 3e045ded..a25ebaf3 100644
--- a/src/core/abstractions/AnimatedSprite/component.vue
+++ b/src/core/abstractions/AnimatedSprite/component.vue
@@ -4,6 +4,7 @@ import type { TresVector2 } from '@tresjs/core'
 import { normalizeVectorFlexibleParam, useLoop } from '@tresjs/core'
 import type { Intersection } from 'three'
 import { DoubleSide } from 'three'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 import type { Atlasish } from './Atlas'
 import { getAtlasFrames, getNullAtlasFrame, getTextureAndAtlasAsync, setAtlasDefinitions } from './Atlas'
 
@@ -77,6 +78,8 @@ const emit = defineEmits<{
   (e: 'click', event: Intersection): void
 }>()
 
+useOnDemandInvalidation(props)
+
 const positionX = ref(0)
 const positionY = ref(0)
 const scaleX = ref(0)
diff --git a/src/core/abstractions/Levioso.vue b/src/core/abstractions/Levioso.vue
index a1d3f9e1..a3ef5944 100644
--- a/src/core/abstractions/Levioso.vue
+++ b/src/core/abstractions/Levioso.vue
@@ -2,6 +2,7 @@
 import { useLoop } from '@tresjs/core'
 import { MathUtils } from 'three'
 import { shallowRef } from 'vue'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 const props = withDefaults(
   defineProps<{
@@ -18,6 +19,8 @@ const props = withDefaults(
   },
 )
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const groupRef = shallowRef()
 
 defineExpose({
@@ -45,6 +48,8 @@ defineExpose({
     group.rotation.y = Math.sin(theta) * AMPLITUDE_ROTATION_Y * props.rotationFactor
     group.rotation.z = Math.sin(theta) * AMPLITUDE_ROTATION_Z * props.rotationFactor
     group.position.y = MathUtils.mapLinear(Math.sin(theta), -1, 1, props.range[0], props.range[1]) * props.floatFactor
+
+    invalidateOnDemand()
   })
 }
 </script>
diff --git a/src/core/abstractions/MouseParallax.vue b/src/core/abstractions/MouseParallax.vue
index 953b0e1c..3bb4dbb4 100644
--- a/src/core/abstractions/MouseParallax.vue
+++ b/src/core/abstractions/MouseParallax.vue
@@ -4,6 +4,7 @@ import type { Group } from 'three'
 import { useLoop, useTresContext } from '@tresjs/core'
 import { useElementSize, useMouse, useWindowSize } from '@vueuse/core'
 import type { UseMouseOptions } from '@vueuse/core'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface MouseParallaxProps {
   /**
@@ -47,6 +48,8 @@ const props = withDefaults(defineProps<MouseParallaxProps>(), {
   local: false,
 })
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const { camera, renderer } = useTresContext()
 
 const { disabled, factor, ease, local } = toRefs(props)
@@ -83,6 +86,8 @@ onBeforeRender(({ delta }) => {
     += (cursorX.value - cameraGroupRef.value.position.x) * ease.value * delta
   cameraGroupRef.value.position.y
     += (cursorY.value - cameraGroupRef.value.position.y) * ease.value * delta
+
+  invalidateOnDemand()
 })
 
 watch(
diff --git a/src/core/abstractions/Reflector.vue b/src/core/abstractions/Reflector.vue
index f8ec8408..71a29012 100644
--- a/src/core/abstractions/Reflector.vue
+++ b/src/core/abstractions/Reflector.vue
@@ -2,7 +2,8 @@
 import { shallowRef, toRefs } from 'vue'
 import { useTresContext } from '@tresjs/core'
 import type { TresColor } from '@tresjs/core'
-import { Reflector } from 'three/examples/jsm/objects/Reflector.js'
+import { Reflector } from 'three-stdlib'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface ReflectorProps {
   /**
@@ -79,6 +80,8 @@ extend({ Reflector })
 const { color, textureWidth, textureHeight, clipBias, multisample, shader }
   = toRefs(props)
 
+useOnDemandInvalidation(props)
+
 defineExpose({
   instance: reflectorRef,
 })
diff --git a/src/core/abstractions/Text3D.vue b/src/core/abstractions/Text3D.vue
index b77fc4dd..71a1ff97 100644
--- a/src/core/abstractions/Text3D.vue
+++ b/src/core/abstractions/Text3D.vue
@@ -3,6 +3,7 @@ import { computed, shallowRef, toRefs, toValue, useSlots, watchEffect } from 'vu
 import type { TextGeometryParameters } from 'three-stdlib'
 import { FontLoader, TextGeometry } from 'three-stdlib'
 import { useTresContext } from '@tresjs/core'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface Glyph {
   _cachedOutline: string[]
@@ -151,6 +152,8 @@ const {
   bevelSegments,
 } = toRefs(props)
 
+useOnDemandInvalidation(props)
+
 const { extend } = useTresContext()
 
 extend({ TextGeometry })
diff --git a/src/core/abstractions/useFBO/index.ts b/src/core/abstractions/useFBO/index.ts
index 06f11fd7..484b463f 100644
--- a/src/core/abstractions/useFBO/index.ts
+++ b/src/core/abstractions/useFBO/index.ts
@@ -1,8 +1,9 @@
 import { useLoop, useTresContext } from '@tresjs/core'
-import type { Camera, WebGLRenderTargetOptions } from 'three'
+import type { Camera, RenderTargetOptions } 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 { isReactive, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 
 export interface FboOptions {
   /*
@@ -35,21 +36,22 @@ export interface FboOptions {
    * See https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget for more information.
    *
    * @default {}
-   * @type {WebGLRenderTargetOptions}
+   * @type {RenderTargetOptions}
    * @memberof FboProps
    */
-  settings?: WebGLRenderTargetOptions
+  settings?: RenderTargetOptions
 }
 
 export function useFBO(options: FboOptions) {
   const target: Ref<WebGLRenderTarget | null> = ref(null)
 
   const { height, width, settings, depth } = isReactive(options) ? toRefs(options) : toRefs(reactive(options))
+  const { invalidateOnDemand } = useOnDemandInvalidation(options)
 
   const { onBeforeRender } = useLoop()
   const { camera, renderer, scene, sizes } = useTresContext()
 
-  watchEffect(() => {
+  watch(() => [width?.value, sizes.width.value, height?.value, sizes.height.value], () => {
     target.value?.dispose()
 
     target.value = new WebGLRenderTarget(width?.value || sizes.width.value, height?.value || sizes.height.value, {
@@ -66,7 +68,9 @@ export function useFBO(options: FboOptions) {
         FloatType,
       )
     }
-  })
+
+    invalidateOnDemand()
+  }, { immediate: true })
 
   onBeforeRender(() => {
     renderer.value.setRenderTarget(target.value)
diff --git a/src/core/abstractions/useSurfaceSampler/component.vue b/src/core/abstractions/useSurfaceSampler/component.vue
index 8c3dca7f..1338527c 100644
--- a/src/core/abstractions/useSurfaceSampler/component.vue
+++ b/src/core/abstractions/useSurfaceSampler/component.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { InstancedMesh, Mesh } from 'three'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 import type { useSurfaceSamplerProps } from '.'
 import { useSurfaceSampler } from '.'
 
@@ -10,6 +11,8 @@ const samplerRef = ref()
 const instancedRef = ref()
 const meshToSampleRef = ref()
 
+useOnDemandInvalidation(props)
+// TODO: refactor to use watch instead.
 watchEffect(() => {
   instancedRef.value = props.instanceMesh ?? samplerRef.value?.children.find((c: any) => Object.prototype.hasOwnProperty.call(c, 'instanceMatrix')) as InstancedMesh
 
diff --git a/src/core/controls/CameraControls.vue b/src/core/controls/CameraControls.vue
index 2b422bfe..8a7072f7 100644
--- a/src/core/controls/CameraControls.vue
+++ b/src/core/controls/CameraControls.vue
@@ -22,6 +22,7 @@ import {
 import { useLoop, useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
 import { isOrthographicCamera, isPerspectiveCamera } from '../../utils/types'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface CameraControlsProps {
   /**
@@ -369,6 +370,8 @@ const {
   colliderMeshes,
 } = toRefs(props)
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 // allow for tree shaking, only importing required classes
 const subsetOfTHREE = {
   Box3,
@@ -411,7 +414,10 @@ watchEffect(() => {
 })
 
 function addEventListeners() {
-  useEventListener(controlsRef.value as any, 'update', () => emit('change', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'update', () => {
+    emit('change', controlsRef.value)
+    invalidateOnDemand()
+  })
   useEventListener(controlsRef.value as any, 'controlend', () => emit('end', controlsRef.value))
   useEventListener(controlsRef.value as any, 'controlstart', () => emit('start', controlsRef.value))
 }
diff --git a/src/core/controls/KeyboardControls.vue b/src/core/controls/KeyboardControls.vue
index 5aff7a72..d0d9bf74 100644
--- a/src/core/controls/KeyboardControls.vue
+++ b/src/core/controls/KeyboardControls.vue
@@ -5,6 +5,7 @@ import { useMagicKeys } from '@vueuse/core'
 import { PointerLockControls as PointerLockControlsType } from 'three-stdlib'
 import { Quaternion, Vector3 } from 'three'
 import type { Camera } from 'three'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 import { PointerLockControls } from './index'
 
 export interface KeyboardControlsProps {
@@ -61,6 +62,8 @@ const emit = defineEmits(['isLock', 'change'])
 
 const { moveSpeed } = toRefs(props)
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const { camera: activeCamera, controls, renderer } = useTresContext()
 
 const sidewardMove = ref(0)
@@ -106,6 +109,8 @@ onBeforeRender(({ delta }) => {
   if (controls.value instanceof PointerLockControlsType && controls.value?.isLocked) {
     moveForward(delta, forwardMove.value)
     controls.value.moveRight(sidewardMove.value)
+
+    invalidateOnDemand()
   }
 })
 </script>
diff --git a/src/core/controls/MapControls.vue b/src/core/controls/MapControls.vue
index 96ff16c0..01bd6cde 100644
--- a/src/core/controls/MapControls.vue
+++ b/src/core/controls/MapControls.vue
@@ -1,8 +1,11 @@
 <script lang="ts" setup>
-import { useTresContext } from '@tresjs/core'
+import type { TresVector3 } from '@tresjs/core'
+import { useLoop, useTresContext } from '@tresjs/core'
 import type { Camera } from 'three'
 import { MapControls } from 'three-stdlib'
-import { onUnmounted, ref, watch } from 'vue'
+import { onUnmounted, ref, toRefs, watch } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface MapControlsProps {
   /**
@@ -30,12 +33,251 @@ export interface MapControlsProps {
    * @see https://threejs.org/docs/#examples/en/controls/MapControls
    */
   domElement?: HTMLElement
+  /**
+   * The target to orbit around.
+   *
+   * @type {TresVector3}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
+   */
+  target?: TresVector3
+  /**
+   * Whether to enable damping (inertia)
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
+   */
+  enableDamping?: boolean
+  /**
+   * The damping inertia used if `.enableDamping` is set to true
+   *
+   * @default 0.05
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
+   */
+  dampingFactor?: number
+  /**
+   * Set to true to automatically rotate around the target.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
+   */
+  autoRotate?: boolean
+  /**
+   * How fast to rotate around the target if `.autoRotate` is true.
+   *
+   * @default 2
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
+   */
+  autoRotateSpeed?: number
+  /**
+   * Whether to enable panning.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
+   */
+  enablePan?: boolean
+  /**
+   * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
+   *
+   * @default 7.0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
+   */
+  keyPanSpeed?: number
+  /**
+   * This object contains references to the keycodes for controlling camera panning.
+   * Default is the 4 arrow keys.
+   *
+   * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
+   * @type Record<string, string>
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
+   */
+  keys?: Record<string, string>
+  /**
+   * How far you can orbit horizontally, upper limit.
+   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
+   * with ( max - min < 2 PI ). Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
+   */
+  maxAzimuthAngle?: number
+  /**
+   * How far you can orbit horizontally, lower limit.
+   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
+   * with ( max - min < 2 PI ).
+   * Default is - Infinity.
+   *
+   * @default -Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
+   */
+  minAzimuthAngle?: number
+  /**
+   * How far you can orbit vertically, upper limit.
+   * Range is 0 to Math.PI radians, and default is Math.PI.
+   *
+   * @default Math.PI
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
+   */
+  maxPolarAngle?: number
+  /**
+   * How far you can orbit vertically, lower limit.
+   * Range is 0 to Math.PI radians, and default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
+   */
+  minPolarAngle?: number
+  /**
+   * The minimum distance of the camera to the target.
+   * Default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
+   */
+  minDistance?: number
+  /**
+   * The maximum distance of the camera to the target.
+   * Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
+   */
+  maxDistance?: number
+  /**
+   * The minimum field of view angle, in radians.
+   * Default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
+   */
+  minZoom?: number
+  /**
+   * The maximum field of view angle, in radians.
+   * ( OrthographicCamera only ).
+   * Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
+   */
+  maxZoom?: number
+  touches?: {
+    ONE?: number | undefined
+    TWO?: number | undefined
+  }
+  /**
+   * Whether to enable zooming.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
+   */
+  enableZoom?: boolean
+  /**
+   * How fast to zoom in and out. Default is 1.
+   *
+   * @default 1
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
+   */
+  zoomSpeed?: number
+  /**
+   * Whether to enable rotating.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
+   */
+  enableRotate?: boolean
+  /**
+   * How fast to rotate around the target. Default is 1.
+   *
+   * @default 1
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
+   */
+  rotateSpeed?: number
 }
 
 const props = withDefaults(defineProps<MapControlsProps>(), {
   makeDefault: false,
+  autoRotate: false,
+  autoRotateSpeed: 2,
+  enableDamping: true,
+  dampingFactor: 0.05,
+  enablePan: true,
+  keyPanSpeed: 7,
+  maxAzimuthAngle: Number.POSITIVE_INFINITY,
+  minAzimuthAngle: Number.NEGATIVE_INFINITY,
+  maxPolarAngle: Math.PI,
+  minPolarAngle: 0,
+  minDistance: 0,
+  maxDistance: Number.POSITIVE_INFINITY,
+  minZoom: 0,
+  maxZoom: Number.POSITIVE_INFINITY,
+  enableZoom: true,
+  zoomSpeed: 1,
+  enableRotate: true,
+  rotateSpeed: 1,
 })
 
+const emit = defineEmits(['change', 'start', 'end'])
+
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
+const {
+  autoRotate,
+  autoRotateSpeed,
+  enableDamping,
+  dampingFactor,
+  enablePan,
+  keyPanSpeed,
+  maxAzimuthAngle,
+  minAzimuthAngle,
+  maxPolarAngle,
+  minPolarAngle,
+  minDistance,
+  maxDistance,
+  minZoom,
+  maxZoom,
+  enableZoom,
+  zoomSpeed,
+  enableRotate,
+  rotateSpeed,
+} = toRefs(props)
+
 const { camera: activeCamera, renderer, extend, controls } = useTresContext()
 
 const controlsRef = ref<MapControls | null>(null)
@@ -51,6 +293,26 @@ watch(controls, (value) => {
   }
 })
 
+function onChange() {
+  addEventListeners()
+  invalidateOnDemand()
+  emit('change', controlsRef.value)
+}
+function addEventListeners() {
+  useEventListener(controlsRef.value as any, 'change', onChange)
+  useEventListener(controlsRef.value as any, 'start', () => emit('start', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'end', () => emit('end', controlsRef.value))
+}
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(() => {
+  if (controlsRef.value && (enableDamping.value || autoRotate.value)) {
+    controlsRef.value.update()
+
+    invalidateOnDemand()
+  }
+})
+
 onUnmounted(() => {
   if (controlsRef.value) {
     controlsRef.value.dispose()
@@ -67,5 +329,24 @@ defineExpose({
     v-if="(camera || activeCamera) && (domElement || renderer)"
     ref="controlsRef"
     :args="[camera || activeCamera, domElement || renderer.domElement]"
+    :auto-rotate="autoRotate"
+    :auto-rotate-speed="autoRotateSpeed"
+    :enable-damping="enableDamping"
+    :damping-factor="dampingFactor"
+    :enable-pan="enablePan"
+    :key-pan-speed="keyPanSpeed"
+    :keys="keys"
+    :max-azimuth-angle="maxAzimuthAngle"
+    :min-azimuth-angle="minAzimuthAngle"
+    :max-polar-angle="maxPolarAngle"
+    :min-polar-angle="minPolarAngle"
+    :min-distance="minDistance"
+    :max-distance="maxDistance"
+    :min-zoom="minZoom"
+    :max-zoom="maxZoom"
+    :enable-zoom="enableZoom"
+    :zoom-speed="zoomSpeed"
+    :enable-rotate="enableRotate"
+    :rotate-speed="rotateSpeed"
   />
 </template>
diff --git a/src/core/controls/OrbitControls.vue b/src/core/controls/OrbitControls.vue
index ed273ac1..09de7d8c 100644
--- a/src/core/controls/OrbitControls.vue
+++ b/src/core/controls/OrbitControls.vue
@@ -6,6 +6,7 @@ import { onUnmounted, ref, toRefs, watch } from 'vue'
 import type { TresVector3 } from '@tresjs/core'
 import { useLoop, useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface OrbitControlsProps {
   /**
@@ -280,6 +281,8 @@ const {
   target,
 } = toRefs(props)
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const { camera: activeCamera, renderer, extend, controls } = useTresContext()
 
 const controlsRef = ref<OrbitControls | null>(null)
@@ -297,7 +300,10 @@ watch(controlsRef, (value) => {
 })
 
 function addEventListeners() {
-  useEventListener(controlsRef.value as any, 'change', () => emit('change', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'change', () => {
+    emit('change', controlsRef.value)
+    invalidateOnDemand()
+  })
   useEventListener(controlsRef.value as any, 'start', () => emit('start', controlsRef.value))
   useEventListener(controlsRef.value as any, 'end', () => emit('end', controlsRef.value))
 }
@@ -307,6 +313,10 @@ const { onBeforeRender } = useLoop()
 onBeforeRender(() => {
   if (controlsRef.value && (enableDamping.value || autoRotate.value)) {
     controlsRef.value.update()
+
+    if (autoRotate.value) {
+      invalidateOnDemand()
+    }
   }
 })
 
diff --git a/src/core/controls/PointerLockControls.vue b/src/core/controls/PointerLockControls.vue
index 39d706e7..966b8f0c 100644
--- a/src/core/controls/PointerLockControls.vue
+++ b/src/core/controls/PointerLockControls.vue
@@ -4,6 +4,7 @@ import { PointerLockControls } from 'three-stdlib'
 import type { Camera } from 'three'
 import { useEventListener } from '@vueuse/core'
 import { useTresContext } from '@tresjs/core'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface PointerLockControlsProps {
   /**
@@ -48,6 +49,8 @@ const props = withDefaults(defineProps<PointerLockControlsProps>(), {
 
 const emit = defineEmits(['isLock', 'change'])
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const { camera: activeCamera, renderer, extend, controls } = useTresContext()
 
 const controlsRef = ref<null | PointerLockControls>(null)
@@ -69,11 +72,15 @@ watch(controlsRef, (value) => {
   const selector = document.getElementById(props.selector || '')
   triggerSelector = selector || renderer.value.domElement
 
-  useEventListener(controls.value as any, 'change', () => emit('change', controls.value))
+  useEventListener(controls.value as any, 'change', () => {
+    emit('change', controls.value)
+    invalidateOnDemand()
+  })
   useEventListener(triggerSelector, 'click', () => {
     controls.value?.lock()
     controls.value?.addEventListener('lock', () => isLockEmitter(true))
     controls.value?.addEventListener('unlock', () => isLockEmitter(false))
+    invalidateOnDemand()
   })
 })
 
diff --git a/src/core/controls/ScrollControls.vue b/src/core/controls/ScrollControls.vue
index 2c69d4d8..86dba8e3 100644
--- a/src/core/controls/ScrollControls.vue
+++ b/src/core/controls/ScrollControls.vue
@@ -2,6 +2,7 @@
 import { ref, shallowRef, watch } from 'vue'
 import { useLogger, useLoop, useTresContext } from '@tresjs/core'
 import { useScroll, useWindowScroll, useWindowSize } from '@vueuse/core'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface ScrollControlsProps {
   /**
@@ -65,6 +66,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const { logWarning } = useLogger()
 
 if (props.smoothScroll < 0) { logWarning('SmoothControl must be greater than zero') }
@@ -195,6 +198,8 @@ onBeforeRender(() => {
     if (wrapperRef.value.children.length > 0) {
       wrapperRef.value.position[direction] += delta
     }
+
+    invalidateOnDemand()
   }
 })
 
diff --git a/src/core/controls/TransformControls.vue b/src/core/controls/TransformControls.vue
index f6e5f540..979f1220 100644
--- a/src/core/controls/TransformControls.vue
+++ b/src/core/controls/TransformControls.vue
@@ -6,6 +6,7 @@ import type { Camera, Event, Object3D } from 'three'
 import { TransformControls } from 'three-stdlib'
 import { useEventListener } from '@vueuse/core'
 import { useTresContext } from '@tresjs/core'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface TransformControlsProps {
   object: Object3D
@@ -39,23 +40,46 @@ const emit = defineEmits(['dragging', 'change', 'mouseDown', 'mouseUp', 'objectC
 const { object, mode, enabled, axis, translationSnap, rotationSnap, scaleSnap, space, size, showX, showY, showZ }
   = toRefs(props)
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const controlsRef: ShallowRef<TransformControls | undefined> = shallowRef()
 
 const { controls, camera: activeCamera, renderer, extend } = useTresContext()
 
 extend({ TransformControls })
 
+const onChange = () => {
+  invalidateOnDemand()
+  emit('change')
+}
+
 const onDragingChange = (e: Event) => {
   if (controls.value) { controls.value.enabled = !e.value }
+  invalidateOnDemand()
   emit('dragging', e.value)
 }
 
+const onMouseDown = () => {
+  invalidateOnDemand()
+  emit('mouseDown')
+}
+
+const onMouseUp = () => {
+  invalidateOnDemand()
+  emit('mouseDown')
+}
+
+const onObjectChange = () => {
+  invalidateOnDemand()
+  emit('objectChange')
+}
+
 function addEventListeners() {
-  useEventListener(controlsRef.value as any, 'change', () => emit('change'))
+  useEventListener(controlsRef.value as any, 'change', onChange)
   useEventListener(controlsRef.value as any, 'dragging-changed', onDragingChange)
-  useEventListener(controlsRef.value as any, 'mouseDown', () => emit('mouseDown'))
-  useEventListener(controlsRef.value as any, 'mouseUp', () => emit('mouseUp'))
-  useEventListener(controlsRef.value as any, 'objectChange', () => emit('objectChange'))
+  useEventListener(controlsRef.value as any, 'mouseDown', onMouseDown)
+  useEventListener(controlsRef.value as any, 'mouseUp', onMouseUp)
+  useEventListener(controlsRef.value as any, 'objectChange', onObjectChange)
 }
 
 watchEffect(() => {
diff --git a/src/core/materials/customShaderMaterial/index.vue b/src/core/materials/customShaderMaterial/index.vue
index 9b4def87..060ab2ce 100644
--- a/src/core/materials/customShaderMaterial/index.vue
+++ b/src/core/materials/customShaderMaterial/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { useTresContext } from '@tresjs/core'
-
 import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
 import type { Fn } from '@vueuse/core'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 
 interface CustomShaderMaterialProps {
   baseMaterial: Fn
@@ -15,6 +15,8 @@ interface CustomShaderMaterialProps {
 
 const props = defineProps<CustomShaderMaterialProps>()
 
+useOnDemandInvalidation(props)
+
 const customShaderMaterialClass = shallowRef(null)
 
 const { extend } = useTresContext()
diff --git a/src/core/materials/holographicMaterial/index.vue b/src/core/materials/holographicMaterial/index.vue
index 38634fbc..f5bd5ea4 100644
--- a/src/core/materials/holographicMaterial/index.vue
+++ b/src/core/materials/holographicMaterial/index.vue
@@ -4,6 +4,7 @@ import { useLoop, useTresContext } from '@tresjs/core'
 import type { TresColor } from '@tresjs/core'
 import { FrontSide } from 'three'
 import type { Side } from 'three'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 
 import HolographicMaterial from './HolographicMaterialParameters'
 
@@ -36,6 +37,8 @@ const props = withDefaults(
   },
 )
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const MeshHolographicMaterialClass = shallowRef()
 
 const { extend } = useTresContext()
@@ -48,6 +51,7 @@ const { onBeforeRender } = useLoop()
 
 onBeforeRender(() => {
   MeshHolographicMaterialClass.value?.update()
+  invalidateOnDemand()
 })
 </script>
 
diff --git a/src/core/materials/meshReflectionMaterial/index.vue b/src/core/materials/meshReflectionMaterial/index.vue
index 904e6f0b..3228c774 100644
--- a/src/core/materials/meshReflectionMaterial/index.vue
+++ b/src/core/materials/meshReflectionMaterial/index.vue
@@ -30,6 +30,7 @@ import {
   WebGLRenderTarget,
 } from 'three'
 import type { TresColor } from '@tresjs/core'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 import { BlurPass } from './BlurPass'
 import { MeshReflectionMaterial } from './material'
 
@@ -156,6 +157,8 @@ const props = withDefaults(
   },
 )
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const blurWidth = computed(() => 500 - (Array.isArray(props.blurSize) ? props.blurSize[0] : props.blurSize))
 const blurHeight = computed(() => 500 - (Array.isArray(props.blurSize) ? props.blurSize[1] : props.blurSize))
 const hasBlur = computed(() => blurWidth.value > 0 || blurHeight.value > 0)
@@ -285,6 +288,8 @@ function onBeforeRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, _
   renderer.shadowMap.autoUpdate = currentShadowAutoUpdate
   object.visible = true
   renderer.setRenderTarget(null)
+
+  invalidateOnDemand()
 }
 
 watch(
diff --git a/src/core/materials/meshWobbleMaterial/index.vue b/src/core/materials/meshWobbleMaterial/index.vue
index cb4c6cb9..b1b425a3 100644
--- a/src/core/materials/meshWobbleMaterial/index.vue
+++ b/src/core/materials/meshWobbleMaterial/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { useLoop, useTresContext } from '@tresjs/core'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 
 import { WobbleMaterialImpl as MeshWobbleMaterial } from './material'
 
@@ -15,6 +16,8 @@ const props = withDefaults(
   },
 )
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const materialRef = shallowRef()
 
 const { extend } = useTresContext()
@@ -25,6 +28,7 @@ const { onBeforeRender } = useLoop()
 onBeforeRender(({ elapsed }) => {
   if (materialRef.value) {
     materialRef.value.time = elapsed * props?.speed
+    invalidateOnDemand()
   }
 })
 
diff --git a/src/core/staging/Fit.vue b/src/core/staging/Fit.vue
index 8c155082..db91fe35 100644
--- a/src/core/staging/Fit.vue
+++ b/src/core/staging/Fit.vue
@@ -2,6 +2,7 @@
 import { nextTick, onMounted, shallowRef, watch } from 'vue'
 import type { Object3D } from 'three'
 import { Box3, Group, Vector3 } from 'three'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface Props {
   /**
@@ -24,6 +25,8 @@ const props: Props = withDefaults(defineProps<Props>(), {
   precise: false,
 })
 
+useOnDemandInvalidation(props)
+
 const middle = shallowRef<Group>(new Group())
 const inner = shallowRef<Group>(new Group())
 
diff --git a/src/core/staging/Ocean.vue b/src/core/staging/Ocean.vue
index 1de2c87b..c92eadf9 100644
--- a/src/core/staging/Ocean.vue
+++ b/src/core/staging/Ocean.vue
@@ -2,10 +2,11 @@
 import { nextTick, onMounted, shallowRef, toRefs } from 'vue'
 import { useLoop, useTexture, useTresContext } from '@tresjs/core'
 import type { TresColor, TresVector3 } from '@tresjs/core'
-import { Water } from 'three/addons/objects/Water.js'
+import { Water } from 'three-stdlib'
 import { FrontSide, RepeatWrapping, Vector3 } from 'three'
 import type { Texture } from 'three'
-import type { Sky } from 'three/addons/objects/Sky.js'
+import type { Sky } from 'three-stdlib'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface OceanProps {
   /**
@@ -121,6 +122,8 @@ const props = withDefaults(defineProps<OceanProps>(), {
 
 const { textureWidth, textureHeight, waterNormals, sunDirection, sunColor, waterColor, distortionScale, size, clipBias, alpha, side } = toRefs(props)
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const { extend, scene } = useTresContext()
 
 extend({ Water })
@@ -155,6 +158,7 @@ const { onBeforeRender } = useLoop()
 
 onBeforeRender(({ delta }) => {
   waterRef.value.material.uniforms.time.value += delta
+  invalidateOnDemand()
 })
 </script>
 
diff --git a/src/core/staging/Precipitation.vue b/src/core/staging/Precipitation.vue
index 69fcadee..1357e0d4 100644
--- a/src/core/staging/Precipitation.vue
+++ b/src/core/staging/Precipitation.vue
@@ -2,6 +2,7 @@
 import { shallowRef, toRefs, watchEffect } from 'vue'
 import type { TresColor } from '@tresjs/core'
 import { useLoop } from '@tresjs/core'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface PrecipitationProps {
   /**
@@ -143,6 +144,8 @@ const {
   randomness,
 } = toRefs(props)
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const geometryRef = shallowRef()
 let positionArray: [] | Float32Array = []
 let velocityArray: [] | Float32Array = []
@@ -187,6 +190,8 @@ onBeforeRender(() => {
       if (positionArray[i * 3 + 1] <= -area.value[1] / 2 || positionArray[i * 3 + 1] >= area.value[1] / 2) { positionArray[i * 3 + 1] = positionArray[i * 3 + 1] * -1 }
     }
     geometryRef.value.attributes.position.needsUpdate = true
+
+    invalidateOnDemand()
   }
 })
 
diff --git a/src/core/staging/Sky.vue b/src/core/staging/Sky.vue
index 6e94a810..187b7b65 100644
--- a/src/core/staging/Sky.vue
+++ b/src/core/staging/Sky.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 // eslint-disable-file vue/attribute-hyphenation
 import { MathUtils, Vector3 } from 'three'
-import { Sky as SkyImpl } from 'three/examples/jsm/objects/Sky'
+import { Sky as SkyImpl } from 'three-stdlib'
 import { computed, shallowRef } from 'vue'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface SkyProps {
   /**
@@ -46,6 +47,8 @@ const props = withDefaults(defineProps<SkyProps>(), {
   distance: 450000,
 })
 
+useOnDemandInvalidation(props)
+
 const skyRef = shallowRef<SkyImpl>()
 const skyImpl = new SkyImpl()
 const sunPosition = computed(() =>
diff --git a/src/core/staging/Smoke.vue b/src/core/staging/Smoke.vue
index 7e6acdd2..7d72d724 100644
--- a/src/core/staging/Smoke.vue
+++ b/src/core/staging/Smoke.vue
@@ -3,6 +3,7 @@ import { computed, shallowRef, toRefs } from 'vue'
 import type { TresColor } from '@tresjs/core'
 import { useLoop, useTexture, useTresContext } from '@tresjs/core'
 import type { Object3D, Texture } from 'three'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface SmokeProps {
   /**
@@ -83,6 +84,7 @@ const props = withDefaults(defineProps<SmokeProps>(), {
 })
 
 const { width, depth, segments, texture, color, depthTest, opacity, speed } = toRefs(props)
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
 
 const smokeRef = shallowRef()
 const groupRef = shallowRef()
@@ -114,6 +116,7 @@ onBeforeRender(() => {
       child.rotation.z += smoke[index].rotation
     })
     smokeRef.value.lookAt(camera.value?.position)
+    invalidateOnDemand()
   }
 })
 </script>
diff --git a/src/core/staging/Stars.vue b/src/core/staging/Stars.vue
index 35e93c65..be7006e0 100644
--- a/src/core/staging/Stars.vue
+++ b/src/core/staging/Stars.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef, toRefs, watchEffect } from 'vue'
 import { Spherical, Vector3 } from 'three'
+import { useOnDemandInvalidation } from '../../composables/useOnDemandInvalidation'
 
 export interface StarsProps {
   /**
@@ -85,6 +86,8 @@ const scale = ref()
 
 const { radius, depth, count, size, sizeAttenuation, transparent, alphaMap, alphaTest } = toRefs(props)
 
+useOnDemandInvalidation(props)
+
 const setStars = () => {
   let circle = radius.value + depth.value
   const increment = computed(() => depth.value / count.value)
diff --git a/src/core/staging/useEnvironment/component.vue b/src/core/staging/useEnvironment/component.vue
index e0075901..4071c96e 100644
--- a/src/core/staging/useEnvironment/component.vue
+++ b/src/core/staging/useEnvironment/component.vue
@@ -29,10 +29,7 @@ const fbo = ref(null as null | WebGLCubeRenderTarget)
 let cubeCamera = null as null | CubeCamera
 
 const envSence = ref<EnvSence | null>(null)
-onUnmounted(() => {
-  envSence.value?.destructor()
-  fbo.value?.dispose()
-})
+
 const { onBeforeRender } = useLoop()
 let count = 1
 onBeforeRender(() => {
@@ -83,6 +80,11 @@ watch(useSlots().default, (value) => {
   setTextureEnvAndBG()
 }, { immediate: true, deep: true })
 texture.value = useEnvironmentTexture
+
+onUnmounted(() => {
+  envSence.value?.destructor()
+  fbo.value?.dispose()
+})
 </script>
 
 <template>
diff --git a/src/core/staging/useEnvironment/index.ts b/src/core/staging/useEnvironment/index.ts
index ee249837..a2e4157a 100644
--- a/src/core/staging/useEnvironment/index.ts
+++ b/src/core/staging/useEnvironment/index.ts
@@ -12,6 +12,7 @@ import {
 import { RGBELoader } from 'three-stdlib'
 import type { Ref } from 'vue'
 import { computed, ref, toRefs, unref, watch } from 'vue'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 import type { EnvironmentOptions } from './const'
 import { environmentPresets } from './const'
 
@@ -45,6 +46,8 @@ export async function useEnvironment(
     background,
   } = toRefs(options)
 
+  const { invalidateOnDemand } = useOnDemandInvalidation(options)
+
   const texture: Ref<Texture | CubeTexture | undefined> = ref()
   const isCubeMap = computed(() => Array.isArray((files as Ref<string[]>).value))
   const loader = computed(() => isCubeMap.value ? CubeTextureLoader : RGBELoader)
@@ -122,6 +125,7 @@ export async function useEnvironment(
         texture.value = result.value
         texture.value.mapping = EquirectangularReflectionMapping
       }
+      invalidateOnDemand()
     }
     else if (value && !(value in environmentPresets)) {
       throw new Error(`Preset must be one of: ${Object.keys(environmentPresets).join(', ')}`)