Use TiltShiftEffect from PP (#338)

Author: hmans

.changeset/shaggy-carrots-rescue.md

@@ -0,0 +1,5 @@
+---
+"render-composer": patch
+---
+
+**Changed:** `<TiltShiftEffect>` now uses the tilt shift effect implementation provided by `postprocessing` 6.29.0.

package.json

@@ -48,7 +48,7 @@
     "@types/three": "^0.144.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^29.1.2",
-    "postprocessing": "^6.28.7",
+    "postprocessing": "^6.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",

packages/render-composer/package.json

@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.5.0",
-    "postprocessing": ">=6.28.5",
+    "postprocessing": ">=6.29.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "three": ">=0.143.0"

packages/render-composer/src/effects/TiltShiftEffect.tsx

@@ -1,100 +1,9 @@
 import * as PP from "postprocessing"
-import { $, Input, Resolution, Snippet, Vec2, Vec3 } from "shader-composer"
-import {
-  InputColor,
-  PostProcessingEffectMaster,
-  ShaderComposerEffect
-} from "shader-composer-postprocessing"
 import { usePostProcessingEffect } from "../lib/usePostProcessingEffect"
 
-export type TiltShiftEffectProps = ConstructorParameters<
-  typeof TiltShiftEffectImpl
->[0]
-
-export const TiltShiftEffect = (props: TiltShiftEffectProps) => {
-  usePostProcessingEffect(() => new TiltShiftEffectImpl(props), props)
+export const TiltShiftEffect = (
+  props: ConstructorParameters<typeof PP.TiltShiftEffect>[0]
+) => {
+  usePostProcessingEffect(() => new PP.TiltShiftEffect(props), props)
   return null
 }
-
-export type TiltShiftEffectArgs = {
-  blendFunction?: PP.BlendFunction
-}
-
-const random = Snippet(
-  (random) => $`
-  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);
-  }
-`
-)
-
-const TiltShiftUnit = (
-  inputColor: Input<"vec3">,
-  start: Input<"vec2">,
-  end: Input<"vec2">,
-  delta: Input<"vec2">,
-  blurRadius: Input<"float">,
-  gradientRadius: Input<"float">,
-  sampleCount: Input<"float">
-) =>
-  Vec3(inputColor, {
-    fragment: {
-      body: $`
-      vec3 color = vec3(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)) / ${gradientRadius}) * ${blurRadius};
-
-      float firstSample = ${sampleCount} / -2.0;
-      float lastSample = ${sampleCount} / 2.0;
-
-      // for (float t = -30.0; t <= 30.0; t++) {
-      for (float t = firstSample; t <= lastSample; t++) {
-          float percent = (t + offset - 0.5) / lastSample;
-          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 += vec3(sample_t) * weight;
-          total += weight;
-      }
-
-      value = color / total;
-
-      /* switch back from pre-multiplied alpha */
-      // value.rgb /= value.a + 0.00001;
-    `
-    }
-  })
-
-export class TiltShiftEffectImpl extends ShaderComposerEffect {
-  constructor({
-    blendFunction = PP.BlendFunction.NORMAL
-  }: TiltShiftEffectArgs) {
-    super({
-      blendFunction,
-      root: PostProcessingEffectMaster({
-        color: TiltShiftUnit(
-          InputColor,
-          Vec2([0, 0.5]),
-          Vec2([1, 0.5]),
-          Vec2([1, 1]),
-          10,
-          400,
-          40
-        )
-      })
-    })
-  }
-}