@react-three/postprocessing 2.4.5 → 2.5.1

package/README.md

@@ -4,7 +4,7 @@
 [![Downloads](https://img.shields.io/npm/dt/@react-three/postprocessing.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)
 [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ)
 
-`react-postprocessing` is a [postprocessing](https://github.com/vanruesc/postprocessing) wrapper for [@react-three/fiber](https://github.com/pmndrs/@react-three/fiber). This is not (yet) meant for complex orchestration of effects, but can save you [hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a straight forward effects-chain.
+`react-postprocessing` is a [postprocessing](https://github.com/pmndrs/postprocessing) wrapper for [@react-three/fiber](https://github.com/pmndrs/@react-three/fiber). This is not (yet) meant for complex orchestration of effects, but can save you [hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a straight forward effects-chain.
 
 ```bash
 npm install @react-three/postprocessing
@@ -20,7 +20,7 @@ npm install @react-three/postprocessing
 
 #### Why postprocessing and not three/examples/jsm/postprocessing?
 
-From [https://github.com/vanruesc/postprocessing](https://github.com/vanruesc/postprocessing#performance)
+From [https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)
 
 > This library provides an EffectPass which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own blend function.
 >

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.5",
+  "version": "2.5.1",
   "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.6",
     "three-stdlib": "^2.8.11"
   },
   "devDependencies": {