@react-three/postprocessing 2.6.2 → 2.7.1

package/README.md

@@ -4,7 +4,7 @@
 [![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
@@ -123,5 +123,28 @@ Selection can be nested and group multiple object, higher up selection take prec
 </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)
 - [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)

package/dist/effects/TiltShift.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TiltShiftEffect, BlendFunction } from 'postprocessing';
+export declare const TiltShift: import("react").ForwardRefExoticComponent<{
+    blendFunction?: BlendFunction;
+    offset?: number;
+    rotation?: number;
+    focusArea?: number;
+    feather?: number;
+    bias?: number;
+    kernelSize?: KernelSize;
+    resolutionScale?: number;
+    resolutionX?: Resolution;
+    resolutionY?: Resolutio;
+} & Partial<{
+    blendFunction: BlendFunction;
+    opacity: number;
+}> & import("react").RefAttributes<typeof TiltShiftEffect>>;

package/dist/index.cjs

@@ -700,6 +700,8 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
   });
 });
 
+var TiltShift = wrapEffect(postprocessing.TiltShiftEffect, postprocessing.BlendFunction.ADD);
+
 var _excluded = ["ENABLE_BLUR", "USE_MRT"];
 
 var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
@@ -777,6 +779,7 @@ exports.SelectiveBloom = SelectiveBloom;
 exports.Sepia = Sepia;
 exports.ShockWave = ShockWave;
 exports.Texture = Texture;
+exports.TiltShift = TiltShift;
 exports.ToneMapping = ToneMapping;
 exports.Vignette = Vignette;
 exports.selectionContext = selectionContext;

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export * from './effects/ToneMapping';
 export * from './effects/Vignette';
 export * from './effects/ShockWave';
 export * from './effects/LUT';
+export * from './effects/TiltShift';
 export * from './effects/SSR';
 export * from './Selection';
 export * from './EffectComposer';

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, SMAAPreset, EdgeDetectionMode, SMAAImageLoader, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUTEffect } from 'postprocessing';
+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, TiltShiftEffect } from 'postprocessing';
 import React, { forwardRef, useMemo, useLayoutEffect, createContext, useEffect, useRef, useImperativeHandle, useContext, useState } from 'react';
 import { Vector2, HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping } from 'three';
 import { useThree, useFrame, useLoader } from '@react-three/fiber';
@@ -599,6 +599,8 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
   });
 });
 
+const TiltShift = wrapEffect(TiltShiftEffect, BlendFunction.ADD);
+
 const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   let {
     ENABLE_BLUR = true,
@@ -642,4 +644,4 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   });
 });
 
-export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, ToneMapping, Vignette, selectionContext };
+export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, TiltShift, ToneMapping, Vignette, selectionContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.6.2",
+  "version": "2.7.1",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -39,7 +39,7 @@
     "typegen": "tsc --emitDeclarationOnly || true"
   },
   "dependencies": {
-    "postprocessing": "^6.28.5",
+    "postprocessing": "^6.30.1",
     "react-merge-refs": "^1.1.0",
     "screen-space-reflections": "2.5.0",
     "three-stdlib": "^2.8.11"