Skip to content

feat(postprocessing): re-instance effect on prop changes without set #193

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.

Sign up for GitHub

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

Merged
merged 19 commits into from
Mar 19, 2025
Merged

feat(postprocessing): re-instance effect on prop changes without set #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
1289ed7
feat(postprocessing): re-instance effect on prop changes without set
alvarosabu Mar 10, 2025
09d1cf0
Merge branch 'main' into bugfix/re-instanciate-to-non-setter-props
alvarosabu Mar 10, 2025
6b6a4d9
refactor(postprocessing): clean up outline example and improve type s…
alvarosabu Mar 10, 2025
05dfea1
Merge branch 'main' into bugfix/re-instanciate-to-non-setter-props
alvarosabu Mar 10, 2025
9a6563c
Refactored useEffectPmndrs to improve type safety and allow for index…
Mar 15, 2025
080866a
tiny beautification
Mar 15, 2025
e10719c
adjusted docs
Mar 15, 2025
2a60fda
made blend function reactive
Mar 15, 2025
0938e1b
made more blendfunction props reactive
Mar 15, 2025
e865006
made mode reactive in glitch effect
Mar 15, 2025
dc32708
made some props reactive
Mar 15, 2025
2a5e912
cleanup
Mar 15, 2025
632a535
cleanup
Mar 15, 2025
b5d522d
cleanup
Mar 15, 2025
15edfd1
made resolutions on outline effect reactive
Mar 15, 2025
0590db3
added resolutionScale prop and made it reactive in outline effect
Mar 15, 2025
c99409a
Enhanced useEffect to support dependency fields for effect recreation…
Mar 15, 2025
acd6ed0
updated docs
Mar 15, 2025
17f955a
Merge branch 'main' into bugfix/re-instanciate-to-non-setter-props
alvarosabu Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/guide/pmndrs/bloom.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'

| Prop | Description | Default |
| -------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `blendFunction` | The blend function of this effect. This prop is not reactive. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
| `blendFunction` | The blend function of this effect. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
| `intensity` | The intensity of the bloom effect. | `1` |
| `kernelSize` | The kernel size. | `KernelSize.LARGE` |
| `luminanceThreshold` | The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1]. | `0.9` |
| `luminanceSmoothing` | Controls the smoothness of the luminance threshold. Range is [0, 1]. | `0.025` |
| `mipMapBlur` | Enables mip map blur (UnrealBloom). This prop is not reactive. | `false` |
| `mipMapBlur` | Enables mip map blur (UnrealBloom). | `false` |

## Further Reading
see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html)
2 changes: 1 addition & 1 deletion docs/guide/pmndrs/depth-of-field.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { DepthOfFieldPmndrs, EffectComposerPmndrs } from '@tresjs/post-processin

| Prop | Description | Default |
| --------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `blendFunction` | The blend function of this effect. This prop is not reactive. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
| `blendFunction` | The blend function of this effect. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
| `worldFocusDistance` | The focus distance in world units. | 0.3 |
| `worldFocusRange` | The focus range in world units. | depends on camera |
| `focusDistance` | The normalized focus distance. Range is [0.0, 1.0]. | depends on camera |
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/pmndrs/glitch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'

| Prop | Description | Default |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `blendFunction` | The blend function of this effect. This prop is not reactive. | [BlendFunction.NORMAL](https://github.com/pmndrs/postprocessing/blob/3fbe7b770f826019933b1386d27ebc04315feb00/src/enums/BlendFunction.js#L36) |
| `blendFunction` | The blend function of this effect. | [BlendFunction.NORMAL](https://github.com/pmndrs/postprocessing/blob/3fbe7b770f826019933b1386d27ebc04315feb00/src/enums/BlendFunction.js#L36) |
| `delay` | The minimum and maximum delay between glitch activations in seconds. | `[1.5, 3.5]` |
| `duration` | The minimum and maximum duration of a glitch in seconds. | `[0.6, 1.0]` |
| `strength` | The strength of weak and strong glitches. | `[0.3, 1.0]` |
Expand All @@ -40,7 +40,7 @@ import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
| `columns` | The scale of the blocky glitch columns. | `0.05` |
| `chromaticAberrationOffset` | A chromatic aberration offset. If provided, the glitch effect will influence this offset. | `undefined` |
| `perturbationMap` | A perturbation map. If none is provided, a noise texture will be created. | `undefined` |
| `dtSize` | The size of the generated noise map. Will be ignored if a perturbation map is provided. This prop is not reactive. | `64` |
| `dtSize` | The size of the generated noise map. Will be ignored if a perturbation map is provided. | `64` |

## Further Reading
see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GlitchEffect.js~GlitchEffect.html)
2 changes: 1 addition & 1 deletion docs/guide/pmndrs/noise.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { BlendFunction } from 'postprocessing'

| Prop | Description | Default |
| -------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `blendFunction` | The blend function of this effect. This prop is not reactive. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
| `blendFunction` | The blend function of this effect. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
| `premultiply` | Indicates whether noise will be multiplied with the input colors prior to blending | `false` |

## Further Reading
Expand Down
10 changes: 5 additions & 5 deletions docs/guide/pmndrs/outline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
| xRay | Whether occluded parts of selected objects should be visible. | true |
| kernelSize | The blur kernel size. Use together with blur being true. | [KernelSize.VERY_SMALL](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/KernelSize.js) |
| pulseSpeed | The pulse speed. A value of zero disables the pulse effect. | 0.0 |
| resolutionX | The horizontal resolution. This prop is not reactive. | [Resolution.AUTO_SIZE](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/core/Resolution.js#L515) |
| resolutionY | The vertical resolution. This prop is not reactive. | [Resolution.AUTO_SIZE](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/core/Resolution.js#L515) |
| resolutionX | The horizontal resolution. | [Resolution.AUTO_SIZE](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/core/Resolution.js#L515) |
| resolutionY | The vertical resolution. | [Resolution.AUTO_SIZE](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/core/Resolution.js#L515) |
| edgeStrength | The edge strength. | 1.0 |
| patternScale | The pattern scale. | 1.0 |
| multisampling | The number of samples used for multisample antialiasing. Requires WebGL 2. | 0 |
| blendFunction | The blend function. Use `BlendFunction.ALPHA` for dark outlines. This prop is not reactive. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
| patternTexture | A pattern texture. This prop is not reactive. | null |
| resolutionScale | The resolution scale. This prop is not reactive. | 0.5 |
| blendFunction | The blend function. Use `BlendFunction.ALPHA` for dark outlines. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
| patternTexture | A pattern texture. | null |
| resolutionScale | The resolution scale. | 0.5 |
| hiddenEdgeColor | The color of hidden edges. | 0x22090a |
| visibleEdgeColor | The color of visible edges. | 0xffffff |

Expand Down
10 changes: 5 additions & 5 deletions docs/guide/pmndrs/vignette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ import { EffectComposerPmndrs, VignettePmndrs } from '@tresjs/post-processing'

## Props

| Prop | Description | Default |
| ------------- | ----------------------------------------------------------- | -------------------------- |
| Prop | Description | Default |
| ------------- | ------------------------------------------------------------ | -------------------------- |
| technique | Whether the noise should be multiplied with the input color. | VignetteTechnique.DEFAULT |
| blendFunction | The blend function to use. This prop is not reactive. | BlendFunction.NORMAL |
| offset | The offset value. | 0.5 |
| darkness | The darkness value. | 0.5 |
| blendFunction | The blend function to use. | BlendFunction.NORMAL |
| offset | The offset value. | 0.5 |
| darkness | The darkness value. | 0.5 |

## Further Reading
see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/VignetteEffect.js~VignetteEffect.html)
6 changes: 3 additions & 3 deletions docs/guide/three/glitch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ import { EffectComposer, Glitch } from '@tresjs/post-processing'

## Props

| Prop | Description | Default |
|---------|--------------------------------------------------------------------------------------------------------------------|---------|
| `dtSize` | The size of the generated noise map. Will be ignored if a perturbation map is provided. This prop is not reactive. | `64` |
| Prop | Description | Default |
|----------|-----------------------------------------------------------------------------------------|---------|
| `dtSize` | The size of the generated noise map. Will be ignored if a perturbation map is provided. | `64` |
| `goWild` | If true, the glitch effect will be more wild 🤪 | `false`

## Further Reading
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,11 @@
"preview": "vite preview",
"release": "release-it",
"lint": "eslint .",
"typecheck": "vue-tsc --noEmit",
"lint:fix": "eslint . --fix",
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
"docs:preview": "vitepress preview"
},
"peerDependencies": {
"@tresjs/core": ">=4.0",
Expand Down
71 changes: 58 additions & 13 deletions playground/src/pages/postprocessing/outline.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,10 @@ import { OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
import { KernelSize } from 'postprocessing'
import { NoToneMapping } from 'three'

import { ref } from 'vue'
import { BlendFunction, KernelSize } from 'postprocessing'
import { computed, ref, watch, watchEffect } from 'vue'
import '@tresjs/leches/styles'

const gl = {
clearColor: '#4ADE80',
toneMapping: NoToneMapping,
}

const glComposer = {
multisampling: 4,
}
Expand All @@ -26,7 +19,8 @@ const toggleMeshSelectionState = ({ object }: Intersection) => {
else { outlinedObjects.value = [...outlinedObjects.value, object] }
}

const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useControls({
const { clearColor, edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize, blendMode, resolutionX, resolutionY, resolutionScale } = useControls({
clearColor: '#4F4F4F',
edgeStrength: {
value: 2000,
min: 0,
Expand All @@ -39,28 +33,74 @@ const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useCont
max: 2,
step: 0.01,
},
visibleEdgeColor: '#ffffff',
blur: false,
visibleEdgeColor: '#FFFF00',
blur: true,
kernelSize: {
value: 3,
min: KernelSize.VERY_SMALL,
max: KernelSize.VERY_LARGE,
step: 1,
},
blendMode: {
value: BlendFunction.ADD,
options: Object.entries(BlendFunction).map(([key, value]) => ({ text: key, value })),
},
resolutionX: {
value: 1080,
min: 1,
max: 1080,
step: 1,
},
resolutionY: {
value: 1920,
min: 1,
max: 1920,
step: 1,
},
resolutionScale: {
value: 1,
min: 0,
max: 1,
step: 0.01,
},

})

const numericalBlendFunction = computed(() => {
return Number(blendMode.value)
})

const sphereRef = ref<Object3D>()
const outlineRef = ref<InstanceType<typeof OutlinePmndrs>>()

watchEffect(() => {
// eslint-disable-next-line no-console
console.log(outlineRef.value)
})

watch(sphereRef, (sphere) => {
outlinedObjects.value = [sphere]
})
</script>

<template>
<TresLeches />
<TresCanvas
v-bind="gl"
:clear-color="clearColor"
render-mode="on-demand"
>
<TresPerspectiveCamera
:position="[1, 3, 3]"
:look-at="[2, 2, 2]"
/>
<OrbitControls />
<TresMesh
ref="sphereRef"
:position="[0, 0, 2]"
>
<TresSphereGeometry :args="[1, 32, 32]" />
<TresMeshNormalMaterial />
</TresMesh>
<template
v-for="i in 5"
:key="i"
Expand All @@ -82,12 +122,17 @@ const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useCont
<Suspense>
<EffectComposerPmndrs v-bind="glComposer">
<OutlinePmndrs
ref="outlineRef"
:outlined-objects="outlinedObjects"
:blur="blur"
:edge-strength="edgeStrength"
:pulse-speed="pulseSpeed"
:visible-edge-color="visibleEdgeColor"
:kernel-size="kernelSize"
:blend-function="numericalBlendFunction"
:resolution-x="resolutionX"
:resolution-y="resolutionY"
:resolution-scale="resolutionScale"
/>
</EffectComposerPmndrs>
</Suspense>
Expand Down
Loading