Postprocessing: Ability to toggle GlitchEffect

[talentlessguy]

Hello, I'm writing a react-postprocessing library and I encountered one issue. There is no way to toggle the effect.

enabled is getter-only property, according to doc.

I think it makes sense to make active a public property, so we can easily turn it on and off, like here:

const effect = new GlitchEffect()

effect.active = false // disable the effect
effect.active = true // enable it

So in my lib, it will be very simple to turn the effect on and off:

import React, { Suspense, useState } from 'react'
import { Canvas } from 'react-three-fiber'
import { EffectComposer, Glitch } from 'react-postprocessing'
import Model from './Model'

export default function App() {

  const [isTriggered, trigger] = useState(false)

  return (
    <Canvas shadowMap colorManagement
      gl={{ alpha: false, logarithmicDepthBuffer: true }}
      camera={{ position: [0, 2.5, 25], fov: 35 }}>
      <ambientLight />
      <Suspense fallback={null}>
        <Model onClick={() => trigger(!isTriggered)} />
        <EffectComposer>
          <Glitch active={isTriggered} />
        </EffectComposer>
      </Suspense>
    </Canvas>
  )

I can make a PR making the property accessible which will allow conditional glitching (e.g. glitch on mouse hover).

[vanruesc]

Hi,

thanks for bringing postprocessing to react 👍

It's already possible to disable the GlitchEffect on the fly by setting GlitchEffect.mode to GlitchMode.DISABLED.

[talentlessguy]

@vanruesc oh thank you! I forgot about that :D

I will close the issue then, because I can extend GlitchEffect props with my own and alias active to that mode