bugfix: 29 effectcomposer does not correctly react to canvas resizing (…

…#30)

* feat: outline effect is now to a .vue file

* docs: docs for outline effect

* chore: replaced composer injection key by symbol

* bugfix: fixed #29

* chore: imported utility function from core

* chore: removed debug code

* chore: fixed effect by adding computeds

* chore: added more checks on condition

* feat: 23 refactor effects to vue files (#28)

* feat: outline effect is now to a .vue file

* docs: docs for outline effect

* chore: replaced composer injection key by symbol

---------

Co-authored-by: Tino Koch <tino.koch@xpoli.eu>

* fix: compute localCamera (#31)

---------

Co-authored-by: Tino Koch <tino.koch@xpoli.eu>
Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

playground/src/pages/glitch.vue

@@ -0,0 +1,5 @@
+<template>
+  <GlitchDemo />
+</template>
+
+<script lang="ts" setup></script>

playground/src/pages/outline.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { TresCanvas, TresCanvasProps } from '@tresjs/core'
-import { useTweakPane } from '@tresjs/cientos'
+import { KernelSize } from 'postprocessing'
 import { reactive, ref } from 'vue'
-import { EffectComposer, Outline, Glitch } from '@tresjs/post-processing'
-import { BasicShadowMap, NoToneMapping, Object3D, Intersection } from 'three'
-import { BlendFunction, KernelSize } from 'postprocessing'
+import { EffectComposer, Outline } from '@tresjs/post-processing'
+import { TresCanvas, TresCanvasProps } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { NoToneMapping, Object3D, Intersection } from 'three'
 
 const gl: TresCanvasProps = {
   clearColor: '#4ADE80',
@@ -39,8 +39,8 @@ pane.addInput(outlineParameters, 'kernelSize', { min: KernelSize.VERY_SMALL, max
 
 <template>
   <TresCanvas v-bind="gl" disable-render>
-    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[2, 2, 2]" />
-
+    <TresPerspectiveCamera :position="[1, 3, 3]" :look-at="[2, 2, 2]" />
+    <OrbitControls />
     <template v-for="i in 5" :key="i">
       <TresMesh @click="toggleMeshSelectionState" :position="[i * 1.1 - 2.8, 1, 0]">
         <TresBoxGeometry :width="4" :height="4" :depth="4" />

playground/src/router.ts

@@ -11,6 +11,11 @@ const routes = [
     name: 'Outline',
     component: () => import('./pages/outline.vue'),
   },
+  {
+    path: '/glitch',
+    name: 'Glitch',
+    component: () => import('./pages/glitch.vue'),
+  },
 ]
 
 export const router = createRouter({

src/core/EffectComposer.vue

@@ -4,16 +4,16 @@ import { TresCamera, TresObject, useRenderLoop } from '@tresjs/core'
 import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass, RenderPass } from 'postprocessing'
 
 import { useCore } from './useCore'
-import { ShallowRef, computed, provide, shallowRef, unref, watchEffect } from 'vue'
 import { isWebGL2Available } from 'three-stdlib'
-import { useWindowSize } from '@vueuse/core'
+import { useElementBounding } from '@vueuse/core'
 import { effectComposerInjectionKey } from './injectionKeys'
+import { ShallowRef, computed, provide, shallowRef, watchEffect } from 'vue'
 
 export type EffectComposerProps = {
   enabled?: boolean
   children?: TresObject[]
   depthBuffer?: boolean
-  dissableNormalPass?: boolean
+  disableNormalPass?: boolean
   stencilBuffer?: boolean
   resolutionScale?: number
   /*   renderPriority?: number */
@@ -32,7 +32,7 @@ const {
   autoClear = true,
   multisampling = 8,
   frameBufferType = HalfFloatType,
-  dissableNormalPass = false,
+  disableNormalPass = false,
   depthBuffer,
   stencilBuffer,
   scene,
@@ -51,8 +51,6 @@ const webGL2Available = isWebGL2Available()
 
 provide(effectComposerInjectionKey, effectComposer)
 
-const { width, height } = useWindowSize()
-
 function setNormalPass() {
   if (effectComposer.value) {
     normalPass = new NormalPass(localScene.value as Scene, localCamera.value as TresCamera)
@@ -69,10 +67,16 @@ function setNormalPass() {
   }
 }
 
+const canvas = computed(() => state.canvas?.value) // having a seperate computed makes useElementBounding work
+
+const { width, height } = useElementBounding(canvas)
+
+watchEffect(() => {
+  if (effectComposer.value && width.value && height.value) effectComposer.value.setSize(width.value, height.value)
+})
+
 watchEffect(() => {
-  if (state.renderer && state.scene && state.camera) {
-    state.renderer.setSize(width.value, height.value)
-    state.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+  if (state.renderer && localScene.value && localCamera.value) {
     effectComposer.value = new EffectComposerImpl(state.renderer, {
       depthBuffer,
       stencilBuffer,
@@ -81,22 +85,16 @@ watchEffect(() => {
     })
     effectComposer.value.addPass(new RenderPass(localScene.value, localCamera.value))
 
-    if (!dissableNormalPass) {
+    if (!disableNormalPass) {
       setNormalPass()
     }
   }
 })
 
 const { onLoop } = useRenderLoop()
 
-onLoop(() => {
-  if (effectComposer.value) {
-    effectComposer.value.render()
-  }
-})
-
 onLoop(({ delta }) => {
-  if (enabled && state.renderer && effectComposer.value) {
+  if (enabled && state.renderer && effectComposer.value && width.value && height.value) {
     const currentAutoClear = state.renderer.autoClear
     state.renderer.autoClear = autoClear
     if (stencilBuffer && !autoClear) state.renderer.clearStencil()

src/core/effects/Outline.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { Color } from 'three'
 import { useCore } from '../useCore'
+import { normalizeColor } from '@tresjs/core'
 import { EffectPass, OutlineEffect } from 'postprocessing'
+import { effectComposerInjectionKey } from '../injectionKeys'
 import { inject, onUnmounted, shallowRef, watch, watchEffect, computed } from 'vue'
 
 import type { TresColor } from '@tresjs/core'
+import type { Object3D, Texture } from 'three'
 import type { BlendFunction, KernelSize } from 'postprocessing'
-import type { Object3D, ColorRepresentation, Texture } from 'three'
-import { effectComposerInjectionKey } from '../injectionKeys'
 
 export type OutlineProps = {
   /**
@@ -54,18 +54,11 @@ export type OutlineProps = {
 const props = defineProps<OutlineProps>()
 
 const { state } = useCore()
-const composer = inject(effectComposerInjectionKey) // TODO inject type
+
+const composer = inject(effectComposerInjectionKey)
 const pass = shallowRef<EffectPass | null>(null)
 const effect = shallowRef<OutlineEffect | null>(null)
 
-const normalizeColor = (value: Color | Array<number> | string | number | ColorRepresentation) => {
-  //TODO import from core (after exporting it from there first 😊)
-  if (value instanceof Color) return value
-  if (Array.isArray(value)) return new Color(...value)
-
-  return new Color(value as ColorRepresentation)
-}
-
 const colorToNumber = (color: TresColor | undefined) =>
   color !== undefined ? normalizeColor(color).getHex() : undefined