diff --git a/docs/.vitepress/theme/components/BlenderCube.vue b/docs/.vitepress/theme/components/BlenderCube.vue
index 5502950e..9a4d1063 100644
--- a/docs/.vitepress/theme/components/BlenderCube.vue
+++ b/docs/.vitepress/theme/components/BlenderCube.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
+import type { TresObject } from '@tresjs/core'
+import { computed, shallowRef } from 'vue'
 
-const { nodes }
-= await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
-const model = nodes.Cube
+const { nodes } = useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
+  { draco: true },
+)
 
-model.traverse((child) => {
-  if (child.isMesh) {
-    child.castShadow = true
-  }
-})
+const modelRef = shallowRef<TresObject | null>(null)
+
+const model = computed(() => nodes.value?.BlenderCube)
 </script>
 
 <template>
-  <primitive :object="model" />
+  <primitive v-if="model" ref="modelRef" :object="model" />
 </template>
diff --git a/docs/.vitepress/theme/components/Ducky.vue b/docs/.vitepress/theme/components/Ducky.vue
index 8de0f1a0..542555ef 100644
--- a/docs/.vitepress/theme/components/Ducky.vue
+++ b/docs/.vitepress/theme/components/Ducky.vue
@@ -1,10 +1,20 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
+import { Mesh } from 'three'
+import { watch } from 'vue'
 
-const { scene: model }
-  = await useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
+const { state }
+  = useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
+
+watch(state, (model) => {
+  model.scene.traverse((child) => {
+    if (child instanceof Mesh) {
+      child.castShadow = true
+    }
+  })
+})
 </script>
 
 <template>
-  <primitive :object="model" />
+  <primitive v-if="state" :object="state.scene" />
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue b/docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue
index 7f9162f8..a0b022c1 100644
--- a/docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue
@@ -40,17 +40,13 @@ const effectParams = ref({
       :position="[-5, 0.5, -10]"
       :scale="0.5"
     >
-      <Suspense>
-        <Ducky />
-      </Suspense>
+      <Ducky />
     </TresGroup>
     <TresGroup
       :position="[0, 0.5, 0]"
       :scale="0.5"
     >
-      <Suspense>
-        <BlenderCube />
-      </Suspense>
+      <BlenderCube />
     </TresGroup>
     <TresAmbientLight />
     <TresDirectionalLight
diff --git a/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue b/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
index e13d26f2..027681e7 100644
--- a/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue
@@ -30,7 +30,7 @@ const { angle, scale, blendFunction } = useControls({
   },
 })
 
-const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/suzanne/suzanne.glb', { draco: true })
+const { state } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/suzanne/suzanne.glb', { draco: true })
 </script>
 
 <template>
@@ -44,7 +44,15 @@ const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets
       />
       <OrbitControls />
 
-      <primitive :scale="2" :rotation-x="Math.PI / -5" :rotation-y="Math.PI" :position-y=".25" :position-z="0.5" :object="scene" />
+      <primitive
+        v-if="state"
+        :scale="2"
+        :rotation-x="Math.PI / -5"
+        :rotation-y="Math.PI"
+        :position-y=".25"
+        :position-z="0.5"
+        :object="state.scene"
+      />
 
       <ContactShadows
         :opacity="1"
diff --git a/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue b/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
index a270014e..1e494949 100644
--- a/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue
@@ -18,8 +18,8 @@ const glComposer = {
   multisampling: 4,
 }
 
-const { scene: scenePlantJar } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/plant-jar/plant-jar.glb', { draco: true })
-const { scene: sceneWatermelon } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/watermelon/watermelon_fruit.glb', { draco: true })
+const { state: scenePlantJar } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/plant-jar/plant-jar.glb', { draco: true })
+const { state: sceneWatermelon } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/watermelon/watermelon_fruit.glb', { draco: true })
 
 const effectProps = reactive({
   blendFunction: BlendFunction.NORMAL,
@@ -51,8 +51,19 @@ watch(enabled, () => {
 
       <TresDirectionalLight />
 
-      <primitive :position-x="-3" :position-y="-3.5" :scale="5" :object="scenePlantJar" />
-      <primitive :position-x="4" :scale="20" :object="sceneWatermelon" />
+      <primitive
+        v-if="scenePlantJar"
+        :position-x="-3"
+        :position-y="-3.5"
+        :scale="5"
+        :object="scenePlantJar.scene"
+      />
+      <primitive
+        v-if="sceneWatermelon"
+        :position-x="4"
+        :scale="20"
+        :object="sceneWatermelon.scene"
+      />
 
       <ContactShadows
         :opacity=".25"
diff --git a/docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue b/docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue
index 11f41d25..72dfdff1 100644
--- a/docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue
@@ -26,9 +26,7 @@ const { effectComposer } = useRouteDisposal()
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls />
-    <Suspense>
-      <BlenderCube />
-    </Suspense>
+    <BlenderCube />
     <EffectComposerPmndrs ref="effectComposer">
       <DepthOfFieldPmndrs :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
       <VignettePmndrs :darkness="0.9" :offset="0.3" />
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 29cb3605..afed0110 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
diff --git a/docs/package.json b/docs/package.json
index da956453..3f145579 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,8 +9,8 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "^4.1.0",
-    "@tresjs/core": "^4.3.2",
+    "@tresjs/cientos": "5.0.0-next.2",
+    "@tresjs/core": "5.0.0-next.3",
     "@tresjs/post-processing": "workspace:^",
     "gsap": "^3.12.7"
   },
diff --git a/package.json b/package.json
index c06acf8f..7fce3cca 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "docs:preview": "vitepress preview"
   },
   "peerDependencies": {
-    "@tresjs/core": ">=4.0",
+    "@tresjs/core": ">=5.0",
     "three": ">=0.169",
     "vue": ">=3.4"
   },
diff --git a/playground/public/nuxt-stones/package.json b/playground/public/nuxt-stones/package.json
deleted file mode 100644
index abd32e43..00000000
--- a/playground/public/nuxt-stones/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "docs",
-  "type": "module",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "vitepress dev",
-    "build": "vitepress build",
-    "preview": "vitepress preview"
-  },
-  "dependencies": {
-    "@tresjs/cientos": "^3.0.1",
-    "@tresjs/core": "^3.2.2",
-    "@tresjs/post-processing": "workspace:^",
-    "gsap": "^3.11.5"
-  },
-  "devDependencies": {
-    "unocss": "^0.52.3",
-    "unplugin-vue-components": "^0.24.1",
-    "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.1"
-  }
-}
diff --git a/playground/src/components/BlenderCube.vue b/playground/src/components/BlenderCube.vue
index d7b2e695..9a4d1063 100644
--- a/playground/src/components/BlenderCube.vue
+++ b/playground/src/components/BlenderCube.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
+import type { TresObject } from '@tresjs/core'
+import { computed, shallowRef } from 'vue'
 
-const { nodes }
-  = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
-const model = nodes.Cube
+const { nodes } = useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
+  { draco: true },
+)
 
-model.traverse((child) => {
-  if (child.isMesh) {
-    child.castShadow = true
-  }
-})
+const modelRef = shallowRef<TresObject | null>(null)
+
+const model = computed(() => nodes.value?.BlenderCube)
 </script>
 
 <template>
-  <primitive :object="model" />
+  <primitive v-if="model" ref="modelRef" :object="model" />
 </template>
diff --git a/playground/src/components/Ducky.vue b/playground/src/components/Ducky.vue
index 4b24ddf6..542555ef 100644
--- a/playground/src/components/Ducky.vue
+++ b/playground/src/components/Ducky.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
+import { Mesh } from 'three'
+import { watch } from 'vue'
 
-const { scene: model }
-  = await useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
+const { state }
+  = useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
 
-model.traverse((child) => {
-  if (child.isMesh) {
-    child.castShadow = true
-  }
+watch(state, (model) => {
+  model.scene.traverse((child) => {
+    if (child instanceof Mesh) {
+      child.castShadow = true
+    }
+  })
 })
 </script>
 
 <template>
-  <primitive :object="model" />
+  <primitive v-if="state" :object="state.scene" />
 </template>
diff --git a/playground/src/pages/postprocessing/on-demand.vue b/playground/src/pages/postprocessing/on-demand.vue
index 7a679399..afe9db03 100644
--- a/playground/src/pages/postprocessing/on-demand.vue
+++ b/playground/src/pages/postprocessing/on-demand.vue
@@ -13,10 +13,6 @@ function onRender() {
 }
 
 const canvas = ref<InstanceType<typeof TresCanvas>>()
-
-function onControlChange() {
-  canvas.value?.context?.invalidate()
-}
 </script>
 
 <template>
@@ -30,7 +26,7 @@ function onControlChange() {
       :position="[5, 5, 5]"
       :look-at="[0, 0, 0]"
     />
-    <OrbitControls @change="onControlChange" />
+    <OrbitControls />
     <TresMesh
       :position="[-3.5, 1, 0]"
     >
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 173494d5..ac118e7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -91,11 +91,11 @@ importers:
   docs:
     dependencies:
       '@tresjs/cientos':
-        specifier: ^4.1.0
-        version: 4.3.1(@tresjs/core@4.3.6(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3)))(@types/three@0.172.0)(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))
+        specifier: 5.0.0-next.2
+        version: 5.0.0-next.2(@tresjs/core@5.0.0-next.3(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3)))(@types/three@0.172.0)(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))
       '@tresjs/core':
-        specifier: ^4.3.2
-        version: 4.3.6(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))
+        specifier: 5.0.0-next.3
+        version: 5.0.0-next.3(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))
       '@tresjs/post-processing':
         specifier: workspace:^
         version: link:..
@@ -1202,8 +1202,8 @@ packages:
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
-  '@tresjs/cientos@4.3.1':
-    resolution: {integrity: sha512-3qp6lEtMrFdhxDuASP1Sz/hEi8+xcEpM6Vd6uDJysCh4uRAzyJLlBSbPoR7gVjN12wrhwJIF1AfYEFz/Vhz5ZQ==}
+  '@tresjs/cientos@5.0.0-next.2':
+    resolution: {integrity: sha512-e0u0gkPGYlj5sNNwM9BrRxxVU6Gz44oj9cFljC/2aS2AhewkNOjL5dzaJZo/s08K3L8N8DPuvGUSYEdU8hyx+g==}
     peerDependencies:
       '@tresjs/core': '>=4.2.1'
       three: '>=0.133'
@@ -1216,8 +1216,8 @@ packages:
       three: '>=0.133'
       vue: '>=3.3'
 
-  '@tresjs/core@4.3.6':
-    resolution: {integrity: sha512-CCk4+jwbiTl7Hj3REZqweglUQQdA3cF29TqJ4dEWunaBPyfsAGLTlJExK5lGIS10ptJkr8DqPvHQT41iTIb0Yg==}
+  '@tresjs/core@5.0.0-next.3':
+    resolution: {integrity: sha512-YuCnowKeVF1C9/lHJRkSoZN45Zy4N7saO2n2YJbaLVrzN4cBlonuDyH9qyAm9mgGQ1HZ8vIsDN6t/ANQ2iNXZw==}
     peerDependencies:
       three: '>=0.133'
       vue: '>=3.4'
@@ -5536,9 +5536,9 @@ snapshots:
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
-  '@tresjs/cientos@4.3.1(@tresjs/core@4.3.6(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3)))(@types/three@0.172.0)(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))':
+  '@tresjs/cientos@5.0.0-next.2(@tresjs/core@5.0.0-next.3(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3)))(@types/three@0.172.0)(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))':
     dependencies:
-      '@tresjs/core': 4.3.6(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))
+      '@tresjs/core': 5.0.0-next.3(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))
       '@vueuse/core': 12.8.2(typescript@5.8.3)
       camera-controls: 2.10.1(three@0.173.0)
       stats-gl: 2.4.2(@types/three@0.172.0)(three@0.173.0)
@@ -5570,10 +5570,11 @@ snapshots:
       - react
       - typescript
 
-  '@tresjs/core@4.3.6(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))':
+  '@tresjs/core@5.0.0-next.3(three@0.173.0)(typescript@5.8.3)(vue@3.5.17(typescript@5.8.3))':
     dependencies:
       '@alvarosabu/utils': 3.2.0
-      '@vue/devtools-api': 6.6.4
+      '@pmndrs/pointer-events': 6.6.17
+      '@vue/devtools-api': 7.7.7
       '@vueuse/core': 12.8.2(typescript@5.8.3)
       three: 0.173.0
       vue: 3.5.17(typescript@5.8.3)
diff --git a/src/core/pmndrs/DepthOfFieldPmndrs.vue b/src/core/pmndrs/DepthOfFieldPmndrs.vue
index 2fad4f59..5c6a3c53 100644
--- a/src/core/pmndrs/DepthOfFieldPmndrs.vue
+++ b/src/core/pmndrs/DepthOfFieldPmndrs.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { BlendFunction } from 'postprocessing'
-import { useTresContext } from '@tresjs/core'
+import { useTres } from '@tresjs/core'
 import { DepthOfFieldEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
@@ -44,7 +44,7 @@ export interface DepthOfFieldPmndrsProps {
 
 <script lang="ts" setup>
 const props = defineProps<DepthOfFieldPmndrsProps>()
-const { camera } = useTresContext()
+const { camera } = useTres()
 
 const { pass, effect } = useEffectPmndrs(() => new DepthOfFieldEffect(camera.value, props), props)
 defineExpose({ pass, effect })
diff --git a/src/core/pmndrs/EffectComposerPmndrs.vue b/src/core/pmndrs/EffectComposerPmndrs.vue
index 6031e085..ae7cee88 100644
--- a/src/core/pmndrs/EffectComposerPmndrs.vue
+++ b/src/core/pmndrs/EffectComposerPmndrs.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { EffectComposer } from 'postprocessing'
 import type { InjectionKey, ShallowRef } from 'vue'
-import { useLoop, useTresContext } from '@tresjs/core'
+import { useTresContext } from '@tresjs/core'
 import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass, RenderPass } from 'postprocessing'
 
 import { HalfFloatType } from 'three'
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<EffectComposerPmndrsProps>(), {
 })
 const emit = defineEmits(['render'])
 
-const { scene, camera, renderer, sizes, render: renderCtx } = useTresContext()
+const { scene, camera, renderer, sizes } = useTresContext()
 
 const effectComposer: ShallowRef<EffectComposerImpl | null> = shallowRef(null)
 
@@ -49,7 +49,7 @@ defineExpose({ composer: effectComposer })
 const setNormalPass = () => {
   if (!effectComposer.value) { return }
 
-  normalPass = new NormalPass(scene.value, camera.value)
+  normalPass = new NormalPass(scene.value, camera.activeCamera.value)
   normalPass.enabled = false
   effectComposer.value.addPass(normalPass)
   if (props.resolutionScale !== undefined && WEBGL.isWebGL2Available()) {
@@ -81,16 +81,16 @@ const effectComposerParams = computed(() => {
 })
 
 const initEffectComposer = () => {
-  if (!renderer.value && !scene.value && !camera.value) { return }
+  if (!renderer.instance && !scene.value && !camera.activeCamera.value) { return }
 
   effectComposer.value?.dispose()
-  effectComposer.value = new EffectComposerImpl(renderer.value, effectComposerParams.value)
-  effectComposer.value.addPass(new RenderPass(scene.value, camera.value))
+  effectComposer.value = new EffectComposerImpl(renderer.instance, effectComposerParams.value)
+  effectComposer.value.addPass(new RenderPass(scene.value, camera.activeCamera.value))
 
   if (!props.disableNormalPass) { setNormalPass() }
 }
 
-watch([renderer, scene, camera, () => props.disableNormalPass], () => {
+watch([scene, camera.activeCamera, () => props.disableNormalPass], () => {
   if (!sizes.width.value || !sizes.height.value) { return }
 
   initEffectComposer()
@@ -105,21 +105,16 @@ watch(() => [sizes.width.value, sizes.height.value], ([width, height]) => {
   immediate: true,
 })
 
-const { render } = useLoop()
-
-render(() => {
-  if (props.enabled && renderer.value && effectComposer.value && sizes.width.value && sizes.height.value && renderCtx.frames.value > 0) {
-    const currentAutoClear = renderer.value.autoClear
-    renderer.value.autoClear = props.autoClear
-    if (props.stencilBuffer && !props.autoClear) { renderer.value.clearStencil() }
+renderer.replaceRenderFunction((notifySuccess) => {
+  if (props.enabled && renderer.instance && effectComposer.value && sizes.width.value && sizes.height.value) {
+    const currentAutoClear = renderer.instance.autoClear
+    renderer.instance.autoClear = props.autoClear
+    if (props.stencilBuffer && !props.autoClear) { renderer.instance.clearStencil() }
     effectComposer.value.render()
     emit('render', effectComposer.value)
-    renderer.value.autoClear = currentAutoClear
+    renderer.instance.autoClear = currentAutoClear
+    notifySuccess()
   }
-
-  renderCtx.frames.value = renderCtx.mode.value === 'always'
-    ? 1
-    : Math.max(0, renderCtx.frames.value - 1)
 })
 
 onUnmounted(() => {
diff --git a/src/core/pmndrs/GlitchPmndrs.vue b/src/core/pmndrs/GlitchPmndrs.vue
index 2c4d3a77..b3db92cd 100644
--- a/src/core/pmndrs/GlitchPmndrs.vue
+++ b/src/core/pmndrs/GlitchPmndrs.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { BlendFunction } from 'postprocessing'
 import type { Texture, Vector2 } from 'three'
-import { useLoop } from '@tresjs/core'
+import { useLoop, useTres } from '@tresjs/core'
 import { GlitchEffect, GlitchMode } from 'postprocessing'
 import { watchEffect } from 'vue'
 import { omit } from '../../util/object'
@@ -60,8 +60,10 @@ const props = defineProps<GlitchPmndrsProps>()
 const { pass, effect } = useEffectPmndrs(() => new GlitchEffect(props), props, ['dtSize'])
 defineExpose({ pass, effect })
 
+const { invalidate } = useTres()
+
 const { onBeforeRender } = useLoop()
-onBeforeRender(({ invalidate }) => invalidate())
+onBeforeRender(() => invalidate())
 
 watchEffect(() => {
   const getMode = () => {
diff --git a/src/core/pmndrs/GodRaysPmndrs.vue b/src/core/pmndrs/GodRaysPmndrs.vue
index 6836af50..291c750f 100644
--- a/src/core/pmndrs/GodRaysPmndrs.vue
+++ b/src/core/pmndrs/GodRaysPmndrs.vue
@@ -3,7 +3,7 @@ import type { BlendFunction, KernelSize } from 'postprocessing'
 import { GodRaysEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
-import { useTresContext } from '@tresjs/core'
+import { useTres } from '@tresjs/core'
 import { computed, toRaw, watch } from 'vue'
 import type { Points } from 'three'
 import { Mesh, MeshBasicMaterial, SphereGeometry } from 'three'
@@ -82,7 +82,7 @@ export interface GodRaysPmndrsProps {
 
 const props = defineProps<GodRaysPmndrsProps>()
 
-const { camera } = useTresContext()
+const { camera } = useTres()
 
 const resolvedLightSource = computed(() =>
   props.lightSource ?? new Mesh(
diff --git a/src/core/pmndrs/NoisePmndrs.vue b/src/core/pmndrs/NoisePmndrs.vue
index 19e33959..8f69ea2f 100644
--- a/src/core/pmndrs/NoisePmndrs.vue
+++ b/src/core/pmndrs/NoisePmndrs.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { useLoop } from '@tresjs/core'
+import { useLoop, useTres } from '@tresjs/core'
 import type { BlendFunction } from 'postprocessing'
 import { NoiseEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
@@ -22,8 +22,10 @@ const props = withDefaults(defineProps<NoisePmndrsProps>(), {
 const { pass, effect } = useEffectPmndrs(() => new NoiseEffect(props), props)
 defineExpose({ pass, effect })
 
+const { invalidate } = useTres()
+
 const { onBeforeRender } = useLoop()
-onBeforeRender(({ invalidate }) => invalidate())
+onBeforeRender(() => invalidate())
 
 makePropWatchers(
   [
diff --git a/src/core/pmndrs/OutlinePmndrs.vue b/src/core/pmndrs/OutlinePmndrs.vue
index 5809c853..90b57e55 100644
--- a/src/core/pmndrs/OutlinePmndrs.vue
+++ b/src/core/pmndrs/OutlinePmndrs.vue
@@ -2,7 +2,7 @@
 import type { TresColor } from '@tresjs/core'
 import type { BlendFunction, KernelSize } from 'postprocessing'
 import type { Object3D, Texture } from 'three'
-import { normalizeColor, useTresContext } from '@tresjs/core'
+import { normalizeColor, useTres } from '@tresjs/core'
 import { OutlineEffect } from 'postprocessing'
 import { computed, watch } from 'vue'
 import { makePropWatchers } from '../../util/prop'
@@ -57,7 +57,7 @@ const props = withDefaults(
 const colorToNumber = (color: TresColor | undefined) =>
   color !== undefined ? normalizeColor(color).getHex() : undefined
 
-const { camera, scene } = useTresContext()
+const { camera, scene } = useTres()
 
 const { pass, effect } = useEffectPmndrs(
   () => new OutlineEffect(
diff --git a/src/core/pmndrs/SMAAPmndrs.vue b/src/core/pmndrs/SMAAPmndrs.vue
index ab66e70b..0f387947 100644
--- a/src/core/pmndrs/SMAAPmndrs.vue
+++ b/src/core/pmndrs/SMAAPmndrs.vue
@@ -4,7 +4,7 @@ import { EffectPass, SMAAEffect, TextureEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
 import { inject, watch } from 'vue'
-import { useTresContext } from '@tresjs/core'
+import { useTres } from '@tresjs/core'
 import { effectComposerInjectionKey } from './EffectComposerPmndrs.vue'
 
 export const DEBUG_MODE = {
@@ -50,7 +50,7 @@ export interface SMAAPmndrsProps {
 const props = defineProps<SMAAPmndrsProps>()
 
 const { pass, effect } = useEffectPmndrs(() => new SMAAEffect(props), props)
-const { camera } = useTresContext()
+const { camera } = useTres()
 const composer = inject(effectComposerInjectionKey)
 
 defineExpose({ pass, effect })
diff --git a/src/core/pmndrs/ShockWavePmndrs.vue b/src/core/pmndrs/ShockWavePmndrs.vue
index ab509ab0..9dbe3c21 100644
--- a/src/core/pmndrs/ShockWavePmndrs.vue
+++ b/src/core/pmndrs/ShockWavePmndrs.vue
@@ -4,7 +4,7 @@ import { Vector3 } from 'three'
 import { watch } from 'vue'
 import { makePropWatchers } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
-import { useTresContext } from '@tresjs/core'
+import { useTres } from '@tresjs/core'
 
 export interface ShockWavePmndrsProps {
   /**
@@ -35,7 +35,7 @@ export interface ShockWavePmndrsProps {
 
 const props = defineProps<ShockWavePmndrsProps>()
 
-const { camera } = useTresContext()
+const { camera } = useTres()
 
 const { pass, effect } = useEffectPmndrs(
   () => new ShockWaveEffect(camera.value, Array.isArray(props.position) ? new Vector3(...props.position) : props.position, props),
diff --git a/src/core/pmndrs/composables/useEffectPmndrs.ts b/src/core/pmndrs/composables/useEffectPmndrs.ts
index f82ed3a4..5735c333 100644
--- a/src/core/pmndrs/composables/useEffectPmndrs.ts
+++ b/src/core/pmndrs/composables/useEffectPmndrs.ts
@@ -1,6 +1,6 @@
 import type { Effect } from 'postprocessing'
 import type { Reactive, ShallowRef } from 'vue'
-import { useTresContext } from '@tresjs/core'
+import { useTres } from '@tresjs/core'
 import { EffectPass } from 'postprocessing'
 import { inject, nextTick, onUnmounted, shallowRef, watch, watchEffect } from 'vue'
 import { effectComposerInjectionKey } from '../EffectComposerPmndrs.vue'
@@ -23,7 +23,7 @@ export const useEffectPmndrs = <T extends Effect, D extends Record<PropertyKey,
   const pass = shallowRef<EffectPass | null>(null) as ShallowRef<EffectPass | null>
   const effect = shallowRef<T | null>(null) as ShallowRef<T | null>
 
-  const { scene, camera, invalidate } = useTresContext()
+  const { scene, camera, invalidate } = useTres()
 
   watch(passDependencies, () => invalidate())
 
diff --git a/src/core/three/EffectComposer.vue b/src/core/three/EffectComposer.vue
index 162dab9f..f522aba0 100644
--- a/src/core/three/EffectComposer.vue
+++ b/src/core/three/EffectComposer.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { useLoop, useTresContext } from '@tresjs/core'
+import { useTresContext } from '@tresjs/core'
 import { useDevicePixelRatio } from '@vueuse/core'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
@@ -24,11 +24,11 @@ provide(effectComposerInjectionKey, effectComposer)
 
 defineExpose({ composer: effectComposer })
 
-const { renderer, sizes, scene, camera, render: renderCtx } = useTresContext()
+const { renderer, sizes, scene, camera } = useTresContext()
 
 const initEffectComposer = () => {
   effectComposer.value?.dispose()
-  effectComposer.value = new EffectComposer(renderer.value)
+  effectComposer.value = new EffectComposer(renderer.instance)
 }
 watchEffect(initEffectComposer)
 
@@ -47,22 +47,17 @@ watchEffect(() => {
 
 if (!props.withoutRenderPass) {
   watchEffect(() => {
-    if (camera.value && scene.value && effectComposer.value) {
-      effectComposer.value.addPass(new RenderPass(scene.value, camera.value))
+    if (camera.activeCamera.value && scene.value && effectComposer.value) {
+      effectComposer.value.addPass(new RenderPass(scene.value, camera.activeCamera.value))
     }
   })
 }
 
-const { render } = useLoop()
-
-render(() => {
-  if (renderCtx.frames.value > 0 && effectComposer.value && props.enabled) {
+renderer.replaceRenderFunction((notifySuccess) => {
+  if (effectComposer.value && props.enabled) {
     effectComposer.value.render()
+    notifySuccess()
   }
-
-  renderCtx.frames.value = renderCtx.mode.value === 'always'
-    ? 1
-    : Math.max(0, renderCtx.frames.value - 1)
 })
 
 onUnmounted(() => {
diff --git a/src/core/three/Glitch.vue b/src/core/three/Glitch.vue
index ae7a0798..34a794c9 100644
--- a/src/core/three/Glitch.vue
+++ b/src/core/three/Glitch.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { useLoop } from '@tresjs/core'
+import { useLoop, useTres } from '@tresjs/core'
 import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'
 import { makePropWatchers } from '../../util/prop'
 import { useEffect } from './composables/useEffect'
@@ -21,10 +21,12 @@ const props = defineProps<GlitchProps>()
 
 const { pass } = useEffect(() => new GlitchPass(props.dtSize), props, ['dtSize'])
 
+const { invalidate } = useTres()
+
 defineExpose({ pass })
 
 const { onBeforeRender } = useLoop()
-onBeforeRender(({ invalidate }) => invalidate())
+onBeforeRender(() => invalidate())
 
 makePropWatchers(
   [[() => props.goWild, 'goWild']],
diff --git a/src/core/three/Pixelation.vue b/src/core/three/Pixelation.vue
index e52f2e4c..b3834f5a 100644
--- a/src/core/three/Pixelation.vue
+++ b/src/core/three/Pixelation.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { useTresContext } from '@tresjs/core'
+import { useTres } from '@tresjs/core'
 import { RenderPixelatedPass } from 'three/examples/jsm/postprocessing/RenderPixelatedPass.js'
 import { watchEffect } from 'vue'
 import { makePropWatchers } from '../../util/prop'
@@ -15,7 +15,7 @@ export interface PixelationProps {
 <script lang="ts" setup>
 const props = defineProps<PixelationProps>()
 
-const { scene, camera } = useTresContext()
+const { scene, camera } = useTres()
 
 const { pass } = useEffect(() => new RenderPixelatedPass(props.pixelSize, scene.value, camera.value!), props)
 
diff --git a/src/core/three/composables/useEffect.ts b/src/core/three/composables/useEffect.ts
index eeb57ca3..f4c26c95 100644
--- a/src/core/three/composables/useEffect.ts
+++ b/src/core/three/composables/useEffect.ts
@@ -1,6 +1,6 @@
 import type { Pass } from 'three/examples/jsm/postprocessing/Pass.js'
 import type { Reactive, ShallowRef } from 'vue'
-import { useTresContext } from '@tresjs/core'
+import { useTres } from '@tresjs/core'
 import { inject, nextTick, onUnmounted, shallowRef, watch, watchEffect } from 'vue'
 import { effectComposerInjectionKey } from '../EffectComposer.vue'
 
@@ -21,7 +21,7 @@ export const useEffect = <T extends Pass, D extends Record<PropertyKey, any>>(
   const composer = inject(effectComposerInjectionKey)
 
   const pass = shallowRef<T>(newPassFunction()) as ShallowRef<T>
-  const { sizes, invalidate } = useTresContext()
+  const { sizes, invalidate } = useTres()
 
   if (passDependencies) {
     watch(passDependencies, () => invalidate())