@react-three/postprocessing 2.4.0 → 2.4.3

package/dist/effects/SSR.d.ts

@@ -1,45 +1,47 @@
 import React from 'react';
 declare type SSRProps = {
+    /** Enables the effect pass */
+    enabled?: boolean;
     /** Size of the blur buffer */
-    blurSize: number;
+    blurSize?: number;
     /** Whether to blur the reflections and blend these blurred reflections depending on the roughness and depth of the reflection ray */
-    useBlur: boolean;
+    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 */
-    blurKernelSize: number;
+    blurKernelSize?: number;
     /** How much the reflection ray should travel in each of its iteration; higher values will give deeper reflections but with more artifacts */
-    rayStep: number;
+    rayStep?: number;
     /** The intensity of the reflections */
-    intensity: number;
+    intensity?: number;
     /** The power by which the reflections should be potentiated; higher values will give a more intense and vibrant look */
-    power: number;
+    power?: number;
     /** How much deep reflections will be blurred (as reflections become blurrier the further away the object they are reflecting is) */
-    depthBlur: number;
+    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;
+    enableJittering?: boolean;
     /** How intense jittering should be */
-    jitter: number;
+    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 */
-    jitterSpread: number;
+    jitterSpread?: number;
     /** Roughness fade out */
-    roughnessFadeOut: number;
+    roughnessFadeOut?: number;
     /** The number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects) */
-    MAX_STEPS: number;
+    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 */
-    NUM_BINARY_SEARCH_STEPS: number;
+    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 */
-    maxDepthDifference: number;
+    maxDepthDifference?: number;
     /** The maximum depth for which reflections will be calculated */
-    maxDepth: number;
+    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 */
-    thickness: number;
+    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;
+    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;
+    useMRT?: boolean;
     /**  If normal maps should be taken account of when calculating reflections */
-    useNormalMap: boolean;
+    useNormalMap?: boolean;
     /** If roughness maps should be taken account of when calculating reflections */
-    useRoughnessMap: boolean;
+    useRoughnessMap?: boolean;
 };
 export declare const SSR: React.ForwardRefExoticComponent<SSRProps & React.RefAttributes<SSRPass>>;
 export {};

package/dist/index.cjs

@@ -720,11 +720,13 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
   });
 });
 
-var _excluded = ["blurSize"];
+var _excluded = ["blurSize", "enabled"];
 
 var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
   var _ref$blurSize = _ref.blurSize,
       blurSize = _ref$blurSize === void 0 ? 512 : _ref$blurSize,
+      _ref$enabled = _ref.enabled,
+      enabled = _ref$enabled === void 0 ? true : _ref$enabled,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
 
   var _useThree = fiber.useThree(),
@@ -737,37 +739,34 @@ var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
       scene = _useContext.scene,
       camera = _useContext.camera;
 
-  var _useState = React.useState(_extends__default["default"]({
-    width: size.width,
-    height: size.height,
-    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
-  }, props)),
-      options = _useState[0];
-
-  var _useState2 = React.useState(function () {
-    return new screenSpaceReflections.SSRPass(composer, scene, camera, options);
+  var _useState = React.useState(function () {
+    return new screenSpaceReflections.SSRPass(composer, scene, camera, _extends__default["default"]({
+      width: size.width * viewport.dpr,
+      height: size.height * viewport.dpr,
+      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
+    }, props));
   }),
-      pass = _useState2[0];
+      pass = _useState[0];
 
   React.useEffect(function () {
     Object.keys(props).forEach(function (key) {
@@ -775,24 +774,31 @@ var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
     });
   }, [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.defines.MAX_STEPS = props.MAX_STEPS;
-    pass.reflectionsPass.fullscreenMaterial.defines.NUM_BINARY_SEARCH_STEPS = props.NUM_BINARY_SEARCH_STEPS;
     pass.reflectionsPass.fullscreenMaterial.needsUpdate = true;
-  }, [props.useBlur, props.enableJittering, props.NUM_BINARY_SEARCH_STEPS, props.MAX_STEPS]);
+    pass.fullscreenMaterial.needsUpdate = true;
+  }, [enabled, props.useBlur, props.enableJittering, props.NUM_BINARY_SEARCH_STEPS, props.MAX_STEPS]);
   React.useEffect(function () {
     pass.setSize(size.width * viewport.dpr, size.height * viewport.dpr);
     pass.kawaseBlurPass.setSize(blurSize, blurSize);

package/dist/index.js

@@ -599,6 +599,7 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
 const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   let {
     blurSize = 512,
+    enabled = true,
     ...props
   } = _ref;
   const {
@@ -611,9 +612,9 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
     scene,
     camera
   } = useContext(EffectComposerContext);
-  const [options] = useState({
-    width: size.width,
-    height: size.height,
+  const [pass] = useState(() => new SSRPass(composer, scene, camera, {
+    width: size.width * viewport.dpr,
+    height: size.height * viewport.dpr,
     blurWidth: blurSize,
     blurHeight: blurSize,
     blurKernelSize: KernelSize.SMALL,
@@ -636,30 +637,36 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
     useNormalMap: true,
     useRoughnessMap: true,
     ...props
-  });
-  const [pass] = useState(() => new SSRPass(composer, scene, camera, options));
+  }));
   useEffect(() => {
     Object.keys(props).forEach(key => pass.reflectionUniforms[key] && (pass.reflectionUniforms[key].value = props[key]));
   }, [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.defines.MAX_STEPS = props.MAX_STEPS;
-    pass.reflectionsPass.fullscreenMaterial.defines.NUM_BINARY_SEARCH_STEPS = props.NUM_BINARY_SEARCH_STEPS;
     pass.reflectionsPass.fullscreenMaterial.needsUpdate = true;
-  }, [props.useBlur, props.enableJittering, props.NUM_BINARY_SEARCH_STEPS, props.MAX_STEPS]);
+    pass.fullscreenMaterial.needsUpdate = true;
+  }, [enabled, props.useBlur, props.enableJittering, props.NUM_BINARY_SEARCH_STEPS, props.MAX_STEPS]);
   useEffect(() => {
     pass.setSize(size.width * viewport.dpr, size.height * viewport.dpr);
     pass.kawaseBlurPass.setSize(blurSize, blurSize);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.4.0",
+  "version": "2.4.3",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -41,7 +41,7 @@
   "dependencies": {
     "postprocessing": "^6.28.1",
     "react-merge-refs": "^1.1.0",
-    "screen-space-reflections": "^1.0.6",
+    "screen-space-reflections": "^1.0.7",
     "three-stdlib": "^2.8.11"
   },
   "devDependencies": {