posteffect-outline.js

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

    /**
     * @class
     * @name pc.OutlineEffect
     * @classdesc Applies an outline effect on input render target
     * @description Creates new instance of the post effect.
     * @augments pc.PostEffect
     * @param {pc.GraphicsDevice} graphicsDevice - The graphics device of the application.
     * @property {pc.Texture} texture The outline texture to use.
     * @property {pc.Color} color The outline color.
     */

    var OutlineEffect = function (graphicsDevice, thickness) {
        pc.PostEffect.call(this, graphicsDevice);

        this.copyShader = new pc.Shader(graphicsDevice, {
            attributes: {
                aPosition: pc.SEMANTIC_POSITION
            },
            vshader: [
                "attribute vec2 aPosition;",
                "",
                "varying vec2 vUv0;",
                "",
                "void main(void)",
                "{",
                "    gl_Position = vec4(aPosition, 0.0, 1.0);",
                "    vUv0 = (aPosition.xy + 1.0) * 0.5;",
                "}"
            ].join("\n"),
            fshader: [
                "precision " + graphicsDevice.precision + " float;",
                "varying vec2 vUv0;",
                "uniform sampler2D uColorBuffer;",
                "",
                "void main(void) {",
                "   gl_FragColor = texture2D(uColorBuffer, vUv0);",
                "}"
            ].join("\n")
        });

        this.shader = new pc.Shader(graphicsDevice, {
            attributes: {
                aPosition: pc.SEMANTIC_POSITION
            },
            vshader: [
                "attribute vec2 aPosition;",
                "",
                "varying vec2 vUv0;",
                "",
                "void main(void)",
                "{",
                "    gl_Position = vec4(aPosition, 0.0, 1.0);",
                "    vUv0 = (aPosition.xy + 1.0) * 0.5;",
                "}"
            ].join("\n"),
            fshader: [
                "precision " + graphicsDevice.precision + " float;",
                "",
                "uniform float uWidth;",
                "uniform float uHeight;",
                "uniform vec4 uOutlineCol;",
                "uniform sampler2D uColorBuffer;",
                "uniform sampler2D uOutlineTex;",
                "uniform sampler2D uOutlineTex2;",
                "uniform float uOutlineStrength;",
                "",
                "varying vec2 vUv0;",
                "",
                "void main(void)",
                "{",
                "    vec4 texel1 = texture2D(uColorBuffer, vUv0);",
                "    float sample0 = texture2D(uOutlineTex, vUv0).a;",
                "    float sample1 = texture2D(uOutlineTex2, vUv0).a;",
                "    float outline = step(sample1, 0.999) * sample0;",
                "    outline = clamp(outline * uOutlineStrength, 0.0, 1.0);",
                "    gl_FragColor = mix(texel1, uOutlineCol, outline * uOutlineCol.a);",
                "}"
            ].join("\n")
        });

        var attributes = {
            aPosition: pc.SEMANTIC_POSITION
        };
        var passThroughVert = [
            "attribute vec2 aPosition;",
            "",
            "varying vec2 vUv0;",
            "",
            "void main(void)",
            "{",
            "    gl_Position = vec4(aPosition, 0.0, 1.0);",
            "    vUv0 = (aPosition + 1.0) * 0.5;",
            "}"
        ].join("\n");
        var blurXFrag = [
            "precision " + graphicsDevice.precision + " float;",
            "varying vec2 vUv0;",
            "uniform float uBlur;",
            "uniform sampler2D uColorBuffer;",
            "",
            "void main(void) {",
            "   vec4 sum = vec4(0.0);",
            "",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x - 4.0 * uBlur, vUv0.y)) * 0.05;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x - 3.0 * uBlur, vUv0.y)) * 0.09;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x - 2.0 * uBlur, vUv0.y)) * 0.12;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x - uBlur, vUv0.y)) * 0.15;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y)) * 0.16;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x + uBlur, vUv0.y)) * 0.15;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x + 2.0 * uBlur, vUv0.y)) * 0.12;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x + 3.0 * uBlur, vUv0.y)) * 0.09;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x + 4.0 * uBlur, vUv0.y)) * 0.05;",
            "",
            "   gl_FragColor = vec4(pow(sum.a, 0.90));",
            //"   gl_FragColor = sum;",
            "}"
        ].join("\n");
        var blurYFrag = [
            "precision " + graphicsDevice.precision + " float;",
            "varying vec2 vUv0;",
            "uniform float uBlur;",
            "uniform sampler2D uColorBuffer;",
            "",
            "void main(void) {",
            "   vec4 sum = vec4(0.0);",
            "",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y - 4.0 * uBlur)) * 0.05;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y - 3.0 * uBlur)) * 0.09;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y - 2.0 * uBlur)) * 0.12;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y - uBlur)) * 0.15;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y)) * 0.16;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y + uBlur)) * 0.15;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y + 2.0 * uBlur)) * 0.12;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y + 3.0 * uBlur)) * 0.09;",
            "   sum += texture2D(uColorBuffer, vec2(vUv0.x, vUv0.y + 4.0 * uBlur)) * 0.05;",
            "",
            "   gl_FragColor = vec4(pow(sum.a, 0.90));",
            //"   gl_FragColor = sum;",
            "}"
        ].join("\n");
        this.blurXShader = new pc.Shader(graphicsDevice, {
            attributes: attributes,
            vshader: passThroughVert,
            fshader: blurXFrag
        });
        this.blurYShader = new pc.Shader(graphicsDevice, {
            attributes: attributes,
            vshader: passThroughVert,
            fshader: blurYFrag
        });

        // Render targets
        this.width = graphicsDevice.width;
        this.height = graphicsDevice.height;

        this.blurYAmount = 1/512;
        this.blurXAmount = 1/512 * (this.height / this.width);

        this.targets = [];
        for (var i = 0; i < 3; i++) {
            var colorBuffer = new pc.Texture(graphicsDevice, {
                format: pc.PIXELFORMAT_R8_G8_B8_A8,
                width: this.width / 2,
                height: this.height / 2
            });
            colorBuffer.minFilter = pc.FILTER_LINEAR;
            colorBuffer.magFilter = pc.FILTER_LINEAR;
            colorBuffer.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
            colorBuffer.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
            var target = new pc.RenderTarget(graphicsDevice, colorBuffer, { depth: false });

            this.targets.push(target);
        }

        // Uniforms
        this.color = new pc.Color(1, 1, 1, 1);
        this.texture = new pc.Texture(graphicsDevice);
        this.texture.name = 'pe-outline';
        this.blur = 2.0;
        this.power = 1.0;
    };

    OutlineEffect.prototype = Object.create(pc.PostEffect.prototype);
    OutlineEffect.prototype.constructor = OutlineEffect;

    OutlineEffect.prototype.set_power = function(value) {
        this.power = value;
    };

    OutlineEffect.prototype.set_blur = function(value) {
        this.blur = value;
    };

    OutlineEffect.prototype.set_color = function(value) {
        this.color = value;
    };

    Object.assign(OutlineEffect.prototype, {
        render: function (inputTarget, outputTarget, rect) {
            var device = this.device;
            var scope = device.scope;

            scope.resolve("uColorBuffer").setValue(this.texture);
            pc.drawFullscreenQuad(device, this.targets[0], this.vertexBuffer, this.blurXShader);

            scope.resolve("uBlur").setValue(this.blurXAmount * this.blur);
            scope.resolve("uColorBuffer").setValue(this.targets[0]);
            pc.drawFullscreenQuad(device, this.targets[1], this.vertexBuffer, this.blurXShader);

            scope.resolve("uBlur").setValue(this.blurYAmount * this.blur);
            scope.resolve("uColorBuffer").setValue(this.targets[1].colorBuffer);
            pc.drawFullscreenQuad(device, this.targets[2], this.vertexBuffer, this.blurYShader);

            scope.resolve("uWidth").setValue(inputTarget.width);
            scope.resolve("uHeight").setValue(inputTarget.height);
            scope.resolve("uOutlineCol").setValue([this.color.r, this.color.g, this.color.b, this.color.a]);
            scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);
            scope.resolve("uOutlineTex").setValue(this.targets[2].colorBuffer);
            scope.resolve("uOutlineTex2").setValue(this.texture); //
            scope.resolve("uOutlineStrength").setValue(this.power);
            pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
        }
    });

    return {
        OutlineEffect: OutlineEffect
    };
}());

// ----------------- SCRIPT DEFINITION ------------------ //
var Outline = pc.createScript('outline');

Outline.attributes.add('color', { type: 'rgb', default: [0.5, 0.5, 0.5, 1], title: 'Color' });
Outline.attributes.add('texture', { type: 'asset', assetType: 'texture', title: 'Texture' });
Outline.attributes.add('power', { type:'number'});
Outline.attributes.add('blur', { type:'number'});

Outline.prototype.initialize = function () {
    this.effect = new pc.OutlineEffect(this.app.graphicsDevice);
    this.effect.color = this.color;
    this.effect.texture = this.texture.resource;

    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);
    });

    this.on('attr:color', function (value) {
        this.effect.set_color(value);
    }, this);

    this.on('attr:texture', function (value) {
        this.effect.texture = value ? value.resource : null;
    }, this);

    this.on('attr:power', function(value) {
        this.effect.set_power(value);
    }, this);

    this.on('attr:blur', function(value) {
        this.effect.set_blur(value);
    }, this);

};