@react-three/postprocessing 2.9.1 → 2.9.2

package/README.md

@@ -4,7 +4,12 @@
 [![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)
 [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ)
 
-`react-postprocessing` is a [postprocessing](https://github.com/pmndrs/postprocessing) wrapper for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not (yet) meant for complex orchestration of effects, but can save you [hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a straight forward effects-chain.
+`react-postprocessing` is a
+[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for
+[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not
+(yet) meant for complex orchestration of effects, but can save you
+[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a
+straight forward effects-chain.
 
 ```bash
 npm install @react-three/postprocessing
@@ -20,17 +25,29 @@ npm install @react-three/postprocessing
 
 #### Why postprocessing and not three/examples/jsm/postprocessing?
 
-From [https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)
+From
+[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)
 
-> This library provides an EffectPass which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own blend function.
+> This library provides an EffectPass which automatically organizes and merges
+> any given combination of effects. This minimizes the amount of render
+> operations and makes it possible to combine many effects without the
+> performance penalties of traditional pass chaining. Additionally, every effect
+> can choose its own blend function.
 >
-> All fullscreen render operations also use a single triangle that fills the screen. Compared to using a quad, this approach harmonizes with modern GPU rasterization patterns and eliminates unnecessary fragment calculations along the screen diagonal. This is especially beneficial for GPGPU passes and effects that use complex fragment shaders.
+> All fullscreen render operations also use a single triangle that fills the
+> screen. Compared to using a quad, this approach harmonizes with modern GPU
+> rasterization patterns and eliminates unnecessary fragment calculations along
+> the screen diagonal. This is especially beneficial for GPGPU passes and
+> effects that use complex fragment shaders.
 
-Postprocessing also supports srgb-encoding out of the box, as well as WebGL2 MSAA (multi sample anti aliasing), which is react-postprocessing's default, you get high performance crisp results w/o jagged edges.
+Postprocessing also supports srgb-encoding out of the box, as well as WebGL2
+MSAA (multi sample anti aliasing), which is react-postprocessing's default, you
+get high performance crisp results w/o jagged edges.
 
 #### What does it look like?
 
-Here's an example combining a couple of effects ([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
+Here's an example combining a couple of effects
+([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
 
 <a href="https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?" target="_blank" rel="noopener">
 <img src="bubbles.jpg" alt="Bubbles Demo" />
@@ -38,7 +55,7 @@ Here's an example combining a couple of effects ([live demo](https://codesandbox
 
 ```jsx
 import React from 'react'
-import { EffectComposer, DepthOfField, Bloom, Noise, Vignette } from '@react-three/postprocessing'
+import { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'
 import { Canvas } from '@react-three/fiber'
 
 function App() {
@@ -58,93 +75,5 @@ function App() {
 
 ## Documentation
 
-#### EffectComposer
-
-The EffectComposer must wrap all your effects. It will manage them for you.
-
-```jsx
-<EffectComposer
-  enabled?: boolean
-  children: JSX.Element | JSX.Element[]
-  depthBuffer?: boolean
-  disableNormalPass?: boolean
-  stencilBuffer?: boolean
-  autoClear?: boolean
-  multisampling?: number
-  frameBufferType?: TextureDataType
-  /** For effects that support DepthDownsamplingPass */
-  resolutionScale?: number
-  renderPriority?: number
-  camera?: THREE.Camera
-  scene?: THREE.Scene
->
-```
-
-#### Selection/Select
-
-Some effects, like Outline or SelectiveBloom can select specific objects. To manage this in a declarative scene with just references can be messy, especially when things have to be grouped. These two components take care of it:
-
-```jsx
-<Selection
-  children: JSX.Element | JSX.Element[]
-  enabled?: boolean
->
-
-<Select
-  children: JSX.Element | JSX.Element[]
-  enabled?: boolean
->
-```
-
-You wrap everything into a selection, this one holds all the selections. Now you can individually select objects or groups. Effects that support selections (for instance `Outline`) will acknowledge it.
-
-```jsx
-<Selection>
-  <EffectComposer autoclear={false}>
-    <Outline blur edgeStrength={100} />
-  </EffectComposer>
-  <Select enabled>
-    <mesh />
-  </Select>
-</Selection>
-```
-
-Selection can be nested and group multiple object, higher up selection take precence over lower ones. The following for instance will select everything. Remove the outmost `enabled` and only the two mesh group is selected. You can flip the selections or bind them to interactions and state.
-
-```jsx
-<Select enabled>
-  <Select enabled>
-    <mesh />
-    <mesh />
-  </Select>
-  <Select>
-    <mesh />
-  </Select>
-</Select>
-```
-
-#### Selective bloom
-
-Bloom is selective by default, you control it not on the effect pass but on the materials by lifting their colors out of 0-1 range. a `luminanceThreshold` of 1 ensures that ootb nothing will glow, only the materials you pick. For this to work `toneMapped` has to be false on the materials, because it would otherwise clamp colors between 0 and 1 again.
-
-```jsx
-<Bloom mipmapBlur luminanceThreshold={1} />
-
-// ❌ will not glow, same as RGB [1,0,0]
-<meshStandardMaterial color="red"/>
-
-// ✅ will glow, same as RGB [2,0,0]
-<meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} />
-
-// ❌ will not glow, same as RGB [1,0,0]
-<meshBasicMaterial color="red" />
-
-// ❌ will not glow, same as RGB [1,0,0], tone-mapping will clamp colors between 0 and 1
-<meshBasicMaterial color={[2,0,0]} />
-
-// ✅ will glow, same as RGB [2,0,0]
-<meshBasicMaterial color={[2,0,0]} toneMapped={false} />
-```
-
-- [react-postprocessing exports](https://github.com/pmndrs/react-postprocessing/blob/master/api.md)
+- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)
 - [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)

package/dist/effects/ScanlineEffect.d.ts

@@ -2,4 +2,5 @@
 import { ScanlineEffect, BlendFunction } from 'postprocessing';
 export declare const Scanline: import("react").ForwardRefExoticComponent<{
     blendFunction: BlendFunction;
+    density: number;
 } & import("react").RefAttributes<typeof ScanlineEffect>>;

package/dist/index.cjs

@@ -56,7 +56,9 @@ const useVector2 = (props, key) => {
     }, [value]);
 };
 
-const Bloom = wrapEffect(postprocessing.BloomEffect, { blendFunction: postprocessing.BlendFunction.ADD });
+const Bloom = wrapEffect(postprocessing.BloomEffect, {
+    blendFunction: postprocessing.BlendFunction.ADD,
+});
 
 const BrightnessContrast = wrapEffect(postprocessing.BrightnessContrastEffect);
 
@@ -156,7 +158,13 @@ const EffectComposer = React.memo(React.forwardRef(({ children, camera: _camera,
 const DepthOfField = React.forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
     const invalidate = fiber.useThree((state) => state.invalidate);
     const { camera } = React.useContext(EffectComposerContext);
-    const effect = React.useMemo(() => new postprocessing.DepthOfFieldEffect(camera, props), [camera, props]);
+    const effect = React.useMemo(() => {
+        const effect = new postprocessing.DepthOfFieldEffect(camera, props);
+        // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
+        const maskMaterial = effect.maskPass.getFullscreenMaterial();
+        maskMaterial.maskFunction = postprocessing.MaskFunction.MULTIPLY_RGB_SET_ALPHA;
+        return effect;
+    }, [camera, props]);
     React.useLayoutEffect(() => {
         if (target && typeof target !== 'number') {
             const vec = target instanceof THREE.Vector3
@@ -308,7 +316,7 @@ const Pixelation = React.forwardRef(function Pixelation({ granularity = 5 }, ref
     return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-const Scanline = wrapEffect(postprocessing.ScanlineEffect, { blendFunction: postprocessing.BlendFunction.OVERLAY });
+const Scanline = wrapEffect(postprocessing.ScanlineEffect, { blendFunction: postprocessing.BlendFunction.OVERLAY, density: 1.25 });
 
 const addLight = (light, effect) => light.layers.enable(effect.selection.layer);
 const removeLight = (light, effect) => light.layers.disable(effect.selection.layer);
@@ -356,7 +364,6 @@ const SelectiveBloom = React.forwardRef(function SelectiveBloom({ selection = []
             };
         }
     }, [effect, invalidate, lights, selectionLayer]);
-    React.useRef();
     React.useEffect(() => {
         var _a;
         if (api && api.enabled) {

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, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUT3DEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute } from 'postprocessing';
+import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, MaskFunction, 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';
 import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef, useMemo, createContext, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState } from 'react';
 import * as THREE from 'three';
@@ -36,7 +36,9 @@ const useVector2 = (props, key) => {
     }, [value]);
 };
 
-const Bloom = wrapEffect(BloomEffect, { blendFunction: BlendFunction.ADD });
+const Bloom = wrapEffect(BloomEffect, {
+    blendFunction: BlendFunction.ADD,
+});
 
 const BrightnessContrast = wrapEffect(BrightnessContrastEffect);
 
@@ -136,7 +138,13 @@ const EffectComposer = React.memo(forwardRef(({ children, camera: _camera, scene
 const DepthOfField = forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
     const invalidate = useThree((state) => state.invalidate);
     const { camera } = useContext(EffectComposerContext);
-    const effect = useMemo(() => new DepthOfFieldEffect(camera, props), [camera, props]);
+    const effect = useMemo(() => {
+        const effect = new DepthOfFieldEffect(camera, props);
+        // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
+        const maskMaterial = effect.maskPass.getFullscreenMaterial();
+        maskMaterial.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
+        return effect;
+    }, [camera, props]);
     useLayoutEffect(() => {
         if (target && typeof target !== 'number') {
             const vec = target instanceof Vector3
@@ -288,7 +296,7 @@ const Pixelation = forwardRef(function Pixelation({ granularity = 5 }, ref) {
     return jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-const Scanline = wrapEffect(ScanlineEffect, { blendFunction: BlendFunction.OVERLAY });
+const Scanline = wrapEffect(ScanlineEffect, { blendFunction: BlendFunction.OVERLAY, density: 1.25 });
 
 const addLight = (light, effect) => light.layers.enable(effect.selection.layer);
 const removeLight = (light, effect) => light.layers.disable(effect.selection.layer);
@@ -336,7 +344,6 @@ const SelectiveBloom = forwardRef(function SelectiveBloom({ selection = [], sele
             };
         }
     }, [effect, invalidate, lights, selectionLayer]);
-    useRef();
     useEffect(() => {
         var _a;
         if (api && api.enabled) {

package/dist/util.d.ts

@@ -9,5 +9,5 @@ export type EffectProps<T extends EffectConstructor> = ReactThreeFiber.Node<T ex
     blendFunction?: BlendFunction;
     opacity?: number;
 };
-export declare const wrapEffect: <T extends EffectConstructor, P extends EffectProps<T>>(effect: T, defaults?: P | undefined) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+export declare const wrapEffect: <T extends EffectConstructor, P extends EffectProps<T> = EffectProps<T>>(effect: T, defaults?: P | undefined) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
 export declare const useVector2: (props: Record<string, unknown>, key: string) => THREE.Vector2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -33,6 +33,17 @@
       "eslint --fix"
     ]
   },
+  "scripts": {
+    "prebuild": "rimraf dist && yarn typegen",
+    "build": "rollup -c",
+    "prepare": "yarn build",
+    "eslint": "eslint . --fix --ext=js,ts,jsx,tsx",
+    "eslint:ci": "eslint . --ext=js,ts,jsx,tsx",
+    "test": "echo no tests yet",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
+    "typegen": "tsc --emitDeclarationOnly || true",
+    "release": "semantic-release"
+  },
   "dependencies": {
     "postprocessing": "^6.30.2",
     "screen-space-reflections": "2.5.0",
@@ -63,6 +74,7 @@
     "rimraf": "^5.0.0",
     "rollup": "^3.21.0",
     "rollup-plugin-filesize": "^10.0.0",
+    "semantic-release": "^21.0.2",
     "three": "^0.151.3",
     "typescript": "^5.0.4"
   },
@@ -70,14 +82,5 @@
     "@react-three/fiber": ">=8.0",
     "react": ">=18.0",
     "three": ">= 0.138.0 < 0.152.0"
-  },
-  "scripts": {
-    "prebuild": "rimraf dist && yarn typegen",
-    "build": "rollup -c",
-    "eslint": "eslint . --fix --ext=js,ts,jsx,tsx",
-    "eslint:ci": "eslint . --ext=js,ts,jsx,tsx",
-    "test": "echo no tests yet",
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
-    "typegen": "tsc --emitDeclarationOnly || true"
   }
-}
+}