fix: avoid recursive updates when resizing the window

Author: alvarosabu

.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 docs/.vitepress/dist/
-docs/.vitepress/cache/
+docs/.vitepress/cache/
+stats.html

playground-nuxt/nuxt.config.ts

@@ -11,7 +11,7 @@ export default defineNuxtConfig({
       alias: {
         '@tresjs/post-processing': resolve(__dirname, '../src/'),
       },
-      dedupe: ['three', '@tresjs/core'],
+      dedupe: ['three', '@tresjs/core', '@vueuse/core'],
     },
   },
 })

playground-nuxt/pages/index.vue

@@ -39,7 +39,7 @@ const bloomParams = reactive({
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
-      <EffectComposer :depth-buffer="true">
+      <EffectComposer>
         <Bloom />
       </EffectComposer>
     </Suspense>

src/core/EffectComposer.vue

@@ -6,7 +6,7 @@ import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass
 
 import { isWebGL2Available } from 'three-stdlib'
 import type { ShallowRef } from 'vue'
-import { computed, provide, shallowRef, watch, onUnmounted, watchEffect, onMounted } from 'vue'
+import { computed, provide, shallowRef, watch, onUnmounted, watchEffect, onMounted, unref } from 'vue'
 import { effectComposerInjectionKey } from './injectionKeys'
 
 export interface EffectComposerProps {
@@ -56,11 +56,6 @@ const setNormalPass = () => {
   }
 }
 
-watchEffect(() => {
-  if (effectComposer.value && sizes.width.value && sizes.height.value)
-    effectComposer.value.setSize(sizes.width.value, sizes.height.value)
-})
-
 const effectComposerParams = computed(() => {
   const plainEffectComposer = new EffectComposerImpl()
   const params = {
@@ -82,20 +77,16 @@ const effectComposerParams = computed(() => {
 const initEffectComposer = () => {
   if (!renderer.value && !scene.value && !camera.value) return
 
-  effectComposer.value = new EffectComposerImpl(renderer.value, effectComposerParams.value)
-  effectComposer.value.addPass(new RenderPass(scene.value, camera.value))
+  effectComposer.value = new EffectComposerImpl(unref(renderer), effectComposerParams.value)
+  effectComposer.value.addPass(new RenderPass(unref(scene), unref(camera)))
 
   if (!props.disableNormalPass) setNormalPass()
 }
 
-let stop = () => { } // defining this prevents error in watcher
-
-stop = watch([sizes.height, sizes.width], () => {
+watch(() => [sizes.height.value, sizes.width.value], ([width, height]) => {
   // effect composer should only live once the canvas has a size > 0
-  if (!sizes.height.value && !sizes.width.value) return
-
-  watchEffect(initEffectComposer)
-  stop?.()
+  if (!width && !height) return
+  effectComposer.value ? effectComposer.value.setSize(sizes.width.value, sizes.height.value) : initEffectComposer()
 }, {
   immediate: true,
 })

vite.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
     alias: {
       '/@': resolve(__dirname, './src'),
     },
-    dedupe: ['@tresjs/core'],
+    dedupe: ['@tresjs/core', '@vueuse/core'],
   },
   plugins: [
     vue({
@@ -61,7 +61,7 @@ export default defineConfig({
           open: false,
         }),
       ],
-      external: ['three', 'vue', '@tresjs/core', 'postprocessing'],
+      external: ['three', 'vue', '@tresjs/core', 'postprocessing', '@vueuse/core'],
       output: {
         exports: 'named',
         // Provide global variables to use in the UMD build
@@ -71,11 +71,12 @@ export default defineConfig({
           three: 'Three',
           vue: 'Vue',
           postprocessing: 'Postprocessing',
+          '@vueuse/core': 'VueUseCore',
         },
       },
     },
   },
   optimizeDeps: {
-    exclude: ['three', 'vue', '@tresjs/core', 'postprocessing'],
+    exclude: ['three', 'vue', '@tresjs/core', 'postprocessing', '@vueuse/core'],
   },
 })