@react-three/postprocessing 2.2.6 → 2.3.0

package/README.md

@@ -72,6 +72,8 @@ The EffectComposer must wrap all your effects. It will manage them for you.
   autoClear?: boolean
   multisampling?: number
   frameBufferType?: TextureDataType
+  /** For effects that support DepthDownsamplingPass */
+  resolutionScale?: number
   renderPriority?: number
   camera?: THREE.Camera
   scene?: THREE.Scene

package/dist/EffectComposer.d.ts

@@ -1,12 +1,14 @@
 import * as THREE from 'three';
 import React from 'react';
-import { EffectComposer as EffectComposerImpl, NormalPass } from 'postprocessing';
+import { EffectComposer as EffectComposerImpl, NormalPass, DepthDownsamplingPass } from 'postprocessing';
 import { TextureDataType } from 'three';
 export declare const EffectComposerContext: React.Context<{
     composer: EffectComposerImpl;
     normalPass: NormalPass | null;
+    downSamplingPass: DepthDownsamplingPass | null;
     camera: THREE.Camera;
     scene: THREE.Scene;
+    resolutionScale?: number;
 }>;
 export declare type EffectComposerProps = {
     enabled?: boolean;
@@ -15,6 +17,7 @@ export declare type EffectComposerProps = {
     disableNormalPass?: boolean;
     stencilBuffer?: boolean;
     autoClear?: boolean;
+    resolutionScale?: number;
     multisampling?: number;
     frameBufferType?: TextureDataType;
     renderPriority?: number;

package/dist/effects/Glitch.d.ts

@@ -2,7 +2,7 @@ import { GlitchEffect, GlitchMode } from 'postprocessing';
 import React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
 export declare type GlitchProps = ConstructorParameters<typeof GlitchEffect>[0] & Partial<{
-    mode: typeof GlitchMode;
+    mode: typeof GlitchMode[keyof typeof GlitchMode];
     active: boolean;
     delay: ReactThreeFiber.Vector2;
     duration: ReactThreeFiber.Vector2;
@@ -20,7 +20,7 @@ export declare const Glitch: React.ForwardRefExoticComponent<{
     columns?: number;
     ratio?: number;
 } & Partial<{
-    mode: typeof GlitchMode;
+    mode: typeof GlitchMode[keyof typeof GlitchMode];
     active: boolean;
     delay: ReactThreeFiber.Vector2;
     duration: ReactThreeFiber.Vector2;

package/dist/index.cjs.js

@@ -131,6 +131,7 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
   var children = _ref.children,
       camera = _ref.camera,
       scene = _ref.scene,
+      resolutionScale = _ref.resolutionScale,
       _ref$enabled = _ref.enabled,
       enabled = _ref$enabled === void 0 ? true : _ref$enabled,
       _ref$renderPriority = _ref.renderPriority,
@@ -155,11 +156,13 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
   camera = camera || defaultCamera;
 
   var _useMemo = React.useMemo(function () {
+    var webGL2Available = threeStdlib.isWebGL2Available(); // Initialize composer
+
     // Initialize composer
     var effectComposer = new postprocessing.EffectComposer(gl, {
       depthBuffer: depthBuffer,
       stencilBuffer: stencilBuffer,
-      multisampling: multisampling > 0 && threeStdlib.isWebGL2Available() ? multisampling : 0,
+      multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
       frameBufferType: frameBufferType
     }); // Add render pass
 
@@ -167,19 +170,31 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
     effectComposer.addPass(new postprocessing.RenderPass(scene, camera)); // Create normal pass
 
     // Create normal pass
-    var pass = disableNormalPass ? null : new postprocessing.NormalPass(scene, camera);
-    if (pass) pass.enabled = false;
-
-    if (pass) {
-      effectComposer.addPass(pass);
+    var downSamplingPass = null;
+    var normalPass = null;
+
+    if (!disableNormalPass) {
+      normalPass = new postprocessing.NormalPass(scene, camera);
+      normalPass.enabled = false;
+      effectComposer.addPass(normalPass);
+
+      if (resolutionScale !== undefined && webGL2Available) {
+        downSamplingPass = new postprocessing.DepthDownsamplingPass({
+          normalBuffer: normalPass.texture,
+          resolutionScale: resolutionScale
+        });
+        downSamplingPass.enabled = false;
+        effectComposer.addPass(downSamplingPass);
+      }
     }
 
-    return [effectComposer, pass];
-  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass]),
+    return [effectComposer, normalPass, downSamplingPass];
+  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass, resolutionScale]),
       composer = _useMemo[0],
-      normalPass = _useMemo[1];
+      normalPass = _useMemo[1],
+      downSamplingPass = _useMemo[2];
 
-  React.useLayoutEffect(function () {
+  React.useEffect(function () {
     return composer == null ? void 0 : composer.setSize(size.width, size.height);
   }, [composer, size]);
   fiber.useFrame(function (_, delta) {
@@ -194,25 +209,29 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
 
     if (group.current && group.current.__r3f && composer) {
       effectPass = _construct__default["default"](postprocessing.EffectPass, [camera].concat(group.current.__r3f.objects));
-      composer.addPass(effectPass);
       effectPass.renderToScreen = true;
+      composer.addPass(effectPass);
       if (normalPass) normalPass.enabled = true;
+      if (downSamplingPass) downSamplingPass.enabled = true;
     }
 
     return function () {
       if (effectPass) composer == null ? void 0 : composer.removePass(effectPass);
       if (normalPass) normalPass.enabled = false;
+      if (downSamplingPass) downSamplingPass.enabled = false;
     };
-  }, [composer, children, camera]); // Memoize state, otherwise it would trigger all consumers on every render
+  }, [composer, children, camera, normalPass, downSamplingPass]); // Memoize state, otherwise it would trigger all consumers on every render
 
   var state = React.useMemo(function () {
     return {
       composer: composer,
       normalPass: normalPass,
+      downSamplingPass: downSamplingPass,
+      resolutionScale: resolutionScale,
       camera: camera,
       scene: scene
     };
-  }, [composer, normalPass, camera, scene]); // Expose the composer
+  }, [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]); // Expose the composer
 
   React.useImperativeHandle(ref, function () {
     return composer;
@@ -594,15 +613,17 @@ var Sepia = wrapEffect(postprocessing.SepiaEffect);
 var SSAO = /*#__PURE__*/React.forwardRef(function SSAO(props, ref) {
   var _useContext = React.useContext(EffectComposerContext),
       camera = _useContext.camera,
-      normalPass = _useContext.normalPass;
+      normalPass = _useContext.normalPass,
+      downSamplingPass = _useContext.downSamplingPass,
+      resolutionScale = _useContext.resolutionScale;
 
   var effect = React.useMemo(function () {
-    if (normalPass === null) {
+    if (normalPass === null && downSamplingPass === null) {
       console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
       return null;
     }
 
-    return new postprocessing.SSAOEffect(camera, normalPass.renderTarget.texture, _extends__default["default"]({
+    return new postprocessing.SSAOEffect(camera, normalPass ? normalPass.texture : null, _extends__default["default"]({
       blendFunction: postprocessing.BlendFunction.MULTIPLY,
       samples: 30,
       rings: 4,
@@ -615,7 +636,10 @@ var SSAO = /*#__PURE__*/React.forwardRef(function SSAO(props, ref) {
       scale: 0.5,
       bias: 0.5,
       intensity: 1.0,
-      color: null
+      color: null,
+      // @ts-ignore
+      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
+      resolutionScale: resolutionScale != null ? resolutionScale : 1
     }, props));
   }, [camera, normalPass, props]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {

package/dist/index.js

@@ -1,5 +1,5 @@
-import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, 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, useRef, useImperativeHandle, useContext, useState, useEffect } from 'react';
+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 { useThree, useFrame, useLoader } from '@react-three/fiber';
@@ -87,6 +87,7 @@ const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, r
     children,
     camera,
     scene,
+    resolutionScale,
     enabled = true,
     renderPriority = 1,
     autoClear = true,
@@ -104,27 +105,39 @@ const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, r
   } = useThree();
   scene = scene || defaultScene;
   camera = camera || defaultCamera;
-  const [composer, normalPass] = useMemo(() => {
-    // Initialize composer
+  const [composer, normalPass, downSamplingPass] = useMemo(() => {
+    const webGL2Available = isWebGL2Available(); // Initialize composer
+
     const effectComposer = new EffectComposer$1(gl, {
       depthBuffer,
       stencilBuffer,
-      multisampling: multisampling > 0 && isWebGL2Available() ? multisampling : 0,
+      multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
       frameBufferType
     }); // Add render pass
 
     effectComposer.addPass(new RenderPass(scene, camera)); // Create normal pass
 
-    const pass = disableNormalPass ? null : new NormalPass(scene, camera);
-    if (pass) pass.enabled = false;
-
-    if (pass) {
-      effectComposer.addPass(pass);
+    let downSamplingPass = null;
+    let normalPass = null;
+
+    if (!disableNormalPass) {
+      normalPass = new NormalPass(scene, camera);
+      normalPass.enabled = false;
+      effectComposer.addPass(normalPass);
+
+      if (resolutionScale !== undefined && webGL2Available) {
+        downSamplingPass = new DepthDownsamplingPass({
+          normalBuffer: normalPass.texture,
+          resolutionScale
+        });
+        downSamplingPass.enabled = false;
+        effectComposer.addPass(downSamplingPass);
+      }
     }
 
-    return [effectComposer, pass];
-  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass]);
-  useLayoutEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
+    return [effectComposer, normalPass, downSamplingPass];
+  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass, resolutionScale]);
+  useEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
   useFrame((_, delta) => {
     if (enabled) {
       gl.autoClear = autoClear;
@@ -137,23 +150,27 @@ const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, r
 
     if (group.current && group.current.__r3f && composer) {
       effectPass = new EffectPass(camera, ...group.current.__r3f.objects);
-      composer.addPass(effectPass);
       effectPass.renderToScreen = true;
+      composer.addPass(effectPass);
       if (normalPass) normalPass.enabled = true;
+      if (downSamplingPass) downSamplingPass.enabled = true;
     }
 
     return () => {
       if (effectPass) composer == null ? void 0 : composer.removePass(effectPass);
       if (normalPass) normalPass.enabled = false;
+      if (downSamplingPass) downSamplingPass.enabled = false;
     };
-  }, [composer, children, camera]); // Memoize state, otherwise it would trigger all consumers on every render
+  }, [composer, children, camera, normalPass, downSamplingPass]); // Memoize state, otherwise it would trigger all consumers on every render
 
   const state = useMemo(() => ({
     composer,
     normalPass,
+    downSamplingPass,
+    resolutionScale,
     camera,
     scene
-  }), [composer, normalPass, camera, scene]); // Expose the composer
+  }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]); // Expose the composer
 
   useImperativeHandle(ref, () => composer, [composer]);
   return /*#__PURE__*/React.createElement(EffectComposerContext.Provider, {
@@ -479,15 +496,17 @@ const Sepia = wrapEffect(SepiaEffect);
 const SSAO = /*#__PURE__*/forwardRef(function SSAO(props, ref) {
   const {
     camera,
-    normalPass
+    normalPass,
+    downSamplingPass,
+    resolutionScale
   } = useContext(EffectComposerContext);
   const effect = useMemo(() => {
-    if (normalPass === null) {
+    if (normalPass === null && downSamplingPass === null) {
       console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
       return null;
     }
 
-    return new SSAOEffect(camera, normalPass.renderTarget.texture, {
+    return new SSAOEffect(camera, normalPass ? normalPass.texture : null, {
       blendFunction: BlendFunction.MULTIPLY,
       samples: 30,
       rings: 4,
@@ -501,6 +520,9 @@ const SSAO = /*#__PURE__*/forwardRef(function SSAO(props, ref) {
       bias: 0.5,
       intensity: 1.0,
       color: null,
+      // @ts-ignore
+      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
+      resolutionScale: resolutionScale != null ? resolutionScale : 1,
       ...props
     });
   }, [camera, normalPass, props]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -38,48 +38,48 @@
     "typegen": "tsc --emitDeclarationOnly || true"
   },
   "dependencies": {
-    "postprocessing": "6.24.1",
+    "postprocessing": "6.26.3",
     "react-merge-refs": "^1.1.0",
-    "three-stdlib": "^2.8.6"
+    "three-stdlib": "^2.8.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-modules-commonjs": "7.16.5",
-    "@babel/plugin-transform-parameters": "7.16.5",
-    "@babel/plugin-transform-runtime": "7.16.5",
-    "@babel/plugin-transform-template-literals": "7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/preset-react": "7.16.5",
-    "@babel/preset-typescript": "^7.16.5",
-    "@react-three/fiber": "^7.0.24",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
+    "@babel/core": "^7.17.8",
+    "@babel/plugin-transform-modules-commonjs": "7.17.7",
+    "@babel/plugin-transform-parameters": "7.16.7",
+    "@babel/plugin-transform-runtime": "7.17.0",
+    "@babel/plugin-transform-template-literals": "7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@react-three/fiber": "^7.0.26",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.1",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/three": "^0.135.0",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
-    "@typescript-eslint/parser": "^5.8.0",
-    "eslint": "^8.5.0",
-    "eslint-config-prettier": "^8.3.0",
+    "@types/three": "^0.139.0",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7.0.4",
     "husky-run": "^0.0.0",
-    "lint-staged": "^12.1.3",
-    "prettier": "^2.5.1",
+    "lint-staged": "^12.3.7",
+    "prettier": "^2.6.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.61.1",
-    "rollup-plugin-filesize": "^9.1.1",
+    "rollup": "^2.70.1",
+    "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.5.4"
+    "typescript": "^4.6.3"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=7.0",