added blur effect to pixi renderer
diff --git a/player/index.html b/player/index.html
index 0a741a6..3b6808f 100644
--- a/player/index.html
+++ b/player/index.html
@@ -166,6 +166,8 @@
<script src="js/elements/pixiElements/PIXIShapeElement.js" data-light-skip="true"></script>
<script src="js/elements/pixiElements/PIXICompElement.js" data-light-skip="true"></script>
<script src="js/elements/pixiElements/PIXIMask.js" data-light-skip="true"></script>
+ <script src="js/elements/pixiElements/PIXIEffects.js"></script>
+ <script src="js/elements/pixiElements/effects/PIXIGaussianBlurEffect.js"></script>
<script src="js/animation/AnimationManager.js"></script>
<script src="js/animation/AnimationItem.js"></script>
<!-- Expressions -->
@@ -195,6 +197,13 @@
<body>
<div id="lottie"></div>
+<script id="shader" type="shader">
+
+void main(){
+ gl_FragColor = vec4(1.0,1.0,1.0,1.0);
+}
+</script>
+
<script>
var anim;
var elem = document.getElementById('lottie');
@@ -202,7 +211,7 @@
var animData = {
container: elem,
renderer: 'pixi',
- loop: false,
+ loop: true,
autoplay: true,
rendererSettings: {
progressiveLoad:false,
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 74ae6af..f09eb50 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -544,6 +544,7 @@
AnimationItem.prototype.getAssetsPath = function (assetData) {
var path = '';
+ console.log('getAssetsPath')
if(this.assetsPath){
var imagePath = assetData.p;
if(imagePath.indexOf('images/') !== -1){
diff --git a/player/js/elements/pixiElements/PIXIBaseElement.js b/player/js/elements/pixiElements/PIXIBaseElement.js
index 1c54fa6..e2bd947 100644
--- a/player/js/elements/pixiElements/PIXIBaseElement.js
+++ b/player/js/elements/pixiElements/PIXIBaseElement.js
@@ -14,7 +14,6 @@
this.layerElement = new PIXI.DisplayObjectContainer();
},
createContainerElements: function(){
- this.matteElement = createNS('g');
this.transformedElement = this.layerElement;
this.maskedElement = this.layerElement;
this._sizeChanged = false;
@@ -23,93 +22,17 @@
var filId, fil, gg;
if (this.data.td) {
if (this.data.td == 3 || this.data.td == 1) {
- var masker = createNS('mask');
- masker.setAttribute('id', this.layerId);
- masker.setAttribute('mask-type', this.data.td == 3 ? 'luminance' : 'alpha');
- masker.appendChild(this.layerElement);
- layerElementParent = masker;
- this.globalData.defs.appendChild(masker);
- // This is only for IE and Edge when mask if of type alpha
- if (!featureSupport.maskType && this.data.td == 1) {
- masker.setAttribute('mask-type', 'luminance');
- filId = randomString(10);
- fil = filtersFactory.createFilter(filId);
- this.globalData.defs.appendChild(fil);
- fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
- gg = createNS('g');
- gg.appendChild(this.layerElement);
- layerElementParent = gg;
- masker.appendChild(gg);
- gg.setAttribute('filter','url(' + locationHref + '#' + filId + ')');
- }
} else if(this.data.td == 2) {
- var maskGroup = createNS('mask');
- maskGroup.setAttribute('id', this.layerId);
- maskGroup.setAttribute('mask-type','alpha');
- var maskGrouper = createNS('g');
- maskGroup.appendChild(maskGrouper);
- filId = randomString(10);
- fil = filtersFactory.createFilter(filId);
- ////
-
- var feColorMatrix = createNS('feColorMatrix');
- feColorMatrix.setAttribute('type', 'matrix');
- feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
- feColorMatrix.setAttribute('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 -1 1');
- fil.appendChild(feColorMatrix);
-
- this.globalData.defs.appendChild(fil);
- var alphaRect = createNS('rect');
- alphaRect.setAttribute('width', this.comp.data.w);
- alphaRect.setAttribute('height', this.comp.data.h);
- alphaRect.setAttribute('x','0');
- alphaRect.setAttribute('y','0');
- alphaRect.setAttribute('fill','#ffffff');
- alphaRect.setAttribute('opacity','0');
- maskGrouper.setAttribute('filter', 'url(' + locationHref + '#'+filId+')');
- maskGrouper.appendChild(alphaRect);
- maskGrouper.appendChild(this.layerElement);
- layerElementParent = maskGrouper;
- if (!featureSupport.maskType) {
- maskGroup.setAttribute('mask-type', 'luminance');
- fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
- gg = createNS('g');
- maskGrouper.appendChild(alphaRect);
- gg.appendChild(this.layerElement);
- layerElementParent = gg;
- maskGrouper.appendChild(gg);
- }
- this.globalData.defs.appendChild(maskGroup);
}
} else if (this.data.tt) {
- this.matteElement.appendChild(this.layerElement);
- layerElementParent = this.matteElement;
- this.baseElement = this.matteElement;
} else {
this.baseElement = this.layerElement;
- this.PBaseElement = this.PLayerElement;
- }
- if (this.data.ln) {
- this.layerElement.setAttribute('id', this.data.ln);
- }
- if (this.data.cl) {
- this.layerElement.setAttribute('class', this.data.cl);
}
//Clipping compositions to hide content that exceeds boundaries. If collapsed transformations is on, component should not be clipped
if (this.data.ty === 0 && !this.data.hd) {
- var cp = createNS( 'clipPath');
- var pt = createNS('path');
- pt.setAttribute('d','M0,0 L' + this.data.w + ',0' + ' L' + this.data.w + ',' + this.data.h + ' L0,' + this.data.h + 'z');
- var clipId = 'cp_'+randomString(8);
- cp.setAttribute('id',clipId);
- cp.appendChild(pt);
- this.globalData.defs.appendChild(cp);
+ //Todo Clip compositions
if (this.checkMasks()) {
- var cpGroup = createNS('g');
- cpGroup.setAttribute('clip-path','url(' + locationHref + '#'+clipId + ')');
- cpGroup.appendChild(this.layerElement);
- this.transformedElement = cpGroup;
if (layerElementParent) {
layerElementParent.appendChild(this.transformedElement);
} else {
@@ -121,9 +44,9 @@
}
if (this.data.bm !== 0) {
- this.setBlendMode();
+ //this.setBlendMode();
}
- this.renderableEffectsManager = new SVGEffects(this);
+ this.renderableEffectsManager = new PIXIEffects(this);
},
renderInnerContent: function() {},
renderFrame: function() {
@@ -169,7 +92,7 @@
};
PIXIBaseElement.prototype.getBaseElement = function(){
- return this.PBaseElement;
+ return this.baseElement;
};
PIXIBaseElement.prototype.addMasks = function(){
this.maskManager = new PIXIMaskElement(this.data, this, this.globalData);
@@ -182,27 +105,17 @@
this.matteElement.setAttribute("mask", "url(#" + id + ")");
};
-PIXIBaseElement.prototype.setMatte = function(id){
- if(!this.matteElement){
- return;
- }
- this.matteElement.setAttribute("mask", "url(#" + id + ")");
-};
-
PIXIBaseElement.prototype.show = function(){
if (this.isInRange && !this.isTransparent){
this.hidden = false;
this._isFirstFrame = true;
+ this.layerElement.visible = true;
}
};
PIXIBaseElement.prototype.hide = function(){
-
-};
-
-PIXIBaseElement.prototype.prepareFrame = function(num){
- this._mdf = false;
- this.prepareRenderableFrame(num);
- this.prepareProperties(num, this.isInRange);
- this.checkTransparency();
+ if (!this.hidden && (!this.isInRange || this.isTransparent)) {
+ this.layerElement.visible = false;
+ this.hidden = true;
+ }
};
\ No newline at end of file
diff --git a/player/js/elements/pixiElements/PIXICompElement.js b/player/js/elements/pixiElements/PIXICompElement.js
index 35e7e85..e0ee205 100644
--- a/player/js/elements/pixiElements/PIXICompElement.js
+++ b/player/js/elements/pixiElements/PIXICompElement.js
@@ -7,4 +7,13 @@
this.tm = data.tm ? PropertyFactory.getProp(this,data.tm,0,globalData.frameRate, this) : {_placeholder:true};
}
-extendPrototype([PIXIRenderer, ICompElement, PIXIBaseElement], PIXICompElement);
\ No newline at end of file
+extendPrototype([PIXIRenderer, ICompElement, PIXIBaseElement], PIXICompElement);
+
+PIXICompElement.prototype.renderInnerContent = function() {
+ var i,len = this.layers.length;
+ for( i = len - 1; i >= 0; i -= 1 ){
+ if(this.completeLayers || this.elements[i]){
+ this.elements[i].renderFrame();
+ }
+ }
+};
\ No newline at end of file
diff --git a/player/js/elements/pixiElements/PIXIEffects.js b/player/js/elements/pixiElements/PIXIEffects.js
new file mode 100644
index 0000000..cb1e5ac
--- /dev/null
+++ b/player/js/elements/pixiElements/PIXIEffects.js
@@ -0,0 +1,31 @@
+function PIXIEffects(elem){
+ var i, len = elem.data.ef ? elem.data.ef.length : 0;
+ var count = 0;
+ this.filters = [];
+ var filterManager;
+ for(i = 0; i < len; i += 1) {
+ filterManager = null;
+ if (elem.data.ef[i].ty === 29) {
+ filterManager = new PIXIGaussianBlurEffect(elem.effectsManager.effectElements[i]);
+ }
+ if (filterManager) {
+ this.filters.push(filterManager);
+ }
+ }
+ if (this.filters.length) {
+ var i, len = this.filters.length;
+ var pixiFilters = [];
+ for(i = 0; i < len ; i += 1) {
+ pixiFilters.push(this.filters[i].pixiFilter);
+ }
+ elem.layerElement.filters = pixiFilters;
+ elem.addRenderableComponent(this);
+ }
+}
+
+PIXIEffects.prototype.renderFrame = function(_isFirstFrame){
+ var i, len = this.filters.length;
+ for(i=0;i<len;i+=1){
+ this.filters[i].renderFrame(_isFirstFrame);
+ }
+};
\ No newline at end of file
diff --git a/player/js/elements/pixiElements/PIXIImageElement.js b/player/js/elements/pixiElements/PIXIImageElement.js
index 9fe6832..e4da173 100644
--- a/player/js/elements/pixiElements/PIXIImageElement.js
+++ b/player/js/elements/pixiElements/PIXIImageElement.js
@@ -1,60 +1,28 @@
-function PIXIImageElement(data,parentContainer,globalData,comp,placeholder){
+function PIXIImageElement(data,globalData,comp){
this.assetData = globalData.getAssetData(data.refId);
- this._parent.constructor.call(this,data,parentContainer,globalData,comp,placeholder);
+ this.initElement(data,globalData,comp);
}
extendPrototype([BaseElement, TransformElement, PIXIBaseElement, HierarchyElement, FrameElement, RenderableElement], PIXIImageElement);
-PIXIImageElement.prototype.createElements = function(){
-
+PIXIImageElement.prototype.createContent = function(){
var assetPath = this.globalData.getAssetsPath(this.assetData);
-
- this._parent.createElements.call(this);
-
- this.innerElem = document.createElementNS(svgNS,'image');
- this.innerElem.setAttribute('width',this.assetData.w+"px");
- this.innerElem.setAttribute('height',this.assetData.h+"px");
- this.innerElem.setAttribute('preserveAspectRatio','xMidYMid slice');
- this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink','href',assetPath);
- this.maskedElement = this.innerElem;
- this.layerElement.appendChild(this.innerElem);
- if(this.data.ln){
- this.innerElem.setAttribute('id',this.data.ln);
- }
- if(this.data.cl){
- this.innerElem.setAttribute('class',this.data.cl);
- }
-
var texture = PIXI.Texture.fromImage(assetPath);
- this.PInnerElem = new PIXI.Sprite(texture);
- this.PLayerElement.addChild(this.PInnerElem);
+ this.innerElem = new PIXI.Sprite(texture);
+ this.layerElement.addChild(this.innerElem);
};
-PIXIImageElement.prototype.hide = function(){
- if(!this.hidden){
- this.innerElem.style.display = 'none';
- this.PLayerElement.visible = false;
- this.hidden = true;
- }
-};
+PIXIImageElement.prototype.initElement = function(data,globalData,comp) {
+ this.initFrame();
+ this.initBaseData(data, globalData, comp);
+ this.initTransform(data, globalData, comp);
+ this.initHierarchy();
+ this.initRenderable();
+ this.initRendererElement();
+ this.createContainerElements();
+ this.addMasks();
+ this.createContent();
+ this.hide();
+}
-PIXIImageElement.prototype.renderFrame = function(parentMatrix){
- var renderParent = this._parent.renderFrame.call(this,parentMatrix);
- if(renderParent===false){
- this.hide();
- return;
- }
- if(this.hidden){
- this.hidden = false;
- this.innerElem.style.display = 'block';
- this.PLayerElement.visible = true;
- }
- if(this.firstFrame){
- this.firstFrame = false;
- }
-};
-
-PIXIImageElement.prototype.destroy = function(){
- this._parent.destroy.call();
- this.innerElem = null;
-};
\ No newline at end of file
+PIXIImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
\ No newline at end of file
diff --git a/player/js/elements/pixiElements/PIXIMask.js b/player/js/elements/pixiElements/PIXIMask.js
index 1e69d83..695d99d 100644
--- a/player/js/elements/pixiElements/PIXIMask.js
+++ b/player/js/elements/pixiElements/PIXIMask.js
@@ -146,9 +146,8 @@
}
if(count > 0){
- this.element.maskedElement.setAttribute(maskRef, "url(#" + layerId + ")");
- this.element.PMaskedElement.mask = currentPMasks[0];
- this.element.PMaskedElement.addChild(currentPMasks[0]);
+ this.element.maskedElement.mask = currentPMasks[0];
+ this.element.maskedElement.addChild(currentPMasks[0]);
}
if (this.viewData.length) {
this.element.addRenderableComponent(this);
diff --git a/player/js/elements/pixiElements/PIXIShapeElement.js b/player/js/elements/pixiElements/PIXIShapeElement.js
index 3b8329e..9cf2369 100644
--- a/player/js/elements/pixiElements/PIXIShapeElement.js
+++ b/player/js/elements/pixiElements/PIXIShapeElement.js
@@ -44,7 +44,7 @@
PIXIShapeElement.prototype.buildExpressionInterface = function(){};
PIXIShapeElement.prototype.createContent = function(){
- this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.PLayerElement, 0, [], true);
+ this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.layerElement, 0, [], true);
this.filterUniqueShapes();
};
diff --git a/player/js/elements/pixiElements/PIXISolidElement.js b/player/js/elements/pixiElements/PIXISolidElement.js
index 9b6af4b..0317beb 100644
--- a/player/js/elements/pixiElements/PIXISolidElement.js
+++ b/player/js/elements/pixiElements/PIXISolidElement.js
@@ -21,4 +21,6 @@
this.addMasks();
this.createContent();
this.hide();
-}
\ No newline at end of file
+}
+
+PIXISolidElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
\ No newline at end of file
diff --git a/player/js/elements/pixiElements/effects/PIXIGaussianBlurEffect.js b/player/js/elements/pixiElements/effects/PIXIGaussianBlurEffect.js
new file mode 100644
index 0000000..28019d7
--- /dev/null
+++ b/player/js/elements/pixiElements/effects/PIXIGaussianBlurEffect.js
@@ -0,0 +1,26 @@
+function PIXIGaussianBlurEffect(filterManager){
+ this.filterManager = filterManager;
+ this.pixiFilter = new PIXI.filters.BlurFilter(0, 10, 1, 5);
+}
+
+PIXIGaussianBlurEffect.prototype.renderFrame = function(forceRender){
+ if(forceRender || this.filterManager._mdf){
+ if(forceRender || this.filterManager.effectElements[0]._mdf || this.filterManager.effectElements[1]._mdf) {
+ var blurStrength = this.filterManager.effectElements[0].p.v;
+ switch(this.filterManager.effectElements[1].p.v) {
+ case 1:
+ this.pixiFilter.blurX = blurStrength;
+ this.pixiFilter.blurY = blurStrength;
+ break;
+ case 2:
+ this.pixiFilter.blurX = blurStrength;
+ this.pixiFilter.blurY = 0;
+ break;
+ case 3:
+ this.pixiFilter.blurX = 0;
+ this.pixiFilter.blurY = blurStrength;
+ break;
+ }
+ }
+ }
+};
\ No newline at end of file
diff --git a/player/js/renderers/PIXIRenderer.js b/player/js/renderers/PIXIRenderer.js
index 8c1f3a6..aa1388b 100644
--- a/player/js/renderers/PIXIRenderer.js
+++ b/player/js/renderers/PIXIRenderer.js
@@ -36,7 +36,6 @@
PIXIRenderer.prototype.createComp = function (data) {
return new PIXICompElement(data,this.globalData,this);
-
};
PIXIRenderer.prototype.createSolid = function (data) {
@@ -64,20 +63,19 @@
//this.animationItem.wrapper.appendChild(this.layerElement);
///
this.renderer = new PIXI.WebGLRenderer(animData.w, animData.h,{antialias:true,transparent:true});
- //this.renderer.view.style.transform = 'scale(0.5,0.5)';
+ this.renderer.view.style.transform = 'scale(0.5,0.5)';
this.renderer.view.style.transformOrigin = '0 0';
this.animationItem.wrapper.appendChild(this.renderer.view);
this.stage = new PIXI.Container();
- this.PLayerElement = this.stage;
+ this.layerElement = this.stage;
///
//Mask animation
var defs = document.createElementNS(svgNS, 'defs');
this.globalData.defs = defs;
- this.layerElement.appendChild(defs);
this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
- this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
+ this.globalData.renderConfig = this.renderConfig;
this.globalData.frameId = 0;
this.globalData.compSize = {
w: animData.w,
@@ -85,7 +83,9 @@
};
this.data = animData;
this.globalData.frameRate = animData.fr;
- var maskElement = document.createElementNS(svgNS, 'clipPath');
+
+ //Todo mask main container and remove this block of code
+ /*var maskElement = document.createElementNS(svgNS, 'clipPath');
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('width',animData.w);
rect.setAttribute('height',animData.h);
@@ -98,7 +98,8 @@
maskedElement.setAttribute("clip-path", "url(#"+maskId+")");
this.layerElement.appendChild(maskedElement);
defs.appendChild(maskElement);
- this.layerElement = maskedElement;
+ this.layerElement = maskedElement;*/
+
this.layers = animData.layers;
this.globalData.fontManager = new FontManager();
this.globalData.fontManager.addChars(animData.chars);
@@ -198,10 +199,10 @@
i += 1;
}
if(nextElement){
- var index = this.PLayerElement.getChildIndex(nextElement);
- this.PLayerElement.addChildAt(newElement,index);
+ var index = this.layerElement.getChildIndex(nextElement);
+ this.layerElement.addChildAt(newElement,index);
} else {
- this.PLayerElement.addChild(newElement);
+ this.layerElement.addChild(newElement);
}
};
diff --git a/player/js/utils/shapes/shapePathBuilder.js b/player/js/utils/shapes/shapePathBuilder.js
index 67ff949..c68e21a 100644
--- a/player/js/utils/shapes/shapePathBuilder.js
+++ b/player/js/utils/shapes/shapePathBuilder.js
@@ -41,5 +41,19 @@
c:mat.applyToPointArray(_o[i - 1][0], _o[i - 1][1], 0).concat(mat.applyToPointArray(_i[0][0], _i[0][1], 0)).concat(mat.applyToPointArray(_v[0][0], _v[0][1], 0))
})
}
+
+ //Fix for shapes with no length.
+ //Todo: search a better solution. AE draws a point on this cases so the shape can't be removed.
+ if(_PIXIcommands.length === 2
+ && _PIXIcommands[0].c[0] === _PIXIcommands[1].c[0]
+ && _PIXIcommands[0].c[1] === _PIXIcommands[1].c[1]
+ && _PIXIcommands[0].c[0] === _PIXIcommands[1].c[3]
+ && _PIXIcommands[0].c[1] === _PIXIcommands[1].c[4]
+ && _PIXIcommands[0].c[0] === _PIXIcommands[1].c[6]
+ && _PIXIcommands[0].c[1] === _PIXIcommands[1].c[7]
+ ) {
+ _PIXIcommands[1].c[6] += 0.5;
+ _PIXIcommands[1].c[7] += 0.5;
+ }
return _PIXIcommands;
};
\ No newline at end of file
