feat(postprocessing): 1334 creation of effect pass components via custom agents

.gitignore

@@ -29,12 +29,14 @@ coverage
 
 .env
 .env.local
-.claude
 .worktrees
 
 .nx/*
 .nx/cache
 .nx/workspace-data
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+
+.claude/*
+!.claude/agents/
 **/contents.sqlite

apps/playground/src/components/BasicScene.vue

@@ -3,13 +3,17 @@ import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposer } from '@tresjs/post-processing'
 
-defineProps<{
+withDefaults(defineProps<{
   wireframe?: boolean
-}>()
+  renderMode?: 'always' | 'on-demand' | 'manual'
+}>(), {
+  wireframe: false,
+  renderMode: 'on-demand',
+})
 </script>
 
 <template>
-  <TresCanvas render-mode="on-demand">
+  <TresCanvas :render-mode="renderMode">
     <TresPerspectiveCamera
       :position="[5, 5, 5]"
       :look-at="[0, 0, 0]"

apps/playground/src/pages/postprocessing/three/afterimage.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, useLoop } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { Afterimage, EffectComposer } from '@tresjs/post-processing'
+import { shallowRef } from 'vue'
+
+const { damp, enabled } = useControls({
+  damp: { value: 0.96, min: 0, max: 1, step: 0.01 },
+  enabled: true,
+}, {
+  uuid: 'postprocessing-three-afterimage',
+})
+
+const torusRef = shallowRef()
+
+const RotateKnot = () => {
+  const { onBeforeRender } = useLoop()
+  onBeforeRender(({ elapsed }) => {
+    if (torusRef.value) {
+      torusRef.value.rotation.x = elapsed * 0.4
+      torusRef.value.rotation.y = elapsed * 0.6
+    }
+  })
+}
+</script>
+
+<template>
+  <TresLeches uuid="postprocessing-three-afterimage" />
+  <TresCanvas render-mode="always">
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+
+    <TresMesh ref="torusRef">
+      <TresTorusKnotGeometry :args="[1.5, 0.5, 128, 32]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresGridHelper />
+
+    <RotateKnot />
+
+    <EffectComposer>
+      <Afterimage v-if="enabled" :damp="damp" />
+    </EffectComposer>
+  </TresCanvas>
+</template>

apps/playground/src/pages/postprocessing/three/film.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Film } from '@tresjs/post-processing'
+import BasicScene from '@/components/BasicScene.vue'
+import { TresLeches, useControls } from '@tresjs/leches'
+
+const { intensity, grayscale, enabled } = useControls({
+  intensity: {
+    value: 0.5,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+  grayscale: true,
+  enabled: true,
+}, {
+  uuid: 'postprocessing-three-film',
+})
+</script>
+
+<template>
+  <TresLeches uuid="postprocessing-three-film" />
+  <BasicScene render-mode="always">
+    <template #effects>
+      <Film
+        :intensity
+        :grayscale
+        :enabled
+      />
+    </template>
+  </BasicScene>
+</template>

apps/playground/src/pages/postprocessing/three/sao.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, useLoop } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { EffectComposer, Output, SAO } from '@tresjs/post-processing'
+import { shallowRef } from 'vue'
+import {
+  Color,
+  InstancedMesh,
+  MeshStandardMaterial,
+  Object3D,
+  SphereGeometry,
+} from 'three'
+
+const {
+  enabled,
+  output,
+  saoBias,
+  saoIntensity,
+  saoScale,
+  saoKernelRadius,
+  saoMinResolution,
+  saoBlur,
+  saoBlurRadius,
+  saoBlurStdDev,
+  saoBlurDepthCutoff,
+} = useControls({
+  enabled: true,
+  output: { value: 0, min: 0, max: 2, step: 1 },
+  saoBias: { value: 0.5, min: -1, max: 1, step: 0.01 },
+  saoIntensity: { value: 0.18, min: 0, max: 1, step: 0.01 },
+  saoScale: { value: 1, min: 0, max: 10, step: 0.1 },
+  saoKernelRadius: { value: 100, min: 1, max: 100, step: 1 },
+  saoMinResolution: { value: 0, min: 0, max: 1, step: 0.01 },
+  saoBlur: true,
+  saoBlurRadius: { value: 8, min: 0, max: 200, step: 1 },
+  saoBlurStdDev: { value: 4, min: 0.5, max: 150, step: 0.5 },
+  saoBlurDepthCutoff: { value: 0.01, min: 0.0, max: 0.1, step: 0.001 },
+}, {
+  uuid: 'postprocessing-three-sao',
+})
+
+// Create 120 random spheres as an InstancedMesh
+const geometry = new SphereGeometry(3, 48, 24)
+const material = new MeshStandardMaterial({ roughness: 0.5, metalness: 0 })
+const spheres = new InstancedMesh(geometry, material, 120)
+const dummy = new Object3D()
+const color = new Color()
+
+for (let i = 0; i < 120; i++) {
+  dummy.position.set(
+    Math.random() * 4 - 2,
+    Math.random() * 4 - 2,
+    Math.random() * 4 - 2,
+  )
+  dummy.rotation.set(Math.random(), Math.random(), Math.random())
+  const scale = Math.random() * 0.2 + 0.05
+  dummy.scale.set(scale, scale, scale)
+  dummy.updateMatrix()
+  spheres.setMatrixAt(i, dummy.matrix)
+  color.setHSL(Math.random(), 1.0, 0.3)
+  spheres.setColorAt(i, color)
+}
+
+const groupRef = shallowRef()
+
+function RotateGroup() {
+  const { onBeforeRender } = useLoop()
+  onBeforeRender(({ elapsed }) => {
+    if (groupRef.value) {
+      groupRef.value.rotation.x = elapsed * 0.2
+      groupRef.value.rotation.y = elapsed * 0.1
+    }
+  })
+}
+</script>
+
+<template>
+  <TresLeches uuid="postprocessing-three-sao" />
+  <TresCanvas render-mode="always">
+    <TresPerspectiveCamera
+      :position="[0, 0, 7]"
+      :fov="65"
+      :near="3"
+      :far="10"
+    />
+    <OrbitControls auto-rotate />
+
+    <TresAmbientLight :color="0xFFFFFF" :intensity="0.2" />
+    <TresPointLight :color="0xEFFFEF" :intensity="500" :position="[-10, -10, 10]" />
+    <TresPointLight :color="0xFFEFEF" :intensity="500" :position="[-10, 10, 10]" />
+    <TresPointLight :color="0xEFEFFF" :intensity="500" :position="[10, -10, 10]" />
+
+    <TresGroup ref="groupRef">
+      <primitive :object="spheres" />
+    </TresGroup>
+
+    <RotateGroup />
+
+    <EffectComposer>
+      <SAO
+        :enabled="enabled"
+        :output="output"
+        :sao-bias="saoBias"
+        :sao-intensity="saoIntensity"
+        :sao-scale="saoScale"
+        :sao-kernel-radius="saoKernelRadius"
+        :sao-min-resolution="saoMinResolution"
+        :sao-blur="saoBlur"
+        :sao-blur-radius="saoBlurRadius"
+        :sao-blur-std-dev="saoBlurStdDev"
+        :sao-blur-depth-cutoff="saoBlurDepthCutoff"
+      />
+      <Output />
+    </EffectComposer>
+  </TresCanvas>
+</template>

apps/playground/src/router/routes/postprocessing/index.ts

@@ -23,12 +23,15 @@ const home: RouteRecordRaw = {
 }
 
 export const threeRoutes = [
+  makeRoute('Afterimage', '👻'),
   makeRoute('Pixelation', '👾'),
   makeRoute('Glitch', '📺'),
   makeRoute('SMAA', '📐'),
   makeRoute('Halftone', '🎨'),
   makeRoute('Unreal Bloom', '🌼'),
-]
+  makeRoute('Film', '🎞️'),
+  makeRoute('SAO', '🌑'),
+].sort((a, b) => (a.meta?.name as string).localeCompare(b.meta?.name as string))
 
 export const pmndrsRoutes = [
   makeRoute('Outline', '🔲', false),
@@ -61,7 +64,7 @@ export const pmndrsRoutes = [
   makeRoute('Barrel blur', '🌀', false),
   makeRoute('Fish Eye', '👁️', false),
   makeRoute('On-demand', '🔄', false),
-]
+].sort((a, b) => (a.meta?.name as string).localeCompare(b.meta?.name as string))
 
 export const postProcessingRoutes = [
   home,

apps/postprocessing-docs-vitepress/.vitepress/config.ts

@@ -82,10 +82,13 @@ export default defineConfig({
       {
         text: 'Three',
         items: [
+          { text: 'Afterimage', link: '/guide/three/afterimage' },
+          { text: 'Film', link: '/guide/three/film' },
           { text: 'Glitch', link: '/guide/three/glitch' },
           { text: 'Halftone', link: '/guide/three/halftone' },
           { text: 'Output', link: '/guide/three/output' },
           { text: 'Pixelation', link: '/guide/three/pixelation' },
+          { text: 'SAO', link: '/guide/three/sao' },
           { text: 'SMAA', link: '/guide/three/smaa' },
           { text: 'Unreal Bloom', link: '/guide/three/unreal-bloom' },
         ].sort((a, b) => a.text.localeCompare(b.text)),

apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/AfterimageThreeDemo.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { Afterimage, EffectComposer } from '@tresjs/post-processing'
+import { Color } from 'three'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+const { effectComposer } = useRouteDisposal()
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#121212"
+    :alpha="false"
+    :shadows="true"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 4, 4]"
+    />
+    <OrbitControls
+      auto-rotate
+      :auto-rotate-speed="2"
+      :target="[0, 1, 0]"
+    />
+    <TresMesh :position="[0, 1, 0]">
+      <TresTorusKnotGeometry :args="[0.8, 0.3, 128, 32]" />
+      <TresMeshStandardMaterial
+        color="cyan"
+        :emissive="new Color('cyan')"
+        :emissive-intensity="0.2"
+      />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :position="[3, 5, 3]"
+      :intensity="1.5"
+    />
+
+    <Suspense>
+      <EffectComposer ref="effectComposer">
+        <Afterimage :damp="0.98" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

apps/postprocessing-docs-vitepress/.vitepress/theme/components/three/FilmThreeDemo.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposer, Film } from '@tresjs/post-processing'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#121212"
+    :alpha="false"
+    :shadows="true"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh :position="[-1, 0.5, 0]">
+      <TresSphereGeometry :args="[0.8, 32, 32]" />
+      <TresMeshStandardMaterial color="#f0f0f0" />
+    </TresMesh>
+    <TresMesh :position="[1.2, 0.5, 0]">
+      <TresTorusGeometry :args="[0.5, 0.2, 16, 32]" />
+      <TresMeshStandardMaterial color="aqua" />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="0.8" />
+    <TresDirectionalLight
+      :position="[-5, 5, 5]"
+      :intensity="1.5"
+    />
+
+    <Suspense>
+      <EffectComposer ref="effectComposer">
+        <Film :intensity="1" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>