fix #1982: Fixed filters

src/client/js/objects/objects.js

@@ -144,6 +144,9 @@ define([
 				});
 			}
 
+			if (template.filters && obj.sprite)
+				renderer.addFilter(obj.sprite, template.filters[0]);
+
 			//We need to set visibility before components kick in as they sometimes need access to isVisible
 			obj.updateVisibility();
 
@@ -241,6 +244,9 @@ define([
 			if ((!obj.sprite) && (template.sheetName))
 				obj.sprite = renderer.buildObject(obj);
 
+			if (template.filters && !obj.sprite?.filters?.length)
+				renderer.addFilter(obj.sprite, template.filters[0]);
+
 			if (template.name) {
 				if (obj.nameSprite)
 					renderer.destroyObject({ sprite: obj.nameSprite });

src/client/js/rendering/renderer.js

@@ -740,8 +740,8 @@ define([
 			return sprite;
 		},
 
-		addFilter: function (sprite) {
-			const filter = new shaderOutline();
+		addFilter: function (sprite, config) {
+			const filter = new shaderOutline(config);
 
 			if (!sprite.filters)
 				sprite.filters = [filter];

src/client/js/rendering/shaders/outline.js

@@ -5,32 +5,21 @@ define([
 	vertex,
 	fragment
 ) {
-	const _thickness = 1;
-	const _alpha = 1.0;
-	const _knockout = false;
-
 	class OutlineFilter extends PIXI.Filter {
-		constructor (thickness = 5, color = 0xFFFFFF, quality = 0.1, alpha = 1.0, knockout = false) {
+		constructor ({ thickness = 5, color = 0xFFFFFF, quality = 0.1, alpha = 1.0, knockout = false }) {
 			const angleStep = Math.PI / 2;
-			color = PIXI.utils.hex2rgb(color);
 
 			super(vertex, fragment.replace('$angleStep$', angleStep));
 
 			this.uniforms.uThickness = new Float32Array([thickness, thickness]);
-			this.uniforms.uColor = new Float32Array([0, 0.0, 0.0, 1]);
+			this.uniforms.uColor = new Float32Array([1, 1, 1, 1]);
 			this.uniforms.uAlpha = alpha;
 			this.uniforms.uKnockout = knockout;
 
-			Object.assign(this, { thickness, color, quality, alpha, knockout });
-		}
+			const rgbColor = PIXI.utils.hex2rgb(color);
+			this.uniforms.uColor = PIXI.utils.hex2rgb(rgbColor, this.uniforms.uColor);
 
-		getAngleStep (quality) {
-			const samples = Math.max(
-				quality * MAX_SAMPLES,
-				MIN_SAMPLES,
-			);
-
-			return (Math.PI * 2 / samples).toFixed(7);
+			Object.assign(this, { thickness, color, quality, alpha, knockout });
 		}
 
 		apply (filterManager, input, output, clear) {

src/server/objects/objBase.js

@@ -107,7 +107,7 @@ module.exports = {
 			o = this;
 		}
 
-		const syncTypes = ['portrait', 'area'];
+		const syncTypes = ['portrait', 'area', 'filters'];
 		const ignoreKeysWhenNotSelf = ['account'];
 
 		for (let p in o) {