Depth of Field

Depth of field is an optical effect employed in photography and cinematography to replicate the natural behavior of real-world cameras. When capturing an image or scene with a real camera, it's crucial to understand that only objects at a particular distance from the camera lens will appear in crisp, clear focus. Objects closer or further away from this specific point gradually become progressively blurry or out of focus.

This photographic technique allows photographers and filmmakers to draw attention to specific subjects or areas within a composition while creatively blurring or softening the background or foreground. Depth of field is a powerful tool for storytelling and visual aesthetics, enabling artists to control the viewer's gaze and emphasize narrative elements by manipulating focus and blur to their advantage.

Usage

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

<template>
  <EffectComposer>
    <DepthOfField />
  </EffectComposer>
</template>

Props

Prop	Description	Default
blendFunction	The blend function of this effect. This prop is not reactive.	BlendFunction.SCREEN
worldFocusDistance	The focus distance in world units.	0.3
worldFocusRange	The focus range in world units.	depends on camera
focusDistance	The normalized focus distance. Range is [0.0, 1.0].	depends on camera
focusRange	The focus range. Range is [0.0, 1.0].	0.1
bokehScale	The scale of the bokeh blur.	1.0

Further Reading

see postprocessing docs