diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 3689f806..daed9210 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -61,6 +61,7 @@ export default defineConfig({
           { text: 'Hue & Saturation', link: '/guide/pmndrs/hue-saturation' },
           { text: 'Lens Distortion', link: '/guide/pmndrs/lens-distortion' },
           { text: 'Grid', link: '/guide/pmndrs/grid' },
+          { text: 'ASCII', link: '/guide/pmndrs/ascii' },
           { text: 'FXAA', link: '/guide/pmndrs/fxaa' },
           { text: 'SMAA', link: '/guide/pmndrs/smaa' },
           { text: 'Kuwahara', link: '/guide/pmndrs/kuwahara' },
diff --git a/docs/.vitepress/theme/components/pmdrs/ASCIIDemo.vue b/docs/.vitepress/theme/components/pmdrs/ASCIIDemo.vue
new file mode 100644
index 00000000..ef9239a9
--- /dev/null
+++ b/docs/.vitepress/theme/components/pmdrs/ASCIIDemo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { Environment, Levioso, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { NoToneMapping } from 'three'
+import { BlendFunction } from 'postprocessing'
+import { ASCIIPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#ffffff',
+  toneMapping: NoToneMapping,
+}
+
+const glComposer = {
+  multisampling: 4,
+}
+
+const leviosoProps = {
+  speed: 2,
+  rotationFactor: 2,
+  range: [-1, 1] as [number, number],
+}
+
+const { size: textureSize, characters, font, fontSize, cellCount, enabled, blendFunction, opacity, cellSize, inverted, color, useSceneColor } = useControls({
+  enabled: true,
+  cellSize: { value: 10, step: 1, min: 2, max: 64 },
+  useSceneColor: false,
+  color: '#ffffff',
+  inverted: false,
+  characters: { value: ' .,:-~+=*≡TRESJCIENTOSLECHESPOSTPROCESSING3D#░▒▓█■▲◼◾' },
+  font: { value: 'Arial' },
+  fontSize: { value: 44, step: 1, min: 10, max: 100 },
+  size: { value: 1024, step: 128, min: 256, max: 2048, label: 'textureSize' },
+  cellCount: { value: 16, step: 1, min: 4, max: 64 },
+  opacity: { value: 1, step: 0.1, min: 0.0, max: 1.0 },
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key as keyof typeof BlendFunction],
+    })),
+    value: BlendFunction.LINEAR_BURN,
+  },
+})
+</script>
+
+<template>
+  <div class="aspect-16/9">
+    <TresCanvas
+      v-bind="gl"
+    >
+      <TresPerspectiveCamera :position="[5, 3, 7]" />
+      <OrbitControls auto-rotate />
+
+      <Levioso v-bind="leviosoProps">
+        <TresMesh :position="[-2, .5, 0]">
+          <TresBoxGeometry :args="[2, 2, 2]" />
+          <TresMeshPhysicalMaterial color="white" />
+        </TresMesh>
+      </Levioso>
+
+      <Levioso v-bind="leviosoProps">
+        <TresMesh :position="[3, .5, 0]">
+          <TresSphereGeometry :args="[1.5, 32, 32]" />
+          <TresMeshPhysicalMaterial color="white" />
+        </TresMesh>
+      </Levioso>
+
+      <Suspense>
+        <Environment background :blur="0.2" preset="snow" />
+      </Suspense>
+
+      <Suspense>
+        <EffectComposerPmndrs v-bind="glComposer">
+          <ASCIIPmndrs
+            :blendFunction="enabled ? Number(blendFunction) : Number(BlendFunction.SKIP)"
+            :opacity="opacity"
+            :cellSize="cellSize"
+            :inverted="inverted"
+            :color="color"
+            :useSceneColor="useSceneColor"
+            :asciiTexture="{
+              characters,
+              font,
+              fontSize,
+              size: textureSize,
+              cellCount,
+            }"
+          />
+        </EffectComposerPmndrs>
+      </Suspense>
+    </TresCanvas>
+  </div>
+  <TresLeches :float="false" />
+</template>
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 680367d8..4f521f37 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ASCIIDemo: typeof import('./.vitepress/theme/components/pmdrs/ASCIIDemo.vue')['default']
     BarrelBlurDemo: typeof import('./.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue')['default']
     BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
     BloomDemo: typeof import('./.vitepress/theme/components/pmdrs/BloomDemo.vue')['default']
diff --git a/docs/guide/pmndrs/ascii.md b/docs/guide/pmndrs/ascii.md
new file mode 100644
index 00000000..b33748c5
--- /dev/null
+++ b/docs/guide/pmndrs/ascii.md
@@ -0,0 +1,71 @@
+# ASCII
+
+<DocsDemoGUI>
+  <ASCIIDemo />
+</DocsDemoGUI>
+
+<details>
+  <summary>Demo code</summary>
+
+  <<< @/.vitepress/theme/components/pmdrs/ASCIIDemo.vue{0}
+</details>
+
+The `ASCIIEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ASCIIEffect.js~ASCIIEffect.html) package.
+This effect transforms the visual output into a grid of ASCII characters, offering a unique and artistic way to display 3D content. The ASCII characters used can be customized, allowing for a wide range of creative possibilities.
+
+## Usage
+
+The `<ASCIIPmndrs>` component is straightforward to integrate and offers a variety of customizable properties, allowing you to adapt it to diverse artistic and visual requirements.
+
+```vue{2,12-17,29-33}
+<script setup lang="ts">
+import { EffectComposerPmndrs, ASCIIPmndrs } from '@tresjs/post-processing/pmndrs'
+
+const gl = {
+  toneMapping: NoToneMapping,
+}
+
+const glComposer = {
+  multisampling: 4,
+}
+
+const effectProps = {
+  blendFunction: BlendFunction.NORMAL,
+  asciiTexture: {
+    characters: ' .,:-~+=*≡HELLOWORLD#░▒▓█■▲◼◾',
+  }
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera />
+
+    <TresMesh :position="[0, .5, 0]">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshToonMaterial color="black" />
+    </TresMesh>
+
+    <Suspense>
+      <EffectComposerPmndrs v-bind="glComposer">
+        <ASCIIPmndrs v-bind="effectProps" />
+      </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`      |
+| opacity        | The opacity of the effect.                                                                      | `1.0`                       |
+| cellSize       | The size of the ASCII grid cells.                                                               | `16`                 |
+| inverted       | Controls whether the effect should be inverted.                                                 | `false`                     |
+| color          | The color of the effect. Can be a [`Color`](https://threejs.org/docs/#api/en/math/Color), `string`, `number`, or `null`. If set to `null`, the colors of the scene will be used.                           | `null`                      |
+| useSceneColor  | Controls whether the effect should use the scene color. If `true`, overrides the `color` prop.                                 | `false`                     |
+| asciiTexture   | Options for creating an ASCIITexture instance. |  See the [`ASCIITexture`](https://pmndrs.github.io/postprocessing/public/docs/class/src/textures/ASCIITexture.js~ASCIITexture.html) documentation.                 |
+
+## Further Reading
+For more details, see the [ASCIIEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ASCIIEffect.js~ASCIIEffect.html)
diff --git a/package.json b/package.json
index 35cb1081..12990611 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^12.5.0",
-    "postprocessing": "^6.36.6"
+    "postprocessing": "^6.37.2"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.0",
diff --git a/playground/src/pages/postprocessing/ascii.vue b/playground/src/pages/postprocessing/ascii.vue
new file mode 100644
index 00000000..c334ab89
--- /dev/null
+++ b/playground/src/pages/postprocessing/ascii.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { 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 { ASCIIPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#ffffff',
+  toneMapping: NoToneMapping,
+}
+
+const { enabled, blendFunction, opacity, cellSize, inverted, color, useSceneColor, characters, font, fontSize, size, cellCount } = useControls({
+  enabled: true,
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key as keyof typeof BlendFunction],
+    })),
+    value: BlendFunction.NORMAL,
+  },
+  opacity: { value: 1, step: 0.1, min: 0.0, max: 1.0 },
+  cellSize: { value: 12, step: 1, min: 2, max: 64 },
+  useSceneColor: false,
+  color: '#ffffff',
+  inverted: false,
+  characters: { value: '@#8&$%*o!;.' },
+  font: { value: 'Arial' },
+  fontSize: { value: 54, step: 1, min: 10, max: 100 },
+  size: { value: 1024, step: 128, min: 256, max: 2048, label: 'textureSize' },
+  cellCount: { value: 16, step: 1, min: 4, max: 64 },
+})
+</script>
+
+<template>
+  <TresLeches />
+
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 6.5, 7.5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls auto-rotate />
+
+    <TresMesh :position="[0, .5, 0]">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshPhysicalMaterial color="white" />
+    </TresMesh>
+
+    <Suspense>
+      <Environment background preset="dawn" />
+    </Suspense>
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <ASCIIPmndrs
+          :blendFunction="enabled ? Number(blendFunction) : Number(BlendFunction.SKIP)"
+          :opacity="opacity"
+          :cellSize="cellSize"
+          :inverted="inverted"
+          :color="color"
+          :useSceneColor="useSceneColor"
+          :asciiTexture="{
+            characters,
+            font,
+            fontSize,
+            size,
+            cellCount,
+          }"
+        />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index adf6eda2..696e1e76 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -52,6 +52,7 @@ export const postProcessingRoutes = [
   makeRoute('Scanline', '📽️', false),
   makeRoute('Color Depth', '🔳', false),
   makeRoute('Grid', '#️⃣', false),
+  makeRoute('ASCII', '🔡', false),
   makeRoute('SMAA', '📐', false),
   makeRoute('FXAA', '📐', false),
   makeRoute('Shock Wave', '🌊', false),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26e1b16b..f730fc7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^12.5.0
         version: 12.5.0(typescript@5.7.3)
       postprocessing:
-        specifier: ^6.36.6
-        version: 6.36.6(three@0.173.0)
+        specifier: ^6.37.2
+        version: 6.37.2(three@0.173.0)
     devDependencies:
       '@release-it/conventional-changelog':
         specifier: ^10.0.0
@@ -3565,10 +3565,10 @@ packages:
     resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postprocessing@6.36.6:
-    resolution: {integrity: sha512-mjJjoXbC97XMV6iQVhOZYNjD5X93o3+/zpYm9oRmsyjP3LjfwedT8PgusECTk+s5DZeZoJ8vA9htdWuH8JH+mQ==}
+  postprocessing@6.37.2:
+    resolution: {integrity: sha512-Xm3n1Usgk2eBkufb1ssYDNGb3EXmV2wdQQIRGAWD9yppOYwsHpb8/w/+Opvnx6uEOFyt3US1dFbET5DTSyrRiA==}
     peerDependencies:
-      three: '>= 0.157.0 < 0.173.0'
+      three: '>= 0.157.0 < 0.176.0'
 
   potpack@1.0.2:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
@@ -8373,7 +8373,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postprocessing@6.36.6(three@0.173.0):
+  postprocessing@6.37.2(three@0.173.0):
     dependencies:
       three: 0.173.0
 
diff --git a/src/core/pmndrs/ASCIIPmndrs.vue b/src/core/pmndrs/ASCIIPmndrs.vue
new file mode 100644
index 00000000..755fab40
--- /dev/null
+++ b/src/core/pmndrs/ASCIIPmndrs.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { BlendFunction } from 'postprocessing'
+import { ASCIIEffect, ASCIITexture } from 'postprocessing'
+import { makePropWatchers } from '../../util/prop'
+import { useEffectPmndrs } from './composables/useEffectPmndrs'
+import { onUnmounted, watch } from 'vue'
+import type { Color } from 'three'
+
+type ASCIITextureOptions = ConstructorParameters<typeof ASCIITexture>[0]
+
+export interface ASCIIPmndrsProps {
+  /**
+   * The blend function.
+   */
+  blendFunction?: BlendFunction
+  /**
+   * The opacity of the effect.
+   */
+  opacity?: number
+  /**
+   * The cell size.
+   */
+  cellSize?: number
+  /**
+   * Controls whether the effect should be inverted.
+   */
+  inverted?: boolean
+  /**
+   * The color of the effect.
+   */
+  color?: Color | string | number | null
+  /**
+   * Controls whether the effect should use the scene color.
+   * If `true`, it overrides the `color` props.
+   */
+  useSceneColor?: boolean
+  /**
+   * The ASCII texture options to use for creating an ASCIITexture instance.
+   * https://pmndrs.github.io/postprocessing/public/docs/class/src/textures/ASCIITexture.js~ASCIITexture.html
+   */
+  asciiTexture?: ASCIITextureOptions
+}
+
+const props = defineProps<ASCIIPmndrsProps>()
+
+const plainEffect = new ASCIIEffect()
+
+const { asciiTexture, ...asciiEffectProps } = props
+
+const { pass, effect } = useEffectPmndrs(() => new ASCIIEffect(asciiEffectProps), props)
+
+defineExpose({ pass, effect })
+
+onUnmounted(() => {
+  plainEffect.dispose()
+})
+
+makePropWatchers(
+  [
+    [() => props.blendFunction, 'blendMode.blendFunction'],
+    [() => props.cellSize, 'cellSize'],
+    [() => props.inverted, 'inverted'],
+  ],
+  effect,
+  () => new ASCIIEffect(),
+)
+
+watch(
+  [effect, () => props.useSceneColor],
+  () => {
+    if (!effect.value) { return }
+
+    if (props.useSceneColor) {
+      effect.value.color = null
+    }
+    else {
+      effect.value.color = props.color ?? plainEffect.color
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  [effect, () => props.opacity],
+  () => {
+    if (!effect.value) { return }
+
+    effect.value.blendMode.setOpacity(props.opacity ?? plainEffect.blendMode.getOpacity())
+  },
+  { immediate: true },
+)
+
+watch(
+  [effect, () => props.color],
+  () => {
+    if (!effect.value) { return }
+
+    if (!props.useSceneColor) {
+      effect.value.color = props.color ?? null
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  [effect, () => props.asciiTexture],
+  () => {
+    if (!effect.value) { return }
+
+    const texture = props.asciiTexture
+      ? new ASCIITexture(props.asciiTexture)
+      : plainEffect.asciiTexture
+
+    effect.value.asciiTexture = texture
+  },
+  { immediate: true },
+)
+
+watch(
+  [effect, () => props.blendFunction],
+  () => {
+    if (!effect.value) { return }
+
+    effect.value.blendMode.blendFunction = props.blendFunction ? Number(props.blendFunction) : Number(plainEffect.blendMode.blendFunction)
+  },
+  { immediate: true },
+)
+</script>
diff --git a/src/core/pmndrs/index.ts b/src/core/pmndrs/index.ts
index b6da7b84..0ad9e9f3 100644
--- a/src/core/pmndrs/index.ts
+++ b/src/core/pmndrs/index.ts
@@ -30,6 +30,7 @@ import FishEyePmndrs, { type FishEyePmndrsProps } from './FishEyePmndrs.vue'
 import BrightnessContrastPmndrs, { type BrightnessContrastPmndrsProps } from './BrightnessContrastPmndrs.vue'
 import SMAAPmndrs, { type SMAAPmndrsProps } from './SMAAPmndrs.vue'
 import FXAAPmndrs, { type FXAAPmndrsProps } from './FXAAPmndrs.vue'
+import ASCIIPmndrs, { type ASCIIPmndrsProps } from './ASCIIPmndrs.vue'
 
 export {
   BloomPmndrs,
@@ -62,6 +63,7 @@ export {
   BrightnessContrastPmndrs,
   SMAAPmndrs,
   FXAAPmndrs,
+  ASCIIPmndrs,
   BloomPmndrsProps,
   DepthOfFieldPmndrsProps,
   EffectComposerPmndrsProps,
@@ -91,4 +93,5 @@ export {
   BrightnessContrastPmndrsProps,
   SMAAPmndrsProps,
   FXAAPmndrsProps,
+  ASCIIPmndrsProps,
 }