@react-three/postprocessing 2.4.2 → 2.4.5

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,49 @@
-import React from 'react';
+/// <reference types="react" />
 declare type SSRProps = {
     /** Enables the effect pass */
-    enabled: boolean;
+    enabled?: boolean;
+    /** Size of the output buffer */
+    resolutionScale?: number;
     /** 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 declare const SSR: import("react").ForwardRefExoticComponent<SSRProps & import("react").RefAttributes<SSRPass>>;
 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,10 +701,12 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
   });
 });
 
-var _excluded = ["blurSize", "enabled"];
+var _excluded = ["resolutionScale", "blurSize", "enabled"];
 
 var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
-  var _ref$blurSize = _ref.blurSize,
+  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,
@@ -739,42 +722,40 @@ 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(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
+    }, props));
   }),
-      pass = _useState2[0];
+      pass = _useState[0];
 
   React.useEffect(function () {
     Object.keys(props).forEach(function (key) {
       return pass.reflectionUniforms[key] && (pass.reflectionUniforms[key].value = props[key]);
     });
+    invalidate();
   }, [props]);
   React.useEffect(function () {
     // Steps
@@ -801,16 +782,17 @@ var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
 
     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, size.height * viewport.dpr);
+    pass.setSize(size.width * viewport.dpr * resolutionScale, size.height * viewport.dpr * resolutionScale);
     pass.kawaseBlurPass.setSize(blurSize, blurSize);
     invalidate();
-  }, [blurSize, size, viewport, composer, pass, invalidate]);
+  }, [resolutionScale, blurSize, size, viewport, composer, pass, invalidate]);
   React.useLayoutEffect(function () {
     composer.addPass(pass);
     return function () {
-      composer.removePass(pass);
+      composer.removePass(pass); //pass.dispose()
     };
   }, [composer, pass]);
   return null;

package/dist/index.js

@@ -1,7 +1,6 @@
 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';
+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';
@@ -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,6 +597,7 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
 
 const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   let {
+    resolutionScale = 1,
     blurSize = 512,
     enabled = true,
     ...props
@@ -612,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(scene, camera, {
+    width: size.width * viewport.dpr * resolutionScale,
+    height: size.height * viewport.dpr * resolutionScale,
     blurWidth: blurSize,
     blurHeight: blurSize,
     blurKernelSize: KernelSize.SMALL,
@@ -637,10 +637,10 @@ 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]));
+    invalidate();
   }, [props]);
   useEffect(() => {
     // Steps
@@ -667,16 +667,17 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
 
     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, size.height * viewport.dpr);
+    pass.setSize(size.width * viewport.dpr * resolutionScale, size.height * viewport.dpr * resolutionScale);
     pass.kawaseBlurPass.setSize(blurSize, blurSize);
     invalidate();
-  }, [blurSize, size, viewport, composer, pass, invalidate]);
+  }, [resolutionScale, blurSize, size, viewport, composer, pass, invalidate]);
   useLayoutEffect(() => {
     composer.addPass(pass);
     return () => {
-      composer.removePass(pass);
+      composer.removePass(pass); //pass.dispose()
     };
   }, [composer, pass]);
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.4.2",
+  "version": "2.4.5",
   "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": {