Where can I find a Bokeh post effect?

artem_parfenov · December 10, 2020, 12:53pm

We need to make a blur effect. The farther from the camera, the more blurry. An example painted in Photoshop

Leonidas · December 10, 2020, 12:56pm

You can use the following post process effect to achieve that:

playcanvas/engine/blob/master/examples/assets/scripts/posteffects/posteffect-bokeh.js

// --------------- POST EFFECT DEFINITION --------------- //
Object.assign(pc, function () {

    /**
     * @class
     * @name pc.BokehEffect
     * @classdesc Implements the BokehEffect post processing effect.
     * @description Creates new instance of the post effect.
     * @augments pc.PostEffect
     * @param {pc.GraphicsDevice} graphicsDevice - The graphics device of the application.
     * @property {number} maxBlur The maximum amount of blurring. Ranges from 0 to 1.
     * @property {number} aperture Bigger values create a shallower depth of field.
     * @property {number} focus Controls the focus of the effect.
     * @property {number} aspect Controls the blurring effect.
     */
    var BokehEffect = function (graphicsDevice) {
        pc.PostEffect.call(this, graphicsDevice);

        this.needsDepthBuffer = true;

This file has been truncated. show original

artem_parfenov · December 10, 2020, 2:47pm

thanks! for quick answer