How to change the frequency of GlitchPass?

Hi guys, using the GlitchPass is possible someway to manipulate the frequency of the glitch?
I would like to reduce the frequency so it happens less often and also in a random way (not fixed interval).
Any idea?

1 Like

The property curF controls how often the glitch occurs. The idea is to change the way how the variable is incremented. Right now, this happens when the pass is going to be rendered:

The idea is to remove this line an update curF in the above if statements. The first and second branches perform the actual glitch, the third branch represents the stationary phase. So incremented curF in the first and second if statement by one. In the third statement incremented it by a smaller value. The lower the value, the longer the phase where nothing happens.

Demo: https://jsfiddle.net/jdw0372t/

2 Likes

Thank you! Perfect

This is what worked for me.
Change the 0.1 in if (Math.random() < 0.1) { to a higher value for a more frequent glitch.

import {
    DataTexture,
    FloatType,
    MathUtils,
    RGBFormat,
    ShaderMaterial,
    UniformsUtils
} from "three";
import { Pass } from "three/examples/jsm/postprocessing/Pass"
import { DigitalGlitch } from "three/examples/jsm/shaders/DigitalGlitch"

var GlitchPass = function ( dt_size ) {

    Pass.call( this );

    if ( DigitalGlitch === undefined ) console.error( "GlitchPass relies on DigitalGlitch" );

    var shader = DigitalGlitch;
    this.uniforms = UniformsUtils.clone( shader.uniforms );

    if ( dt_size == undefined ) dt_size = 64;


    this.uniforms[ "tDisp" ].value = this.generateHeightmap( dt_size );


    this.material = new ShaderMaterial( {
        uniforms: this.uniforms,
        vertexShader: shader.vertexShader,
        fragmentShader: shader.fragmentShader
    } );

    this.fsQuad = new Pass.FullScreenQuad( this.material );

    this.goWild = false;
    this.curF = 1;
    this.generateTrigger();

};

GlitchPass.prototype = Object.assign( Object.create( Pass.prototype ), {

    constructor: GlitchPass,

    render: function ( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {

        this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
        this.uniforms[ 'seed' ].value = Math.random();//default seeding
        this.uniforms[ 'byp' ].value = 0;

        if ( this.curF % this.randX == 0 || this.goWild == true ) {
            this.uniforms[ 'amount' ].value = Math.random() / 30;
            this.uniforms[ 'angle' ].value = MathUtils.randFloat( - Math.PI, Math.PI );
            this.uniforms[ 'seed_x' ].value = MathUtils.randFloat( - 1, 1 );
            this.uniforms[ 'seed_y' ].value = MathUtils.randFloat( - 1, 1 );
            this.uniforms[ 'distortion_x' ].value = MathUtils.randFloat( 0, 1 );
            this.uniforms[ 'distortion_y' ].value = MathUtils.randFloat( 0, 1 );
            this.curF = 0;
            this.generateTrigger();

        } else if ( this.curF % this.randX < this.randX / 5 ) {
            this.uniforms[ 'amount' ].value = Math.random() / 90;
            this.uniforms[ 'angle' ].value = MathUtils.randFloat( - Math.PI, Math.PI );
            this.uniforms[ 'distortion_x' ].value = MathUtils.randFloat( 0, 1 );
            this.uniforms[ 'distortion_y' ].value = MathUtils.randFloat( 0, 1 );
            this.uniforms[ 'seed_x' ].value = MathUtils.randFloat( - 0.3, 0.3 );
            this.uniforms[ 'seed_y' ].value = MathUtils.randFloat( - 0.3, 0.3 );
            this.curF ++;

        } else if ( this.goWild == false ) {
            if (Math.random() < 0.1) {
                this.curF ++;
            }
            this.uniforms[ 'byp' ].value = 1;
        }

        if (this.curF % this.randX == 0 || this.goWild == true) {
            this.curF ++;
        }

        if ( this.renderToScreen ) {

            renderer.setRenderTarget( null );
            this.fsQuad.render( renderer );

        } else {

            renderer.setRenderTarget( writeBuffer );
            if ( this.clear ) renderer.clear();
            this.fsQuad.render( renderer );

        }

    },

    generateTrigger: function () {

        this.randX = MathUtils.randInt( 120, 240 );

    },

    generateHeightmap: function ( dt_size ) {

        var data_arr = new Float32Array( dt_size * dt_size * 3 );
        var length = dt_size * dt_size;

        for ( var i = 0; i < length; i ++ ) {

            var val = MathUtils.randFloat( 0, 1 );
            data_arr[ i * 3 + 0 ] = val;
            data_arr[ i * 3 + 1 ] = val;
            data_arr[ i * 3 + 2 ] = val;

        }

        return new DataTexture( data_arr, dt_size, dt_size, RGBFormat, FloatType );

    }

} );

export { GlitchPass };

I have the same problem, but for some reason both solutions don’t work for me.

I reverted to @Mugen87 's solution (see below, maybe I did a mistake? the jsfiddle doesn’t work anymore)

but even a very low increment value the “normal” glitch still happens every 2-3 seconds.

I’d like to stop the regular, lighter glitches completely, and being able to trigger them just like goWild, only when a certain variable is set to true. does it make sense?
That would be the only way for me to time the glitches precisely, not with a vague random interval.

render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {

  this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
  this.uniforms[ 'seed' ].value = Math.random();//default seeding
  this.uniforms[ 'byp' ].value = 0;

  if ( this.curF % this.randX == 0 || this.goWild == true ) {

  	this.uniforms[ 'amount' ].value = Math.random() / 30;
  	this.uniforms[ 'angle' ].value = MathUtils.randFloat( - Math.PI, Math.PI );
  	this.uniforms[ 'seed_x' ].value = MathUtils.randFloat( - 1, 1 );
  	this.uniforms[ 'seed_y' ].value = MathUtils.randFloat( - 1, 1 );
  	this.uniforms[ 'distortion_x' ].value = MathUtils.randFloat( 0, 1 );
  	this.uniforms[ 'distortion_y' ].value = MathUtils.randFloat( 0, 1 );
  	this.curF = 0;
  	this.generateTrigger();

  	this.curF ++;

  } else if ( this.curF % this.randX < this.randX / 5 ) {

  	this.uniforms[ 'amount' ].value = Math.random() / 90;
  	this.uniforms[ 'angle' ].value = MathUtils.randFloat( - Math.PI, Math.PI );
  	this.uniforms[ 'distortion_x' ].value = MathUtils.randFloat( 0, 1 );
  	this.uniforms[ 'distortion_y' ].value = MathUtils.randFloat( 0, 1 );
  	this.uniforms[ 'seed_x' ].value = MathUtils.randFloat( - 0.3, 0.3 );
  	this.uniforms[ 'seed_y' ].value = MathUtils.randFloat( - 0.3, 0.3 );

  	this.curF ++;

  } else if ( this.goWild == false ) {

  	this.uniforms[ 'byp' ].value = 1;
  
  	this.curF += 0.0000001; ///////////////////////////////////// glitch frequency

  }



  if ( this.renderToScreen ) {

  	renderer.setRenderTarget( null );
  	this.fsQuad.render( renderer );

  } else {

  	renderer.setRenderTarget( writeBuffer );
  	if ( this.clear ) renderer.clear();
  	this.fsQuad.render( renderer );

  }

}