React-three-fiber postprocessing

https://docs.pmnd.rs/react-postprocessing/introduction

three/postprocessing 는 React와 Three.js를 결합하여 화면 후처리 효과 를 쉽게 추가할 수 있도록 해주는 라이브러리입니다. 후처리 효과란, 실제 시점에서 보이지 않는 계산을 통해 그래픽을 보정하거나 보완하는 기법입니다. 예를 들어, 화면을 부드럽게 하거나 화면에 그림자를 추가하는 것이 후처리 효과입니다.

Bloom effect

Bloom effect 는 그래픽 효과 중 하나로, 실제 세계에서는 밝은 불꽃, 빛나는 물체 등이 반사하는 빛이 주변을 강하게 밝게 만드는 현상을 모방합니다. 이를 컴퓨터 그래픽에서는 그림자 맵을 이용하여 구현합니다. 즉, 이미지에서 밝은 부분을 추출하여 화면 전체를 밝게 하는 효과를 줍니다. 이러한 효과는 실제 세계에서 볼 수 있는 빛의 흐름과 빛의 희미함을 모방하여 그래픽을 더욱 생동감 있게 만들 수 있습니다.

import { Bloom } from '@react-three/postprocessing'
import { BlurPass, Resizer, KernelSize } from 'postprocessing'

return (
  <Bloom
    intensity={1.0} // The bloom intensity.
    blurPass={undefined} // A blur pass.
    width={Resizer.AUTO_SIZE} // render width
    height={Resizer.AUTO_SIZE} // render height
    kernelSize={KernelSize.LARGE} // blur kernel size
    luminanceThreshold={0.9} // luminance threshold. Raise this value to mask out darker elements in the scene.
    luminanceSmoothing={0.025} // smoothness of the luminance threshold. Range is [0, 1]
  />
)

• luminanceThreshold 란 그래픽 효과에서 밝기 임계값 을 의미합니다. 이 값을 높이면 씬에 있는 어두운 요소를 마스킹(숨기기) 할 수 있습니다. 예를 들어, Bloom effect 를 적용할때 그림자가 아닌 밝은 부분을 추출하는데 이때 threshold를 설정하여 어두운 부분은 추출하지 않도록 하는 것입니다.
• luminanceSmoothing threshold의 smooting은 그래픽 효과에서 밝기 임계값의 부드러움을 의미합니다. 범위는 [0, 1] 입니다.

BrightnessContrast

BrightnessContrast 함수는 화면의 밝기 와 대비 를 조절하는 후처리 효과를 제공합니다. 이 함수는 두 개의 인자를 사용합니다. brightness 는 화면의 밝기를 조절하는 값이며, contrast 는 화면의 대비를 조절하는 값입니다. 이를 이용하면 밝기를 조절하여 더욱 화면에 빛을 넣거나, 대비를 조절하여 더욱 선명한 화면을 만들 수 있습니다.

import { BrightnessContrast } from '@react-three/postprocessing'

return (
  <BrightnessContrast
    brightness={0} // brightness. min: -1, max: 1
    contrast={0} // contrast: min -1, max: 1
  />
)

ChromaticAberration

ChromaticAberration 는 카메라 선명도 에 대한 문제로, 빛의 광선이 굴절되면서 색상별로 다른 초점점을 갖는 현상을 의미합니다. 즉, 빛의 광선이 카메라 렌즈를 통과하면서 색상별로 초점이 달라져서, 이미지에서 색상별로 흐림 현상이 생기는 것입니다. 이러한 현상을 이용하여 더욱 생동감 있게 그래픽을 만들 수 있습니다.

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

return (
  <ChromaticAberration
    blendFunction={BlendFunction.NORMAL} // blend mode
    offset={[0.02, 0.002]} // color offset
  />
)

ColorAverage

ColorAverage 함수는 화면의 색상 평균값을 계산하는 후처리 효과를 제공합니다. 이 함수는 화면의 모든 픽셀을 순회하면서 각 색상의 값을 계산하여 평균을 구합니다. 이 함수를 사용하면 화면의 색상 평균값을 알아낼 수 있으며, 이 값을 이용하여 다른 효과를 적용할 수 있습니다. 예를들어, 이 값을 이용하여 색상을 조정하는 효과를 적용할 수 있습니다.

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

return (
  <ChromaticAberration
    blendFunction={BlendFunction.NORMAL} // blend mode
    offset={[0.02, 0.002]} // color offset
  />
)

DepthOfField

**DepthOfField 함수는 피사계심도 를 제공합니다. 이 효과는 실제 카메라와 비슷하게 그림자가 아닌 부분을 흐리게 하는 효과 를 만듭니다. 이러한 효과를 이용하면 그림자가 아닌 부분을 흐리게 하여 그래픽을 더욱 생동감 있게 만들 수 있습니다.

import { DepthOfField } from '@react-three/postprocessing'

return (
  <DepthOfField
    focusDistance={0} // where to focus
    focalLength={0.02} // focal length
    bokehScale={2} // bokeh size
  />
)

• focusDistance DOF효과에서 초점이 맞는 구역 (in-focus area)의 거리를 의미합니다. 이 값을 조절하면 초점이 맞는 구여의 거리를 설정할 수 있습니다. 즉, 어떤 거리에 있는 물체를 초점에 맞추어 보여줄 것인지 설정 할 수 있습니다. 이 값을 조절하면 초점이 맞는 구역의 거리를 설정할 수 있으며, 이 거리에서 멀어질수록 흐리게 되는 구역의 크기가 커지게 됩니다.
• focalLength DOF효과에서 카메라의 초점 길이 를 의미합니다. 이 값은 카메라 렌즈의 초점 길이를 나타내며, 이 값을 조절하면 초점의 거리를 설정할 수 있습니다.
• bokehScale DOF효과에서 흐리게 되는 구역 (out-of-focus area)의 크기를 의미합니다. Bokeh는 깊이 흐름 효과에서 흐리게 되는 구역을 의미하고, 흐리게 되는 구역의 크기를 bokeh size라고 합니다. 이 크기를 조절하면 흐리게 되는 구역의 크기를 조절할 수 있습니다.

Glitch

Glitch 함수는 기술적인 고장 혹은 오류 효과 를 제공합니다. 이 효과는 이미지나 비디오에 갑자기 나타나는 노이즈, 깨짐, 블록, 색상 변화 등의 효과를 적용합니다. 이 효과를 이용하면 더욱 생동감 있고 무시무시한 느낌을 줄 수 있습니다.

import { Glitch } from '@react-three/postprocessing'
import { GlitchMode } from 'postprocessing'

return (
  <Glitch
    delay={[1.5, 3.5]} // min and max glitch delay
    duration={[0.6, 1.0]} // min and max glitch duration
    strength={[0.3, 1.0]} // min and max glitch strength
    mode={GlitchMode.SPORADIC} // glitch mode
    active // turn on/off the effect (switches between "mode" prop and GlitchMode.DISABLED)
    ratio={0.85} // Threshold for strong glitches, 0 - no weak glitches, 1 - no strong glitches.
  />
)

• GlitchMode 는 Glich 효과의 종류를 의미합니다. 이 값을 설정하면 특정한 종류의 기술적인 고장 혹은 오류 효과를 적용할 수 있습니다.

GodRays

GodRays 함수는 일명 빛반사 효과를 적용하는 함수입니다. 이 효과는 일반적으로 햇빛이 희미한 환경에서 보이는 효과 를 말합니다. 예를 들어, 햇빛이 희미한 언 덕위에서 햇빛이 흘러내리는 효과나 가로등을 통해 햇빛이 흘러내리는 효과입니다. 이 함수는 일반적으로 밝은 조명과 흐린 환경 에서 효과를 더욱 생동감 있게 보여줄 수 있습니다.

import { GodRays } from '@react-three/postprocessing'

return (
  <GodRays
    sun={sunRef}
    blendFunction={BlendFunction.Screen} // The blend function of this effect.
    samples={60} // The number of samples per pixel.
    density={0.96} // The density of the light rays.
    decay={0.9} // An illumination decay factor.
    weight={0.4} // A light ray weight factor.
    exposure={0.6} // A constant attenuation coefficient.
    clampMax={1} // An upper bound for the saturation of the overall effect.
    width={Resizer.AUTO_SIZE} // Render width.
    height={Resizer.AUTO_SIZE} // Render height.
    kernelSize={KernelSize.SMALL} // The blur kernel size. Has no effect if blur is disabled.
    blur={true} // Whether the god rays should be blurred to reduce artifacts.
  />
)

Grid

Grid 함수는 그리드 효과 를 적용하는 함수입니다. 이 효과는 일반적으로 그리드 패턴을 통해 격자무늬를 보이는 효과를 말합니다. 이 효과는 이미지나 비디오에 격자무늬를 적용하여 기하학적 패턴을 보여줄 수 있습니다.

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

return (
  <Grid
    blendFunction={BlendFunction.OVERLAY} // blend mode
    scale={1.0} // grid pattern scale
    lineWidth={0.0} // grid pattern line width
    size={{ width, height }} // overrides the default pass width and height
  />
)

HueSaturation

HueSaturation 함수는 색조 와 채도 를 조절하는 함수입니다. 색조는 색의 성질을 의미하며 이를 조절하면 이미지 또는 비디오의 색감을 변경할 수 있습니다. 채도는 색의 선명도를 의미하며 이를 조절하면 이미지 또는 비디오의 채도를 변경할 수 있습니다.

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

return (
  <HueSaturation
    blendFunction={BlendFunction.NORMAL} // blend mode
    hue={0} // hue in radians
    saturation={0} // saturation in radians
  />
)

Noise

Noise 함수는 노이즈 효과 를 적용하는 함수입니다. 노이즈는 일반적으로 이미지나 비디오에 랜덤한 잡음을 추가하는 효과를 말합니다. 이 함수는 일반적으로 이미지나 비디오를 더욱 생동감있게 보여주거나, 노이즈를 이용한 효과를 추가하는데 사용될 수 있습니다.

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

return (
  <Noise
    premultiply // enables or disables noise premultiplication
    blendFunction={BlendFunction.ADD} // blend mode
  />
)

Outline

Outline 함수는 외곽선 효과 를 적용하는 함수입니다. 외곽선 효과는 일반적으로 이미지나 모델에 외곽선을 추가하는 효과를 말합닌다. 이 효과는 일반적으로 3D 모델에서 외곽선을 보이게 하는데 사용되며 이미지에서도 외곽선을 보이게 하는 효과를 적용할 수 있습니다.

import { Outline } from '@react-three/postprocessing'
import { BlendFunction, Resizer, KernelSize } from 'postprocessing'

return (
  <Outline
    selection={[meshRef1, meshRef2]} // selection of objects that will be outlined
    selectionLayer={10} // selection layer
    blendFunction={BlendFunction.SCREEN} // set this to BlendFunction.ALPHA for dark outlines
    patternTexture={null} // a pattern texture
    edgeStrength={2.5} // the edge strength
    pulseSpeed={0.0} // a pulse speed. A value of zero disables the pulse effect
    visibleEdgeColor={0xffffff} // the color of visible edges
    hiddenEdgeColor={0x22090a} // the color of hidden edges
    width={Resizer.AUTO_SIZE} // render width
    height={Resizer.AUTO_SIZE} // render height
    kernelSize={KernelSize.LARGE} // blur kernel size
    blur={false} // whether the outline should be blurred
    xRay={true} // indicates whether X-Ray outlines are enabled
  />
)

Pixelation

Pixelation 함수는 이미지나 비디오의 픽셀 효과 를 적용하는 함수입니다. 픽셀 효과는 일반적으로 이미지나 비디오를 픽셀로 구성된 격자 형태로 보이게 하는 효과를 말합니다.

import { Pixelation } from '@react-three/postprocessing'

return (
  <Pixelation
    granularity={5} // pixel granularity
  />
)

Scanline

Scanline 함수는 이미지나 비디오에 스캔 라인 효과를 적용하는 함수입니다. 스캔라인 효과란 이미지나 비디오를 수직선으로 구성된 선들 로 보이게 하는 효과를 말합니다. 이 효과는 일반적으로 CRT모니터, 옛날 TV, 영상 편집에서 사용됩니다

Scanline 함수는 일반적으로 파라미터로 효과의 세기,간격,방향 등을 제어할 수 있습니다.

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

return (
  <Scanline
    blendFunction={BlendFunction.OVERLAY} // blend mode
    density={1.25} // scanline density
  />
)

SelectiveBloom

SelectiveBloom 함수는 bloom 효과를 적용하는 함수입니다. Bloom 효과란 이미지나 비디오에서 밝은 부분들을 흐릿하게 보이게 하는 효과를 말합니다.

SelectiveBloom 함수는 특정 색상만 bloom 효과를 적용할 수 있는데, 이를 위해서 특정 색상을 지정해야 합니다. 이 함수는 일반적으로 그래픽 디자인, 영상 편집 등에서 사용될 수 있습니다.

import { SelectiveBloom } from '@react-three/postprocessing'
import { BlurPass, Resizer, KernelSize } from 'postprocessing'

return (
  <SelectiveBloom
    lights={[lightRef1, lightRef2]} // ⚠️ REQUIRED! all relevant lights
    selection={[meshRef1, meshRef2]} // selection of objects that will have bloom effect
    selectionLayer={10} // selection layer
    intensity={1.0} // The bloom intensity.
    blurPass={undefined} // A blur pass.
    width={Resizer.AUTO_SIZE} // render width
    height={Resizer.AUTO_SIZE} // render height
    kernelSize={KernelSize.LARGE} // blur kernel size
    luminanceThreshold={0.9} // luminance threshold. Raise this value to mask out darker elements in the scene.
    luminanceSmoothing={0.025} // smoothness of the luminance threshold. Range is [0, 1]
  />
)

Sepia

Sepia 함수는 이미지나 비디오에 세피아 효과 를 적용하는 함수입니다. 세피아 효과란 이미지나 비디오를 각색으로 바꿔서 과거시대의 분위기를 연상시키는 효과 를 말합니다. 이 효과는 일반적으로 영상 편집, 그래픽 디자인 등에서 사용됩니다.

import { Sepia } from '@react-three/postprocessing'

return (
  <Sepia
    intensity={1.0} // sepia intensity
    blendFunction={BlendFunction.NORMAL} // blend mode
  />
)

SMAA

SMAA (Subpixel Morphological Anti-Aliasing) 함수는 이미지나 비디오에 안티 엘리어싱 효과를 적용 하는 함수입니다. 안티 엘리어싱 효과란 이미지나 비디오의 가장자리를 부드럽게 만들어서 깨끗하게 보이게 하는 효과를 말합니다. 이 효과는 일반적으로 게임, 영상 편집 등에서 사용됩니다.

SMAA 함수는 일반적인 안티 앨리어싱 효과보다 더 나은 품질을 제공하며, 이미지나 비디오의 세밀한 가장자리를 부드럽게 만들어줍니다.

import React, { Suspense } from 'react'
import { EffectComposer, SMAA } from '@react-three/postprocessing'

return (
  <Suspense fallback={null}>
    <EffectComposer multisampling={0}>
      <SMAA />
    </EffectComposer>
  </Suspense>
)

SSAO

SSAO (Screen Space Ambient Occlusion) 함수는 이미지나 비디오에 엠비언트 오클루전 효과 를 적용하는 함수입니다. 엠비언트 오클루전 효과란 이미지나 비디오에서 그림자를 추가하여 그림자가 어둡게 보이는 객체와 그림자가 밝게 보이는 객체를 나누어서 보여주는 효과를 말합니다,

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

return (
  <SSAO
    blendFunction={BlendFunction.MULTIPLY} // blend mode
    samples={30} // amount of samples per pixel (shouldn't be a multiple of the ring count)
    rings={4} // amount of rings in the occlusion sampling pattern
    distanceThreshold={1.0} // global distance threshold at which the occlusion effect starts to fade out. min: 0, max: 1
    distanceFalloff={0.0} // distance falloff. min: 0, max: 1
    rangeThreshold={0.5} // local occlusion range threshold at which the occlusion starts to fade out. min: 0, max: 1
    rangeFalloff={0.1} // occlusion range falloff. min: 0, max: 1
    luminanceInfluence={0.9} // how much the luminance of the scene influences the ambient occlusion
    radius={20} // occlusion sampling radius
    scale={0.5} // scale of the ambient occlusion
    bias={0.5} // occlusion bias
  />
)

ToneMapping

ToneMapping 함수는 이밈지나 비디오의 톤 맵핑 효과를 적용하는 함수입니다. 톤 맵핑은 디스플레이나 카메라의 밝기 범위가 제한되어 있는데, 이미지나 비디오의 밝은 부분과 어두운 부분을 적절하게 보여주는 기술 을 말합니다.

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
  />
)

Vignette

Vignette 함수는 이미지나 비디오에 빈제 효과 를 적용하는 함수입니다. 빈제 효과란 이미지나 비디오의 가장자리를 어둡게 만들어서 중앙을 강조 하는 효과를 말합니다.

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

return (
  <Vignette
    offset={0.5} // vignette offset
    darkness={0.5} // vignette darkness
    eskil={false} // Eskil's vignette technique
    blendFunction={BlendFunction.NORMAL} // blend mode
  />
)