feat: glitch looking good

playground/components.d.ts

@@ -10,6 +10,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     copy: typeof import('./src/components/TheExperience copy.vue')['default']
+    GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']

playground/src/components/GlitchDemo.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { EffectComposer, Glitch } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { reactive } from 'vue'
+import { GlitchMode } from 'postprocessing'
+import { Vector2 } from 'three'
+
+const gl = {
+  clearColor: '#121212',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+
+const glitchParams = reactive({
+  delay: new Vector2(1.5, 3.5),
+  duration: new Vector2(0.6, 1.0),
+  strength: new Vector2(0.3, 1.0),
+  mode: GlitchMode.SPORADIC,
+  active: true,
+  ratio: 0.85,
+  columns: 2,
+  chromaticAberrationOffset: new Vector2(0.001, 0.001),
+  chromaticAberrationEnabled: true,
+  dtSize: 64,
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(glitchParams, 'delay')
+pane.addInput(glitchParams, 'duration')
+pane.addInput(glitchParams, 'strength')
+pane.addInput(glitchParams, 'mode', {
+  options: {
+    SPORADIC: GlitchMode.SPORADIC,
+    CONSTANT_MILD: GlitchMode.CONSTANT_MILD,
+    CONSTANT_WILD: GlitchMode.CONSTANT_WILD,
+  },
+})
+pane.addInput(glitchParams, 'active')
+pane.addInput(glitchParams, 'ratio', { min: 0, max: 1 })
+pane.addInput(glitchParams, 'columns', { min: 1, max: 64, step: 1 })
+pane.addInput(glitchParams, 'chromaticAberrationOffset')
+pane.addInput(glitchParams, 'dtSize', { min: 1, max: 64, step: 1 })
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" disable-render>
+    <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <Suspense>
+      <EffectComposer>
+        <Glitch v-bind="glitchParams" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

playground/src/components/UnrealBloom.vue

@@ -4,6 +4,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
 import { EffectComposer, Bloom } from '@tresjs/post-processing'
 import { BasicShadowMap, NoToneMapping } from 'three'
+import { onMounted, reactive, ref } from 'vue'
 
 const gl = {
   clearColor: '#121212',

playground/src/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <UnrealBloom />
+  <GlitchDemo />
 </template>

src/core/effects/Bloom.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Ref, defineComponent, inject, ref, toRaw, toRefs, unref, watchEffect } from 'vue'
+import { Ref, inject, ref, toRaw, unref } from 'vue'
 import { BlurPass, KernelSize, EffectPass, BloomEffect, EffectComposer, BlendFunction } from 'postprocessing'
 import { useCore } from '../useCore'
 import { watch } from 'vue'
@@ -88,40 +88,35 @@ const pass = ref<EffectPass | null>(null)
 
 defineExpose({ pass })
 
+function createPass() {
+  pass.value = new EffectPass(
+    unref(state.camera),
+    new BloomEffect({
+      blendFunction,
+      mipmapBlur,
+      intensity,
+      luminanceThreshold,
+      luminanceSmoothing,
+    }),
+  )
+}
+
 watch(
   () => [state.camera, composer?.value],
   () => {
     if (state.camera && composer && composer.value) {
-      pass.value = new EffectPass(
-        unref(state.camera),
-        new BloomEffect({
-          blendFunction,
-          mipmapBlur,
-          intensity,
-          luminanceThreshold,
-          luminanceSmoothing,
-        }),
-      )
+      createPass()
       composer?.value?.addPass(toRaw(pass.value) as EffectPass)
     }
   },
 )
 
 watch(
-  () => [blendFunction.value, mipmapBlur.value, intensity.value, luminanceThreshold.value, luminanceSmoothing.value],
+  () => [blendFunction, mipmapBlur, intensity, luminanceThreshold, luminanceSmoothing],
   () => {
     if (pass.value) {
       composer?.value.removePass(toRaw(pass.value) as EffectPass)
-      pass.value = new EffectPass(
-        unref(state.camera),
-        new BloomEffect({
-          blendFunction,
-          mipmapBlur,
-          intensity,
-          luminanceThreshold,
-          luminanceSmoothing,
-        }),
-      )
+      createPass()
       composer?.value?.addPass(toRaw(pass.value) as EffectPass)
     }
   },

src/core/effects/Glitch.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { GlitchMode, EffectComposer, EffectPass, GlitchEffect, BlendFunction } from 'postprocessing'
+import { Ref, inject, ref, toRaw, unref, watch, watchEffect } from 'vue'
+
+import { Vector2, Texture } from 'three'
+
+import { useCore } from '../useCore'
+
+export interface GlitchProps {
+  blendFunction?: BlendFunction
+  /**
+   *  The minimum and maximum delay between glitch activations in seconds.
+   *
+   * @default [1.5, 3.5]
+   *
+   * @type {Vector2}
+   * @memberof GlitchProps
+   */
+  delay?: Vector2
+  /**
+   * The minimum and maximum duration of a glitch in seconds.
+   *
+   * @default [0.6, 1.0]
+   *
+   * @type {Vector2}
+   * @memberof GlitchProps
+   */
+  duration?: Vector2
+  /**
+   * The strength of weak and strong glitches.
+   *
+   * @default [0.3, 1.0]
+   *
+   * @type {Vector2}
+   * @memberof GlitchProps
+   */
+  strength?: Vector2
+  /**
+   * The glitch mode. Can be DISABLED | SPORADIC | CONSTANT_MILD | CONSTANT_WILD .
+   *
+   * @default GlitchMode.SPORADIC
+   *
+   * @type {GlitchMode}
+   * @memberof GlitchProps
+   */
+  mode?: GlitchMode
+  /**
+   * Turn the effect on and off.
+   *
+   * @type {boolean}
+   * @memberof GlitchProps
+   */
+  active?: boolean
+  /**
+   *
+   * The threshold for strong glitches.
+   *
+   * @default 0.85
+   *
+   * @type {number}
+   * @memberof GlitchProps
+   */
+  ratio?: number
+  /**
+   * The scale of the blocky glitch columns.
+   *
+   * @default 0.05
+   *
+   * @type {number}
+   * @memberof GlitchProps
+   */
+  columns?: number
+  /**
+   * A chromatic aberration offset. If provided, the glitch effect will influence this offset.
+   *
+   * @type {Vector2}
+   * @memberof GlitchProps
+   */
+  chromaticAberrationOffset?: Vector2
+  /**
+   * A perturbation map. If none is provided, a noise texture will be created.
+   *
+   * @type {Texture}
+   * @memberof GlitchProps
+   */
+  peturbationMap?: Texture
+  /**
+   * The size of the generated noise map. Will be ignored if a perturbation map is provided.
+   *
+   * @default 64
+   *
+   * @type {number}
+   * @memberof GlitchProps
+   */
+  dtSize?: number
+}
+
+const {
+  blendFunction = BlendFunction.ADD,
+  delay,
+  duration,
+  strength,
+  mode,
+  active,
+  ratio = 0.85,
+  columns = 0.05,
+  chromaticAberrationOffset,
+  peturbationMap,
+  dtSize = 64,
+} = defineProps<GlitchProps>()
+
+const { state } = useCore()
+
+const composer = inject<Ref<EffectComposer>>('effectComposer')
+const pass = ref<EffectPass | null>(null)
+
+defineExpose({ pass })
+
+function createPass() {
+  pass.value = new EffectPass(
+    unref(state.camera),
+    new GlitchEffect({
+      blendFunction,
+      delay,
+      duration,
+      strength,
+      ratio,
+      columns,
+      chromaticAberrationOffset,
+      dtSize,
+    }),
+  )
+}
+
+watch(
+  () => [state.camera, composer?.value],
+  () => {
+    if (state.camera && composer && composer.value) {
+      createPass()
+      composer?.value?.addPass(toRaw(pass.value) as EffectPass)
+    }
+  },
+)
+
+watch(
+  () => [delay, duration, strength, ratio, columns, chromaticAberrationOffset, peturbationMap, dtSize],
+  () => {
+    console.log('props changed', composer?.value.passes)
+    if (pass.value) {
+      composer?.value.removePass(toRaw(pass.value) as EffectPass)
+      createPass()
+      composer?.value?.addPass(toRaw(pass.value) as EffectPass)
+    }
+  },
+)
+
+watchEffect(() => {
+  if (pass.value) {
+    pass.value.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED
+  }
+})
+
+watch(
+  () => active,
+  value => {
+    if (pass.value) {
+      pass.value.enabled = value as boolean
+    }
+  },
+)
+</script>
+<template></template>

src/index.ts

@@ -1,6 +1,6 @@
 import EffectComposer from './core/EffectComposer.vue'
 import Bloom from './core/effects/Bloom.vue'
-import { Glitch } from './core/effects/Glitch'
+import Glitch from './core/effects/Glitch.vue'
 import { Outline } from './core/effects/Outline'
 
 export { EffectComposer, Bloom, Glitch, Outline }