@react-three/postprocessing 3.0.0-rc.2 → 3.0.0

package/src/effects/ShockWave.tsx

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

package/src/effects/Texture.tsx

@@ -1,23 +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} />
-})
+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

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

package/src/effects/TiltShift2.tsx

@@ -1,90 +1,90 @@
-import { Uniform } from 'three'
-import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-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 })
+import { Uniform } from 'three'
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { wrapEffect } from '../util'
+
+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

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

package/src/effects/Vignette.tsx

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

package/src/effects/Water.tsx

@@ -1,35 +1,35 @@
-import { Uniform } from 'three'
-import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-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,
-})
+import { Uniform } from 'three'
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { wrapEffect } from '../util'
+
+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

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

package/src/util.tsx

@@ -1,55 +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])
-}
+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])
+}

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from '../src/index.ts'