Skip to content
20 changes: 14 additions & 6 deletions src/core/pmndrs/ChromaticAberrationPmndrs.vue
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand All @@ -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 })

Expand Down
8 changes: 1 addition & 7 deletions src/core/pmndrs/HueSaturationPmndrs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
6 changes: 3 additions & 3 deletions src/core/pmndrs/NoisePmndrs.vue
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -16,8 +17,7 @@ export interface NoisePmndrsProps {

<script lang="ts" setup>
const props = withDefaults(defineProps<NoisePmndrsProps>(), {
premultiply: false,
blendFunction: BlendFunction.SCREEN,
premultiply: undefined,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, wouldn't be better to remove the withDefault all along?

Copy link
Member Author

@Tinoooo Tinoooo Jan 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have to set it to undefined to prevent Vue from casting it to boolean when the prop is not in use. Without this line, we have no chance to find out whether the prop was actively set or not.

})

const { pass, effect } = useEffectPmndrs(() => new NoiseEffect(props), props)
Expand Down
28 changes: 19 additions & 9 deletions src/core/pmndrs/ScanlinePmndrs.vue
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)

Expand All @@ -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>
14 changes: 5 additions & 9 deletions src/core/pmndrs/VignettePmndrs.vue
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 })
Expand Down
Loading