feat: add tonemapping effect #148
Conversation
| @@ -53,6 +53,7 @@ export default defineConfig({ | |||
| { text: 'Glitch', link: '/guide/pmndrs/glitch' }, | |||
| { text: 'Noise', link: '/guide/pmndrs/noise' }, | |||
| { text: 'Outline', link: '/guide/pmndrs/outline' }, | |||
| { text: 'ToneMapping', link: '/guide/pmndrs/tonemapping' }, | |||
There was a problem hiding this comment.
| { text: 'ToneMapping', link: '/guide/pmndrs/tonemapping' }, | |
| { text: 'Tone Mapping', link: '/guide/pmndrs/tonemapping' }, |
There was a problem hiding this comment.
suggestion: I suggest calling this file tone-mapping.md to be uniform with the others (depth-of-field.md for example)
| const props = withDefaults( | ||
| defineProps<ToneMappingProps>(), | ||
| { | ||
| mode: ToneMappingMode.AGX, |
There was a problem hiding this comment.
suggestion: We set defaults only in very rare cases to minimize maintenance effort when postprocessing changes the internals of their effects. I suggest omitting these.
| [() => props.resolution, 'resolution'], | ||
| [() => props.averageLuminance, 'averageLuminance'], | ||
| [() => props.middleGrey, 'middleGrey'], | ||
| [() => props.minLuminance, 'minLuminance'], |
There was a problem hiding this comment.
suggestion: I think this has to be like so:
| [() => props.minLuminance, 'minLuminance'], | |
| [() => props.minLuminance, 'adaptiveLuminanceMaterial.minLuminance'], |
minLuminance is not a property of effect.value. These paths are used to update the effect when the props change. So we need the exact location of the property.
| watchEffect(() => { | ||
| if (!effect.value) { return } | ||
|
|
||
| effect.value.blendMode.blendFunction = Number(props.blendFunction) | ||
| }) | ||
|
|
||
| makePropWatchers( | ||
| [ | ||
| [() => props.mode, 'mode'], |
There was a problem hiding this comment.
suggestion: You can omit the seperate watcher like so:
| watchEffect(() => { | |
| if (!effect.value) { return } | |
| effect.value.blendMode.blendFunction = Number(props.blendFunction) | |
| }) | |
| makePropWatchers( | |
| [ | |
| [() => props.mode, 'mode'], | |
| makePropWatchers( | |
| [ | |
| [() => props.blendFunction, 'blendMode.blendFunction'], | |
| [() => props.mode, 'mode'], |
|
|
||
| The `<ToneMapping>` component is easy to set up and comes with multiple tone mapping modes to suit different visual requirements. Below is an example of how to use it in a Vue application. | ||
|
|
||
| ```vue{2,4,7-8,32-36} |
There was a problem hiding this comment.
suggestion: While I like to have a full example on the page, I think it is better to stay uniform with the other effects and only show the usage.
This component introduces the
ToneMappingeffect, which provides an abstraction for various tone mapping algorithms from thepmndrs/postprocessingpackage. The<ToneMapping>effect is specifically designed to improve the visual rendering of HDR content by mapping high-range brightness values to a displayable range, thus enhancing luminance and color balance in the scene.EffectComposeris added by applying tone mapping manually as an effect.<EffectComposer>pipeline.For more details, see ToneMapping on pmndrs/postprocessing.
Local Playground —
pnpm run playgroundLocal Documentation —
pnpm run docs:dev@alvarosabu @Tinoooo