@react-three/postprocessing 2.7.1 → 2.8.0

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.1",
+  "version": "2.8.0",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",