@react-three/postprocessing 2.11.3 → 2.11.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +2 -0
  2. package/dist/index.cjs +21 -7
  3. package/dist/index.js +22 -8
  4. package/package.json +1 -2
package/README.md CHANGED
@@ -1,8 +1,10 @@
1
1
  # react-postprocessing
2
2
 
3
3
  [![Version](https://img.shields.io/npm/v/@react-three/postprocessing?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)
4
+ [![Storybook](https://img.shields.io/static/v1?message=Storybook&style=flat&colorA=000000&colorB=000000&label=&logo=storybook&logoColor=ffffff)](https://pmndrs.github.io/react-postprocessing)
4
5
  [![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)
5
6
  [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ)
7
+ [![Open in GitHub Codespaces](https://img.shields.io/static/v1?&message=Open%20in%20%20Codespaces&style=flat&colorA=000000&colorB=000000&label=GitHub&logo=github&logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Freact-postprocessing)
6
8
 
7
9
  `react-postprocessing` is a
8
10
  [postprocessing](https://github.com/pmndrs/postprocessing) wrapper for
package/dist/index.cjs CHANGED
@@ -79,19 +79,33 @@ const EffectComposer = React.memo(React.forwardRef(({ children, camera: _camera,
79
79
  const group = React.useRef(null);
80
80
  const instance = fiber.useInstanceHandle(group);
81
81
  React.useLayoutEffect(() => {
82
- let effectPass;
82
+ const passes = [];
83
83
  if (group.current && instance.current && composer) {
84
- effectPass = new postprocessing.EffectPass(camera, ...instance.current.objects);
85
- effectPass.renderToScreen = true;
86
- composer.addPass(effectPass);
84
+ const children = instance.current.objects;
85
+ for (let i = 0; i < children.length; i++) {
86
+ const child = children[i];
87
+ if (child instanceof postprocessing.Effect) {
88
+ const effects = [];
89
+ while (children[i] instanceof postprocessing.Effect)
90
+ effects.push(children[i++]);
91
+ i--;
92
+ const pass = new postprocessing.EffectPass(camera, ...effects);
93
+ passes.push(pass);
94
+ }
95
+ else if (child instanceof postprocessing.Pass) {
96
+ passes.push(child);
97
+ }
98
+ }
99
+ for (const pass of passes)
100
+ composer === null || composer === void 0 ? void 0 : composer.addPass(pass);
87
101
  if (normalPass)
88
102
  normalPass.enabled = true;
89
103
  if (downSamplingPass)
90
104
  downSamplingPass.enabled = true;
91
105
  }
92
106
  return () => {
93
- if (effectPass)
94
- composer === null || composer === void 0 ? void 0 : composer.removePass(effectPass);
107
+ for (const pass of passes)
108
+ composer === null || composer === void 0 ? void 0 : composer.removePass(pass);
95
109
  if (normalPass)
96
110
  normalPass.enabled = false;
97
111
  if (downSamplingPass)
@@ -224,7 +238,7 @@ const wrapEffect = (effect, defaults) =>
224
238
  const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; },
225
239
  // eslint-disable-next-line react-hooks/exhaustive-deps
226
240
  [JSON.stringify(props)]);
227
- return (jsxRuntime.jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity": opacity, ...props, ref: ref, args: args }));
241
+ return (jsxRuntime.jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity-value": opacity, ...props, ref: ref, args: args }));
228
242
  });
229
243
  const useVector2 = (props, key) => {
230
244
  const value = props[key];
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ import * as THREE from 'three';
3
3
  import { HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
4
4
  import React, { createContext, forwardRef, useMemo, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState, useCallback } from 'react';
5
5
  import { useThree, useFrame, useInstanceHandle, createPortal, extend, useLoader } from '@react-three/fiber';
6
- import { EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, MaskFunction, DepthPickingPass, CopyPass, BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUT3DEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute } from 'postprocessing';
6
+ import { EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, DepthOfFieldEffect, MaskFunction, DepthPickingPass, CopyPass, BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUT3DEffect, TiltShiftEffect as TiltShiftEffect$1, EffectAttribute } from 'postprocessing';
7
7
  import { easing } from 'maath';
8
8
  import { isWebGL2Available } from 'three-stdlib';
9
9
  import { SSREffect } from 'screen-space-reflections';
@@ -59,19 +59,33 @@ const EffectComposer = React.memo(forwardRef(({ children, camera: _camera, scene
59
59
  const group = useRef(null);
60
60
  const instance = useInstanceHandle(group);
61
61
  useLayoutEffect(() => {
62
- let effectPass;
62
+ const passes = [];
63
63
  if (group.current && instance.current && composer) {
64
- effectPass = new EffectPass(camera, ...instance.current.objects);
65
- effectPass.renderToScreen = true;
66
- composer.addPass(effectPass);
64
+ const children = instance.current.objects;
65
+ for (let i = 0; i < children.length; i++) {
66
+ const child = children[i];
67
+ if (child instanceof Effect) {
68
+ const effects = [];
69
+ while (children[i] instanceof Effect)
70
+ effects.push(children[i++]);
71
+ i--;
72
+ const pass = new EffectPass(camera, ...effects);
73
+ passes.push(pass);
74
+ }
75
+ else if (child instanceof Pass) {
76
+ passes.push(child);
77
+ }
78
+ }
79
+ for (const pass of passes)
80
+ composer === null || composer === void 0 ? void 0 : composer.addPass(pass);
67
81
  if (normalPass)
68
82
  normalPass.enabled = true;
69
83
  if (downSamplingPass)
70
84
  downSamplingPass.enabled = true;
71
85
  }
72
86
  return () => {
73
- if (effectPass)
74
- composer === null || composer === void 0 ? void 0 : composer.removePass(effectPass);
87
+ for (const pass of passes)
88
+ composer === null || composer === void 0 ? void 0 : composer.removePass(pass);
75
89
  if (normalPass)
76
90
  normalPass.enabled = false;
77
91
  if (downSamplingPass)
@@ -204,7 +218,7 @@ const wrapEffect = (effect, defaults) =>
204
218
  const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; },
205
219
  // eslint-disable-next-line react-hooks/exhaustive-deps
206
220
  [JSON.stringify(props)]);
207
- return (jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity": opacity, ...props, ref: ref, args: args }));
221
+ return (jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity-value": opacity, ...props, ref: ref, args: args }));
208
222
  });
209
223
  const useVector2 = (props, key) => {
210
224
  const value = props[key];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-three/postprocessing",
3
- "version": "2.11.3",
3
+ "version": "2.11.5",
4
4
  "description": "postprocessing wrapper for React and @react-three/fiber",
5
5
  "keywords": [
6
6
  "postprocessing",
@@ -55,7 +55,6 @@
55
55
  "devDependencies": {
56
56
  "@react-three/drei": "^9.68.2",
57
57
  "@react-three/fiber": "^8.13.0",
58
- "@rollup/plugin-babel": "^6.0.3",
59
58
  "@rollup/plugin-commonjs": "^24.1.0",
60
59
  "@rollup/plugin-node-resolve": "^15.0.2",
61
60
  "@rollup/plugin-typescript": "^11.1.0",