fix V2 update and modify code about reviews

docs/.vitepress/config.ts

@@ -53,7 +53,7 @@ export default defineConfig({
           { text: 'Glitch', link: '/guide/pmndrs/glitch' },
           { text: 'Noise', link: '/guide/pmndrs/noise' },
           { text: 'Outline', link: '/guide/pmndrs/outline' },
-          { text: 'ToneMapping', link: '/guide/pmndrs/tonemapping' },
+          { text: 'Tone Mapping', link: '/guide/pmndrs/tone-mapping' },
           { text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
           { text: 'Vignette', link: '/guide/pmndrs/vignette' },
         ],

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

@@ -2,7 +2,7 @@
 import { ContactShadows, Environment, Levioso, OrbitControls, useGLTF } from '@tresjs/cientos'
 import { dispose, TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
-import { EffectComposer, ToneMapping } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, ToneMappingPmndrs } from '@tresjs/post-processing'
 import { ToneMappingMode } from 'postprocessing'
 import { NoToneMapping } from 'three'
 import { onUnmounted, shallowRef } from 'vue'
@@ -67,9 +67,9 @@ onUnmounted(() => {
     />
 
     <Suspense>
-      <EffectComposer>
-        <ToneMapping :mode="Number(mode.value)" />
-      </EffectComposer>
+      <EffectComposerPmndrs>
+        <ToneMappingPmndrs :mode="Number(mode.value)" />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

playground/src/pages/postprocessing/tonemapping.vue → playground/src/pages/postprocessing/tone-mapping.vue

@@ -2,9 +2,9 @@
 import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
-import { EffectComposer, ToneMapping } from '@tresjs/post-processing/pmndrs'
 import { BlendFunction, ToneMappingMode } from 'postprocessing'
 import { NoToneMapping } from 'three'
+import { EffectComposerPmndrs, ToneMappingPmndrs } from '@tresjs/post-processing'
 
 import '@tresjs/leches/styles'
 
@@ -69,9 +69,9 @@ const { blendFunction, resolution, mode } = useControls({
     />
 
     <Suspense>
-      <EffectComposer>
-        <ToneMapping :mode="Number(mode.value)" :resolution="Number(resolution.value)" :blendFunction="Number(blendFunction.value)" />
-      </EffectComposer>
+      <EffectComposerPmndrs>
+        <ToneMappingPmndrs :mode="Number(mode.value)" :resolution="Number(resolution.value)" :blendFunction="Number(blendFunction.value)" />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>

playground/src/router.ts

@@ -33,7 +33,7 @@ export const threeRoutes = [
 
 export const postProcessingRoutes = [
   makeRoute('Outline', '🔲', false),
-  makeRoute('Tonemapping', '🎨', false),
+  makeRoute('Tone Mapping', '🎨', false),
   makeRoute('Glitch', '📺', false),
   makeRoute('Depth of Field', '📷', false),
   makeRoute('Pixelation', '👾', false),

src/core/pmndrs/ToneMapping.vue → src/core/pmndrs/ToneMappingPmndrs.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { BlendFunction, ToneMappingEffect, ToneMappingMode } from 'postprocessing'
-import { defineExpose, defineProps, watchEffect, withDefaults } from 'vue'
-import { useEffect } from './composables/useEffect'
+import { defineExpose } from 'vue'
 import { makePropWatchers } from '../../util/prop'
+import { useEffectPmndrs } from './composables/useEffectPmndrs'
 
-export interface ToneMappingProps {
+export interface ToneMappingPmndrsProps {
   /**
    * The tone mapping mode.
    */
@@ -42,7 +42,7 @@ export interface ToneMappingProps {
 }
 
 const props = withDefaults(
-  defineProps<ToneMappingProps>(),
+  defineProps<ToneMappingPmndrsProps>(),
   {
     mode: ToneMappingMode.AGX,
     blendFunction: BlendFunction.SRC,
@@ -54,23 +54,18 @@ const props = withDefaults(
   },
 )
 
-const { pass, effect } = useEffect(() => new ToneMappingEffect(props), props)
+const { pass, effect } = useEffectPmndrs(() => new ToneMappingEffect(props), props)
 
 defineExpose({ pass, effect })
 
-watchEffect(() => {
-  if (!effect.value) { return }
-
-  effect.value.blendMode.blendFunction = Number(props.blendFunction)
-})
-
 makePropWatchers(
   [
     [() => props.mode, 'mode'],
+    [() => props.blendFunction, 'blendMode.blendFunction'],
     [() => props.resolution, 'resolution'],
     [() => props.averageLuminance, 'averageLuminance'],
     [() => props.middleGrey, 'middleGrey'],
-    [() => props.minLuminance, 'minLuminance'],
+    [() => props.minLuminance, 'adaptiveLuminanceMaterial.minLuminance'],
     [() => props.whitePoint, 'whitePoint'],
   ],
   effect,

src/core/pmndrs/index.ts

@@ -9,6 +9,7 @@ import NoisePmndrs, { type NoisePmndrsProps } from './NoisePmndrs.vue'
 import OutlinePmndrs, { type OutlinePmndrsProps } from './OutlinePmndrs.vue'
 import PixelationPmndrs, { type PixelationPmndrsProps } from './PixelationPmndrs.vue'
 import VignettePmndrs, { type VignettePmndrsProps } from './VignettePmndrs.vue'
+import ToneMappingPmndrs, { type ToneMappingPmndrsProps } from './ToneMappingPmndrs.vue'
 
 export {
   BloomPmndrs,
@@ -20,6 +21,7 @@ export {
   PixelationPmndrs,
   useEffectPmndrs,
   VignettePmndrs,
+  ToneMappingPmndrs,
 
   BloomPmndrsProps,
   DepthOfFieldPmndrsProps,
@@ -29,4 +31,5 @@ export {
   OutlinePmndrsProps,
   PixelationPmndrsProps,
   VignettePmndrsProps,
+  ToneMappingPmndrsProps,
 }