From 6fa0e3ca6cf7d1719ca49345b5e57b3ce532b35a Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Sun, 12 Jan 2025 14:04:07 +0100
Subject: [PATCH] feat: add shock wave (#164)

* init shockwave effect

* wip shock wave effect

* add demo playground

* wip demo doc

* add depthpickingpass

* wip component depth picking pass fix issue / types

* wip doc demo

* wip doc

* wip doc

* fix doc

* fix documentation

* fix reviews PR

---------

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
---
 docs/.vitepress/config.ts                     |   1 +
 .../theme/components/pmdrs/ShockWaveDemo.vue  | 218 ++++++++++++++++++
 docs/components.d.ts                          |   1 +
 docs/guide/pmndrs/shock-wave.md               | 188 +++++++++++++++
 .../src/pages/postprocessing/shock-wave.vue   | 121 ++++++++++
 playground/src/router.ts                      |   1 +
 src/core/pmndrs/DepthPickingPassPmndrs.vue    |  31 +++
 src/core/pmndrs/ShockWavePmndrs.vue           |  72 ++++++
 src/core/pmndrs/index.ts                      |   6 +
 9 files changed, 639 insertions(+)
 create mode 100644 docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
 create mode 100644 docs/guide/pmndrs/shock-wave.md
 create mode 100644 playground/src/pages/postprocessing/shock-wave.vue
 create mode 100644 src/core/pmndrs/DepthPickingPassPmndrs.vue
 create mode 100644 src/core/pmndrs/ShockWavePmndrs.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 3cfba603..09bd028f 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -57,6 +57,7 @@ export default defineConfig({
           { text: 'Chromatic Aberration', link: '/guide/pmndrs/chromatic-aberration' },
           { text: 'Sepia', link: '/guide/pmndrs/sepia' },
           { text: 'Scanline', link: '/guide/pmndrs/scanline' },
+          { text: 'Shock Wave', link: '/guide/pmndrs/shock-wave' },
           { text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
           { text: 'Vignette', link: '/guide/pmndrs/vignette' },
           { text: 'Barrel blur', link: '/guide/pmndrs/barrel-blur' },
diff --git a/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue b/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
new file mode 100644
index 00000000..f6e06858
--- /dev/null
+++ b/docs/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { NoToneMapping, Shape, Vector3 } from 'three'
+import { computed, onUnmounted, reactive, ref, shallowRef } from 'vue'
+import { DepthPickingPassPmndrs, EffectComposerPmndrs, ShockWavePmndrs } from '@tresjs/post-processing'
+import { useElementBounding, useMouse, useParentElement } from '@vueuse/core'
+import { gsap } from 'gsap'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#8D404A',
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+}
+
+const shockWaveEffectRef = shallowRef(null)
+const elCanvasRef = ref(null)
+const depthPickingPassRef = ref(null)
+const meshHeartRef = ref(null)
+const mousePosition = ref(new Vector3())
+
+function createHeartShape(scale: number) {
+  const shape = new Shape()
+  const x = 0
+  const y = 0
+
+  shape.moveTo(x, y)
+  shape.bezierCurveTo(x, y, x - 0.5 * scale, y + 2.5 * scale, x - 2.5 * scale, y + 2.5 * scale)
+  shape.bezierCurveTo(x - 6.5 * scale, y + 2.5 * scale, x - 6.5 * scale, y - 1.5 * scale, x - 6.5 * scale, y - 1.5 * scale)
+  shape.bezierCurveTo(x - 6.5 * scale, y - 4.5 * scale, x - 3.5 * scale, y - 7 * scale, x, y - 9.5 * scale)
+  shape.bezierCurveTo(x + 3.5 * scale, y - 7 * scale, x + 6.5 * scale, y - 4.5 * scale, x + 6.5 * scale, y - 1.5 * scale)
+  shape.bezierCurveTo(x + 6.5 * scale, y - 1.5 * scale, x + 6.5 * scale, y + 2.5 * scale, x + 2.5 * scale, y + 2.5 * scale)
+  shape.bezierCurveTo(x + 0.5 * scale, y + 2.5 * scale, x, y, x, y)
+
+  return shape
+}
+
+const heartShapeFront = createHeartShape(0.35)
+
+const parentEl = useParentElement()
+const { x, y } = useMouse({ target: parentEl })
+const { width, height, left, top } = useElementBounding(parentEl)
+
+const extrudeSettings = reactive({
+  depth: 0.1,
+  bevelEnabled: true,
+  bevelSegments: 2,
+  steps: 2,
+  bevelSize: 0.25,
+  bevelThickness: 0.25,
+})
+
+const materialProps = reactive({
+  color: '#FF9999',
+  reflectivity: 0.75,
+  ior: 1.5,
+  roughness: 0.75,
+  clearcoat: 0.01,
+  clearcoatRoughness: 0.15,
+  transmission: 0.7,
+})
+
+let tl: gsap.core.Timeline
+
+const ctx = gsap.context(() => { })
+
+const { amplitude, waveSize, speed, maxRadius } = useControls({
+  amplitude: { value: 0.4, step: 0.01, max: 1.0 },
+  waveSize: { value: 0.5, step: 0.01, max: 1.0 },
+  speed: { value: 1.5, step: 0.1, max: 10.0 },
+  maxRadius: { value: 0.2, step: 0.01, max: 2 },
+})
+
+const cursorX = computed(() => ((x.value - left.value - width.value) / width.value) * 2.0 + 1.0)
+const cursorY = computed(() => -((y.value - top.value - height.value) / height.value) * 2.0 - 1.0)
+
+async function updateMousePosition() {
+  if (!elCanvasRef.value || !shockWaveEffectRef.value || !depthPickingPassRef.value) { return }
+
+  const ndcPosition = new Vector3(cursorX.value, cursorY.value, 0)
+
+  // Read depth from depth picking pass
+  ndcPosition.z = await depthPickingPassRef.value.pass.readDepth(ndcPosition)
+
+  ndcPosition.z = ndcPosition.z * 2.0 - 1.0
+
+  mousePosition.value.copy(ndcPosition.unproject(elCanvasRef.value.context.camera.value))
+}
+
+function triggerShockWave() {
+  if (!meshHeartRef.value || !shockWaveEffectRef.value) { return }
+
+  updateMousePosition()
+
+  shockWaveEffectRef.value.effect.explode()
+
+  const duration = getActiveDuration()
+
+  const durationSeconds = duration / 1000
+
+  ctx.add(() => {
+    tl?.kill()
+
+    tl = gsap.timeline()
+
+    tl.to(meshHeartRef.value.scale, {
+      duration: durationSeconds / 9,
+      x: 0.8,
+      y: 0.8,
+      z: 0.8,
+      ease: 'power2.inOut',
+    }).to(meshHeartRef.value.scale, {
+      duration: durationSeconds / 9,
+      x: 1.2,
+      y: 1.2,
+      z: 1.2,
+      ease: 'power2.inOut',
+    }).to(meshHeartRef.value.scale, {
+      duration: durationSeconds / 9,
+      x: 1,
+      y: 1,
+      z: 1,
+      ease: 'power2.inOut',
+    })
+  })
+
+  // Fallback for onFinish explode Shock Wave
+  // setTimeout(() => {
+  // console.log('Explode effect animation done')
+  // }, duration)
+}
+
+function getActiveDuration() {
+  // This function retrieves the duration for emitting the shock wave.
+  // For more details, see: https://github.com/pmndrs/postprocessing/blob/3d3df0576b6d49aec9e763262d5a1ff7429fd91a/src/effects/ShockWaveEffectRef.js#L258-L301
+
+  // To reduce the duration of the animation, you can decrease the values of maxRadius and waveSize.
+  // Note that the speed affects how quickly the shock wave radius increases over time, but not the total duration of the emit explode.
+
+  // Retrieve the values dynamically
+  const radiusMax = maxRadius.value.value
+  const wave = waveSize.value.value
+
+  // Duration formula: 2 * maxRadius + 3 * waveSize
+  const duration = 2 * radiusMax + 3 * wave
+
+  // Convert to milliseconds
+  return duration * 1000
+}
+
+onUnmounted(() => {
+  ctx.revert()
+})
+</script>
+
+<template>
+  <TresLeches style="left: initial;right:10px; top:10px;" />
+
+  <p class="doc-shock-wave-instructions text-xs font-semibold text-zinc-600">Click on the heart to distribute love</p>
+
+  <TresCanvas
+    ref="elCanvasRef"
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[0, 0, 10]"
+    />
+
+    <OrbitControls make-default auto-rotate />
+
+    <TresMesh ref="meshHeartRef" :position-y="2" @click="triggerShockWave">
+      <TresExtrudeGeometry :args="[heartShapeFront, extrudeSettings]" />
+      <TresMeshPhysicalMaterial
+        v-bind="materialProps"
+      />
+    </TresMesh>
+
+    <TresDirectionalLight
+      :position="[5, 5, 7.5]"
+      :intensity="2"
+    />
+
+    <ContactShadows
+      :opacity="1"
+      :position-y="-2.75"
+      :blur=".5"
+    />
+
+    <Suspense>
+      <Environment preset="night" />
+    </Suspense>
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <DepthPickingPassPmndrs ref="depthPickingPassRef" />
+        <ShockWavePmndrs ref="shockWaveEffectRef" :position="mousePosition" :amplitude="amplitude.value" :waveSize="waveSize.value" :speed="speed.value" :maxRadius="maxRadius.value" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
+
+<style scoped>
+.doc-shock-wave-instructions {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 0.65rem 0.85rem;
+  text-align: center;
+  color: #fff;
+  z-index: 2;
+  border-radius: 0px 10px 0px 0px;
+  background: linear-gradient(90deg, hsla(24, 100%, 83%, 1) 0%, hsla(341, 91%, 68%, 1) 100%);
+  margin: 0;
+}
+</style>
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 14007f1b..2bb9120c 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -26,6 +26,7 @@ declare module 'vue' {
     PixelationDemo: typeof import('./.vitepress/theme/components/pmdrs/PixelationDemo.vue')['default']
     PixelationThreeDemo: typeof import('./.vitepress/theme/components/three/PixelationThreeDemo.vue')['default']
     ScanlineDemo: typeof import('./.vitepress/theme/components/pmdrs/ScanlineDemo.vue')['default']
+    ShockWaveDemo: typeof import('./.vitepress/theme/components/pmdrs/ShockWaveDemo.vue')['default']
     SepiaDemo: typeof import('./.vitepress/theme/components/pmdrs/SepiaDemo.vue')['default']
     SMAAThreeDemo: typeof import('./.vitepress/theme/components/three/SMAAThreeDemo.vue')['default']
     TiltShiftDemo: typeof import('./.vitepress/theme/components/pmdrs/TiltShiftDemo.vue')['default']
diff --git a/docs/guide/pmndrs/shock-wave.md b/docs/guide/pmndrs/shock-wave.md
new file mode 100644
index 00000000..e2778043
--- /dev/null
+++ b/docs/guide/pmndrs/shock-wave.md
@@ -0,0 +1,188 @@
+# Shock Wave
+
+<DocsDemo>
+  <ShockWaveDemo />
+</DocsDemo>
+
+<details>
+  <summary>Demo code</summary>
+
+  <<< @/.vitepress/theme/components/pmdrs/ShockWaveDemo.vue{0}
+</details>
+
+The `ShockWave` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ShockWaveEffect.js~ShockWaveEffect.html) package. It simulates a shockwave effect originating from a center point, creating a ripple-like distortion in the scene. This effect can add dramatic impact to your scene by simulating explosions or other shockwave phenomena.
+
+## Usage
+
+The `<ShockWavePmndrs>` component is easy to use and provides customizable options to suit different visual styles. There are several possible techniques to achieve this. See [Events](#events) and [DepthPickingPass](#depthpickingpass) for more details.
+
+The main difference between `Events` and `DepthPickingPass` lies in the scope you want. `Events` is more suited for being used on a specific element, while `DepthPickingPass` is intended to be used for an entire scene (depth is calculated globally).
+
+### Events
+
+To determine the position of the shockwave effect, you can use Tres.js events. Tres.js allows you to handle user interactions directly and find the intersection point with objects in the scene. This technique is useful when you need to interact with specific objects based on user input.
+
+You can use various Tres.js events such as `click`, `pointer-enter`, etc., to trigger the shockwave effect. For more details about available events, see the [documentation](https://docs.tresjs.org/api/events.html).
+
+Here is an example of how to use events to trigger the shockwave effect:
+
+```vue{2,3,13-15,17-18,20-21,23-24,26-28,30-36,45,50-58}
+<script setup lang="ts">
+import { EffectComposerPmndrs, ShockWavePmndrs } from '@tresjs/post-processing'
+import { useMouse, useWindowSize } from '@vueuse/core'
+import { NoToneMapping, Vector3 } from 'three'
+import { computed, ref } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+
+const gl = {
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+}
+
+const effectProps = {
+  speed: 0.2,
+}
+
+const position = ref(new Vector3(0, 0, 0))
+const shockWaveEffectRef = ref(null)
+
+const { x, y } = useMouse()
+const { width, height } = useWindowSize()
+
+const cursorX = computed(() => (x.value / width.value) * 2.0 - 1.0)
+const cursorY = computed(() => -(y.value / height.value) * 2.0 + 1.0)
+
+function updateMousePosition({ point }) {
+  mousePosition.value.copy(point)
+}
+
+function triggerShockWave() {
+  if (!shockWaveEffectRef.value) { return }
+
+  updateMousePosition()
+
+  shockWaveEffectRef.value.effect.explode()
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <TresMesh @click="triggerShockWave">
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial color="#1C1C1E" />
+    </TresMesh>
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <ShockWavePmndrs
+          ref="shockWaveEffectRef"
+          :position="position"
+          v-bind="effectProps"
+        />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+### DepthPickingPass
+
+The `DepthPickingPassPmndrs` component reads depth information from the scene. This is particularly useful for interacting with 3D objects based on their depth, such as triggering effects at specific points in 3D space.
+
+In the example above, `DepthPickingPassPmndrs` determines the depth of the point where the shockwave effect should originate, allowing accurate interaction with 3D objects.
+
+```vue{2,3,13-15,17-20,22-23,25-26,28-37,39-45,51,58,63-72}
+<script setup lang="ts">
+import { DepthPickingPassPmndrs, EffectComposerPmndrs, ShockWavePmndrs } from '@tresjs/post-processing'
+import { useMouse, useWindowSize } from '@vueuse/core'
+import { NoToneMapping, Vector3 } from 'three'
+import { computed, ref } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+
+const gl = {
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+}
+
+const effectProps = {
+  speed: 0.2,
+}
+
+const position = ref(new Vector3(0, 0, 0))
+const depthPickingPassRef = ref(null)
+const shockWaveEffectRef = ref(null)
+const elCanvasRef = ref(null)
+
+const { x, y } = useMouse()
+const { width, height } = useWindowSize()
+
+const cursorX = computed(() => (x.value / width.value) * 2.0 - 1.0)
+const cursorY = computed(() => -(y.value / height.value) * 2.0 + 1.0)
+
+async function updateMousePosition() {
+  if (!elCanvasRef.value || !depthPickingPassRef.value) { return }
+
+  const ndcPosition = new Vector3(cursorX.value, cursorY.value, 0)
+
+  ndcPosition.z = await depthPickingPassRef.value.pass.readDepth(ndcPosition)
+  ndcPosition.z = ndcPosition.z * 2.0 - 1.0
+
+  position.value.copy(ndcPosition.unproject(elCanvasRef.value.context.camera.value))
+}
+
+function triggerShockWave() {
+  if (!shockWaveEffectRef.value) { return }
+
+  updateMousePosition()
+
+  shockWaveEffectRef.value.effect.explode()
+}
+</script>
+
+<template>
+  <TresCanvas
+    v-bind="gl"
+    ref="elCanvasRef"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+
+    <TresMesh @click="triggerShockWave">
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial color="#1C1C1E" />
+    </TresMesh>
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <DepthPickingPassPmndrs ref="depthPickingPassRef" />
+        <ShockWavePmndrs
+          ref="shockWaveEffectRef"
+          :position="position"
+          v-bind="effectProps"
+        />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+For more details about DepthPickingPass, see the [documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/DepthPickingPass.js~DepthPickingPass.html).
+
+## Props
+
+| Prop              | Description                                                                                                   | Default                   |
+| ----------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------- |
+| position          | The position of the shockwave.                                                                                | `Vector3(0, 0, 0)`  |
+| amplitude         | The amplitude of the shockwave.                                                                               | `0.05`                     |
+| waveSize          | The wave size of the shockwave.                                                                               | `0.2`                     |
+| speed             | The speed of the shockwave.                                                                                   | `2.0`                     |
+| maxRadius         | The max radius of the shockwave.                                                                              | `1.0`                     |
+
+## Further Reading
+see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ShockWaveEffect.js~ShockWaveEffect.html)
diff --git a/playground/src/pages/postprocessing/shock-wave.vue b/playground/src/pages/postprocessing/shock-wave.vue
new file mode 100644
index 00000000..02e0b498
--- /dev/null
+++ b/playground/src/pages/postprocessing/shock-wave.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { NoToneMapping, Vector3 } from 'three'
+import { DepthPickingPassPmndrs, EffectComposerPmndrs, ShockWavePmndrs } from '@tresjs/post-processing'
+import { useMouse, useWindowSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#ffffff',
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+  envMapIntensity: 10,
+}
+
+const { x, y } = useMouse()
+const { width, height } = useWindowSize()
+
+const shockWaveEffect = ref(null)
+const elCanvas = ref(null)
+const effectComposerRef = ref(null)
+const depthPickingPassRef = ref(null)
+const mousePosition = ref(new Vector3())
+
+const { amplitude, waveSize, speed, maxRadius } = useControls({
+  amplitude: { value: 0.15, step: 0.001, max: 0.25 },
+  waveSize: { value: 0.3, step: 0.01, max: 2 },
+  speed: { value: 1.5, step: 0.01, max: 5 },
+  maxRadius: { value: 1, step: 0.01, max: 3.0 },
+})
+
+const cursorX = computed(() => (x.value / width.value) * 2.0 - 1.0)
+const cursorY = computed(() => -(y.value / height.value) * 2.0 + 1.0)
+
+async function updateMousePosition() {
+  if (!elCanvas.value || !shockWaveEffect.value || !depthPickingPassRef.value) { return }
+
+  const ndcPosition = new Vector3(cursorX.value, cursorY.value, 0)
+
+  ndcPosition.z = await depthPickingPassRef.value.pass.readDepth(ndcPosition)
+  ndcPosition.z = ndcPosition.z * 2.0 - 1.0
+
+  mousePosition.value.copy(ndcPosition.unproject(elCanvas.value.context.camera.value))
+}
+
+function triggerShockWave() {
+  if (!elCanvas.value || !shockWaveEffect.value) { return }
+
+  updateMousePosition()
+
+  shockWaveEffect.value.effect.explode()
+}
+</script>
+
+<template>
+  <TresLeches />
+
+  <p class="playground-shock-wave-instructions text-xl font-semibold text-zinc-600">Click on a cube to emit a shock wave.</p>
+
+  <TresCanvas
+    ref="elCanvas"
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+
+    <TresMesh :position="[0, .5, 5]" @click="triggerShockWave">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshPhysicalMaterial color="#82DBC5" :roughness=".25" />
+    </TresMesh>
+
+    <TresMesh :position="[0, 0, 0]" @click="triggerShockWave">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshPhysicalMaterial color="#82DBC5" :roughness=".25" />
+    </TresMesh>
+
+    <TresMesh :position="[0, .5, -5]" @click="triggerShockWave">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshPhysicalMaterial color="#82DBC5" :roughness=".25" />
+    </TresMesh>
+
+    <ContactShadows
+      :scale="25"
+      :opacity="1"
+      :position-y="-1"
+      :far="20"
+    />
+
+    <Suspense>
+      <Environment background :blur=".2" preset="dawn" />
+    </Suspense>
+
+    <Suspense>
+      <EffectComposerPmndrs ref="effectComposerRef">
+        <DepthPickingPassPmndrs ref="depthPickingPassRef" />
+        <ShockWavePmndrs ref="shockWaveEffect" :position="mousePosition" :amplitude="amplitude.value" :waveSize="waveSize.value" :speed="speed.value" :maxRadius="maxRadius.value" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
+
+<style scoped>
+.playground-shock-wave-instructions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  padding: 1rem;
+  text-align: center;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+}
+</style>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index 621e8b7b..a8190415 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -45,6 +45,7 @@ export const postProcessingRoutes = [
   makeRoute('Chromatic Aberration', '🌈', false),
   makeRoute('Sepia', '🌅', false),
   makeRoute('Scanline', '📺', false),
+  makeRoute('Shock Wave', '🌊', false),
   makeRoute('Vignette', '🕶️', false),
   makeRoute('Barrel blur', '🌀', false),
   makeRoute('On-demand', '🔄', false),
diff --git a/src/core/pmndrs/DepthPickingPassPmndrs.vue b/src/core/pmndrs/DepthPickingPassPmndrs.vue
new file mode 100644
index 00000000..1c82be0a
--- /dev/null
+++ b/src/core/pmndrs/DepthPickingPassPmndrs.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { DepthPackingStrategies } from 'three'
+import { DepthPickingPass } from 'postprocessing'
+import { inject, nextTick, onUnmounted } from 'vue'
+import { effectComposerInjectionKey } from './EffectComposerPmndrs.vue'
+
+export interface DepthPickingPassPmndrsProps {
+  depthPacking?: DepthPackingStrategies
+  mode?: number
+}
+
+const props = defineProps<DepthPickingPassPmndrsProps>()
+const composer = inject(effectComposerInjectionKey)
+
+const pass = new DepthPickingPass(props)
+
+const unwatch = watchEffect(() => {
+  if (!composer?.value) { return }
+  nextTick(() => unwatch())
+  composer.value.addPass(pass)
+})
+
+onUnmounted(() => {
+  if (!composer?.value || !pass.value) { return }
+
+  composer?.value?.removePass(pass.value)
+  pass.value.dispose()
+})
+
+defineExpose({ pass })
+</script>
diff --git a/src/core/pmndrs/ShockWavePmndrs.vue b/src/core/pmndrs/ShockWavePmndrs.vue
new file mode 100644
index 00000000..ab509ab0
--- /dev/null
+++ b/src/core/pmndrs/ShockWavePmndrs.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { ShockWaveEffect } from 'postprocessing'
+import { Vector3 } from 'three'
+import { watch } from 'vue'
+import { makePropWatchers } from '../../util/prop'
+import { useEffectPmndrs } from './composables/useEffectPmndrs'
+import { useTresContext } from '@tresjs/core'
+
+export interface ShockWavePmndrsProps {
+  /**
+   * The position of the shockwave.
+   */
+  position?: Vector3 | [number, number, number]
+
+  /**
+   * The amplitude of the shockwave.
+   */
+  amplitude?: number
+
+  /**
+   * The speed of the shockwave.
+   */
+  speed?: number
+
+  /**
+   * The max radius of the shockwave.
+   */
+  maxRadius?: number
+
+  /**
+   * The wave size of the shockwave.
+   */
+  waveSize?: number
+}
+
+const props = defineProps<ShockWavePmndrsProps>()
+
+const { camera } = useTresContext()
+
+const { pass, effect } = useEffectPmndrs(
+  () => new ShockWaveEffect(camera.value, Array.isArray(props.position) ? new Vector3(...props.position) : props.position, props),
+  props,
+)
+
+defineExpose({ pass, effect })
+
+watch(
+  () => props.position,
+  (newPosition) => {
+    if (!effect.value) { return }
+
+    if (Array.isArray(newPosition)) {
+      effect.value.position.set(...newPosition)
+    }
+    else if (newPosition instanceof Vector3) {
+      effect.value.position.copy(newPosition)
+    }
+  },
+  { immediate: true },
+)
+
+makePropWatchers(
+  [
+    [() => props.amplitude, 'amplitude'],
+    [() => props.waveSize, 'waveSize'],
+    [() => props.maxRadius, 'maxRadius'],
+    [() => props.speed, 'speed'],
+  ],
+  effect,
+  () => new ShockWaveEffect(),
+)
+</script>
diff --git a/src/core/pmndrs/index.ts b/src/core/pmndrs/index.ts
index 9f4fd8a5..1fa0bb61 100644
--- a/src/core/pmndrs/index.ts
+++ b/src/core/pmndrs/index.ts
@@ -14,6 +14,8 @@ import ToneMappingPmndrs, { type ToneMappingPmndrsProps } from './ToneMappingPmn
 import ChromaticAberrationPmndrs, { type ChromaticAberrationPmndrsProps } from './ChromaticAberrationPmndrs.vue'
 import HueSaturationPmndrs, { type HueSaturationPmndrsProps } from './HueSaturationPmndrs.vue'
 import ScanlinePmndrs, { type ScanlinePmndrsProps } from './ScanlinePmndrs.vue'
+import ShockWavePmndrs, { type ShockWavePmndrsProps } from './ShockWavePmndrs.vue'
+import DepthPickingPassPmndrs, { type DepthPickingPassPmndrsProps } from './DepthPickingPassPmndrs.vue'
 import TiltShiftPmndrs, { type TiltShiftPmndrsProps } from './TiltShiftPmndrs.vue'
 import DotScreenPmndrs, { type DotScreenPmndrsProps } from './DotScreenPmndrs.vue'
 import SepiaPmndrs, { type SepiaPmndrsProps } from './SepiaPmndrs.vue'
@@ -35,6 +37,8 @@ export {
   ChromaticAberrationPmndrs,
   HueSaturationPmndrs,
   ScanlinePmndrs,
+  ShockWavePmndrs,
+  DepthPickingPassPmndrs,
   TiltShiftPmndrs,
   DotScreenPmndrs,
   SepiaPmndrs,
@@ -52,6 +56,8 @@ export {
   ChromaticAberrationPmndrsProps,
   HueSaturationPmndrsProps,
   ScanlinePmndrsProps,
+  ShockWavePmndrsProps,
+  DepthPickingPassPmndrsProps,
   TiltShiftPmndrsProps,
   DotScreenPmndrsProps,
   SepiaPmndrsProps,