Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* init color average * add color average component, doc, demo * final doc * fix code for reviews --------- Co-authored-by: Tino Koch <[email protected]>
- Loading branch information
1 parent
78b0bb7
commit 03f4986
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,92 @@ | ||
| <script setup lang="ts"> | ||
| import { Environment, OrbitControls } from '@tresjs/cientos' | ||
| import { TresCanvas } from '@tresjs/core' | ||
| import { TresLeches, useControls } from '@tresjs/leches' | ||
| import type { Mesh } from 'three' | ||
| import { NoToneMapping } from 'three' | ||
| import { BlendFunction } from 'postprocessing' | ||
| import { ColorAveragePmndrs, EffectComposerPmndrs } from '@tresjs/post-processing' | ||
| import { gsap } from 'gsap' | ||
| import { onUnmounted, ref, watch } from 'vue' | ||
| import '@tresjs/leches/styles' | ||
| const gl = { | ||
| clearColor: '#ffffff', | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| envMapIntensity: 10, | ||
| } | ||
| const ctx = gsap.context(() => {}) | ||
| const meshRef = ref<Mesh | null>(null) | ||
| const { blendFunction, opacity } = useControls({ | ||
| blendFunction: { | ||
| options: Object.keys(BlendFunction).map(key => ({ | ||
| text: key, | ||
| value: BlendFunction[key], | ||
| })), | ||
| value: BlendFunction.NORMAL, | ||
| }, | ||
| opacity: { | ||
| value: 1, | ||
| min: 0, | ||
| max: 1, | ||
| }, | ||
| }) | ||
| function onUpdateTimeline(e) { | ||
| const progress = 1 - e.progress() | ||
| opacity.value.value = progress | ||
| } | ||
| watch(meshRef, () => { | ||
| if (!meshRef.value) { return } | ||
| ctx.add(() => { | ||
| gsap.timeline({ | ||
| repeat: -1, | ||
| yoyo: true, | ||
| onUpdate() { | ||
| onUpdateTimeline(this) | ||
| }, | ||
| }) | ||
| .to(meshRef.value.position, { y: -3.5, duration: 2 }) | ||
| }) | ||
| }) | ||
| onUnmounted(() => { | ||
| ctx.revert() | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <TresLeches style="left: initial;right:10px; top:10px;" /> | ||
|
|
||
| <TresCanvas | ||
| v-bind="gl" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[5, 2, 15]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <OrbitControls auto-rotate /> | ||
|
|
||
| <TresMesh ref="meshRef" :position="[0, 3.5, 0]"> | ||
| <TresBoxGeometry :args="[2, 2, 2]" /> | ||
| <TresMeshPhysicalMaterial color="#8B0000" :roughness=".25" /> | ||
| </TresMesh> | ||
|
|
||
| <Suspense> | ||
| <Environment background preset="shangai" /> | ||
| </Suspense> | ||
|
|
||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ColorAveragePmndrs :blendFunction="Number(blendFunction.value)" :opacity="opacity.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,70 @@ | ||
| # Color Average | ||
|
|
||
| <DocsDemo> | ||
| <ColorAverageDemo /> | ||
| </DocsDemo> | ||
|
|
||
| The `ColorAverage` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.html) package. It averages the colors of the scene, creating a unique visual effect. This effect can be used to achieve a variety of artistic styles. | ||
|
|
||
| ## Usage | ||
|
|
||
| The `<ColorAveragePmndrs>` component is easy to use and provides customizable options to suit different visual styles. | ||
|
|
||
| ```vue{6,15-18,40-44} | ||
| <script setup lang="ts"> | ||
| import { Environment, OrbitControls } from '@tresjs/cientos' | ||
| import { TresCanvas } from '@tresjs/core' | ||
| import { NoToneMapping } from 'three' | ||
| import { BlendFunction } from 'postprocessing' | ||
| import { ColorAveragePmndrs, EffectComposerPmndrs } from '@tresjs/post-processing' | ||
| const gl = { | ||
| clearColor: '#ffffff', | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| envMapIntensity: 10, | ||
| } | ||
| const effectProps = reactive({ | ||
| blendFunction: BlendFunction.NORMAL, | ||
| opacity: 0.5 | ||
| }) | ||
| </script> | ||
| <template> | ||
| <TresCanvas | ||
| v-bind="gl" | ||
| > | ||
| <TresPerspectiveCamera | ||
| :position="[5, 2, 15]" | ||
| :look-at="[0, 0, 0]" | ||
| /> | ||
| <OrbitControls auto-rotate /> | ||
| <TresMesh :position="[0, 3.5, 0]"> | ||
| <TresBoxGeometry :args="[2, 2, 2]" /> | ||
| <TresMeshPhysicalMaterial color="#8B0000" :roughness=".25" /> | ||
| </TresMesh> | ||
| <Suspense> | ||
| <Environment background preset="shangai" /> | ||
| </Suspense> | ||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ColorAveragePmndrs 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.NORMAL` | | ||
| | opacity | Sets the opacity of the color average effect. | `1` | | ||
|
|
||
| ## Further Reading | ||
| For more details, see the [ColorAverage documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.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 } from 'three' | ||
| import { BlendFunction } from 'postprocessing' | ||
| import { ColorAveragePmndrs, EffectComposerPmndrs } from '@tresjs/post-processing' | ||
| import '@tresjs/leches/styles' | ||
| const gl = { | ||
| clearColor: '#ffffff', | ||
| toneMapping: NoToneMapping, | ||
| multisampling: 8, | ||
| envMapIntensity: 10, | ||
| } | ||
| const { blendFunction, opacity } = useControls({ | ||
| blendFunction: { | ||
| options: Object.keys(BlendFunction).map(key => ({ | ||
| text: key, | ||
| value: BlendFunction[key], | ||
| })), | ||
| value: BlendFunction.NORMAL, | ||
| }, | ||
| opacity: { | ||
| value: 1, | ||
| min: 0, | ||
| max: 1, | ||
| }, | ||
| }) | ||
| </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="#8B0000" :roughness=".25" /> | ||
| </TresMesh> | ||
|
|
||
| <ContactShadows | ||
| :opacity="1" | ||
| :position-y="-.5" | ||
| /> | ||
|
|
||
| <Suspense> | ||
| <Environment background preset="snow" /> | ||
| </Suspense> | ||
|
|
||
| <Suspense> | ||
| <EffectComposerPmndrs> | ||
| <ColorAveragePmndrs :blendFunction="Number(blendFunction.value)" :opacity="opacity.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,48 @@ | ||
| <script lang="ts" setup> | ||
| import type { BlendFunction } from 'postprocessing' | ||
| import { ColorAverageEffect } from 'postprocessing' | ||
| import { makePropWatcher, makePropWatchers } from '../../util/prop' | ||
| import { useEffectPmndrs } from './composables/useEffectPmndrs' | ||
| import { watch } from 'vue' | ||
| export interface ColorAveragePmndrsProps { | ||
| /** | ||
| * The blend function. | ||
| */ | ||
| blendFunction?: BlendFunction | ||
| /** | ||
| * The opacity of the color Average. | ||
| */ | ||
| opacity?: number | ||
| } | ||
| const props = defineProps<ColorAveragePmndrsProps>() | ||
| const { pass, effect } = useEffectPmndrs(() => new ColorAverageEffect(props.blendFunction), props) | ||
| defineExpose({ pass, effect }) | ||
| makePropWatcher( | ||
| () => props.blendFunction, | ||
| effect, | ||
| 'blendMode.blendFunction', | ||
| () => new ColorAverageEffect(), | ||
| ) | ||
| watch( | ||
| [effect, () => props.opacity], | ||
| () => { | ||
| if (!effect.value) { return } | ||
| if (props.opacity !== undefined) { | ||
| effect.value?.blendMode.setOpacity(props.opacity) | ||
| } | ||
| else { | ||
| const plainEffect = new ColorAverageEffect() | ||
| effect.value?.blendMode.setOpacity(plainEffect.blendMode.getOpacity()) | ||
| plainEffect.dispose() | ||
| } | ||
| }, | ||
| ) | ||
| </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