fix: delete multisampling used in TresCanvas props (#188)

* fix: delete multisampling used in TresCanvas props

* docs: clean demos (#189)

* demos (>v2.0) cleaned and review
* add suspense to introduction demo code
* change language demo code, add highlights lines

Author: damienmontastier

docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue

@@ -11,7 +11,10 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#4f4f4f',
   toneMapping: NoToneMapping,
-  multisampling: 8,
+}
+
+const glComposer = {
+  multisampling: 4,
 }
 
 const { amount, offsetX, offsetY, blendFunction } = useControls({
@@ -21,7 +24,7 @@ const { amount, offsetX, offsetY, blendFunction } = useControls({
   blendFunction: {
     options: Object.keys(BlendFunction).map(key => ({
       text: key,
-      value: BlendFunction[key],
+      value: BlendFunction[key as keyof typeof BlendFunction],
     })),
     value: BlendFunction.OVERLAY,
   },
@@ -54,7 +57,7 @@ const { amount, offsetX, offsetY, blendFunction } = useControls({
       </RoundedBox>
 
       <Suspense>
-        <EffectComposerPmndrs>
+        <EffectComposerPmndrs v-bind="glComposer">
           <BarrelBlurPmndrs :amount="amount" :offset="[offsetX, offsetY]" :blendFunction="Number(blendFunction)" />
         </EffectComposerPmndrs>
       </Suspense>

docs/.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue

@@ -13,7 +13,10 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
+}
+
+const glComposer = {
+  multisampling: 4,
 }
 
 const chromaticAberrationRef = shallowRef(null)
@@ -69,15 +72,16 @@ watchEffect(() => {
       />
 
       <Suspense>
-        <EffectComposerPmndrs>
-          <ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX, offsetY)" :radial-modulation="radialModulation" :modulation-offset="modulationOffset" />
-        </EffectComposerPmndrs>
+        <Environment :intensity="2" :blur="0" preset="snow" />
       </Suspense>
 
       <Suspense>
-        <Environment :intensity="2" :blur="0" preset="snow" />
+        <EffectComposerPmndrs v-bind="glComposer">
+          <ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX, offsetY)" :radial-modulation="radialModulation" :modulation-offset="modulationOffset" />
+        </EffectComposerPmndrs>
       </Suspense>
     </TresCanvas>
   </div>
+
   <TresLeches :float="false" />
 </template>

docs/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue

@@ -14,10 +14,13 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
   envMapIntensity: 10,
 }
 
+const glComposer = {
+  multisampling: 4,
+}
+
 const ctx = gsap.context(() => {})
 
 const meshRef = ref<Mesh | null>(null)
@@ -26,7 +29,7 @@ const { blendFunction, opacity } = useControls({
   blendFunction: {
     options: Object.keys(BlendFunction).map(key => ({
       text: key,
-      value: BlendFunction[key],
+      value: BlendFunction[key as keyof typeof BlendFunction],
     })),
     value: BlendFunction.NORMAL,
   },
@@ -83,7 +86,7 @@ onUnmounted(() => {
       </Suspense>
 
       <Suspense>
-        <EffectComposerPmndrs>
+        <EffectComposerPmndrs v-bind="glComposer">
           <ColorAveragePmndrs :blendFunction="Number(blendFunction)" :opacity="opacity" />
         </EffectComposerPmndrs>
       </Suspense>

docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue

@@ -12,7 +12,10 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
+}
+
+const glComposer = {
+  multisampling: 4,
 }
 
 const { angle, scale, blendFunction } = useControls({
@@ -21,7 +24,7 @@ const { angle, scale, blendFunction } = useControls({
   blendFunction: {
     options: Object.keys(BlendFunction).map(key => ({
       text: key,
-      value: BlendFunction[key],
+      value: BlendFunction[key as keyof typeof BlendFunction],
     })),
     value: BlendFunction.NORMAL,
   },
@@ -53,7 +56,7 @@ const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets
       </Suspense>
 
       <Suspense>
-        <EffectComposerPmndrs>
+        <EffectComposerPmndrs v-bind="glComposer">
           <DotScreenPmndrs :blendFunction="Number(blendFunction)" :angle="angle" :scale="scale" />
         </EffectComposerPmndrs>
       </Suspense>

docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue

@@ -11,7 +11,10 @@ import '@tresjs/leches/styles'
 
 const gl = {
   toneMapping: NoToneMapping,
-  multisampling: 8,
+}
+
+const glComposer = {
+  multisampling: 4,
 }
 
 const { saturation, hue, blendFunction } = useControls({
@@ -20,7 +23,7 @@ const { saturation, hue, blendFunction } = useControls({
   blendFunction: {
     options: Object.keys(BlendFunction).map(key => ({
       text: key,
-      value: BlendFunction[key],
+      value: BlendFunction[key as keyof typeof BlendFunction],
     })),
     value: BlendFunction.SRC,
   },
@@ -48,7 +51,7 @@ const { saturation, hue, blendFunction } = useControls({
       </Suspense>
 
       <Suspense>
-        <EffectComposerPmndrs>
+        <EffectComposerPmndrs v-bind="glComposer">
           <HueSaturationPmndrs :blendFunction="Number(blendFunction)" :hue="hue" :saturation="saturation" />
         </EffectComposerPmndrs>
       </Suspense>

docs/.vitepress/theme/components/pmdrs/KuwaharaDemo.vue

@@ -12,7 +12,10 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#3386E0',
   toneMapping: NoToneMapping,
-  multisampling: 8,
+}
+
+const glComposer = {
+  multisampling: 4,
 }
 
 const { scene: scenePlantJar } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/kuwahara-effect/plant-jar/plant-jar.glb', { draco: true })
@@ -70,8 +73,8 @@ watch(enabled, () => {
       </Suspense>
 
       <Suspense>
-        <EffectComposerPmndrs>
-          <KuwaharaPmndrs :blendFunction="effectProps.blendFunction" :radius="radius" :sectorCount="sectorCount" />
+        <EffectComposerPmndrs v-bind="glComposer">
+          <KuwaharaPmndrs :blendFunction="Number(effectProps.blendFunction)" :radius="radius" :sectorCount="sectorCount" />
         </EffectComposerPmndrs>
       </Suspense>
     </TresCanvas>

docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue

@@ -9,7 +9,10 @@ import '@tresjs/leches/styles'
 
 const gl = {
   toneMapping: NoToneMapping,
-  multisampling: 8,
+}
+
+const glComposer = {
+  multisampling: 4,
 }
 
 const { distortion, principalPoint, focalLength, skew } = useControls({
@@ -54,7 +57,7 @@ pbrTexture.map.colorSpace = SRGBColorSpace
       </Suspense>
 
       <Suspense>
-        <EffectComposerPmndrs>
+        <EffectComposerPmndrs v-bind="glComposer">
           <LensDistortionPmndrs
             :distortion="distortion"
             :principalPoint="principalPoint"

docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue

@@ -11,10 +11,13 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#00ff00',
   toneMapping: NoToneMapping,
-  multisampling: 8,
   envMapIntensity: 10,
 }
 
+const glComposer = {
+  multisampling: 4,
+}
+
 const { blendFunction, scale, noiseScale, centerX, centerY, rotation } = useControls({
   scale: { value: 0.85, step: 0.01, min: 0, max: 2 },
   noiseScale: { value: 0.0, step: 0.01, min: 0, max: 1 },
@@ -58,7 +61,7 @@ const { blendFunction, scale, noiseScale, centerX, centerY, rotation } = useCont
       />
 
       <Suspense>
-        <EffectComposerPmndrs>
+        <EffectComposerPmndrs v-bind="glComposer">
           <LinocutPmndrs
             :scale="scale"
             :noiseScale="noiseScale"

docs/.vitepress/theme/components/pmdrs/OutlineDemo.vue

@@ -11,7 +11,10 @@ import { useRouteDisposal } from '../../composables/useRouteDisposal'
 const gl = {
   clearColor: '#121212',
   toneMapping: NoToneMapping,
-  multisampling: 8,
+}
+
+const glComposer = {
+  multisampling: 4,
 }
 
 const { effectComposer } = useRouteDisposal()
@@ -58,7 +61,7 @@ const toggleMeshSelectionState = ({ object }: Intersection) => {
       :intensity="1"
     />
     <Suspense>
-      <EffectComposerPmndrs ref="effectComposer">
+      <EffectComposerPmndrs ref="effectComposer" v-bind="glComposer">
         <OutlinePmndrs
           :outlined-objects="outlinedObjects"
           :edge-strength="200000"

docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue

@@ -11,7 +11,10 @@ import '@tresjs/leches/styles'
 const gl = {
   clearColor: '#000000',
   toneMapping: NoToneMapping,
-  multisampling: 8,
+}
+
+const glComposer = {
+  multisampling: 4,
 }
 
 const { blendFunction, opacity, density, scrollSpeed } = useControls({
@@ -21,7 +24,7 @@ const { blendFunction, opacity, density, scrollSpeed } = useControls({
   blendFunction: {
     options: Object.keys(BlendFunction).map(key => ({
       text: key,
-      value: BlendFunction[key],
+      value: BlendFunction[key as keyof typeof BlendFunction],
     })),
     value: BlendFunction.HARD_MIX,
   },
@@ -60,7 +63,7 @@ const { blendFunction, opacity, density, scrollSpeed } = useControls({
       <Stars />
 
       <Suspense>
-        <EffectComposerPmndrs>
+        <EffectComposerPmndrs v-bind="glComposer">
           <ScanlinePmndrs :density="density" :opacity="opacity" :scrollSpeed="scrollSpeed" :blendFunction="Number(blendFunction)" />
         </EffectComposerPmndrs>
       </Suspense>