From a8860dc3a02cb695847ca79eec773ced2e297f0c Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Mon, 31 Mar 2025 18:32:29 +0200
Subject: [PATCH 1/2] fix: big clean demo docs, demos, multisampling delete bad
 using

---
 .../pmdrs/BrightnessContrastDemo.vue          |  3 +-
 .../components/pmdrs/ColorAverageDemo.vue     |  1 -
 .../theme/components/pmdrs/ColorDepthDemo.vue |  1 -
 .../theme/components/pmdrs/FishEyeDemo.vue    |  1 -
 .../theme/components/pmdrs/GodRaysDemo.vue    | 40 ++++++++++++++-----
 .../theme/components/pmdrs/GridDemo.vue       |  1 -
 .../theme/components/pmdrs/LinocutDemo.vue    |  1 -
 docs/guide/pmndrs/barrel-blur.md              |  4 +-
 docs/guide/pmndrs/bloom.md                    | 30 +++++++++-----
 docs/guide/pmndrs/brightness-contrast.md      | 14 ++-----
 docs/guide/pmndrs/chromatic-aberration.md     |  6 ++-
 docs/guide/pmndrs/color-average.md            | 10 +++--
 docs/guide/pmndrs/color-depth.md              |  8 +---
 docs/guide/pmndrs/depth-of-field.md           | 18 ++++++---
 docs/guide/pmndrs/dot-screen.md               | 10 +++--
 docs/guide/pmndrs/fish-eye.md                 | 14 +++----
 docs/guide/pmndrs/fxaa.md                     |  2 +-
 docs/guide/pmndrs/glitch.md                   | 18 ++++++---
 docs/guide/pmndrs/god-rays.md                 | 27 +++++--------
 docs/guide/pmndrs/grid.md                     |  8 +---
 docs/guide/pmndrs/hue-saturation.md           |  6 ++-
 docs/guide/pmndrs/kuwahara.md                 |  8 ++--
 docs/guide/pmndrs/lens-distortion.md          |  6 ++-
 docs/guide/pmndrs/linocut.md                  |  8 ++--
 docs/guide/pmndrs/noise.md                    | 25 +++++++-----
 docs/guide/pmndrs/outline.md                  | 18 ++++++---
 docs/guide/pmndrs/pixelation.md               | 18 ++++++---
 docs/guide/pmndrs/scanline.md                 |  6 ++-
 docs/guide/pmndrs/sepia.md                    |  6 ++-
 docs/guide/pmndrs/shock-wave.md               |  2 +-
 docs/guide/pmndrs/tilt-shift.md               |  6 ++-
 docs/guide/pmndrs/tone-mapping.md             |  6 ++-
 docs/guide/pmndrs/vignette.md                 | 24 +++++++----
 .../src/pages/postprocessing/barrel-blur.vue  |  1 -
 .../postprocessing/brightness-contrast.vue    |  1 -
 .../postprocessing/chromatic-aberration.vue   |  1 -
 .../pages/postprocessing/color-average.vue    |  1 -
 .../src/pages/postprocessing/color-depth.vue  |  1 -
 .../src/pages/postprocessing/fish-eye.vue     |  2 -
 playground/src/pages/postprocessing/fxaa.vue  |  2 +-
 .../src/pages/postprocessing/god-rays.vue     |  1 -
 playground/src/pages/postprocessing/grid.vue  |  1 -
 .../src/pages/postprocessing/linocut.vue      |  1 -
 .../src/pages/postprocessing/scanline.vue     |  1 -
 .../src/pages/postprocessing/shock-wave.vue   |  1 -
 45 files changed, 212 insertions(+), 158 deletions(-)

diff --git a/docs/.vitepress/theme/components/pmdrs/BrightnessContrastDemo.vue b/docs/.vitepress/theme/components/pmdrs/BrightnessContrastDemo.vue
index 35c95187..299c6a59 100644
--- a/docs/.vitepress/theme/components/pmdrs/BrightnessContrastDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/BrightnessContrastDemo.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const { brightness, contrast, blendFunction } = useControls({
@@ -20,7 +19,7 @@ const { brightness, contrast, blendFunction } = useControls({
   blendFunction: {
     options: Object.keys(BlendFunction).map(key => ({
       text: key,
-      value: BlendFunction[key],
+      value: BlendFunction[key as keyof typeof BlendFunction],
     })),
     value: BlendFunction.SRC,
   },
diff --git a/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue b/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
index 84ada864..3e82eede 100644
--- a/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue
@@ -14,7 +14,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {
diff --git a/docs/.vitepress/theme/components/pmdrs/ColorDepthDemo.vue b/docs/.vitepress/theme/components/pmdrs/ColorDepthDemo.vue
index ca9345d8..b93d5f91 100644
--- a/docs/.vitepress/theme/components/pmdrs/ColorDepthDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/ColorDepthDemo.vue
@@ -14,7 +14,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const ctx = gsap.context(() => {})
diff --git a/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue b/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
index fb5431cf..7c9c3d11 100644
--- a/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/FishEyeDemo.vue
@@ -15,7 +15,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const lensParams = [
diff --git a/docs/.vitepress/theme/components/pmdrs/GodRaysDemo.vue b/docs/.vitepress/theme/components/pmdrs/GodRaysDemo.vue
index dd4af009..962dbf84 100644
--- a/docs/.vitepress/theme/components/pmdrs/GodRaysDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/GodRaysDemo.vue
@@ -6,30 +6,25 @@ import type { Mesh } from 'three'
 import { BackSide, NoToneMapping } from 'three'
 import { BlendFunction, KernelSize } from 'postprocessing'
 import { EffectComposerPmndrs, GodRaysPmndrs } from '@tresjs/post-processing'
-import { ref, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 import { gsap } from 'gsap'
 
 import '@tresjs/leches/styles'
 
 const gl = {
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
+let tween: gsap.core.Tween | null = null
+
 const sphereMeshRef = ref<Mesh | null>(null)
 
 const pbrTexture = await useTexture({
   map: '/lens-distortion/room-map.png',
 })
 
-const { blur, kernelSize, resolutionScale, opacity, blendFunction, density, decay, weight, exposure, samples, clampMax } = useControls({
-  blendFunction: {
-    options: Object.keys(BlendFunction).map(key => ({
-      text: key,
-      value: BlendFunction[key as keyof typeof BlendFunction],
-    })),
-    value: BlendFunction.SCREEN,
-  },
+const { freezeAnimationLightSource, blur, kernelSize, resolutionScale, opacity, blendFunction, density, decay, weight, exposure, samples, clampMax } = useControls({
+  freezeAnimationLightSource: { value: false, label: 'pauseLightSource', type: 'boolean' },
   kernelSize: {
     options: Object.keys(KernelSize).map(key => ({
       text: key,
@@ -46,6 +41,13 @@ const { blur, kernelSize, resolutionScale, opacity, blendFunction, density, deca
   clampMax: { value: 1.0, step: 0.1, max: 1.0 },
   resolutionScale: { value: 0.5, step: 0.1, min: 0.1, max: 1.0 },
   blur: true,
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key as keyof typeof BlendFunction],
+    })),
+    value: BlendFunction.SCREEN,
+  },
 })
 
 const torusMeshes = [
@@ -57,14 +59,30 @@ const torusMeshes = [
 watch(sphereMeshRef, () => {
   if (!sphereMeshRef.value) { return }
 
-  gsap.to(sphereMeshRef.value.position, {
+  tween = gsap.to(sphereMeshRef.value.position, {
     x: 20,
     duration: 3,
     repeat: -1,
     yoyo: true,
+    paused: freezeAnimationLightSource.value,
     ease: 'sine.inOut',
   })
 })
+
+watch(freezeAnimationLightSource, () => {
+  if (!sphereMeshRef.value) { return }
+
+  if (freezeAnimationLightSource.value) {
+    tween?.pause()
+  }
+  else {
+    tween?.resume()
+  }
+})
+
+onUnmounted(() => {
+  tween?.revert()
+})
 </script>
 
 <template>
diff --git a/docs/.vitepress/theme/components/pmdrs/GridDemo.vue b/docs/.vitepress/theme/components/pmdrs/GridDemo.vue
index ab3f0c46..ab2e0979 100644
--- a/docs/.vitepress/theme/components/pmdrs/GridDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/GridDemo.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const { blendFunction, scale, lineWidth } = useControls({
diff --git a/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue b/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
index 43e9afdd..34a4715a 100644
--- a/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
+++ b/docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#00ff00',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {
diff --git a/docs/guide/pmndrs/barrel-blur.md b/docs/guide/pmndrs/barrel-blur.md
index d30b12e1..bcb1318f 100644
--- a/docs/guide/pmndrs/barrel-blur.md
+++ b/docs/guide/pmndrs/barrel-blur.md
@@ -16,7 +16,7 @@ The `Barrel Blur` is a custom effect that applies a barrel distortion with chrom
 
 The `<BarrelBlurPmndrs>` component is straightforward to use and provides customizable options to fine-tune the barrel blur effect.
 
-```vue{3,11-14,21-25}
+```vue{3,11-14,23-27}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerPmndrs, BarrelBlurPmndrs } from '@tresjs/post-processing'
@@ -37,6 +37,8 @@ const effectProps = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]"/>
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <BarrelBlurPmndrs v-bind="effectProps" />
diff --git a/docs/guide/pmndrs/bloom.md b/docs/guide/pmndrs/bloom.md
index 42c528ad..6420946b 100644
--- a/docs/guide/pmndrs/bloom.md
+++ b/docs/guide/pmndrs/bloom.md
@@ -8,21 +8,29 @@ Bloom is an effect that simulates the way that bright objects in the real world
 
 ## Usage
 
-```vue
+```vue{2,11-21}
 <script setup lang="ts">
 import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposerPmndrs>
-    <BloomPmndrs
-      :radius="0.85"
-      :intensity="4.0"
-      :luminance-threshold="0.1"
-      :luminance-smoothing="0.3"
-      mipmap-blur
-    />
-  </EffectComposerPmndrs>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+
+    <!-- Your scene -->
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <BloomPmndrs
+          :radius="0.85"
+          :intensity="4.0"
+          :luminance-threshold="0.1"
+          :luminance-smoothing="0.3"
+          mipmap-blur
+        />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
 </template>
 ```
 
@@ -38,4 +46,4 @@ import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 | `mipMapBlur`         | Enables mip map blur (UnrealBloom).                                                                  | `false`                                                                                                                                        |
 
 ## Further Reading
-see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html)
+For more details, see the [BloomEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html)
diff --git a/docs/guide/pmndrs/brightness-contrast.md b/docs/guide/pmndrs/brightness-contrast.md
index 55dd85b0..9244d747 100644
--- a/docs/guide/pmndrs/brightness-contrast.md
+++ b/docs/guide/pmndrs/brightness-contrast.md
@@ -17,13 +17,12 @@ It adjusts the brightness and contrast of your scene.
 
 The `<BrightnessContrastPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
 
-```vue{2,9-13,27-31}
+```vue{2,8-12,21-25}
 <script setup lang="ts">
 import { EffectComposerPmndrs, BrightnessContrastPmndrs } from '@tresjs/post-processing/pmndrs'
 
 const gl = {
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const effectProps = {
@@ -34,15 +33,10 @@ const effectProps = {
 </script>
 
 <template>
-  <TresCanvas
-    v-bind="gl"
-  >
+  <TresCanvas v-bind="gl">
     <TresPerspectiveCamera />
 
-    <TresMesh :position="[0, .5, 0]">
-      <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshPhysicalMaterial color="black" :roughness=".25" />
-    </TresMesh>
+    <!-- Your scene -->
 
     <Suspense>
       <EffectComposerPmndrs>
@@ -62,4 +56,4 @@ const effectProps = {
 | contrast      | The contrast factor, where 0 means no change. <br> Range: `[-1.0, 1.0]`                   | `0`                         |
 
 ## Further Reading
-For more details, see the [BrightnessContrast documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BrightnessContrastEffect.js~BrightnessContrastEffect.html)
+For more details, see the [BrightnessContrastEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BrightnessContrastEffect.js~BrightnessContrastEffect.html)
diff --git a/docs/guide/pmndrs/chromatic-aberration.md b/docs/guide/pmndrs/chromatic-aberration.md
index afee7c93..31a99874 100644
--- a/docs/guide/pmndrs/chromatic-aberration.md
+++ b/docs/guide/pmndrs/chromatic-aberration.md
@@ -16,7 +16,7 @@ The `ChromaticAberration` effect is part of the [`postprocessing`](https://pmndr
 
 The `<ChromaticAberrationPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
 
-```vue{2,10-14,21-25}
+```vue{2,10-14,23-27}
 <script setup lang="ts">
 import { EffectComposerPmndrs, ChromaticAberrationPmndrs } from '@tresjs/post-processing'
 import { Vector2 } from 'three'
@@ -37,6 +37,8 @@ const effectProps = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <ChromaticAberrationPmndrs v-bind="effectProps" />
@@ -60,4 +62,4 @@ The `modulationOffset` property is functional only when `radialModulation` is en
 :::
 
 ## Further Reading
-For more details, see the [ChromaticAberration documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ChromaticAberrationEffect.js~ChromaticAberrationEffect.html)
+For more details, see the [ChromaticAberrationEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ChromaticAberrationEffect.js~ChromaticAberrationEffect.html)
diff --git a/docs/guide/pmndrs/color-average.md b/docs/guide/pmndrs/color-average.md
index 2b8a2003..bc92f9b5 100644
--- a/docs/guide/pmndrs/color-average.md
+++ b/docs/guide/pmndrs/color-average.md
@@ -16,7 +16,7 @@ The `ColorAverage` effect is part of the [`postprocessing`](https://pmndrs.githu
 
 The `<ColorAveragePmndrs>` component is easy to use and provides customizable options to suit different visual styles.
 
-```vue{4,11-13,20-24}
+```vue{4,11-13,22-26}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { NoToneMapping } from 'three'
@@ -27,15 +27,17 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const effectProps = reactive({
+const effectProps = {
   opacity: 0.5
-})
+}
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]"/>
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <ColorAveragePmndrs v-bind="effectProps" />
@@ -53,4 +55,4 @@ const effectProps = reactive({
 | opacity           | Sets the opacity of the color average effect.                                                                 | `1`                       |
 
 ## Further Reading
-For more details, see the [ColorAverage documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.html)
+For more details, see the [ColorAverageEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.html)
diff --git a/docs/guide/pmndrs/color-depth.md b/docs/guide/pmndrs/color-depth.md
index 8f2f43c7..344903f6 100644
--- a/docs/guide/pmndrs/color-depth.md
+++ b/docs/guide/pmndrs/color-depth.md
@@ -17,13 +17,12 @@ It renders a ColorDepth that can be scaled or adjusted to achieve a variety of v
 
 The `<ColorDepthPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
 
-```vue{2,9-13,25-29}
+```vue{2,8-12,21-25}
 <script setup lang="ts">
 import { EffectComposerPmndrs, ColorDepthPmndrs } from '@tresjs/post-processing/pmndrs'
 
 const gl = {
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const effectProps = {
@@ -37,10 +36,7 @@ const effectProps = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera />
 
-    <TresMesh :position="[0, .5, 0]">
-      <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshNormalMaterial />
-    </TresMesh>
+    <!-- Your scene -->
 
     <Suspense>
       <EffectComposerPmndrs>
diff --git a/docs/guide/pmndrs/depth-of-field.md b/docs/guide/pmndrs/depth-of-field.md
index 2d2dacc7..0abcc406 100644
--- a/docs/guide/pmndrs/depth-of-field.md
+++ b/docs/guide/pmndrs/depth-of-field.md
@@ -10,15 +10,23 @@ This photographic technique allows photographers and filmmakers to draw attentio
 
 ## Usage
 
-```vue
+```vue{2,11-15}
 <script setup lang="ts">
 import { DepthOfFieldPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposerPmndrs>
-    <DepthOfFieldPmndrs />
-  </EffectComposerPmndrs>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+
+    <!-- Your scene -->
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <DepthOfFieldPmndrs :focus-range="0.5" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
 </template>
 ```
 
@@ -34,4 +42,4 @@ import { DepthOfFieldPmndrs, EffectComposerPmndrs } from '@tresjs/post-processin
 | `bokehScale` | The scale of the bokeh blur. | 1.0 |
 
 ## Further Reading
-see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DepthOfFieldEffect.js~DepthOfFieldEffect.html)
+For more details, see the [DepthOfFieldEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DepthOfFieldEffect.js~DepthOfFieldEffect.html)
diff --git a/docs/guide/pmndrs/dot-screen.md b/docs/guide/pmndrs/dot-screen.md
index fddf5363..5cc3ee0c 100644
--- a/docs/guide/pmndrs/dot-screen.md
+++ b/docs/guide/pmndrs/dot-screen.md
@@ -16,7 +16,7 @@ The `DotScreen` effect is part of the [`postprocessing`](https://pmndrs.github.i
 
 The `<DotScreenPmndrs>` component is straightforward to use and provides customizable options to fine-tune the dot screen effect.
 
-```vue{3,11-14,21-25}
+```vue{3,11-14,23-27}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { DotScreenPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
@@ -27,16 +27,18 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const effectProps = reactive({
+const effectProps = {
   angle: 1.57,
   scale: 1.25
-})
+}
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <DotScreenPmndrs v-bind="effectProps" />
@@ -56,4 +58,4 @@ const effectProps = reactive({
 
 ## Further Reading
 
-For more details, see the [DotScreen documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DotScreenEffect.js~DotScreenEffect.html).
+For more details, see the [DotScreenEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DotScreenEffect.js~DotScreenEffect.html).
diff --git a/docs/guide/pmndrs/fish-eye.md b/docs/guide/pmndrs/fish-eye.md
index bf9b6d3b..5bf155f6 100644
--- a/docs/guide/pmndrs/fish-eye.md
+++ b/docs/guide/pmndrs/fish-eye.md
@@ -16,7 +16,7 @@ The `FishEye` is a custom effect simulates the wide-angle distortion of a fish-e
 
 The `<FishEyePmndrs>` component is straightforward to use and provides customizable options to fine-tune the fish-eye effect.
 
-```vue{3,12-17,29-33}
+```vue{3,11-16,25-29}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerPmndrs, FishEyePmndrs } from '@tresjs/post-processing'
@@ -25,14 +25,13 @@ import { BlendFunction } from 'postprocessing'
 const gl = {
   clearColor: '#4f4f4f',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const effectProps = {
   blendFunction: BlendFunction.NORMAL,
-  lensS: [1.0, 1.0],
-  lensF: [0.0, 1.0],
-  scale: 1.0,
+  lensS: [1.0, 0.65],
+  lensF: [0.25, 1.0],
+  scale: 0.85,
 }
 </script>
 
@@ -40,10 +39,7 @@ const effectProps = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
-    <TresMesh>
-      <TresSphereGeometry :args="[5, 32, 32]" />
-      <TresMeshPhysicalMaterial :metalness="0.5" :roughness="0.25" />
-    </TresMesh>
+    <!-- Your scene -->
 
     <Suspense>
       <EffectComposerPmndrs>
diff --git a/docs/guide/pmndrs/fxaa.md b/docs/guide/pmndrs/fxaa.md
index eeabb732..04ea58ab 100644
--- a/docs/guide/pmndrs/fxaa.md
+++ b/docs/guide/pmndrs/fxaa.md
@@ -72,4 +72,4 @@ const effectProps = {
 | subpixelQuality | The subpixel blend quality. Range: `[0.0, 1.0]`.             | `0.75`        |
 
 ## Further Reading
-For more details, see the [FXAAEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/FXAAEffect.js~FXAAEffect.html)
+For more details, see the [FXAAEffectEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/FXAAEffect.js~FXAAEffect.html)
diff --git a/docs/guide/pmndrs/glitch.md b/docs/guide/pmndrs/glitch.md
index 1e149135..e372d123 100644
--- a/docs/guide/pmndrs/glitch.md
+++ b/docs/guide/pmndrs/glitch.md
@@ -14,15 +14,23 @@ This effect may potentially cause epileptic seizures in people with photosensiti
 
 ## Usage
 
-```vue
+```vue{2,11-15}
 <script setup lang="ts">
 import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposerPmndrs>
-    <GlitchPmndrs />
-  </EffectComposerPmndrs>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+
+    <!-- Your scene -->
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <GlitchPmndrs />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
 </template>
 ```
 
@@ -43,4 +51,4 @@ import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
 | `dtSize`                    | The size of the generated noise map. Will be ignored if a perturbation map is provided.                            | `64`                                                                                                                                           |
 
 ## Further Reading
-see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GlitchEffect.js~GlitchEffect.html)
+For more details, see the [GlitchEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GlitchEffect.js~GlitchEffect.html)
diff --git a/docs/guide/pmndrs/god-rays.md b/docs/guide/pmndrs/god-rays.md
index ed42e9a8..2ca94f04 100644
--- a/docs/guide/pmndrs/god-rays.md
+++ b/docs/guide/pmndrs/god-rays.md
@@ -16,49 +16,42 @@ The `GodRays` effect is part of the [`postprocessing`](https://pmndrs.github.io/
 
 The `<GodRaysPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
 
-```vue{5,17-21,40-44}
+```vue{4,13-17,30-37}
 <script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { NoToneMapping } from 'three'
 import { EffectComposerPmndrs, GodRaysPmndrs } from '@tresjs/post-processing'
 
-import '@tresjs/leches/styles'
-
 const gl = {
   clearColor: 'blue',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const sphereMeshRef = ref(null)
 
-const effectProps = reactive({
+const effectProps = {
   opacity: .8,
   exposure: .8,
   resolutionScale: 0.65
-})
+}
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 5, 20]" />
-
-    <OrbitControls auto-rotate />
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- The lightSource (in this case a Sphere) -->
     <TresMesh ref="sphereMeshRef" :position="[-10, 8, 0]">
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresMeshBasicMaterial color="#FFDDAA" :transparent="true" />
     </TresMesh>
 
-    <TresMesh :position="[0, .5, 0]">
-      <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshBasicMaterial color="white" />
-    </TresMesh>
-
     <Suspense>
       <EffectComposerPmndrs>
-        <GodRaysPmndrs :lightSource="sphereMeshRef" v-bind="effectProps" />
+        <GodRaysPmndrs
+          v-bind="effectProps"
+          :lightSource="sphereMeshRef"
+        />
       </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
@@ -85,4 +78,4 @@ const effectProps = reactive({
 | clampMax          | An upper bound for the saturation of the overall effect.                                                      | `1.0`                     |
 
 ## Further Reading
-For more details, see the [GodRays documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GodRaysEffect.js~GodRaysEffect.html)
+For more details, see the [GodRaysEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GodRaysEffect.js~GodRaysEffect.html)
diff --git a/docs/guide/pmndrs/grid.md b/docs/guide/pmndrs/grid.md
index 52b2ca5a..74ee9898 100644
--- a/docs/guide/pmndrs/grid.md
+++ b/docs/guide/pmndrs/grid.md
@@ -17,13 +17,12 @@ It renders a grid that can be scaled or adjusted to achieve a variety of visual
 
 The `<GridPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
 
-```vue{2,9-13,25-29}
+```vue{2,8-12,21-25}
 <script setup lang="ts">
 import { EffectComposerPmndrs, GridPmndrs } from '@tresjs/post-processing/pmndrs'
 
 const gl = {
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const effectProps = {
@@ -37,10 +36,7 @@ const effectProps = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera />
 
-    <TresMesh :position="[0, .5, 0]">
-      <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshToonMaterial color="black" />
-    </TresMesh>
+    <!-- Your scene -->
 
     <Suspense>
       <EffectComposerPmndrs>
diff --git a/docs/guide/pmndrs/hue-saturation.md b/docs/guide/pmndrs/hue-saturation.md
index 3c298e92..5413dd81 100644
--- a/docs/guide/pmndrs/hue-saturation.md
+++ b/docs/guide/pmndrs/hue-saturation.md
@@ -16,7 +16,7 @@ The `HueSaturation` effect is part of the [`postprocessing`](https://pmndrs.gith
 
 The `<HueSaturationPmndrs>` component is straightforward to use and provides customizable options to fine-tune the hue and saturation of your visuals.
 
-```vue{2,11-15,22-26}
+```vue{2,11-15,24-28}
 <script setup lang="ts">
 import { EffectComposerPmndrs, HueSaturationPmndrs } from '@tresjs/post-processing'
 import { BlendFunction } from 'postprocessing'
@@ -38,6 +38,8 @@ const effectProps = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <HueSaturationPmndrs v-bind="effectProps" />
@@ -57,4 +59,4 @@ const effectProps = {
 
 ## Further Reading
 
-For more details, see the [HueSaturation documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/HueSaturationEffect.js~HueSaturationEffect.html).
+For more details, see the [HueSaturationEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/HueSaturationEffect.js~HueSaturationEffect.html).
diff --git a/docs/guide/pmndrs/kuwahara.md b/docs/guide/pmndrs/kuwahara.md
index 643356ee..6af6b310 100644
--- a/docs/guide/pmndrs/kuwahara.md
+++ b/docs/guide/pmndrs/kuwahara.md
@@ -18,7 +18,7 @@ The Kuwahara effect smooths out an image while keeping the edges sharp. It split
 
 The `<KuwaharaPmndrs>` component is straightforward to use and provides customizable options to fine-tune the Kuwahara effect.
 
-```vue{3,11-14,21-25}
+```vue{3,11-14,23-27}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerPmndrs, KuwaharaPmndrs } from '@tresjs/post-processing'
@@ -29,16 +29,18 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const effectProps = reactive({
+const effectProps = {
   radius: 1,
   sectorCount: 4,
-})
+}
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <KuwaharaPmndrs v-bind="effectProps" />
diff --git a/docs/guide/pmndrs/lens-distortion.md b/docs/guide/pmndrs/lens-distortion.md
index 381d073b..3867e215 100644
--- a/docs/guide/pmndrs/lens-distortion.md
+++ b/docs/guide/pmndrs/lens-distortion.md
@@ -16,7 +16,7 @@ The `LensDistortion` effect is part of the [`postprocessing`](https://pmndrs.git
 
 The `<LensDistortionPmndrs>` component is straightforward to use and provides customizable options to fine-tune the distortion effect of your visuals.
 
-```vue{2,12-17,24-28}
+```vue{2,12-17,26-30}
 <script setup lang="ts">
 import { EffectComposerPmndrs, LensDistortionPmndrs } from '@tresjs/post-processing'
 import { Vector2 } from 'three'
@@ -40,6 +40,8 @@ const effectProps = {
    <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <LensDistortionPmndrs v-bind="effectProps" />
@@ -60,4 +62,4 @@ const effectProps = {
 
 ## Further Reading
 
-For more details, see the [LensDistortion documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/LensDistortionEffect.js~LensDistortionEffect.html).
+For more details, see the [LensDistortionEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/LensDistortionEffect.js~LensDistortionEffect.html).
diff --git a/docs/guide/pmndrs/linocut.md b/docs/guide/pmndrs/linocut.md
index 61bd0f19..75064e67 100644
--- a/docs/guide/pmndrs/linocut.md
+++ b/docs/guide/pmndrs/linocut.md
@@ -16,7 +16,7 @@ The `Linocut` effect is a custom shader effect inspired by traditional linocut a
 
 The `<LinocutPmndrs>` component is straightforward to use and provides customizable options to fine-tune the linocut effect.
 
-```vue{3,11-16,23-27}
+```vue{3,11-16,25-29}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerPmndrs, LinocutPmndrs } from '@tresjs/post-processing'
@@ -27,18 +27,20 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const effectProps = reactive({
+const effectProps = {
   scale: 0.85,
   noiseScale: 0.0,
   center: [0.5, 0.5],
   rotation: 0.0,
-})
+}
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <LinocutPmndrs v-bind="effectProps" />
diff --git a/docs/guide/pmndrs/noise.md b/docs/guide/pmndrs/noise.md
index 660c4ca7..995d26e5 100644
--- a/docs/guide/pmndrs/noise.md
+++ b/docs/guide/pmndrs/noise.md
@@ -8,20 +8,27 @@ Noise is an effect that adds Gaussian noise to the scene. This can be used to si
 
 ## Usage
 
-```vue
+```vue{2,12-19}
 <script setup lang="ts">
 import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
-
 import { BlendFunction } from 'postprocessing'
 </script>
 
 <template>
-  <EffectComposerPmndrs>
-    <NoisePmndrs
-      premultiply
-      :blend-function="BlendFunction.SCREEN"
-    />
-  </EffectComposerPmndrs>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+
+    <!-- Your scene -->
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <NoisePmndrs
+          premultiply
+          :blend-function="BlendFunction.SCREEN"
+        />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
 </template>
 ```
 
@@ -33,4 +40,4 @@ import { BlendFunction } from 'postprocessing'
 | `premultiply`          | Indicates whether noise will be multiplied with the input colors prior to blending | `false`           |
 
 ## Further Reading
-see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/NoiseEffect.js~NoiseEffect.html)
+For more details, see the [NoiseEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/NoiseEffect.js~NoiseEffect.html)
diff --git a/docs/guide/pmndrs/outline.md b/docs/guide/pmndrs/outline.md
index f83782b2..e87d59b9 100644
--- a/docs/guide/pmndrs/outline.md
+++ b/docs/guide/pmndrs/outline.md
@@ -8,15 +8,23 @@ Outline is an effect that applies an outline to objects in your scene. This effe
 
 ## Usage
 
-```vue
+```vue{2,11-15}
 <script setup lang="ts">
 import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposerPmndrs>
-    <OutlinePmndrs />
-  </EffectComposerPmndrs>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+
+    <!-- Your scene -->
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <OutlinePmndrs />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
 </template>
 ```
 
@@ -41,4 +49,4 @@ import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
 | visibleEdgeColor | The color of visible edges.                                                                 | 0xffffff                                                                                                                                      |
 
 ## Further Reading
-see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/OutlineEffect.js~OutlineEffect.html)
+For more details, see the [OutlineEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/OutlineEffect.js~OutlineEffect.html)
diff --git a/docs/guide/pmndrs/pixelation.md b/docs/guide/pmndrs/pixelation.md
index b4330b04..87b4f139 100644
--- a/docs/guide/pmndrs/pixelation.md
+++ b/docs/guide/pmndrs/pixelation.md
@@ -8,15 +8,23 @@ Pixelation is an effect that pixelates the scene.
 
 ## Usage
 
-```vue
+```vue{2,11-15}
 <script setup lang="ts">
 import { EffectComposerPmndrs, PixelationPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposerPmndrs>
-    <PixelationPmndrs />
-  </EffectComposerPmndrs>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+
+    <!-- Your scene -->
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <PixelationPmndrs :granularity="15" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
 </template>
 ```
 
@@ -27,4 +35,4 @@ import { EffectComposerPmndrs, PixelationPmndrs } from '@tresjs/post-processing'
 | granularity | The granularity of the pixels. | 30      |
 
 ## Further Reading
-see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/PixelationEffect.js~PixelationEffect.html)
+For more details, see the [PixelationEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/PixelationEffect.js~PixelationEffect.html)
diff --git a/docs/guide/pmndrs/scanline.md b/docs/guide/pmndrs/scanline.md
index 63a5a89e..707fc09a 100644
--- a/docs/guide/pmndrs/scanline.md
+++ b/docs/guide/pmndrs/scanline.md
@@ -16,7 +16,7 @@ The `Scanline` effect is part of the [`postprocessing`](https://pmndrs.github.io
 
 The `<ScanlinePmndrs>` component is easy to use and provides customizable options to achieve the desired visual appearance.
 
-```vue{3,11-15,22-26}
+```vue{3,11-15,24-28}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerPmndrs, ScanlinePmndrs } from '@tresjs/post-processing'
@@ -38,6 +38,8 @@ const effectProps = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <ScanlinePmndrs v-bind="effectProps" />
@@ -58,4 +60,4 @@ const effectProps = {
 
 ## Further Reading
 
-For more details, see the [Scanline documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ScanlineEffect.js~ScanlineEffect.html)
+For more details, see the [ScanlineEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ScanlineEffect.js~ScanlineEffect.html)
diff --git a/docs/guide/pmndrs/sepia.md b/docs/guide/pmndrs/sepia.md
index 973b2474..bc89ffb1 100644
--- a/docs/guide/pmndrs/sepia.md
+++ b/docs/guide/pmndrs/sepia.md
@@ -16,7 +16,7 @@ The `Sepia` effect is part of the [`postprocessing`](https://pmndrs.github.io/po
 
 The `<SepiaPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
 
-```vue{3,15-19}
+```vue{3,17-21}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerPmndrs, SepiaPmndrs } from '@tresjs/post-processing'
@@ -31,6 +31,8 @@ const gl = {
   <TresCanvas v-bind="gl" >
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <SepiaPmndrs :intensity="2" />
@@ -48,4 +50,4 @@ const gl = {
 | intensity         | The intensity of the sepia effect.                                                                            | `1.0`                     |
 
 ## Further Reading
-For more details, see the [Sepia documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html)
+For more details, see the [SepiaEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html)
diff --git a/docs/guide/pmndrs/shock-wave.md b/docs/guide/pmndrs/shock-wave.md
index 425e7dbc..e151eec3 100644
--- a/docs/guide/pmndrs/shock-wave.md
+++ b/docs/guide/pmndrs/shock-wave.md
@@ -182,4 +182,4 @@ For more details about DepthPickingPass, see the [documentation](https://pmndrs.
 | maxRadius         | The max radius of the shockwave.                                                                              | `1.0`                     |
 
 ## Further Reading
-For more details, see the [ShockWave documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ShockWaveEffect.js~ShockWaveEffect.html)
+For more details, see the [ShockWaveEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ShockWaveEffect.js~ShockWaveEffect.html)
diff --git a/docs/guide/pmndrs/tilt-shift.md b/docs/guide/pmndrs/tilt-shift.md
index afa01404..76d6de7f 100644
--- a/docs/guide/pmndrs/tilt-shift.md
+++ b/docs/guide/pmndrs/tilt-shift.md
@@ -16,7 +16,7 @@ The `TiltShift` effect is part of the [`postprocessing`](https://pmndrs.github.i
 
 The `<TiltShiftPmndrs>` component is straightforward to use and provides customizable options to fine-tune the tilt-shift effect.
 
-```vue{3,11-14,21-25}
+```vue{3,11-14,23-27}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerPmndrs, TiltShiftPmndrs } from '@tresjs/post-processing'
@@ -37,6 +37,8 @@ const effectProps = {
    <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <TiltShiftPmndrs v-bind="effectProps" />
@@ -62,4 +64,4 @@ const effectProps = {
 
 ## Further Reading
 
-For more details, see the [TiltShift documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/TiltShiftEffect.js~TiltShiftEffect.html).
+For more details, see the [TiltShiftEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/TiltShiftEffect.js~TiltShiftEffect.html).
diff --git a/docs/guide/pmndrs/tone-mapping.md b/docs/guide/pmndrs/tone-mapping.md
index 626f3c65..77d3cfea 100644
--- a/docs/guide/pmndrs/tone-mapping.md
+++ b/docs/guide/pmndrs/tone-mapping.md
@@ -20,7 +20,7 @@ If the colors in your scene look incorrect after adding the EffectComposer, it m
 
 The `<ToneMappingPmndrs>` component is easy to set up and comes with multiple tone mapping modes to suit different visual requirements. Below is an example of how to use it in a Vue application.
 
-```vue{3,5,7-10,12-14,21-25}
+```vue{3,5,7-10,12-14,23-27}
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerPmndrs, ToneMappingPmndrs } from '@tresjs/post-processing'
@@ -41,6 +41,8 @@ const effectProps = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <!-- Your scene -->
+
     <Suspense>
       <EffectComposerPmndrs>
         <ToneMappingPmndrs v-bind="effectProps" />
@@ -63,4 +65,4 @@ const effectProps = {
 | whitePoint        | White point for tone mapping, used to balance luminance values. Only applicable to `ToneMappingMode.REINHARD2`               | `4.0`                                                                                             |
 
 ## Further Reading
-For more details, see the [Tone Mapping documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ToneMappingEffect.js~ToneMappingEffect.html)
+For more details, see the [ToneMappingEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ToneMappingEffect.js~ToneMappingEffect.html)
diff --git a/docs/guide/pmndrs/vignette.md b/docs/guide/pmndrs/vignette.md
index e10e53cb..0e253ca0 100644
--- a/docs/guide/pmndrs/vignette.md
+++ b/docs/guide/pmndrs/vignette.md
@@ -8,18 +8,26 @@ Vignette is an effect that darkens the edges of the scene to make the center pop
 
 ## Usage
 
-```vue
+```vue{2,11-18}
 <script setup lang="ts">
 import { EffectComposerPmndrs, VignettePmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposerPmndrs>
-    <VignettePmndrs
-      :darkness="0.9"
-      :offset="0.2"
-    />
-  </EffectComposerPmndrs>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+
+    <!-- Your scene -->
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <VignettePmndrs
+          :darkness="0.9"
+          :offset="0.2"
+        />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
 </template>
 ```
 
@@ -33,4 +41,4 @@ import { EffectComposerPmndrs, VignettePmndrs } from '@tresjs/post-processing'
 | darkness      | The darkness value.                                          | 0.5                        |
 
 ## Further Reading
-see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/VignetteEffect.js~VignetteEffect.html)
+For more details, see the [VignetteEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/VignetteEffect.js~VignetteEffect.html)
diff --git a/playground/src/pages/postprocessing/barrel-blur.vue b/playground/src/pages/postprocessing/barrel-blur.vue
index bfdf32a8..e1c4353f 100644
--- a/playground/src/pages/postprocessing/barrel-blur.vue
+++ b/playground/src/pages/postprocessing/barrel-blur.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {
diff --git a/playground/src/pages/postprocessing/brightness-contrast.vue b/playground/src/pages/postprocessing/brightness-contrast.vue
index 86739687..37325bd3 100644
--- a/playground/src/pages/postprocessing/brightness-contrast.vue
+++ b/playground/src/pages/postprocessing/brightness-contrast.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const { brightness, contrast, blendFunction } = useControls({
diff --git a/playground/src/pages/postprocessing/chromatic-aberration.vue b/playground/src/pages/postprocessing/chromatic-aberration.vue
index 8d324e19..d5d9fe57 100644
--- a/playground/src/pages/postprocessing/chromatic-aberration.vue
+++ b/playground/src/pages/postprocessing/chromatic-aberration.vue
@@ -14,7 +14,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {
diff --git a/playground/src/pages/postprocessing/color-average.vue b/playground/src/pages/postprocessing/color-average.vue
index eac5c329..5ba661a3 100644
--- a/playground/src/pages/postprocessing/color-average.vue
+++ b/playground/src/pages/postprocessing/color-average.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {
diff --git a/playground/src/pages/postprocessing/color-depth.vue b/playground/src/pages/postprocessing/color-depth.vue
index 235eaa1b..334cfb67 100644
--- a/playground/src/pages/postprocessing/color-depth.vue
+++ b/playground/src/pages/postprocessing/color-depth.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const { blendFunction, bits, opacity } = useControls({
diff --git a/playground/src/pages/postprocessing/fish-eye.vue b/playground/src/pages/postprocessing/fish-eye.vue
index cb3979d9..865d3637 100644
--- a/playground/src/pages/postprocessing/fish-eye.vue
+++ b/playground/src/pages/postprocessing/fish-eye.vue
@@ -11,8 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
-  envMapIntensity: 10,
 }
 
 // Note: The variables [lensSX, lensSY], [lensFX, lensFY] are not used as vectors in useControls because the 'step' key is not yet available.
diff --git a/playground/src/pages/postprocessing/fxaa.vue b/playground/src/pages/postprocessing/fxaa.vue
index adf0bf37..39414ebd 100644
--- a/playground/src/pages/postprocessing/fxaa.vue
+++ b/playground/src/pages/postprocessing/fxaa.vue
@@ -114,7 +114,7 @@ const onChange = (e: { object: PerspectiveCamera }) => {
       </TresMesh>
 
       <Suspense>
-        <EffectComposerPmndrs :multisampling="0">
+        <EffectComposerPmndrs>
           <FXAAPmndrs
             :blendFunction="Number(blendFunction)"
             :opacity="opacity"
diff --git a/playground/src/pages/postprocessing/god-rays.vue b/playground/src/pages/postprocessing/god-rays.vue
index f66b520b..a2f6659e 100644
--- a/playground/src/pages/postprocessing/god-rays.vue
+++ b/playground/src/pages/postprocessing/god-rays.vue
@@ -12,7 +12,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: 'blue',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const sphereMeshRef = shallowRef(null)
diff --git a/playground/src/pages/postprocessing/grid.vue b/playground/src/pages/postprocessing/grid.vue
index 239a0216..6b8566bb 100644
--- a/playground/src/pages/postprocessing/grid.vue
+++ b/playground/src/pages/postprocessing/grid.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const { blendFunction, scale, lineWidth } = useControls({
diff --git a/playground/src/pages/postprocessing/linocut.vue b/playground/src/pages/postprocessing/linocut.vue
index a84a1ea2..63a2f29e 100644
--- a/playground/src/pages/postprocessing/linocut.vue
+++ b/playground/src/pages/postprocessing/linocut.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#00ff00',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {
diff --git a/playground/src/pages/postprocessing/scanline.vue b/playground/src/pages/postprocessing/scanline.vue
index 3b0a0c63..7dbe05ca 100644
--- a/playground/src/pages/postprocessing/scanline.vue
+++ b/playground/src/pages/postprocessing/scanline.vue
@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#4f4f4f',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {
diff --git a/playground/src/pages/postprocessing/shock-wave.vue b/playground/src/pages/postprocessing/shock-wave.vue
index d3a630d0..cb71d76e 100644
--- a/playground/src/pages/postprocessing/shock-wave.vue
+++ b/playground/src/pages/postprocessing/shock-wave.vue
@@ -12,7 +12,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {

From 4439f3dda46c385a794655254798ced1d83f8cc1 Mon Sep 17 00:00:00 2001
From: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
Date: Sun, 13 Apr 2025 12:12:09 +0200
Subject: [PATCH 2/2] typo fix

---
 docs/guide/pmndrs/fxaa.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/pmndrs/fxaa.md b/docs/guide/pmndrs/fxaa.md
index 04ea58ab..eeabb732 100644
--- a/docs/guide/pmndrs/fxaa.md
+++ b/docs/guide/pmndrs/fxaa.md
@@ -72,4 +72,4 @@ const effectProps = {
 | subpixelQuality | The subpixel blend quality. Range: `[0.0, 1.0]`.             | `0.75`        |
 
 ## Further Reading
-For more details, see the [FXAAEffectEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/FXAAEffect.js~FXAAEffect.html)
+For more details, see the [FXAAEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/FXAAEffect.js~FXAAEffect.html)