@react-three/postprocessing 3.0.3 → 3.0.5

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 '../wrapEffect'
+
+export const ShockWave = /* @__PURE__ */ wrapEffect(ShockWaveEffect)

package/src/effects/Texture.tsx

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

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 { BlendFunction, TiltShiftEffect } from 'postprocessing'
+import { wrapEffect } from '../wrapEffect'
+
+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 { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { Uniform } from 'three'
+import { wrapEffect } from '../wrapEffect'
+
+const TiltShiftShader = {
+  fragmentShader: /* glsl */ `
+
+    // 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 '../wrapEffect'
+
+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 '../wrapEffect'
+
+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 { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { Uniform } from 'three'
+import { wrapEffect } from '../wrapEffect'
+
+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,41 @@
-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 './EffectComposer'
+export * from './Selection'
+export * from './util'
+export * from './wrapEffect'
+
+export * from './effects/ASCII'
+export * from './effects/Autofocus'
+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/FXAA'
+export * from './effects/Glitch'
+export * from './effects/GodRays'
+export * from './effects/Grid'
+export * from './effects/HueSaturation'
+export * from './effects/LensFlare'
+export * from './effects/LUT'
+export * from './effects/Noise'
+export * from './effects/Outline'
+export * from './effects/Pixelation'
+export * from './effects/Ramp'
+export * from './effects/ScanlineEffect'
+export * from './effects/SelectiveBloom'
+export * from './effects/Sepia'
+export * from './effects/ShockWave'
+export * from './effects/SMAA'
+export * from './effects/SSAO'
+export * from './effects/Texture'
+export * from './effects/TiltShift'
+export * from './effects/TiltShift2'
+export * from './effects/ToneMapping'
+export * from './effects/Vignette'
+export * from './effects/Water'
+
+// These are not effect passes
+export * from './effects/N8AO'

package/src/tests/ChromaticAberration.test.tsx

@@ -0,0 +1,31 @@
+import { ChromaticAberrationEffect, EffectComposer as EffectComposerImpl } from 'postprocessing'
+import * as React from 'react'
+import { Vector2 } from 'three'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { ChromaticAberration } from '../effects/ChromaticAberration'
+import { flush, root } from './test-utils'
+
+describe('ChromaticAberration', () => {
+  it('coerces a tuple offset into a real Vector2 (#348)', async () => {
+    const ref = React.createRef<ChromaticAberrationEffect>()
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ChromaticAberration ref={ref} offset={[0.001, 0.0005]} />
+        </EffectComposer>
+      )
+    )
+
+    await flush()
+
+    expect(ref.current!.offset).toBeInstanceOf(Vector2)
+    expect(() => ref.current!.offset.set(0.002, 0.001)).not.toThrow()
+    expect(ref.current!.offset.x).toBeCloseTo(0.002)
+    expect(ref.current!.offset.y).toBeCloseTo(0.001)
+
+    await React.act(async () => root.render(null))
+  })
+})