sicambria/skilltree

View on GitHub
new design/draft_offers_modal_design/user/pixi/pixi-extra-filters.js

Summary

Maintainability
F
2 wks
Test Coverage
/*!
 * pixi-extra-filters - v1.1.4
 * Compiled Mon, 12 Jun 2017 11:28:20 UTC
 *
 * pixi-extra-filters is licensed under the MIT License.
 * http://www.opensource.org/licenses/mit-license
 */
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.pixiExtraFilters = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){


    /**
    * @author Julien CLEREL @JuloxRox
    * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/warp/bulgepinch.js by Evan Wallace : http://madebyevan.com/
    */
    
    /**
    * @filter Bulge / Pinch
    * @description Bulges or pinches the image in a circle.
    * @param center The x and y coordinates of the center of the circle of effect.
    * @param radius The radius of the circle of effect.
    * @param strength -1 to 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge)
    *
    * @class BulgePinchFilter
    * @extends AbstractFilter
    * @constructor
    */
    
    function BulgePinchFilter() {
        PIXI.Filter.call(this,
            // vertex shader
           // vertex shader
            "#define GLSLIFY 1\nattribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nvarying vec2 vTextureCoord;\n\nvoid main(void){\n    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n}\n",
                // fragment shader
            "#define GLSLIFY 1\nuniform float radius;\nuniform float strength;\nuniform vec2 center;\nuniform sampler2D uSampler;\nuniform vec4 dimensions;\nvarying vec2 vTextureCoord;\nvoid main()\n{\n    vec2 coord = vTextureCoord * dimensions.xy;\n    coord -= center;\n    float distance = length(coord);\n    if (distance < radius) {\n        float percent = distance / radius;\n        if (strength > 0.0) {\n            coord *= mix(1.0, smoothstep(0.0, radius /     distance, percent), strength * 0.75);\n        } else {\n            coord *= mix(1.0, pow(percent, 1.0 + strength * 0.75) * radius / distance, 1.0 - percent);\n        }\n    }\n    coord += center;\n    gl_FragColor = texture2D(uSampler, coord / dimensions.xy);\n    vec2 clampedCoord = clamp(coord, vec2(0.0), dimensions.xy);\n    if (coord != clampedCoord) {\n    gl_FragColor.a *= max(0.0, 1.0 - length(coord - clampedCoord));\n    }\n}\n"
        );
    }
    
    BulgePinchFilter.prototype = Object.create(PIXI.Filter.prototype);
    BulgePinchFilter.prototype.constructor = BulgePinchFilter;
    module.exports = BulgePinchFilter;
    
    Object.defineProperties(BulgePinchFilter.prototype, {
        /**
         * The radius of the circle of effect.
         *
         * @property radius
         * @type Number
         */
        radius: {
            get: function ()
            {
                return this.uniforms.radius;
            },
            set: function (value)
            {
                this.uniforms.radius = value;
            }
        },
        /**
         * The strength of the effect. -1 to 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge)
         *
         * @property strength
         * @type Number
         */
        strength: {
            get: function ()
            {
                return this.uniforms.strength;
            },
            set: function (value)
            {
                this.uniforms.strength = value;
            }
        },
        /**
         * The x and y coordinates of the center of the circle of effect.
         *
         * @property center
         * @type Point
         */
        center: {
            get: function ()
            {
                return this.uniforms.center;
            },
            set: function (value)
            {
                this.uniforms.center = value;
            }
        }
    });
    
    },{}],2:[function(require,module,exports){
    
    
    /**
     * ColorReplaceFilter, originally by mishaa, updated by timetocode
     * http://www.html5gamedevs.com/topic/10640-outline-a-sprite-change-certain-colors/?p=69966
     *
     * @class
     * @param originalColor {FloatArray32} The color that will be changed, as a 3 component RGB e.g. new Float32Array(1.0, 1.0, 1.0)
     * @param newColor {FloatArray32} The resulting color, as a 3 component RGB e.g. new Float32Array(1.0, 0.5, 1.0)
     * @param epsilon {float} Tolerance/sensitivity of the floating-point comparison between colors (lower = more exact, higher = more inclusive)
     *
     * @example
     *  // replaces true red with true blue
     *  someSprite.shader = new ColorReplaceFilter(
     *   new Float32Array([1, 0, 0]),
     *   new Float32Array([0, 0, 1]),
     *   0.001
     *  );
     *  // replaces the RGB color 220, 220, 220 with the RGB color 225, 200, 215
     *  someOtherSprite.shader = new ColorReplaceFilter(
     *   new Float32Array([220/255.0, 220/255.0, 220/255.0]),
     *   new Float32Array([225/255.0, 200/255.0, 215/255.0]),
     *   0.001
     *  );
     *
     */
    function ColorReplaceFilter(originalColor, newColor, epsilon) {
        PIXI.Filter.call(this,
            // vertex shader
            // vertex shader
            "#define GLSLIFY 1\nattribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nvarying vec2 vTextureCoord;\n\nvoid main(void){\n    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n}\n",
            // fragment shader
            "#define GLSLIFY 1\nvarying vec2 vTextureCoord;\nuniform sampler2D texture;\nuniform vec3 originalColor;\nuniform vec3 newColor;\nuniform float epsilon;\nvoid main(void) {\n    vec4 currentColor = texture2D(texture, vTextureCoord);\n    vec3 colorDiff = originalColor - (currentColor.rgb / max(currentColor.a, 0.0000000001));\n    float colorDistance = length(colorDiff);\n    float doReplace = step(colorDistance, epsilon);\n    gl_FragColor = vec4(mix(currentColor.rgb, (newColor + colorDiff) * currentColor.a, doReplace), currentColor.a);\n}\n"
        );
    
        this.uniforms.originalColor = originalColor;
        this.uniforms.newColor = newColor;
        this.uniforms.epsilon = epsilon;
    }
    
    ColorReplaceFilter.prototype = Object.create(PIXI.Filter.prototype);
    ColorReplaceFilter.prototype.constructor = ColorReplaceFilter;
    module.exports = ColorReplaceFilter;
    
    Object.defineProperty(ColorReplaceFilter.prototype, 'originalColor', {
      set: function (value) {
        var r = ((value & 0xFF0000) >> 16) / 255,
            g = ((value & 0x00FF00) >> 8) / 255,
            b = (value & 0x0000FF) / 255;
        this.uniforms.originalColor = { x: r, y: g, z: b };
      }
    });
    
    Object.defineProperty(ColorReplaceFilter.prototype, 'newColor', {
      set: function (value) {
        var r = ((value & 0xFF0000) >> 16) / 255,
            g = ((value & 0x00FF00) >> 8) / 255,
            b = (value & 0x0000FF) / 255;
        this.uniforms.newColor = { x: r, y: g, z: b };
      }
    });
    
    Object.defineProperty(ColorReplaceFilter.prototype, 'epsilon', {
      set: function (value) {
        this.uniforms.epsilon = value;
      }
    });
    
    },{}],3:[function(require,module,exports){
    
    
    /**
     * GlowFilter, originally by mishaa
     * http://www.html5gamedevs.com/topic/12756-glow-filter/?hl=mishaa#entry73578
     * http://codepen.io/mishaa/pen/raKzrm
     *
     * @class
     * @param distance {number} The distance of the glow. Make it 2 times more for resolution=2. It cant be changed after filter creation
     * @param outerStrength {number} The strength of the glow outward from the edge of the sprite.
     * @param innerStrength {number} The strength of the glow inward from the edge of the sprite.
     * @param color {number} The color of the glow.
     * @param quality {number} A number between 0 and 1 that describes the quality of the glow.
     *
     * @example
     *  someSprite.filters = [
     *      new GlowFilter(15, 2, 1, 0xFF0000, 0.5)
     *  ];
     */
    function GlowFilter(distance, outerStrength, innerStrength, color, quality) {
        PIXI.Filter.call(this,
            // vertex shader
            // vertex shader
            "#define GLSLIFY 1\nattribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nvarying vec2 vTextureCoord;\n\nvoid main(void){\n    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n}\n",
            // fragment shader
            "#define GLSLIFY 1\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\n\nuniform float distance;\nuniform float outerStrength;\nuniform float innerStrength;\nuniform vec4 glowColor;\nuniform vec4 filterArea;\nuniform vec4 filterClamp;\nvec2 px = vec2(1.0 / filterArea.x, 1.0 / filterArea.y);\n\nvoid main(void) {\n    const float PI = 3.14159265358979323846264;\n    vec4 ownColor = texture2D(uSampler, vTextureCoord);\n    vec4 curColor;\n    float totalAlpha = 0.0;\n    float maxTotalAlpha = 0.0;\n    float cosAngle;\n    float sinAngle;\n    vec2 displaced;\n    for (float angle = 0.0; angle <= PI * 2.0; angle += %QUALITY_DIST%) {\n       cosAngle = cos(angle);\n       sinAngle = sin(angle);\n       for (float curDistance = 1.0; curDistance <= %DIST%; curDistance++) {\n           displaced.x = vTextureCoord.x + cosAngle * curDistance * px.x;\n           displaced.y = vTextureCoord.y + sinAngle * curDistance * px.y;\n           curColor = texture2D(uSampler, clamp(displaced, filterClamp.xy, filterClamp.zw));\n           totalAlpha += (distance - curDistance) * curColor.a;\n           maxTotalAlpha += (distance - curDistance);\n       }\n    }\n    maxTotalAlpha = max(maxTotalAlpha, 0.0001);\n\n    ownColor.a = max(ownColor.a, 0.0001);\n    ownColor.rgb = ownColor.rgb / ownColor.a;\n    float outerGlowAlpha = (totalAlpha / maxTotalAlpha)  * outerStrength * (1. - ownColor.a);\n    float innerGlowAlpha = ((maxTotalAlpha - totalAlpha) / maxTotalAlpha) * innerStrength * ownColor.a;\n    float resultAlpha = (ownColor.a + outerGlowAlpha);\n    gl_FragColor = vec4(mix(mix(ownColor.rgb, glowColor.rgb, innerGlowAlpha / ownColor.a), glowColor.rgb, outerGlowAlpha / resultAlpha) * resultAlpha, resultAlpha);\n}\n"
                .replace(/%QUALITY_DIST%/gi, '' + (1 / quality / distance).toFixed(7))
                .replace(/%DIST%/gi, '' + distance.toFixed(7))
        );
    
        this.uniforms.distance = distance;
        this.uniforms.glowColor = new Float32Array([0, 0, 0, 1]);
    
        quality = Math.pow(quality, 1/3);
        this.quality = quality;
    
        this.uniforms.distance.value *= quality;
    
        this.color = color;
        this.outerStrength = outerStrength;
        this.innerStrength = innerStrength;
    }
    
    GlowFilter.prototype = Object.create(PIXI.Filter.prototype);
    GlowFilter.prototype.constructor = GlowFilter;
    module.exports = GlowFilter;
    
    Object.defineProperties(GlowFilter.prototype, {
        color: {
            get: function () {
                return PIXI.utils.rgb2hex(this.uniforms.glowColor);
            },
            set: function(value) {
                PIXI.utils.hex2rgb(value, this.uniforms.glowColor);
            }
        },
    
        outerStrength: {
            get: function () {
                return this.uniforms.outerStrength;
            },
            set: function (value) {
                this.uniforms.outerStrength = value;
            }
        }
    });
    
    },{}],4:[function(require,module,exports){
    
    
    /**
     * OutlineFilter, originally by mishaa
     * http://www.html5gamedevs.com/topic/10640-outline-a-sprite-change-certain-colors/?p=69966
     * http://codepen.io/mishaa/pen/emGNRB
     *
     * @class
     * @param thickness {number} The tickness of the outline. Make it 2 times more for resolution 2
     * @param color {number} The color of the glow.
     *
     * @example
     *  someSprite.shader = new OutlineFilter(9, 0xFF0000);
     */
    function OutlineFilter(thickness, color) {
        thickness = thickness || 1;
        PIXI.Filter.call(this,
            // vertex shader
            // vertex shader
            "#define GLSLIFY 1\nattribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nvarying vec2 vTextureCoord;\n\nvoid main(void){\n    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n}\n",
            // fragment shader
            "#define GLSLIFY 1\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\n\nuniform float thickness;\nuniform vec4 outlineColor;\nuniform vec4 filterArea;\nuniform vec4 filterClamp;\nvec2 px = vec2(1.0 / filterArea.x, 1.0 / filterArea.y);\n\nvoid main(void) {\n    const float PI = 3.14159265358979323846264;\n    vec4 ownColor = texture2D(uSampler, vTextureCoord);\n    vec4 curColor;\n    float maxAlpha = 0.;\n    vec2 displaced;\n    for (float angle = 0.; angle < PI * 2.; angle += %THICKNESS% ) {\n        displaced.x = vTextureCoord.x + thickness * px.x * cos(angle);\n        displaced.y = vTextureCoord.y + thickness * px.y * sin(angle);\n        curColor = texture2D(uSampler, clamp(displaced, filterClamp.xy, filterClamp.zw));\n        maxAlpha = max(maxAlpha, curColor.a);\n    }\n    float resultAlpha = max(maxAlpha, ownColor.a);\n    gl_FragColor = vec4((ownColor.rgb + outlineColor.rgb * (1. - ownColor.a)) * resultAlpha, resultAlpha);\n}\n".replace(/%THICKNESS%/gi, (1.0 / thickness).toFixed(7))
        );
    
        this.uniforms.thickness = thickness;
        this.uniforms.outlineColor = new Float32Array([0, 0, 0, 1]);
        if (color) {
            this.color = color;
        }
    }
    
    OutlineFilter.prototype = Object.create(PIXI.Filter.prototype);
    OutlineFilter.prototype.constructor = OutlineFilter;
    module.exports = OutlineFilter;
    
    Object.defineProperties(OutlineFilter.prototype, {
        color: {
            get: function () {
                return PIXI.utils.rgb2hex(this.uniforms.outlineColor);
            },
            set: function (value) {
                PIXI.utils.hex2rgb(value, this.uniforms.outlineColor);
            }
        }
    });
    
    },{}],5:[function(require,module,exports){
    
    
    /**
    * SimpleLightmap, originally by Oza94
    * http://www.html5gamedevs.com/topic/20027-pixijs-simple-lightmapping/
    * http://codepen.io/Oza94/pen/EPoRxj
    *
    * @class
    * @param lightmapTexture {PIXI.Texture} a texture where your lightmap is rendered
    * @param ambientColor {Array} An RGBA array of the ambient color
    * @param [resolution] {Array} An array for X/Y resolution
    *
    * @example
    *  var lightmapTex = new PIXI.RenderTexture(renderer, 400, 300);
    *
    *  // ... render lightmap on lightmapTex
    *
    *  stageContainer.filters = [
    *    new SimpleLightmapFilter(lightmapTex, [0.3, 0.3, 0.7, 0.5], [1.0, 1.0])
    *  ];
    */
    function SimpleLightmapFilter(lightmapTexture, ambientColor, resolution) {
        PIXI.Filter.call(this,
            // vertex shader
            // vertex shader
            "precision mediump float;\n#define GLSLIFY 1\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\n\nuniform float thickness;\nuniform vec4 outlineColor;\nuniform float pixelWidth;\nuniform float pixelHeight;\nvec2 px = vec2(pixelWidth, pixelHeight);\n\nvoid main(void) {\n    const float PI = 3.14159265358979323846264;\n    vec4 ownColor = texture2D(uSampler, vTextureCoord);\n    vec4 curColor;\n    float maxAlpha = 0.;\n    for (float angle = 0.; angle < PI * 2.; angle +=  + (1 / thickness).toFixed(7) + ) {\n        curColor = texture2D(uSampler, vec2(vTextureCoord.x + thickness * px.x * cos(angle), vTextureCoord.y + thickness * px.y * sin(angle)));\n        maxAlpha = max(maxAlpha, curColor.a);\n    }\n    float resultAlpha = max(maxAlpha, ownColor.a);\n    gl_FragColor = vec4((ownColor.rgb + outlineColor.rgb * (1. - ownColor.a)) * resultAlpha, resultAlpha);\n}\n",
            // fragment shader
            "#define GLSLIFY 1\nvarying vec4 vColor;\nvarying vec2 vTextureCoord;\nuniform sampler2D u_texture; //diffuse map\nuniform sampler2D u_lightmap;   //light map\nuniform vec2 resolution; //resolution of screen\nuniform vec4 ambientColor; //ambient RGB, alpha channel is intensity\nvoid main() {\n    vec4 diffuseColor = texture2D(u_texture, vTextureCoord);\n    vec2 lighCoord = (gl_FragCoord.xy / resolution.xy);\n    vec4 light = texture2D(u_lightmap, vTextureCoord);\n    vec3 ambient = ambientColor.rgb * ambientColor.a;\n    vec3 intensity = ambient + light.rgb;\n    vec3 finalColor = diffuseColor.rgb * intensity;\n    gl_FragColor = vColor * vec4(finalColor, diffuseColor.a);\n}\n"
        );
        this.uniforms.u_lightmap = lightmapTexture;
        this.uniforms.resolution = new Float32Array(resolution || [1.0, 1.0]);
        this.uniforms.ambientColor =  new Float32Array(ambientColor);
    }
    
    SimpleLightmapFilter.prototype = Object.create(PIXI.Filter.prototype);
    SimpleLightmapFilter.prototype.constructor = SimpleLightmapFilter;
    
    Object.defineProperties(SimpleLightmapFilter.prototype, {
        texture: {
            get: function () {
                return this.uniforms.u_lightmap;
            },
            set: function (value) {
                this.uniforms.u_lightmap = value;
            }
        },
        color: {
            get: function () {
                return this.uniforms.ambientColor;
            },
            set: function (value) {
                this.uniforms.ambientColor = new Float32Array(value);
            }
        },
        resolution: {
            get: function () {
                return this.uniforms.resolution;
            },
            set: function (value) {
                this.uniforms.resolution = new Float32Array(value);
            }
        }
    });
    
    module.exports = SimpleLightmapFilter;
    
    },{}],6:[function(require,module,exports){
    module.exports = {
        GlowFilter: require('./filters/glow/GlowFilter'),
        OutlineFilter: require('./filters/outline/OutlineFilter'),
        BulgePinchFilter: require('./filters/bulgepinch/BulgePinchFilter'),
        ColorReplaceFilter: require('./filters/colorreplace/ColorReplaceFilter'),
        SimpleLightmapFilter:
            require('./filters/simplelightmap/SimpleLightmapFilter')
    };
    
    for (var filter in module.exports) {
        PIXI.filters[filter] = module.exports[filter];
    }
    
    },{"./filters/bulgepinch/BulgePinchFilter":1,"./filters/colorreplace/ColorReplaceFilter":2,"./filters/glow/GlowFilter":3,"./filters/outline/OutlineFilter":4,"./filters/simplelightmap/SimpleLightmapFilter":5}]},{},[6])(6)
    });
    
    
    //# sourceMappingURL=pixi-extra-filters.js.map