Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add chromatic aberration effect (#149)
* add chromatic aberration * add chromatic aberration * improve doc and demo * fix <suspense> doc * revert outlineDemo deleted by mistake * update for package v2 --------- Co-authored-by: Alvaro Saburido <[email protected]>
- Loading branch information
1 parent
f5a699f
commit 8fc0321
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <script setup lang="ts"> | ||
| import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos' | ||
| import { TresCanvas } from '@tresjs/core' | ||
| import { TresLeches, useControls } from '@tresjs/leches' | ||
| import { NoToneMapping, Vector2 } from 'three' | ||
| import { shallowRef, watchEffect } from 'vue' | ||
| import { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing' | ||
| import '@tresjs/leches/styles' | ||
| const gl = { | ||
| clearColor: '#ffffff', | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| } | ||
| const chromaticAberrationRef = shallowRef(null) | ||
| const { offsetX, offsetY, radialModulation, modulationOffset } = useControls({ | ||
| offsetX: { value: 0.070, step: 0.001, max: 0.5 }, | ||
| offsetY: { value: 0.070, step: 0.001, max: 0.5 }, | ||
| radialModulation: true, | ||
| modulationOffset: { value: 0, step: 0.01 }, | ||
| }) | ||
| watchEffect(() => { | ||
| modulationOffset.value.visible = radialModulation.value.value | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresLeches style="left: initial;right:10px; top:10px;" /> | ||
|
|
||
| <TresCanvas | ||
| v-bind="gl" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[5, 5, 5]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <OrbitControls auto-rotate /> | ||
|
|
||
| <template | ||
| v-for="i in 4" | ||
| :key="i" | ||
| > | ||
| <TresMesh | ||
| :position="[((i - 1) - (4 - 1) / 2) * 1.5, 0, 0]" | ||
| > | ||
| <TresBoxGeometry | ||
| :width="4" | ||
| :height="4" | ||
| :depth="4" | ||
| /> | ||
| <TresMeshStandardMaterial color="#1C1C1E" /> | ||
| </TresMesh> | ||
| </template> | ||
|
|
||
| <TresAmbientLight color="#ffffff" /> | ||
|
|
||
| <TresDirectionalLight /> | ||
|
|
||
| <ContactShadows | ||
| :opacity="1" | ||
| :position-y="-.5" | ||
| :scale="20" | ||
| :blur=".85" | ||
| /> | ||
|
|
||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX.value, offsetY.value)" :radial-modulation="radialModulation.value" :modulation-offset="modulationOffset.value" /> | ||
| </EffectComposerPmndrs> | ||
| </Suspense> | ||
|
|
||
| <Suspense> | ||
| <Environment :intensity="2" :blur="0" preset="snow" /> | ||
| </Suspense> | ||
| </TresCanvas> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| # Chromatic Aberration | ||
|
|
||
| <DocsDemo> | ||
| <ChromaticAberrationDemo /> | ||
| </DocsDemo> | ||
|
|
||
| The `ChromaticAberration` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ChromaticAberrationEffect.js~ChromaticAberrationEffect.html) package. It simulates the dispersion of light as it passes through a lens, creating subtle or dramatic color fringing effects at the edges of objects. This effect can enhance the visual appeal of your scene by adding a realistic lens effect or a stylized touch. | ||
|
|
||
| ## Usage | ||
|
|
||
| The `<ChromaticAberrationPmndrs>` component is easy to use and provides customizable options to suit different visual styles. | ||
|
|
||
| ```vue{2,38-46} | ||
| <script setup lang="ts"> | ||
| import { EffectComposerPmndrs, ChromaticAberrationPmndrs } from '@tresjs/post-processing/pmndrs' | ||
| import { Vector2 } from 'three' | ||
| const gl = { | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| } | ||
| const offset = new Vector2(0.07, 0.07) | ||
| </script> | ||
| <template> | ||
| <TresCanvas | ||
| v-bind="gl" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[5, 5, 5]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <template | ||
| v-for="i in 4" | ||
| :key="i" | ||
| > | ||
| <TresMesh | ||
| :position="[((i - 1) - (4 - 1) / 2) * 1.5, 0, 0]" | ||
| > | ||
| <TresBoxGeometry | ||
| :width="4" | ||
| :height="4" | ||
| :depth="4" | ||
| /> | ||
| <TresMeshStandardMaterial color="#1C1C1E" /> | ||
| </TresMesh> | ||
| </template> | ||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ChromaticAberrationPmndrs | ||
| :offset | ||
| radial-modulation | ||
| :modulation-offset="0" | ||
| /> | ||
| </EffectComposerPmndrs> | ||
| </Suspense> | ||
| </TresCanvas> | ||
| </template> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| | Prop | Description | Default | | ||
| | ----------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------- | | ||
| | blendFunction | Defines the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) used for the effect. | `BlendFunction.SRC` | | ||
| | offset | The color offset vector determining the intensity and direction of chromatic aberration. | `Vector2(0.01, 0.01)` | | ||
| | radialModulation | Enables radial modulation to vary the effect intensity based on distance from the center. | `false` | | ||
| | modulationOffset | Specifies the modulation offset when `radialModulation` is **enabled**. | `0.15` | | ||
|
|
||
| ::: info | ||
| The `modulationOffset` property is functional only when `radialModulation` is enabled. | ||
| ::: | ||
|
|
||
| ## Further Reading | ||
| see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ToneMappingEffect.js~ToneMappingEffect.html) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <script setup lang="ts"> | ||
| import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos' | ||
| import { TresCanvas } from '@tresjs/core' | ||
| import { TresLeches, useControls } from '@tresjs/leches' | ||
| import { NoToneMapping, Vector2 } from 'three' | ||
| import { watchEffect } from 'vue' | ||
| import { BlendFunction } from 'postprocessing' | ||
| import { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing' | ||
| import '@tresjs/leches/styles' | ||
| const gl = { | ||
| clearColor: '#ffffff', | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| envMapIntensity: 10, | ||
| } | ||
| const { offsetX, offsetY, radialModulation, modulationOffset, blendFunction } = useControls({ | ||
| offsetX: { value: 0.085, step: 0.001, max: 0.5 }, | ||
| offsetY: { value: 0.0, step: 0.001, max: 0.5 }, | ||
| radialModulation: false, | ||
| modulationOffset: { value: 0, step: 0.01 }, | ||
| blendFunction: { | ||
| options: Object.keys(BlendFunction).map(key => ({ | ||
| text: key, | ||
| value: BlendFunction[key], | ||
| })), | ||
| value: BlendFunction.SRC, | ||
| }, | ||
| }) | ||
| watchEffect(() => { | ||
| modulationOffset.value.visible = radialModulation.value.value | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresLeches /> | ||
|
|
||
| <TresCanvas | ||
| v-bind="gl" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[5, 5, 5]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <OrbitControls auto-rotate /> | ||
|
|
||
| <TresMesh :position="[0, .5, 0]"> | ||
| <TresBoxGeometry :args="[2, 2, 2]" /> | ||
| <TresMeshPhysicalMaterial color="#82DBC5" :roughness=".25" /> | ||
| </TresMesh> | ||
|
|
||
| <ContactShadows | ||
| :opacity="1" | ||
| :position-y="-.5" | ||
| /> | ||
|
|
||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ChromaticAberrationPmndrs :offset="new Vector2(offsetX.value, offsetY.value)" :radial-modulation="radialModulation.value" :modulation-offset="modulationOffset.value" :blendFunction="Number(blendFunction.value)" /> | ||
| </EffectComposerPmndrs> | ||
| </Suspense> | ||
| </TresCanvas> | ||
| </template> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <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' | ||
| export interface ChromaticAberrationPmndrsProps { | ||
| /** | ||
| * The blend function. | ||
| */ | ||
| blendFunction?: BlendFunction | ||
| /** | ||
| * The color offset. | ||
| */ | ||
| offset?: Vector2 | ||
| /** | ||
| * Whether the effect should be modulated with a radial gradient. | ||
| */ | ||
| radialModulation?: boolean | ||
| /** | ||
| * The modulation offset, applicable if radial modulation is enabled. | ||
| */ | ||
| modulationOffset?: number | ||
| } | ||
| const props = withDefaults( | ||
| defineProps<ChromaticAberrationPmndrsProps>(), | ||
| { | ||
| offset: () => new Vector2(0.01, 0.01), | ||
| radialModulation: false, | ||
| modulationOffset: 0.15, | ||
| }, | ||
| ) | ||
| const { pass, effect } = useEffectPmndrs(() => new ChromaticAberrationEffect(props), props) | ||
| defineExpose({ pass, effect }) | ||
| makePropWatchers( | ||
| [ | ||
| [() => props.blendFunction, 'blendMode.blendFunction'], | ||
| [() => props.offset, 'offset'], | ||
| [() => props.radialModulation, 'radialModulation'], | ||
| [() => props.modulationOffset, 'modulationOffset'], | ||
| ], | ||
| effect, | ||
| () => new ChromaticAberrationEffect(), | ||
| ) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters