[SOLVED] Implementing a Motion Blur post effect

Help & Support
1

Hello,

I am trying to implement a simple motion blur post effect, by blending between the three latest frames. What is the proposed way to keep the previously rendered frames in an array as textures to be passed in the fragment shader on every loop?

Maybe pushing the inputTarget.colorbuffer? We don’t want to kill performance.

Best regards,
Leonidas

2

Does this help:

https://playcanvas.com/project/362233/overview/tutorial-motion-blur

3

That’s great Will, many thanks, it works flawlessly.

4

@will would it be possible to snag an updated version of this? am still a bit flubby with javascript and not sure where i’ve messed up

5

Sure @tbriley, my pleasure. That project is now updated to use the current scripting system. Enjoy! :slight_smile:

6

thanks @will, this works great! it seems my mistake was that i was only adding the effect on enable:

MotionBlur.prototype.initialize = function () {
    
    this.effect = new pc.MotionBlur(this.app.graphicsDevice);
    this.effect.amount = this.amount;

    this.entity.camera.renderTarget = this.effect.prevTarget;
    
    this.on("enable", function () {
        this.entity.camera.postEffects.addEffect(this.effect);
    });

    this.on("disable", function () {
        this.entity.camera.postEffects.removeEffect(this.effect);
    });


    this.on("attr:amount", function (value, prev) {
        this.effect.amount = value;
    });
};

does the “onenable” event not get fired after initialize? the expected behavior (from my point of view) would be init to be guaranteed to fire before anything else here, and enable to be fired based on the state of the component on the first frame. or is the approach more that enable and disable are fired ONLY when a script is explicitly enabled / disabled (ie, not on object creation)?

cheers!

7

Summoning @vaios since he knows the rationale behind events in scripts.

8

The ‘enable’ event is fired when the script component gets enabled (either by enabling a disabled script component on an already enabled entity or by enabling an entity with an already enabled script component). The initialize method does not fire the ‘enabled’ event. If the Entity and the Script component are both enabled when the application starts the ‘enable’ event does not get fired. So you might wanna do something like:

MotionBlur.prototype.initialize = function () {
 ....
 this.on('enable', this.onEnable, this);
....

 this.onEnable(); // call this manually in initialize
}

MotionBlur.prototype.onEnable = function () {...}
1 Like