fix: big clean demo — docs — bad using multisampling (#201)

* fix: big clean demo docs, demos, multisampling delete bad using

* typo fix

---------

Co-authored-by: Tino Koch <[email protected]>

Author: damienmontastier

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,
   },

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 = {

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(() => {})

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 = [

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>

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({

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 = {

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

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)

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)