Tresjs · Tinoooo · Apr 13, 2025 · Mar 31, 2025 · Apr 13, 2025
@@ -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,
   },

@@ -14,7 +14,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {

@@ -14,7 +14,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const ctx = gsap.context(() => {})

@@ -15,7 +15,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const lensParams = [

@@ -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>

@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
 const { blendFunction, scale, lineWidth } = useControls({

@@ -11,7 +11,6 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#00ff00',
   toneMapping: NoToneMapping,
-  envMapIntensity: 10,
 }
 
 const glComposer = {

@@ -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" />

@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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>

@@ -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)
@@ -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).