@react-three/postprocessing 2.4.4 → 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,7 +1,9 @@
-import React from 'react';
+/// <reference types="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 */
@@ -43,5 +45,5 @@ declare type SSRProps = {
     /** If roughness maps should be taken account of when calculating reflections */
     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,
@@ -741,8 +724,8 @@ var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
 
   var _useState = React.useState(function () {
     return new screenSpaceReflections.SSRPass(scene, camera, _extends__default["default"]({
-      width: size.width * viewport.dpr,
-      height: size.height * viewport.dpr,
+      width: size.width * viewport.dpr * resolutionScale,
+      height: size.height * viewport.dpr * resolutionScale,
       blurWidth: blurSize,
       blurHeight: blurSize,
       blurKernelSize: postprocessing.KernelSize.SMALL,
@@ -772,6 +755,7 @@ var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
     Object.keys(props).forEach(function (key) {
       return pass.reflectionUniforms[key] && (pass.reflectionUniforms[key].value = props[key]);
     });
+    invalidate();
   }, [props]);
   React.useEffect(function () {
     // Steps
@@ -798,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
@@ -613,8 +613,8 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
     camera
   } = useContext(EffectComposerContext);
   const [pass] = useState(() => new SSRPass(scene, camera, {
-    width: size.width * viewport.dpr,
-    height: size.height * viewport.dpr,
+    width: size.width * viewport.dpr * resolutionScale,
+    height: size.height * viewport.dpr * resolutionScale,
     blurWidth: blurSize,
     blurHeight: blurSize,
     blurKernelSize: KernelSize.SMALL,
@@ -640,6 +640,7 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   }));
   useEffect(() => {
     Object.keys(props).forEach(key => pass.reflectionUniforms[key] && (pass.reflectionUniforms[key].value = props[key]));
+    invalidate();
   }, [props]);
   useEffect(() => {
     // Steps
@@ -666,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.4",
+  "version": "2.4.5",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",