Add ColorOverlayFilter

README.md

@@ -19,6 +19,7 @@ All filters work with PixiJS v5.
 | **BloomFilter**<br>_@pixi/filter-bloom_ | ![bloom](https://pixijs.github.io/pixi-filters/tools/screenshots/dist/bloom.png?v=2) |
 | **BulgePinchFilter**<br>_@pixi/filter-bulge-pinch_ | ![bulge-pinch](https://pixijs.github.io/pixi-filters/tools/screenshots/dist/bulge-pinch.gif?v=2) |
 | **ColorMapFilter**<br>_@pixi/filter-color-map_ | ![color-map](https://pixijs.github.io/pixi-filters/tools/screenshots/dist/color-map.png?v=2) |
+| **ColorOverlayFilter**<br>_@pixi/filter-color-overlay_ | ![color-overlay](https://pixijs.github.io/pixi-filters/tools/screenshots/dist/color-overlay.png?v=2) |
 | **ColorReplaceFilter**<br>_@pixi/filter-color-replace_ | ![color-replace](https://pixijs.github.io/pixi-filters/tools/screenshots/dist/color-replace.png?v=2) |
 | **ConvolutionFilter**<br>_@pixi/filter-convolution_ | ![convolution](https://pixijs.github.io/pixi-filters/tools/screenshots/dist/convolution.png?v=2) |
 | **CrossHatchFilter**<br>_@pixi/filter-cross-hatch_ | ![cross-hatch](https://pixijs.github.io/pixi-filters/tools/screenshots/dist/cross-hatch.png?v=2) |

bundle/README.md

@@ -13,6 +13,7 @@ Filters include:
 * **BloomFilter** _@pixi/filter-bloom_
 * **BulgePinchFilter** _@pixi/filter-bulge-pinch_
 * **ColorMapFilter** _@pixi/filter-color-map_
+* **ColorOverlayFilter** _@pixi/filter-color-overlay_
 * **ColorReplaceFilter** _@pixi/filter-color-replace_
 * **ConvolutionFilter** _@pixi/filter-convolution_
 * **CrossHatchFilter** _@pixi/filter-cross-hatch_

bundle/package.json

@@ -33,6 +33,7 @@
     "@pixi/filter-bloom": "^3.0.3",
     "@pixi/filter-bulge-pinch": "^3.0.3",
     "@pixi/filter-color-map": "^3.0.3",
+    "@pixi/filter-color-overlay": "^3.0.3",
     "@pixi/filter-color-replace": "^3.0.3",
     "@pixi/filter-convolution": "^3.0.3",
     "@pixi/filter-cross-hatch": "^3.0.3",

bundle/src/index.js

@@ -23,6 +23,7 @@ export * from "@pixi/filter-bevel";
 export * from "@pixi/filter-bloom";
 export * from "@pixi/filter-bulge-pinch";
 export * from "@pixi/filter-color-map";
+export * from "@pixi/filter-color-overlay";
 export * from "@pixi/filter-color-replace";
 export * from "@pixi/filter-convolution";
 export * from "@pixi/filter-cross-hatch";

bundle/types.d.ts

@@ -5,6 +5,7 @@
 /// <reference types="@pixi/filter-bloom" />
 /// <reference types="@pixi/filter-bulge-pinch" />
 /// <reference types="@pixi/filter-color-map" />
+/// <reference types="@pixi/filter-color-overlay" />
 /// <reference types="@pixi/filter-color-replace" />
 /// <reference types="@pixi/filter-convolution" />
 /// <reference types="@pixi/filter-cross-hatch" />
@@ -38,6 +39,7 @@ declare module "pixi-filters" {
     export * from "@pixi/filter-bloom";
     export * from "@pixi/filter-bulge-pinch";
     export * from "@pixi/filter-color-map";
+    export * from "@pixi/filter-color-overlay";
     export * from "@pixi/filter-color-replace";
     export * from "@pixi/filter-convolution";
     export * from "@pixi/filter-cross-hatch";

filters/color-overlay/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2019 Michael Deal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

filters/color-overlay/README.md

@@ -0,0 +1,23 @@
+# ColorOverlayFilter
+
+PixiJS filter to overlay all colors with single color.
+
+## Installation
+
+```bash
+npm install @pixi/filter-color-overlay
+```
+
+## Usage
+
+```js
+import {ColorOverlayFilter} from '@pixi/filter-color-overlay';
+import {Container} from 'pixi.js';
+
+const container = new Container();
+container.filters = [new ColorOverlayFilter()];
+```
+
+## Documentation
+
+See https://pixijs.github.io/pixi-filters/docs

filters/color-overlay/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@pixi/filter-color-overlay",
+  "version": "3.0.3",
+  "main": "lib/filter-color-overlay.cjs.js",
+  "bundle": "dist/filter-color-overlay.js",
+  "description": "PixiJS filter to overlay all colors with single color",
+  "author": "Michael Deal",
+  "contributors": [
+    "Michael Deal <hello@mudcu.be>"
+  ],
+  "module": "lib/filter-color-overlay.esm.js",
+  "types": "types.d.ts",
+  "homepage": "http://pixijs.com/",
+  "bugs": "https://github.com/pixijs/pixi-filters/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pixijs/pixi-filters.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib",
+    "dist",
+    "types.d.ts"
+  ],
+  "dependencies": {
+    "@pixi/core": "^5.0.0-X",
+    "@pixi/utils": "^5.0.0-X"
+  },
+  "devDependencies": {
+    "@tools/fragments": "^3.0.3"
+  }
+}

filters/color-overlay/src/ColorOverlayFilter.js

@@ -0,0 +1,57 @@
+import {vertex} from '@tools/fragments';
+import fragment from './colorOverlay.frag';
+import {Filter} from '@pixi/core';
+import {hex2rgb, rgb2hex} from '@pixi/utils';
+
+/**
+ * Replace all colors within a source graphic with a single color.<br>
+ * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/color-overlay.png)
+ *
+ * @class
+ * @extends PIXI.Filter
+ * @memberof PIXI.filters
+ * @see {@link https://www.npmjs.com/package/@pixi/filter-color-replace|@pixi/filter-color-replace}
+ * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters}
+ * @param {number|Array<number>} [color=0x000000] The resulting color, as a 3 component RGB e.g. [1.0, 0.5, 1.0]
+ *
+ * @example
+ *  // replaces red with blue
+ *  someSprite.filters = [new ColorOverlayFilter(
+ *   [1, 0, 0],
+ *   [0, 0, 1],
+ *   0.001
+ *   )];
+ *
+ */
+class ColorOverlayFilter extends Filter {
+
+    constructor(color = 0x000000) {
+        super(vertex, fragment);
+        this.uniforms.color = new Float32Array(3);
+        this.color = color;
+    }
+
+    /**
+     * The resulting color, as a 3 component RGB e.g. [1.0, 0.5, 1.0]
+     * @member {number|Array<number>}
+     * @default 0x000000
+     */
+    set color(value) {
+        let arr = this.uniforms.color;
+        if (typeof value === 'number') {
+            hex2rgb(value, arr);
+            this._color = value;
+        }
+        else {
+            arr[0] = value[0];
+            arr[1] = value[1];
+            arr[2] = value[2];
+            this._color = rgb2hex(arr);
+        }
+    }
+    get color() {
+        return this._color;
+    }
+}
+
+export { ColorOverlayFilter };

filters/color-overlay/src/colorOverlay.frag

@@ -0,0 +1,8 @@
+varying vec2 vTextureCoord;
+uniform sampler2D uSampler;
+uniform vec3 color;
+void main(void) {
+    vec4 currentColor = texture2D(uSampler, vTextureCoord);
+    vec3 colorOverlay = color * currentColor.a;
+    gl_FragColor = vec4(colorOverlay.r, colorOverlay.g, colorOverlay.b, currentColor.a);
+}

filters/color-overlay/src/index.js

@@ -0,0 +1 @@
+export * from './ColorOverlayFilter';

filters/color-overlay/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="pixi.js" />
+declare module "@pixi/filter-color-overlay" {
+    export class ColorOverlayFilter extends PIXI.Filter {
+        constructor(color?:number|[number, number, number]);
+        color:number|[number, number, number];
+    }
+}

tools/demo/src/filters/color-overlay.js

@@ -0,0 +1,9 @@
+export default function() {
+	this.addFilter('ColorOverlayFilter', {
+		fishOnly: true,
+		args: [0xff0000],
+		oncreate(folder) {
+			folder.addColor(this, 'color');
+		}
+	});
+}

tools/demo/src/filters/index.js

@@ -9,6 +9,7 @@ export {default as blur} from './blur';
 export {default as bulgePinch} from './bulge-pinch';
 export {default as colorMap} from './color-map';
 export {default as colorMatrix} from './color-matrix';
+export {default as colorOverlay} from './color-overlay';
 export {default as colorReplace} from './color-replace';
 export {default as convolution} from './convolution';
 export {default as crossHatch} from './cross-hatch';

tools/screenshots/config.json

@@ -326,6 +326,13 @@
                 "color": 16711680
             }
         },
+        {
+            "name": "ColorOverlayFilter",
+            "filename": "color-overlay",
+            "options": {
+                "color": 16711680
+            }
+        },
         {
             "name": "ColorReplaceFilter",
             "filename": "color-replace",