add asciiTexture props

Author: damienmontastier

playground/src/pages/postprocessing/ascii.vue

@@ -3,30 +3,35 @@ 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 { ASCIITexture, BlendFunction } from 'postprocessing'
 import { ASCIIPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 
 import '@tresjs/leches/styles'
 
 const gl = {
   clearColor: '#ffffff',
   toneMapping: NoToneMapping,
-  multisampling: 8,
 }
 
-const { blendFunction, opacity, cellSize, inverted, color, useSceneColor } = useControls({
+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.OVERLAY,
+    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: '#ff0000',
+  color: '#ffffff',
   inverted: false,
+  characters: { value: '@#8&$%*o!;.', label: 'Characters' },
+  font: { value: 'Arial', label: 'Font' },
+  fontSize: { value: 54, step: 1, min: 10, max: 100, label: 'Font Size' },
+  size: { value: 1024, step: 128, min: 256, max: 2048, label: 'Texture Size' },
+  cellCount: { value: 16, step: 1, min: 4, max: 64, label: 'Cell Count' },
 })
 </script>
 
@@ -37,34 +42,36 @@ const { blendFunction, opacity, cellSize, inverted, color, useSceneColor } = use
     v-bind="gl"
   >
     <TresPerspectiveCamera
-      :position="[5, 5, 5]"
+      :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="black" :roughness=".25" />
+      <TresMeshPhysicalMaterial color="white" />
     </TresMesh>
 
-    <ContactShadows
-      :opacity="1"
-      :position-y="-.5"
-    />
-
     <Suspense>
-      <Environment background :blur=".5" preset="night" />
+      <Environment background preset="dawn" />
     </Suspense>
 
     <Suspense>
       <EffectComposerPmndrs>
         <ASCIIPmndrs
-          :blendFunction="Number(blendFunction)"
+          :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>

src/core/pmndrs/ASCIIPmndrs.vue

@@ -1,14 +1,11 @@
 <script lang="ts" setup>
 import type { BlendFunction } from 'postprocessing'
-import { ASCIIEffect } from 'postprocessing'
+import { ASCIIEffect, ASCIITexture } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
 import { useEffectPmndrs } from './composables/useEffectPmndrs'
-import { watch } from 'vue'
+import { onUnmounted, watch } from 'vue'
 import type { Color } from 'three'
 
-// TODO: ADD PROPS:
-// - asciiTexture: (ASCIITexture)
-
 export interface ASCIIPmndrsProps {
   /**
    * The blend function.
@@ -32,22 +29,33 @@ export interface ASCIIPmndrsProps {
   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 to use or a custom configuration for it.
+   * https://pmndrs.github.io/postprocessing/public/docs/class/src/textures/ASCIITexture.js~ASCIITexture.html
+   */
+  asciiTexture?: ASCIITexture
 }
 
 const props = defineProps<ASCIIPmndrsProps>()
 
-const { pass, effect } = useEffectPmndrs(() => new ASCIIEffect(props), props)
+const plainEffect = new ASCIITexture()
+
+const { pass, effect } = useEffectPmndrs(() => new ASCIIEffect(), props)
 
 defineExpose({ pass, effect })
 
+onUnmounted(() => {
+  plainEffect.dispose()
+})
+
 makePropWatchers(
   [
     [() => props.blendFunction, 'blendMode.blendFunction'],
     [() => props.cellSize, 'cellSize'],
     [() => props.inverted, 'inverted'],
-    [() => props.color, 'color'],
   ],
   effect,
   () => new ASCIIEffect(),
@@ -61,10 +69,8 @@ watch(
     if (props.useSceneColor) {
       effect.value.color = null
     }
-    else if (!props.useSceneColor) {
-      const plainEffect = new ASCIIEffect()
-      effect.value.color = props.color ? props.color : plainEffect.color
-      plainEffect.dispose()
+    else {
+      effect.value.color = props.color ?? plainEffect.color
     }
   },
   { immediate: true },
@@ -75,15 +81,34 @@ watch(
   () => {
     if (!effect.value) { return }
 
-    if (props.opacity !== undefined) {
-      effect.value?.blendMode.setOpacity(props.opacity)
-    }
-    else {
-      const plainEffect = new ASCIIEffect()
-      effect.value?.blendMode.setOpacity(plainEffect.blendMode.getOpacity())
-      plainEffect.dispose()
+    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 },
+)
 </script>