chore: removal of default prop values (#163)

* chore: removed prop defaults for scanline effect, improved blendMode watcher

* - removed defaults from chromatic aberration effect
- added workaround

* remove default prop values from HueSaturationPmndrs component

* chore: removed default prop values for NoisePmndrs component

* chore: removed default prop values for VignettePmndrs component

Author: Tinoooo

src/core/pmndrs/ChromaticAberrationPmndrs.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { BlendFunction } from 'postprocessing'
 import { ChromaticAberrationEffect } from 'postprocessing'
-import { Vector2 } from 'three'
 import { makePropWatchers } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
+import type { Vector2 } from 'three'
+import type { BlendFunction } from 'postprocessing'
 
 export interface ChromaticAberrationPmndrsProps {
   /**
@@ -30,13 +30,21 @@ export interface ChromaticAberrationPmndrsProps {
 const props = withDefaults(
   defineProps<ChromaticAberrationPmndrsProps>(),
   {
-    offset: () => new Vector2(0.01, 0.01),
-    radialModulation: false,
-    modulationOffset: 0.15,
+    radialModulation: undefined,
   },
 )
 
-const { pass, effect } = useEffectPmndrs(() => new ChromaticAberrationEffect(props), props)
+const plainEffect = new ChromaticAberrationEffect()
+
+const { pass, effect } = useEffectPmndrs(() => new ChromaticAberrationEffect({
+  ...props,
+  // Unfortunately, these defaults must be set this way as the type in postprocessing is not correct.
+  // The arguments are optional in the actual constructor, but not in the type.
+  radialModulation: props.radialModulation ?? plainEffect.radialModulation,
+  modulationOffset: props.modulationOffset ?? plainEffect.modulationOffset,
+}), props)
+
+plainEffect.dispose()
 
 defineExpose({ pass, effect })
 

src/core/pmndrs/HueSaturationPmndrs.vue

@@ -23,13 +23,7 @@ export interface HueSaturationPmndrsProps {
   blendFunction?: BlendFunction
 }
 
-const props = withDefaults(
-  defineProps<HueSaturationPmndrsProps>(),
-  {
-    saturation: 0.0,
-    hue: 0.0,
-  },
-)
+const props = defineProps<HueSaturationPmndrsProps>()
 
 const { pass, effect } = useEffectPmndrs(() => new HueSaturationEffect(props), props)
 

src/core/pmndrs/NoisePmndrs.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { useLoop } from '@tresjs/core'
-import { BlendFunction, NoiseEffect } from 'postprocessing'
+import type { BlendFunction } from 'postprocessing'
+import { NoiseEffect } from 'postprocessing'
 import { omit } from '../../util/object'
 import { makePropWatchersUsingAllProps } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
@@ -16,8 +17,7 @@ export interface NoisePmndrsProps {
 
 <script lang="ts" setup>
 const props = withDefaults(defineProps<NoisePmndrsProps>(), {
-  premultiply: false,
-  blendFunction: BlendFunction.SCREEN,
+  premultiply: undefined,
 })
 
 const { pass, effect } = useEffectPmndrs(() => new NoiseEffect(props), props)

src/core/pmndrs/ScanlinePmndrs.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { watch } from 'vue'
 import type { BlendFunction } from 'postprocessing'
 import { ScanlineEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
@@ -26,14 +27,7 @@ export interface ScanlinePmndrsProps {
   opacity?: number
 }
 
-const props = withDefaults(
-  defineProps<ScanlinePmndrsProps>(),
-  {
-    density: 1.25,
-    opacity: 1.0,
-    scrollSpeed: 0.0,
-  },
-)
+const props = defineProps<ScanlinePmndrsProps>()
 
 const { pass, effect } = useEffectPmndrs(() => new ScanlineEffect(props), props)
 
@@ -42,11 +36,27 @@ defineExpose({ pass, effect })
 makePropWatchers(
   [
     [() => props.blendFunction, 'blendMode.blendFunction'],
-    [() => props.opacity, 'blendMode.opacity.value'],
     [() => props.density, 'density'],
     [() => props.scrollSpeed, 'scrollSpeed'],
   ],
   effect,
   () => new ScanlineEffect(),
 )
+
+watch(
+  [() => props.opacity],
+  () => {
+    if (props.opacity !== undefined) {
+      effect.value?.blendMode.setOpacity(props.opacity)
+    }
+    else {
+      const plainEffect = new ScanlineEffect()
+      effect.value?.blendMode.setOpacity(plainEffect.blendMode.getOpacity())
+      plainEffect.dispose()
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 </script>

src/core/pmndrs/VignettePmndrs.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { BlendFunction, VignetteEffect, VignetteTechnique } from 'postprocessing'
+import type { BlendFunction, VignetteTechnique } from 'postprocessing'
+import { VignetteEffect } from 'postprocessing'
 import { omit } from '../../util/object'
 import { makePropWatchersUsingAllProps } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
@@ -10,18 +11,13 @@ export interface VignettePmndrsProps {
    */
   technique?: VignetteTechnique
   blendFunction?: BlendFunction
-  offset: number
-  darkness: number
+  offset?: number
+  darkness?: number
 }
 </script>
 
 <script lang="ts" setup>
-const props = withDefaults(defineProps<VignettePmndrsProps>(), {
-  technique: VignetteTechnique.DEFAULT,
-  blendFunction: BlendFunction.NORMAL,
-  offset: 0.5,
-  darkness: 0.5,
-})
+const props = defineProps<VignettePmndrsProps>()
 
 const { pass, effect } = useEffectPmndrs(() => new VignetteEffect(props), props)
 defineExpose({ pass, effect })