Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add chromatic aberration * add chromatic aberration * add scanline effect * add scanline effect * revert outlineDemo deleted by mistake * Update playground/src/pages/postprocessing/scanline.vue --------- Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>
- Loading branch information
1 parent
08b97bb
commit f3da309
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,69 @@ | ||
| <script setup lang="ts"> | ||
| import { Environment, Levioso, OrbitControls, Ring, Sphere, Stars } from '@tresjs/cientos' | ||
| import { TresCanvas } from '@tresjs/core' | ||
| import { TresLeches, useControls } from '@tresjs/leches' | ||
| import { DoubleSide, MathUtils, NoToneMapping } from 'three' | ||
| import { BlendFunction } from 'postprocessing' | ||
| import { EffectComposerPmndrs, ScanlinePmndrs } from '@tresjs/post-processing' | ||
| import '@tresjs/leches/styles' | ||
| const gl = { | ||
| clearColor: '#000000', | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| } | ||
| const { blendFunction, opacity, density, scrollSpeed } = useControls({ | ||
| density: { value: 1.15, step: 0.001, max: 2 }, | ||
| opacity: { value: 0.65, step: 0.1, min: 0, max: 1 }, | ||
| scrollSpeed: { value: 0.05, step: 0.01, min: 0, max: 2 }, | ||
| blendFunction: { | ||
| options: Object.keys(BlendFunction).map(key => ({ | ||
| text: key, | ||
| value: BlendFunction[key], | ||
| })), | ||
| value: BlendFunction.HARD_MIX, | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresLeches style="left: initial;right:10px; top:10px;" /> | ||
|
|
||
| <TresCanvas | ||
| v-bind="gl" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[6.5, 3, 6.5]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <OrbitControls auto-rotate :auto-rotate-speed=".5" /> | ||
|
|
||
| <Suspense> | ||
| <Environment :blur="1" preset="snow" /> | ||
| </Suspense> | ||
|
|
||
| <TresAmbientLight /> | ||
|
|
||
| <TresGroup :rotation-y="MathUtils.degToRad(5)" :rotation-x="MathUtils.degToRad(100)"> | ||
| <Sphere :args="[2, 32, 16]"> | ||
| <TresMeshPhysicalMaterial color="#FC7BAC" :side="DoubleSide" :transmission=".5" /> | ||
| </Sphere> | ||
|
|
||
| <Levioso :speed="2.5" :rotationFactor="1" :floatFactor=".5"> | ||
| <Ring :args="[4.25, 2.5, 32]" :scale-y="-1" :position-z="-.25"> | ||
| <TresMeshPhysicalMaterial color="#ffffff" :side="DoubleSide" :transmission=".25" /> | ||
| </Ring> | ||
| </Levioso> | ||
| </TresGroup> | ||
|
|
||
| <Stars /> | ||
|
|
||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ScanlinePmndrs :density="density.value" :opacity="opacity.value" :scrollSpeed="scrollSpeed.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,62 @@ | ||
| # Scanline | ||
|
|
||
| <DocsDemo> | ||
| <ScanlineDemo /> | ||
| </DocsDemo> | ||
|
|
||
| The `Scanline` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ScanlineEffect.js~ScanlineEffect.html) package. It simulates scanlines reminiscent of old CRT displays, creating a nostalgic or stylized visual effect for your scene. This effect can enhance the retro aesthetic of your project or add a unique visual touch. | ||
|
|
||
| ## Usage | ||
|
|
||
| The `<ScanlinePmndrs>` component is easy to use and provides customizable options to achieve the desired visual appearance. | ||
|
|
||
| ```vue{2,10-15,27-33} | ||
| <script setup lang="ts"> | ||
| import { EffectComposerPmndrs, ScanlinePmndrs } from '@tresjs/post-processing/pmndrs' | ||
| import { BlendFunction } from 'postprocessing' | ||
| const gl = { | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| } | ||
| const effectProps = { | ||
| blendFunction: BlendFunction.HARD_MIX, | ||
| density: 1.25, | ||
| opacity: 0.65, | ||
| scrollSpeed: 0.05, | ||
| } | ||
| </script> | ||
| <template> | ||
| <TresCanvas | ||
| v-bind="gl" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[5, 5, 5]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ScanlinePmndrs | ||
| v-bind="effectProps" | ||
| /> | ||
| </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.OVERLAY` | | ||
| | density | The density of the scanlines. Higher values increase the frequency of lines. | `1.25` | | ||
| | opacity | The opacity of the scanlines. Controls the transparency of the effect. | `1.0` | | ||
| | scrollSpeed | The speed at which the scanlines scroll vertically. When set to `0`, the scanlines remain static. Any non-zero value animates the scanlines vertically. | `0.0` | | ||
|
|
||
| ## Further Reading | ||
|
|
||
| See [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ScanlineEffect.js~ScanlineEffect.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,63 @@ | ||
| <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 { EffectComposerPmndrs, ScanlinePmndrs } from '@tresjs/post-processing' | ||
| import '@tresjs/leches/styles' | ||
| const gl = { | ||
| clearColor: '#4f4f4f', | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| envMapIntensity: 10, | ||
| } | ||
| const { blendFunction, opacity, density, scrollSpeed } = useControls({ | ||
| density: { value: 1.15, step: 0.001, max: 2 }, | ||
| opacity: { value: 1, step: 0.1, min: 0, max: 1 }, | ||
| scrollSpeed: { value: 0.05, step: 0.01, min: 0, max: 2 }, | ||
| blendFunction: { | ||
| options: Object.keys(BlendFunction).map(key => ({ | ||
| text: key, | ||
| value: BlendFunction[key], | ||
| })), | ||
| value: BlendFunction.OVERLAY, | ||
| }, | ||
| }) | ||
| </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]" /> | ||
| <TresMeshStandardMaterial color="white" :roughness="1" :metalness="1" /> | ||
| </TresMesh> | ||
|
|
||
| <TresDirectionalLight color="white" /> | ||
|
|
||
| <ContactShadows | ||
| :opacity="1" | ||
| :position-y="-.5" | ||
| /> | ||
|
|
||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ScanlinePmndrs :density="density.value" :opacity="opacity.value" :scrollSpeed="scrollSpeed.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,52 @@ | ||
| <script lang="ts" setup> | ||
| import type { BlendFunction } from 'postprocessing' | ||
| import { ScanlineEffect } from 'postprocessing' | ||
| import { makePropWatchers } from '../../util/prop' | ||
| import { useEffectPmndrs } from './composables/useEffectPmndrs' | ||
| export interface ScanlinePmndrsProps { | ||
| /** | ||
| * The blend function. | ||
| */ | ||
| blendFunction?: BlendFunction | ||
| /** | ||
| * The density of the scanlines. | ||
| */ | ||
| density?: number | ||
| /** | ||
| * The density of the scanlines. | ||
| */ | ||
| scrollSpeed?: number | ||
| /** | ||
| * The opacity of the scanlines. | ||
| */ | ||
| opacity?: number | ||
| } | ||
| const props = withDefaults( | ||
| defineProps<ScanlinePmndrsProps>(), | ||
| { | ||
| density: 1.25, | ||
| opacity: 1.0, | ||
| scrollSpeed: 0.0, | ||
| }, | ||
| ) | ||
| const { pass, effect } = useEffectPmndrs(() => new ScanlineEffect(props), props) | ||
| defineExpose({ pass, effect }) | ||
| makePropWatchers( | ||
| [ | ||
| [() => props.blendFunction, 'blendMode.blendFunction'], | ||
| [() => props.opacity, 'blendMode.opacity.value'], | ||
| [() => props.density, 'density'], | ||
| [() => props.scrollSpeed, 'scrollSpeed'], | ||
| ], | ||
| effect, | ||
| () => new ScanlineEffect(), | ||
| ) | ||
| </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