added on demand rendering support

playground/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "^3.9.0",
-    "@tresjs/core": "4.0.2",
+    "@tresjs/cientos": "^4.0.2",
+    "@tresjs/core": "4.2.10",
     "vue-router": "^4.3.2"
   },
   "devDependencies": {

playground/src/components/BasicScene.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerThree, PixelationThree } from '@tresjs/post-processing'
-import { OrbitControls } from '@tresjs/cientos'
 
 defineProps<{
   wireframe?: boolean
 }>()
 </script>
 
 <template>
-  <TresCanvas :disable-render="true">
+  <TresCanvas render-mode="on-demand">
     <TresPerspectiveCamera
       :position="[5, 5, 5]"
       :look-at="[0, 0, 0]"

playground/src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 import { router } from './router'
+import './style.css'
 import 'uno.css'
 
 const app = createApp(App)

playground/src/pages/postprocessing/outline.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { KernelSize } from 'postprocessing'
-import { ref } from 'vue'
-import { EffectComposer, Outline } from '@tresjs/post-processing'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
-import type { Intersection, Object3D } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { EffectComposer, Outline } from '@tresjs/post-processing'
+import { KernelSize } from 'postprocessing'
 import { NoToneMapping } from 'three'
+import { ref } from 'vue'
 
-import { TresLeches, useControls } from '@tresjs/leches'
+import type { Intersection, Object3D } from 'three'
 import '@tresjs/leches/styles'
 
 const gl = {

src/core/EffectComposer.vue

@@ -1,10 +1,9 @@
 <script lang="ts">
-import { HalfFloatType } from 'three'
-import type { TresObject } from '@tresjs/core'
 import { useLoop, useTresContext } from '@tresjs/core'
 import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass, RenderPass } from 'postprocessing'
-
+import { HalfFloatType } from 'three'
 import { isWebGL2Available } from 'three-stdlib'
+
 import { computed, onUnmounted, provide, shallowRef, watch } from 'vue'
 
 import type { EffectComposer } from 'postprocessing'
@@ -14,7 +13,6 @@ export const effectComposerInjectionKey: InjectionKey<ShallowRef<EffectComposer
 
 export interface EffectComposerProps {
   enabled?: boolean
-  children?: TresObject[]
   depthBuffer?: boolean
   disableNormalPass?: boolean
   stencilBuffer?: boolean
@@ -118,15 +116,9 @@ render(() => {
     renderer.value.autoClear = currentAutoClear
   }
 
-  // Reset priority
-  renderCtx.priority.value = 0 // TODO ask Alvaro about this
-
-  if (renderCtx.mode.value === 'always') {
-    renderCtx.frames.value = 1
-  }
-  else {
-    renderCtx.frames.value = Math.max(0, renderCtx.frames.value - 1)
-  }
+  renderCtx.frames.value = renderCtx.mode.value === 'always'
+    ? 1
+    : renderCtx.frames.value = Math.max(0, renderCtx.frames.value - 1)
 })
 
 onUnmounted(() => {

src/core/three/EffectComposer.vue

@@ -1,24 +1,25 @@
 <script lang="ts">
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
-import { useDevicePixelRatio } from '@vueuse/core'
 import { useLoop, useTresContext } from '@tresjs/core'
+import { useDevicePixelRatio } from '@vueuse/core'
 import { EffectComposer as EffectComposerThreejs } from 'three/examples/jsm/postprocessing/EffectComposer.js'
-import { type InjectionKey, type ShallowRef, onUnmounted, provide, shallowRef, watchEffect } from 'vue'
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
+import { type InjectionKey, onUnmounted, provide, type ShallowRef, shallowRef, watchEffect } from 'vue'
 
 export const effectComposerInjectionKey: InjectionKey<ShallowRef<EffectComposerThreejs | null>> = Symbol('effectComposerThree')
 </script>
 
 <script lang="ts" setup>
 const props = defineProps<{
   withoutRenderPass?: boolean
+  // TODO add enabled prop
 }>()
 
 const effectComposer: ShallowRef<EffectComposerThreejs | null> = shallowRef(null)
 provide(effectComposerInjectionKey, effectComposer)
 
 defineExpose({ composer: effectComposer })
 
-const { renderer, sizes, scene, camera } = useTresContext()
+const { renderer, sizes, scene, camera, render: renderCtx } = useTresContext()
 
 const initEffectComposer = () => {
   effectComposer.value?.dispose()
@@ -50,7 +51,13 @@ if (!props.withoutRenderPass) {
 const { render } = useLoop()
 
 render(() => {
-  effectComposer.value?.render()
+  if (renderCtx.frames.value > 0 && effectComposer.value) {
+    effectComposer.value.render()
+  }
+
+  renderCtx.frames.value = renderCtx.mode.value === 'always'
+    ? 1
+    : renderCtx.frames.value = Math.max(0, renderCtx.frames.value - 1)
 })
 
 onUnmounted(() => {