feat: adapt to core v5 changes 2 in MR 1043 (#208)

* refactor: streamline rendering logic in effect processors

* chore: update dependencies and improve rendering logic in on-demand playground example

Author: Tinoooo

package.json

@@ -52,18 +52,17 @@
     "docs:preview": "vitepress preview"
   },
   "peerDependencies": {
-    "@tresjs/core": ">=4.0",
+    "@tresjs/core": ">=5.0",
     "three": ">=0.169",
     "vue": ">=3.4"
   },
   "dependencies": {
-    "@tresjs/cientos": "5.0.0-next.2",
     "@vueuse/core": "^12.5.0",
     "postprocessing": "^6.37.2"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.0",
-    "@tresjs/core": "5.0.0-next.5",
+    "@tresjs/core": "https://pkg.pr.new/@tresjs/core@1044",
     "@tresjs/eslint-config": "^1.4.0",
     "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@9ad0cd3",
     "@types/three": "^0.172.0",

playground/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tresjs/cientos": "5.0.0-next.2",
-    "@tresjs/core": "5.0.0-next.5",
+    "@tresjs/core": "https://pkg.pr.new/@tresjs/core@a5468fc",
     "@tresjs/post-processing": "workspace:*",
     "vue-router": "^4.5.0"
   },

playground/src/pages/postprocessing/on-demand.vue

@@ -15,7 +15,7 @@ function onRender() {
 const canvas = ref<InstanceType<typeof TresCanvas>>()
 
 function onControlChange() {
-  canvas.value?.context?.invalidate()
+  canvas.value?.context?.renderer.invalidate()
 }
 </script>
 

pnpm-lock.yaml

@@ -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'
@@ -105,9 +105,7 @@ watch(() => [sizes.width.value, sizes.height.value], ([width, height]) => {
   immediate: true,
 })
 
-const { render } = useLoop()
-
-render((notifySuccess) => {
+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

src/core/pmndrs/EffectComposerPmndrs.vue

@@ -63,7 +63,7 @@ defineExpose({ pass, effect })
 const { invalidate } = useTres()
 
 const { onBeforeRender } = useLoop()
-onBeforeRender((/* { invalidate } */) => invalidate())
+onBeforeRender(() => invalidate())
 
 watchEffect(() => {
   const getMode = () => {

src/core/pmndrs/GlitchPmndrs.vue

@@ -25,7 +25,7 @@ defineExpose({ pass, effect })
 const { invalidate } = useTres()
 
 const { onBeforeRender } = useLoop()
-onBeforeRender((/* { invalidate } */) => invalidate())
+onBeforeRender(() => invalidate())
 
 makePropWatchers(
   [

src/core/pmndrs/NoisePmndrs.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'
@@ -53,9 +53,7 @@ if (!props.withoutRenderPass) {
   })
 }
 
-const { render } = useLoop()
-
-render((notifySuccess) => {
+renderer.replaceRenderFunction((notifySuccess) => {
   if (effectComposer.value && props.enabled) {
     effectComposer.value.render()
     notifySuccess()