BokehBlur

Photographic lens blur where bright highlights bloom into aperture-shaped discs

Props

radiusnumber

Default:50

Defocus amount — how far the lens blur spreads

radius

numberDefault: 50

Defocus amount — how far the lens blur spreads

highlightGainnumber

Default:4

How strongly bright highlights bloom into discs

highlightGain

numberDefault: 4

How strongly bright highlights bloom into discs

highlightThresholdnumber

Default:0.6

Brightness above which a highlight forms a disc

highlightThreshold

numberDefault: 0.6

Brightness above which a highlight forms a disc

Default:blades

Aperture shape the highlights bloom into — bladed iris or a novelty cut-out (heart, star, …)

bladeShape

Aperture shape the highlights bloom into — bladed iris or a novelty cut-out (heart, star, …)

bladeCountnumber

Default:6

Blade or point count for the Blades, Star and Flower shapes — 0–2 blades is a circular iris

bladeCount

numberDefault: 6

Blade or point count for the Blades, Star and Flower shapes — 0–2 blades is a circular iris

bladeRotationnumber

Default:0

Rotation of the aperture shape (in degrees)

bladeRotation

numberDefault: 0

Rotation of the aperture shape (in degrees)

chromaticFringenumber

Default:0.2

Lens colour fringing on the disc edges

chromaticFringe

numberDefault: 0.2

Lens colour fringing on the disc edges

Usage

<Shader>
  <BokehBlur
    :radius="50"
  >
    <Circle />
  </BokehBlur>
</Shader>

<Shader>
  <BokehBlur
    radius={50}
  >
    <Circle />
  </BokehBlur>
</Shader>

<Shader>
  <BokehBlur
    radius={50}
  >
    <Circle />
  </BokehBlur>
</Shader>

<Shader>
  <BokehBlur
    radius={50}
  >
    <Circle />
  </BokehBlur>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'BokehBlur', props: { radius: 50 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

Boids

BrickPattern