Hue & Saturation
Demo code
vue
<script setup lang="ts">
import { Environment, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { EffectComposerPmndrs, HueSaturationPmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'
import { NoToneMapping } from 'three'
import '@tresjs/leches/styles'
const gl = {
toneMapping: NoToneMapping,
}
const glComposer = {
multisampling: 4,
}
const { saturation, hue, blendFunction } = useControls({
hue: { value: -Math.PI, min: -Math.PI, max: Math.PI, step: 0.001 },
saturation: { value: 1, min: -1, max: 1, step: 0.001 },
blendFunction: {
options: Object.keys(BlendFunction).map(key => ({
text: key,
value: BlendFunction[key as keyof typeof BlendFunction],
})),
value: BlendFunction.SRC,
},
})
</script>
<template>
<div class="aspect-16/9">
<TresCanvas
v-bind="gl"
>
<TresPerspectiveCamera
:position="[5, 5, 5]"
:look-at="[0, 0, 0]"
/>
<OrbitControls auto-rotate />
<TresMesh :position="[0, 1, 0]">
<TresBoxGeometry :args="[2, 2, 2]" />
<TresMeshPhysicalMaterial color="white" />
</TresMesh>
<Suspense>
<Environment background :blur=".25" preset="modern" />
</Suspense>
<Suspense>
<EffectComposerPmndrs v-bind="glComposer">
<HueSaturationPmndrs :blendFunction="Number(blendFunction)" :hue="hue" :saturation="saturation" />
</EffectComposerPmndrs>
</Suspense>
</TresCanvas>
</div>
<TresLeches :float="false" />
</template>
The HueSaturation
effect is part of the postprocessing
package. It allows you to adjust the hue and saturation of your scene, providing flexibility for color grading and artistic effects.
Usage
The <HueSaturationPmndrs>
component is straightforward to use and provides customizable options to fine-tune the hue and saturation of your visuals.
vue
<script setup lang="ts">
import { EffectComposerPmndrs, HueSaturationPmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'
import { NoToneMapping } from 'three'
const gl = {
clearColor: '#00ff00',
toneMapping: NoToneMapping,
}
const effectProps = {
saturation: 1,
hue: -Math.PI,
blendFunction: BlendFunction.SRC,
}
</script>
<template>
<TresCanvas v-bind="gl">
<TresPerspectiveCamera :position="[5, 5, 5]" />
<Suspense>
<EffectComposerPmndrs>
<HueSaturationPmndrs v-bind="effectProps" />
</EffectComposerPmndrs>
</Suspense>
</TresCanvas>
</template>
Props
Prop | Description | Default |
---|---|---|
saturation | The saturation adjustment. A value of 0.0 results in grayscale, while 1.0 leaves saturation unchanged. Range: [0.0, 1.0] . | 0.0 |
hue | The hue adjustment in radians. Values range from [-π, π] (or [0, 2π] for a full rotation). | 0.0 |
blendFunction | Defines how the effect blends with the original scene. See the BlendFunction options. | BlendFunction.SRC |
Further Reading
For more details, see the HueSaturation documentation.