@react-three/postprocessing 2.4.6 → 2.5.0

package/dist/effects/SSR.d.ts

@@ -1,49 +1,55 @@
-/// <reference types="react" />
+import React from 'react';
 declare type SSRProps = {
-    /** Enables the effect pass */
-    enabled?: boolean;
-    /** Size of the output buffer */
-    resolutionScale?: number;
-    /** Size of the blur buffer */
-    blurSize?: number;
-    /** Whether to blur the reflections and blend these blurred reflections depending on the roughness and depth of the reflection ray */
-    useBlur?: boolean;
-    /** The kernel size of the blur pass which is used to blur reflections; higher kernel sizes will result in blurrier reflections with more artifacts */
+    /** whether you want to use Temporal Resolving to re-use reflections from the last frames; this will reduce noise tremendously but may result in "smearing" */
+    temporalResolve?: boolean;
+    /** a value between 0 and 1 to set how much the last frame's reflections should be blended in; higher values will result in less noisy reflections when moving the camera but a more smeary look */
+    temporalResolveMix?: number;
+    /** a value between 0 and 1 to set how much the reprojected reflection should be corrected; higher values will reduce smearing but will result in less flickering at reflection edges */
+    temporalResolveCorrectionMix?: number;
+    /** the maximum number of samples for reflections; settings it to 0 means unlimited samples; setting it to a value like 6 can help make camera movements less disruptive when calculating reflections */
+    maxSamples?: number;
+    /** whether to blur the reflections and blend these blurred reflections with the raw ones depending on the blurMix value */
+    ENABLE_BLUR?: boolean;
+    /** how much the blurred reflections should be mixed with the raw reflections */
+    blurMix?: number;
+    /** the sharpness of the Bilateral Filter used to blur reflections */
+    blurSharpness?: number;
+    /** the kernel size of the Bilateral Blur Filter; higher kernel sizes will result in blurrier reflections with more artifacts */
     blurKernelSize?: number;
-    /** How much the reflection ray should travel in each of its iteration; higher values will give deeper reflections but with more artifacts */
+    /** how much the reflection ray should travel in each of its iteration; higher values will give deeper reflections but with more artifacts */
     rayStep?: number;
-    /** The intensity of the reflections */
+    /** the intensity of the reflections */
     intensity?: number;
-    /** The power by which the reflections should be potentiated; higher values will give a more intense and vibrant look */
-    power?: number;
-    /** How much deep reflections will be blurred (as reflections become blurrier the further away the object they are reflecting is) */
-    depthBlur?: number;
-    /** Whether jittering is enabled; jittering will randomly jitter the reflections resulting in a more noisy but overall more realistic look, enabling jittering can be expensive depending on the view angle */
-    enableJittering?: boolean;
-    /** How intense jittering should be */
+    /** the maximum roughness a texel can have to have reflections calculated for it */
+    maxRoughness?: number;
+    /** whether jittering is enabled; jittering will randomly jitter the reflections resulting in a more noisy but overall more realistic look, enabling jittering can be expensive depending on the view angle */
+    ENABLE_JITTERING?: boolean;
+    /** how intense jittering should be */
     jitter?: number;
-    /** How much the jittered rays should be spread; higher values will give a rougher look regarding the reflections but are more expensive to compute with */
+    /** how much the jittered rays should be spread; higher values will give a rougher look regarding the reflections but are more expensive to compute with */
     jitterSpread?: number;
-    /** Roughness fade out */
-    roughnessFadeOut?: number;
-    /** The number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects) */
+    /** how intense jittering should be in relation to a material's roughness */
+    jitterRough?: number;
+    /** the number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects) */
     MAX_STEPS?: number;
-    /** Once we had our ray intersect something, we need to find the exact point in space it intersected and thus it reflects; this can be done through binary search with the given number of maximum steps */
+    /** once we had our ray intersect something, we need to find the exact point in space it intersected and thus it reflects; this can be done through binary search with the given number of maximum steps */
     NUM_BINARY_SEARCH_STEPS?: number;
-    /** The maximum depth difference between a ray and the particular depth at its screen position after refining with binary search; lower values will result in better performance */
+    /** the maximum depth difference between a ray and the particular depth at its screen position after refining with binary search; lower values will result in better performance */
     maxDepthDifference?: number;
-    /** The maximum depth for which reflections will be calculated */
+    /** the maximum depth for which reflections will be calculated */
     maxDepth?: number;
-    /** The maximum depth difference between a ray and the particular depth at its screen position before refining with binary search; lower values will result in better performance */
+    /** the maximum depth difference between a ray and the particular depth at its screen position before refining with binary search; lower values will result in better performance */
     thickness?: number;
     /** Index of Refraction, used for calculating fresnel; reflections tend to be more intense the steeper the angle between them and the viewer is, the ior parameter set how much the intensity varies */
     ior?: number;
-    /** WebGL2 only - whether to use multiple render targets when rendering the G-buffers (normals, depth and roughness); using them can improve performance as they will render all information to multiple buffers for each fragment in one run */
-    useMRT?: boolean;
-    /**  If normal maps should be taken account of when calculating reflections */
-    useNormalMap?: boolean;
-    /** If roughness maps should be taken account of when calculating reflections */
-    useRoughnessMap?: boolean;
+    /** if there should still be reflections for rays for which a reflecting point couldn't be found; enabling this will result in stretched looking reflections which can look good or bad depending on the angle */
+    STRETCH_MISSED_RAYS?: boolean;
+    /** WebGL2 only - whether to use multiple render targets when rendering the G-buffers (normals, depth and roughness); using them can improve performance as they will render all information to multiple buffers for each fragment in one run; this setting can't be changed during run-time */
+    USE_MRT?: boolean;
+    /** if roughness maps should be taken account of when calculating reflections */
+    USE_ROUGHNESSMAP?: boolean;
+    /** if normal maps should be taken account of when calculating reflections */
+    USE_NORMALMAP?: boolean;
 };
-export declare const SSR: import("react").ForwardRefExoticComponent<SSRProps & import("react").RefAttributes<SSRPass>>;
+export declare const SSR: React.ForwardRefExoticComponent<SSRProps & React.RefAttributes<SSREffect>>;
 export {};

package/dist/index.cjs

@@ -701,101 +701,38 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
   });
 });
 
-var _excluded = ["resolutionScale", "blurSize", "enabled"];
+var _excluded = ["ENABLE_BLUR", "USE_MRT"];
 
 var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
-  var _ref$resolutionScale = _ref.resolutionScale,
-      resolutionScale = _ref$resolutionScale === void 0 ? 1 : _ref$resolutionScale,
-      _ref$blurSize = _ref.blurSize,
-      blurSize = _ref$blurSize === void 0 ? 512 : _ref$blurSize,
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+  var _ref$ENABLE_BLUR = _ref.ENABLE_BLUR,
+      ENABLE_BLUR = _ref$ENABLE_BLUR === void 0 ? true : _ref$ENABLE_BLUR,
+      _ref$USE_MRT = _ref.USE_MRT,
+      USE_MRT = _ref$USE_MRT === void 0 ? true : _ref$USE_MRT,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
 
   var _useThree = fiber.useThree(),
-      size = _useThree.size,
-      viewport = _useThree.viewport,
       invalidate = _useThree.invalidate;
 
   var _useContext = React.useContext(EffectComposerContext),
-      composer = _useContext.composer,
       scene = _useContext.scene,
       camera = _useContext.camera;
 
-  var _useState = React.useState(function () {
-    return new screenSpaceReflections.SSRPass(scene, camera, _extends__default["default"]({
-      width: size.width * viewport.dpr * resolutionScale,
-      height: size.height * viewport.dpr * resolutionScale,
-      blurWidth: blurSize,
-      blurHeight: blurSize,
-      blurKernelSize: postprocessing.KernelSize.SMALL,
-      rayStep: 0.1,
-      intensity: 1,
-      power: 1,
-      depthBlur: 0.1,
-      enableJittering: false,
-      jitter: 0.1,
-      jitterSpread: 0.1,
-      roughnessFadeOut: 1,
-      MAX_STEPS: 20,
-      NUM_BINARY_SEARCH_STEPS: 5,
-      maxDepthDifference: 1,
-      maxDepth: 1,
-      thickness: 10,
-      ior: 1.45,
-      useBlur: true,
-      useMRT: true,
-      useNormalMap: true,
-      useRoughnessMap: true
+  var effect = React.useMemo(function () {
+    return new screenSpaceReflections.SSREffect(scene, camera, _extends__default["default"]({
+      ENABLE_BLUR: ENABLE_BLUR,
+      USE_MRT: USE_MRT
     }, props));
-  }),
-      pass = _useState[0];
-
-  React.useEffect(function () {
+  }, [screenSpaceReflections.SSREffect, scene, camera, ENABLE_BLUR, USE_MRT]);
+  React.useLayoutEffect(function () {
     Object.keys(props).forEach(function (key) {
-      return pass.reflectionUniforms[key] && (pass.reflectionUniforms[key].value = props[key]);
+      return effect[key] = props[key];
     });
     invalidate();
   }, [props]);
-  React.useEffect(function () {
-    // Steps
-    pass.reflectionsPass.fullscreenMaterial.defines.MAX_STEPS = Math.ceil(props.MAX_STEPS);
-    pass.reflectionsPass.fullscreenMaterial.defines.NUM_BINARY_SEARCH_STEPS = Math.ceil(props.NUM_BINARY_SEARCH_STEPS); // Blur
-
-    if (props.useBlur) {
-      pass.fullscreenMaterial.defines.USE_BLUR = '';
-      pass.reflectionsPass.fullscreenMaterial.defines.USE_BLUR = '';
-    } else {
-      delete pass.fullscreenMaterial.defines.USE_BLUR;
-      delete pass.reflectionsPass.fullscreenMaterial.defines.USE_BLUR;
-    } // Jitter
-
-
-    if (props.enableJittering) {
-      pass.reflectionsPass.fullscreenMaterial.defines.USE_JITTERING = '';
-    } else {
-      delete pass.reflectionsPass.fullscreenMaterial.defines.USE_JITTERING;
-    } // Enabled
-
-
-    pass.fullscreenMaterial.defines.RENDER_MODE = enabled ? 0 : 4; // Update materials
-
-    pass.reflectionsPass.fullscreenMaterial.needsUpdate = true;
-    pass.fullscreenMaterial.needsUpdate = true;
-    invalidate();
-  }, [enabled, props.useBlur, props.enableJittering, props.NUM_BINARY_SEARCH_STEPS, props.MAX_STEPS]);
-  React.useEffect(function () {
-    pass.setSize(size.width * viewport.dpr * resolutionScale, size.height * viewport.dpr * resolutionScale);
-    pass.kawaseBlurPass.setSize(blurSize, blurSize);
-    invalidate();
-  }, [resolutionScale, blurSize, size, viewport, composer, pass, invalidate]);
-  React.useLayoutEffect(function () {
-    composer.addPass(pass);
-    return function () {
-      composer.removePass(pass); //pass.dispose()
-    };
-  }, [composer, pass]);
-  return null;
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect
+  });
 });
 
 exports.Bloom = Bloom;

package/dist/index.js

@@ -1,11 +1,11 @@
-import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAPreset, EdgeDetectionMode, SMAAImageLoader, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUTEffect, KernelSize } from 'postprocessing';
+import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAPreset, EdgeDetectionMode, SMAAImageLoader, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUTEffect } from 'postprocessing';
 import React, { forwardRef, useMemo, useLayoutEffect, createContext, useEffect, useRef, useImperativeHandle, useContext, useState } from 'react';
 import { Vector2, HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping } from 'three';
 import { useThree, useFrame, useLoader } from '@react-three/fiber';
 import { isWebGL2Available } from 'three-stdlib';
 import mergeRefs from 'react-merge-refs';
 import _extends from '@babel/runtime/helpers/esm/extends';
-import { SSRPass } from 'screen-space-reflections';
+import { SSREffect } from 'screen-space-reflections';
 
 const isRef = ref => !!ref.current;
 
@@ -597,90 +597,30 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
 
 const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   let {
-    resolutionScale = 1,
-    blurSize = 512,
-    enabled = true,
+    ENABLE_BLUR = true,
+    USE_MRT = true,
     ...props
   } = _ref;
   const {
-    size,
-    viewport,
     invalidate
   } = useThree();
   const {
-    composer,
     scene,
     camera
   } = useContext(EffectComposerContext);
-  const [pass] = useState(() => new SSRPass(scene, camera, {
-    width: size.width * viewport.dpr * resolutionScale,
-    height: size.height * viewport.dpr * resolutionScale,
-    blurWidth: blurSize,
-    blurHeight: blurSize,
-    blurKernelSize: KernelSize.SMALL,
-    rayStep: 0.1,
-    intensity: 1,
-    power: 1,
-    depthBlur: 0.1,
-    enableJittering: false,
-    jitter: 0.1,
-    jitterSpread: 0.1,
-    roughnessFadeOut: 1,
-    MAX_STEPS: 20,
-    NUM_BINARY_SEARCH_STEPS: 5,
-    maxDepthDifference: 1,
-    maxDepth: 1,
-    thickness: 10,
-    ior: 1.45,
-    useBlur: true,
-    useMRT: true,
-    useNormalMap: true,
-    useRoughnessMap: true,
+  const effect = useMemo(() => new SSREffect(scene, camera, {
+    ENABLE_BLUR,
+    USE_MRT,
     ...props
-  }));
-  useEffect(() => {
-    Object.keys(props).forEach(key => pass.reflectionUniforms[key] && (pass.reflectionUniforms[key].value = props[key]));
+  }), [SSREffect, scene, camera, ENABLE_BLUR, USE_MRT]);
+  useLayoutEffect(() => {
+    Object.keys(props).forEach(key => effect[key] = props[key]);
     invalidate();
   }, [props]);
-  useEffect(() => {
-    // Steps
-    pass.reflectionsPass.fullscreenMaterial.defines.MAX_STEPS = Math.ceil(props.MAX_STEPS);
-    pass.reflectionsPass.fullscreenMaterial.defines.NUM_BINARY_SEARCH_STEPS = Math.ceil(props.NUM_BINARY_SEARCH_STEPS); // Blur
-
-    if (props.useBlur) {
-      pass.fullscreenMaterial.defines.USE_BLUR = '';
-      pass.reflectionsPass.fullscreenMaterial.defines.USE_BLUR = '';
-    } else {
-      delete pass.fullscreenMaterial.defines.USE_BLUR;
-      delete pass.reflectionsPass.fullscreenMaterial.defines.USE_BLUR;
-    } // Jitter
-
-
-    if (props.enableJittering) {
-      pass.reflectionsPass.fullscreenMaterial.defines.USE_JITTERING = '';
-    } else {
-      delete pass.reflectionsPass.fullscreenMaterial.defines.USE_JITTERING;
-    } // Enabled
-
-
-    pass.fullscreenMaterial.defines.RENDER_MODE = enabled ? 0 : 4; // Update materials
-
-    pass.reflectionsPass.fullscreenMaterial.needsUpdate = true;
-    pass.fullscreenMaterial.needsUpdate = true;
-    invalidate();
-  }, [enabled, props.useBlur, props.enableJittering, props.NUM_BINARY_SEARCH_STEPS, props.MAX_STEPS]);
-  useEffect(() => {
-    pass.setSize(size.width * viewport.dpr * resolutionScale, size.height * viewport.dpr * resolutionScale);
-    pass.kawaseBlurPass.setSize(blurSize, blurSize);
-    invalidate();
-  }, [resolutionScale, blurSize, size, viewport, composer, pass, invalidate]);
-  useLayoutEffect(() => {
-    composer.addPass(pass);
-    return () => {
-      composer.removePass(pass); //pass.dispose()
-    };
-  }, [composer, pass]);
-  return null;
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect
+  });
 });
 
 export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, ToneMapping, Vignette, selectionContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.4.6",
+  "version": "2.5.0",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -39,9 +39,9 @@
     "typegen": "tsc --emitDeclarationOnly || true"
   },
   "dependencies": {
-    "postprocessing": "^6.28.1",
+    "postprocessing": "^6.28.4",
     "react-merge-refs": "^1.1.0",
-    "screen-space-reflections": "^1.0.8",
+    "screen-space-reflections": "^2.0.4",
     "three-stdlib": "^2.8.11"
   },
   "devDependencies": {