feat: add sepia effect

docs/.vitepress/config.ts

@@ -54,6 +54,7 @@ export default defineConfig({
           { text: 'Noise', link: '/guide/pmndrs/noise' },
           { text: 'Outline', link: '/guide/pmndrs/outline' },
           { text: 'Chromatic Aberration', link: '/guide/pmndrs/chromatic-aberration' },
+          { text: 'Sepia', link: '/guide/pmndrs/sepia' },
           { text: 'Scanline', link: '/guide/pmndrs/scanline' },
           { text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
           { text: 'Vignette', link: '/guide/pmndrs/vignette' },

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { NoToneMapping } from 'three'
+import { EffectComposerPmndrs, SepiaPmndrs } from '@tresjs/post-processing'
+import { BlendFunction } from 'postprocessing'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#ffffff',
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+}
+
+const { intensity, blendFunction } = useControls({
+  intensity: { value: 1.0, step: 0.1, max: 5.0 },
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key],
+    })),
+    value: BlendFunction.NORMAL,
+  },
+})
+</script>
+
+<template>
+  <TresLeches style="left: initial;right:10px; top:10px;" />
+
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls auto-rotate />
+
+    <TresMesh :position="[0, .5, 0]">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshPhysicalMaterial color="black" :roughness=".25" />
+    </TresMesh>
+
+    <ContactShadows
+      :opacity="1"
+      :position-y="-.5"
+    />
+
+    <Suspense>
+      <Environment background :blur=".5" preset="snow" />
+    </Suspense>
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <SepiaPmndrs :intensity="intensity.value" :blendFunction="Number(blendFunction.value)" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>

docs/components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     PixelationDemo: typeof import('./.vitepress/theme/components/pmdrs/PixelationDemo.vue')['default']
     PixelationThreeDemo: typeof import('./.vitepress/theme/components/three/PixelationThreeDemo.vue')['default']
     ScanlineDemo: typeof import('./.vitepress/theme/components/pmdrs/ScanlineDemo.vue')['default']
+    SepiaDemo: typeof import('./.vitepress/theme/components/pmdrs/SepiaDemo.vue')['default']
     SMAAThreeDemo: typeof import('./.vitepress/theme/components/three/SMAAThreeDemo.vue')['default']
     ToneMappingDemo: typeof import('./.vitepress/theme/components/pmdrs/ToneMappingDemo.vue')['default']
     UnrealBloomThreeDemo: typeof import('./.vitepress/theme/components/three/UnrealBloomThreeDemo.vue')['default']

docs/guide/pmndrs/sepia.md

@@ -0,0 +1,66 @@
+# Sepia
+
+<DocsDemo>
+  <SepiaDemo />
+</DocsDemo>
+
+The `Sepia` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html) package. It applies a sepia tone to the scene, giving it a warm, antique appearance. This effect can enhance the visual appeal of your scene by adding a vintage or stylized touch.
+
+## Usage
+
+The `<SepiaPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
+
+```vue{2,36-40}
+<script setup lang="ts">
+import { EffectComposerPmndrs, SepiaPmndrs } from '@tresjs/post-processing/pmndrs'
+
+const gl = {
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+}
+
+</script>
+
+<template>
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+
+    <OrbitControls auto-rotate />
+
+    <TresMesh :position="[0, .5, 0]">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshPhysicalMaterial color="black" :roughness=".25" />
+    </TresMesh>
+
+    <ContactShadows
+      :opacity="1"
+      :position-y="-.5"
+    />
+
+    <Suspense>
+      <Environment background :blur=".5" preset="snow" />
+    </Suspense>
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <SepiaPmndrs :intensity="2" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop              | Description                                                                                                   | Default                   |
+| ----------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------- |
+| blendFunction     | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options.        | `BlendFunction.NORMAL`       |
+| 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)

playground/src/pages/postprocessing/sepia.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { NoToneMapping } from 'three'
+import { BlendFunction } from 'postprocessing'
+import { EffectComposerPmndrs, SepiaPmndrs } from '@tresjs/post-processing'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#ffffff',
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+}
+
+const { intensity, blendFunction } = useControls({
+  intensity: { value: 2.0, step: 0.1, max: 5.0 },
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key],
+    })),
+    value: BlendFunction.NORMAL,
+  },
+})
+</script>
+
+<template>
+  <TresLeches />
+
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls auto-rotate />
+
+    <TresMesh :position="[0, .5, 0]">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshPhysicalMaterial color="black" :roughness=".25" />
+    </TresMesh>
+
+    <ContactShadows
+      :opacity="1"
+      :position-y="-.5"
+    />
+
+    <Suspense>
+      <Environment background :blur=".5" preset="snow" />
+    </Suspense>
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <SepiaPmndrs :intensity="intensity.value" :blendFunction="Number(blendFunction.value)" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>

playground/src/router.ts

@@ -40,6 +40,7 @@ export const postProcessingRoutes = [
   makeRoute('Bloom', '🌼', false),
   makeRoute('Noise', '📟', false),
   makeRoute('Chromatic Aberration', '🌈', false),
+  makeRoute('Sepia', '🌅', false),
   makeRoute('Scanline', '📺', false),
   makeRoute('Vignette', '🕶️', false),
   makeRoute('On-demand', '🔄', false),

src/core/pmndrs/SepiaPmndrs.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { BlendFunction } from 'postprocessing'
+import { SepiaEffect } from 'postprocessing'
+import { makePropWatchers } from '../../util/prop'
+import { useEffectPmndrs } from './composables/useEffectPmndrs'
+
+export interface SepiaPmndrsProps {
+  /**
+   * The blend function.
+   */
+  blendFunction?: BlendFunction
+
+  /**
+   * The intensity of the sepia effect.
+   */
+  intensity?: number
+}
+
+const props = defineProps<SepiaPmndrsProps>()
+
+const { pass, effect } = useEffectPmndrs(() => new SepiaEffect(props), props)
+
+defineExpose({ pass, effect })
+
+makePropWatchers(
+  [
+    [() => props.blendFunction, 'blendMode.blendFunction'],
+    [() => props.intensity, 'intensity'],
+  ],
+  effect,
+  () => new SepiaEffect(),
+)
+</script>

src/core/pmndrs/index.ts

@@ -12,6 +12,7 @@ import VignettePmndrs, { type VignettePmndrsProps } from './VignettePmndrs.vue'
 import ChromaticAberrationPmndrs, { type ChromaticAberrationPmndrsProps } from './ChromaticAberration.vue'
 import HueSaturationPmndrs, { type HueSaturationPmndrsProps } from './HueSaturationPmndrs.vue'
 import ScanlinePmndrs, { type ScanlinePmndrsProps } from './ScanlinePmndrs.vue'
+import SepiaPmndrs, { type SepiaPmndrsProps } from './SepiaPmndrs.vue'
 
 export {
   BloomPmndrs,
@@ -26,6 +27,8 @@ export {
   ChromaticAberrationPmndrs,
   HueSaturationPmndrs,
   ScanlinePmndrs,
+  SepiaPmndrs,
+
   BloomPmndrsProps,
   DepthOfFieldPmndrsProps,
   EffectComposerPmndrsProps,
@@ -37,4 +40,5 @@ export {
   ChromaticAberrationPmndrsProps,
   HueSaturationPmndrsProps,
   ScanlinePmndrsProps,
+  SepiaPmndrsProps,
 }