feat!: v3

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [3.0.0-next.0](https://github.com/Tresjs/post-processing/compare/2.4.0...3.0.0-next.0) (2025-06-24)
+
+### Features
+
+* adapt code and playgrounds to latest changes on ecosystem ([#207](https://github.com/Tresjs/post-processing/issues/207)) ([39ad650](https://github.com/Tresjs/post-processing/commit/39ad650786d565cbaafb300cabfa51978c0fb73d)), closes [#208](https://github.com/Tresjs/post-processing/issues/208)
+
+### Bug Fixes
+
+* update import paths for post-processing components in documentation ([#206](https://github.com/Tresjs/post-processing/issues/206)) ([7289c15](https://github.com/Tresjs/post-processing/commit/7289c152b81ea9e386f7d4621e55fc61292b505f))
+
 ## [2.4.0](https://github.com/Tresjs/post-processing/compare/2.3.1...2.4.0) (2025-05-26)
 
 ### Features

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>

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>

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

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"

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"

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" />

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 */

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"
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/post-processing",
   "type": "module",
-  "version": "2.4.0",
+  "version": "3.0.0-next.0",
   "packageManager": "pnpm@10.6.3",
   "description": "Post-processing library for TresJS",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -52,7 +52,7 @@
     "docs:preview": "vitepress preview"
   },
   "peerDependencies": {
-    "@tresjs/core": ">=4.0",
+    "@tresjs/core": ">=5.0",
     "three": ">=0.169",
     "vue": ">=3.4"
   },
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.0",
-    "@tresjs/core": "^4.3.2",
+    "@tresjs/core": "5.0.0-next.6",
     "@tresjs/eslint-config": "^1.4.0",
     "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@9ad0cd3",
     "@types/three": "^0.172.0",

playground/.eslintrc-auto-import.json

@@ -3,11 +3,20 @@
     "Component": true,
     "ComponentPublicInstance": true,
     "ComputedRef": true,
+    "DirectiveBinding": true,
     "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
     "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
     "PropType": true,
     "Ref": true,
+    "Slot": true,
+    "Slots": true,
     "VNode": true,
+    "WritableComputedRef": true,
     "computed": true,
     "createApp": true,
     "customRef": true,
@@ -37,6 +46,7 @@
     "onServerPrefetch": true,
     "onUnmounted": true,
     "onUpdated": true,
+    "onWatcherCleanup": true,
     "provide": true,
     "reactive": true,
     "readonly": true,
@@ -48,27 +58,19 @@
     "toRaw": true,
     "toRef": true,
     "toRefs": true,
+    "toValue": true,
     "triggerRef": true,
     "unref": true,
     "useAttrs": true,
     "useCssModule": true,
     "useCssVars": true,
+    "useId": true,
+    "useModel": true,
     "useSlots": true,
+    "useTemplateRef": true,
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "toValue": true,
-    "WritableComputedRef": true,
-    "ExtractDefaultPropTypes": true,
-    "ExtractPropTypes": true,
-    "ExtractPublicPropTypes": true,
-    "onWatcherCleanup": true,
-    "useId": true,
-    "useModel": true,
-    "useTemplateRef": true,
-    "DirectiveBinding": true,
-    "MaybeRef": true,
-    "MaybeRefOrGetter": true
+    "watchSyncEffect": true
   }
 }

playground/auto-imports.d.ts

@@ -66,6 +66,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

playground/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 */

playground/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "^4.1.0",
-    "@tresjs/core": "4.3.2",
+    "@tresjs/cientos": "5.0.0-next.3",
+    "@tresjs/core": "5.0.0-next.6",
     "@tresjs/post-processing": "workspace:*",
     "vue-router": "^4.5.0"
   },

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>

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>

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]"
     >