@react-three/postprocessing 2.3.2 → 2.4.1

package/README.md

@@ -124,4 +124,4 @@ Selection can be nested and group multiple object, higher up selection take prec
 ```
 
 - [react-postprocessing exports](https://github.com/pmndrs/react-postprocessing/blob/master/api.md)
-- [postprocessing docs](https://vanruesc.github.io/postprocessing/public/docs/)
+- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)

package/dist/effects/SSR.d.ts

@@ -0,0 +1,47 @@
+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 */
+    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;
+    /** 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 */
+    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;
+    /** Roughness fade out */
+    roughnessFadeOut: 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 */
+    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;
+    /** 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 */
+    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;
+};
+export declare const SSR: React.ForwardRefExoticComponent<SSRProps & React.RefAttributes<SSRPass>>;
+export {};

package/dist/{index.cjs.js → index.cjs}

@@ -11,6 +11,7 @@ var _extends = require('@babel/runtime/helpers/extends');
 var _construct = require('@babel/runtime/helpers/construct');
 var threeStdlib = require('three-stdlib');
 var mergeRefs = require('react-merge-refs');
+var screenSpaceReflections = require('screen-space-reflections');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,7 +40,7 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _construct__default = /*#__PURE__*/_interopDefaultLegacy(_construct);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
-var _excluded$7 = ["blendFunction", "opacity"];
+var _excluded$8 = ["blendFunction", "opacity"];
 
 var isRef = function isRef(ref) {
   return !!ref.current;
@@ -56,7 +57,7 @@ var wrapEffect = function wrapEffect(effectImpl, defaultBlendMode) {
   return /*#__PURE__*/React.forwardRef(function Wrap(_ref, ref) {
     var blendFunction = _ref.blendFunction,
         opacity = _ref.opacity,
-        props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
+        props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$8);
 
     var invalidate = fiber.useThree(function (state) {
       return state.invalidate;
@@ -243,11 +244,11 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
   }, children));
 }));
 
-var _excluded$6 = ["target", "depthTexture"];
+var _excluded$7 = ["target", "depthTexture"];
 var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref) {
   var target = _ref.target,
       depthTexture = _ref.depthTexture,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -277,11 +278,11 @@ var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref
 
 var DotScreen = wrapEffect(postprocessing.DotScreenEffect);
 
-var _excluded$5 = ["active"];
+var _excluded$6 = ["active"];
 var Glitch = /*#__PURE__*/React.forwardRef(function Glitch(_ref, ref) {
   var _ref$active = _ref.active,
       active = _ref$active === void 0 ? true : _ref$active,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -321,10 +322,10 @@ var GodRays = /*#__PURE__*/React.forwardRef(function GodRays(props, ref) {
   });
 });
 
-var _excluded$4 = ["size"];
+var _excluded$5 = ["size"];
 var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
   var size = _ref.size,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$5);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -347,7 +348,7 @@ var HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
 
 var Noise = wrapEffect(postprocessing.NoiseEffect, postprocessing.BlendFunction.COLOR_DODGE);
 
-var _excluded$3 = ["enabled", "children"];
+var _excluded$4 = ["enabled", "children"];
 var selectionContext = /*#__PURE__*/React.createContext(null);
 function Selection(_ref) {
   var children = _ref.children,
@@ -373,7 +374,7 @@ function Select(_ref2) {
   var _ref2$enabled = _ref2.enabled,
       enabled = _ref2$enabled === void 0 ? false : _ref2$enabled,
       children = _ref2.children,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded$3);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded$4);
 
   var group = React.useRef(null);
   var api = React.useContext(selectionContext);
@@ -405,7 +406,7 @@ function Select(_ref2) {
   }, props), children);
 }
 
-var _excluded$2 = ["selection", "selectionLayer", "blendFunction", "patternTexture", "edgeStrength", "pulseSpeed", "visibleEdgeColor", "hiddenEdgeColor", "width", "height", "kernelSize", "blur", "xRay"];
+var _excluded$3 = ["selection", "selectionLayer", "blendFunction", "patternTexture", "edgeStrength", "pulseSpeed", "visibleEdgeColor", "hiddenEdgeColor", "width", "height", "kernelSize", "blur", "xRay"];
 var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
   var _ref$selection = _ref.selection,
       selection = _ref$selection === void 0 ? [] : _ref$selection,
@@ -422,7 +423,7 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       kernelSize = _ref.kernelSize,
       blur = _ref.blur,
       xRay = _ref.xRay;
-      _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
+      _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -666,11 +667,11 @@ var SMAA = /*#__PURE__*/React.forwardRef(function SMAA(_ref, ref) {
   });
 });
 
-var _excluded$1 = ["textureSrc", "texture"];
+var _excluded$2 = ["textureSrc", "texture"];
 var Texture = /*#__PURE__*/React.forwardRef(function Texture(_ref, ref) {
   var textureSrc = _ref.textureSrc,
       texture = _ref.texture,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
 
   var t = fiber.useLoader(THREE.TextureLoader, textureSrc);
   React.useLayoutEffect(function () {
@@ -695,11 +696,11 @@ var Vignette = wrapEffect(postprocessing.VignetteEffect);
 
 var ShockWave = wrapEffect(postprocessing.ShockWaveEffect);
 
-var _excluded = ["lut", "tetrahedralInterpolation"];
+var _excluded$1 = ["lut", "tetrahedralInterpolation"];
 var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
   var lut = _ref.lut,
       tetrahedralInterpolation = _ref.tetrahedralInterpolation,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -719,6 +720,96 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
   });
 });
 
+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(),
+      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(_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);
+  }),
+      pass = _useState2[0];
+
+  React.useEffect(function () {
+    Object.keys(props).forEach(function (key) {
+      return pass.reflectionUniforms[key] && (pass.reflectionUniforms[key].value = props[key]);
+    });
+  }, [props]);
+  React.useEffect(function () {
+    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;
+    }
+
+    if (props.enableJittering) {
+      pass.reflectionsPass.fullscreenMaterial.defines.USE_JITTERING = '';
+    } else {
+      delete pass.reflectionsPass.fullscreenMaterial.defines.USE_JITTERING;
+    }
+
+    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);
+    pass.fullscreenMaterial.defines.RENDER_MODE = enabled ? 0 : 4;
+    pass.reflectionsPass.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;
+});
+
 exports.Bloom = Bloom;
 exports.BrightnessContrast = BrightnessContrast;
 exports.ChromaticAberration = ChromaticAberration;
@@ -739,6 +830,7 @@ exports.Outline = Outline;
 exports.Pixelation = Pixelation;
 exports.SMAA = SMAA;
 exports.SSAO = SSAO;
+exports.SSR = SSR;
 exports.Scanline = Scanline;
 exports.Select = Select;
 exports.Selection = Selection;

package/dist/index.d.ts

@@ -23,5 +23,6 @@ export * from './effects/ToneMapping';
 export * from './effects/Vignette';
 export * from './effects/ShockWave';
 export * from './effects/LUT';
+export * from './effects/SSR';
 export * from './Selection';
 export * from './EffectComposer';

package/dist/index.js

@@ -1,4 +1,4 @@
-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 { 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 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';
@@ -6,6 +6,7 @@ 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';
 
 const isRef = ref => !!ref.current;
 
@@ -595,4 +596,84 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
   });
 });
 
-export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, ToneMapping, Vignette, selectionContext };
+const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
+  let {
+    blurSize = 512,
+    enabled = true,
+    ...props
+  } = _ref;
+  const {
+    size,
+    viewport,
+    invalidate
+  } = useThree();
+  const {
+    composer,
+    scene,
+    camera
+  } = useContext(EffectComposerContext);
+  const [options] = useState({
+    width: size.width,
+    height: size.height,
+    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,
+    ...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(() => {
+    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;
+    }
+
+    if (props.enableJittering) {
+      pass.reflectionsPass.fullscreenMaterial.defines.USE_JITTERING = '';
+    } else {
+      delete pass.reflectionsPass.fullscreenMaterial.defines.USE_JITTERING;
+    }
+
+    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);
+    pass.fullscreenMaterial.defines.RENDER_MODE = enabled ? 0 : 4;
+    pass.reflectionsPass.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]);
+  useLayoutEffect(() => {
+    composer.addPass(pass);
+    return () => {
+      composer.removePass(pass);
+    };
+  }, [composer, pass]);
+  return null;
+});
+
+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.3.2",
+  "version": "2.4.1",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -11,7 +11,8 @@
     "3d"
   ],
   "license": "MIT",
-  "main": "dist/index.cjs.js",
+  "type": "module",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -38,8 +39,9 @@
     "typegen": "tsc --emitDeclarationOnly || true"
   },
   "dependencies": {
-    "postprocessing": "6.26.3",
+    "postprocessing": "^6.28.1",
     "react-merge-refs": "^1.1.0",
+    "screen-space-reflections": "^1.0.6",
     "three-stdlib": "^2.8.11"
   },
   "devDependencies": {
@@ -84,12 +86,6 @@
   "peerDependencies": {
     "@react-three/fiber": ">=7.0",
     "react": ">=17.0",
-    "react-dom": ">=17.0",
     "three": ">=0.136.0"
-  },
-  "peerDependenciesMeta": {
-    "react-dom": {
-      "optional": true
-    }
   }
 }