Jump to content

Convert filter from v2 to v3


Alex_Matveev
 Share

Recommended Posts

I'm keeping these converted filters here: https://github.com/pixijs/pixi-extra-filters

Boom:

/** * GlowFilter, originally by mishaa *  * http://codepen.io/mishaa/pen/raKzrm */function GlowFilter(textureWidth, textureHeight, distance, outerStrength, innerStrength, color, quality) {    PIXI.filters.AbstractFilter.call(this,        // vertex shader        null,        // fragment shader        [            'precision mediump float;',            'varying vec2 vTextureCoord;',            'varying vec4 vColor;',            'uniform sampler2D uSampler;',            'uniform float distance;',            'uniform float outerStrength;',            'uniform float innerStrength;',            'uniform vec4 glowColor;',            'uniform float pixelWidth;',            'uniform float pixelHeight;',            'vec2 px = vec2(pixelWidth, pixelHeight);',            'void main(void) {',            '    const float PI = 3.14159265358979323846264;',            '    vec4 ownColor = texture2D(uSampler, vTextureCoord);',            '    vec4 curColor;',            '    float totalAlpha = 0.0;',            '    float maxTotalAlpha = 0.0;',            '    float cosAngle;',            '    float sinAngle;',            '    for (float angle = 0.0; angle <= PI * 2.0; angle += ' + (1 / quality / distance).toFixed(7) + ') {',            '       cosAngle = cos(angle);',            '       sinAngle = sin(angle);',            '       for (float curDistance = 1.0; curDistance <= ' + distance.toFixed(7) + '; curDistance++) {',            '           curColor = texture2D(uSampler, vec2(vTextureCoord.x + cosAngle * curDistance * px.x, vTextureCoord.y + sinAngle * curDistance * px.y));',            '           totalAlpha += (distance - curDistance) * curColor.a;',            '           maxTotalAlpha += (distance - curDistance);',            '       }',            '    }',            '    maxTotalAlpha = max(maxTotalAlpha, 0.0001);',                '    ownColor.a = max(ownColor.a, 0.0001);',            '    ownColor.rgb = ownColor.rgb / ownColor.a;',            '    float outerGlowAlpha = (totalAlpha / maxTotalAlpha)  * outerStrength * (1. - ownColor.a);',            '    float innerGlowAlpha = ((maxTotalAlpha - totalAlpha) / maxTotalAlpha) * innerStrength * ownColor.a;',            '    float resultAlpha = (ownColor.a + outerGlowAlpha);',                        '    gl_FragColor = vec4(mix(mix(ownColor.rgb, glowColor.rgb, innerGlowAlpha / ownColor.a), glowColor.rgb, outerGlowAlpha / resultAlpha) * resultAlpha, resultAlpha);',            '}'        ].join('\n'),        // custom uniforms        {            distance: { type: '1f', value: distance },            outerStrength: { type: '1f', value: 0 },            innerStrength: { type: '1f', value: 0 },            glowColor: { type: '4f', value: new Float32Array([0, 0, 0, 1]) },            pixelWidth: { type: '1f', value: 0 },            pixelHeight: { type: '1f', value: 0 }        }    );    quality = Math.pow(quality, 1/3);    this.quality = quality;    this.uniforms.distance.value *= quality;    textureWidth *= quality;    textureHeight *= quality;    this.color = color;    this.outerStrength = outerStrength;    this.innerStrength = innerStrength;    this.textureWidth = textureWidth;    this.textureHeight = textureHeight;};GlowFilter.prototype = Object.create(PIXI.filters.AbstractFilter.prototype);GlowFilter.prototype.constructor = GlowFilter;module.exports = GlowFilter;Object.defineProperties(GlowFilter.prototype, {    color: {        get: function () {            return PIXI.utils.rgb2hex(this.uniforms.glowColor.value);        },        set: function(value) {            PIXI.utils.hex2rgb(value, this.uniforms.glowColor.value);        }    },    outerStrength: {        get: function () {            return this.uniforms.outerStrength.value;        },        set: function (value) {            this.uniforms.outerStrength.value = value;        }    },    innerStrength: {        get: function () {            return this.uniforms.innerStrength.value;        },        set: function (value) {            this.uniforms.innerStrength.value = value;        }    },    textureWidth: {        get: function () {            return 1 / this.uniforms.pixelWidth.value;        },        set: function(value) {            this.uniforms.pixelWidth.value = 1 / value;        }    },    textureHeight: {        get: function () {            return 1 / this.uniforms.pixelHeight.value;        },        set: function(value) {            this.uniforms.pixelHeight.value = 1 / value;        }    }});
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...