How to enable/disable post effect

Help & Support
1

This is my code:

// REMEMBER SCRIPT IS CALLED SEPIA
// --------------- POST EFFECT DEFINITION --------------- //
/**
 * @class
 * @name SepiaEffect
 * @classdesc Implements the SepiaEffect color filter.
 * @description Creates new instance of the post effect.
 * @augments PostEffect
 * @param {GraphicsDevice} graphicsDevice - The graphics device of the application.
 * @property {number} amount Controls the intensity of the effect. Ranges from 0 to 1.
 */
function SepiaEffect(graphicsDevice) {
    pc.PostEffect.call(this, graphicsDevice);
    var fshader = [
        "uniform float uAmount;",
        "uniform sampler2D uColorBuffer;",
        "",
        "varying vec2 vUv0;",
        "",
        "void main() {",
        "    vec4 color = texture2D(uColorBuffer, vUv0);",
        "    vec3 c = color.rgb;",
        "",
        "    color.r = dot(c, vec3(0.0 - 0.0 * uAmount, 0.0 * uAmount, 0.0 * uAmount));",
        "    color.g = dot(c, vec3(1.0 * uAmount, 1.0 - 0.0 * uAmount, 0.0 * uAmount));",
        "    color.b = dot(c, vec3(0.0 * uAmount, 0.0 * uAmount, 0.0 - 0.0 * uAmount));",
        "",
        "    gl_FragColor = vec4(min(vec3(1.0), color.rgb), color.a);",
        "}"
    ].join("\n");
    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'SepiaShader', {
        aPosition: pc.SEMANTIC_POSITION
    });
    this.amount = 1;
}
SepiaEffect.prototype = Object.create(pc.PostEffect.prototype);
SepiaEffect.prototype.constructor = SepiaEffect;
Object.assign(SepiaEffect.prototype, {
    render: function (inputTarget, outputTarget, rect) {
        var device = this.device;
        var scope = device.scope;
        scope.resolve("uAmount").setValue(this.amount);
        scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);
        this.drawQuad(outputTarget, this.shader, rect);
    }
});
var Sepia = pc.createScript('sepia');
Sepia.attributes.add('amount', {
    type: 'number',
    default: 1,
    min: 0,
    max: 1,
    title: 'Amount'
});
Sepia.prototype.update = function(dt) {
    this.effect = new SepiaEffect(this.app.graphicsDevice);
    this.effect.amount = this.amount;
    this.on('attr:amount', function (value) {
        this.effect.amount = value;
    }, this);
    var queue = this.entity.camera.postEffects;
    queue.addEffect(this.effect);
    this.on('state', function (enabled) {
        if (enabled) {
            queue.addEffect(this.effect);
        } else {
            queue.removeEffect(this.effect);
        }
    });
    this.on('destroy', function () {
        queue.removeEffect(this.effect);
    });
};

It is quite janky because it is just a copy of the sepia effect. How could I enable and disable the effect on runtime?

2

Not sure if you have already fixed this or not, but this is how I think you can solve your problem:

  1. Do not use update for the purpose
  2. Instead, use initialize in the following way:
Sepia.prototype.initialize = function() {
    this.effect = new SepiaEffect(this.app.graphicsDevice);
    this.effect.amount = this.amount;

    var queue = this.entity.camera.postEffects;

    // Listen for changes to the amount attribute and update effect
    this.on('attr:amount', function (value) {
        this.effect.amount = value;
    }, this);

    // Toggle effect based on the 'state' event
    this.on('state', function (enabled) {
        if (enabled) {
            queue.addEffect(this.effect);
        } else {
            queue.removeEffect(this.effect);
        }
    });

    // Remove effect when the script is destroyed
    this.on('destroy', function () {
        queue.removeEffect(this.effect);
    });
};