Hue & Saturation

Demo code

<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.

<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]" />

    <!-- Your scene -->

    <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 HueSaturationEffect documentation.