@react-three/postprocessing 2.7.0 → 2.8.0

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
@@ -128,7 +128,7 @@ Selection can be nested and group multiple object, higher up selection take prec
 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 luminanceThreshold={1} mipmapBlur />
+<Bloom mipmapBlur luminanceThreshold={1} />
 
 // ❌ will not glow, same as RGB [1,0,0]
 <meshStandardMaterial color="red"/>

package/dist/effects/TiltShift2.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { BlendFunction, Effect } from 'postprocessing';
+export declare class TiltShiftEffect extends Effect {
+    constructor({ blendFunction, blur, gradient, start, end, delta, }?: {
+        blendFunction?: BlendFunction;
+        blur?: number;
+        gradient?: number;
+        start?: number[];
+        end?: number[];
+        delta?: number[];
+    });
+}
+export declare const TiltShift2: import("react").ForwardRefExoticComponent<{
+    blendFunction?: BlendFunction;
+    blur?: number;
+    gradient?: number;
+    start?: number[];
+    end?: number[];
+    delta?: number[];
+} & Partial<{
+    blendFunction: BlendFunction;
+    opacity: number;
+}> & import("react").RefAttributes<typeof TiltShiftEffect>>;

package/dist/index.cjs

@@ -10,6 +10,7 @@ var fiber = require('@react-three/fiber');
 var _extends = require('@babel/runtime/helpers/extends');
 var _construct = require('@babel/runtime/helpers/construct');
 var threeStdlib = require('three-stdlib');
+var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
 var screenSpaceReflections = require('screen-space-reflections');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -18,6 +19,7 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _construct__default = /*#__PURE__*/_interopDefaultLegacy(_construct);
+var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
 
 var _excluded$9 = ["blendFunction", "opacity"];
 
@@ -702,6 +704,38 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
 
 var TiltShift = wrapEffect(postprocessing.TiltShiftEffect, postprocessing.BlendFunction.ADD);
 
+var TiltShiftShader = {
+  fragmentShader: "\n    // original shader by Evan Wallace\n    uniform float blur;\n    uniform float gradient;\n    uniform vec2 start;\n    uniform vec2 end;\n    uniform vec2 delta;\n\n    float random(vec3 scale, float seed) {\n      /* use the fragment position for a different seed per-pixel */\n      return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n    }\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n\n        vec4 color = vec4(0.0);\n        float total = 0.0;\n        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);\n        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);\n\n        /* randomize the lookup values to hide the fixed number of samples */\n        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));\n        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradient) * blur;\n\n        #pragma unroll_loop_start\n        for (float i = -3.0; i <= 3.0; i++) {\n            float percent = (i + offset - 0.5) / 3.0;\n            float weight = 1.0 - abs(percent);\n            vec4 sample_t = texture2D(inputBuffer, uv + delta / resolution * percent * radius);\n            /* switch to pre-multiplied alpha to correctly blur transparent images */\n            sample_t.rgb *= sample_t.a;\n            color += sample_t * weight;\n            total += weight;\n        }\n        #pragma unroll_loop_end\n\n        outputColor = color / total;\n        /* switch back from pre-multiplied alpha */\n        outputColor.rgb /= outputColor.a + 0.00001;\n    }\n    "
+};
+var TiltShiftEffect = /*#__PURE__*/function (_Effect) {
+  _inheritsLoose__default["default"](TiltShiftEffect, _Effect);
+
+  function TiltShiftEffect(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+        _ref$blendFunction = _ref.blendFunction,
+        blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.ADD : _ref$blendFunction,
+        _ref$blur = _ref.blur,
+        blur = _ref$blur === void 0 ? 20.0 : _ref$blur,
+        _ref$gradient = _ref.gradient,
+        gradient = _ref$gradient === void 0 ? 1100.0 : _ref$gradient,
+        _ref$start = _ref.start,
+        start = _ref$start === void 0 ? [0.5, 0.0] : _ref$start,
+        _ref$end = _ref.end,
+        end = _ref$end === void 0 ? [0.5, 1.0] : _ref$end,
+        _ref$delta = _ref.delta,
+        delta = _ref$delta === void 0 ? [1, 1] : _ref$delta;
+
+    return _Effect.call(this, 'TiltShiftEffect', TiltShiftShader.fragmentShader, {
+      blendFunction: blendFunction,
+      attributes: postprocessing.EffectAttribute.CONVOLUTION,
+      uniforms: new Map([['blur', new three.Uniform(blur)], ['gradient', new three.Uniform(gradient)], ['start', new three.Uniform(start)], ['end', new three.Uniform(end)], ['delta', new three.Uniform(delta)]])
+    }) || this;
+  }
+
+  return TiltShiftEffect;
+}(postprocessing.Effect);
+var TiltShift2 = wrapEffect(TiltShiftEffect, postprocessing.BlendFunction.NORMAL);
+
 var _excluded = ["ENABLE_BLUR", "USE_MRT"];
 
 var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
@@ -780,6 +814,8 @@ exports.Sepia = Sepia;
 exports.ShockWave = ShockWave;
 exports.Texture = Texture;
 exports.TiltShift = TiltShift;
+exports.TiltShift2 = TiltShift2;
+exports.TiltShiftEffect = TiltShiftEffect;
 exports.ToneMapping = ToneMapping;
 exports.Vignette = Vignette;
 exports.selectionContext = selectionContext;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,6 +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, TiltShiftEffect } 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 as TiltShiftEffect$1, Effect, EffectAttribute } 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 { Vector2, HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
 import { useThree, useFrame, useLoader } from '@react-three/fiber';
 import { isWebGL2Available } from 'three-stdlib';
 import _extends from '@babel/runtime/helpers/esm/extends';
@@ -599,7 +599,71 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
   });
 });
 
-const TiltShift = wrapEffect(TiltShiftEffect, BlendFunction.ADD);
+const TiltShift = wrapEffect(TiltShiftEffect$1, BlendFunction.ADD);
+
+const TiltShiftShader = {
+  fragmentShader: `
+    // original shader by Evan Wallace
+    uniform float blur;
+    uniform float gradient;
+    uniform vec2 start;
+    uniform vec2 end;
+    uniform vec2 delta;
+
+    float random(vec3 scale, float seed) {
+      /* use the fragment position for a different seed per-pixel */
+      return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
+    }
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+
+        vec4 color = vec4(0.0);
+        float total = 0.0;
+        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
+        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
+
+        /* randomize the lookup values to hide the fixed number of samples */
+        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
+        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
+        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradient) * blur;
+
+        #pragma unroll_loop_start
+        for (float i = -3.0; i <= 3.0; i++) {
+            float percent = (i + offset - 0.5) / 3.0;
+            float weight = 1.0 - abs(percent);
+            vec4 sample_t = texture2D(inputBuffer, uv + delta / resolution * percent * radius);
+            /* switch to pre-multiplied alpha to correctly blur transparent images */
+            sample_t.rgb *= sample_t.a;
+            color += sample_t * weight;
+            total += weight;
+        }
+        #pragma unroll_loop_end
+
+        outputColor = color / total;
+        /* switch back from pre-multiplied alpha */
+        outputColor.rgb /= outputColor.a + 0.00001;
+    }
+    `
+};
+class TiltShiftEffect extends Effect {
+  constructor(_temp) {
+    let {
+      blendFunction = BlendFunction.ADD,
+      blur = 20.0,
+      gradient = 1100.0,
+      start = [0.5, 0.0],
+      end = [0.5, 1.0],
+      delta = [1, 1]
+    } = _temp === void 0 ? {} : _temp;
+    super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
+      blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map([['blur', new Uniform(blur)], ['gradient', new Uniform(gradient)], ['start', new Uniform(start)], ['end', new Uniform(end)], ['delta', new Uniform(delta)]])
+    });
+  }
+
+}
+const TiltShift2 = wrapEffect(TiltShiftEffect, BlendFunction.NORMAL);
 
 const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   let {
@@ -644,4 +708,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, TiltShift, 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, TiltShift2, TiltShiftEffect, ToneMapping, Vignette, selectionContext };

package/package.json

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