보케 블러

Bokeh Blur

렌즈 초점이 흐려진 듯 밝은 부분을 조리개 모양의 원반으로 표현합니다.

다른 이름: BokehBlurbokehlens blur

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, BokehBlur, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <BokehBlur
        radius={30} />
    </Shader>
  )
}

Vue

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script setup lang="ts">
import { Shader, BokehBlur, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/still.jpg"/>
    <BokehBlur
      :radius="30"/>
  </Shader>
</template>

Svelte

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script>
  import { Shader, BokehBlur, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <BokehBlur
    radius={30} />
</Shader>

Solid

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, BokehBlur, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <BokehBlur
        radius={30} />
    </Shader>
  )
}

JavaScript

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/still.jpg',
      },
    },
    {
      type: 'BokehBlur',
      props: {
        radius: 30,
      },
    }
  ]
}, { disableTelemetry: true })

속성(props) · `BokehBlur`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름	값	기본값	범위·선택지	설명(원문)
`radius`Radius	30	50	0 – 100 (step 1)	Defocus amount — how far the lens blur spreads
`highlightGain`Highlight Bloom	4	4	0 – 10 (step 0.1)	How strongly bright highlights bloom into discs
`highlightThreshold`Highlight Threshold	0.6	0.6	0 – 1 (step 0.01)	Brightness above which a highlight forms a disc
`bladeShape`Blade Shape		blades	blades · circle · star · heart · flower · cross · ring	Aperture shape the highlights bloom into — bladed iris or a novelty cut-out (heart, star, …)
`bladeCount`Aperture Blades	6	6	0 – 9 (step 1)	Blade or point count for the Blades, Star and Flower shapes — 0–2 blades is a circular iris
`bladeRotation`Blade Rotation	0	0	0 – 360 (step 1)	Rotation of the aperture shape (in degrees)
`chromaticFringe`Chromatic Fringe	0.2	0.2	0 – 1 (step 0.01)	Lens color fringing on the disc edges

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

초점 밖의 조명이 둥근 빛망울로 퍼지는 사진의 보케 효과를 만듭니다. 배경의 밝은 점이 조리개 모양으로 보입니다.

`radius`는 기본 50, 범위 0–100으로 흐림 퍼짐 정도를 정합니다. `highlightGain`은 기본 4, 범위 0–10이고 원반의 밝기를 키웁니다. `highlightThreshold`는 기본 0.6, 범위 0–1이며 원반이 생기는 밝기 기준입니다. `bladeCount`는 기본 6, 범위 0–9로 조리개 날 수를 정하고, `chromaticFringe`는 기본 0.2, 범위 0–1로 가장자리 색 번짐을 조절합니다.

사진이나 영상의 입력 레이어 위에 놓아야 하며, 특히 점광원이 있어야 보케 원반이 드러납니다. 하이라이트가 적으면 효과가 약해 보일 수 있고, 색 번짐을 높이면 디테일이 지저분해질 수 있으니 배경에 먼저 시험하세요.

언제 쓰나

야간 조명이나 점광원이 있는 사진, 인물 뒤의 초점 흐림, 렌즈 느낌의 배경에 좋습니다. 입력 이미지에 밝은 하이라이트가 거의 없다면 다른 블러를 고려하세요.

속성(props) · BokehBlur

함께 보기

틸트 시프트 블러Tilt Shift

가우시안 블러Blur

점진적 블러Progressive Blur

채널별 블러Channel Blur

언제 쓰나

속성(props) · `BokehBlur`