@react-three/postprocessing 2.4.4 → 2.5.0

package/dist/EffectComposer.d.ts

@@ -1,7 +1,6 @@
-import * as THREE from 'three';
+import { TextureDataType } from 'three';
 import React from 'react';
 import { EffectComposer as EffectComposerImpl, NormalPass, DepthDownsamplingPass } from 'postprocessing';
-import { TextureDataType } from 'three';
 export declare const EffectComposerContext: React.Context<{
     composer: EffectComposerImpl;
     normalPass: NormalPass | null;

package/dist/effects/SSR.d.ts

@@ -1,47 +1,55 @@
 import React from 'react';
 declare type SSRProps = {
-    /** Enables the effect pass */
-    enabled?: boolean;
-    /** 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: React.ForwardRefExoticComponent<SSRProps & React.RefAttributes<SSRPass>>;
+export declare const SSR: React.ForwardRefExoticComponent<SSRProps & React.RefAttributes<SSREffect>>;
 export {};

package/dist/index.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var postprocessing = require('postprocessing');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
-var THREE = require('three');
+var three = require('three');
 var fiber = require('@react-three/fiber');
 var _extends = require('@babel/runtime/helpers/extends');
 var _construct = require('@babel/runtime/helpers/construct');
@@ -15,27 +15,8 @@ var screenSpaceReflections = require('screen-space-reflections');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _construct__default = /*#__PURE__*/_interopDefaultLegacy(_construct);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
@@ -80,12 +61,12 @@ var wrapEffect = function wrapEffect(effectImpl, defaultBlendMode) {
 var useVector2 = function useVector2(props, key) {
   var vec = props[key];
   return React.useMemo(function () {
-    if (vec instanceof THREE.Vector2) {
-      return new THREE.Vector2().set(vec.x, vec.y);
+    if (vec instanceof three.Vector2) {
+      return new three.Vector2().set(vec.x, vec.y);
     } else if (Array.isArray(vec)) {
       var x = vec[0],
           y = vec[1];
-      return new THREE.Vector2().set(x, y);
+      return new three.Vector2().set(x, y);
     }
   }, [vec]);
 };
@@ -145,7 +126,7 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
       _ref$multisampling = _ref.multisampling,
       multisampling = _ref$multisampling === void 0 ? 8 : _ref$multisampling,
       _ref$frameBufferType = _ref.frameBufferType,
-      frameBufferType = _ref$frameBufferType === void 0 ? THREE__namespace.HalfFloatType : _ref$frameBufferType;
+      frameBufferType = _ref$frameBufferType === void 0 ? three.HalfFloatType : _ref$frameBufferType;
 
   var _useThree = fiber.useThree(),
       gl = _useThree.gl,
@@ -262,7 +243,7 @@ var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref
   }, [camera, props]);
   React.useLayoutEffect(function () {
     if (target) {
-      var vec = target instanceof THREE.Vector3 ? new THREE.Vector3().set(target.x, target.y, target.z) : new THREE.Vector3().set(target[0], target[1], target[2]);
+      var vec = target instanceof three.Vector3 ? new three.Vector3().set(target.x, target.y, target.z) : new three.Vector3().set(target[0], target[1], target[2]);
       effect.target = vec;
     }
 
@@ -673,10 +654,10 @@ var Texture = /*#__PURE__*/React.forwardRef(function Texture(_ref, ref) {
       texture = _ref.texture,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
 
-  var t = fiber.useLoader(THREE.TextureLoader, textureSrc);
+  var t = fiber.useLoader(three.TextureLoader, textureSrc);
   React.useLayoutEffect(function () {
-    t.encoding = THREE.sRGBEncoding;
-    t.wrapS = t.wrapT = THREE.RepeatWrapping;
+    t.encoding = three.sRGBEncoding;
+    t.wrapS = t.wrapT = three.RepeatWrapping;
   }, [t]);
   var effect = React.useMemo(function () {
     return new postprocessing.TextureEffect(_extends__default["default"]({}, props, {
@@ -720,97 +701,38 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
   });
 });
 
-var _excluded = ["blurSize", "enabled"];
+var _excluded = ["ENABLE_BLUR", "USE_MRT"];
 
 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,
+  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,
-      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
+  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];
     });
-  }, [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;
-  }, [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);
     invalidate();
-  }, [blurSize, size, viewport, composer, pass, invalidate]);
-  React.useLayoutEffect(function () {
-    composer.addPass(pass);
-    return function () {
-      composer.removePass(pass);
-    };
-  }, [composer, pass]);
-  return null;
+  }, [props]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect
+  });
 });
 
 exports.Bloom = Bloom;

package/dist/index.js

@@ -1,12 +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 * as THREE from 'three';
-import { Vector2, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping } from 'three';
+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;
 
@@ -96,7 +95,7 @@ const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, r
     disableNormalPass,
     stencilBuffer,
     multisampling = 8,
-    frameBufferType = THREE.HalfFloatType
+    frameBufferType = HalfFloatType
   } = _ref;
   const {
     gl,
@@ -598,87 +597,30 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
 
 const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   let {
-    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,
-    height: size.height * viewport.dpr,
-    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]));
-  }, [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;
-  }, [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);
-    invalidate();
-  }, [blurSize, size, viewport, composer, pass, invalidate]);
+  }), [SSREffect, scene, camera, ENABLE_BLUR, USE_MRT]);
   useLayoutEffect(() => {
-    composer.addPass(pass);
-    return () => {
-      composer.removePass(pass);
-    };
-  }, [composer, pass]);
-  return null;
+    Object.keys(props).forEach(key => effect[key] = props[key]);
+    invalidate();
+  }, [props]);
+  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.4",
+  "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.7",
+    "screen-space-reflections": "^2.0.4",
     "three-stdlib": "^2.8.11"
   },
   "devDependencies": {