Brightness & Contrast

Demo code

<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 { BrightnessContrastPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'

import '@tresjs/leches/styles'

const gl = {
  clearColor: '#ffffff',
  toneMapping: NoToneMapping,
  multisampling: 8,
}

const { brightness, contrast, blendFunction } = useControls({
  brightness: { value: 0.25, step: 0.01, min: -1, max: 1 },
  contrast: { value: -0.5, step: 0.01, min: -1, max: 1 },
  blendFunction: {
    options: Object.keys(BlendFunction).map(key => ({
      text: key,
      value: BlendFunction[key],
    })),
    value: BlendFunction.SRC,
  },
})
</script>

<template>
  <div class="aspect-16/9">
    <TresCanvas
      v-bind="gl"
    >
      <TresPerspectiveCamera :position="[5, 5, 5]" />
      <OrbitControls auto-rotate />

      <TresMesh :position="[0, .5, 0]">
        <TresBoxGeometry :args="[2, 2, 2]" />
        <TresMeshPhysicalMaterial color="black" :roughness=".25" />
      </TresMesh>

      <ContactShadows
        :opacity="1"
        :position-y="-.5"
      />

      <Suspense>
        <Environment background preset="sunset" />
      </Suspense>

      <Suspense>
        <EffectComposerPmndrs>
          <BrightnessContrastPmndrs
            :brightness="brightness"
            :contrast="contrast"
            :blendFunction="Number(blendFunction)"
          />
        </EffectComposerPmndrs>
      </Suspense>
    </TresCanvas>
  </div>
  <TresLeches :float="false" />
</template>

The BrightnessContrast effect is part of the postprocessing package. It adjusts the brightness and contrast of your scene.

Usage

The <BrightnessContrastPmndrs> component is easy to use and provides customizable options to suit different visual styles.

<script setup lang="ts">
import { EffectComposerPmndrs, BrightnessContrastPmndrs } from '@tresjs/post-processing/pmndrs'

const gl = {
  toneMapping: NoToneMapping,
  multisampling: 8,
}

const effectProps = {
  brightness:0.25,
  contrast: -0.5,
  blendFunction: BlendFunction.SRC,
}
</script>

<template>
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera />

    <TresMesh :position="[0, .5, 0]">
      <TresBoxGeometry :args="[2, 2, 2]" />
      <TresMeshPhysicalMaterial color="black" :roughness=".25" />
    </TresMesh>

    <Suspense>
      <EffectComposerPmndrs>
        <BrightnessContrastPmndrs v-bind="effectProps" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>

Props

Prop	Description	Default
blendFunction	Defines how the effect blends with the original scene. See the BlendFunction options.	BlendFunction.SRC
brightness	The brightness factor, where 0 means no change. Range: [-1.0, 1.0]	0
contrast	The contrast factor, where 0 means no change. Range: [-1.0, 1.0]	0

Further Reading

For more details, see the BrightnessContrast documentation