diff --git a/src/client/js/objects/objects.js b/src/client/js/objects/objects.js index 33ffbbd2..6433602c 100644 --- a/src/client/js/objects/objects.js +++ b/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 }); diff --git a/src/client/js/rendering/renderer.js b/src/client/js/rendering/renderer.js index d365ce45..57ebea23 100644 --- a/src/client/js/rendering/renderer.js +++ b/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]; diff --git a/src/client/js/rendering/shaders/outline.js b/src/client/js/rendering/shaders/outline.js index 1adce52a..1f067a7a 100644 --- a/src/client/js/rendering/shaders/outline.js +++ b/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) { diff --git a/src/server/objects/objBase.js b/src/server/objects/objBase.js index a0a09675..fd003959 100644 --- a/src/server/objects/objBase.js +++ b/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) {