ToneMapping

A tone mapping effect.

import { ToneMapping } from '@react-three/postprocessing'
import { ToneMappingMode } from 'postprocessing'

return (
  <ToneMapping
    mode={ToneMappingMode.ACES_FILMIC} // tone mapping mode
  />
)

OR

import { ToneMapping } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <ToneMapping
    blendFunction={BlendFunction.NORMAL} // blend mode
    adaptive={true} // toggle adaptive luminance map usage
    resolution={256} // texture resolution of the luminance map
    middleGrey={0.6} // middle grey factor
    maxLuminance={16.0} // maximum luminance
    averageLuminance={1.0} // average luminance
    adaptationRate={1.0} // luminance adaptation rate
  />
)

Example

ToneMapping demo

Props

NameTypeDefaultDescription
modeToneMappingModeToneMappingMode.AGXThe tone mapping algorithm.
resolutionNumber256The resolution of the luminance texture. Must be a power of two.
adaptiveBooleanfalseDeprecated. Use mode instead.
blendFunctionBlendFunctionBlendFunction.SRCThe blend function of this effect.
middleGreyNumber0.6The middle grey factor.
maxLuminanceNumber4Deprecated. Use whitePoint instead.
minLuminanceNumber0.01The minimum luminance. Prevents very high exposure in dark scenes.
averageLuminanceNumber1The average luminance. Used for the non-adaptive Reinhard operator.
adaptationRateNumber1The luminance adaptation rate.
whitePointNumber4The white point.
opacityNumber1The opacity of this effect.