feat: add Sharpness effect

Laplacian sharpen with adjustable strength and sample radius, based on #253.

Author: kvvasuu

docs/effects/sharpness.mdx

@@ -0,0 +1,28 @@
+---
+title: Sharpness
+nav: 1
+---
+
+Sharpens the image by boosting the difference between each pixel and its neighbors. Useful after FXAA/SMAA or a lowered `resolutionScale` to bring back crisp detail.
+
+```jsx
+import { Sharpness } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+  <Sharpness
+    sharpness={1} // sharpening strength, 0 disables it
+    radius={1} // distance to the sampled neighbors in pixels
+    blendFunction={BlendFunction.NORMAL} // blend mode
+  />
+)
+```
+
+## Props
+
+| Name          | Type          | Default              | Description                                  |
+| ------------- | ------------- | -------------------- | -------------------------------------------- |
+| sharpness     | Number        | 1                    | Sharpening strength, 0 disables it.          |
+| radius        | Number        | 1                    | Distance to the sampled neighbors in pixels. |
+| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect.           |
+| opacity       | Number        | 1                    | The opacity of this effect.                  |

src/effects/Sharpness.tsx

@@ -0,0 +1,67 @@
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import type { Ref } from 'react'
+import { Uniform } from 'three'
+import { createEffectComponent } from '../createEffectComponent'
+
+const SharpnessShader = {
+  fragmentShader: /* glsl */ `
+    uniform float sharpness;
+    uniform float radius;
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+      vec2 dx = vec2(texelSize.x * radius, 0.0);
+      vec2 dy = vec2(0.0, texelSize.y * radius);
+
+      vec3 center = texture2D(inputBuffer, uv).rgb;
+      vec3 neighbors = texture2D(inputBuffer, uv - dx).rgb
+        + texture2D(inputBuffer, uv + dx).rgb
+        + texture2D(inputBuffer, uv - dy).rgb
+        + texture2D(inputBuffer, uv + dy).rgb;
+
+      // Laplacian sharpen, sharpness 1 is the classic 5 / -1 kernel
+      vec3 color = center + sharpness * (4.0 * center - neighbors);
+      outputColor = vec4(max(color, 0.0), inputColor.a);
+    }
+  `,
+}
+
+export class SharpnessEffect extends Effect {
+  constructor({ blendFunction = BlendFunction.NORMAL, sharpness = 1, radius = 1 } = {}) {
+    super('SharpnessEffect', SharpnessShader.fragmentShader, {
+      blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map<string, Uniform<number>>([
+        ['sharpness', new Uniform(sharpness)],
+        ['radius', new Uniform(radius)],
+      ]),
+    })
+  }
+
+  /** Sharpening strength, 0 disables it. */
+  get sharpness(): number {
+    return this.uniforms.get('sharpness')!.value
+  }
+
+  set sharpness(value: number) {
+    this.uniforms.get('sharpness')!.value = value
+  }
+
+  /** Distance to the sampled neighbors in pixels. */
+  get radius(): number {
+    return this.uniforms.get('radius')!.value
+  }
+
+  set radius(value: number) {
+    this.uniforms.get('radius')!.value = value
+  }
+}
+
+export type SharpnessProps = {
+  blendFunction?: BlendFunction
+  opacity?: number
+  sharpness?: number
+  radius?: number
+  ref?: Ref<SharpnessEffect>
+}
+
+export const Sharpness = /* @__PURE__ */ createEffectComponent<typeof SharpnessEffect, SharpnessProps>(SharpnessEffect)

src/index.ts

@@ -33,6 +33,7 @@ export * from './effects/Ramp'
 export * from './effects/ScanlineEffect'
 export * from './effects/SelectiveBloom'
 export * from './effects/Sepia'
+export * from './effects/Sharpness'
 export * from './effects/ShockWave'
 export * from './effects/SMAA'
 export * from './effects/SSAO'

src/tests/Sharpness.test.tsx

@@ -0,0 +1,64 @@
+import { EffectAttribute } from 'postprocessing'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { Sharpness, SharpnessEffect } from '../effects/Sharpness'
+import { flush, root } from './test-utils'
+
+describe('Sharpness', () => {
+  it('is a convolution effect, so it reads unprocessed neighbors', () => {
+    const effect = new SharpnessEffect()
+    expect(effect.getAttributes() & EffectAttribute.CONVOLUTION).toBe(EffectAttribute.CONVOLUTION)
+    effect.dispose()
+  })
+
+  it('applies sharpness and radius live, without reconstructing the effect', async () => {
+    const ref = React.createRef<SharpnessEffect>()
+
+    const render = (sharpness: number, radius: number) =>
+      root.render(
+        <EffectComposer>
+          <Sharpness ref={ref} sharpness={sharpness} radius={radius} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.5, 1))
+    await flush()
+    const first = ref.current
+
+    await React.act(async () => render(2, 3))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.uniforms.get('sharpness')!.value).toBe(2)
+    expect(ref.current!.uniforms.get('radius')!.value).toBe(3)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('resets sharpness to its default when the prop is removed', async () => {
+    const ref = React.createRef<SharpnessEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer>
+          <Sharpness ref={ref} sharpness={3} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer>
+          <Sharpness ref={ref} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    expect(ref.current!.sharpness).toBe(1)
+
+    await React.act(async () => root.render(null))
+  })
+})

src/tests/effects.smoke.test.tsx

@@ -55,6 +55,7 @@ import { Ramp } from '../effects/Ramp'
 import { Scanline } from '../effects/ScanlineEffect'
 import { SelectiveBloom } from '../effects/SelectiveBloom'
 import { Sepia } from '../effects/Sepia'
+import { Sharpness } from '../effects/Sharpness'
 import { ShockWave } from '../effects/ShockWave'
 import { SMAA } from '../effects/SMAA'
 import { SSAO } from '../effects/SSAO'
@@ -121,6 +122,7 @@ const SMOKE_CASES: SmokeCase[] = [
     effect: (ref) => <SelectiveBloom ref={ref} lights={[]} />,
   },
   { file: 'Sepia.tsx', label: 'Sepia', effect: (ref) => <Sepia ref={ref} /> },
+  { file: 'Sharpness.tsx', label: 'Sharpness', effect: (ref) => <Sharpness ref={ref} /> },
   { file: 'ShockWave.tsx', label: 'ShockWave', effect: (ref) => <ShockWave ref={ref} /> },
   { file: 'SMAA.tsx', label: 'SMAA', effect: (ref) => <SMAA ref={ref} /> },
   {