feat: render emit and advance playgroudn for render modes

playground/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
     copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
     GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
+    GraphPane: typeof import('./src/components/GraphPane.vue')['default']
     NoiseDemo: typeof import('./src/components/NoiseDemo.vue')['default']
     OutlineDemo: typeof import('./src/components/OutlineDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

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
+      right-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>

playground/src/composables/state.ts

@@ -0,0 +1,10 @@
+import { reactive, toRefs } from 'vue'
+
+const state = reactive({
+  renderingTimes: 0,
+})
+export function useState() {
+  return {
+    ...toRefs(state),
+  }
+}

playground/src/pages/advanced/on-demand/experience.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { useTres } from '@tresjs/core'
+import { EffectComposer, Pixelation } from '@tresjs/post-processing'
+import { useState } from '../../../composables/state'
+
+const { invalidate } = useTres()
+
+function onControlChange() {
+  invalidate()
+}
+
+const { renderingTimes } = useState()
+
+function onRender() {
+  renderingTimes.value = 1
+}
+</script>
+
+<template>
+  <TresPerspectiveCamera
+    :position="[5, 5, 5]"
+    :look-at="[0, 0, 0]"
+  />
+  <OrbitControls @change="onControlChange" />
+  <TresMesh
+    :position="[-3.5, 1, 0]"
+  >
+    <TresConeGeometry :args="[1.25, 2, 4, 1, false, Math.PI * 0.25]" />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+
+  <TresMesh :position="[0, 1, 0]">
+    <TresBoxGeometry :args="[2, 2, 2]" />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+
+  <TresMesh :position="[3.5, 1, 0]">
+    <TresSphereGeometry />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+
+  <TresGridHelper />
+
+  <EffectComposer @render="onRender">
+    <Pixelation :granularity="10" />
+  </EffectComposer>
+</template>

playground/src/pages/advanced/on-demand/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import GraphPane from '../../../components/GraphPane.vue'
+import OnDemandExperience from './experience.vue'
+</script>
+
+<template>
+  <GraphPane />
+  <TresCanvas
+    render-mode="on-demand"
+    clear-color="#c0ffee"
+    @render="onRender"
+  >
+    <OnDemandExperience />
+  </TresCanvas>
+</template>

playground/src/pages/index.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
 import {
+  advancedRoutes,
   routes,
 } from '../router'
 
 const [_home, ...restRoutes] = routes
+
+const sections = [
+  {
+    icon: '🤓',
+    title: 'Advanced',
+    routes: advancedRoutes,
+  },
+]
 </script>
 
 <template>
@@ -59,8 +68,8 @@ const [_home, ...restRoutes] = routes
             {{ name }}
           </h2>
         </router-link>
-        <!-- <div
-          v-for="{ title, routes, icon } in routes"
+        <div
+          v-for="{ title, routes, icon } in sections"
           :key="title"
           class="
           p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded
@@ -85,7 +94,7 @@ const [_home, ...restRoutes] = routes
               <span>{{ route.name }} </span>
             </router-link>
           </div>
-        </div> -->
+        </div>
       </div>
     </div>
   </div>

playground/src/router.ts

@@ -29,7 +29,18 @@ export const routes = [
   makeRoute('Vignette', '🕶️'),
 ]
 
+export const advancedRoutes = [
+  {
+    path: '/advanced/on-demand',
+    name: 'On-demand',
+    component: () => import('./pages/advanced/on-demand/index.vue'),
+  },
+]
+
 export const router = createRouter({
   history: createWebHistory(),
-  routes,
+  routes: [
+    ...routes,
+    ...advancedRoutes,
+  ],
 })

src/core/EffectComposer.vue

@@ -30,7 +30,9 @@ const props = withDefaults(defineProps<EffectComposerProps>(), {
   multisampling: 0,
   stencilBuffer: undefined,
 })
-const { scene, camera, renderer, sizes } = useTresContext()
+const emit = defineEmits(['render'])
+
+const { scene, camera, renderer, sizes, render: renderCtx } = useTresContext()
 
 const effectComposer: ShallowRef<EffectComposerImpl | null> = shallowRef(null)
 
@@ -39,6 +41,7 @@ let normalPass: NormalPass | null = null
 
 provide(effectComposerInjectionKey, effectComposer)
 defineExpose({ composer: effectComposer })
+
 const setNormalPass = () => {
   if (!effectComposer.value) { return }
 
@@ -98,13 +101,24 @@ watch(() => [sizes.width.value, sizes.height.value], ([width, height]) => {
 const { render } = useLoop()
 
 render(() => {
-  if (props.enabled && renderer.value && effectComposer.value && sizes.width.value && sizes.height.value) {
+  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() }
     effectComposer.value.render()
+    emit('render', effectComposer.value)
     renderer.value.autoClear = currentAutoClear
   }
+
+  // Reset priority
+  renderCtx.priority.value = 0
+
+  if (renderCtx.mode.value === 'always') {
+    renderCtx.frames.value = 1
+  }
+  else {
+    renderCtx.frames.value = Math.max(0, renderCtx.frames.value - 1)
+  }
 })
 
 onUnmounted(() => {