Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: removal of default prop values #163

Merged
merged 8 commits into from
Jan 12, 2025
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 {
/**
@@ -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 })

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

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'
@@ -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
Contributor 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)
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'
@@ -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>
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'
@@ -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 })