playcanvas/scripts/posteffects/posteffect-luminosity.js

Open-source WebGL/WebGPU 3D engine for the web

// --------------- POST EFFECT DEFINITION --------------- //
/**
 * @class
 * @name LuminosityEffect
 * @classdesc Outputs the luminosity of the input render target.
 * @description Creates new instance of the post effect.
 * @augments PostEffect
 * @param {GraphicsDevice} graphicsDevice - The graphics device of the application.
 */
class LuminosityEffect extends pc.PostEffect {
    constructor(graphicsDevice) {
        super(graphicsDevice);

        const fshader = /* glsl */`
            uniform sampler2D uColorBuffer;

            varying vec2 vUv0;

            void main() {
                vec4 texel = texture2D(uColorBuffer, vUv0);
                vec3 luma = vec3(0.299, 0.587, 0.114);
                float v = dot(texel.xyz, luma);
                gl_FragColor = vec4(v, v, v, texel.w);
            }
        `;

        this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
            uniqueName: 'LuminosityShader',
            attributes: { aPosition: pc.SEMANTIC_POSITION },
            vertexGLSL: pc.PostEffect.quadVertexShader,
            fragmentGLSL: fshader
        });
    }

    render(inputTarget, outputTarget, rect) {
        const device = this.device;
        const scope = device.scope;

        scope.resolve('uColorBuffer').setValue(inputTarget.colorBuffer);
        this.drawQuad(outputTarget, this.shader, rect);
    }
}

// ----------------- SCRIPT DEFINITION ------------------ //
var Luminosity = pc.createScript('luminosity');

// initialize code called once per entity
Luminosity.prototype.initialize = function () {
    this.effect = new LuminosityEffect(this.app.graphicsDevice);

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