Canvas2D: few fixes

 - Add Canvas Render Time profiling counter
 - Make few optimizations to improve render time
 - Update Preview files of C2D

canvas2D/src/Engine/babylon.canvas2d.ts

@@ -258,13 +258,6 @@
             return this._updateTransparentDataCounter;
         }
 
-        public get cachedGroupRenderCounter(): PerfCounter {
-            if (!this._cachedGroupRenderCounter) {
-                this._cachedGroupRenderCounter = new PerfCounter();
-            }
-            return this._cachedGroupRenderCounter;
-        }
-
         public get updateCachedStateCounter(): PerfCounter {
             if (!this._updateCachedStateCounter) {
                 this._updateCachedStateCounter = new PerfCounter();
@@ -314,6 +307,13 @@
             return this._layoutBoundingInfoUpdateCounter;
         }
 
+        public get canvasRenderTimeCounter(): PerfCounter {
+            if (!this._canvasRenderTimeCounter) {
+                this._canvasRenderTimeCounter = new PerfCounter();
+            }
+            return this._canvasRenderTimeCounter;
+        }
+
         public static get instances() : Array<Canvas2D> {
             return Canvas2D._INSTANCES;
         }
@@ -1165,7 +1165,6 @@
             this.drawCallsTransparentCounter.fetchNewFrame();
             this.groupRenderCounter.fetchNewFrame();
             this.updateTransparentDataCounter.fetchNewFrame();
-            this.cachedGroupRenderCounter.fetchNewFrame();
             this.updateCachedStateCounter.fetchNewFrame();
             this.updateLayoutCounter.fetchNewFrame();
             this.updatePositioningCounter.fetchNewFrame();
@@ -1173,6 +1172,7 @@
             this.updateGlobalTransformCounter.fetchNewFrame();
             this.boundingInfoRecomputeCounter.fetchNewFrame();
             this.layoutBoundingInfoUpdateCounter.fetchNewFrame();
+            this.canvasRenderTimeCounter.beginMonitoring();
         }
 
         private _fetchPerfMetrics() {
@@ -1181,7 +1181,6 @@
             this.drawCallsTransparentCounter.addCount(0, true);
             this.groupRenderCounter.addCount(0, true);
             this.updateTransparentDataCounter.addCount(0, true);
-            this.cachedGroupRenderCounter.addCount(0, true);
             this.updateCachedStateCounter.addCount(0, true);
             this.updateLayoutCounter.addCount(0, true);
             this.updatePositioningCounter.addCount(0, true);
@@ -1189,6 +1188,7 @@
             this.updateGlobalTransformCounter.addCount(0, true);
             this.boundingInfoRecomputeCounter.addCount(0, true);
             this.layoutBoundingInfoUpdateCounter.addCount(0, true);
+            this.canvasRenderTimeCounter.endMonitoring(true);
         }
 
         private _updateProfileCanvas() {
@@ -1198,13 +1198,13 @@
 
             let format = (v: number) => (Math.round(v*100)/100).toString();
 
-            let p = `Draw Calls:\n` +
+            let p = `Render Time: avg:${format(this.canvasRenderTimeCounter.lastSecAverage)}ms ${format(this.canvasRenderTimeCounter.current)}ms\n` +
+                    `Draw Calls:\n` +
                     ` - Opaque:      ${format(this.drawCallsOpaqueCounter.current)}, (avg:${format(this.drawCallsOpaqueCounter.lastSecAverage)}, t:${format(this.drawCallsOpaqueCounter.total)})\n` +
                     ` - AlphaTest:   ${format(this.drawCallsAlphaTestCounter.current)}, (avg:${format(this.drawCallsAlphaTestCounter.lastSecAverage)}, t:${format(this.drawCallsAlphaTestCounter.total)})\n` +
                     ` - Transparent: ${format(this.drawCallsTransparentCounter.current)}, (avg:${format(this.drawCallsTransparentCounter.lastSecAverage)}, t:${format(this.drawCallsTransparentCounter.total)})\n` +
                     `Group Render: ${this.groupRenderCounter.current}, (avg:${format(this.groupRenderCounter.lastSecAverage)}, t:${format(this.groupRenderCounter.total)})\n` + 
                     `Update Transparent Data: ${this.updateTransparentDataCounter.current}, (avg:${format(this.updateTransparentDataCounter.lastSecAverage)}, t:${format(this.updateTransparentDataCounter.total)})\n` + 
-                    `Cached Group Render: ${this.cachedGroupRenderCounter.current}, (avg:${format(this.cachedGroupRenderCounter.lastSecAverage)}, t:${format(this.cachedGroupRenderCounter.total)})\n` + 
                     `Update Cached States: ${this.updateCachedStateCounter.current}, (avg:${format(this.updateCachedStateCounter.lastSecAverage)}, t:${format(this.updateCachedStateCounter.total)})\n` + 
                     ` - Update Layout: ${this.updateLayoutCounter.current}, (avg:${format(this.updateLayoutCounter.lastSecAverage)}, t:${format(this.updateLayoutCounter.total)})\n` + 
                     ` - Update Positioning: ${this.updatePositioningCounter.current}, (avg:${format(this.updatePositioningCounter.lastSecAverage)}, t:${format(this.updatePositioningCounter.total)})\n` + 
@@ -1241,12 +1241,6 @@
             }
         }
 
-        public addCachedGroupRenderCounter(count: number) {
-            if (this._cachedGroupRenderCounter) {
-                this._cachedGroupRenderCounter.addCount(count, false);
-            }
-        }
-
         public addUpdateCachedStateCounter(count: number) {
             if (this._updateCachedStateCounter) {
                 this._updateCachedStateCounter.addCount(count, false);
@@ -1334,7 +1328,6 @@
         private _drawCallsTransparentCounter     : PerfCounter;
         private _groupRenderCounter              : PerfCounter;
         private _updateTransparentDataCounter    : PerfCounter;
-        private _cachedGroupRenderCounter        : PerfCounter;
         private _updateCachedStateCounter        : PerfCounter;
         private _updateLayoutCounter             : PerfCounter;
         private _updatePositioningCounter        : PerfCounter;
@@ -1342,6 +1335,7 @@
         private _updateLocalTransformCounter     : PerfCounter;
         private _boundingInfoRecomputeCounter    : PerfCounter;
         private _layoutBoundingInfoUpdateCounter : PerfCounter;
+        private _canvasRenderTimeCounter         : PerfCounter;
 
         private _profilingCanvas: Canvas2D;
         private _profileInfoText: Text2D;

canvas2D/src/Engine/babylon.prim2dBase.ts

@@ -1550,6 +1550,8 @@
             this._invGlobalTransform         = null;
             this._globalTransformProcessStep = 0;
             this._globalTransformStep        = 0;
+            this._prepareProcessStep         = 0;
+            this._updateCachesProcessStep    = 0;
             this._renderGroup                = null;
             this._primLinearPosition         = 0;
             this._manualZOrder               = null;
@@ -3593,8 +3595,12 @@
         }
 
         public _prepareRender(context: PrepareRender2DContext) {
-            this._prepareRenderPre(context);
-            this._prepareRenderPost(context);
+            let globalTransformStep = this.owner._globalTransformStep;
+            if (this._prepareProcessStep < globalTransformStep) {
+                this._prepareRenderPre(context);
+                this._prepareRenderPost(context);
+                this._prepareProcessStep = globalTransformStep;
+            }
         }
 
         public _prepareRenderPre(context: PrepareRender2DContext) {
@@ -3747,12 +3753,9 @@
                         let t2 = Prim2DBase._t2;
                         let as = Prim2DBase._ts0;
                         as.copyFrom(this.actualSize);
-                        let bi = this.boundingInfo;
-                        let dx = bi.center.x - bi.extent.x;
-                        let dy = bi.center.y - bi.extent.y;
                         as.width /= postScale.x;
                         as.height /= postScale.y;
-                        Matrix.TranslationToRef((-as.width * this._origin.x) - dx, (-as.height * this._origin.y) - dy, 0, t0);
+                        Matrix.TranslationToRef((-as.width * this._origin.x), (-as.height * this._origin.y), 0, t0);
 
                         // -Origin * rotation
                         rot.toRotationMatrix(t1);
@@ -3763,7 +3766,7 @@
                         t2.multiplyToRef(t0, t1);
 
                         // -Origin * rotation * scale * Origin
-                        Matrix.TranslationToRef((as.width * this._origin.x) + dx, (as.height * this._origin.y) + dx, 0, t2);
+                        Matrix.TranslationToRef((as.width * this._origin.x), (as.height * this._origin.y), 0, t2);
                         t1.multiplyToRef(t2, t0);
 
                         // -Origin * rotation * scale * Origin * postScale
@@ -3801,7 +3804,13 @@
                 return;
             }
 
-            this.owner.addCachedGroupRenderCounter(1);
+            let ownerProcessStep = this.owner._globalTransformProcessStep;
+            if (this._updateCachesProcessStep === ownerProcessStep) {
+                return;
+            }
+            this._updateCachesProcessStep = ownerProcessStep;
+
+            this.owner.addUpdateCachedStateCounter(1);
             
             // Check if the parent is synced
             if (this._parent && ((this._parent._globalTransformProcessStep !== this.owner._globalTransformProcessStep) || this._parent._areSomeFlagsSet(SmartPropertyPrim.flagLayoutDirty | SmartPropertyPrim.flagPositioningDirty | SmartPropertyPrim.flagZOrderDirty))) {
@@ -4462,6 +4471,8 @@
 
         // Stores the previous 
         protected _globalTransformProcessStep: number;
+        protected _prepareProcessStep: number;
+        protected _updateCachesProcessStep: number;
         protected _localTransform: Matrix;
         protected _localLayoutTransform: Matrix;
         protected _globalTransform: Matrix;

canvas2D/src/Engine/babylon.renderablePrim2d.ts

@@ -80,15 +80,24 @@
         attributeName: string;
         category: string;
         size: number;
-        shaderOffset: number;
         instanceOffset: StringDictionary<number>;
         dataType: ShaderDataType;
+
+        curCategory: string;
+        curCategoryOffset: number;
+
         //uniformLocation: WebGLUniformLocation;
 
         delimitedCategory: string;
 
         constructor() {
+            this.attributeName = null;
+            this.category = null;
+            this.size = null;
             this.instanceOffset = new StringDictionary<number>();
+            this.dataType = 0;
+            this.curCategory = "";
+            this.curCategoryOffset = 0;
         }
 
         setSize(val) {
@@ -233,16 +242,25 @@
                 if (info.category && InstanceClassInfo._CurCategories.indexOf(info.delimitedCategory) === -1) {
                     return;
                 }
-                if (!info.size) {
-                    info.setSize(val);
-                    node.classContent.mapProperty(info, true);
-                } else if (!info.instanceOffset.contains(InstanceClassInfo._CurCategories)) {
-                    node.classContent.mapProperty(info, false);
+
+                let catOffset: number;
+                if (info.curCategory === InstanceClassInfo._CurCategories) {
+                    catOffset = info.curCategoryOffset;
+                } else {
+                    if (!info.size) {
+                        info.setSize(val);
+                        node.classContent.mapProperty(info, true);
+                    } else if (!info.instanceOffset.contains(InstanceClassInfo._CurCategories)) {
+                        node.classContent.mapProperty(info, false);
+                    }
+                    catOffset = info.instanceOffset.get(InstanceClassInfo._CurCategories);
+                    info.curCategory = InstanceClassInfo._CurCategories;
+                    info.curCategoryOffset = catOffset;
                 }
 
                 let obj: InstanceDataBase = this;
                 if (obj.dataBuffer && obj.dataElements) {
-                    let offset = obj.dataElements[obj.curElement].offset + info.instanceOffset.get(InstanceClassInfo._CurCategories);
+                    let offset = obj.dataElements[obj.curElement].offset + catOffset;
                     info.writeData(obj.dataBuffer.buffer, offset, val);
                 }
             }

canvas2D/src/shaders/sprite2d.vertex.fx

@@ -93,7 +93,7 @@ void main(void) {
 	}
 	else {
 		vTopLeftUV = topLeftUV;
-		vBottomRightUV = vec2(topLeftUV.x, topLeftUV.y + sizeUV.y);
+		vBottomRightUV = vec2(topLeftUV.x + sizeUV.x, topLeftUV.y + sizeUV.y);
 		vScale9 = scale9;
 	}
 	vScaleFactor = scaleFactor;

dist/preview release/canvas2D/babylon.canvas2d.d.ts

@@ -2721,6 +2721,8 @@ declare module BABYLON {
         protected _parentTransformStep: number;
         protected _globalTransformStep: number;
         protected _globalTransformProcessStep: number;
+        protected _prepareProcessStep: number;
+        protected _updateCachesProcessStep: number;
         protected _localTransform: Matrix;
         protected _localLayoutTransform: Matrix;
         protected _globalTransform: Matrix;
@@ -2841,9 +2843,10 @@ declare module BABYLON {
         attributeName: string;
         category: string;
         size: number;
-        shaderOffset: number;
         instanceOffset: StringDictionary<number>;
         dataType: ShaderDataType;
+        curCategory: string;
+        curCategoryOffset: number;
         delimitedCategory: string;
         constructor();
         setSize(val: any): void;
@@ -4433,7 +4436,6 @@ declare module BABYLON {
         readonly drawCallsTransparentCounter: PerfCounter;
         readonly groupRenderCounter: PerfCounter;
         readonly updateTransparentDataCounter: PerfCounter;
-        readonly cachedGroupRenderCounter: PerfCounter;
         readonly updateCachedStateCounter: PerfCounter;
         readonly updateLayoutCounter: PerfCounter;
         readonly updatePositioningCounter: PerfCounter;
@@ -4441,6 +4443,7 @@ declare module BABYLON {
         readonly updateGlobalTransformCounter: PerfCounter;
         readonly boundingInfoRecomputeCounter: PerfCounter;
         readonly layoutBoundingInfoUpdateCounter: PerfCounter;
+        readonly canvasRenderTimeCounter: PerfCounter;
         static readonly instances: Array<Canvas2D>;
         readonly primitiveCollisionManager: PrimitiveCollisionManagerBase;
         protected _canvasPreInit(settings: any): void;
@@ -4573,7 +4576,6 @@ declare module BABYLON {
         _addDrawCallCount(count: number, renderMode: number): void;
         _addGroupRenderCount(count: number): void;
         _addUpdateTransparentDataCount(count: number): void;
-        addCachedGroupRenderCounter(count: number): void;
         addUpdateCachedStateCounter(count: number): void;
         addUpdateLayoutCounter(count: number): void;
         addUpdatePositioningCounter(count: number): void;
@@ -4629,7 +4631,6 @@ declare module BABYLON {
         private _drawCallsTransparentCounter;
         private _groupRenderCounter;
         private _updateTransparentDataCounter;
-        private _cachedGroupRenderCounter;
         private _updateCachedStateCounter;
         private _updateLayoutCounter;
         private _updatePositioningCounter;
@@ -4637,6 +4638,7 @@ declare module BABYLON {
         private _updateLocalTransformCounter;
         private _boundingInfoRecomputeCounter;
         private _layoutBoundingInfoUpdateCounter;
+        private _canvasRenderTimeCounter;
         private _profilingCanvas;
         private _profileInfoText;
         private static _v;