@react-three/postprocessing 2.19.0 → 3.0.0-rc.0

package/src/effects/SelectiveBloom.tsx

@@ -0,0 +1,126 @@
+import { SelectiveBloomEffect, BlendFunction } from 'postprocessing'
+import type { BloomEffectOptions } from 'postprocessing'
+import React, { Ref, RefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
+import { Object3D } from 'three'
+import { useThree } from '@react-three/fiber'
+import { EffectComposerContext } from '../EffectComposer.tsx'
+import { selectionContext } from '../Selection.tsx'
+import { resolveRef } from '../util.tsx'
+
+type ObjectRef = RefObject<Object3D>
+
+export type SelectiveBloomProps = BloomEffectOptions &
+  Partial<{
+    lights: Object3D[] | ObjectRef[]
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]
+    selectionLayer: number
+    inverted: boolean
+    ignoreBackground: boolean
+  }>
+
+const addLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.enable(effect.selection.layer)
+const removeLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.disable(effect.selection.layer)
+
+export const SelectiveBloom = /* @__PURE__ */ forwardRef(function SelectiveBloom(
+  {
+    selection = [],
+    selectionLayer = 10,
+    lights = [],
+    inverted = false,
+    ignoreBackground = false,
+    luminanceThreshold,
+    luminanceSmoothing,
+    intensity,
+    width,
+    height,
+    kernelSize,
+    mipmapBlur,
+
+    ...props
+  }: SelectiveBloomProps,
+  forwardRef: Ref<SelectiveBloomEffect>
+) {
+  if (lights.length === 0) {
+    console.warn('SelectiveBloom requires lights to work.')
+  }
+
+  const invalidate = useThree((state) => state.invalidate)
+  const { scene, camera } = useContext(EffectComposerContext)
+  const effect = useMemo(() => {
+    const effect = new SelectiveBloomEffect(scene, camera, {
+      blendFunction: BlendFunction.ADD,
+      luminanceThreshold,
+      luminanceSmoothing,
+      intensity,
+      width,
+      height,
+      kernelSize,
+      mipmapBlur,
+      ...props,
+    })
+    effect.inverted = inverted
+    effect.ignoreBackground = ignoreBackground
+    return effect
+  }, [
+    scene,
+    camera,
+    luminanceThreshold,
+    luminanceSmoothing,
+    intensity,
+    width,
+    height,
+    kernelSize,
+    mipmapBlur,
+    inverted,
+    ignoreBackground,
+    props,
+  ])
+
+  const api = useContext(selectionContext)
+
+  useEffect(() => {
+    // Do not allow array selection if declarative selection is active
+    // TODO: array selection should probably be deprecated altogether
+    if (!api && selection) {
+      effect.selection.set(
+        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]
+      )
+      invalidate()
+      return () => {
+        effect.selection.clear()
+        invalidate()
+      }
+    }
+  }, [effect, selection, api, invalidate])
+
+  useEffect(() => {
+    effect.selection.layer = selectionLayer
+    invalidate()
+  }, [effect, invalidate, selectionLayer])
+
+  useEffect(() => {
+    if (lights && lights.length > 0) {
+      lights.forEach((light) => addLight(resolveRef(light), effect))
+      invalidate()
+      return () => {
+        lights.forEach((light) => removeLight(resolveRef(light), effect))
+        invalidate()
+      }
+    }
+  }, [effect, invalidate, lights, selectionLayer])
+
+  useEffect(() => {
+    if (api && api.enabled) {
+      if (api.selected?.length) {
+        effect.selection.set(api.selected)
+        invalidate()
+        return () => {
+          effect.selection.clear()
+          invalidate()
+        }
+      }
+    }
+  }, [api, effect.selection, invalidate])
+
+  return <primitive ref={forwardRef} object={effect} dispose={null} />
+})

package/src/effects/Sepia.tsx

@@ -0,0 +1,4 @@
+import { SepiaEffect } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+export const Sepia = /* @__PURE__ */ wrapEffect(SepiaEffect)

package/src/effects/ShockWave.tsx

@@ -0,0 +1,4 @@
+import { ShockWaveEffect } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+export const ShockWave = /* @__PURE__ */ wrapEffect(ShockWaveEffect)

package/src/effects/Texture.tsx

@@ -0,0 +1,23 @@
+import { TextureEffect } from 'postprocessing'
+import { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'
+import { useLoader } from '@react-three/fiber'
+import { TextureLoader, SRGBColorSpace, RepeatWrapping } from 'three'
+
+type TextureProps = ConstructorParameters<typeof TextureEffect>[0] & {
+  textureSrc: string
+  /** opacity of provided texture */
+  opacity?: number
+}
+
+export const Texture = /* @__PURE__ */ forwardRef<TextureEffect, TextureProps>(function Texture(
+  { textureSrc, texture, opacity = 1, ...props }: TextureProps,
+  ref: Ref<TextureEffect>
+) {
+  const t = useLoader(TextureLoader, textureSrc)
+  useLayoutEffect(() => {
+    t.colorSpace = SRGBColorSpace
+    t.wrapS = t.wrapT = RepeatWrapping
+  }, [t])
+  const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [props, t, texture])
+  return <primitive ref={ref} object={effect} blendMode-opacity-value={opacity} dispose={null} />
+})

package/src/effects/TiltShift.tsx

@@ -0,0 +1,4 @@
+import { TiltShiftEffect, BlendFunction } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+export const TiltShift = /* @__PURE__ */ wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.ADD })

package/{dist/effects/TiltShift2.js → src/effects/TiltShift2.tsx}

@@ -1,98 +1,90 @@
-import { Uniform } from "three";
-import { Effect, EffectAttribute, BlendFunction } from "postprocessing";
-import { wrapEffect } from "../util.js";
-const TiltShiftShader = {
-  fragmentShader: `
-
-    // original shader by Evan Wallace
-
-    #define MAX_ITERATIONS 100
-
-    uniform float blur;
-    uniform float taper;
-    uniform vec2 start;
-    uniform vec2 end;
-    uniform vec2 direction;
-    uniform int samples;
-
-    float random(vec3 scale, float seed) {
-        /* use the fragment position for a different seed per-pixel */
-        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
-    }
-
-    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
-        vec4 color = vec4(0.0);
-        float total = 0.0;
-        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
-        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
-        float f_samples = float(samples);
-        float half_samples = f_samples / 2.0;
-
-        // use screen diagonal to normalize blur radii
-        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance
-        float gradientRadius = taper * (maxScreenDistance);
-        float blurRadius = blur * (maxScreenDistance / 16.0);
-
-        /* randomize the lookup values to hide the fixed number of samples */
-        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
-        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
-        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;
-
-        #pragma unroll_loop_start
-        for (int i = 0; i <= MAX_ITERATIONS; i++) {
-            if (i >= samples) { break; } // return early if over sample count
-            float f_i = float(i);
-            float s_i = -half_samples + f_i;
-            float percent = (s_i + offset - 0.5) / half_samples;
-            float weight = 1.0 - abs(percent);
-            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
-            /* switch to pre-multiplied alpha to correctly blur transparent images */
-            sample_i.rgb *= sample_i.a;
-            color += sample_i * weight;
-            total += weight;
-        }
-        #pragma unroll_loop_end
-
-        outputColor = color / total;
-
-        /* switch back from pre-multiplied alpha */
-        outputColor.rgb /= outputColor.a + 0.00001;
-    }
-    `
-};
-class TiltShiftEffect extends Effect {
-  constructor({
-    blendFunction = BlendFunction.NORMAL,
-    blur = 0.15,
-    // [0, 1], can go beyond 1 for extra
-    taper = 0.5,
-    // [0, 1], can go beyond 1 for extra
-    start = [0.5, 0],
-    // [0,1] percentage x,y of screenspace
-    end = [0.5, 1],
-    // [0,1] percentage x,y of screenspace
-    samples = 10,
-    // number of blur samples
-    direction = [1, 1]
-    // direction of blur
-  } = {}) {
-    super("TiltShiftEffect", TiltShiftShader.fragmentShader, {
-      blendFunction,
-      attributes: EffectAttribute.CONVOLUTION,
-      uniforms: /* @__PURE__ */ new Map([
-        ["blur", new Uniform(blur)],
-        ["taper", new Uniform(taper)],
-        ["start", new Uniform(start)],
-        ["end", new Uniform(end)],
-        ["samples", new Uniform(samples)],
-        ["direction", new Uniform(direction)]
-      ])
-    });
-  }
-}
-const TiltShift2 = wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.NORMAL });
-export {
-  TiltShift2,
-  TiltShiftEffect
-};
-//# sourceMappingURL=TiltShift2.js.map
+import { Uniform } from 'three'
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+const TiltShiftShader = {
+  fragmentShader: `
+
+    // original shader by Evan Wallace
+
+    #define MAX_ITERATIONS 100
+
+    uniform float blur;
+    uniform float taper;
+    uniform vec2 start;
+    uniform vec2 end;
+    uniform vec2 direction;
+    uniform int samples;
+
+    float random(vec3 scale, float seed) {
+        /* use the fragment position for a different seed per-pixel */
+        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
+    }
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+        vec4 color = vec4(0.0);
+        float total = 0.0;
+        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
+        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
+        float f_samples = float(samples);
+        float half_samples = f_samples / 2.0;
+
+        // use screen diagonal to normalize blur radii
+        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance
+        float gradientRadius = taper * (maxScreenDistance);
+        float blurRadius = blur * (maxScreenDistance / 16.0);
+
+        /* randomize the lookup values to hide the fixed number of samples */
+        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
+        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
+        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;
+
+        #pragma unroll_loop_start
+        for (int i = 0; i <= MAX_ITERATIONS; i++) {
+            if (i >= samples) { break; } // return early if over sample count
+            float f_i = float(i);
+            float s_i = -half_samples + f_i;
+            float percent = (s_i + offset - 0.5) / half_samples;
+            float weight = 1.0 - abs(percent);
+            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
+            /* switch to pre-multiplied alpha to correctly blur transparent images */
+            sample_i.rgb *= sample_i.a;
+            color += sample_i * weight;
+            total += weight;
+        }
+        #pragma unroll_loop_end
+
+        outputColor = color / total;
+
+        /* switch back from pre-multiplied alpha */
+        outputColor.rgb /= outputColor.a + 0.00001;
+    }
+    `,
+}
+
+export class TiltShiftEffect extends Effect {
+  constructor({
+    blendFunction = BlendFunction.NORMAL,
+    blur = 0.15, // [0, 1], can go beyond 1 for extra
+    taper = 0.5, // [0, 1], can go beyond 1 for extra
+    start = [0.5, 0.0], // [0,1] percentage x,y of screenspace
+    end = [0.5, 1.0], // [0,1] percentage x,y of screenspace
+    samples = 10.0, // number of blur samples
+    direction = [1, 1], // direction of blur
+  } = {}) {
+    super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
+      blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map<string, Uniform<number | number[]>>([
+        ['blur', new Uniform(blur)],
+        ['taper', new Uniform(taper)],
+        ['start', new Uniform(start)],
+        ['end', new Uniform(end)],
+        ['samples', new Uniform(samples)],
+        ['direction', new Uniform(direction)],
+      ]),
+    })
+  }
+}
+
+export const TiltShift2 = /* @__PURE__ */ wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.NORMAL })

package/src/effects/ToneMapping.tsx

@@ -0,0 +1,6 @@
+import { ToneMappingEffect } from 'postprocessing'
+import { type EffectProps, wrapEffect } from '../util.tsx'
+
+export type ToneMappingProps = EffectProps<typeof ToneMappingEffect>
+
+export const ToneMapping = /* @__PURE__ */ wrapEffect(ToneMappingEffect)

package/src/effects/Vignette.tsx

@@ -0,0 +1,4 @@
+import { VignetteEffect } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+export const Vignette = /* @__PURE__ */ wrapEffect(VignetteEffect)

package/{dist/effects/Water.js → src/effects/Water.tsx}

@@ -1,38 +1,35 @@
-import { Uniform } from "three";
-import { Effect, EffectAttribute, BlendFunction } from "postprocessing";
-import { wrapEffect } from "../util.js";
-const WaterShader = {
-  fragmentShader: (
-    /* glsl */
-    `
-    uniform float factor;
-
-    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
-      vec2 vUv = uv;
-      float frequency = 6.0 * factor;
-      float amplitude = 0.015 * factor;
-      float x = vUv.y * frequency + time * 0.7; 
-      float y = vUv.x * frequency + time * 0.3;
-      vUv.x += cos(x + y) * amplitude * cos(y);
-      vUv.y += sin(x - y) * amplitude * cos(y);
-      vec4 rgba = texture(inputBuffer, vUv);
-      outputColor = rgba;
-    }
-  `
-  )
-};
-class WaterEffectImpl extends Effect {
-  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
-    super("WaterEffect", WaterShader.fragmentShader, {
-      blendFunction,
-      attributes: EffectAttribute.CONVOLUTION,
-      uniforms: /* @__PURE__ */ new Map([["factor", new Uniform(factor)]])
-    });
-  }
-}
-const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL });
-export {
-  WaterEffect,
-  WaterEffectImpl
-};
-//# sourceMappingURL=Water.js.map
+import { Uniform } from 'three'
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+const WaterShader = {
+  fragmentShader: /* glsl */ `
+    uniform float factor;
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+      vec2 vUv = uv;
+      float frequency = 6.0 * factor;
+      float amplitude = 0.015 * factor;
+      float x = vUv.y * frequency + time * 0.7; 
+      float y = vUv.x * frequency + time * 0.3;
+      vUv.x += cos(x + y) * amplitude * cos(y);
+      vUv.y += sin(x - y) * amplitude * cos(y);
+      vec4 rgba = texture(inputBuffer, vUv);
+      outputColor = rgba;
+    }
+  `,
+}
+
+export class WaterEffectImpl extends Effect {
+  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
+    super('WaterEffect', WaterShader.fragmentShader, {
+      blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]]),
+    })
+  }
+}
+
+export const WaterEffect = /* @__PURE__ */ wrapEffect(WaterEffectImpl, {
+  blendFunction: BlendFunction.NORMAL,
+})

package/src/index.ts

@@ -0,0 +1,40 @@
+export * from './Selection.tsx'
+export * from './EffectComposer.tsx'
+export * from './util.tsx'
+
+export * from './effects/Autofocus.tsx'
+export * from './effects/LensFlare.tsx'
+export * from './effects/Bloom.tsx'
+export * from './effects/BrightnessContrast.tsx'
+export * from './effects/ChromaticAberration.tsx'
+export * from './effects/ColorAverage.tsx'
+export * from './effects/ColorDepth.tsx'
+export * from './effects/Depth.tsx'
+export * from './effects/DepthOfField.tsx'
+export * from './effects/DotScreen.tsx'
+export * from './effects/Glitch.tsx'
+export * from './effects/GodRays.tsx'
+export * from './effects/Grid.tsx'
+export * from './effects/HueSaturation.tsx'
+export * from './effects/Noise.tsx'
+export * from './effects/Outline.tsx'
+export * from './effects/Pixelation.tsx'
+export * from './effects/ScanlineEffect.tsx'
+export * from './effects/SelectiveBloom.tsx'
+export * from './effects/Sepia.tsx'
+export * from './effects/SSAO.tsx'
+export * from './effects/SMAA.tsx'
+export * from './effects/FXAA.tsx'
+export * from './effects/Ramp.tsx'
+export * from './effects/Texture.tsx'
+export * from './effects/ToneMapping.tsx'
+export * from './effects/Vignette.tsx'
+export * from './effects/ShockWave.tsx'
+export * from './effects/LUT.tsx'
+export * from './effects/TiltShift.tsx'
+export * from './effects/TiltShift2.tsx'
+export * from './effects/ASCII.tsx'
+export * from './effects/Water.tsx'
+
+// These are not effect passes
+export * from './effects/N8AO.tsx'

package/src/util.tsx

@@ -0,0 +1,55 @@
+import React, { RefObject } from 'react'
+import { Vector2 } from 'three'
+import * as THREE from 'three'
+import { type ReactThreeFiber, type ThreeElement, extend, useThree } from '@react-three/fiber'
+import type { Effect, Pass, BlendFunction } from 'postprocessing'
+
+export const resolveRef = <T,>(ref: T | React.RefObject<T>) =>
+  typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref
+
+export type EffectConstructor = new (...args: any[]) => Effect | Pass
+
+export type EffectProps<T extends EffectConstructor> = ThreeElement<T> &
+  ConstructorParameters<T>[0] & {
+    blendFunction?: BlendFunction
+    opacity?: number
+  }
+
+let i = 0
+const components = new WeakMap<EffectConstructor, React.ExoticComponent<any> | string>()
+
+export const wrapEffect = <T extends EffectConstructor>(effect: T, defaults?: EffectProps<T>) =>
+  /* @__PURE__ */ function Effect({ blendFunction = defaults?.blendFunction, opacity = defaults?.opacity, ...props }) {
+    let Component = components.get(effect)
+    if (!Component) {
+      const key = `@react-three/postprocessing/${effect.name}-${i++}`
+      extend({ [key]: effect })
+      components.set(effect, (Component = key))
+    }
+
+    const camera = useThree((state) => state.camera)
+    const args = React.useMemo(
+      () => [...(defaults?.args ?? []), ...(props.args ?? [{ ...defaults, ...props }])],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [JSON.stringify(props)]
+    )
+
+    return (
+      <Component
+        camera={camera}
+        blendMode-blendFunction={blendFunction}
+        blendMode-opacity-value={opacity}
+        {...props}
+        args={args}
+      />
+    )
+  }
+
+export const useVector2 = (props: Record<string, unknown>, key: string): THREE.Vector2 => {
+  const value = props[key] as ReactThreeFiber.Vector2 | undefined
+  return React.useMemo(() => {
+    if (typeof value === 'number') return new THREE.Vector2(value, value)
+    else if (value) return new THREE.Vector2(...(value as THREE.Vector2Tuple))
+    else return new THREE.Vector2()
+  }, [value])
+}