Reintroducing canvas2D

canvas2D/config.json

@@ -0,0 +1,47 @@
+{
+  "build": {
+    "filename": "babylon.canvas2d.max.js",
+    "minFilename": "babylon.canvas2d.js",
+    "declarationFilename": "babylon.canvas2d.d.ts",
+    "outputDirectory": "../dist/preview release",
+    "srcOutputDirectory": "src/"
+  },
+  "core": {
+    "typescript": [
+      "src/**/*.ts",
+      "../dist/preview release/babylon.d.ts", 
+      "!src/**/*.d.ts"
+    ],
+    "files": [   
+      "src/Tools/babylon.stringDictionary.js",
+      "src/Tools/babylon.observable.js",
+      "src/Engine/babylon.bounding2d.js",
+      "src/Engine/babylon.canvas2dLayoutEngine.js",
+      "src/Engine/babylon.brushes2d.js",
+      "src/Engine/babylon.smartPropertyPrim.js",
+      "src/Engine/babylon.prim2dBase.js",
+      "src/Engine/babylon.modelRenderCache.js",
+      "src/Engine/babylon.renderablePrim2d.js",
+      "src/Engine/babylon.shape2d.js",
+      "src/Engine/babylon.group2d.js",
+      "src/Engine/babylon.rectangle2d.js",
+      "src/Engine/babylon.ellipse2d.js",
+      "src/Engine/babylon.sprite2d.js",
+      "src/Engine/babylon.text2d.js",
+      "src/Engine/babylon.lines2d.js",
+      "src/Engine/babylon.canvas2d.js",
+      "src/Engine/babylon.worldSpaceCanvas2dNode.js",
+      "src/GUI/babylon.gui.UIElement.js",
+      "src/GUI/babylon.gui.control.js",
+      "src/GUI/babylon.gui.window.js",
+      "src/GUI/babylon.gui.label.js",
+      "src/GUI/babylon.gui.button.js"
+    ]
+  },
+  "shadersDirectories": [
+    {
+      "variable": "BABYLON.Effect.ShadersStore",
+      "files": "src/Shaders/*.fx"
+    }
+  ]
+}

canvas2D/gulp-addModuleExports.js

@@ -0,0 +1,48 @@
+var gutil = require('gulp-util');
+var through = require('through2');
+
+module.exports = function (varName) {
+    return through.obj(function (file, enc, cb) {
+
+        var moduleExportsAddition =
+          '\nif (((typeof window != "undefined" && window.module) || (typeof module != "undefined")) && typeof module.exports != "undefined") {\n' +
+          '    module.exports = ' + varName + ';\n' +
+          '};\n';
+
+        var extendsAddition =
+        'var __extends = (this && this.__extends) || function (d, b) {\n' +
+          'for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];\n' +
+          'function __() { this.constructor = d; }\n' +
+          '__.prototype = b.prototype;\n' +
+          'd.prototype = new __();\n' +
+        '};\n';
+
+        var decorateAddition =
+        'var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n' +
+            'var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n' +
+            'if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);\n' +
+            'else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n' +
+            'return c > 3 && r && Object.defineProperty(target, key, r), r;\n' +
+        '};\n';
+
+        if (file.isNull()) {
+            cb(null, file);
+            return;
+        }
+
+        if (file.isStream()) {
+            //streams not supported, no need for now.
+            return;
+        }
+
+        try {
+            file.contents = new Buffer(decorateAddition.concat(new Buffer(extendsAddition.concat(String(file.contents)).concat(moduleExportsAddition))));
+            this.push(file);
+
+        } catch (err) {
+            this.emit('error', new gutil.PluginError('gulp-add-module-exports', err, { fileName: file.path }));
+        }
+        cb();
+    });
+};
+

canvas2D/gulp-removeShaderComments.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var through = require('through2');
+var PluginError = require('gulp-util').PluginError;
+var singleComment = 1;
+var multiComment = 2;
+
+function uncomment(str, opts) {
+    opts = opts || {};
+
+	var currentChar;
+	var nextChar;
+	var insideString = false;
+	var insideComment = 0;
+	var offset = 0;
+	var ret = '';
+
+    str = str.replace(/\r\n/g, '\n');
+    str = str.replace(/[ \f\t\v]+/g, ' ');
+    str = str.replace(/^\s*\n/gm, '');
+    str = str.replace(/ \+ /g, '+');
+    str = str.replace(/ \- /g, '-');
+    str = str.replace(/ \/ /g, '/');
+    str = str.replace(/ \* /g, '*');
+    str = str.replace(/ > /g, '>');
+    str = str.replace(/ < /g, '<');
+    str = str.replace(/ >= /g, '>=');
+    str = str.replace(/ <= /g, '<=');
+    str = str.replace(/ \+= /g, '+=');
+    str = str.replace(/ \-= /g, '-=');
+    str = str.replace(/ \/= /g, '/=');
+    str = str.replace(/ \*= /g, '*=');
+    str = str.replace(/ = /g, '=');
+    str = str.replace(/, /g, ',');
+    str = str.replace(/\n\n/g, '\n');
+    str = str.replace(/\n /g, '\n');
+    
+	for (var i = 0; i < str.length; i++) {
+		currentChar = str[i];
+		nextChar = str[i + 1];
+
+		if (!insideComment && currentChar === '"') {
+			var escaped = str[i - 1] === '\\' && str[i - 2] !== '\\';
+			if (!escaped) {
+				insideString = !insideString;
+			}
+		}
+
+		if (insideString) {
+			continue;
+		}
+
+		if (!insideComment && currentChar + nextChar === '//') {
+			ret += str.slice(offset, i);
+			offset = i;
+			insideComment = singleComment;
+			i++;
+		} else if (insideComment === singleComment && currentChar === '\n') {
+			insideComment = 0;
+			offset = i;
+		} else if (!insideComment && currentChar + nextChar === '/*') {
+			ret += str.slice(offset, i);
+			offset = i;
+			insideComment = multiComment;
+			i++;
+			continue;
+		} else if (insideComment === multiComment && currentChar + nextChar === '*/') {
+			i++;
+			insideComment = 0;
+			offset = i + 1;
+			continue;
+		}
+	}
+
+	return ret + (insideComment ? '' : str.substr(offset));
+}
+
+function gulpUncomment(options) {
+    return main(options, uncomment);
+}
+
+function main(options, func) {
+    return through.obj(function (file, enc, cb) {
+        if (file.isNull()) {
+            cb(null, file);
+            return;
+        }
+        if (file.isStream()) {
+            cb(new PluginError("Remove Shader Comments", "Streaming not supported."));
+        }
+        file.contents = new Buffer(func(file.contents.toString(), options));
+        this.push(file);
+        return cb();
+    });
+}
+
+module.exports = gulpUncomment;

canvas2D/gulp-srcToVariable.js

@@ -0,0 +1,68 @@
+var through = require('through2');
+var gutil = require('gulp-util');
+var PluginError = gutil.PluginError;
+var path = require('path');
+var File = gutil.File;
+
+// Consts
+const PLUGIN_NAME = 'gulp-srcToVariable';
+
+var srcToVariable = function srcToVariable(varName, asMap, namingCallback) {
+
+    var content;
+    var firstFile;
+
+    namingCallback = namingCallback || function (filename) { return filename; };
+
+    function bufferContents(file, enc, cb) {
+        // ignore empty files
+        if (file.isNull()) {
+            cb();
+            return;
+        }
+
+        // no stream support, only files.
+        if (file.isStream()) {
+            this.emit('error', new PluginError('gulp-concat', 'Streaming not supported'));
+            cb();
+            return;
+        }
+
+        // set first file if not already set
+        if (!firstFile) {
+            firstFile = file;
+        }
+
+        // construct concat instance
+        if (!content) {
+            content = "";
+        }
+        var name = namingCallback(file.relative);
+        content += varName + "['" + name + "'] = " + JSON.stringify(file.contents.toString()) + ";\r\n";
+        cb();
+    }
+
+    function endStream(cb) {
+        if (!firstFile || !content) {
+            cb();
+            return;
+        }
+
+        var joinedPath = path.join(firstFile.base, varName);
+
+        var joinedFile = new File({
+            cwd: firstFile.cwd,
+            base: firstFile.base,
+            path: joinedPath,
+            contents: new Buffer(content)
+        });
+
+        this.push(joinedFile);
+
+        cb();
+    }
+
+    return through.obj(bufferContents, endStream);
+}
+
+module.exports = srcToVariable;

canvas2D/gulpfile.js

@@ -0,0 +1,124 @@
+var gulp = require("gulp");
+var uglify = require("gulp-uglify");
+var typescript = require("gulp-typescript");
+var sourcemaps = require("gulp-sourcemaps");
+var srcToVariable = require("./gulp-srcToVariable");
+var addModuleExports = require("./gulp-addModuleExports");
+var merge2 = require("merge2");
+var concat = require("gulp-concat");
+var rename = require("gulp-rename");
+var cleants = require('gulp-clean-ts-extends');
+var changed = require('gulp-changed');
+var runSequence = require('run-sequence');
+var replace = require("gulp-replace");
+var uncommentShader = require("./gulp-removeShaderComments");
+var expect = require('gulp-expect-file');
+var optimisejs = require('gulp-optimize-js');
+
+var config = require("./config.json");
+
+var shadersStream;
+
+var extendsSearchRegex = /var\s__extends[\s\S]+?\};/g;
+var decorateSearchRegex = /var\s__decorate[\s\S]+?\};/g;
+
+//function to convert the shaders' filenames to variable names.
+function shadersName(filename) {
+    return filename.replace('.fragment', 'Pixel')
+        .replace('.vertex', 'Vertex')
+        .replace('.fx', 'Shader');
+}
+
+gulp.task("shaders", function (cb) {
+    shadersStream = config.shadersDirectories.map(function (shadersDef) {
+        return gulp.src(shadersDef.files).
+            pipe(expect.real({ errorOnFailure: true }, shadersDef.files)).
+            pipe(uncommentShader()).
+            pipe(srcToVariable("BABYLON.Effect.ShadersStore", true, shadersName)
+            );
+    });
+    cb();
+});
+
+/*
+Compiles all typescript files and creating a declaration file.
+*/
+gulp.task('typescript-compile', function () {
+    var tsResult = gulp.src(config.core.typescript).
+        pipe(typescript({
+            noExternalResolve: true,
+            target: 'ES5',
+            declarationFiles: true,
+            typescript: require('typescript'),
+            experimentalDecorators: true
+        }));
+    //If this gulp task is running on travis, file the build!
+    if (process.env.TRAVIS) {
+        var error = false;
+        tsResult.on('error', function () {
+            error = true;
+        }).on('end', function () {
+            if (error) {
+                console.log('Typescript compile failed');
+                process.exit(1);
+            }
+        });
+    }
+    return merge2([
+        tsResult.dts
+            .pipe(concat(config.build.declarationFilename))
+            .pipe(gulp.dest(config.build.outputDirectory)),
+        tsResult.js
+            .pipe(gulp.dest(config.build.srcOutputDirectory))
+    ])
+});
+
+gulp.task('typescript-sourcemaps', function () {
+    var tsResult = gulp.src(config.core.typescript)
+        .pipe(sourcemaps.init()) // sourcemaps init. currently redundant directory def, waiting for this - https://github.com/floridoo/gulp-sourcemaps/issues/111
+        .pipe(typescript({
+            noExternalResolve: true,
+            target: 'ES5',
+            declarationFiles: true,
+            typescript: require('typescript'),
+            experimentalDecorators: true
+        }));
+    return tsResult.js
+        .pipe(sourcemaps.write("./")) // sourcemaps are written.
+        .pipe(gulp.dest(config.build.srcOutputDirectory));
+});
+
+gulp.task("default", ["shaders"], function () {
+    return merge2(
+        gulp.src(config.core.files).        
+            pipe(expect.real({ errorOnFailure: true }, config.core.files)),
+        shadersStream)
+        .pipe(concat(config.build.filename))
+        .pipe(cleants())
+        .pipe(replace(extendsSearchRegex, ""))
+        .pipe(replace(decorateSearchRegex, ""))
+        .pipe(addModuleExports("BABYLON"))
+        .pipe(gulp.dest(config.build.outputDirectory))
+        .pipe(rename(config.build.minFilename))
+        .pipe(uglify())
+        .pipe(optimisejs())
+        .pipe(gulp.dest(config.build.outputDirectory));
+});
+
+gulp.task("typescript", function (cb) {
+    runSequence("typescript-compile", "default", cb);
+});
+
+/**
+ * Watch task, will call the default task if a js file is updated.
+ */
+gulp.task('watch', function () {
+    gulp.watch(config.core.typescript, ['default']);
+});
+
+/**
+ * Watch typescript task, will call the default typescript task if a typescript file is updated.
+ */
+gulp.task('watch-typescript', function () {
+    gulp.watch(config.core.typescript, ["typescript-compile", "build"]);
+});

canvas2D/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "BabylonJS",
+  "version": "2.4.0",
+  "description": "Babylon.js is a 3D engine based on webgl and javascript",
+  "main": "",
+  "repository": { "url": "https://github.com/BabylonJS/Babylon.js/" },
+  "readme": "https://github.com/BabylonJS/Babylon.js/edit/master/readme.md",
+  "license": "(Apache-2.0)",
+  "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-uglify": "~1.5.3",
+    "gulp-sourcemaps": "~1.5.2",
+    "typescript": "^1.7.5",
+    "gulp-typescript": "~2.13.0",
+    "through2": "~0.6.5",
+    "gulp-util": "~3.0.4",
+    "gulp-concat": "~2.5.2",
+    "merge2": "~0.3.5",
+    "gulp-rename": "~1.2.2",
+    "gulp-clean-ts-extends": "~0.1.1",
+    "gulp-changed": "~1.2.1",
+    "run-sequence": "~1.1.0",
+    "gulp-replace": "~0.5.3",
+    "gulp-content-to-variable": "^0.1.0",
+    "gulp-expect-file": "^0.0.7",
+    "gulp-optimize-js": "^1.0.2"
+  }
+}

canvas2D/readme.md

@@ -0,0 +1,65 @@
+Build Babylon.canvas2d.js with Gulp
+====================
+
+More info about [Canvas2D](http://doc.babylonjs.com/overviews/Canvas2D_Home)
+
+Build Babylon.canvas2d.js with [gulp](http://gulpjs.com/ "gulp") and npm ([nodejs](http://nodejs.org/ "nodejs")), easy and cross-platform
+
+(Paths in this file are relative to this file location.)
+
+# How to use it
+
+### First install gulp :
+```
+npm install -g gulp
+```
+
+### Install some dependencies :
+```
+npm install
+```
+
+### Update dependencies if necessary :
+```
+npm update
+```
+
+## From the javascript source
+### Build Babylon.canvas2d.js from the javascript files:
+
+```
+gulp
+```
+Will be generated :
+- babylon.canvas2d.js
+- babylon.canvas2d.max.js (unminified)
+
+### Build Babylon.canvas2d.js when you save a javascript file:
+```
+gulp watch
+```
+
+## From the typescript source
+### Build Babylon.canvas2d.js from the typescript files:
+
+```
+gulp typescript
+```
+Will be generated :
+- babylon.canvas2d.js
+- babylon.canvas2d.d.ts
+- babylon.canvas2d.max.js (unminified)
+
+Be aware that all js files content will be overwrite.
+
+### Build Babylon.canvas2d.js when you save a typescript file:
+```
+gulp watch-typescript
+```
+
+### Compile all the typscript files to their javascript respective files including declaration file
+```
+gulp typescript-compile
+```
+
+Be aware that all js files content will be overwritten.

canvas2D/src/Engine/babylon.bounding2d.js

@@ -0,0 +1,211 @@
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Stores 2D Bounding Information.
+     * This class handles a circle area and a bounding rectangle one.
+     */
+    var BoundingInfo2D = (function () {
+        function BoundingInfo2D() {
+            this.radius = 0;
+            this.center = BABYLON.Vector2.Zero();
+            this.extent = BABYLON.Vector2.Zero();
+        }
+        /**
+         * Create a BoundingInfo2D object from a given size
+         * @param size the size that will be used to set the extend, radius will be computed from it.
+         */
+        BoundingInfo2D.CreateFromSize = function (size) {
+            var r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromSizeToRef(size, r);
+            return r;
+        };
+        /**
+         * Create a BoundingInfo2D object from a given radius
+         * @param radius the radius to use, the extent will be computed from it.
+         */
+        BoundingInfo2D.CreateFromRadius = function (radius) {
+            var r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromRadiusToRef(radius, r);
+            return r;
+        };
+        /**
+         * Create a BoundingInfo2D object from a list of points.
+         * The resulted object will be the smallest bounding area that includes all the given points.
+         * @param points an array of points to compute the bounding object from.
+         */
+        BoundingInfo2D.CreateFromPoints = function (points) {
+            var r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromPointsToRef(points, r);
+            return r;
+        };
+        /**
+         * Update a BoundingInfo2D object using the given Size as input
+         * @param size the bounding data will be computed from this size.
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        BoundingInfo2D.CreateFromSizeToRef = function (size, b) {
+            if (!size) {
+                size = BABYLON.Size.Zero();
+            }
+            b.center.x = +size.width / 2;
+            b.center.y = +size.height / 2;
+            b.extent.x = b.center.x;
+            b.extent.y = b.center.y;
+            b.radius = b.extent.length();
+        };
+        /**
+         * Update a BoundingInfo2D object using the given radius as input
+         * @param radius the bounding data will be computed from this radius
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        BoundingInfo2D.CreateFromRadiusToRef = function (radius, b) {
+            b.center.x = b.center.y = 0;
+            var r = +radius;
+            b.extent.x = r;
+            b.extent.y = r;
+            b.radius = r;
+        };
+        /**
+         * Update a BoundingInfo2D object using the given points array as input
+         * @param points the point array to use to update the bounding data
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        BoundingInfo2D.CreateFromPointsToRef = function (points, b) {
+            var xmin = Number.MAX_VALUE, ymin = Number.MAX_VALUE, xmax = Number.MIN_VALUE, ymax = Number.MIN_VALUE;
+            for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
+                var p = points_1[_i];
+                xmin = Math.min(p.x, xmin);
+                xmax = Math.max(p.x, xmax);
+                ymin = Math.min(p.y, ymin);
+                ymax = Math.max(p.y, ymax);
+            }
+            BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, b);
+        };
+        /**
+         * Update a BoundingInfo2D object using the given min/max values as input
+         * @param xmin the smallest x coordinate
+         * @param xmax the biggest x coordinate
+         * @param ymin the smallest y coordinate
+         * @param ymax the buggest y coordinate
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        BoundingInfo2D.CreateFromMinMaxToRef = function (xmin, xmax, ymin, ymax, b) {
+            var w = xmax - xmin;
+            var h = ymax - ymin;
+            b.center = new BABYLON.Vector2(xmin + w / 2, ymin + h / 2);
+            b.extent = new BABYLON.Vector2(xmax - b.center.x, ymax - b.center.y);
+            b.radius = b.extent.length();
+        };
+        /**
+         * Duplicate this instance and return a new one
+         * @return the duplicated instance
+         */
+        BoundingInfo2D.prototype.clone = function () {
+            var r = new BoundingInfo2D();
+            r.center = this.center.clone();
+            r.radius = this.radius;
+            r.extent = this.extent.clone();
+            return r;
+        };
+        BoundingInfo2D.prototype.clear = function () {
+            this.center.copyFromFloats(0, 0);
+            this.radius = 0;
+            this.extent.copyFromFloats(0, 0);
+        };
+        BoundingInfo2D.prototype.copyFrom = function (src) {
+            this.center.copyFrom(src.center);
+            this.radius = src.radius;
+            this.extent.copyFrom(src.extent);
+        };
+        /**
+         * return the max extend of the bounding info
+         */
+        BoundingInfo2D.prototype.max = function () {
+            var r = BABYLON.Vector2.Zero();
+            this.maxToRef(r);
+            return r;
+        };
+        /**
+         * Update a vector2 with the max extend of the bounding info
+         * @param result must be a valid/allocated vector2 that will contain the result of the operation
+         */
+        BoundingInfo2D.prototype.maxToRef = function (result) {
+            result.x = this.center.x + this.extent.x;
+            result.y = this.center.y + this.extent.y;
+        };
+        /**
+         * Apply a transformation matrix to this BoundingInfo2D and return a new instance containing the result
+         * @param matrix the transformation matrix to apply
+         * @return the new instance containing the result of the transformation applied on this BoundingInfo2D
+         */
+        BoundingInfo2D.prototype.transform = function (matrix) {
+            var r = new BoundingInfo2D();
+            this.transformToRef(matrix, r);
+            return r;
+        };
+        /**
+         * Compute the union of this BoundingInfo2D with a given one, returns a new BoundingInfo2D as a result
+         * @param other the second BoundingInfo2D to compute the union with this one
+         * @return a new instance containing the result of the union
+         */
+        BoundingInfo2D.prototype.union = function (other) {
+            var r = new BoundingInfo2D();
+            this.unionToRef(other, r);
+            return r;
+        };
+        /**
+         * Transform this BoundingInfo2D with a given matrix and store the result in an existing BoundingInfo2D instance.
+         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
+         * @param matrix The matrix to use to compute the transformation
+         * @param result A VALID (i.e. allocated) BoundingInfo2D object where the result will be stored
+         */
+        BoundingInfo2D.prototype.transformToRef = function (matrix, result) {
+            // Construct a bounding box based on the extent values
+            var p = BoundingInfo2D._transform;
+            p[0].x = this.center.x + this.extent.x;
+            p[0].y = this.center.y + this.extent.y;
+            p[1].x = this.center.x + this.extent.x;
+            p[1].y = this.center.y - this.extent.y;
+            p[2].x = this.center.x - this.extent.x;
+            p[2].y = this.center.y - this.extent.y;
+            p[3].x = this.center.x - this.extent.x;
+            p[3].y = this.center.y + this.extent.y;
+            // Transform the four points of the bounding box with the matrix
+            for (var i = 0; i < 4; i++) {
+                BABYLON.Vector2.TransformToRef(p[i], matrix, p[i]);
+            }
+            BoundingInfo2D.CreateFromPointsToRef(p, result);
+        };
+        /**
+         * Compute the union of this BoundingInfo2D with another one and store the result in a third valid BoundingInfo2D object
+         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
+         * @param other the second object used to compute the union
+         * @param result a VALID BoundingInfo2D instance (i.e. allocated) where the result will be stored
+         */
+        BoundingInfo2D.prototype.unionToRef = function (other, result) {
+            var xmax = Math.max(this.center.x + this.extent.x, other.center.x + other.extent.x);
+            var ymax = Math.max(this.center.y + this.extent.y, other.center.y + other.extent.y);
+            var xmin = Math.min(this.center.x - this.extent.x, other.center.x - other.extent.x);
+            var ymin = Math.min(this.center.y - this.extent.y, other.center.y - other.extent.y);
+            BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, result);
+        };
+        /**
+         * Check if the given point is inside the BoundingInfo.
+         * The test is first made on the radius, then inside the rectangle described by the extent
+         * @param pickPosition the position to test
+         * @return true if the point is inside, false otherwise
+         */
+        BoundingInfo2D.prototype.doesIntersect = function (pickPosition) {
+            // is it inside the radius?
+            var pickLocal = pickPosition.subtract(this.center);
+            if (pickLocal.lengthSquared() <= (this.radius * this.radius)) {
+                // is it inside the rectangle?
+                return ((Math.abs(pickLocal.x) <= this.extent.x) && (Math.abs(pickLocal.y) <= this.extent.y));
+            }
+            return false;
+        };
+        BoundingInfo2D._transform = new Array(BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero());
+        return BoundingInfo2D;
+    }());
+    BABYLON.BoundingInfo2D = BoundingInfo2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.bounding2d.ts

@@ -0,0 +1,245 @@
+module BABYLON {
+
+    /**
+     * Stores 2D Bounding Information.
+     * This class handles a circle area and a bounding rectangle one.
+     */
+    export class BoundingInfo2D {
+
+        /**
+         * The coordinate of the center of the bounding info
+         */
+        public center: Vector2;
+
+        /**
+         * The radius of the bounding circle, from the center of the bounded object
+         */
+        public radius: number;
+
+        /**
+         * The extent of the bounding rectangle, from the center of the bounded object.
+         * This is an absolute value in both X and Y of the vector which describe the right/top corner of the rectangle, you can easily reconstruct the whole rectangle by negating X &| Y.
+         */
+        public extent: Vector2;
+
+        constructor() {
+            this.radius = 0;
+            this.center = Vector2.Zero();
+            this.extent = Vector2.Zero();
+        }
+
+        /**
+         * Create a BoundingInfo2D object from a given size
+         * @param size the size that will be used to set the extend, radius will be computed from it.
+         */
+        public static CreateFromSize(size: Size): BoundingInfo2D {
+            let r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromSizeToRef(size, r);
+            return r;
+        }
+
+        /**
+         * Create a BoundingInfo2D object from a given radius
+         * @param radius the radius to use, the extent will be computed from it.
+         */
+        public static CreateFromRadius(radius: number): BoundingInfo2D {
+            let r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromRadiusToRef(radius, r);
+            return r;
+        }
+
+        /**
+         * Create a BoundingInfo2D object from a list of points.
+         * The resulted object will be the smallest bounding area that includes all the given points.
+         * @param points an array of points to compute the bounding object from.
+         */
+        public static CreateFromPoints(points: Vector2[]): BoundingInfo2D {
+            let r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromPointsToRef(points, r);
+
+            return r;
+        }
+
+        /**
+         * Update a BoundingInfo2D object using the given Size as input
+         * @param size the bounding data will be computed from this size.
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        public static CreateFromSizeToRef(size: Size, b: BoundingInfo2D) {
+            if (!size) {
+                size = Size.Zero();
+            }
+            b.center.x = +size.width / 2;
+            b.center.y = +size.height / 2;
+            b.extent.x = b.center.x;
+            b.extent.y = b.center.y;
+            b.radius = b.extent.length();
+        }
+
+        /**
+         * Update a BoundingInfo2D object using the given radius as input
+         * @param radius the bounding data will be computed from this radius
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        public static CreateFromRadiusToRef(radius: number, b: BoundingInfo2D) {
+            b.center.x = b.center.y = 0;
+            let r = +radius;
+            b.extent.x = r;
+            b.extent.y = r;
+            b.radius = r;
+        }
+
+        /**
+         * Update a BoundingInfo2D object using the given points array as input
+         * @param points the point array to use to update the bounding data
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        public static CreateFromPointsToRef(points: Vector2[], b: BoundingInfo2D) {
+            let xmin = Number.MAX_VALUE, ymin = Number.MAX_VALUE, xmax = Number.MIN_VALUE, ymax = Number.MIN_VALUE;
+            for (let p of points) {
+                xmin = Math.min(p.x, xmin);
+                xmax = Math.max(p.x, xmax);
+                ymin = Math.min(p.y, ymin);
+                ymax = Math.max(p.y, ymax);
+            }
+            BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, b);
+        }
+
+        /**
+         * Update a BoundingInfo2D object using the given min/max values as input
+         * @param xmin the smallest x coordinate
+         * @param xmax the biggest x coordinate
+         * @param ymin the smallest y coordinate
+         * @param ymax the buggest y coordinate
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        public static CreateFromMinMaxToRef(xmin: number, xmax: number, ymin: number, ymax: number, b: BoundingInfo2D) {
+            let w = xmax - xmin;
+            let h = ymax - ymin;
+            b.center = new Vector2(xmin + w / 2, ymin + h / 2);
+            b.extent = new Vector2(xmax - b.center.x, ymax - b.center.y);
+            b.radius = b.extent.length();
+        }
+
+        /**
+         * Duplicate this instance and return a new one
+         * @return the duplicated instance
+         */
+        public clone(): BoundingInfo2D {
+            let r = new BoundingInfo2D();
+            r.center = this.center.clone();
+            r.radius = this.radius;
+            r.extent = this.extent.clone();
+            return r;
+        }
+
+        public clear() {
+            this.center.copyFromFloats(0, 0);
+            this.radius = 0;
+            this.extent.copyFromFloats(0, 0);
+        }
+
+        public copyFrom(src: BoundingInfo2D) {
+            this.center.copyFrom(src.center);
+            this.radius = src.radius;
+            this.extent.copyFrom(src.extent);
+        }
+
+        /**
+         * return the max extend of the bounding info
+         */
+        public max(): Vector2 {
+            let r = Vector2.Zero();
+            this.maxToRef(r);
+            return r;
+        }
+
+        /**
+         * Update a vector2 with the max extend of the bounding info
+         * @param result must be a valid/allocated vector2 that will contain the result of the operation
+         */
+        public maxToRef(result: Vector2) {
+            result.x = this.center.x + this.extent.x;
+            result.y = this.center.y + this.extent.y;
+        }
+
+        /**
+         * Apply a transformation matrix to this BoundingInfo2D and return a new instance containing the result
+         * @param matrix the transformation matrix to apply
+         * @return the new instance containing the result of the transformation applied on this BoundingInfo2D
+         */
+        public transform(matrix: Matrix): BoundingInfo2D {
+            var r = new BoundingInfo2D();
+            this.transformToRef(matrix, r);
+            return r;
+        }
+
+        /**
+         * Compute the union of this BoundingInfo2D with a given one, returns a new BoundingInfo2D as a result
+         * @param other the second BoundingInfo2D to compute the union with this one
+         * @return a new instance containing the result of the union
+         */
+        public union(other: BoundingInfo2D): BoundingInfo2D {
+            var r = new BoundingInfo2D();
+            this.unionToRef(other, r);
+            return r;
+        }
+
+        private static _transform: Array<Vector2> = new Array<Vector2>(Vector2.Zero(), Vector2.Zero(), Vector2.Zero(), Vector2.Zero());
+
+        /**
+         * Transform this BoundingInfo2D with a given matrix and store the result in an existing BoundingInfo2D instance.
+         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
+         * @param matrix The matrix to use to compute the transformation
+         * @param result A VALID (i.e. allocated) BoundingInfo2D object where the result will be stored
+         */
+        public transformToRef(matrix: Matrix, result: BoundingInfo2D) {
+            // Construct a bounding box based on the extent values
+            let p = BoundingInfo2D._transform;
+            p[0].x = this.center.x + this.extent.x;
+            p[0].y = this.center.y + this.extent.y;
+            p[1].x = this.center.x + this.extent.x;
+            p[1].y = this.center.y - this.extent.y;
+            p[2].x = this.center.x - this.extent.x;
+            p[2].y = this.center.y - this.extent.y;
+            p[3].x = this.center.x - this.extent.x;
+            p[3].y = this.center.y + this.extent.y;
+
+            // Transform the four points of the bounding box with the matrix
+            for (let i = 0; i < 4; i++) {
+                Vector2.TransformToRef(p[i], matrix, p[i]);
+            }
+            BoundingInfo2D.CreateFromPointsToRef(p, result);
+        }
+
+        /**
+         * Compute the union of this BoundingInfo2D with another one and store the result in a third valid BoundingInfo2D object
+         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
+         * @param other the second object used to compute the union
+         * @param result a VALID BoundingInfo2D instance (i.e. allocated) where the result will be stored
+         */
+        public unionToRef(other: BoundingInfo2D, result: BoundingInfo2D) {
+            let xmax = Math.max(this.center.x + this.extent.x, other.center.x + other.extent.x);
+            let ymax = Math.max(this.center.y + this.extent.y, other.center.y + other.extent.y);
+            let xmin = Math.min(this.center.x - this.extent.x, other.center.x - other.extent.x);
+            let ymin = Math.min(this.center.y - this.extent.y, other.center.y - other.extent.y);
+            BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, result);
+        }
+
+        /**
+         * Check if the given point is inside the BoundingInfo.
+         * The test is first made on the radius, then inside the rectangle described by the extent
+         * @param pickPosition the position to test
+         * @return true if the point is inside, false otherwise
+         */
+        public doesIntersect(pickPosition: Vector2): boolean {
+            // is it inside the radius?
+            let pickLocal = pickPosition.subtract(this.center);
+            if (pickLocal.lengthSquared() <= (this.radius * this.radius)) {
+                // is it inside the rectangle?
+                return ((Math.abs(pickLocal.x) <= this.extent.x) && (Math.abs(pickLocal.y) <= this.extent.y));
+            }
+            return false;
+        }
+    }
+}

canvas2D/src/Engine/babylon.brushes2d.js

@@ -0,0 +1,212 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Base class implementing the ILocable interface.
+     * The particularity of this class is to call the protected onLock() method when the instance is about to be locked for good.
+     */
+    var LockableBase = (function () {
+        function LockableBase() {
+        }
+        LockableBase.prototype.isLocked = function () {
+            return this._isLocked;
+        };
+        LockableBase.prototype.lock = function () {
+            if (this._isLocked) {
+                return true;
+            }
+            this.onLock();
+            this._isLocked = true;
+            return false;
+        };
+        /**
+         * Protected handler that will be called when the instance is about to be locked.
+         */
+        LockableBase.prototype.onLock = function () {
+        };
+        return LockableBase;
+    }());
+    BABYLON.LockableBase = LockableBase;
+    var SolidColorBrush2D = (function (_super) {
+        __extends(SolidColorBrush2D, _super);
+        function SolidColorBrush2D(color, lock) {
+            if (lock === void 0) { lock = false; }
+            _super.call(this);
+            this._color = color;
+            if (lock) {
+                {
+                    this.lock();
+                }
+            }
+        }
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
+        SolidColorBrush2D.prototype.isTransparent = function () {
+            return this._color && this._color.a < 1.0;
+        };
+        Object.defineProperty(SolidColorBrush2D.prototype, "color", {
+            /**
+             * The color used by this instance to render
+             * @returns the color object. Note that it's not a clone of the actual object stored in the instance so you MUST NOT modify it, otherwise unexpected behavior might occurs.
+             */
+            get: function () {
+                return this._color;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._color = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Return a unique identifier of the instance, which is simply the hexadecimal representation (CSS Style) of the solid color.
+         */
+        SolidColorBrush2D.prototype.toString = function () {
+            return this._color.toHexString();
+        };
+        SolidColorBrush2D = __decorate([
+            BABYLON.className("SolidColorBrush2D", "BABYLON")
+        ], SolidColorBrush2D);
+        return SolidColorBrush2D;
+    }(LockableBase));
+    BABYLON.SolidColorBrush2D = SolidColorBrush2D;
+    var GradientColorBrush2D = (function (_super) {
+        __extends(GradientColorBrush2D, _super);
+        function GradientColorBrush2D(color1, color2, translation, rotation, scale, lock) {
+            if (translation === void 0) { translation = BABYLON.Vector2.Zero(); }
+            if (rotation === void 0) { rotation = 0; }
+            if (scale === void 0) { scale = 1; }
+            if (lock === void 0) { lock = false; }
+            _super.call(this);
+            this._color1 = color1;
+            this._color2 = color2;
+            this._translation = translation;
+            this._rotation = rotation;
+            this._scale = scale;
+            if (lock) {
+                this.lock();
+            }
+        }
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
+        GradientColorBrush2D.prototype.isTransparent = function () {
+            return (this._color1 && this._color1.a < 1.0) || (this._color2 && this._color2.a < 1.0);
+        };
+        Object.defineProperty(GradientColorBrush2D.prototype, "color1", {
+            /**
+             * First color, the blend will start from this color
+             */
+            get: function () {
+                return this._color1;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._color1 = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GradientColorBrush2D.prototype, "color2", {
+            /**
+             * Second color, the blend will end to this color
+             */
+            get: function () {
+                return this._color2;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._color2 = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GradientColorBrush2D.prototype, "translation", {
+            /**
+             * Translation vector to apply on the blend
+             * Default is [0;0]
+             */
+            get: function () {
+                return this._translation;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._translation = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GradientColorBrush2D.prototype, "rotation", {
+            /**
+             * Rotation in radian to apply to the brush
+             * Default direction of the brush is vertical, you can change this using this property.
+             * Default is 0.
+             */
+            get: function () {
+                return this._rotation;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._rotation = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GradientColorBrush2D.prototype, "scale", {
+            /**
+             * Scale factor to apply to the gradient.
+             * Default is 1: no scale.
+             */
+            get: function () {
+                return this._scale;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._scale = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Return a string describing the brush
+         */
+        GradientColorBrush2D.prototype.toString = function () {
+            return "C1:" + this._color1 + ";C2:" + this._color2 + ";T:" + this._translation.toString() + ";R:" + this._rotation + ";S:" + this._scale + ";";
+        };
+        /**
+         * Build a unique key string for the given parameters
+         */
+        GradientColorBrush2D.BuildKey = function (color1, color2, translation, rotation, scale) {
+            return "C1:" + color1 + ";C2:" + color2 + ";T:" + translation.toString() + ";R:" + rotation + ";S:" + scale + ";";
+        };
+        GradientColorBrush2D = __decorate([
+            BABYLON.className("GradientColorBrush2D", "BABYLON")
+        ], GradientColorBrush2D);
+        return GradientColorBrush2D;
+    }(LockableBase));
+    BABYLON.GradientColorBrush2D = GradientColorBrush2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.brushes2d.ts

@@ -0,0 +1,242 @@
+module BABYLON {
+    /**
+     * This interface is used to implement a lockable instance pattern.
+     * Classes that implements it may be locked at any time, making their content immutable from now on.
+     * You also can query if a given instance is locked or not.
+     * This allow instances to be shared among several 'consumers'.
+     */
+    export interface ILockable {
+        /**
+         * Query the lock state
+         * @returns returns true if the object is locked and immutable, false if it's not
+         */
+        isLocked(): boolean;
+
+        /**
+         * A call to this method will definitely lock the instance, making its content immutable
+         * @returns the previous lock state of the object. so if true is returned the object  were already locked and this method does nothing, if false is returned it means the object wasn't locked and this call locked it for good.
+         */
+        lock(): boolean;
+    }
+
+    /**
+     * This interface defines the IBrush2D contract.
+     * Classes implementing a new type of Brush2D must implement this interface
+     */
+    export interface IBrush2D extends ILockable {
+        /**
+         * Define if the brush will use transparency / alpha blending
+         * @returns true if the brush use transparency
+         */
+        isTransparent(): boolean;
+
+        /**
+         * It is critical for each instance of a given Brush2D type to return a unique string that identifies it because the Border instance will certainly be part of the computed ModelKey for a given Primitive
+         * @returns A string identifier that uniquely identify the instance
+         */
+        toString(): string;
+    }
+
+    /**
+     * Base class implementing the ILocable interface.
+     * The particularity of this class is to call the protected onLock() method when the instance is about to be locked for good.
+     */
+    export class LockableBase implements ILockable {
+        isLocked(): boolean {
+            return this._isLocked;
+        }
+
+        private _isLocked: boolean;
+
+        lock(): boolean {
+            if (this._isLocked) {
+                return true;
+            }
+
+            this.onLock();
+            this._isLocked = true;
+            return false;
+        }
+
+        /**
+         * Protected handler that will be called when the instance is about to be locked.
+         */
+        protected onLock() {
+
+        }
+    }
+
+    @className("SolidColorBrush2D", "BABYLON")
+    /**
+     * This class implements a Brush that will be drawn with a uniform solid color (i.e. the same color everywhere in the content where the brush is assigned to).
+     */
+    export class SolidColorBrush2D extends LockableBase implements IBrush2D {
+        constructor(color: Color4, lock: boolean = false) {
+            super();
+            this._color = color;
+            if (lock) {
+                {
+                    this.lock();
+                }
+            }
+        }
+
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
+        isTransparent(): boolean {
+            return this._color && this._color.a < 1.0;
+        }
+
+        /**
+         * The color used by this instance to render
+         * @returns the color object. Note that it's not a clone of the actual object stored in the instance so you MUST NOT modify it, otherwise unexpected behavior might occurs.
+         */
+        public get color(): Color4 {
+            return this._color;
+        }
+
+        public set color(value: Color4) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._color = value;
+        }
+
+        /**
+         * Return a unique identifier of the instance, which is simply the hexadecimal representation (CSS Style) of the solid color.
+         */
+        public toString(): string {
+            return this._color.toHexString();
+        }
+        private _color: Color4;
+    }
+
+    @className("GradientColorBrush2D", "BABYLON")
+    /**
+     * This class implements a Gradient Color Brush, the brush color will blend from a first given color to a second one.
+     */
+    export class GradientColorBrush2D extends LockableBase implements IBrush2D {
+        constructor(color1: Color4, color2: Color4, translation: Vector2 = Vector2.Zero(), rotation: number = 0, scale: number = 1, lock: boolean = false) {
+            super();
+
+            this._color1 = color1;
+            this._color2 = color2;
+            this._translation = translation;
+            this._rotation = rotation;
+            this._scale = scale;
+
+            if (lock) {
+                this.lock();
+            }
+        }
+
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
+        isTransparent(): boolean {
+            return (this._color1 && this._color1.a < 1.0) || (this._color2 && this._color2.a < 1.0);
+        }
+
+        /**
+         * First color, the blend will start from this color
+         */
+        public get color1(): Color4 {
+            return this._color1;
+        }
+
+        public set color1(value: Color4) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._color1 = value;
+        }
+
+        /**
+         * Second color, the blend will end to this color
+         */
+        public get color2(): Color4 {
+            return this._color2;
+        }
+
+        public set color2(value: Color4) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._color2 = value;
+        }
+
+        /**
+         * Translation vector to apply on the blend
+         * Default is [0;0]
+         */
+        public get translation(): Vector2 {
+            return this._translation;
+        }
+
+        public set translation(value: Vector2) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._translation = value;
+        }
+
+        /**
+         * Rotation in radian to apply to the brush
+         * Default direction of the brush is vertical, you can change this using this property.
+         * Default is 0.
+         */
+        public get rotation(): number {
+            return this._rotation;
+        }
+
+        public set rotation(value: number) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._rotation = value;
+        }
+
+        /**
+         * Scale factor to apply to the gradient.
+         * Default is 1: no scale.
+         */
+        public get scale(): number {
+            return this._scale;
+        }
+
+        public set scale(value: number) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._scale = value;
+        }
+
+        /**
+         * Return a string describing the brush
+         */
+        public toString(): string {
+            return `C1:${this._color1};C2:${this._color2};T:${this._translation.toString()};R:${this._rotation};S:${this._scale};`;
+        }
+
+        /**
+         * Build a unique key string for the given parameters
+         */
+        public static BuildKey(color1: Color4, color2: Color4, translation: Vector2, rotation: number, scale: number) {
+            return `C1:${color1};C2:${color2};T:${translation.toString()};R:${rotation};S:${scale};`;
+        }
+
+        private _color1: Color4;
+        private _color2: Color4;
+        private _translation: Vector2;
+        private _rotation: number;
+        private _scale: number;
+    }
+
+}

canvas2D/src/Engine/babylon.canvas2dLayoutEngine.js

@@ -0,0 +1,184 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var LayoutEngineBase = (function () {
+        function LayoutEngineBase() {
+            this.layoutDirtyOnPropertyChangedMask = 0;
+        }
+        LayoutEngineBase.prototype.updateLayout = function (prim) {
+        };
+        Object.defineProperty(LayoutEngineBase.prototype, "isChildPositionAllowed", {
+            get: function () {
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        LayoutEngineBase.prototype.isLocked = function () {
+            return this._isLocked;
+        };
+        LayoutEngineBase.prototype.lock = function () {
+            if (this._isLocked) {
+                return false;
+            }
+            this._isLocked = true;
+            return true;
+        };
+        LayoutEngineBase = __decorate([
+            BABYLON.className("LayoutEngineBase", "BABYLON")
+        ], LayoutEngineBase);
+        return LayoutEngineBase;
+    }());
+    BABYLON.LayoutEngineBase = LayoutEngineBase;
+    var CanvasLayoutEngine = (function (_super) {
+        __extends(CanvasLayoutEngine, _super);
+        function CanvasLayoutEngine() {
+            _super.apply(this, arguments);
+        }
+        // A very simple (no) layout computing...
+        // The Canvas and its direct children gets the Canvas' size as Layout Area
+        // Indirect children have their Layout Area to the actualSize (margin area) of their parent
+        CanvasLayoutEngine.prototype.updateLayout = function (prim) {
+            // If this prim is layoutDiry we update  its layoutArea and also the one of its direct children
+            if (prim._isFlagSet(BABYLON.SmartPropertyPrim.flagLayoutDirty)) {
+                for (var _i = 0, _a = prim.children; _i < _a.length; _i++) {
+                    var child = _a[_i];
+                    this._doUpdate(child);
+                }
+                prim._clearFlags(BABYLON.SmartPropertyPrim.flagLayoutDirty);
+            }
+        };
+        CanvasLayoutEngine.prototype._doUpdate = function (prim) {
+            // Canvas ?
+            if (prim instanceof BABYLON.Canvas2D) {
+                prim.layoutArea = prim.actualSize;
+            }
+            else if (prim.parent instanceof BABYLON.Canvas2D) {
+                prim.layoutArea = prim.owner.actualSize;
+            }
+            else {
+                prim.layoutArea = prim.parent.contentArea;
+            }
+        };
+        Object.defineProperty(CanvasLayoutEngine.prototype, "isChildPositionAllowed", {
+            get: function () {
+                return true;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CanvasLayoutEngine.Singleton = new CanvasLayoutEngine();
+        CanvasLayoutEngine = __decorate([
+            BABYLON.className("CanvasLayoutEngine", "BABYLON")
+        ], CanvasLayoutEngine);
+        return CanvasLayoutEngine;
+    }(LayoutEngineBase));
+    BABYLON.CanvasLayoutEngine = CanvasLayoutEngine;
+    var StackPanelLayoutEngine = (function (_super) {
+        __extends(StackPanelLayoutEngine, _super);
+        function StackPanelLayoutEngine() {
+            _super.call(this);
+            this._isHorizontal = true;
+            this.layoutDirtyOnPropertyChangedMask = BABYLON.Prim2DBase.sizeProperty.flagId;
+        }
+        Object.defineProperty(StackPanelLayoutEngine, "Horizontal", {
+            get: function () {
+                if (!StackPanelLayoutEngine._horizontal) {
+                    StackPanelLayoutEngine._horizontal = new StackPanelLayoutEngine();
+                    StackPanelLayoutEngine._horizontal.isHorizontal = true;
+                    StackPanelLayoutEngine._horizontal.lock();
+                }
+                return StackPanelLayoutEngine._horizontal;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(StackPanelLayoutEngine, "Vertical", {
+            get: function () {
+                if (!StackPanelLayoutEngine._vertical) {
+                    StackPanelLayoutEngine._vertical = new StackPanelLayoutEngine();
+                    StackPanelLayoutEngine._vertical.isHorizontal = false;
+                    StackPanelLayoutEngine._vertical.lock();
+                }
+                return StackPanelLayoutEngine._vertical;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(StackPanelLayoutEngine.prototype, "isHorizontal", {
+            get: function () {
+                return this._isHorizontal;
+            },
+            set: function (val) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._isHorizontal = val;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        StackPanelLayoutEngine.prototype.updateLayout = function (prim) {
+            if (prim._isFlagSet(BABYLON.SmartPropertyPrim.flagLayoutDirty)) {
+                var x = 0;
+                var y = 0;
+                var h = this.isHorizontal;
+                var max = 0;
+                for (var _i = 0, _a = prim.children; _i < _a.length; _i++) {
+                    var child = _a[_i];
+                    var layoutArea = void 0;
+                    if (child._hasMargin) {
+                        child.margin.computeWithAlignment(prim.layoutArea, child.actualSize, child.marginAlignment, StackPanelLayoutEngine.dstOffset, StackPanelLayoutEngine.dstArea, true);
+                        layoutArea = StackPanelLayoutEngine.dstArea.clone();
+                        child.layoutArea = layoutArea;
+                    }
+                    else {
+                        layoutArea = child.layoutArea;
+                        child.margin.computeArea(child.actualSize, layoutArea);
+                    }
+                    max = Math.max(max, h ? layoutArea.height : layoutArea.width);
+                }
+                for (var _b = 0, _c = prim.children; _b < _c.length; _b++) {
+                    var child = _c[_b];
+                    child.layoutAreaPos = new BABYLON.Vector2(x, y);
+                    var layoutArea = child.layoutArea;
+                    if (h) {
+                        x += layoutArea.width;
+                        child.layoutArea = new BABYLON.Size(layoutArea.width, max);
+                    }
+                    else {
+                        y += layoutArea.height;
+                        child.layoutArea = new BABYLON.Size(max, layoutArea.height);
+                    }
+                }
+                prim._clearFlags(BABYLON.SmartPropertyPrim.flagLayoutDirty);
+            }
+        };
+        Object.defineProperty(StackPanelLayoutEngine.prototype, "isChildPositionAllowed", {
+            get: function () {
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        StackPanelLayoutEngine._horizontal = null;
+        StackPanelLayoutEngine._vertical = null;
+        StackPanelLayoutEngine.dstOffset = BABYLON.Vector2.Zero();
+        StackPanelLayoutEngine.dstArea = BABYLON.Size.Zero();
+        StackPanelLayoutEngine = __decorate([
+            BABYLON.className("StackPanelLayoutEngine", "BABYLON")
+        ], StackPanelLayoutEngine);
+        return StackPanelLayoutEngine;
+    }(LayoutEngineBase));
+    BABYLON.StackPanelLayoutEngine = StackPanelLayoutEngine;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.canvas2dLayoutEngine.ts

@@ -0,0 +1,181 @@
+module BABYLON {
+
+    @className("LayoutEngineBase", "BABYLON")
+    /**
+     * This is the base class you have to extend in order to implement your own Layout Engine.
+     * Note that for performance reason, each different Layout Engine type can be exposed as one/many singleton or must be instanced each time.
+     * If data has to be associated to a given primitive you can use the SmartPropertyPrim.addExternalData API to do it.
+     */
+    export class LayoutEngineBase implements ILockable {
+        constructor() {
+            this.layoutDirtyOnPropertyChangedMask = 0;
+        }
+
+        public updateLayout(prim: Prim2DBase) {
+        }
+
+        public get isChildPositionAllowed(): boolean {
+            return false;
+        }
+
+        isLocked(): boolean {
+            return this._isLocked;
+        }
+
+        lock(): boolean {
+            if (this._isLocked) {
+                return false;
+            }
+            this._isLocked = true;
+            return true;
+        }
+
+        public layoutDirtyOnPropertyChangedMask;
+
+        private _isLocked: boolean;
+    }
+
+    @className("CanvasLayoutEngine", "BABYLON")
+    /**
+     * The default Layout Engine, primitive are positioning into a Canvas, using their x/y coordinates.
+     * This layout must be used as a Singleton through the CanvasLayoutEngine.Singleton property.
+     */
+    export class CanvasLayoutEngine extends LayoutEngineBase {
+        public static Singleton: CanvasLayoutEngine = new CanvasLayoutEngine();
+
+        // A very simple (no) layout computing...
+        // The Canvas and its direct children gets the Canvas' size as Layout Area
+        // Indirect children have their Layout Area to the actualSize (margin area) of their parent
+        public updateLayout(prim: Prim2DBase) {
+
+            // If this prim is layoutDiry we update  its layoutArea and also the one of its direct children
+            if (prim._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
+
+                for (let child of prim.children) {
+                    this._doUpdate(child);
+                }
+                prim._clearFlags(SmartPropertyPrim.flagLayoutDirty);
+            }
+
+        }
+
+        private _doUpdate(prim: Prim2DBase) {
+            // Canvas ?
+            if (prim instanceof Canvas2D) {
+                prim.layoutArea = prim.actualSize;
+            }
+
+            // Direct child of Canvas ?
+            else if (prim.parent instanceof Canvas2D) {
+                prim.layoutArea = prim.owner.actualSize;
+            }
+
+            // Indirect child of Canvas
+            else {
+                prim.layoutArea = prim.parent.contentArea;
+            }
+        }
+
+        get isChildPositionAllowed(): boolean {
+            return true;
+        }
+    }
+
+
+    @className("StackPanelLayoutEngine", "BABYLON")
+    /**
+     * A stack panel layout. Primitive will be stack either horizontally or vertically.
+     * This Layout type must be used as a Singleton, use the StackPanelLayoutEngine.Horizontal for an horizontal stack panel or StackPanelLayoutEngine.Vertical for a vertical one.
+     */
+    export class StackPanelLayoutEngine extends LayoutEngineBase {
+        constructor() {
+            super();
+            this.layoutDirtyOnPropertyChangedMask = Prim2DBase.sizeProperty.flagId;
+        }
+
+        public static get Horizontal(): StackPanelLayoutEngine {
+            if (!StackPanelLayoutEngine._horizontal) {
+                StackPanelLayoutEngine._horizontal = new StackPanelLayoutEngine();
+                StackPanelLayoutEngine._horizontal.isHorizontal = true;
+                StackPanelLayoutEngine._horizontal.lock();
+            }
+
+            return StackPanelLayoutEngine._horizontal;
+        }
+
+        public static get Vertical(): StackPanelLayoutEngine {
+            if (!StackPanelLayoutEngine._vertical) {
+                StackPanelLayoutEngine._vertical = new StackPanelLayoutEngine();
+                StackPanelLayoutEngine._vertical.isHorizontal = false;
+                StackPanelLayoutEngine._vertical.lock();
+            }
+
+            return StackPanelLayoutEngine._vertical;
+        }
+        private static _horizontal: StackPanelLayoutEngine = null;
+        private static _vertical: StackPanelLayoutEngine = null;
+
+
+        get isHorizontal(): boolean {
+            return this._isHorizontal;
+        }
+
+        set isHorizontal(val: boolean) {
+            if (this.isLocked()) {
+                return;
+            }
+            this._isHorizontal = val;
+        }
+
+        private _isHorizontal: boolean = true;
+
+        private static dstOffset = Vector2.Zero();
+        private static dstArea = Size.Zero();
+
+        public updateLayout(prim: Prim2DBase) {
+            if (prim._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
+
+                let x = 0;
+                let y = 0;
+                let h = this.isHorizontal;
+                let max = 0;
+
+                for (let child of prim.children) {
+
+                    let layoutArea: Size;
+                    if (child._hasMargin) {
+                        child.margin.computeWithAlignment(prim.layoutArea, child.actualSize, child.marginAlignment, StackPanelLayoutEngine.dstOffset, StackPanelLayoutEngine.dstArea, true);
+                        layoutArea = StackPanelLayoutEngine.dstArea.clone();
+                        child.layoutArea = layoutArea;
+                    } else {
+                        layoutArea = child.layoutArea;
+                        child.margin.computeArea(child.actualSize, layoutArea);
+                    }
+
+                    max = Math.max(max, h ? layoutArea.height : layoutArea.width);
+
+                }
+
+                for (let child of prim.children) {
+                    child.layoutAreaPos = new Vector2(x, y);
+
+                    let layoutArea = child.layoutArea;
+
+                    if (h) {
+                        x += layoutArea.width;
+                        child.layoutArea = new Size(layoutArea.width, max);
+                    } else {
+                        y += layoutArea.height;
+                        child.layoutArea = new Size(max, layoutArea.height);
+                    }
+                }
+                prim._clearFlags(SmartPropertyPrim.flagLayoutDirty);
+            }
+
+        }
+
+        get isChildPositionAllowed(): boolean {
+            return false;
+        }
+    }
+}

canvas2D/src/Engine/babylon.ellipse2d.js

@@ -0,0 +1,355 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Ellipse2DRenderCache = (function (_super) {
+        __extends(Ellipse2DRenderCache, _super);
+        function Ellipse2DRenderCache(engine, modelKey) {
+            _super.call(this, engine, modelKey);
+            this.effectsReady = false;
+            this.fillVB = null;
+            this.fillIB = null;
+            this.fillIndicesCount = 0;
+            this.instancingFillAttributes = null;
+            this.effectFillInstanced = null;
+            this.effectFill = null;
+            this.borderVB = null;
+            this.borderIB = null;
+            this.borderIndicesCount = 0;
+            this.instancingBorderAttributes = null;
+            this.effectBorderInstanced = null;
+            this.effectBorder = null;
+        }
+        Ellipse2DRenderCache.prototype.render = function (instanceInfo, context) {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
+                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            var canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+            var depthFunction = 0;
+            if (this.effectFill && this.effectBorder) {
+                depthFunction = engine.getDepthFunction();
+                engine.setDepthFunctionToLessOrEqual();
+            }
+            var curAlphaMode = engine.getAlphaMode();
+            if (this.effectFill) {
+                var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_FILLPARTID.toString());
+                var pid = context.groupInfoPartData[partIndex];
+                if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+                }
+                var effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingFillAttributes) {
+                        this.instancingFillAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_FILLPARTID, effect);
+                    }
+                    var glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
+                    engine.draw(true, 0, this.fillIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                }
+                else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.fillIndicesCount);
+                    }
+                }
+            }
+            if (this.effectBorder) {
+                var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_BORDERPARTID.toString());
+                var pid = context.groupInfoPartData[partIndex];
+                if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+                }
+                var effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingBorderAttributes) {
+                        this.instancingBorderAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, effect);
+                    }
+                    var glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
+                    engine.draw(true, 0, this.borderIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                }
+                else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.borderIndicesCount);
+                    }
+                }
+            }
+            engine.setAlphaMode(curAlphaMode, true);
+            if (this.effectFill && this.effectBorder) {
+                engine.setDepthFunction(depthFunction);
+            }
+            return true;
+        };
+        Ellipse2DRenderCache.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.fillVB) {
+                this._engine._releaseBuffer(this.fillVB);
+                this.fillVB = null;
+            }
+            if (this.fillIB) {
+                this._engine._releaseBuffer(this.fillIB);
+                this.fillIB = null;
+            }
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+            if (this.borderVB) {
+                this._engine._releaseBuffer(this.borderVB);
+                this.borderVB = null;
+            }
+            if (this.borderIB) {
+                this._engine._releaseBuffer(this.borderIB);
+                this.borderIB = null;
+            }
+            return true;
+        };
+        return Ellipse2DRenderCache;
+    }(BABYLON.ModelRenderCache));
+    BABYLON.Ellipse2DRenderCache = Ellipse2DRenderCache;
+    var Ellipse2DInstanceData = (function (_super) {
+        __extends(Ellipse2DInstanceData, _super);
+        function Ellipse2DInstanceData(partId) {
+            _super.call(this, partId, 1);
+        }
+        Object.defineProperty(Ellipse2DInstanceData.prototype, "properties", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData()
+        ], Ellipse2DInstanceData.prototype, "properties", null);
+        return Ellipse2DInstanceData;
+    }(BABYLON.Shape2DInstanceData));
+    BABYLON.Ellipse2DInstanceData = Ellipse2DInstanceData;
+    var Ellipse2D = (function (_super) {
+        __extends(Ellipse2D, _super);
+        /**
+         * Create an Ellipse 2D Shape primitive
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id: a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - size: the size of the group. Alternatively the width and height properties can be set. Default will be [10;10].
+         * - subdivision: the number of subdivision to create the ellipse perimeter, default is 64.
+         * - fill: the brush used to draw the fill content of the ellipse, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - border: the brush used to draw the border of the ellipse, you can set null to draw nothing (but you will have to set a fill brush), default is null. can be a string value (see Canvas2D.GetBrushFromString)
+         * - borderThickness: the thickness of the drawn border, default is 1.
+         * - isVisible: true if the group must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        function Ellipse2D(settings) {
+            // Avoid checking every time if the object exists
+            if (settings == null) {
+                settings = {};
+            }
+            _super.call(this, settings);
+            if (settings.size != null) {
+                this.size = settings.size;
+            }
+            else if (settings.width || settings.height) {
+                var size = new BABYLON.Size(settings.width, settings.height);
+                this.size = size;
+            }
+            var sub = (settings.subdivisions == null) ? 64 : settings.subdivisions;
+            this.subdivisions = sub;
+        }
+        Object.defineProperty(Ellipse2D.prototype, "actualSize", {
+            get: function () {
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
+                return this.size;
+            },
+            set: function (value) {
+                this._actualSize = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Ellipse2D.prototype, "subdivisions", {
+            get: function () {
+                return this._subdivisions;
+            },
+            set: function (value) {
+                this._subdivisions = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Ellipse2D.prototype.levelIntersect = function (intersectInfo) {
+            var w = this.size.width / 2;
+            var h = this.size.height / 2;
+            var x = intersectInfo._localPickPosition.x - w;
+            var y = intersectInfo._localPickPosition.y - h;
+            return ((x * x) / (w * w) + (y * y) / (h * h)) <= 1;
+        };
+        Ellipse2D.prototype.updateLevelBoundingInfo = function () {
+            BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        };
+        Ellipse2D.prototype.createModelRenderCache = function (modelKey) {
+            var renderCache = new Ellipse2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        };
+        Ellipse2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+            var renderCache = modelRenderCache;
+            var engine = this.owner.engine;
+            // Need to create WebGL resources for fill part?
+            if (this.fill) {
+                var vbSize = this.subdivisions + 1;
+                var vb = new Float32Array(vbSize);
+                for (var i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.fillVB = engine.createVertexBuffer(vb);
+                var triCount = vbSize - 1;
+                var ib = new Float32Array(triCount * 3);
+                for (var i = 0; i < triCount; i++) {
+                    ib[i * 3 + 0] = 0;
+                    ib[i * 3 + 2] = i + 1;
+                    ib[i * 3 + 1] = i + 2;
+                }
+                ib[triCount * 3 - 2] = 1;
+                renderCache.fillIB = engine.createIndexBuffer(ib);
+                renderCache.fillIndicesCount = triCount * 3;
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectFillInstanced = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
+                renderCache.effectFill = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+            // Need to create WebGL resource for border part?
+            if (this.border) {
+                var vbSize = this.subdivisions * 2;
+                var vb = new Float32Array(vbSize);
+                for (var i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.borderVB = engine.createVertexBuffer(vb);
+                var triCount = vbSize;
+                var rs = triCount / 2;
+                var ib = new Float32Array(triCount * 3);
+                for (var i = 0; i < rs; i++) {
+                    var r0 = i;
+                    var r1 = (i + 1) % rs;
+                    ib[i * 6 + 0] = rs + r1;
+                    ib[i * 6 + 1] = rs + r0;
+                    ib[i * 6 + 2] = r0;
+                    ib[i * 6 + 3] = r1;
+                    ib[i * 6 + 4] = rs + r1;
+                    ib[i * 6 + 5] = r0;
+                }
+                renderCache.borderIB = engine.createIndexBuffer(ib);
+                renderCache.borderIndicesCount = (triCount * 3);
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectBorderInstanced = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
+                renderCache.effectBorder = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+            return renderCache;
+        };
+        Ellipse2D.prototype.createInstanceDataParts = function () {
+            var res = new Array();
+            if (this.border) {
+                res.push(new Ellipse2DInstanceData(BABYLON.Shape2D.SHAPE2D_BORDERPARTID));
+            }
+            if (this.fill) {
+                res.push(new Ellipse2DInstanceData(BABYLON.Shape2D.SHAPE2D_FILLPARTID));
+            }
+            return res;
+        };
+        Ellipse2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            if (part.id === BABYLON.Shape2D.SHAPE2D_BORDERPARTID) {
+                var d = part;
+                var size = this.actualSize;
+                var s = this.actualScale;
+                d.properties = new BABYLON.Vector3(size.width * s.x, size.height * s.y, this.subdivisions);
+            }
+            else if (part.id === BABYLON.Shape2D.SHAPE2D_FILLPARTID) {
+                var d = part;
+                var size = this.actualSize;
+                var s = this.actualScale;
+                d.properties = new BABYLON.Vector3(size.width * s.x, size.height * s.y, this.subdivisions);
+            }
+            return true;
+        };
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 1, function (pi) { return Ellipse2D.acutalSizeProperty = pi; }, false, true)
+        ], Ellipse2D.prototype, "actualSize", null);
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 2, function (pi) { return Ellipse2D.subdivisionsProperty = pi; })
+        ], Ellipse2D.prototype, "subdivisions", null);
+        Ellipse2D = __decorate([
+            BABYLON.className("Ellipse2D", "BABYLON")
+        ], Ellipse2D);
+        return Ellipse2D;
+    }(BABYLON.Shape2D));
+    BABYLON.Ellipse2D = Ellipse2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.ellipse2d.ts

@@ -0,0 +1,422 @@
+module BABYLON {
+    export class Ellipse2DRenderCache extends ModelRenderCache {
+        effectsReady: boolean                               = false;
+        fillVB: WebGLBuffer                                 = null;
+        fillIB: WebGLBuffer                                 = null;
+        fillIndicesCount: number                            = 0;
+        instancingFillAttributes: InstancingAttributeInfo[] = null;
+        effectFillInstanced: Effect                         = null;
+        effectFill: Effect                                  = null;
+
+        borderVB: WebGLBuffer                                 = null;
+        borderIB: WebGLBuffer                                 = null;
+        borderIndicesCount: number                            = 0;
+        instancingBorderAttributes: InstancingAttributeInfo[] = null;
+        effectBorderInstanced: Effect                         = null;
+        effectBorder: Effect                                  = null;
+
+        constructor(engine: Engine, modelKey: string) {
+            super(engine, modelKey);
+        }
+
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
+                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+
+            let canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+
+            let depthFunction = 0;
+            if (this.effectFill && this.effectBorder) {
+                depthFunction = engine.getDepthFunction();
+                engine.setDepthFunctionToLessOrEqual();
+            }
+
+            let curAlphaMode = engine.getAlphaMode();
+
+            if (this.effectFill) {
+                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_FILLPARTID.toString());
+                let pid = context.groupInfoPartData[partIndex];
+
+                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+                }
+
+                let effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
+
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingFillAttributes) {
+                        this.instancingFillAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_FILLPARTID, effect);
+                    }
+
+                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
+                    engine.draw(true, 0, this.fillIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                } else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.fillIndicesCount);                        
+                    }
+                }
+            }
+
+            if (this.effectBorder) {
+                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_BORDERPARTID.toString());
+                let pid = context.groupInfoPartData[partIndex];
+
+                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+                }
+
+                let effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
+
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingBorderAttributes) {
+                        this.instancingBorderAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_BORDERPARTID, effect);
+                    }
+
+                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
+                    engine.draw(true, 0, this.borderIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                } else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.borderIndicesCount);
+                    }
+                }
+            }
+
+            engine.setAlphaMode(curAlphaMode, true);
+
+            if (this.effectFill && this.effectBorder) {
+                engine.setDepthFunction(depthFunction);
+            }
+            return true;
+        }
+
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.fillVB) {
+                this._engine._releaseBuffer(this.fillVB);
+                this.fillVB = null;
+            }
+
+            if (this.fillIB) {
+                this._engine._releaseBuffer(this.fillIB);
+                this.fillIB = null;
+            }
+
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+
+            if (this.borderVB) {
+                this._engine._releaseBuffer(this.borderVB);
+                this.borderVB = null;
+            }
+
+            if (this.borderIB) {
+                this._engine._releaseBuffer(this.borderIB);
+                this.borderIB = null;
+            }
+
+            return true;
+        }
+    }
+
+    export class Ellipse2DInstanceData extends Shape2DInstanceData {
+        constructor(partId: number) {
+            super(partId, 1);
+        }
+
+        @instanceData()
+        get properties(): Vector3 {
+            return null;
+        }
+        set properties(value: Vector3) {
+        }
+    }
+
+    @className("Ellipse2D", "BABYLON")
+    /**
+     * Ellipse Primitive class
+     */
+    export class Ellipse2D extends Shape2D {
+
+        public static acutalSizeProperty: Prim2DPropInfo;
+        public static subdivisionsProperty: Prim2DPropInfo;
+
+        @instanceLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 1, pi => Ellipse2D.acutalSizeProperty = pi, false, true)
+        /**
+         * Get/Set the size of the ellipse
+         */
+        public get actualSize(): Size {
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+            return this.size;
+        }
+
+        public set actualSize(value: Size) {
+            this._actualSize = value;
+        }
+
+        @modelLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 2, pi => Ellipse2D.subdivisionsProperty = pi)
+        /**
+         * Get/set the number of subdivisions used to draw the ellipsis. Default is 64.
+         */
+        public get subdivisions(): number {
+            return this._subdivisions;
+        }
+
+        public set subdivisions(value: number) {
+            this._subdivisions = value;
+        }
+
+        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
+            let w = this.size.width / 2;
+            let h = this.size.height / 2;
+            let x = intersectInfo._localPickPosition.x-w;
+            let y = intersectInfo._localPickPosition.y-h;
+            return ((x * x) / (w * w) + (y * y) / (h * h)) <= 1;
+        }
+
+        protected updateLevelBoundingInfo() {
+            BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        }
+
+        /**
+         * Create an Ellipse 2D Shape primitive
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children 
+         * - id: a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - size: the size of the group. Alternatively the width and height properties can be set. Default will be [10;10].
+         * - subdivision: the number of subdivision to create the ellipse perimeter, default is 64.
+         * - fill: the brush used to draw the fill content of the ellipse, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - border: the brush used to draw the border of the ellipse, you can set null to draw nothing (but you will have to set a fill brush), default is null. can be a string value (see Canvas2D.GetBrushFromString)
+         * - borderThickness: the thickness of the drawn border, default is 1.
+         * - isVisible: true if the group must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        constructor(settings?: {
+
+            parent                ?: Prim2DBase, 
+            children              ?: Array<Prim2DBase>,
+            id                    ?: string,
+            position              ?: Vector2,
+            x                     ?: number,
+            y                     ?: number,
+            rotation              ?: number,
+            scale                 ?: number,
+            scaleX                ?: number,
+            scaleY                ?: number,
+            dontInheritParentScale?: boolean,
+            opacity               ?: number,
+            zOrder                ?: number, 
+            origin                ?: Vector2,
+            size                  ?: Size,
+            width                 ?: number,
+            height                ?: number,
+            subdivisions          ?: number,
+            fill                  ?: IBrush2D | string,
+            border                ?: IBrush2D | string,
+            borderThickness       ?: number,
+            isVisible             ?: boolean,
+            isPickable            ?: boolean,
+            isContainer           ?: boolean,
+            childrenFlatZOrder    ?: boolean,
+            marginTop             ?: number | string,
+            marginLeft            ?: number | string,
+            marginRight           ?: number | string,
+            marginBottom          ?: number | string,
+            margin                ?: number | string,
+            marginHAlignment      ?: number,
+            marginVAlignment      ?: number,
+            marginAlignment       ?: string,
+            paddingTop            ?: number | string,
+            paddingLeft           ?: number | string,
+            paddingRight          ?: number | string,
+            paddingBottom         ?: number | string,
+            padding               ?: string,
+        }) {
+
+            // Avoid checking every time if the object exists
+            if (settings == null) {
+                settings = {};
+            }
+
+            super(settings);
+
+            if (settings.size != null) {
+                this.size = settings.size;
+            }
+            else if (settings.width || settings.height) {
+                let size = new Size(settings.width, settings.height);
+                this.size = size;
+            }
+
+            let sub  = (settings.subdivisions == null) ? 64 : settings.subdivisions;
+            this.subdivisions = sub;
+        }
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            let renderCache = new Ellipse2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+            let renderCache = <Ellipse2DRenderCache>modelRenderCache;
+            let engine = this.owner.engine;
+
+            // Need to create WebGL resources for fill part?
+            if (this.fill) {
+                let vbSize = this.subdivisions + 1;
+                let vb = new Float32Array(vbSize);
+                for (let i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.fillVB = engine.createVertexBuffer(vb);
+
+                let triCount = vbSize - 1;
+                let ib = new Float32Array(triCount * 3);
+                for (let i = 0; i < triCount; i++) {
+                    ib[i * 3 + 0] = 0;
+                    ib[i * 3 + 2] = i + 1;
+                    ib[i * 3 + 1] = i + 2;
+                }
+                ib[triCount * 3 - 2] = 1;
+
+                renderCache.fillIB = engine.createIndexBuffer(ib);
+                renderCache.fillIndicesCount = triCount * 3;
+
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectFillInstanced = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
+                renderCache.effectFill = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+
+            // Need to create WebGL resource for border part?
+            if (this.border) {
+                let vbSize = this.subdivisions * 2;
+                let vb = new Float32Array(vbSize);
+                for (let i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.borderVB = engine.createVertexBuffer(vb);
+
+                let triCount = vbSize;
+                let rs = triCount / 2;
+                let ib = new Float32Array(triCount * 3);
+                for (let i = 0; i < rs; i++) {
+                    let r0 = i;
+                    let r1 = (i + 1) % rs;
+
+                    ib[i * 6 + 0] = rs + r1;
+                    ib[i * 6 + 1] = rs + r0;
+                    ib[i * 6 + 2] = r0;
+
+                    ib[i * 6 + 3] = r1;
+                    ib[i * 6 + 4] = rs + r1;
+                    ib[i * 6 + 5] = r0;
+                }
+
+                renderCache.borderIB = engine.createIndexBuffer(ib);
+                renderCache.borderIndicesCount = (triCount* 3);
+
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectBorderInstanced = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
+                renderCache.effectBorder = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+
+            return renderCache;
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            var res = new Array<InstanceDataBase>();
+            if (this.border) {
+                res.push(new Ellipse2DInstanceData(Shape2D.SHAPE2D_BORDERPARTID));
+            }
+            if (this.fill) {
+                res.push(new Ellipse2DInstanceData(Shape2D.SHAPE2D_FILLPARTID));
+            }
+            return res;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+            if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                let d = <Ellipse2DInstanceData>part;
+                let size = this.actualSize;
+                let s = this.actualScale;
+                d.properties = new Vector3(size.width * s.x, size.height * s.y, this.subdivisions);
+            }
+            else if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
+                let d = <Ellipse2DInstanceData>part;
+                let size = this.actualSize;
+                let s = this.actualScale;
+                d.properties = new Vector3(size.width * s.x, size.height * s.y, this.subdivisions);
+            }
+            return true;
+        }
+
+        private _subdivisions: number;
+    }
+}

canvas2D/src/Engine/babylon.modelRenderCache.js

@@ -0,0 +1,321 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var BABYLON;
+(function (BABYLON) {
+    var GroupInstanceInfo = (function () {
+        function GroupInstanceInfo(owner, mrc, partCount) {
+            this._partCount = partCount;
+            this.owner = owner;
+            this.modelRenderCache = mrc;
+            this.modelRenderCache.addRef();
+            this.partIndexFromId = new BABYLON.StringDictionary();
+            this._usedShaderCategories = new Array(partCount);
+            this._strides = new Array(partCount);
+            this._opaqueData = null;
+            this._alphaTestData = null;
+            this._transparentData = null;
+            this.opaqueDirty = this.alphaTestDirty = this.transparentDirty = this.transparentOrderDirty = false;
+        }
+        GroupInstanceInfo.prototype.dispose = function () {
+            if (this._isDisposed) {
+                return false;
+            }
+            if (this.modelRenderCache) {
+                this.modelRenderCache.dispose();
+                this.modelRenderCache = null;
+            }
+            var engine = this.owner.owner.engine;
+            if (this._opaqueData) {
+                this._opaqueData.forEach(function (d) { return d.dispose(engine); });
+                this._opaqueData = null;
+            }
+            if (this._alphaTestData) {
+                this._alphaTestData.forEach(function (d) { return d.dispose(engine); });
+                this._alphaTestData = null;
+            }
+            if (this._transparentData) {
+                this._transparentData.forEach(function (d) { return d.dispose(engine); });
+                this._transparentData = null;
+            }
+            this.partIndexFromId = null;
+            this._isDisposed = true;
+            return true;
+        };
+        Object.defineProperty(GroupInstanceInfo.prototype, "hasOpaqueData", {
+            get: function () {
+                return this._opaqueData != null;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "hasAlphaTestData", {
+            get: function () {
+                return this._alphaTestData != null;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "hasTransparentData", {
+            get: function () {
+                return this._transparentData != null;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "opaqueData", {
+            get: function () {
+                if (!this._opaqueData) {
+                    this._opaqueData = new Array(this._partCount);
+                    for (var i = 0; i < this._partCount; i++) {
+                        this._opaqueData[i] = new GroupInfoPartData(this._strides[i]);
+                    }
+                }
+                return this._opaqueData;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "alphaTestData", {
+            get: function () {
+                if (!this._alphaTestData) {
+                    this._alphaTestData = new Array(this._partCount);
+                    for (var i = 0; i < this._partCount; i++) {
+                        this._alphaTestData[i] = new GroupInfoPartData(this._strides[i]);
+                    }
+                }
+                return this._alphaTestData;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "transparentData", {
+            get: function () {
+                if (!this._transparentData) {
+                    this._transparentData = new Array(this._partCount);
+                    for (var i = 0; i < this._partCount; i++) {
+                        var zoff = this.modelRenderCache._partData[i]._zBiasOffset;
+                        this._transparentData[i] = new TransparentGroupInfoPartData(this._strides[i], zoff);
+                    }
+                }
+                return this._transparentData;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        GroupInstanceInfo.prototype.sortTransparentData = function () {
+            if (!this.transparentOrderDirty) {
+                return;
+            }
+            for (var i = 0; i < this._transparentData.length; i++) {
+                var td = this._transparentData[i];
+                td._partData.sort();
+            }
+            this.transparentOrderDirty = false;
+        };
+        Object.defineProperty(GroupInstanceInfo.prototype, "usedShaderCategories", {
+            get: function () {
+                return this._usedShaderCategories;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "strides", {
+            get: function () {
+                return this._strides;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return GroupInstanceInfo;
+    }());
+    BABYLON.GroupInstanceInfo = GroupInstanceInfo;
+    var TransparentSegment = (function () {
+        function TransparentSegment() {
+            this.groupInsanceInfo = null;
+            this.startZ = 0;
+            this.endZ = 0;
+            this.startDataIndex = BABYLON.Prim2DBase._bigInt;
+            this.endDataIndex = 0;
+            this.partBuffers = null;
+        }
+        TransparentSegment.prototype.dispose = function (engine) {
+            if (this.partBuffers) {
+                this.partBuffers.forEach(function (b) { return engine._releaseBuffer(b); });
+                this.partBuffers.splice(0);
+                this.partBuffers = null;
+            }
+        };
+        return TransparentSegment;
+    }());
+    BABYLON.TransparentSegment = TransparentSegment;
+    var GroupInfoPartData = (function () {
+        function GroupInfoPartData(stride) {
+            this._partData = null;
+            this._partBuffer = null;
+            this._partBufferSize = 0;
+            this._partData = new BABYLON.DynamicFloatArray(stride / 4, 50);
+            this._isDisposed = false;
+        }
+        GroupInfoPartData.prototype.dispose = function (engine) {
+            if (this._isDisposed) {
+                return false;
+            }
+            if (this._partBuffer) {
+                engine._releaseBuffer(this._partBuffer);
+                this._partBuffer = null;
+            }
+            this._partData = null;
+            this._isDisposed = true;
+        };
+        return GroupInfoPartData;
+    }());
+    BABYLON.GroupInfoPartData = GroupInfoPartData;
+    var TransparentGroupInfoPartData = (function (_super) {
+        __extends(TransparentGroupInfoPartData, _super);
+        function TransparentGroupInfoPartData(stride, zoff) {
+            _super.call(this, stride);
+            this._partData.compareValueOffset = zoff;
+            this._partData.sortingAscending = false;
+        }
+        return TransparentGroupInfoPartData;
+    }(GroupInfoPartData));
+    BABYLON.TransparentGroupInfoPartData = TransparentGroupInfoPartData;
+    var ModelRenderCache = (function () {
+        function ModelRenderCache(engine, modelKey) {
+            this._engine = engine;
+            this._modelKey = modelKey;
+            this._nextKey = 1;
+            this._refCounter = 1;
+            this._partData = null;
+        }
+        ModelRenderCache.prototype.dispose = function () {
+            if (--this._refCounter !== 0) {
+                return false;
+            }
+            // Remove the Model Render Cache from the global dictionary
+            var edata = this._engine.getExternalData("__BJSCANVAS2D__");
+            if (edata) {
+                edata.DisposeModelRenderCache(this);
+            }
+            return true;
+        };
+        Object.defineProperty(ModelRenderCache.prototype, "isDisposed", {
+            get: function () {
+                return this._refCounter <= 0;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ModelRenderCache.prototype.addRef = function () {
+            return ++this._refCounter;
+        };
+        Object.defineProperty(ModelRenderCache.prototype, "modelKey", {
+            get: function () {
+                return this._modelKey;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Render the model instances
+         * @param instanceInfo
+         * @param context
+         * @return must return true is the rendering succeed, false if the rendering couldn't be done (asset's not yet ready, like Effect)
+         */
+        ModelRenderCache.prototype.render = function (instanceInfo, context) {
+            return true;
+        };
+        ModelRenderCache.prototype.getPartIndexFromId = function (partId) {
+            for (var i = 0; i < this._partData.length; i++) {
+                if (this._partData[i]._partId === partId) {
+                    return i;
+                }
+            }
+            return null;
+        };
+        ModelRenderCache.prototype.loadInstancingAttributes = function (partId, effect) {
+            var i = this.getPartIndexFromId(partId);
+            if (i === null) {
+                return null;
+            }
+            var ci = this._partsClassInfo[i];
+            var categories = this._partData[i]._partUsedCategories;
+            var res = ci.classContent.getInstancingAttributeInfos(effect, categories);
+            return res;
+        };
+        ModelRenderCache.prototype.setupUniforms = function (effect, partIndex, data, elementCount) {
+            var pd = this._partData[partIndex];
+            var offset = (pd._partDataStride / 4) * elementCount;
+            var pci = this._partsClassInfo[partIndex];
+            var self = this;
+            pci.fullContent.forEach(function (k, v) {
+                if (!v.category || pd._partUsedCategories.indexOf(v.category) !== -1) {
+                    switch (v.dataType) {
+                        case 4 /* float */:
+                            {
+                                var attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                                effect.setFloat(v.attributeName, data.buffer[offset + attribOffset]);
+                                break;
+                            }
+                        case 0 /* Vector2 */:
+                            {
+                                var attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                                ModelRenderCache.v2.x = data.buffer[offset + attribOffset + 0];
+                                ModelRenderCache.v2.y = data.buffer[offset + attribOffset + 1];
+                                effect.setVector2(v.attributeName, ModelRenderCache.v2);
+                                break;
+                            }
+                        case 5 /* Color3 */:
+                        case 1 /* Vector3 */:
+                            {
+                                var attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                                ModelRenderCache.v3.x = data.buffer[offset + attribOffset + 0];
+                                ModelRenderCache.v3.y = data.buffer[offset + attribOffset + 1];
+                                ModelRenderCache.v3.z = data.buffer[offset + attribOffset + 2];
+                                effect.setVector3(v.attributeName, ModelRenderCache.v3);
+                                break;
+                            }
+                        case 6 /* Color4 */:
+                        case 2 /* Vector4 */:
+                            {
+                                var attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                                ModelRenderCache.v4.x = data.buffer[offset + attribOffset + 0];
+                                ModelRenderCache.v4.y = data.buffer[offset + attribOffset + 1];
+                                ModelRenderCache.v4.z = data.buffer[offset + attribOffset + 2];
+                                ModelRenderCache.v4.w = data.buffer[offset + attribOffset + 3];
+                                effect.setVector4(v.attributeName, ModelRenderCache.v4);
+                                break;
+                            }
+                        default:
+                    }
+                }
+            });
+        };
+        //setupUniformsLocation(effect: Effect, uniforms: string[], partId: number) {
+        //    let i = this.getPartIndexFromId(partId);
+        //    if (i === null) {
+        //        return null;
+        //    }
+        //    let pci = this._partsClassInfo[i];
+        //    pci.fullContent.forEach((k, v) => {
+        //        if (uniforms.indexOf(v.attributeName) !== -1) {
+        //            v.uniformLocation = effect.getUniform(v.attributeName);
+        //        }
+        //    });
+        //}
+        ModelRenderCache.v2 = BABYLON.Vector2.Zero();
+        ModelRenderCache.v3 = BABYLON.Vector3.Zero();
+        ModelRenderCache.v4 = BABYLON.Vector4.Zero();
+        return ModelRenderCache;
+    }());
+    BABYLON.ModelRenderCache = ModelRenderCache;
+    var ModelRenderCachePartData = (function () {
+        function ModelRenderCachePartData() {
+        }
+        return ModelRenderCachePartData;
+    }());
+    BABYLON.ModelRenderCachePartData = ModelRenderCachePartData;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.modelRenderCache.ts

@@ -0,0 +1,350 @@
+module BABYLON {
+    export const enum ShaderDataType {
+        Vector2, Vector3, Vector4, Matrix, float, Color3, Color4, Size
+    }
+
+    export class GroupInstanceInfo {
+        constructor(owner: Group2D, mrc: ModelRenderCache, partCount: number) {
+            this._partCount = partCount;
+            this.owner = owner;
+            this.modelRenderCache = mrc;
+            this.modelRenderCache.addRef();
+            this.partIndexFromId = new StringDictionary<number>();
+            this._usedShaderCategories = new Array<string>(partCount);
+            this._strides = new Array<number>(partCount);
+            this._opaqueData = null;
+            this._alphaTestData = null;
+            this._transparentData = null;
+            this.opaqueDirty = this.alphaTestDirty = this.transparentDirty = this.transparentOrderDirty = false;
+        }
+
+        public dispose(): boolean {
+            if (this._isDisposed) {
+                return false;
+            }
+
+            if (this.modelRenderCache) {
+                this.modelRenderCache.dispose();
+                this.modelRenderCache = null;
+            }
+
+            let engine = this.owner.owner.engine;
+
+            if (this._opaqueData) {
+                this._opaqueData.forEach(d => d.dispose(engine));
+                this._opaqueData = null;
+            }
+
+            if (this._alphaTestData) {
+                this._alphaTestData.forEach(d => d.dispose(engine));
+                this._alphaTestData = null;
+            }
+
+            if (this._transparentData) {
+                this._transparentData.forEach(d => d.dispose(engine));
+                this._transparentData = null;
+            }
+
+            this.partIndexFromId = null;
+            this._isDisposed = true;
+            return true;
+        }
+
+        private _isDisposed: boolean;
+        owner: Group2D;
+
+        modelRenderCache: ModelRenderCache;
+        partIndexFromId: StringDictionary<number>;
+
+        get hasOpaqueData(): boolean {
+            return this._opaqueData != null;
+        }
+
+        get hasAlphaTestData(): boolean {
+            return this._alphaTestData != null;
+        }
+
+        get hasTransparentData(): boolean {
+            return this._transparentData != null;
+        }
+
+        opaqueDirty: boolean;
+        get opaqueData(): GroupInfoPartData[] {
+            if (!this._opaqueData) {
+                this._opaqueData = new Array<GroupInfoPartData>(this._partCount);
+                for (let i = 0; i < this._partCount; i++) {
+                    this._opaqueData[i] = new GroupInfoPartData(this._strides[i]);
+                }
+            }
+            return this._opaqueData;
+        }
+
+        alphaTestDirty: boolean;
+        get alphaTestData(): GroupInfoPartData[] {
+            if (!this._alphaTestData) {
+                this._alphaTestData = new Array<GroupInfoPartData>(this._partCount);
+                for (let i = 0; i < this._partCount; i++) {
+                    this._alphaTestData[i] = new GroupInfoPartData(this._strides[i]);
+                }
+            }
+            return this._alphaTestData;
+        }
+
+        transparentOrderDirty: boolean;
+        transparentDirty: boolean;
+        get transparentData(): TransparentGroupInfoPartData[] {
+            if (!this._transparentData) {
+                this._transparentData = new Array<TransparentGroupInfoPartData>(this._partCount);
+                for (let i = 0; i < this._partCount; i++) {
+                    let zoff = this.modelRenderCache._partData[i]._zBiasOffset;
+                    this._transparentData[i] = new TransparentGroupInfoPartData(this._strides[i], zoff);
+                }
+            }
+            return this._transparentData;
+        }
+
+        sortTransparentData() {
+            if (!this.transparentOrderDirty) {
+                return;
+            }
+
+            for (let i = 0; i < this._transparentData.length; i++) {
+                let td = this._transparentData[i];
+                td._partData.sort();
+
+            }
+
+            this.transparentOrderDirty = false;
+        }
+
+        get usedShaderCategories(): string[] {
+            return this._usedShaderCategories;
+        }
+
+        get strides(): number[] {
+            return this._strides;
+        }
+
+        private _partCount: number;
+        private _strides: number[];
+        private _usedShaderCategories: string[];
+        private _opaqueData: GroupInfoPartData[];
+        private _alphaTestData: GroupInfoPartData[];
+        private _transparentData: TransparentGroupInfoPartData[];
+    }
+
+    export class TransparentSegment {
+        constructor() {
+            this.groupInsanceInfo = null;
+            this.startZ = 0;
+            this.endZ = 0;
+            this.startDataIndex = Prim2DBase._bigInt;
+            this.endDataIndex = 0;
+            this.partBuffers = null;
+        }
+
+        dispose(engine: Engine) {
+            if (this.partBuffers) {
+                this.partBuffers.forEach(b => engine._releaseBuffer(b));
+                this.partBuffers.splice(0);
+                this.partBuffers = null;
+            }
+        }
+
+        groupInsanceInfo: GroupInstanceInfo;
+        startZ: number;
+        endZ: number;
+        startDataIndex: number;
+        endDataIndex: number;
+        partBuffers: WebGLBuffer[];
+    }
+
+    export class GroupInfoPartData {
+        _partData: DynamicFloatArray = null;
+        _partBuffer: WebGLBuffer     = null;
+        _partBufferSize: number      = 0;
+
+        constructor(stride: number) {
+            this._partData = new DynamicFloatArray(stride/4, 50);
+            this._isDisposed = false;
+        }
+
+        public dispose(engine: Engine): boolean {
+            if (this._isDisposed) {
+                return false;
+            }
+
+            if (this._partBuffer) {
+                engine._releaseBuffer(this._partBuffer);
+                this._partBuffer = null;
+            }
+
+            this._partData = null;
+
+            this._isDisposed = true;
+        }
+
+        private _isDisposed: boolean;        
+    }
+
+    export class TransparentGroupInfoPartData extends GroupInfoPartData {
+        constructor(stride: number, zoff: number) {
+            super(stride);
+            this._partData.compareValueOffset = zoff;
+            this._partData.sortingAscending = false;
+        }
+        
+    }
+
+    export class ModelRenderCache {
+        constructor(engine: Engine, modelKey: string) {
+            this._engine = engine;
+            this._modelKey = modelKey;
+            this._nextKey = 1;
+            this._refCounter = 1;
+            this._partData = null;
+        }
+
+        public dispose(): boolean {
+            if (--this._refCounter !== 0) {
+                return false;
+            }
+
+            // Remove the Model Render Cache from the global dictionary
+            let edata = this._engine.getExternalData<Canvas2DEngineBoundData>("__BJSCANVAS2D__");
+            if (edata) {
+                edata.DisposeModelRenderCache(this);
+            }
+
+            return true;
+        }
+
+        public get isDisposed(): boolean {
+            return this._refCounter <= 0;
+        }
+
+        public addRef(): number {
+            return ++this._refCounter;
+        }
+
+        public get modelKey(): string {
+            return this._modelKey;
+        }
+
+        /**
+         * Render the model instances
+         * @param instanceInfo
+         * @param context
+         * @return must return true is the rendering succeed, false if the rendering couldn't be done (asset's not yet ready, like Effect)
+         */
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            return true;
+        }
+
+        protected getPartIndexFromId(partId: number) {
+            for (var i = 0; i < this._partData.length; i++) {
+                if (this._partData[i]._partId === partId) {
+                    return i;
+                }
+            }
+            return null;
+        }
+
+        protected loadInstancingAttributes(partId: number, effect: Effect): InstancingAttributeInfo[] {
+            let i = this.getPartIndexFromId(partId);
+            if (i === null) {
+                return null;
+            }
+
+            var ci = this._partsClassInfo[i];
+            var categories = this._partData[i]._partUsedCategories;
+            let res = ci.classContent.getInstancingAttributeInfos(effect, categories);
+
+            return res;
+        }
+
+        //setupUniformsLocation(effect: Effect, uniforms: string[], partId: number) {
+        //    let i = this.getPartIndexFromId(partId);
+        //    if (i === null) {
+        //        return null;
+        //    }
+
+        //    let pci = this._partsClassInfo[i];
+        //    pci.fullContent.forEach((k, v) => {
+        //        if (uniforms.indexOf(v.attributeName) !== -1) {
+        //            v.uniformLocation = effect.getUniform(v.attributeName);
+        //        }
+        //    });
+        //}
+
+        private static v2 = Vector2.Zero();
+        private static v3 = Vector3.Zero();
+        private static v4 = Vector4.Zero();
+
+        protected setupUniforms(effect: Effect, partIndex: number, data: DynamicFloatArray, elementCount: number) {
+            let pd = this._partData[partIndex];
+            let offset = (pd._partDataStride/4) * elementCount;
+            let pci = this._partsClassInfo[partIndex];
+
+            let self = this;
+            pci.fullContent.forEach((k, v) => {
+                if (!v.category || pd._partUsedCategories.indexOf(v.category) !== -1) {
+                    switch (v.dataType) {
+                        case ShaderDataType.float:
+                        {
+                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                            effect.setFloat(v.attributeName, data.buffer[offset + attribOffset]);
+                            break;
+                        }
+                        case ShaderDataType.Vector2:
+                        {
+                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                            ModelRenderCache.v2.x = data.buffer[offset + attribOffset + 0];
+                            ModelRenderCache.v2.y = data.buffer[offset + attribOffset + 1];
+                            effect.setVector2(v.attributeName, ModelRenderCache.v2);
+                            break;
+                        }
+                        case ShaderDataType.Color3:
+                        case ShaderDataType.Vector3:
+                        {
+                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                            ModelRenderCache.v3.x = data.buffer[offset + attribOffset + 0];
+                            ModelRenderCache.v3.y = data.buffer[offset + attribOffset + 1];
+                            ModelRenderCache.v3.z = data.buffer[offset + attribOffset + 2];
+                            effect.setVector3(v.attributeName, ModelRenderCache.v3);
+                            break;
+                        }
+                        case ShaderDataType.Color4:
+                        case ShaderDataType.Vector4:
+                        {
+                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                            ModelRenderCache.v4.x = data.buffer[offset + attribOffset + 0];
+                            ModelRenderCache.v4.y = data.buffer[offset + attribOffset + 1];
+                            ModelRenderCache.v4.z = data.buffer[offset + attribOffset + 2];
+                            ModelRenderCache.v4.w = data.buffer[offset + attribOffset + 3];
+                            effect.setVector4(v.attributeName, ModelRenderCache.v4);
+                            break;
+                        }
+                        default:
+                    }
+                }
+            });
+        }
+
+        protected _engine: Engine;
+        private _modelKey: string;
+        private _nextKey: number;
+        private _refCounter: number;
+
+        _partData: ModelRenderCachePartData[];
+        _partsClassInfo: ClassTreeInfo<InstanceClassInfo, InstancePropInfo>[];
+    }
+
+    export class ModelRenderCachePartData {
+        _partId: number;
+        _zBiasOffset: number;
+        _partDataStride: number;
+        _partUsedCategories: string[];
+        _partJoinedUsedCategories: string;
+    }
+}

canvas2D/src/Engine/babylon.rectangle2d.js

@@ -0,0 +1,453 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Rectangle2DRenderCache = (function (_super) {
+        __extends(Rectangle2DRenderCache, _super);
+        function Rectangle2DRenderCache(engine, modelKey) {
+            _super.call(this, engine, modelKey);
+            this.effectsReady = false;
+            this.fillVB = null;
+            this.fillIB = null;
+            this.fillIndicesCount = 0;
+            this.instancingFillAttributes = null;
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.borderVB = null;
+            this.borderIB = null;
+            this.borderIndicesCount = 0;
+            this.instancingBorderAttributes = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+        }
+        Rectangle2DRenderCache.prototype.render = function (instanceInfo, context) {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
+                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            var canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+            var depthFunction = 0;
+            if (this.effectFill && this.effectBorder) {
+                depthFunction = engine.getDepthFunction();
+                engine.setDepthFunctionToLessOrEqual();
+            }
+            var curAlphaMode = engine.getAlphaMode();
+            if (this.effectFill) {
+                var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_FILLPARTID.toString());
+                var pid = context.groupInfoPartData[partIndex];
+                if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+                }
+                var effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingFillAttributes) {
+                        this.instancingFillAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_FILLPARTID, effect);
+                    }
+                    var glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
+                    engine.draw(true, 0, this.fillIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                }
+                else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.fillIndicesCount);
+                    }
+                }
+            }
+            if (this.effectBorder) {
+                var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_BORDERPARTID.toString());
+                var pid = context.groupInfoPartData[partIndex];
+                if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+                }
+                var effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingBorderAttributes) {
+                        this.instancingBorderAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, effect);
+                    }
+                    var glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
+                    engine.draw(true, 0, this.borderIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                }
+                else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.borderIndicesCount);
+                    }
+                }
+            }
+            engine.setAlphaMode(curAlphaMode, true);
+            if (this.effectFill && this.effectBorder) {
+                engine.setDepthFunction(depthFunction);
+            }
+            return true;
+        };
+        Rectangle2DRenderCache.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.fillVB) {
+                this._engine._releaseBuffer(this.fillVB);
+                this.fillVB = null;
+            }
+            if (this.fillIB) {
+                this._engine._releaseBuffer(this.fillIB);
+                this.fillIB = null;
+            }
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+            if (this.borderVB) {
+                this._engine._releaseBuffer(this.borderVB);
+                this.borderVB = null;
+            }
+            if (this.borderIB) {
+                this._engine._releaseBuffer(this.borderIB);
+                this.borderIB = null;
+            }
+            return true;
+        };
+        return Rectangle2DRenderCache;
+    }(BABYLON.ModelRenderCache));
+    BABYLON.Rectangle2DRenderCache = Rectangle2DRenderCache;
+    var Rectangle2DInstanceData = (function (_super) {
+        __extends(Rectangle2DInstanceData, _super);
+        function Rectangle2DInstanceData(partId) {
+            _super.call(this, partId, 1);
+        }
+        Object.defineProperty(Rectangle2DInstanceData.prototype, "properties", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData()
+        ], Rectangle2DInstanceData.prototype, "properties", null);
+        return Rectangle2DInstanceData;
+    }(BABYLON.Shape2DInstanceData));
+    BABYLON.Rectangle2DInstanceData = Rectangle2DInstanceData;
+    var Rectangle2D = (function (_super) {
+        __extends(Rectangle2D, _super);
+        /**
+         * Create an Rectangle 2D Shape primitive. May be a sharp rectangle (with sharp corners), or a rounded one.
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y settings can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - size: the size of the group. Alternatively the width and height settings can be set. Default will be [10;10].
+         * - roundRadius: if the rectangle has rounded corner, set their radius, default is 0 (to get a sharp edges rectangle).
+         * - fill: the brush used to draw the fill content of the rectangle, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - border: the brush used to draw the border of the rectangle, you can set null to draw nothing (but you will have to set a fill brush), default is null. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - borderThickness: the thickness of the drawn border, default is 1.
+         * - isVisible: true if the primitive must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        function Rectangle2D(settings) {
+            // Avoid checking every time if the object exists
+            if (settings == null) {
+                settings = {};
+            }
+            _super.call(this, settings);
+            if (settings.size != null) {
+                this.size = settings.size;
+            }
+            else if (settings.width || settings.height) {
+                var size = new BABYLON.Size(settings.width, settings.height);
+                this.size = size;
+            }
+            //let size            = settings.size || (new Size((settings.width === null) ? null : (settings.width || 10), (settings.height === null) ? null : (settings.height || 10)));
+            var roundRadius = (settings.roundRadius == null) ? 0 : settings.roundRadius;
+            var borderThickness = (settings.borderThickness == null) ? 1 : settings.borderThickness;
+            //this.size            = size;
+            this.roundRadius = roundRadius;
+            this.borderThickness = borderThickness;
+        }
+        Object.defineProperty(Rectangle2D.prototype, "actualSize", {
+            get: function () {
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
+                return this.size;
+            },
+            set: function (value) {
+                this._actualSize = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Rectangle2D.prototype, "notRounded", {
+            get: function () {
+                return this._notRounded;
+            },
+            set: function (value) {
+                this._notRounded = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Rectangle2D.prototype, "roundRadius", {
+            get: function () {
+                return this._roundRadius;
+            },
+            set: function (value) {
+                this._roundRadius = value;
+                this.notRounded = value === 0;
+                this._positioningDirty();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Rectangle2D.prototype.levelIntersect = function (intersectInfo) {
+            // If we got there it mean the boundingInfo intersection succeed, if the rectangle has not roundRadius, it means it succeed!
+            if (this.notRounded) {
+                return true;
+            }
+            // If we got so far it means the bounding box at least passed, so we know it's inside the bounding rectangle, but it can be outside the roundedRectangle.
+            // The easiest way is to check if the point is inside on of the four corners area (a little square of roundRadius size at the four corners)
+            // If it's the case for one, check if the mouse is located in the quarter that we care about (the one who is visible) then finally make a distance check with the roundRadius radius to see if it's inside the circle quarter or outside.
+            // First let remove the origin out the equation, to have the rectangle with an origin at bottom/left
+            var size = this.size;
+            Rectangle2D._i0.x = intersectInfo._localPickPosition.x;
+            Rectangle2D._i0.y = intersectInfo._localPickPosition.y;
+            var rr = this.roundRadius;
+            var rrs = rr * rr;
+            // Check if the point is in the bottom/left quarter area
+            Rectangle2D._i1.x = rr;
+            Rectangle2D._i1.y = rr;
+            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+            // Check if the point is in the top/left quarter area
+            Rectangle2D._i1.x = rr;
+            Rectangle2D._i1.y = size.height - rr;
+            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+            // Check if the point is in the top/right quarter area
+            Rectangle2D._i1.x = size.width - rr;
+            Rectangle2D._i1.y = size.height - rr;
+            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+            // Check if the point is in the bottom/right quarter area
+            Rectangle2D._i1.x = size.width - rr;
+            Rectangle2D._i1.y = rr;
+            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+            // At any other locations the point is guarantied to be inside
+            return true;
+        };
+        Rectangle2D.prototype.updateLevelBoundingInfo = function () {
+            BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        };
+        Rectangle2D.prototype.createModelRenderCache = function (modelKey) {
+            var renderCache = new Rectangle2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        };
+        Rectangle2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+            var renderCache = modelRenderCache;
+            var engine = this.owner.engine;
+            // Need to create WebGL resources for fill part?
+            if (this.fill) {
+                var vbSize = ((this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4) + 1;
+                var vb = new Float32Array(vbSize);
+                for (var i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.fillVB = engine.createVertexBuffer(vb);
+                var triCount = vbSize - 1;
+                var ib = new Float32Array(triCount * 3);
+                for (var i = 0; i < triCount; i++) {
+                    ib[i * 3 + 0] = 0;
+                    ib[i * 3 + 2] = i + 1;
+                    ib[i * 3 + 1] = i + 2;
+                }
+                ib[triCount * 3 - 2] = 1;
+                renderCache.fillIB = engine.createIndexBuffer(ib);
+                renderCache.fillIndicesCount = triCount * 3;
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectFillInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
+                renderCache.effectFill = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+            // Need to create WebGL resource for border part?
+            if (this.border) {
+                var vbSize = (this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4 * 2;
+                var vb = new Float32Array(vbSize);
+                for (var i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.borderVB = engine.createVertexBuffer(vb);
+                var triCount = vbSize;
+                var rs = triCount / 2;
+                var ib = new Float32Array(triCount * 3);
+                for (var i = 0; i < rs; i++) {
+                    var r0 = i;
+                    var r1 = (i + 1) % rs;
+                    ib[i * 6 + 0] = rs + r1;
+                    ib[i * 6 + 1] = rs + r0;
+                    ib[i * 6 + 2] = r0;
+                    ib[i * 6 + 3] = r1;
+                    ib[i * 6 + 4] = rs + r1;
+                    ib[i * 6 + 5] = r0;
+                }
+                renderCache.borderIB = engine.createIndexBuffer(ib);
+                renderCache.borderIndicesCount = triCount * 3;
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectBorderInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
+                renderCache.effectBorder = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+            return renderCache;
+        };
+        // We override this method because if there's a roundRadius set, we will reduce the initial Content Area to make sure the computed area won't intersect with the shape contour. The formula is simple: we shrink the incoming size by the amount of the roundRadius
+        Rectangle2D.prototype._getInitialContentAreaToRef = function (primSize, initialContentPosition, initialContentArea) {
+            // Fall back to default implementation if there's no round Radius
+            if (this._notRounded) {
+                _super.prototype._getInitialContentAreaToRef.call(this, primSize, initialContentPosition, initialContentArea);
+            }
+            else {
+                var rr = Math.round((this.roundRadius - (this.roundRadius / Math.sqrt(2))) * 1.3);
+                initialContentPosition.x = initialContentPosition.y = rr;
+                initialContentArea.width = Math.max(0, primSize.width - (rr * 2));
+                initialContentArea.height = Math.max(0, primSize.height - (rr * 2));
+            }
+        };
+        Rectangle2D.prototype._getActualSizeFromContentToRef = function (primSize, newPrimSize) {
+            // Fall back to default implementation if there's no round Radius
+            if (this._notRounded) {
+                _super.prototype._getActualSizeFromContentToRef.call(this, primSize, newPrimSize);
+            }
+            else {
+                var rr = Math.round((this.roundRadius - (this.roundRadius / Math.sqrt(2))) * 1.3);
+                newPrimSize.copyFrom(primSize);
+                newPrimSize.width += rr * 2;
+                newPrimSize.height += rr * 2;
+            }
+        };
+        Rectangle2D.prototype.createInstanceDataParts = function () {
+            var res = new Array();
+            if (this.border) {
+                res.push(new Rectangle2DInstanceData(BABYLON.Shape2D.SHAPE2D_BORDERPARTID));
+            }
+            if (this.fill) {
+                res.push(new Rectangle2DInstanceData(BABYLON.Shape2D.SHAPE2D_FILLPARTID));
+            }
+            return res;
+        };
+        Rectangle2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            if (part.id === BABYLON.Shape2D.SHAPE2D_BORDERPARTID) {
+                var d = part;
+                var size = this.actualSize;
+                var s = this.actualScale;
+                d.properties = new BABYLON.Vector3(size.width * s.x, size.height * s.y, this.roundRadius || 0);
+            }
+            else if (part.id === BABYLON.Shape2D.SHAPE2D_FILLPARTID) {
+                var d = part;
+                var size = this.actualSize;
+                var s = this.actualScale;
+                d.properties = new BABYLON.Vector3(size.width * s.x, size.height * s.y, this.roundRadius || 0);
+            }
+            return true;
+        };
+        Rectangle2D._i0 = BABYLON.Vector2.Zero();
+        Rectangle2D._i1 = BABYLON.Vector2.Zero();
+        Rectangle2D._i2 = BABYLON.Vector2.Zero();
+        Rectangle2D.roundSubdivisions = 16;
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 1, function (pi) { return Rectangle2D.actualSizeProperty = pi; }, false, true)
+        ], Rectangle2D.prototype, "actualSize", null);
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 2, function (pi) { return Rectangle2D.notRoundedProperty = pi; })
+        ], Rectangle2D.prototype, "notRounded", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 3, function (pi) { return Rectangle2D.roundRadiusProperty = pi; })
+        ], Rectangle2D.prototype, "roundRadius", null);
+        Rectangle2D = __decorate([
+            BABYLON.className("Rectangle2D", "BABYLON")
+        ], Rectangle2D);
+        return Rectangle2D;
+    }(BABYLON.Shape2D));
+    BABYLON.Rectangle2D = Rectangle2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.rectangle2d.ts

@@ -0,0 +1,539 @@
+module BABYLON {
+    export class Rectangle2DRenderCache extends ModelRenderCache {
+        effectsReady: boolean                               = false;
+        fillVB: WebGLBuffer                                 = null;
+        fillIB: WebGLBuffer                                 = null;
+        fillIndicesCount: number                            = 0;
+        instancingFillAttributes: InstancingAttributeInfo[] = null;
+        effectFill: Effect                                  = null;
+        effectFillInstanced: Effect                         = null;
+
+        borderVB: WebGLBuffer                                 = null;
+        borderIB: WebGLBuffer                                 = null;
+        borderIndicesCount: number                            = 0;
+        instancingBorderAttributes: InstancingAttributeInfo[] = null;
+        effectBorder: Effect                                  = null;
+        effectBorderInstanced: Effect                         = null;
+
+        constructor(engine: Engine, modelKey: string) {
+            super(engine, modelKey);
+        }
+
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
+                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            let canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+
+            let depthFunction = 0;
+            if (this.effectFill && this.effectBorder) {
+                depthFunction = engine.getDepthFunction();
+                engine.setDepthFunctionToLessOrEqual();
+            }
+
+            var curAlphaMode = engine.getAlphaMode();
+
+            if (this.effectFill) {
+
+                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_FILLPARTID.toString());
+                let pid = context.groupInfoPartData[partIndex];
+
+                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+                }
+
+                let effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
+
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingFillAttributes) {
+                        this.instancingFillAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_FILLPARTID, effect);
+                    }
+
+                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
+                    engine.draw(true, 0, this.fillIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                } else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.fillIndicesCount);                        
+                    }
+                }
+            }
+
+            if (this.effectBorder) {
+                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_BORDERPARTID.toString());
+                let pid = context.groupInfoPartData[partIndex];
+
+                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+                }
+
+                let effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
+
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingBorderAttributes) {
+                        this.instancingBorderAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_BORDERPARTID, effect);
+                    }
+
+                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
+                    engine.draw(true, 0, this.borderIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                } else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.borderIndicesCount);
+                    }
+                }
+            }
+
+            engine.setAlphaMode(curAlphaMode, true);
+
+            if (this.effectFill && this.effectBorder) {
+                engine.setDepthFunction(depthFunction);
+            }
+            return true;
+        }
+
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.fillVB) {
+                this._engine._releaseBuffer(this.fillVB);
+                this.fillVB = null;
+            }
+
+            if (this.fillIB) {
+                this._engine._releaseBuffer(this.fillIB);
+                this.fillIB = null;
+            }
+
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+
+            if (this.borderVB) {
+                this._engine._releaseBuffer(this.borderVB);
+                this.borderVB = null;
+            }
+
+            if (this.borderIB) {
+                this._engine._releaseBuffer(this.borderIB);
+                this.borderIB = null;
+            }
+
+
+            return true;
+        }
+    }
+
+    export class Rectangle2DInstanceData extends Shape2DInstanceData {
+        constructor(partId: number) {
+            super(partId, 1);
+        }
+
+        @instanceData()
+        get properties(): Vector3 {
+            return null;
+        }
+        set properties(value: Vector3) {
+        }
+    }
+
+    @className("Rectangle2D", "BABYLON")
+    /**
+     * The Rectangle Primitive type
+     */
+    export class Rectangle2D extends Shape2D {
+
+        public static actualSizeProperty: Prim2DPropInfo;
+        public static notRoundedProperty: Prim2DPropInfo;
+        public static roundRadiusProperty: Prim2DPropInfo;
+
+        @instanceLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 1, pi => Rectangle2D.actualSizeProperty = pi, false, true)
+        /**
+         * Get/set the rectangle size (width/height)
+         */
+        public get actualSize(): Size {
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+            return this.size;
+        }
+
+        public set actualSize(value: Size) {
+            this._actualSize = value;
+        }
+
+        @modelLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 2, pi => Rectangle2D.notRoundedProperty = pi)
+        /**
+         * Get if the rectangle is notRound (returns true) or rounded (returns false).
+         * Don't use the setter, it's for internal purpose only
+         */
+        public get notRounded(): boolean {
+            return this._notRounded;
+        }
+
+        public set notRounded(value: boolean) {
+            this._notRounded = value;
+        }
+
+        @instanceLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 3, pi => Rectangle2D.roundRadiusProperty = pi)
+        /**
+         * Get/set the round Radius, a value of 0 for a sharp edges rectangle, otherwise the value will be used as the diameter of the round to apply on corder. The Rectangle2D.notRounded property will be updated accordingly.
+         */
+        public get roundRadius(): number {
+            return this._roundRadius;
+        }
+
+        public set roundRadius(value: number) {
+            this._roundRadius = value;
+            this.notRounded = value === 0;
+            this._positioningDirty();
+        }
+
+        private static _i0 = Vector2.Zero();
+        private static _i1 = Vector2.Zero();
+        private static _i2 = Vector2.Zero();
+
+        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
+            // If we got there it mean the boundingInfo intersection succeed, if the rectangle has not roundRadius, it means it succeed!
+            if (this.notRounded) {
+                return true;
+            }
+
+            // If we got so far it means the bounding box at least passed, so we know it's inside the bounding rectangle, but it can be outside the roundedRectangle.
+            // The easiest way is to check if the point is inside on of the four corners area (a little square of roundRadius size at the four corners)
+            // If it's the case for one, check if the mouse is located in the quarter that we care about (the one who is visible) then finally make a distance check with the roundRadius radius to see if it's inside the circle quarter or outside.
+
+            // First let remove the origin out the equation, to have the rectangle with an origin at bottom/left
+            let size = this.size;
+            Rectangle2D._i0.x = intersectInfo._localPickPosition.x;
+            Rectangle2D._i0.y = intersectInfo._localPickPosition.y;
+
+            let rr = this.roundRadius;
+            let rrs = rr * rr;
+
+            // Check if the point is in the bottom/left quarter area
+            Rectangle2D._i1.x = rr;
+            Rectangle2D._i1.y = rr;
+            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+
+            // Check if the point is in the top/left quarter area
+            Rectangle2D._i1.x = rr;
+            Rectangle2D._i1.y = size.height - rr;
+            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+
+            // Check if the point is in the top/right quarter area
+            Rectangle2D._i1.x = size.width - rr;
+            Rectangle2D._i1.y = size.height - rr;
+            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+
+
+            // Check if the point is in the bottom/right quarter area
+            Rectangle2D._i1.x = size.width - rr;
+            Rectangle2D._i1.y = rr;
+            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+
+            // At any other locations the point is guarantied to be inside
+
+            return true;
+        }
+
+        protected updateLevelBoundingInfo() {
+            BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        }
+
+        /**
+         * Create an Rectangle 2D Shape primitive. May be a sharp rectangle (with sharp corners), or a rounded one.
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y settings can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - size: the size of the group. Alternatively the width and height settings can be set. Default will be [10;10].
+         * - roundRadius: if the rectangle has rounded corner, set their radius, default is 0 (to get a sharp edges rectangle).
+         * - fill: the brush used to draw the fill content of the rectangle, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - border: the brush used to draw the border of the rectangle, you can set null to draw nothing (but you will have to set a fill brush), default is null. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - borderThickness: the thickness of the drawn border, default is 1.
+         * - isVisible: true if the primitive must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        constructor(settings      ?: {
+            parent                ?: Prim2DBase, 
+            children              ?: Array<Prim2DBase>,
+            id                    ?: string,
+            position              ?: Vector2,
+            x                     ?: number,
+            y                     ?: number,
+            rotation              ?: number,
+            scale                 ?: number,
+            scaleX                ?: number,
+            scaleY                ?: number,
+            dontInheritParentScale?: boolean,
+            opacity               ?: number,
+            zOrder                ?: number, 
+            origin                ?: Vector2,
+            size                  ?: Size,
+            width                 ?: number,
+            height                ?: number,
+            roundRadius           ?: number,
+            fill                  ?: IBrush2D | string,
+            border                ?: IBrush2D | string,
+            borderThickness       ?: number,
+            isVisible             ?: boolean,
+            isPickable            ?: boolean,
+            isContainer           ?: boolean,
+            childrenFlatZOrder    ?: boolean,
+            marginTop             ?: number | string,
+            marginLeft            ?: number | string,
+            marginRight           ?: number | string,
+            marginBottom          ?: number | string,
+            margin                ?: number | string,
+            marginHAlignment      ?: number,
+            marginVAlignment      ?: number,
+            marginAlignment       ?: string,
+            paddingTop            ?: number | string,
+            paddingLeft           ?: number | string,
+            paddingRight          ?: number | string,
+            paddingBottom         ?: number | string,
+            padding               ?: string,
+        }) {
+
+            // Avoid checking every time if the object exists
+            if (settings == null) {
+                settings = {};
+            }
+
+            super(settings);
+
+            if (settings.size != null) {
+                this.size = settings.size;
+            }
+            else if (settings.width || settings.height) {
+                let size = new Size(settings.width, settings.height);
+                this.size = size;
+            }
+
+            //let size            = settings.size || (new Size((settings.width === null) ? null : (settings.width || 10), (settings.height === null) ? null : (settings.height || 10)));
+            let roundRadius     = (settings.roundRadius == null) ? 0 : settings.roundRadius;
+            let borderThickness = (settings.borderThickness == null) ? 1 : settings.borderThickness;
+
+            //this.size            = size;
+            this.roundRadius     = roundRadius;
+            this.borderThickness = borderThickness;
+        }
+
+        public static roundSubdivisions = 16;
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            let renderCache = new Rectangle2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+            let renderCache = <Rectangle2DRenderCache>modelRenderCache;
+            let engine = this.owner.engine;
+
+            // Need to create WebGL resources for fill part?
+            if (this.fill) {
+                let vbSize = ((this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4) + 1;
+                let vb = new Float32Array(vbSize);
+                for (let i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.fillVB = engine.createVertexBuffer(vb);
+
+                let triCount = vbSize - 1;
+                let ib = new Float32Array(triCount * 3);
+                for (let i = 0; i < triCount; i++) {
+                    ib[i * 3 + 0] = 0;
+                    ib[i * 3 + 2] = i + 1;
+                    ib[i * 3 + 1] = i + 2;
+                }
+                ib[triCount * 3 - 2] = 1;
+
+                renderCache.fillIB = engine.createIndexBuffer(ib);
+                renderCache.fillIndicesCount = triCount * 3;
+
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectFillInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
+                renderCache.effectFill = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+
+            // Need to create WebGL resource for border part?
+            if (this.border) {
+                let vbSize = (this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4 * 2;
+                let vb = new Float32Array(vbSize);
+                for (let i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.borderVB = engine.createVertexBuffer(vb);
+
+                let triCount = vbSize;
+                let rs = triCount / 2;
+                let ib = new Float32Array(triCount * 3);
+                for (let i = 0; i < rs; i++) {
+                    let r0 = i;
+                    let r1 = (i + 1) % rs;
+
+                    ib[i * 6 + 0] = rs + r1;
+                    ib[i * 6 + 1] = rs + r0;
+                    ib[i * 6 + 2] = r0;
+
+                    ib[i * 6 + 3] = r1;
+                    ib[i * 6 + 4] = rs + r1;
+                    ib[i * 6 + 5] = r0;
+                }
+
+                renderCache.borderIB = engine.createIndexBuffer(ib);
+                renderCache.borderIndicesCount = triCount * 3;
+
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectBorderInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
+                renderCache.effectBorder = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+
+            return renderCache;
+        }
+
+        // We override this method because if there's a roundRadius set, we will reduce the initial Content Area to make sure the computed area won't intersect with the shape contour. The formula is simple: we shrink the incoming size by the amount of the roundRadius
+        protected _getInitialContentAreaToRef(primSize: Size, initialContentPosition: Vector2, initialContentArea: Size) {
+            // Fall back to default implementation if there's no round Radius
+            if (this._notRounded) {
+                super._getInitialContentAreaToRef(primSize, initialContentPosition, initialContentArea);
+            } else {
+                let rr = Math.round((this.roundRadius - (this.roundRadius/Math.sqrt(2))) * 1.3);
+                initialContentPosition.x = initialContentPosition.y = rr;
+                initialContentArea.width = Math.max(0, primSize.width - (rr * 2));
+                initialContentArea.height = Math.max(0, primSize.height - (rr * 2));
+            }
+        }
+
+        protected _getActualSizeFromContentToRef(primSize: Size, newPrimSize: Size) {
+            // Fall back to default implementation if there's no round Radius
+            if (this._notRounded) {
+                super._getActualSizeFromContentToRef(primSize, newPrimSize);
+            } else {
+                let rr = Math.round((this.roundRadius - (this.roundRadius / Math.sqrt(2))) * 1.3);
+                newPrimSize.copyFrom(primSize);
+                newPrimSize.width  += rr * 2;
+                newPrimSize.height += rr * 2;
+            }
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            var res = new Array<InstanceDataBase>();
+            if (this.border) {
+                res.push(new Rectangle2DInstanceData(Shape2D.SHAPE2D_BORDERPARTID));
+            }
+            if (this.fill) {
+                res.push(new Rectangle2DInstanceData(Shape2D.SHAPE2D_FILLPARTID));
+            }
+            return res;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+            if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                let d = <Rectangle2DInstanceData>part;
+                let size = this.actualSize;
+                let s = this.actualScale;
+                d.properties = new Vector3(size.width * s.x, size.height * s.y, this.roundRadius || 0);
+            }
+            else if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
+                let d = <Rectangle2DInstanceData>part;
+                let size = this.actualSize;
+                let s = this.actualScale;
+                d.properties = new Vector3(size.width * s.x, size.height * s.y, this.roundRadius || 0);
+            }
+            return true;
+        }
+
+        private _notRounded: boolean;
+        private _roundRadius: number;
+    }
+}

canvas2D/src/Engine/babylon.renderablePrim2d.js

@@ -0,0 +1,893 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var InstanceClassInfo = (function () {
+        function InstanceClassInfo(base) {
+            this._baseInfo = base;
+            this._nextOffset = new BABYLON.StringDictionary();
+            this._attributes = new Array();
+        }
+        InstanceClassInfo.prototype.mapProperty = function (propInfo, push) {
+            var curOff = this._nextOffset.getOrAdd(InstanceClassInfo._CurCategories, 0);
+            propInfo.instanceOffset.add(InstanceClassInfo._CurCategories, this._getBaseOffset(InstanceClassInfo._CurCategories) + curOff);
+            //console.log(`[${InstanceClassInfo._CurCategories}] New PropInfo. Category: ${propInfo.category}, Name: ${propInfo.attributeName}, Offset: ${propInfo.instanceOffset.get(InstanceClassInfo._CurCategories)}, Size: ${propInfo.size / 4}`);
+            this._nextOffset.set(InstanceClassInfo._CurCategories, curOff + (propInfo.size / 4));
+            if (push) {
+                this._attributes.push(propInfo);
+            }
+        };
+        InstanceClassInfo.prototype.getInstancingAttributeInfos = function (effect, categories) {
+            var catInline = ";" + categories.join(";") + ";";
+            var res = new Array();
+            var curInfo = this;
+            while (curInfo) {
+                for (var _i = 0, _a = curInfo._attributes; _i < _a.length; _i++) {
+                    var attrib = _a[_i];
+                    // Only map if there's no category assigned to the instance data or if there's a category and it's in the given list
+                    if (!attrib.category || categories.indexOf(attrib.category) !== -1) {
+                        var index = effect.getAttributeLocationByName(attrib.attributeName);
+                        var iai = new BABYLON.InstancingAttributeInfo();
+                        iai.index = index;
+                        iai.attributeSize = attrib.size / 4; // attrib.size is in byte and we need to store in "component" (i.e float is 1, vec3 is 3)
+                        iai.offset = attrib.instanceOffset.get(catInline) * 4; // attrib.instanceOffset is in float, iai.offset must be in bytes
+                        iai.attributeName = attrib.attributeName;
+                        res.push(iai);
+                    }
+                }
+                curInfo = curInfo._baseInfo;
+            }
+            return res;
+        };
+        InstanceClassInfo.prototype.getShaderAttributes = function (categories) {
+            var res = new Array();
+            var curInfo = this;
+            while (curInfo) {
+                for (var _i = 0, _a = curInfo._attributes; _i < _a.length; _i++) {
+                    var attrib = _a[_i];
+                    // Only map if there's no category assigned to the instance data or if there's a category and it's in the given list
+                    if (!attrib.category || categories.indexOf(attrib.category) !== -1) {
+                        res.push(attrib.attributeName);
+                    }
+                }
+                curInfo = curInfo._baseInfo;
+            }
+            return res;
+        };
+        InstanceClassInfo.prototype._getBaseOffset = function (categories) {
+            var curOffset = 0;
+            var curBase = this._baseInfo;
+            while (curBase) {
+                curOffset += curBase._nextOffset.getOrAdd(categories, 0);
+                curBase = curBase._baseInfo;
+            }
+            return curOffset;
+        };
+        return InstanceClassInfo;
+    }());
+    BABYLON.InstanceClassInfo = InstanceClassInfo;
+    var InstancePropInfo = (function () {
+        function InstancePropInfo() {
+            this.instanceOffset = new BABYLON.StringDictionary();
+        }
+        InstancePropInfo.prototype.setSize = function (val) {
+            if (val instanceof BABYLON.Vector2) {
+                this.size = 8;
+                this.dataType = 0 /* Vector2 */;
+                return;
+            }
+            if (val instanceof BABYLON.Vector3) {
+                this.size = 12;
+                this.dataType = 1 /* Vector3 */;
+                return;
+            }
+            if (val instanceof BABYLON.Vector4) {
+                this.size = 16;
+                this.dataType = 2 /* Vector4 */;
+                return;
+            }
+            if (val instanceof BABYLON.Matrix) {
+                throw new Error("Matrix type is not supported by WebGL Instance Buffer, you have to use four Vector4 properties instead");
+            }
+            if (typeof (val) === "number") {
+                this.size = 4;
+                this.dataType = 4 /* float */;
+                return;
+            }
+            if (val instanceof BABYLON.Color3) {
+                this.size = 12;
+                this.dataType = 5 /* Color3 */;
+                return;
+            }
+            if (val instanceof BABYLON.Color4) {
+                this.size = 16;
+                this.dataType = 6 /* Color4 */;
+                return;
+            }
+            if (val instanceof BABYLON.Size) {
+                this.size = 8;
+                this.dataType = 7 /* Size */;
+                return;
+            }
+            return;
+        };
+        InstancePropInfo.prototype.writeData = function (array, offset, val) {
+            switch (this.dataType) {
+                case 0 /* Vector2 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        break;
+                    }
+                case 1 /* Vector3 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        array[offset + 2] = v.z;
+                        break;
+                    }
+                case 2 /* Vector4 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        array[offset + 2] = v.z;
+                        array[offset + 3] = v.w;
+                        break;
+                    }
+                case 5 /* Color3 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.r;
+                        array[offset + 1] = v.g;
+                        array[offset + 2] = v.b;
+                        break;
+                    }
+                case 6 /* Color4 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.r;
+                        array[offset + 1] = v.g;
+                        array[offset + 2] = v.b;
+                        array[offset + 3] = v.a;
+                        break;
+                    }
+                case 4 /* float */:
+                    {
+                        var v = val;
+                        array[offset] = v;
+                        break;
+                    }
+                case 3 /* Matrix */:
+                    {
+                        var v = val;
+                        for (var i = 0; i < 16; i++) {
+                            array[offset + i] = v.m[i];
+                        }
+                        break;
+                    }
+                case 7 /* Size */:
+                    {
+                        var s = val;
+                        array[offset + 0] = s.width;
+                        array[offset + 1] = s.height;
+                        break;
+                    }
+            }
+        };
+        return InstancePropInfo;
+    }());
+    BABYLON.InstancePropInfo = InstancePropInfo;
+    function instanceData(category, shaderAttributeName) {
+        return function (target, propName, descriptor) {
+            var dic = BABYLON.ClassTreeInfo.getOrRegister(target, function (base) { return new InstanceClassInfo(base); });
+            var node = dic.getLevelOf(target);
+            var instanceDataName = propName;
+            shaderAttributeName = shaderAttributeName || instanceDataName;
+            var info = node.levelContent.get(instanceDataName);
+            if (info) {
+                throw new Error("The ID " + instanceDataName + " is already taken by another instance data");
+            }
+            info = new InstancePropInfo();
+            info.attributeName = shaderAttributeName;
+            info.category = category || null;
+            if (info.category) {
+                info.delimitedCategory = ";" + info.category + ";";
+            }
+            node.levelContent.add(instanceDataName, info);
+            descriptor.get = function () {
+                return null;
+            };
+            descriptor.set = function (val) {
+                // Check that we're not trying to set a property that belongs to a category that is not allowed (current)
+                // Quit if it's the case, otherwise we could overwrite data somewhere...
+                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);
+                }
+                var obj = this;
+                if (obj.dataBuffer && obj.dataElements) {
+                    var offset = obj.dataElements[obj.curElement].offset + info.instanceOffset.get(InstanceClassInfo._CurCategories);
+                    info.writeData(obj.dataBuffer.buffer, offset, val);
+                }
+            };
+        };
+    }
+    BABYLON.instanceData = instanceData;
+    var InstanceDataBase = (function () {
+        function InstanceDataBase(partId, dataElementCount) {
+            this.id = partId;
+            this.curElement = 0;
+            this._dataElementCount = dataElementCount;
+            this.renderMode = 0;
+            this.arrayLengthChanged = false;
+        }
+        Object.defineProperty(InstanceDataBase.prototype, "zBias", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(InstanceDataBase.prototype, "transformX", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(InstanceDataBase.prototype, "transformY", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(InstanceDataBase.prototype, "opacity", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        InstanceDataBase.prototype.getClassTreeInfo = function () {
+            if (!this.typeInfo) {
+                this.typeInfo = BABYLON.ClassTreeInfo.get(Object.getPrototypeOf(this));
+            }
+            return this.typeInfo;
+        };
+        InstanceDataBase.prototype.allocElements = function () {
+            if (!this.dataBuffer || this.dataElements) {
+                return;
+            }
+            var res = new Array(this.dataElementCount);
+            for (var i = 0; i < this.dataElementCount; i++) {
+                res[i] = this.dataBuffer.allocElement();
+            }
+            this.dataElements = res;
+        };
+        InstanceDataBase.prototype.freeElements = function () {
+            if (!this.dataElements) {
+                return;
+            }
+            for (var _i = 0, _a = this.dataElements; _i < _a.length; _i++) {
+                var ei = _a[_i];
+                this.dataBuffer.freeElement(ei);
+            }
+            this.dataElements = null;
+        };
+        Object.defineProperty(InstanceDataBase.prototype, "dataElementCount", {
+            get: function () {
+                return this._dataElementCount;
+            },
+            set: function (value) {
+                if (value === this._dataElementCount) {
+                    return;
+                }
+                this.arrayLengthChanged = true;
+                this.freeElements();
+                this._dataElementCount = value;
+                this.allocElements();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            instanceData()
+        ], InstanceDataBase.prototype, "zBias", null);
+        __decorate([
+            instanceData()
+        ], InstanceDataBase.prototype, "transformX", null);
+        __decorate([
+            instanceData()
+        ], InstanceDataBase.prototype, "transformY", null);
+        __decorate([
+            instanceData()
+        ], InstanceDataBase.prototype, "opacity", null);
+        return InstanceDataBase;
+    }());
+    BABYLON.InstanceDataBase = InstanceDataBase;
+    var RenderablePrim2D = (function (_super) {
+        __extends(RenderablePrim2D, _super);
+        function RenderablePrim2D(settings) {
+            _super.call(this, settings);
+            this._transparentPrimitiveInfo = null;
+        }
+        Object.defineProperty(RenderablePrim2D.prototype, "isAlphaTest", {
+            get: function () {
+                return this._useTextureAlpha() || this._isPrimAlphaTest();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(RenderablePrim2D.prototype, "isTransparent", {
+            get: function () {
+                return (this.actualOpacity < 1) || this._shouldUseAlphaFromTexture() || this._isPrimTransparent();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(RenderablePrim2D.prototype, "renderMode", {
+            get: function () {
+                return this._renderMode;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Dispose the primitive and its resources, remove it from its parent
+         */
+        RenderablePrim2D.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.renderGroup) {
+                this.renderGroup._setCacheGroupDirty();
+            }
+            if (this._transparentPrimitiveInfo) {
+                this.renderGroup._renderableData.removeTransparentPrimitiveInfo(this._transparentPrimitiveInfo);
+                this._transparentPrimitiveInfo = null;
+            }
+            if (this._instanceDataParts) {
+                this._cleanupInstanceDataParts();
+            }
+            if (this._modelRenderCache) {
+                this._modelRenderCache.dispose();
+                this._modelRenderCache = null;
+            }
+            if (this._instanceDataParts) {
+                this._instanceDataParts.forEach(function (p) {
+                    p.freeElements();
+                });
+                this._instanceDataParts = null;
+            }
+            return true;
+        };
+        RenderablePrim2D.prototype._cleanupInstanceDataParts = function () {
+            var gii = null;
+            for (var _i = 0, _a = this._instanceDataParts; _i < _a.length; _i++) {
+                var part = _a[_i];
+                part.freeElements();
+                gii = part.groupInstanceInfo;
+            }
+            if (gii) {
+                var usedCount = 0;
+                if (gii.hasOpaqueData) {
+                    var od = gii.opaqueData[0];
+                    usedCount += od._partData.usedElementCount;
+                    gii.opaqueDirty = true;
+                }
+                if (gii.hasAlphaTestData) {
+                    var atd = gii.alphaTestData[0];
+                    usedCount += atd._partData.usedElementCount;
+                    gii.alphaTestDirty = true;
+                }
+                if (gii.hasTransparentData) {
+                    var td = gii.transparentData[0];
+                    usedCount += td._partData.usedElementCount;
+                    gii.transparentDirty = true;
+                }
+                if (usedCount === 0 && gii.modelRenderCache != null) {
+                    this.renderGroup._renderableData._renderGroupInstancesInfo.remove(gii.modelRenderCache.modelKey);
+                    gii.dispose();
+                }
+                if (this._modelRenderCache) {
+                    this._modelRenderCache.dispose();
+                    this._modelRenderCache = null;
+                }
+            }
+            this._instanceDataParts = null;
+        };
+        RenderablePrim2D.prototype._prepareRenderPre = function (context) {
+            _super.prototype._prepareRenderPre.call(this, context);
+            // If the model changed and we have already an instance, we must remove this instance from the obsolete model
+            if (this._isFlagSet(BABYLON.SmartPropertyPrim.flagModelDirty) && this._instanceDataParts) {
+                this._cleanupInstanceDataParts();
+            }
+            // Need to create the model?
+            var setupModelRenderCache = false;
+            if (!this._modelRenderCache || this._isFlagSet(BABYLON.SmartPropertyPrim.flagModelDirty)) {
+                setupModelRenderCache = this._createModelRenderCache();
+            }
+            var gii = null;
+            var newInstance = false;
+            // Need to create the instance data parts?
+            if (!this._instanceDataParts) {
+                // Yes, flag it for later, more processing will have to be done
+                newInstance = true;
+                gii = this._createModelDataParts();
+            }
+            // If the ModelRenderCache is brand new, now is the time to call the implementation's specific setup method to create the rendering resources
+            if (setupModelRenderCache) {
+                this.setupModelRenderCache(this._modelRenderCache);
+            }
+            // At this stage we have everything correctly initialized, ModelRenderCache is setup, Model Instance data are good too, they have allocated elements in the Instanced DynamicFloatArray.
+            // The last thing to do is check if the instanced related data must be updated because a InstanceLevel property had changed or the primitive visibility changed.
+            if (this._areSomeFlagsSet(BABYLON.SmartPropertyPrim.flagVisibilityChanged | BABYLON.SmartPropertyPrim.flagNeedRefresh) || context.forceRefreshPrimitive || newInstance || (this._instanceDirtyFlags !== 0) || (this._globalTransformProcessStep !== this._globalTransformStep) || this._mustUpdateInstance()) {
+                this._updateInstanceDataParts(gii);
+            }
+        };
+        RenderablePrim2D.prototype._createModelRenderCache = function () {
+            var _this = this;
+            var setupModelRenderCache = false;
+            if (this._modelRenderCache) {
+                this._modelRenderCache.dispose();
+            }
+            this._modelRenderCache = this.owner._engineData.GetOrAddModelCache(this.modelKey, function (key) {
+                var mrc = _this.createModelRenderCache(key);
+                setupModelRenderCache = true;
+                return mrc;
+            });
+            this._clearFlags(BABYLON.SmartPropertyPrim.flagModelDirty);
+            // if this is still false it means the MRC already exists, so we add a reference to it
+            if (!setupModelRenderCache) {
+                this._modelRenderCache.addRef();
+            }
+            return setupModelRenderCache;
+        };
+        RenderablePrim2D.prototype._createModelDataParts = function () {
+            var _this = this;
+            // Create the instance data parts of the primitive and store them
+            var parts = this.createInstanceDataParts();
+            this._instanceDataParts = parts;
+            // Check if the ModelRenderCache for this particular instance is also brand new, initialize it if it's the case
+            if (!this._modelRenderCache._partData) {
+                this._setupModelRenderCache(parts);
+            }
+            // The Rendering resources (Effect, VB, IB, Textures) are stored in the ModelRenderCache
+            // But it's the RenderGroup that will store all the Instanced related data to render all the primitive it owns.
+            // So for a given ModelKey we getOrAdd a GroupInstanceInfo that will store all these data
+            var gii = this.renderGroup._renderableData._renderGroupInstancesInfo.getOrAddWithFactory(this.modelKey, function (k) {
+                var res = new BABYLON.GroupInstanceInfo(_this.renderGroup, _this._modelRenderCache, _this._modelRenderCache._partData.length);
+                for (var j = 0; j < _this._modelRenderCache._partData.length; j++) {
+                    var part = _this._instanceDataParts[j];
+                    res.partIndexFromId.add(part.id.toString(), j);
+                    res.usedShaderCategories[j] = ";" + _this.getUsedShaderCategories(part).join(";") + ";";
+                    res.strides[j] = _this._modelRenderCache._partData[j]._partDataStride;
+                }
+                return res;
+            });
+            // Get the GroupInfoDataPart corresponding to the render category of the part
+            var rm = 0;
+            var gipd = null;
+            if (this.isTransparent) {
+                gipd = gii.transparentData;
+                rm = BABYLON.Render2DContext.RenderModeTransparent;
+            }
+            else if (this.isAlphaTest) {
+                gipd = gii.alphaTestData;
+                rm = BABYLON.Render2DContext.RenderModeAlphaTest;
+            }
+            else {
+                gipd = gii.opaqueData;
+                rm = BABYLON.Render2DContext.RenderModeOpaque;
+            }
+            // For each instance data part of the primitive, allocate the instanced element it needs for render
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                part.dataBuffer = gipd[i]._partData;
+                part.allocElements();
+                part.renderMode = rm;
+                part.groupInstanceInfo = gii;
+            }
+            return gii;
+        };
+        RenderablePrim2D.prototype._setupModelRenderCache = function (parts) {
+            var ctiArray = new Array();
+            this._modelRenderCache._partData = new Array();
+            for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+                var dataPart = parts_1[_i];
+                var pd = new BABYLON.ModelRenderCachePartData();
+                this._modelRenderCache._partData.push(pd);
+                var cat = this.getUsedShaderCategories(dataPart);
+                var cti = dataPart.getClassTreeInfo();
+                // Make sure the instance is visible other the properties won't be set and their size/offset wont be computed
+                var curVisible = this.isVisible;
+                this.isVisible = true;
+                // We manually trigger refreshInstanceData for the only sake of evaluating each instance property size and offset in the instance data, this can only be made at runtime. Once it's done we have all the information to create the instance data buffer.
+                //console.log("Build Prop Layout for " + Tools.getClassName(this._instanceDataParts[0]));
+                var joinCat = ";" + cat.join(";") + ";";
+                pd._partJoinedUsedCategories = joinCat;
+                InstanceClassInfo._CurCategories = joinCat;
+                var obj = this.beforeRefreshForLayoutConstruction(dataPart);
+                if (!this.refreshInstanceDataPart(dataPart)) {
+                    console.log("Layout construction for " + BABYLON.Tools.getClassName(this._instanceDataParts[0]) + " failed because refresh returned false");
+                }
+                this.afterRefreshForLayoutConstruction(dataPart, obj);
+                this.isVisible = curVisible;
+                var size = 0;
+                cti.fullContent.forEach(function (k, v) {
+                    if (!v.category || cat.indexOf(v.category) !== -1) {
+                        if (v.attributeName === "zBias") {
+                            pd._zBiasOffset = v.instanceOffset.get(joinCat);
+                        }
+                        if (!v.size) {
+                            console.log("ERROR: Couldn't detect the size of the Property " + v.attributeName + " from type " + BABYLON.Tools.getClassName(cti.type) + ". Property is ignored.");
+                        }
+                        else {
+                            size += v.size;
+                        }
+                    }
+                });
+                pd._partDataStride = size;
+                pd._partUsedCategories = cat;
+                pd._partId = dataPart.id;
+                ctiArray.push(cti);
+            }
+            this._modelRenderCache._partsClassInfo = ctiArray;
+        };
+        RenderablePrim2D.prototype.onZOrderChanged = function () {
+            if (this.isTransparent && this._transparentPrimitiveInfo) {
+                this.renderGroup._renderableData.transparentPrimitiveZChanged(this._transparentPrimitiveInfo);
+                var gii = this.renderGroup._renderableData._renderGroupInstancesInfo.get(this.modelKey);
+                // Flag the transparentData dirty has will have to sort it again
+                gii.transparentOrderDirty = true;
+            }
+        };
+        RenderablePrim2D.prototype._mustUpdateInstance = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._useTextureAlpha = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._shouldUseAlphaFromTexture = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._isPrimAlphaTest = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._isPrimTransparent = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._updateInstanceDataParts = function (gii) {
+            // Fetch the GroupInstanceInfo if we don't already have it
+            var rd = this.renderGroup._renderableData;
+            if (!gii) {
+                gii = rd._renderGroupInstancesInfo.get(this.modelKey);
+            }
+            var isTransparent = this.isTransparent;
+            var isAlphaTest = this.isAlphaTest;
+            var wereTransparent = false;
+            // Check a render mode change
+            var rmChanged = false;
+            if (this._instanceDataParts.length > 0) {
+                var firstPart = this._instanceDataParts[0];
+                var partRM = firstPart.renderMode;
+                var curRM = this.renderMode;
+                if (partRM !== curRM) {
+                    wereTransparent = partRM === BABYLON.Render2DContext.RenderModeTransparent;
+                    rmChanged = true;
+                    var gipd = void 0;
+                    switch (curRM) {
+                        case BABYLON.Render2DContext.RenderModeTransparent:
+                            gipd = gii.transparentData;
+                            break;
+                        case BABYLON.Render2DContext.RenderModeAlphaTest:
+                            gipd = gii.alphaTestData;
+                            break;
+                        default:
+                            gipd = gii.opaqueData;
+                    }
+                    for (var i = 0; i < this._instanceDataParts.length; i++) {
+                        var part = this._instanceDataParts[i];
+                        part.freeElements();
+                        part.dataBuffer = gipd[i]._partData;
+                        part.renderMode = curRM;
+                    }
+                }
+            }
+            // Handle changes related to ZOffset
+            var visChanged = this._isFlagSet(BABYLON.SmartPropertyPrim.flagVisibilityChanged);
+            if (isTransparent || wereTransparent) {
+                // Handle visibility change, which is also triggered when the primitive just got created
+                if (visChanged || rmChanged) {
+                    if (this.isVisible && !wereTransparent) {
+                        if (!this._transparentPrimitiveInfo) {
+                            // Add the primitive to the list of transparent ones in the group that render is
+                            this._transparentPrimitiveInfo = rd.addNewTransparentPrimitiveInfo(this, gii);
+                        }
+                    }
+                    else {
+                        if (this._transparentPrimitiveInfo) {
+                            rd.removeTransparentPrimitiveInfo(this._transparentPrimitiveInfo);
+                            this._transparentPrimitiveInfo = null;
+                        }
+                    }
+                    gii.transparentOrderDirty = true;
+                }
+            }
+            var rebuildTrans = false;
+            // For each Instance Data part, refresh it to update the data in the DynamicFloatArray
+            for (var _i = 0, _a = this._instanceDataParts; _i < _a.length; _i++) {
+                var part = _a[_i];
+                var justAllocated = false;
+                // Check if we need to allocate data elements (hidden prim which becomes visible again)
+                if (!part.dataElements && (visChanged || rmChanged || this.isVisible)) {
+                    part.allocElements();
+                    justAllocated = true;
+                }
+                InstanceClassInfo._CurCategories = gii.usedShaderCategories[gii.partIndexFromId.get(part.id.toString())];
+                // Will return false if the instance should not be rendered (not visible or other any reasons)
+                part.arrayLengthChanged = false;
+                if (!this.refreshInstanceDataPart(part)) {
+                    // Free the data element
+                    if (part.dataElements) {
+                        part.freeElements();
+                    }
+                    // The refresh couldn't succeed, push the primitive to be dirty again for the next render
+                    if (this.isVisible) {
+                        rd._primNewDirtyList.push(this);
+                    }
+                }
+                rebuildTrans = rebuildTrans || part.arrayLengthChanged || justAllocated;
+            }
+            this._instanceDirtyFlags = 0;
+            // Make the appropriate data dirty
+            if (isTransparent) {
+                gii.transparentDirty = true;
+                if (rebuildTrans) {
+                    rd._transparentListChanged = true;
+                }
+            }
+            else if (isAlphaTest) {
+                gii.alphaTestDirty = true;
+            }
+            else {
+                gii.opaqueDirty = true;
+            }
+            this._clearFlags(BABYLON.SmartPropertyPrim.flagVisibilityChanged); // Reset the flag as we've handled the case            
+        };
+        RenderablePrim2D.prototype._updateTransparentSegmentIndices = function (ts) {
+            var minOff = BABYLON.Prim2DBase._bigInt;
+            var maxOff = 0;
+            for (var _i = 0, _a = this._instanceDataParts; _i < _a.length; _i++) {
+                var part = _a[_i];
+                if (part && part.dataElements) {
+                    part.dataBuffer.pack();
+                    for (var _b = 0, _c = part.dataElements; _b < _c.length; _b++) {
+                        var el = _c[_b];
+                        minOff = Math.min(minOff, el.offset);
+                        maxOff = Math.max(maxOff, el.offset);
+                    }
+                    ts.startDataIndex = Math.min(ts.startDataIndex, minOff / part.dataBuffer.stride);
+                    ts.endDataIndex = Math.max(ts.endDataIndex, (maxOff / part.dataBuffer.stride) + 1); // +1 for exclusive
+                }
+            }
+        };
+        // This internal method is mainly used for transparency processing
+        RenderablePrim2D.prototype._getNextPrimZOrder = function () {
+            var length = this._instanceDataParts.length;
+            for (var i = 0; i < length; i++) {
+                var part = this._instanceDataParts[i];
+                if (part) {
+                    var stride = part.dataBuffer.stride;
+                    var lastElementOffset = part.dataElements[part.dataElements.length - 1].offset;
+                    // check if it's the last in the DFA
+                    if (part.dataBuffer.totalElementCount * stride <= lastElementOffset) {
+                        return null;
+                    }
+                    // Return the Z of the next primitive that lies in the DFA
+                    return part.dataBuffer[lastElementOffset + stride + this.modelRenderCache._partData[i]._zBiasOffset];
+                }
+            }
+            return null;
+        };
+        // This internal method is mainly used for transparency processing
+        RenderablePrim2D.prototype._getPrevPrimZOrder = function () {
+            var length = this._instanceDataParts.length;
+            for (var i = 0; i < length; i++) {
+                var part = this._instanceDataParts[i];
+                if (part) {
+                    var stride = part.dataBuffer.stride;
+                    var firstElementOffset = part.dataElements[0].offset;
+                    // check if it's the first in the DFA
+                    if (firstElementOffset === 0) {
+                        return null;
+                    }
+                    // Return the Z of the previous primitive that lies in the DFA
+                    return part.dataBuffer[firstElementOffset - stride + this.modelRenderCache._partData[i]._zBiasOffset];
+                }
+            }
+            return null;
+        };
+        /**
+         * Transform a given point using the Primitive's origin setting.
+         * This method requires the Primitive's actualSize to be accurate
+         * @param p the point to transform
+         * @param originOffset an offset applied on the current origin before performing the transformation. Depending on which frame of reference your data is expressed you may have to apply a offset. (if you data is expressed from the bottom/left, no offset is required. If it's expressed from the center the a [-0.5;-0.5] offset has to be applied.
+         * @param res an allocated Vector2 that will receive the transformed content
+         */
+        RenderablePrim2D.prototype.transformPointWithOriginByRef = function (p, originOffset, res) {
+            var actualSize = this.actualSize;
+            res.x = p.x - ((this.origin.x + (originOffset ? originOffset.x : 0)) * actualSize.width);
+            res.y = p.y - ((this.origin.y + (originOffset ? originOffset.y : 0)) * actualSize.height);
+        };
+        RenderablePrim2D.prototype.transformPointWithOriginToRef = function (p, originOffset, res) {
+            this.transformPointWithOriginByRef(p, originOffset, res);
+            return res;
+        };
+        /**
+         * Get the info for a given effect based on the dataPart metadata
+         * @param dataPartId partId in part list to get the info
+         * @param vertexBufferAttributes vertex buffer attributes to manually add
+         * @param uniforms uniforms to manually add
+         * @param useInstanced specified if Instanced Array should be used, if null the engine caps will be used (so true if WebGL supports it, false otherwise), but you have the possibility to override the engine capability. However, if you manually set true but the engine does not support Instanced Array, this method will return null
+         */
+        RenderablePrim2D.prototype.getDataPartEffectInfo = function (dataPartId, vertexBufferAttributes, uniforms, useInstanced) {
+            if (uniforms === void 0) { uniforms = null; }
+            if (useInstanced === void 0) { useInstanced = null; }
+            var dataPart = BABYLON.Tools.first(this._instanceDataParts, function (i) { return i.id === dataPartId; });
+            if (!dataPart) {
+                return null;
+            }
+            var instancedArray = this.owner.supportInstancedArray;
+            if (useInstanced != null) {
+                // Check if the caller ask for Instanced Array and the engine does not support it, return null if it's the case
+                if (useInstanced && instancedArray === false) {
+                    return null;
+                }
+                // Use the caller's setting
+                instancedArray = useInstanced;
+            }
+            var cti = dataPart.getClassTreeInfo();
+            var categories = this.getUsedShaderCategories(dataPart);
+            var att = cti.classContent.getShaderAttributes(categories);
+            var defines = "";
+            categories.forEach(function (c) { defines += "#define " + c + "\n"; });
+            if (instancedArray) {
+                defines += "#define Instanced\n";
+            }
+            return {
+                attributes: instancedArray ? vertexBufferAttributes.concat(att) : vertexBufferAttributes,
+                uniforms: instancedArray ? (uniforms != null ? uniforms : []) : ((uniforms != null) ? att.concat(uniforms) : (att != null ? att : [])),
+                defines: defines
+            };
+        };
+        Object.defineProperty(RenderablePrim2D.prototype, "modelRenderCache", {
+            get: function () {
+                return this._modelRenderCache;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        RenderablePrim2D.prototype.createModelRenderCache = function (modelKey) {
+            return null;
+        };
+        RenderablePrim2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+        };
+        RenderablePrim2D.prototype.createInstanceDataParts = function () {
+            return null;
+        };
+        RenderablePrim2D.prototype.getUsedShaderCategories = function (dataPart) {
+            return [];
+        };
+        RenderablePrim2D.prototype.beforeRefreshForLayoutConstruction = function (part) {
+        };
+        RenderablePrim2D.prototype.afterRefreshForLayoutConstruction = function (part, obj) {
+        };
+        RenderablePrim2D.prototype.applyActualScaleOnTransform = function () {
+            return true;
+        };
+        RenderablePrim2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!this.isVisible) {
+                return false;
+            }
+            part.isVisible = this.isVisible;
+            // Which means, if there's only one data element, we're update it from this method, otherwise it is the responsibility of the derived class to call updateInstanceDataPart as many times as needed, properly (look at Text2D's implementation for more information)
+            if (part.dataElementCount === 1) {
+                part.curElement = 0;
+                this.updateInstanceDataPart(part);
+            }
+            return true;
+        };
+        /**
+         * Update the instanceDataBase level properties of a part
+         * @param part the part to update
+         * @param positionOffset to use in multi part per primitive (e.g. the Text2D has N parts for N letter to display), this give the offset to apply (e.g. the position of the letter from the bottom/left corner of the text).
+         */
+        RenderablePrim2D.prototype.updateInstanceDataPart = function (part, positionOffset) {
+            if (positionOffset === void 0) { positionOffset = null; }
+            var t = this._globalTransform.multiply(this.renderGroup.invGlobalTransform); // Compute the transformation into the renderGroup's space
+            var rgScale = this._areSomeFlagsSet(BABYLON.SmartPropertyPrim.flagDontInheritParentScale) ? RenderablePrim2D._uV : this.renderGroup.actualScale; // We still need to apply the scale of the renderGroup to our rendering, so get it.
+            var size = this.renderGroup.viewportSize;
+            var zBias = this.actualZOffset;
+            var offX = 0;
+            var offY = 0;
+            // If there's an offset, apply the global transformation matrix on it to get a global offset
+            if (positionOffset) {
+                offX = positionOffset.x * t.m[0] + positionOffset.y * t.m[4];
+                offY = positionOffset.x * t.m[1] + positionOffset.y * t.m[5];
+            }
+            // Have to convert the coordinates to clip space which is ranged between [-1;1] on X and Y axis, with 0,0 being the left/bottom corner
+            // Current coordinates are expressed in renderGroup coordinates ([0, renderGroup.actualSize.width|height]) with 0,0 being at the left/top corner
+            // So for X: 
+            //  - tx.x = value * 2 / width: is to switch from [0, renderGroup.width] to [0, 2]
+            //  - tx.w = (value * 2 / width) - 1: w stores the translation in renderGroup coordinates so (value * 2 / width) to switch to a clip space translation value. - 1 is to offset the overall [0;2] to [-1;1].
+            // At last we don't forget to apply the actualScale of the Render Group to tx[0] and ty[1] to propagate scaling correctly
+            var w = size.width;
+            var h = size.height;
+            var invZBias = 1 / zBias;
+            var tx = new BABYLON.Vector4(t.m[0] * rgScale.x * 2 / w, t.m[4] * 2 / w, 0 /*t.m[8]*/, ((t.m[12] + offX) * rgScale.x * 2 / w) - 1);
+            var ty = new BABYLON.Vector4(t.m[1] * 2 / h, t.m[5] * rgScale.y * 2 / h, 0 /*t.m[9]*/, ((t.m[13] + offY) * rgScale.y * 2 / h) - 1);
+            if (!this.applyActualScaleOnTransform()) {
+                var las = this.actualScale;
+                tx.x /= las.x;
+                ty.y /= las.y;
+            }
+            part.transformX = tx;
+            part.transformY = ty;
+            part.opacity = this.actualOpacity;
+            // Stores zBias and it's inverse value because that's needed to compute the clip space W coordinate (which is 1/Z, so 1/zBias)
+            part.zBias = new BABYLON.Vector2(zBias, invZBias);
+        };
+        RenderablePrim2D.prototype._updateRenderMode = function () {
+            if (this.isTransparent) {
+                this._renderMode = BABYLON.Render2DContext.RenderModeTransparent;
+            }
+            else if (this.isAlphaTest) {
+                this._renderMode = BABYLON.Render2DContext.RenderModeAlphaTest;
+            }
+            else {
+                this._renderMode = BABYLON.Render2DContext.RenderModeOpaque;
+            }
+        };
+        RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT = BABYLON.Prim2DBase.PRIM2DBASE_PROPCOUNT + 5;
+        RenderablePrim2D._uV = new BABYLON.Vector2(1, 1);
+        __decorate([
+            BABYLON.dynamicLevelProperty(BABYLON.Prim2DBase.PRIM2DBASE_PROPCOUNT + 0, function (pi) { return RenderablePrim2D.isAlphaTestProperty = pi; })
+        ], RenderablePrim2D.prototype, "isAlphaTest", null);
+        __decorate([
+            BABYLON.dynamicLevelProperty(BABYLON.Prim2DBase.PRIM2DBASE_PROPCOUNT + 1, function (pi) { return RenderablePrim2D.isTransparentProperty = pi; })
+        ], RenderablePrim2D.prototype, "isTransparent", null);
+        RenderablePrim2D = __decorate([
+            BABYLON.className("RenderablePrim2D", "BABYLON")
+        ], RenderablePrim2D);
+        return RenderablePrim2D;
+    }(BABYLON.Prim2DBase));
+    BABYLON.RenderablePrim2D = RenderablePrim2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.renderablePrim2d.ts

@@ -0,0 +1,987 @@
+module BABYLON {
+    export class InstanceClassInfo {
+        constructor(base: InstanceClassInfo) {
+            this._baseInfo = base;
+            this._nextOffset = new StringDictionary<number>();
+            this._attributes = new Array<InstancePropInfo>();
+        }
+
+        mapProperty(propInfo: InstancePropInfo, push: boolean) {
+            let curOff = this._nextOffset.getOrAdd(InstanceClassInfo._CurCategories, 0);
+            propInfo.instanceOffset.add(InstanceClassInfo._CurCategories, this._getBaseOffset(InstanceClassInfo._CurCategories) + curOff);
+            //console.log(`[${InstanceClassInfo._CurCategories}] New PropInfo. Category: ${propInfo.category}, Name: ${propInfo.attributeName}, Offset: ${propInfo.instanceOffset.get(InstanceClassInfo._CurCategories)}, Size: ${propInfo.size / 4}`);
+
+            this._nextOffset.set(InstanceClassInfo._CurCategories, curOff + (propInfo.size / 4));
+
+            if (push) {
+                this._attributes.push(propInfo);
+            }
+        }
+
+        getInstancingAttributeInfos(effect: Effect, categories: string[]): InstancingAttributeInfo[] {
+            let catInline = ";" + categories.join(";") + ";";
+            let res = new Array<InstancingAttributeInfo>();
+            let curInfo: InstanceClassInfo = this;
+            while (curInfo) {
+                for (let attrib of curInfo._attributes) {
+                    // Only map if there's no category assigned to the instance data or if there's a category and it's in the given list
+                    if (!attrib.category || categories.indexOf(attrib.category) !== -1) {
+                        let index = effect.getAttributeLocationByName(attrib.attributeName);
+                        let iai = new InstancingAttributeInfo();
+                        iai.index = index;
+                        iai.attributeSize = attrib.size / 4; // attrib.size is in byte and we need to store in "component" (i.e float is 1, vec3 is 3)
+                        iai.offset = attrib.instanceOffset.get(catInline) * 4; // attrib.instanceOffset is in float, iai.offset must be in bytes
+                        iai.attributeName = attrib.attributeName;
+                        res.push(iai);
+                    }
+                }
+
+                curInfo = curInfo._baseInfo;
+            }
+            return res;
+        }
+
+        getShaderAttributes(categories: string[]): string[] {
+            let res = new Array<string>();
+            let curInfo: InstanceClassInfo = this;
+            while (curInfo) {
+                for (let attrib of curInfo._attributes) {
+                    // Only map if there's no category assigned to the instance data or if there's a category and it's in the given list
+                    if (!attrib.category || categories.indexOf(attrib.category) !== -1) {
+                        res.push(attrib.attributeName);
+                    }
+                }
+
+                curInfo = curInfo._baseInfo;
+            }
+            return res;
+        }
+
+        private _getBaseOffset(categories: string): number {
+            let curOffset = 0;
+            let curBase = this._baseInfo;
+            while (curBase) {
+                curOffset += curBase._nextOffset.getOrAdd(categories, 0);
+                curBase = curBase._baseInfo;
+            }
+            return curOffset;
+        }
+
+        static _CurCategories: string;
+        private _baseInfo: InstanceClassInfo;
+        private _nextOffset: StringDictionary<number>;
+        private _attributes: Array<InstancePropInfo>;
+    }
+
+    export class InstancePropInfo {
+        attributeName: string;
+        category: string;
+        size: number;
+        shaderOffset: number;
+        instanceOffset: StringDictionary<number>;
+        dataType: ShaderDataType;
+        //uniformLocation: WebGLUniformLocation;
+
+        delimitedCategory: string;
+
+        constructor() {
+            this.instanceOffset = new StringDictionary<number>();
+        }
+
+        setSize(val) {
+            if (val instanceof Vector2) {
+                this.size = 8;
+                this.dataType = ShaderDataType.Vector2;
+                return;
+            }
+            if (val instanceof Vector3) {
+                this.size = 12;
+                this.dataType = ShaderDataType.Vector3;
+                return;
+            }
+            if (val instanceof Vector4) {
+                this.size = 16;
+                this.dataType = ShaderDataType.Vector4;
+                return;
+            }
+            if (val instanceof Matrix) {
+                throw new Error("Matrix type is not supported by WebGL Instance Buffer, you have to use four Vector4 properties instead");
+            }
+            if (typeof (val) === "number") {
+                this.size = 4;
+                this.dataType = ShaderDataType.float;
+                return;
+            }
+            if (val instanceof Color3) {
+                this.size = 12;
+                this.dataType = ShaderDataType.Color3;
+                return;
+            }
+            if (val instanceof Color4) {
+                this.size = 16;
+                this.dataType = ShaderDataType.Color4;
+                return;
+            }
+            if (val instanceof Size) {
+                this.size = 8;
+                this.dataType = ShaderDataType.Size;
+                return;
+            }            return;
+        }
+
+        writeData(array: Float32Array, offset: number, val) {
+            switch (this.dataType) {
+                case ShaderDataType.Vector2:
+                    {
+                        let v = <Vector2>val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        break;
+                    }
+                case ShaderDataType.Vector3:
+                    {
+                        let v = <Vector3>val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        array[offset + 2] = v.z;
+                        break;
+                    }
+                case ShaderDataType.Vector4:
+                    {
+                        let v = <Vector4>val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        array[offset + 2] = v.z;
+                        array[offset + 3] = v.w;
+                        break;
+                    }
+                case ShaderDataType.Color3:
+                    {
+                        let v = <Color3>val;
+                        array[offset + 0] = v.r;
+                        array[offset + 1] = v.g;
+                        array[offset + 2] = v.b;
+                        break;
+                    }
+                case ShaderDataType.Color4:
+                    {
+                        let v = <Color4>val;
+                        array[offset + 0] = v.r;
+                        array[offset + 1] = v.g;
+                        array[offset + 2] = v.b;
+                        array[offset + 3] = v.a;
+                        break;
+                    }
+                case ShaderDataType.float:
+                    {
+                        let v = <number>val;
+                        array[offset] = v;
+                        break;
+                    }
+                case ShaderDataType.Matrix:
+                    {
+                        let v = <Matrix>val;
+                        for (let i = 0; i < 16; i++) {
+                            array[offset + i] = v.m[i];
+                        }
+                        break;
+                    }
+                case ShaderDataType.Size:
+                    {
+                        let s = <Size>val;
+                        array[offset + 0] = s.width;
+                        array[offset + 1] = s.height;
+                        break;
+                    }
+            }
+        }
+    }
+
+    export function instanceData<T>(category?: string, shaderAttributeName?: string): (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => void {
+        return (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => {
+
+            let dic = ClassTreeInfo.getOrRegister<InstanceClassInfo, InstancePropInfo>(target, (base) => new InstanceClassInfo(base));
+            let node = dic.getLevelOf(target);
+            let instanceDataName = <string>propName;
+            shaderAttributeName = shaderAttributeName || instanceDataName;
+
+
+            let info = node.levelContent.get(instanceDataName);
+            if (info) {
+                throw new Error(`The ID ${instanceDataName} is already taken by another instance data`);
+            }
+
+            info = new InstancePropInfo();
+            info.attributeName = shaderAttributeName;
+            info.category = category || null;
+            if (info.category) {
+                info.delimitedCategory = ";" + info.category + ";";
+            }
+
+            node.levelContent.add(instanceDataName, info);
+
+            descriptor.get = function () {
+                return null;
+            }
+
+            descriptor.set = function (val) {
+                // Check that we're not trying to set a property that belongs to a category that is not allowed (current)
+                // Quit if it's the case, otherwise we could overwrite data somewhere...
+                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 obj: InstanceDataBase = this;
+                if (obj.dataBuffer && obj.dataElements) {
+                    let offset = obj.dataElements[obj.curElement].offset + info.instanceOffset.get(InstanceClassInfo._CurCategories);
+                    info.writeData(obj.dataBuffer.buffer, offset, val);
+                }
+            }
+
+        }
+    }
+
+    export class InstanceDataBase {
+        constructor(partId: number, dataElementCount: number) {
+            this.id = partId;
+            this.curElement = 0;
+            this._dataElementCount = dataElementCount;
+            this.renderMode = 0;
+            this.arrayLengthChanged = false;
+        }
+
+        id: number;
+        isVisible: boolean;
+
+        @instanceData()
+        get zBias(): Vector2 {
+            return null;
+        }
+        set zBias(value: Vector2) {
+        }
+
+
+        @instanceData()
+        get transformX(): Vector4 {
+            return null;
+        }
+        set transformX(value: Vector4) {
+        }
+
+        @instanceData()
+        get transformY(): Vector4 {
+            return null;
+        }
+        set transformY(value: Vector4) {
+        }
+
+        @instanceData()
+        get opacity(): number {
+            return null;
+        }
+        set opacity(value: number) {
+        }
+
+        getClassTreeInfo(): ClassTreeInfo<InstanceClassInfo, InstancePropInfo> {
+            if (!this.typeInfo) {
+                this.typeInfo = ClassTreeInfo.get<InstanceClassInfo, InstancePropInfo>(Object.getPrototypeOf(this));
+            }
+            return this.typeInfo;
+        }
+
+        allocElements() {
+            if (!this.dataBuffer || this.dataElements) {
+                return;
+            }
+            let res = new Array<DynamicFloatArrayElementInfo>(this.dataElementCount);
+            for (let i = 0; i < this.dataElementCount; i++) {
+                res[i] = this.dataBuffer.allocElement();
+            }
+            this.dataElements = res;
+        }
+
+        freeElements() {
+            if (!this.dataElements) {
+                return;
+            }
+            for (let ei of this.dataElements) {
+                this.dataBuffer.freeElement(ei);
+            }
+            this.dataElements = null;
+        }
+
+        get dataElementCount(): number {
+            return this._dataElementCount;
+        }
+
+        set dataElementCount(value: number) {
+            if (value === this._dataElementCount) {
+                return;
+            }
+
+            this.arrayLengthChanged = true;
+            this.freeElements();
+            this._dataElementCount = value;
+            this.allocElements();
+        }
+        groupInstanceInfo: GroupInstanceInfo;
+        arrayLengthChanged: boolean;
+        curElement: number;
+        renderMode: number;
+        dataElements: DynamicFloatArrayElementInfo[];
+        dataBuffer: DynamicFloatArray;
+        typeInfo: ClassTreeInfo<InstanceClassInfo, InstancePropInfo>;
+
+        private _dataElementCount: number;
+    }
+
+    @className("RenderablePrim2D", "BABYLON")
+    /**
+     * The abstract class for primitive that render into the Canvas2D
+     */
+    export abstract class RenderablePrim2D extends Prim2DBase {
+        static RENDERABLEPRIM2D_PROPCOUNT: number = Prim2DBase.PRIM2DBASE_PROPCOUNT + 5;
+
+        public static isAlphaTestProperty: Prim2DPropInfo;
+        public static isTransparentProperty: Prim2DPropInfo;
+
+        @dynamicLevelProperty(Prim2DBase.PRIM2DBASE_PROPCOUNT + 0, pi => RenderablePrim2D.isAlphaTestProperty = pi)
+        /**
+         * Get/set if the Primitive is from the AlphaTest rendering category.
+         * The AlphaTest category is the rendering pass with alpha blend, depth compare and write activated.
+         * Primitives that render with an alpha mask should be from this category.
+         * The setter should be used only by implementers of new primitive type.
+         */
+        public get isAlphaTest(): boolean {
+            return this._useTextureAlpha() || this._isPrimAlphaTest();
+        }
+
+        @dynamicLevelProperty(Prim2DBase.PRIM2DBASE_PROPCOUNT + 1, pi => RenderablePrim2D.isTransparentProperty = pi)
+        /**
+         * Get/set if the Primitive is from the Transparent rendering category.
+         * The setter should be used only by implementers of new primitive type.
+         */
+        public get isTransparent(): boolean {
+            return (this.actualOpacity<1) || this._shouldUseAlphaFromTexture() || this._isPrimTransparent();
+        }
+
+        public get renderMode(): number {
+            return this._renderMode;
+        }
+
+        constructor(settings?: {
+            parent       ?: Prim2DBase, 
+            id           ?: string,
+            origin       ?: Vector2,
+            isVisible    ?: boolean,
+        }) {
+            super(settings);
+
+            this._transparentPrimitiveInfo = null;
+        }
+
+        /**
+         * Dispose the primitive and its resources, remove it from its parent
+         */
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.renderGroup) {
+                this.renderGroup._setCacheGroupDirty();
+            }
+
+            if (this._transparentPrimitiveInfo) {
+                this.renderGroup._renderableData.removeTransparentPrimitiveInfo(this._transparentPrimitiveInfo);
+                this._transparentPrimitiveInfo = null;
+            }
+
+            if (this._instanceDataParts) {
+                this._cleanupInstanceDataParts();
+            }
+
+            if (this._modelRenderCache) {
+                this._modelRenderCache.dispose();
+                this._modelRenderCache = null;
+            }
+
+            if (this._instanceDataParts) {
+                this._instanceDataParts.forEach(p => {
+                    p.freeElements();
+                });
+                this._instanceDataParts = null;
+            }
+
+            return true;
+        }
+
+        private _cleanupInstanceDataParts() {
+            let gii: GroupInstanceInfo = null;
+            for (let part of this._instanceDataParts) {
+                part.freeElements();
+                gii = part.groupInstanceInfo;
+            }
+            if (gii) {
+                let usedCount = 0;
+                if (gii.hasOpaqueData) {
+                    let od = gii.opaqueData[0];
+                    usedCount += od._partData.usedElementCount;
+                    gii.opaqueDirty = true;
+                }
+                if (gii.hasAlphaTestData) {
+                    let atd = gii.alphaTestData[0];
+                    usedCount += atd._partData.usedElementCount;
+                    gii.alphaTestDirty = true;
+                }
+                if (gii.hasTransparentData) {
+                    let td = gii.transparentData[0];
+                    usedCount += td._partData.usedElementCount;
+                    gii.transparentDirty = true;
+                }
+
+                if (usedCount === 0 && gii.modelRenderCache!=null) {
+                    this.renderGroup._renderableData._renderGroupInstancesInfo.remove(gii.modelRenderCache.modelKey);
+                    gii.dispose();
+                }
+
+                if (this._modelRenderCache) {
+                    this._modelRenderCache.dispose();
+                    this._modelRenderCache = null;
+                }
+
+            }
+            this._instanceDataParts = null;
+        }
+
+        public _prepareRenderPre(context: PrepareRender2DContext) {
+            super._prepareRenderPre(context);
+
+            // If the model changed and we have already an instance, we must remove this instance from the obsolete model
+            if (this._isFlagSet(SmartPropertyPrim.flagModelDirty) && this._instanceDataParts) {
+                this._cleanupInstanceDataParts();
+            }
+
+            // Need to create the model?
+            let setupModelRenderCache = false;
+            if (!this._modelRenderCache || this._isFlagSet(SmartPropertyPrim.flagModelDirty)) {
+                setupModelRenderCache = this._createModelRenderCache();
+            }
+
+            let gii: GroupInstanceInfo = null;
+            let newInstance = false;
+
+            // Need to create the instance data parts?
+            if (!this._instanceDataParts) {
+                // Yes, flag it for later, more processing will have to be done
+                newInstance = true;
+                gii = this._createModelDataParts();
+            }
+
+            // If the ModelRenderCache is brand new, now is the time to call the implementation's specific setup method to create the rendering resources
+            if (setupModelRenderCache) {
+                this.setupModelRenderCache(this._modelRenderCache);
+            }
+
+            // At this stage we have everything correctly initialized, ModelRenderCache is setup, Model Instance data are good too, they have allocated elements in the Instanced DynamicFloatArray.
+
+            // The last thing to do is check if the instanced related data must be updated because a InstanceLevel property had changed or the primitive visibility changed.
+            if (this._areSomeFlagsSet(SmartPropertyPrim.flagVisibilityChanged | SmartPropertyPrim.flagNeedRefresh) || context.forceRefreshPrimitive || newInstance || (this._instanceDirtyFlags !== 0) || (this._globalTransformProcessStep !== this._globalTransformStep) || this._mustUpdateInstance()) {
+
+                this._updateInstanceDataParts(gii);
+            }
+        }
+
+        private _createModelRenderCache(): boolean {
+            let setupModelRenderCache = false;
+
+            if (this._modelRenderCache) {
+                this._modelRenderCache.dispose();
+            }
+            this._modelRenderCache = this.owner._engineData.GetOrAddModelCache(this.modelKey, (key: string) => {
+                let mrc = this.createModelRenderCache(key);
+                setupModelRenderCache = true;
+                return mrc;
+            });
+            this._clearFlags(SmartPropertyPrim.flagModelDirty);
+
+            // if this is still false it means the MRC already exists, so we add a reference to it
+            if (!setupModelRenderCache) {
+                this._modelRenderCache.addRef();
+            }
+
+            return setupModelRenderCache;
+        }
+
+        private _createModelDataParts(): GroupInstanceInfo {
+            // Create the instance data parts of the primitive and store them
+            let parts = this.createInstanceDataParts();
+            this._instanceDataParts = parts;
+
+            // Check if the ModelRenderCache for this particular instance is also brand new, initialize it if it's the case
+            if (!this._modelRenderCache._partData) {
+                this._setupModelRenderCache(parts);
+            }
+
+            // The Rendering resources (Effect, VB, IB, Textures) are stored in the ModelRenderCache
+            // But it's the RenderGroup that will store all the Instanced related data to render all the primitive it owns.
+            // So for a given ModelKey we getOrAdd a GroupInstanceInfo that will store all these data
+            let gii = this.renderGroup._renderableData._renderGroupInstancesInfo.getOrAddWithFactory(this.modelKey, k => {
+
+                let res = new GroupInstanceInfo(this.renderGroup, this._modelRenderCache, this._modelRenderCache._partData.length);
+
+                for (let j = 0; j < this._modelRenderCache._partData.length; j++) {
+                    let part = this._instanceDataParts[j];
+                    res.partIndexFromId.add(part.id.toString(), j);
+                    res.usedShaderCategories[j] = ";" + this.getUsedShaderCategories(part).join(";") + ";";
+                    res.strides[j] = this._modelRenderCache._partData[j]._partDataStride;
+                }
+
+                return res;
+            });
+
+            // Get the GroupInfoDataPart corresponding to the render category of the part
+            let rm = 0;
+            let gipd: GroupInfoPartData[] = null;
+            if (this.isTransparent) {
+                gipd = gii.transparentData;
+                rm = Render2DContext.RenderModeTransparent;
+            } else if (this.isAlphaTest) {
+                gipd = gii.alphaTestData;
+                rm = Render2DContext.RenderModeAlphaTest;
+            } else {
+                gipd = gii.opaqueData;
+                rm = Render2DContext.RenderModeOpaque;
+            }
+
+            // For each instance data part of the primitive, allocate the instanced element it needs for render
+            for (let i = 0; i < parts.length; i++) {
+                let part = parts[i];
+                part.dataBuffer = gipd[i]._partData;
+                part.allocElements();
+                part.renderMode = rm;
+                part.groupInstanceInfo = gii;
+            }
+
+            return gii;
+        }
+
+        private _setupModelRenderCache(parts: InstanceDataBase[]) {
+            let ctiArray = new Array<ClassTreeInfo<InstanceClassInfo, InstancePropInfo>>();
+            this._modelRenderCache._partData = new Array<ModelRenderCachePartData>();
+            for (let dataPart of parts) {
+                var pd = new ModelRenderCachePartData();
+                this._modelRenderCache._partData.push(pd)
+                var cat = this.getUsedShaderCategories(dataPart);
+                var cti = dataPart.getClassTreeInfo();
+                // Make sure the instance is visible other the properties won't be set and their size/offset wont be computed
+                let curVisible = this.isVisible;
+                this.isVisible = true;
+                // We manually trigger refreshInstanceData for the only sake of evaluating each instance property size and offset in the instance data, this can only be made at runtime. Once it's done we have all the information to create the instance data buffer.
+                //console.log("Build Prop Layout for " + Tools.getClassName(this._instanceDataParts[0]));
+                var joinCat = ";" + cat.join(";") + ";";
+                pd._partJoinedUsedCategories = joinCat;
+                InstanceClassInfo._CurCategories = joinCat;
+                let obj = this.beforeRefreshForLayoutConstruction(dataPart);
+                if (!this.refreshInstanceDataPart(dataPart)) {
+                    console.log(`Layout construction for ${Tools.getClassName(this._instanceDataParts[0])} failed because refresh returned false`);
+                }
+                this.afterRefreshForLayoutConstruction(dataPart, obj);
+                this.isVisible = curVisible;
+
+                var size = 0;
+                cti.fullContent.forEach((k, v) => {
+                    if (!v.category || cat.indexOf(v.category) !== -1) {
+                        if (v.attributeName === "zBias") {
+                            pd._zBiasOffset = v.instanceOffset.get(joinCat);
+                        }
+                        if (!v.size) {
+                            console.log(`ERROR: Couldn't detect the size of the Property ${v.attributeName} from type ${Tools.getClassName(cti.type)}. Property is ignored.`);
+                        } else {
+                            size += v.size;
+                        }
+                    }
+                });
+                pd._partDataStride = size;
+                pd._partUsedCategories = cat;
+                pd._partId = dataPart.id;
+                ctiArray.push(cti);
+            }
+            this._modelRenderCache._partsClassInfo = ctiArray;
+        }
+
+        protected onZOrderChanged() {
+            if (this.isTransparent && this._transparentPrimitiveInfo) {
+                this.renderGroup._renderableData.transparentPrimitiveZChanged(this._transparentPrimitiveInfo);
+                let gii = this.renderGroup._renderableData._renderGroupInstancesInfo.get(this.modelKey);
+
+                // Flag the transparentData dirty has will have to sort it again
+                gii.transparentOrderDirty = true;
+            }
+        }
+
+        protected _mustUpdateInstance(): boolean {
+            return false;
+        }
+
+        protected _useTextureAlpha(): boolean {
+            return false;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return false;
+        }
+
+        protected _isPrimAlphaTest(): boolean {
+            return false;
+        }
+
+        protected _isPrimTransparent(): boolean {
+            return false;
+        }
+
+        private _updateInstanceDataParts(gii: GroupInstanceInfo) {
+            // Fetch the GroupInstanceInfo if we don't already have it
+            let rd = this.renderGroup._renderableData;
+            if (!gii) {
+                gii = rd._renderGroupInstancesInfo.get(this.modelKey);
+            }
+
+            let isTransparent = this.isTransparent;
+            let isAlphaTest = this.isAlphaTest;
+            let wereTransparent = false;
+
+            // Check a render mode change
+            let rmChanged = false;
+            if (this._instanceDataParts.length>0) {
+                let firstPart = this._instanceDataParts[0];
+                let partRM = firstPart.renderMode;
+                let curRM = this.renderMode;
+
+                if (partRM !== curRM) {
+                    wereTransparent = partRM === Render2DContext.RenderModeTransparent;
+                    rmChanged = true;
+                    let gipd: TransparentGroupInfoPartData[];
+                    switch (curRM) {
+                        case Render2DContext.RenderModeTransparent:
+                            gipd = gii.transparentData;
+                            break;
+                        case Render2DContext.RenderModeAlphaTest:
+                            gipd = gii.alphaTestData;
+                            break;
+                        default:
+                            gipd = gii.opaqueData;
+                    }
+
+                    for (let i = 0; i < this._instanceDataParts.length; i++) {
+                        let part = this._instanceDataParts[i];
+                        part.freeElements();
+                        part.dataBuffer = gipd[i]._partData;
+                        part.renderMode = curRM;
+                    }
+
+                }
+            }
+
+            // Handle changes related to ZOffset
+            let visChanged = this._isFlagSet(SmartPropertyPrim.flagVisibilityChanged);
+
+            if (isTransparent || wereTransparent) {
+                // Handle visibility change, which is also triggered when the primitive just got created
+                if (visChanged || rmChanged) {
+                    if (this.isVisible && !wereTransparent) {
+                        if (!this._transparentPrimitiveInfo) {
+                            // Add the primitive to the list of transparent ones in the group that render is
+                            this._transparentPrimitiveInfo = rd.addNewTransparentPrimitiveInfo(this, gii);
+                        }
+                    } else {
+                        if (this._transparentPrimitiveInfo) {
+                            rd.removeTransparentPrimitiveInfo(this._transparentPrimitiveInfo);
+                            this._transparentPrimitiveInfo = null;
+                        }
+                    }
+                    gii.transparentOrderDirty = true;
+                }
+            }
+
+            let rebuildTrans = false;
+
+            // For each Instance Data part, refresh it to update the data in the DynamicFloatArray
+            for (let part of this._instanceDataParts) {
+                let justAllocated = false;
+                // Check if we need to allocate data elements (hidden prim which becomes visible again)
+                if (!part.dataElements && (visChanged || rmChanged || this.isVisible)) {
+                    part.allocElements();
+                    justAllocated = true;
+                }
+
+                InstanceClassInfo._CurCategories = gii.usedShaderCategories[gii.partIndexFromId.get(part.id.toString())];
+
+                // Will return false if the instance should not be rendered (not visible or other any reasons)
+                part.arrayLengthChanged = false;
+                if (!this.refreshInstanceDataPart(part)) {
+                    // Free the data element
+                    if (part.dataElements) {
+                        part.freeElements();
+                    }
+
+                    // The refresh couldn't succeed, push the primitive to be dirty again for the next render
+                    if (this.isVisible) {
+                        rd._primNewDirtyList.push(this);
+                    }
+                }
+
+                rebuildTrans = rebuildTrans || part.arrayLengthChanged || justAllocated;
+            }
+            this._instanceDirtyFlags = 0;
+
+            // Make the appropriate data dirty
+            if (isTransparent) {
+                gii.transparentDirty = true;
+                if (rebuildTrans) {
+                    rd._transparentListChanged = true;
+                }
+            } else if (isAlphaTest) {
+                gii.alphaTestDirty = true;
+            } else {
+                gii.opaqueDirty = true;
+            }
+
+            this._clearFlags(SmartPropertyPrim.flagVisibilityChanged);    // Reset the flag as we've handled the case            
+        }
+
+        _updateTransparentSegmentIndices(ts: TransparentSegment) {
+            let minOff = Prim2DBase._bigInt;
+            let maxOff = 0;
+
+            for (let part of this._instanceDataParts) {
+                if (part && part.dataElements) {
+                    part.dataBuffer.pack();
+                    for (let el of part.dataElements) {
+                        minOff = Math.min(minOff, el.offset);
+                        maxOff = Math.max(maxOff, el.offset);
+                    }
+                    ts.startDataIndex = Math.min(ts.startDataIndex, minOff / part.dataBuffer.stride);
+                    ts.endDataIndex = Math.max(ts.endDataIndex, (maxOff / part.dataBuffer.stride) + 1); // +1 for exclusive
+                }
+            }
+        }
+
+
+        // This internal method is mainly used for transparency processing
+        public _getNextPrimZOrder(): number {
+            let length = this._instanceDataParts.length;
+            for (let i = 0; i < length; i++) {
+                let part = this._instanceDataParts[i];
+                if (part) {
+                    let stride = part.dataBuffer.stride;
+                    let lastElementOffset = part.dataElements[part.dataElements.length - 1].offset;
+
+                    // check if it's the last in the DFA
+                    if (part.dataBuffer.totalElementCount * stride <= lastElementOffset) {
+                        return null;
+                    }
+
+                    // Return the Z of the next primitive that lies in the DFA
+                    return part.dataBuffer[lastElementOffset + stride + this.modelRenderCache._partData[i]._zBiasOffset];
+                }
+            }
+            return null;
+        }
+
+        // This internal method is mainly used for transparency processing
+        public _getPrevPrimZOrder(): number {
+            let length = this._instanceDataParts.length;
+            for (let i = 0; i < length; i++) {
+                let part = this._instanceDataParts[i];
+                if (part) {
+                    let stride = part.dataBuffer.stride;
+                    let firstElementOffset = part.dataElements[0].offset;
+
+                    // check if it's the first in the DFA
+                    if (firstElementOffset === 0) {
+                        return null;
+                    }
+
+                    // Return the Z of the previous primitive that lies in the DFA
+                    return part.dataBuffer[firstElementOffset - stride + this.modelRenderCache._partData[i]._zBiasOffset];
+                }
+            }
+            return null;
+        }
+
+        /**
+         * Transform a given point using the Primitive's origin setting.
+         * This method requires the Primitive's actualSize to be accurate
+         * @param p the point to transform
+         * @param originOffset an offset applied on the current origin before performing the transformation. Depending on which frame of reference your data is expressed you may have to apply a offset. (if you data is expressed from the bottom/left, no offset is required. If it's expressed from the center the a [-0.5;-0.5] offset has to be applied.
+         * @param res an allocated Vector2 that will receive the transformed content
+         */
+        protected transformPointWithOriginByRef(p: Vector2, originOffset:Vector2, res: Vector2) {
+            let actualSize = this.actualSize;
+            res.x = p.x - ((this.origin.x + (originOffset ? originOffset.x : 0)) * actualSize.width);
+            res.y = p.y - ((this.origin.y + (originOffset ? originOffset.y : 0)) * actualSize.height);
+        }
+
+        protected transformPointWithOriginToRef(p: Vector2, originOffset: Vector2, res: Vector2) {
+            this.transformPointWithOriginByRef(p, originOffset, res);
+            return res;
+        }
+
+        /**
+         * Get the info for a given effect based on the dataPart metadata
+         * @param dataPartId partId in part list to get the info
+         * @param vertexBufferAttributes vertex buffer attributes to manually add
+         * @param uniforms uniforms to manually add
+         * @param useInstanced specified if Instanced Array should be used, if null the engine caps will be used (so true if WebGL supports it, false otherwise), but you have the possibility to override the engine capability. However, if you manually set true but the engine does not support Instanced Array, this method will return null
+         */
+        protected getDataPartEffectInfo(dataPartId: number, vertexBufferAttributes: string[], uniforms: string[] = null, useInstanced: boolean = null): { attributes: string[], uniforms: string[], defines: string } {
+            let dataPart = Tools.first(this._instanceDataParts, i => i.id === dataPartId);
+            if (!dataPart) {
+                return null;
+            }
+
+            let instancedArray = this.owner.supportInstancedArray;
+            if (useInstanced != null) {
+                // Check if the caller ask for Instanced Array and the engine does not support it, return null if it's the case
+                if (useInstanced && instancedArray === false) {
+                    return null;
+                }
+
+                // Use the caller's setting
+                instancedArray = useInstanced;
+            }
+
+            let cti = dataPart.getClassTreeInfo();
+            let categories = this.getUsedShaderCategories(dataPart);
+            let att = cti.classContent.getShaderAttributes(categories);
+            let defines = "";
+            categories.forEach(c => { defines += `#define ${c}\n` });
+            if (instancedArray) {
+                defines += "#define Instanced\n";
+            }
+
+            return {
+                attributes: instancedArray ? vertexBufferAttributes.concat(att) : vertexBufferAttributes,
+                uniforms: instancedArray ? (uniforms != null ? uniforms : []) : ((uniforms != null) ? att.concat(uniforms) : (att!=null ? att : [])),
+                defines: defines
+            };
+        }
+
+        protected get modelRenderCache(): ModelRenderCache {
+            return this._modelRenderCache;
+        }
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            return null;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            return null;
+        }
+
+        protected getUsedShaderCategories(dataPart: InstanceDataBase): string[] {
+            return [];
+        }
+
+        protected beforeRefreshForLayoutConstruction(part: InstanceDataBase): any {
+
+        }
+
+        protected afterRefreshForLayoutConstruction(part: InstanceDataBase, obj: any) {
+
+        }
+
+        protected applyActualScaleOnTransform(): boolean {
+            return true;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!this.isVisible) {
+                return false;
+            }
+            part.isVisible = this.isVisible;
+
+            // Which means, if there's only one data element, we're update it from this method, otherwise it is the responsibility of the derived class to call updateInstanceDataPart as many times as needed, properly (look at Text2D's implementation for more information)
+            if (part.dataElementCount === 1) {
+                part.curElement = 0;
+                this.updateInstanceDataPart(part);
+            }
+            return true;
+        }
+
+        private static _uV = new Vector2(1, 1);
+
+        /**
+         * Update the instanceDataBase level properties of a part
+         * @param part the part to update
+         * @param positionOffset to use in multi part per primitive (e.g. the Text2D has N parts for N letter to display), this give the offset to apply (e.g. the position of the letter from the bottom/left corner of the text).
+         */
+        protected updateInstanceDataPart(part: InstanceDataBase, positionOffset: Vector2 = null) {
+            let t = this._globalTransform.multiply(this.renderGroup.invGlobalTransform);    // Compute the transformation into the renderGroup's space
+            let rgScale = this._areSomeFlagsSet(SmartPropertyPrim.flagDontInheritParentScale) ? RenderablePrim2D._uV : this.renderGroup.actualScale;         // We still need to apply the scale of the renderGroup to our rendering, so get it.
+            let size = (<Size>this.renderGroup.viewportSize);
+            let zBias = this.actualZOffset;
+
+            let offX = 0;
+            let offY = 0;
+            // If there's an offset, apply the global transformation matrix on it to get a global offset
+            if (positionOffset) {
+                offX = positionOffset.x * t.m[0] + positionOffset.y * t.m[4];
+                offY = positionOffset.x * t.m[1] + positionOffset.y * t.m[5];
+            }
+
+            // Have to convert the coordinates to clip space which is ranged between [-1;1] on X and Y axis, with 0,0 being the left/bottom corner
+            // Current coordinates are expressed in renderGroup coordinates ([0, renderGroup.actualSize.width|height]) with 0,0 being at the left/top corner
+            // So for X: 
+            //  - tx.x = value * 2 / width: is to switch from [0, renderGroup.width] to [0, 2]
+            //  - tx.w = (value * 2 / width) - 1: w stores the translation in renderGroup coordinates so (value * 2 / width) to switch to a clip space translation value. - 1 is to offset the overall [0;2] to [-1;1].
+            // At last we don't forget to apply the actualScale of the Render Group to tx[0] and ty[1] to propagate scaling correctly
+            let w = size.width;
+            let h = size.height;
+            let invZBias = 1 / zBias;
+            let tx = new Vector4(t.m[0] * rgScale.x * 2 / w, t.m[4] * 2 / w, 0/*t.m[8]*/, ((t.m[12] + offX) * rgScale.x * 2 / w) - 1);
+            let ty = new Vector4(t.m[1] * 2 / h, t.m[5] * rgScale.y * 2 / h, 0/*t.m[9]*/, ((t.m[13] + offY) * rgScale.y * 2 / h) - 1);
+
+            if (!this.applyActualScaleOnTransform()) {
+                let las = this.actualScale;
+                tx.x /= las.x;
+                ty.y /= las.y;
+            }
+
+            part.transformX = tx;
+            part.transformY = ty;
+            part.opacity = this.actualOpacity;
+
+            // Stores zBias and it's inverse value because that's needed to compute the clip space W coordinate (which is 1/Z, so 1/zBias)
+            part.zBias = new Vector2(zBias, invZBias);
+        }
+
+        protected _updateRenderMode() {
+            if (this.isTransparent) {
+                this._renderMode = Render2DContext.RenderModeTransparent;
+            } else if (this.isAlphaTest) {
+                this._renderMode = Render2DContext.RenderModeAlphaTest;
+            } else {
+                this._renderMode = Render2DContext.RenderModeOpaque;
+            }
+        }
+
+        private _modelRenderCache: ModelRenderCache;
+        private _transparentPrimitiveInfo: TransparentPrimitiveInfo;
+
+        protected _instanceDataParts: InstanceDataBase[];
+        private _renderMode: number;
+    }
+
+
+}

canvas2D/src/Engine/babylon.shape2d.js

@@ -0,0 +1,308 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Shape2D = (function (_super) {
+        __extends(Shape2D, _super);
+        function Shape2D(settings) {
+            _super.call(this, settings);
+            if (!settings) {
+                settings = {};
+            }
+            var borderBrush = null;
+            if (settings.border) {
+                if (typeof (settings.border) === "string") {
+                    borderBrush = BABYLON.Canvas2D.GetBrushFromString(settings.border);
+                }
+                else {
+                    borderBrush = settings.border;
+                }
+            }
+            var fillBrush = null;
+            if (settings.fill) {
+                if (typeof (settings.fill) === "string") {
+                    fillBrush = BABYLON.Canvas2D.GetBrushFromString(settings.fill);
+                }
+                else {
+                    fillBrush = settings.fill;
+                }
+            }
+            this._isTransparent = false;
+            this._oldTransparent = false;
+            this.border = borderBrush;
+            this.fill = fillBrush;
+            this._updateTransparencyStatus();
+            this.borderThickness = settings.borderThickness;
+        }
+        Object.defineProperty(Shape2D.prototype, "border", {
+            get: function () {
+                return this._border;
+            },
+            set: function (value) {
+                this._border = value;
+                this._updateTransparencyStatus();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2D.prototype, "fill", {
+            /**
+             * Get/set the brush to render the Fill part of the Primitive
+             */
+            get: function () {
+                return this._fill;
+            },
+            set: function (value) {
+                this._fill = value;
+                this._updateTransparencyStatus();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2D.prototype, "borderThickness", {
+            get: function () {
+                return this._borderThickness;
+            },
+            set: function (value) {
+                this._borderThickness = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Shape2D.prototype.getUsedShaderCategories = function (dataPart) {
+            var cat = _super.prototype.getUsedShaderCategories.call(this, dataPart);
+            // Fill Part
+            if (dataPart.id === Shape2D.SHAPE2D_FILLPARTID) {
+                var fill = this.fill;
+                if (fill instanceof BABYLON.SolidColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLSOLID);
+                }
+                if (fill instanceof BABYLON.GradientColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT);
+                }
+            }
+            // Border Part
+            if (dataPart.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                cat.push(Shape2D.SHAPE2D_CATEGORY_BORDER);
+                var border = this.border;
+                if (border instanceof BABYLON.SolidColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID);
+                }
+                if (border instanceof BABYLON.GradientColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT);
+                }
+            }
+            return cat;
+        };
+        Shape2D.prototype.applyActualScaleOnTransform = function () {
+            return false;
+        };
+        Shape2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            // Fill Part
+            if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
+                var d = part;
+                if (this.fill) {
+                    var fill = this.fill;
+                    if (fill instanceof BABYLON.SolidColorBrush2D) {
+                        d.fillSolidColor = fill.color;
+                    }
+                    else if (fill instanceof BABYLON.GradientColorBrush2D) {
+                        d.fillGradientColor1 = fill.color1;
+                        d.fillGradientColor2 = fill.color2;
+                        var t = BABYLON.Matrix.Compose(new BABYLON.Vector3(fill.scale, fill.scale, fill.scale), BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(0, 0, 1), fill.rotation), new BABYLON.Vector3(fill.translation.x, fill.translation.y, 0));
+                        var ty = new BABYLON.Vector4(t.m[1], t.m[5], t.m[9], t.m[13]);
+                        d.fillGradientTY = ty;
+                    }
+                }
+            }
+            else if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                var d = part;
+                if (this.border) {
+                    d.borderThickness = this.borderThickness;
+                    var border = this.border;
+                    if (border instanceof BABYLON.SolidColorBrush2D) {
+                        d.borderSolidColor = border.color;
+                    }
+                    else if (border instanceof BABYLON.GradientColorBrush2D) {
+                        d.borderGradientColor1 = border.color1;
+                        d.borderGradientColor2 = border.color2;
+                        var t = BABYLON.Matrix.Compose(new BABYLON.Vector3(border.scale, border.scale, border.scale), BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(0, 0, 1), border.rotation), new BABYLON.Vector3(border.translation.x, border.translation.y, 0));
+                        var ty = new BABYLON.Vector4(t.m[1], t.m[5], t.m[9], t.m[13]);
+                        d.borderGradientTY = ty;
+                    }
+                }
+            }
+            return true;
+        };
+        Shape2D.prototype._updateTransparencyStatus = function () {
+            this._isTransparent = (this._border && this._border.isTransparent()) || (this._fill && this._fill.isTransparent()) || (this.actualOpacity < 1);
+            if (this._isTransparent !== this._oldTransparent) {
+                this._oldTransparent = this._isTransparent;
+                this._updateRenderMode();
+            }
+        };
+        Shape2D.prototype._mustUpdateInstance = function () {
+            var res = this._oldTransparent !== this._isTransparent;
+            if (res) {
+                this._updateRenderMode();
+                this._oldTransparent = this._isTransparent;
+            }
+            return res;
+        };
+        Shape2D.prototype._isPrimTransparent = function () {
+            return this._isTransparent;
+        };
+        Shape2D.SHAPE2D_BORDERPARTID = 1;
+        Shape2D.SHAPE2D_FILLPARTID = 2;
+        Shape2D.SHAPE2D_CATEGORY_BORDER = "Border";
+        Shape2D.SHAPE2D_CATEGORY_BORDERSOLID = "BorderSolid";
+        Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT = "BorderGradient";
+        Shape2D.SHAPE2D_CATEGORY_FILLSOLID = "FillSolid";
+        Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT = "FillGradient";
+        Shape2D.SHAPE2D_PROPCOUNT = BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5;
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, function (pi) { return Shape2D.borderProperty = pi; }, true)
+        ], Shape2D.prototype, "border", null);
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, function (pi) { return Shape2D.fillProperty = pi; }, true)
+        ], Shape2D.prototype, "fill", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, function (pi) { return Shape2D.borderThicknessProperty = pi; })
+        ], Shape2D.prototype, "borderThickness", null);
+        Shape2D = __decorate([
+            BABYLON.className("Shape2D", "BABYLON")
+        ], Shape2D);
+        return Shape2D;
+    }(BABYLON.RenderablePrim2D));
+    BABYLON.Shape2D = Shape2D;
+    var Shape2DInstanceData = (function (_super) {
+        __extends(Shape2DInstanceData, _super);
+        function Shape2DInstanceData() {
+            _super.apply(this, arguments);
+        }
+        Object.defineProperty(Shape2DInstanceData.prototype, "fillSolidColor", {
+            // FILL ATTRIBUTES
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "fillGradientColor1", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "fillGradientColor2", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "fillGradientTY", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderThickness", {
+            // BORDER ATTRIBUTES
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderSolidColor", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderGradientColor1", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderGradientColor2", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderGradientTY", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_FILLSOLID)
+        ], Shape2DInstanceData.prototype, "fillSolidColor", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        ], Shape2DInstanceData.prototype, "fillGradientColor1", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        ], Shape2DInstanceData.prototype, "fillGradientColor2", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        ], Shape2DInstanceData.prototype, "fillGradientTY", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDER)
+        ], Shape2DInstanceData.prototype, "borderThickness", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID)
+        ], Shape2DInstanceData.prototype, "borderSolidColor", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        ], Shape2DInstanceData.prototype, "borderGradientColor1", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        ], Shape2DInstanceData.prototype, "borderGradientColor2", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        ], Shape2DInstanceData.prototype, "borderGradientTY", null);
+        return Shape2DInstanceData;
+    }(BABYLON.InstanceDataBase));
+    BABYLON.Shape2DInstanceData = Shape2DInstanceData;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.shape2d.ts

@@ -0,0 +1,277 @@
+module BABYLON {
+
+    @className("Shape2D", "BABYLON")
+    /**
+     * The abstract class for parametric shape based Primitives types.
+     * Shape2D based primitives are composed of two parts: fill and border, both are optional but at least one must be specified.
+     * The fill part is the primitive 'body', the border is a border around this body. The border has a thickness that can be changed.
+     */
+    export abstract class Shape2D extends RenderablePrim2D {
+        static SHAPE2D_BORDERPARTID            = 1;
+        static SHAPE2D_FILLPARTID              = 2;
+        static SHAPE2D_CATEGORY_BORDER         = "Border";
+        static SHAPE2D_CATEGORY_BORDERSOLID    = "BorderSolid";
+        static SHAPE2D_CATEGORY_BORDERGRADIENT = "BorderGradient";
+        static SHAPE2D_CATEGORY_FILLSOLID      = "FillSolid";
+        static SHAPE2D_CATEGORY_FILLGRADIENT   = "FillGradient";
+
+        static SHAPE2D_PROPCOUNT: number = RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5;
+        public static borderProperty: Prim2DPropInfo;
+        public static fillProperty: Prim2DPropInfo;
+        public static borderThicknessProperty: Prim2DPropInfo;
+
+        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => Shape2D.borderProperty = pi, true)
+        /**
+         * Get/set the brush to render the Border part of the Primitive
+         */
+        public get border(): IBrush2D {
+            return this._border;
+        }
+
+        public set border(value: IBrush2D) {
+            this._border = value;
+            this._updateTransparencyStatus();
+        }
+
+        /**
+         * Get/set the brush to render the Fill part of the Primitive
+         */
+        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Shape2D.fillProperty = pi, true)
+        public get fill(): IBrush2D {
+            return this._fill;
+        }
+
+        public set fill(value: IBrush2D) {
+            this._fill = value;
+            this._updateTransparencyStatus();
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Shape2D.borderThicknessProperty = pi)
+        /**
+         * Get/set the thickness of the border part.
+         */
+        public get borderThickness(): number {
+            return this._borderThickness;
+        }
+
+        public set borderThickness(value: number) {
+            this._borderThickness = value;
+        }
+
+        constructor(settings?: {
+            fill           ?: IBrush2D | string,
+            border         ?: IBrush2D | string,
+            borderThickness?: number,
+        }) {
+
+            super(settings);
+
+            if (!settings) {
+                settings = {};
+            }
+
+            let borderBrush: IBrush2D = null;
+            if (settings.border) {
+                if (typeof (settings.border) === "string") {
+                    borderBrush = Canvas2D.GetBrushFromString(<string>settings.border);
+                } else {
+                    borderBrush = <IBrush2D>settings.border;
+                }
+            }
+
+            let fillBrush: IBrush2D = null;
+            if (settings.fill) {
+                if (typeof (settings.fill) === "string") {
+                    fillBrush = Canvas2D.GetBrushFromString(<string>settings.fill);
+                } else {
+                    fillBrush = <IBrush2D>settings.fill;
+                }
+            }
+
+            this._isTransparent = false;
+            this._oldTransparent = false;
+            this.border = borderBrush;
+            this.fill = fillBrush;
+            this._updateTransparencyStatus();
+            this.borderThickness = settings.borderThickness;
+        }
+
+        protected getUsedShaderCategories(dataPart: InstanceDataBase): string[] {
+            var cat = super.getUsedShaderCategories(dataPart);
+
+            // Fill Part
+            if (dataPart.id === Shape2D.SHAPE2D_FILLPARTID) {
+                let fill = this.fill;
+                if (fill instanceof SolidColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLSOLID);
+                }
+                if (fill instanceof GradientColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT);
+                }
+            }
+
+            // Border Part
+            if (dataPart.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                cat.push(Shape2D.SHAPE2D_CATEGORY_BORDER);
+
+                let border = this.border;
+                if (border instanceof SolidColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID);
+                }
+                if (border instanceof GradientColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT);
+                }
+            }
+
+            return cat;
+        }
+
+        protected applyActualScaleOnTransform(): boolean {
+            return false;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+
+            // Fill Part
+            if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
+                let d = <Shape2DInstanceData>part;
+
+                if (this.fill) {
+                    let fill = this.fill;
+                    if (fill instanceof SolidColorBrush2D) {
+                        d.fillSolidColor = fill.color;
+                    } else if (fill instanceof GradientColorBrush2D) {
+                        d.fillGradientColor1 = fill.color1;
+                        d.fillGradientColor2 = fill.color2;
+                        var t = Matrix.Compose(new Vector3(fill.scale, fill.scale, fill.scale), Quaternion.RotationAxis(new Vector3(0, 0, 1), fill.rotation), new Vector3(fill.translation.x, fill.translation.y, 0));
+
+                        let ty = new Vector4(t.m[1], t.m[5], t.m[9], t.m[13]);
+                        d.fillGradientTY = ty;
+                    }
+                }
+            }
+
+            else if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                let d = <Shape2DInstanceData>part;
+
+                if (this.border) {
+                    d.borderThickness = this.borderThickness;
+
+                    let border = this.border;
+                    if (border instanceof SolidColorBrush2D) {
+                        d.borderSolidColor = border.color;
+                    } else if (border instanceof GradientColorBrush2D) {
+                        d.borderGradientColor1 = border.color1;
+                        d.borderGradientColor2 = border.color2;
+                        var t = Matrix.Compose(new Vector3(border.scale, border.scale, border.scale), Quaternion.RotationAxis(new Vector3(0, 0, 1), border.rotation), new Vector3(border.translation.x, border.translation.y, 0));
+
+                        let ty = new Vector4(t.m[1], t.m[5], t.m[9], t.m[13]);
+                        d.borderGradientTY = ty;
+                    }
+                }
+            }
+
+            return true;
+        }
+
+        private _updateTransparencyStatus() {
+            this._isTransparent = (this._border && this._border.isTransparent()) || (this._fill && this._fill.isTransparent()) || (this.actualOpacity < 1);
+            if (this._isTransparent !== this._oldTransparent) {
+                this._oldTransparent = this._isTransparent;
+                this._updateRenderMode();
+            }
+        }
+
+        protected _mustUpdateInstance(): boolean {
+            let res = this._oldTransparent !== this._isTransparent;
+            if (res) {
+                this._updateRenderMode();
+                this._oldTransparent = this._isTransparent;
+            }
+            return res;
+        }
+
+        protected _isPrimTransparent(): boolean {
+            return this._isTransparent;
+        }
+
+        private _oldTransparent: boolean;
+        private _isTransparent: boolean;
+        private _border: IBrush2D;
+        private _borderThickness: number;
+        private _fill: IBrush2D;
+
+    }
+
+    export class Shape2DInstanceData extends InstanceDataBase {
+        // FILL ATTRIBUTES
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLSOLID)
+        get fillSolidColor(): Color4 {
+            return null;
+        }
+        set fillSolidColor(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        get fillGradientColor1(): Color4 {
+            return null;
+        }
+        set fillGradientColor1(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        get fillGradientColor2(): Color4 {
+            return null;
+        }
+        set fillGradientColor2(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        get fillGradientTY(): Vector4 {
+            return null;
+        }
+        set fillGradientTY(value: Vector4) {
+        }
+
+        // BORDER ATTRIBUTES
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDER)
+        get borderThickness(): number {
+            return null;
+        }
+        set borderThickness(value: number) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID)
+        get borderSolidColor(): Color4 {
+            return null;
+        }
+        set borderSolidColor(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        get borderGradientColor1(): Color4 {
+            return null;
+        }
+        set borderGradientColor1(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        get borderGradientColor2(): Color4 {
+            return null;
+        }
+        set borderGradientColor2(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        get borderGradientTY(): Vector4 {
+            return null;
+        }
+        set borderGradientTY(value: Vector4) {
+        }
+    }
+}

canvas2D/src/Engine/babylon.sprite2d.js

@@ -0,0 +1,486 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Sprite2DRenderCache = (function (_super) {
+        __extends(Sprite2DRenderCache, _super);
+        function Sprite2DRenderCache() {
+            _super.apply(this, arguments);
+            this.effectsReady = false;
+            this.vb = null;
+            this.ib = null;
+            this.instancingAttributes = null;
+            this.texture = null;
+            this.effect = null;
+            this.effectInstanced = null;
+        }
+        Sprite2DRenderCache.prototype.render = function (instanceInfo, context) {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            // Compute the offset locations of the attributes in the vertex shader that will be mapped to the instance buffer data
+            var canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+            var cur = engine.getAlphaMode();
+            var effect = context.useInstancing ? this.effectInstanced : this.effect;
+            engine.enableEffect(effect);
+            effect.setTexture("diffuseSampler", this.texture);
+            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
+            if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+            }
+            effect.setBool("alphaTest", context.renderMode === BABYLON.Render2DContext.RenderModeAlphaTest);
+            var pid = context.groupInfoPartData[0];
+            if (context.useInstancing) {
+                if (!this.instancingAttributes) {
+                    this.instancingAttributes = this.loadInstancingAttributes(Sprite2D.SPRITE2D_MAINPARTID, effect);
+                }
+                var glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
+                var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                canvas._addDrawCallCount(1, context.renderMode);
+                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
+                engine.draw(true, 0, 6, count);
+                engine.unbindInstanceAttributes();
+            }
+            else {
+                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                    this.setupUniforms(effect, 0, pid._partData, i);
+                    engine.draw(true, 0, 6);
+                }
+            }
+            engine.setAlphaMode(cur, true);
+            return true;
+        };
+        Sprite2DRenderCache.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.vb) {
+                this._engine._releaseBuffer(this.vb);
+                this.vb = null;
+            }
+            if (this.ib) {
+                this._engine._releaseBuffer(this.ib);
+                this.ib = null;
+            }
+            //if (this.texture) {
+            //    this.texture.dispose();
+            //    this.texture = null;
+            //}
+            this.effect = null;
+            this.effectInstanced = null;
+            return true;
+        };
+        return Sprite2DRenderCache;
+    }(BABYLON.ModelRenderCache));
+    BABYLON.Sprite2DRenderCache = Sprite2DRenderCache;
+    var Sprite2DInstanceData = (function (_super) {
+        __extends(Sprite2DInstanceData, _super);
+        function Sprite2DInstanceData(partId) {
+            _super.call(this, partId, 1);
+        }
+        Object.defineProperty(Sprite2DInstanceData.prototype, "topLeftUV", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2DInstanceData.prototype, "sizeUV", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2DInstanceData.prototype, "scaleFactor", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2DInstanceData.prototype, "textureSize", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2DInstanceData.prototype, "properties", {
+            // 3 floats being:
+            // - x: frame number to display
+            // - y: invertY setting
+            // - z: alignToPixel setting
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "topLeftUV", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "sizeUV", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "scaleFactor", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "textureSize", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "properties", null);
+        return Sprite2DInstanceData;
+    }(BABYLON.InstanceDataBase));
+    BABYLON.Sprite2DInstanceData = Sprite2DInstanceData;
+    var Sprite2D = (function (_super) {
+        __extends(Sprite2D, _super);
+        /**
+         * Create an 2D Sprite primitive
+         * @param texture the texture that stores the sprite to render
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - spriteSize: the size of the sprite (in pixels), if null the size of the given texture will be used, default is null.
+         * - spriteLocation: the location (in pixels) in the texture of the top/left corner of the Sprite to display, default is null (0,0)
+         * - spriteScaleFactor: say you want to display a sprite twice as big as its bitmap which is 64,64, you set the spriteSize to 128,128 and have to set the spriteScaleFactory to 0.5,0.5 in order to address only the 64,64 pixels of the bitmaps. Default is 1,1.
+         * - invertY: if true the texture Y will be inverted, default is false.
+         * - alignToPixel: if true the sprite's texels will be aligned to the rendering viewport pixels, ensuring the best rendering quality but slow animations won't be done as smooth as if you set false. If false a texel could lies between two pixels, being blended by the texture sampling mode you choose, the rendering result won't be as good, but very slow animation will be overall better looking. Default is true: content will be aligned.
+         * - isVisible: true if the sprite must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        function Sprite2D(texture, settings) {
+            var _this = this;
+            if (!settings) {
+                settings = {};
+            }
+            _super.call(this, settings);
+            this.texture = texture;
+            this.texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
+            this.texture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
+            this.size = settings.spriteSize;
+            this.spriteLocation = settings.spriteLocation || new BABYLON.Vector2(0, 0);
+            this.spriteScaleFactor = settings.spriteScaleFactor || new BABYLON.Vector2(1, 1);
+            this.spriteFrame = 0;
+            this.invertY = (settings.invertY == null) ? false : settings.invertY;
+            this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel;
+            this.useAlphaFromTexture = true;
+            if (settings.spriteSize == null || !texture.isReady()) {
+                if (texture.isReady()) {
+                    this.size = texture.getBaseSize();
+                }
+                else {
+                    texture.onLoadObservable.add(function () {
+                        if (settings.spriteSize == null) {
+                            _this.size = texture.getBaseSize();
+                        }
+                        _this._positioningDirty();
+                        _this._instanceDirtyFlags |= BABYLON.Prim2DBase.originProperty.flagId | Sprite2D.textureProperty.flagId; // To make sure the sprite is issued again for render
+                    });
+                }
+            }
+        }
+        Object.defineProperty(Sprite2D.prototype, "texture", {
+            get: function () {
+                return this._texture;
+            },
+            set: function (value) {
+                this._texture = value;
+                this._oldTextureHasAlpha = this._texture && this.texture.hasAlpha;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "useAlphaFromTexture", {
+            get: function () {
+                return this._useAlphaFromTexture;
+            },
+            set: function (value) {
+                if (this._useAlphaFromTexture === value) {
+                    return;
+                }
+                this._useAlphaFromTexture = value;
+                this._updateRenderMode();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "actualSize", {
+            get: function () {
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
+                return this.size;
+            },
+            set: function (value) {
+                this._actualSize = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "spriteLocation", {
+            get: function () {
+                return this._location;
+            },
+            set: function (value) {
+                this._location = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "spriteFrame", {
+            get: function () {
+                return this._spriteFrame;
+            },
+            set: function (value) {
+                this._spriteFrame = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "invertY", {
+            get: function () {
+                return this._invertY;
+            },
+            set: function (value) {
+                this._invertY = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "spriteScaleFactor", {
+            get: function () {
+                return this._spriteScaleFactor;
+            },
+            set: function (value) {
+                this._spriteScaleFactor = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Sets the scale of the sprite using a BABYLON.Size(w,h).
+         * Keeps proportion by taking the maximum of the two scale for x and y.
+         * @param {Size} size Size(width,height)
+         */
+        Sprite2D.prototype.scaleToSize = function (size) {
+            var baseSize = this.size;
+            if (baseSize == null || !this.texture.isReady()) {
+                // we're probably at initiation of the scene, size is not set
+                if (this.texture.isReady()) {
+                    baseSize = this.texture.getBaseSize();
+                }
+                else {
+                    // the texture is not ready, wait for it to load before calling scaleToSize again
+                    var thisObject = this;
+                    this.texture.onLoadObservable.add(function () {
+                        thisObject.scaleToSize(size);
+                    });
+                    return;
+                }
+            }
+            this.scale = Math.max(size.height / baseSize.height, size.width / baseSize.width);
+        };
+        Object.defineProperty(Sprite2D.prototype, "alignToPixel", {
+            /**
+             * Get/set if the sprite rendering should be aligned to the target rendering device pixel or not
+             */
+            get: function () {
+                return this._alignToPixel;
+            },
+            set: function (value) {
+                this._alignToPixel = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Sprite2D.prototype.updateLevelBoundingInfo = function () {
+            BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.size, this._levelBoundingInfo);
+        };
+        /**
+         * Get the animatable array (see http://doc.babylonjs.com/tutorials/Animations)
+         */
+        Sprite2D.prototype.getAnimatables = function () {
+            var res = new Array();
+            if (this.texture && this.texture.animations && this.texture.animations.length > 0) {
+                res.push(this.texture);
+            }
+            return res;
+        };
+        Sprite2D.prototype.levelIntersect = function (intersectInfo) {
+            // If we've made it so far it means the boundingInfo intersection test succeed, the Sprite2D is shaped the same, so we always return true
+            return true;
+        };
+        Sprite2D._createCachedCanvasSprite = function (owner, texture, size, pos) {
+            var sprite = new Sprite2D(texture, { parent: owner, id: "__cachedCanvasSprite__", position: BABYLON.Vector2.Zero(), origin: BABYLON.Vector2.Zero(), spriteSize: size, spriteLocation: pos, alignToPixel: true });
+            return sprite;
+        };
+        Sprite2D.prototype.createModelRenderCache = function (modelKey) {
+            var renderCache = new Sprite2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        };
+        Sprite2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+            var renderCache = modelRenderCache;
+            var engine = this.owner.engine;
+            var vb = new Float32Array(4);
+            for (var i = 0; i < 4; i++) {
+                vb[i] = i;
+            }
+            renderCache.vb = engine.createVertexBuffer(vb);
+            var ib = new Float32Array(6);
+            ib[0] = 0;
+            ib[1] = 2;
+            ib[2] = 1;
+            ib[3] = 0;
+            ib[4] = 3;
+            ib[5] = 2;
+            renderCache.ib = engine.createIndexBuffer(ib);
+            renderCache.texture = this.texture;
+            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+            var ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], true);
+            if (ei) {
+                renderCache.effectInstanced = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            }
+            ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], false);
+            renderCache.effect = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            return renderCache;
+        };
+        Sprite2D.prototype.createInstanceDataParts = function () {
+            return [new Sprite2DInstanceData(Sprite2D.SPRITE2D_MAINPARTID)];
+        };
+        Sprite2D.prototype.beforeRefreshForLayoutConstruction = function (part) {
+            Sprite2D.layoutConstructMode = true;
+        };
+        // if obj contains something, we restore the _text property
+        Sprite2D.prototype.afterRefreshForLayoutConstruction = function (part, obj) {
+            Sprite2D.layoutConstructMode = false;
+        };
+        Sprite2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            if (!this.texture.isReady() && !Sprite2D.layoutConstructMode) {
+                return false;
+            }
+            if (part.id === Sprite2D.SPRITE2D_MAINPARTID) {
+                var d = this._instanceDataParts[0];
+                if (Sprite2D.layoutConstructMode) {
+                    d.topLeftUV = BABYLON.Vector2.Zero();
+                    d.sizeUV = BABYLON.Vector2.Zero();
+                    d.properties = BABYLON.Vector3.Zero();
+                    d.textureSize = BABYLON.Vector2.Zero();
+                    d.scaleFactor = BABYLON.Vector2.Zero();
+                }
+                else {
+                    var ts = this.texture.getBaseSize();
+                    var sl = this.spriteLocation;
+                    var ss = this.actualSize;
+                    var ssf = this.spriteScaleFactor;
+                    d.topLeftUV = new BABYLON.Vector2(sl.x / ts.width, sl.y / ts.height);
+                    var suv = new BABYLON.Vector2(ss.width / ts.width, ss.height / ts.height);
+                    d.sizeUV = suv;
+                    d.scaleFactor = ssf;
+                    Sprite2D._prop.x = this.spriteFrame;
+                    Sprite2D._prop.y = this.invertY ? 1 : 0;
+                    Sprite2D._prop.z = this.alignToPixel ? 1 : 0;
+                    d.properties = Sprite2D._prop;
+                    d.textureSize = new BABYLON.Vector2(ts.width, ts.height);
+                }
+            }
+            return true;
+        };
+        Sprite2D.prototype._mustUpdateInstance = function () {
+            var res = this._oldTextureHasAlpha !== (this.texture != null && this.texture.hasAlpha);
+            this._oldTextureHasAlpha = this.texture != null && this.texture.hasAlpha;
+            if (res) {
+                this._updateRenderMode();
+            }
+            return res;
+        };
+        Sprite2D.prototype._useTextureAlpha = function () {
+            return this.texture != null && this.texture.hasAlpha;
+        };
+        Sprite2D.prototype._shouldUseAlphaFromTexture = function () {
+            return this.texture != null && this.texture.hasAlpha && this.useAlphaFromTexture;
+        };
+        Sprite2D.SPRITE2D_MAINPARTID = 1;
+        Sprite2D._prop = BABYLON.Vector3.Zero();
+        Sprite2D.layoutConstructMode = false;
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, function (pi) { return Sprite2D.textureProperty = pi; })
+        ], Sprite2D.prototype, "texture", null);
+        __decorate([
+            BABYLON.dynamicLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, function (pi) { return Sprite2D.useAlphaFromTextureProperty = pi; })
+        ], Sprite2D.prototype, "useAlphaFromTexture", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, function (pi) { return Sprite2D.actualSizeProperty = pi; }, false, true)
+        ], Sprite2D.prototype, "actualSize", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, function (pi) { return Sprite2D.spriteLocationProperty = pi; })
+        ], Sprite2D.prototype, "spriteLocation", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5, function (pi) { return Sprite2D.spriteFrameProperty = pi; })
+        ], Sprite2D.prototype, "spriteFrame", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 6, function (pi) { return Sprite2D.invertYProperty = pi; })
+        ], Sprite2D.prototype, "invertY", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 7, function (pi) { return Sprite2D.spriteScaleFactorProperty = pi; })
+        ], Sprite2D.prototype, "spriteScaleFactor", null);
+        Sprite2D = __decorate([
+            BABYLON.className("Sprite2D", "BABYLON")
+        ], Sprite2D);
+        return Sprite2D;
+    }(BABYLON.RenderablePrim2D));
+    BABYLON.Sprite2D = Sprite2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.sprite2d.ts

@@ -0,0 +1,533 @@
+module BABYLON {
+    export class Sprite2DRenderCache extends ModelRenderCache {
+        effectsReady: boolean = false;
+        vb: WebGLBuffer = null;
+        ib: WebGLBuffer = null;
+        instancingAttributes: InstancingAttributeInfo[] = null;
+        texture: Texture = null;
+        effect: Effect = null;
+        effectInstanced: Effect = null;
+
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+
+            // Compute the offset locations of the attributes in the vertex shader that will be mapped to the instance buffer data
+            let canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+
+            var cur = engine.getAlphaMode();
+            let effect = context.useInstancing ? this.effectInstanced : this.effect;
+
+            engine.enableEffect(effect);
+            effect.setTexture("diffuseSampler", this.texture);
+            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
+
+            if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+            }
+
+            effect.setBool("alphaTest", context.renderMode === Render2DContext.RenderModeAlphaTest);
+
+            let pid = context.groupInfoPartData[0];
+            if (context.useInstancing) {
+                if (!this.instancingAttributes) {
+                    this.instancingAttributes = this.loadInstancingAttributes(Sprite2D.SPRITE2D_MAINPARTID, effect);
+                }
+                let glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
+                let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                canvas._addDrawCallCount(1, context.renderMode);
+                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
+                engine.draw(true, 0, 6, count);
+                engine.unbindInstanceAttributes();
+            } else {
+                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                    this.setupUniforms(effect, 0, pid._partData, i);
+                    engine.draw(true, 0, 6);
+                }
+            }
+
+            engine.setAlphaMode(cur, true);
+
+            return true;
+        }
+
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.vb) {
+                this._engine._releaseBuffer(this.vb);
+                this.vb = null;
+            }
+
+            if (this.ib) {
+                this._engine._releaseBuffer(this.ib);
+                this.ib = null;
+            }
+
+            //if (this.texture) {
+            //    this.texture.dispose();
+            //    this.texture = null;
+            //}
+
+            this.effect = null;
+            this.effectInstanced = null;
+
+            return true;
+        }
+    }
+
+    export class Sprite2DInstanceData extends InstanceDataBase {
+        constructor(partId: number) {
+            super(partId, 1);
+        }
+
+        @instanceData()
+        get topLeftUV(): Vector2 {
+            return null;
+        }
+        set topLeftUV(value: Vector2) {
+        }
+
+        @instanceData()
+        get sizeUV(): Vector2 {
+            return null;
+        }
+        set sizeUV(value: Vector2) {
+        }
+
+        @instanceData()
+        get scaleFactor(): Vector2 {
+            return null;
+        }
+        set scaleFactor(value: Vector2) {
+        }
+
+        @instanceData()
+        get textureSize(): Vector2 {
+            return null;
+        }
+        set textureSize(value: Vector2) {
+        }
+
+        // 3 floats being:
+        // - x: frame number to display
+        // - y: invertY setting
+        // - z: alignToPixel setting
+        @instanceData()
+        get properties(): Vector3 {
+            return null;
+        }
+        set properties(value: Vector3) {
+        }
+    }
+
+    @className("Sprite2D", "BABYLON")
+    /**
+     * Primitive that displays a Sprite/Picture
+     */
+    export class Sprite2D extends RenderablePrim2D {
+        static SPRITE2D_MAINPARTID = 1;
+
+        public static textureProperty: Prim2DPropInfo;
+        public static useAlphaFromTextureProperty: Prim2DPropInfo;
+        public static actualSizeProperty: Prim2DPropInfo;
+        public static spriteLocationProperty: Prim2DPropInfo;
+        public static spriteFrameProperty: Prim2DPropInfo;
+        public static invertYProperty: Prim2DPropInfo;
+        public static spriteScaleFactorProperty: Prim2DPropInfo;
+
+        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => Sprite2D.textureProperty = pi)
+        /**
+         * Get/set the texture that contains the sprite to display
+         */
+        public get texture(): Texture {
+            return this._texture;
+        }
+
+        public set texture(value: Texture) {
+            this._texture = value;
+            this._oldTextureHasAlpha = this._texture && this.texture.hasAlpha;
+        }
+
+        @dynamicLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Sprite2D.useAlphaFromTextureProperty = pi)
+        /**
+         * If true and the texture has an Alpha Channel which is used (BaseTexture.hasAlpha = true) the Sprite2d will be rendered as a Transparent Primitive, if false and the texture has an Alpha Channel which is used (BaseTexture.hasAlpha = true) the Sprite2d will be rendered as Alpha Test. If false or if the Texture has no alpha or it's not used (BaseTexture.hasAlpha = false) the Sprite2d will be rendered as an Opaque Primitive
+         */
+        public get useAlphaFromTexture(): boolean {
+            return this._useAlphaFromTexture;
+        }
+
+        public set useAlphaFromTexture(value: boolean) {
+            if (this._useAlphaFromTexture === value) {
+                return;
+            }
+            this._useAlphaFromTexture = value;
+            this._updateRenderMode();
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Sprite2D.actualSizeProperty = pi, false, true)
+        /**
+         * Get/set the actual size of the sprite to display
+         */
+        public get actualSize(): Size {
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+            return this.size;
+        }
+
+        public set actualSize(value: Size) {
+            this._actualSize = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, pi => Sprite2D.spriteLocationProperty = pi)
+        /**
+         * Get/set the sprite location (in pixels) in the texture
+         */
+        public get spriteLocation(): Vector2 {
+            return this._location;
+        }
+
+        public set spriteLocation(value: Vector2) {
+            this._location = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5, pi => Sprite2D.spriteFrameProperty = pi)
+        /**
+         * Get/set the sprite frame to display.
+         * The frame number is just an offset applied horizontally, based on the sprite's width. it does not wrap, all the frames must be on the same line.
+         */
+        public get spriteFrame(): number {
+            return this._spriteFrame;
+        }
+
+        public set spriteFrame(value: number) {
+            this._spriteFrame = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 6, pi => Sprite2D.invertYProperty = pi)
+        /**
+         * Get/set if the sprite texture coordinates should be inverted on the Y axis
+         */
+        public get invertY(): boolean {
+            return this._invertY;
+        }
+
+        public set invertY(value: boolean) {
+            this._invertY = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 7, pi => Sprite2D.spriteScaleFactorProperty = pi)
+        /**
+         * Get/set the sprite location (in pixels) in the texture
+         */
+        public get spriteScaleFactor(): Vector2 {
+            return this._spriteScaleFactor;
+        }
+
+        public set spriteScaleFactor(value: Vector2) {
+            this._spriteScaleFactor = value;
+        }
+
+        /**
+         * Sets the scale of the sprite using a BABYLON.Size(w,h).
+         * Keeps proportion by taking the maximum of the two scale for x and y.
+         * @param {Size} size Size(width,height)
+         */
+        public scaleToSize(size: Size) {
+            var baseSize = this.size;
+            if (baseSize == null || !this.texture.isReady()) {
+                // we're probably at initiation of the scene, size is not set
+                if (this.texture.isReady()) {
+                    baseSize = <Size>this.texture.getBaseSize();
+                }
+                else {
+                    // the texture is not ready, wait for it to load before calling scaleToSize again
+                    var thisObject = <Sprite2D>this;
+                    this.texture.onLoadObservable.add(function () {
+                            thisObject.scaleToSize(size); 
+                        });
+                    return;
+                }
+            }
+            
+            this.scale = Math.max(size.height / baseSize.height, size.width / baseSize.width);
+        }
+
+        /**
+         * Get/set if the sprite rendering should be aligned to the target rendering device pixel or not
+         */
+        public get alignToPixel(): boolean {
+            return this._alignToPixel;
+        }
+
+        public set alignToPixel(value: boolean) {
+            this._alignToPixel = value;
+        }
+
+        protected updateLevelBoundingInfo() {
+            BoundingInfo2D.CreateFromSizeToRef(this.size, this._levelBoundingInfo);
+        }
+
+        /**
+         * Get the animatable array (see http://doc.babylonjs.com/tutorials/Animations)
+         */
+        public getAnimatables(): IAnimatable[] {
+            let res = new Array<IAnimatable>();
+
+            if (this.texture && this.texture.animations && this.texture.animations.length > 0) {
+                res.push(this.texture);
+            }
+            return res;
+        }
+
+        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
+            // If we've made it so far it means the boundingInfo intersection test succeed, the Sprite2D is shaped the same, so we always return true
+            return true;
+        }
+
+        /**
+         * Create an 2D Sprite primitive
+         * @param texture the texture that stores the sprite to render
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - spriteSize: the size of the sprite (in pixels), if null the size of the given texture will be used, default is null.
+         * - spriteLocation: the location (in pixels) in the texture of the top/left corner of the Sprite to display, default is null (0,0)
+         * - spriteScaleFactor: say you want to display a sprite twice as big as its bitmap which is 64,64, you set the spriteSize to 128,128 and have to set the spriteScaleFactory to 0.5,0.5 in order to address only the 64,64 pixels of the bitmaps. Default is 1,1.
+         * - invertY: if true the texture Y will be inverted, default is false.
+         * - alignToPixel: if true the sprite's texels will be aligned to the rendering viewport pixels, ensuring the best rendering quality but slow animations won't be done as smooth as if you set false. If false a texel could lies between two pixels, being blended by the texture sampling mode you choose, the rendering result won't be as good, but very slow animation will be overall better looking. Default is true: content will be aligned.
+         * - isVisible: true if the sprite must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        constructor(texture: Texture, settings?: {
+
+            parent                ?: Prim2DBase,
+            children              ?: Array<Prim2DBase>,
+            id                    ?: string,
+            position              ?: Vector2,
+            x                     ?: number,
+            y                     ?: number,
+            rotation              ?: number,
+            scale                 ?: number,
+            scaleX                ?: number,
+            scaleY                ?: number,
+            dontInheritParentScale?: boolean,
+            opacity               ?: number,
+            zOrder                ?: number, 
+            origin                ?: Vector2,
+            spriteSize            ?: Size,
+            spriteLocation        ?: Vector2,
+            spriteScaleFactor     ?: Vector2,
+            invertY               ?: boolean,
+            alignToPixel          ?: boolean,
+            isVisible             ?: boolean,
+            isPickable            ?: boolean,
+            isContainer           ?: boolean,
+            childrenFlatZOrder    ?: boolean,
+            marginTop             ?: number | string,
+            marginLeft            ?: number | string,
+            marginRight           ?: number | string,
+            marginBottom          ?: number | string,
+            margin                ?: number | string,
+            marginHAlignment      ?: number,
+            marginVAlignment      ?: number,
+            marginAlignment       ?: string,
+            paddingTop            ?: number | string,
+            paddingLeft           ?: number | string,
+            paddingRight          ?: number | string,
+            paddingBottom         ?: number | string,
+            padding               ?: string,
+        }) {
+
+            if (!settings) {
+                settings = {};
+            }
+
+            super(settings);
+
+            this.texture = texture;
+            this.texture.wrapU = Texture.CLAMP_ADDRESSMODE;
+            this.texture.wrapV = Texture.CLAMP_ADDRESSMODE;
+            this.size = settings.spriteSize;
+            this.spriteLocation = settings.spriteLocation || new Vector2(0, 0);
+            this.spriteScaleFactor = settings.spriteScaleFactor || new Vector2(1, 1);
+            this.spriteFrame = 0;
+            this.invertY = (settings.invertY == null) ? false : settings.invertY;
+            this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel;
+            this.useAlphaFromTexture = true;
+
+            if (settings.spriteSize == null || !texture.isReady()) {
+                if (texture.isReady()) {
+                    this.size = <Size>texture.getBaseSize();
+                } else {
+                    texture.onLoadObservable.add(() => {
+                        if (settings.spriteSize == null) {
+                            this.size = <Size>texture.getBaseSize();
+                        }
+                        this._positioningDirty();
+                        this._instanceDirtyFlags |= Prim2DBase.originProperty.flagId | Sprite2D.textureProperty.flagId;  // To make sure the sprite is issued again for render
+                    });
+                }
+            }
+        }
+
+        static _createCachedCanvasSprite(owner: Canvas2D, texture: MapTexture, size: Size, pos: Vector2): Sprite2D {
+
+            let sprite = new Sprite2D(texture, { parent: owner, id: "__cachedCanvasSprite__", position: Vector2.Zero(), origin: Vector2.Zero(), spriteSize: size, spriteLocation: pos, alignToPixel: true });
+            return sprite;
+        }
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            let renderCache = new Sprite2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+            let renderCache = <Sprite2DRenderCache>modelRenderCache;
+            let engine = this.owner.engine;
+
+            let vb = new Float32Array(4);
+            for (let i = 0; i < 4; i++) {
+                vb[i] = i;
+            }
+            renderCache.vb = engine.createVertexBuffer(vb);
+
+            let ib = new Float32Array(6);
+            ib[0] = 0;
+            ib[1] = 2;
+            ib[2] = 1;
+            ib[3] = 0;
+            ib[4] = 3;
+            ib[5] = 2;
+
+            renderCache.ib = engine.createIndexBuffer(ib);
+
+            renderCache.texture = this.texture;
+
+            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+            let ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], true);
+            if (ei) {
+                renderCache.effectInstanced = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            }
+
+            ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], false);
+            renderCache.effect = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+
+            return renderCache;
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            return [new Sprite2DInstanceData(Sprite2D.SPRITE2D_MAINPARTID)];
+        }
+
+        private static _prop: Vector3 = Vector3.Zero();
+
+        private static layoutConstructMode = false;
+        protected beforeRefreshForLayoutConstruction(part: InstanceDataBase): any {
+            Sprite2D.layoutConstructMode = true;
+        }
+
+        // if obj contains something, we restore the _text property
+        protected afterRefreshForLayoutConstruction(part: InstanceDataBase, obj: any) {
+            Sprite2D.layoutConstructMode = false;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+
+            if (!this.texture.isReady() && !Sprite2D.layoutConstructMode) {
+                return false;
+            }
+
+            if (part.id === Sprite2D.SPRITE2D_MAINPARTID) {
+                let d = <Sprite2DInstanceData>this._instanceDataParts[0];
+
+                if (Sprite2D.layoutConstructMode) {
+                    d.topLeftUV = Vector2.Zero();
+                    d.sizeUV = Vector2.Zero();
+                    d.properties = Vector3.Zero();
+                    d.textureSize = Vector2.Zero();
+                    d.scaleFactor = Vector2.Zero();
+                } else {
+                    let ts = this.texture.getBaseSize();
+                    let sl = this.spriteLocation;
+                    let ss = this.actualSize;
+                    let ssf = this.spriteScaleFactor;
+                    d.topLeftUV = new Vector2(sl.x / ts.width, sl.y / ts.height);
+                    let suv = new Vector2(ss.width / ts.width, ss.height / ts.height);
+                    d.sizeUV = suv;
+                    d.scaleFactor = ssf;
+
+                    Sprite2D._prop.x = this.spriteFrame;
+                    Sprite2D._prop.y = this.invertY ? 1 : 0;
+                    Sprite2D._prop.z = this.alignToPixel ? 1 : 0;
+                    d.properties = Sprite2D._prop;
+
+                    d.textureSize = new Vector2(ts.width, ts.height);
+                }
+            }
+            return true;
+        }
+
+        protected _mustUpdateInstance(): boolean {
+            let res = this._oldTextureHasAlpha !== (this.texture != null && this.texture.hasAlpha);
+            this._oldTextureHasAlpha = this.texture != null && this.texture.hasAlpha;
+            if (res) {
+                this._updateRenderMode();
+            }
+            return res;
+        }
+
+        protected _useTextureAlpha(): boolean {
+            return this.texture!=null && this.texture.hasAlpha;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return this.texture!=null && this.texture.hasAlpha && this.useAlphaFromTexture;
+        }
+
+        private _texture: Texture;
+        private _oldTextureHasAlpha: boolean;
+        private _useAlphaFromTexture: boolean;
+        private _location: Vector2;
+        private _spriteScaleFactor: Vector2;
+        private _spriteFrame: number;
+        private _invertY: boolean;
+        private _alignToPixel: boolean;
+    }
+}

canvas2D/src/Engine/babylon.text2d.js

@@ -0,0 +1,473 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Text2DRenderCache = (function (_super) {
+        __extends(Text2DRenderCache, _super);
+        function Text2DRenderCache() {
+            _super.apply(this, arguments);
+            this.effectsReady = false;
+            this.vb = null;
+            this.ib = null;
+            this.instancingAttributes = null;
+            this.fontTexture = null;
+            this.effect = null;
+            this.effectInstanced = null;
+        }
+        Text2DRenderCache.prototype.render = function (instanceInfo, context) {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            var canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+            this.fontTexture.update();
+            var effect = context.useInstancing ? this.effectInstanced : this.effect;
+            engine.enableEffect(effect);
+            effect.setTexture("diffuseSampler", this.fontTexture);
+            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
+            var curAlphaMode = engine.getAlphaMode();
+            engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+            var pid = context.groupInfoPartData[0];
+            if (context.useInstancing) {
+                if (!this.instancingAttributes) {
+                    this.instancingAttributes = this.loadInstancingAttributes(Text2D.TEXT2D_MAINPARTID, effect);
+                }
+                var glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
+                var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                canvas._addDrawCallCount(1, context.renderMode);
+                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
+                engine.draw(true, 0, 6, count);
+                engine.unbindInstanceAttributes();
+            }
+            else {
+                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                    this.setupUniforms(effect, 0, pid._partData, i);
+                    engine.draw(true, 0, 6);
+                }
+            }
+            engine.setAlphaMode(curAlphaMode, true);
+            return true;
+        };
+        Text2DRenderCache.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.vb) {
+                this._engine._releaseBuffer(this.vb);
+                this.vb = null;
+            }
+            if (this.ib) {
+                this._engine._releaseBuffer(this.ib);
+                this.ib = null;
+            }
+            if (this.fontTexture) {
+                this.fontTexture.decCachedFontTextureCounter();
+                this.fontTexture = null;
+            }
+            this.effect = null;
+            this.effectInstanced = null;
+            return true;
+        };
+        return Text2DRenderCache;
+    }(BABYLON.ModelRenderCache));
+    BABYLON.Text2DRenderCache = Text2DRenderCache;
+    var Text2DInstanceData = (function (_super) {
+        __extends(Text2DInstanceData, _super);
+        function Text2DInstanceData(partId, dataElementCount) {
+            _super.call(this, partId, dataElementCount);
+        }
+        Object.defineProperty(Text2DInstanceData.prototype, "topLeftUV", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2DInstanceData.prototype, "sizeUV", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2DInstanceData.prototype, "textureSize", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2DInstanceData.prototype, "color", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2DInstanceData.prototype, "superSampleFactor", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "topLeftUV", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "sizeUV", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "textureSize", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "color", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "superSampleFactor", null);
+        return Text2DInstanceData;
+    }(BABYLON.InstanceDataBase));
+    BABYLON.Text2DInstanceData = Text2DInstanceData;
+    var Text2D = (function (_super) {
+        __extends(Text2D, _super);
+        /**
+         * Create a Text primitive
+         * @param text the text to display
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - fontName: the name/size/style of the font to use, following the CSS notation. Default is "12pt Arial".
+         * - fontSuperSample: if true the text will be rendered with a superSampled font (the font is twice the given size). Use this settings if the text lies in world space or if it's scaled in.
+         * - defaultFontColor: the color by default to apply on each letter of the text to display, default is plain white.
+         * - areaSize: the size of the area in which to display the text, default is auto-fit from text content.
+         * - tabulationSize: number of space character to insert when a tabulation is encountered, default is 4
+         * - isVisible: true if the text must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        function Text2D(text, settings) {
+            if (!settings) {
+                settings = {};
+            }
+            _super.call(this, settings);
+            this.fontName = (settings.fontName == null) ? "12pt Arial" : settings.fontName;
+            this._fontSuperSample = (settings.fontSuperSample != null && settings.fontSuperSample);
+            this.defaultFontColor = (settings.defaultFontColor == null) ? new BABYLON.Color4(1, 1, 1, 1) : settings.defaultFontColor;
+            this._tabulationSize = (settings.tabulationSize == null) ? 4 : settings.tabulationSize;
+            this._textSize = null;
+            this.text = text;
+            this.size = (settings.size == null) ? null : settings.size;
+            this._updateRenderMode();
+        }
+        Object.defineProperty(Text2D.prototype, "fontName", {
+            get: function () {
+                return this._fontName;
+            },
+            set: function (value) {
+                if (this._fontName) {
+                    throw new Error("Font Name change is not supported right now.");
+                }
+                this._fontName = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "defaultFontColor", {
+            get: function () {
+                return this._defaultFontColor;
+            },
+            set: function (value) {
+                this._defaultFontColor = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "text", {
+            get: function () {
+                return this._text;
+            },
+            set: function (value) {
+                if (!value) {
+                    value = "";
+                }
+                this._text = value;
+                this._textSize = null; // A change of text will reset the TextSize which will be recomputed next time it's used
+                this._size = null;
+                this._updateCharCount();
+                // Trigger a textSize to for a sizeChange if necessary, which is needed for layout to recompute
+                var s = this.textSize;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "size", {
+            get: function () {
+                if (this._size != null) {
+                    return this._size;
+                }
+                return this.textSize;
+            },
+            set: function (value) {
+                this._size = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "isSizeAuto", {
+            get: function () {
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "actualSize", {
+            /**
+             * Get the actual size of the Text2D primitive
+             */
+            get: function () {
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
+                return this.size;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "textSize", {
+            /**
+             * Get the area that bounds the text associated to the primitive
+             */
+            get: function () {
+                if (!this._textSize) {
+                    if (this.owner && this._text) {
+                        var newSize = this.fontTexture.measureText(this._text, this._tabulationSize);
+                        if (!newSize.equals(this._textSize)) {
+                            this.onPrimitivePropertyDirty(BABYLON.Prim2DBase.sizeProperty.flagId);
+                            this._positioningDirty();
+                        }
+                        this._textSize = newSize;
+                    }
+                    else {
+                        return Text2D.nullSize;
+                    }
+                }
+                return this._textSize;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "fontTexture", {
+            get: function () {
+                if (this._fontTexture) {
+                    return this._fontTexture;
+                }
+                if (this.fontName == null || this.owner == null || this.owner.scene == null) {
+                    return null;
+                }
+                this._fontTexture = BABYLON.FontTexture.GetCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
+                return this._fontTexture;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Dispose the primitive, remove it from its parent
+         */
+        Text2D.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this._fontTexture) {
+                BABYLON.FontTexture.ReleaseCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
+                this._fontTexture = null;
+            }
+            return true;
+        };
+        Text2D.prototype.updateLevelBoundingInfo = function () {
+            BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        };
+        Text2D.prototype.levelIntersect = function (intersectInfo) {
+            // For now I can't do something better that boundingInfo is a hit, detecting an intersection on a particular letter would be possible, but do we really need it? Not for now...
+            return true;
+        };
+        Text2D.prototype.createModelRenderCache = function (modelKey) {
+            var renderCache = new Text2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        };
+        Text2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+            var renderCache = modelRenderCache;
+            var engine = this.owner.engine;
+            renderCache.fontTexture = this.fontTexture;
+            renderCache.fontTexture.incCachedFontTextureCounter();
+            var vb = new Float32Array(4);
+            for (var i = 0; i < 4; i++) {
+                vb[i] = i;
+            }
+            renderCache.vb = engine.createVertexBuffer(vb);
+            var ib = new Float32Array(6);
+            ib[0] = 0;
+            ib[1] = 2;
+            ib[2] = 1;
+            ib[3] = 0;
+            ib[4] = 3;
+            ib[5] = 2;
+            renderCache.ib = engine.createIndexBuffer(ib);
+            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+            var ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, true);
+            if (ei) {
+                renderCache.effectInstanced = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            }
+            ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, false);
+            renderCache.effect = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            return renderCache;
+        };
+        Text2D.prototype.createInstanceDataParts = function () {
+            return [new Text2DInstanceData(Text2D.TEXT2D_MAINPARTID, this._charCount)];
+        };
+        // Looks like a hack!? Yes! Because that's what it is!
+        // For the InstanceData layer to compute correctly we need to set all the properties involved, which won't be the case if there's no text
+        // This method is called before the layout construction for us to detect this case, set some text and return the initial one to restore it after (there can be some text without char to display, say "\t\n" for instance)
+        Text2D.prototype.beforeRefreshForLayoutConstruction = function (part) {
+            if (!this._charCount) {
+                var curText = this._text;
+                this.text = "A";
+                return curText;
+            }
+        };
+        // if obj contains something, we restore the _text property
+        Text2D.prototype.afterRefreshForLayoutConstruction = function (part, obj) {
+            if (obj !== undefined) {
+                this.text = obj;
+            }
+        };
+        Text2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            if (part.id === Text2D.TEXT2D_MAINPARTID) {
+                var d = part;
+                var texture = this.fontTexture;
+                var superSampleFactor = texture.isSuperSampled ? 0.5 : 1;
+                var ts = texture.getSize();
+                var offset = BABYLON.Vector2.Zero();
+                var lh = this.fontTexture.lineHeight;
+                offset.y = ((this.textSize.height / lh) - 1) * lh; // Origin is bottom, not top, so the offset is starting with a y that is the top location of the text
+                var charxpos = 0;
+                d.dataElementCount = this._charCount;
+                d.curElement = 0;
+                for (var _i = 0, _a = this.text; _i < _a.length; _i++) {
+                    var char = _a[_i];
+                    // Line feed
+                    if (char === "\n") {
+                        offset.x = 0;
+                        offset.y -= texture.lineHeight;
+                    }
+                    // Tabulation ?
+                    if (char === "\t") {
+                        var nextPos = charxpos + this._tabulationSize;
+                        nextPos = nextPos - (nextPos % this._tabulationSize);
+                        offset.x += (nextPos - charxpos) * texture.spaceWidth;
+                        charxpos = nextPos;
+                        continue;
+                    }
+                    if (char < " ") {
+                        continue;
+                    }
+                    this.updateInstanceDataPart(d, offset);
+                    var ci = texture.getChar(char);
+                    offset.x += ci.charWidth;
+                    d.topLeftUV = ci.topLeftUV;
+                    var suv = ci.bottomRightUV.subtract(ci.topLeftUV);
+                    d.sizeUV = suv;
+                    d.textureSize = new BABYLON.Vector2(ts.width, ts.height);
+                    d.color = this.defaultFontColor;
+                    d.superSampleFactor = superSampleFactor;
+                    ++d.curElement;
+                }
+            }
+            return true;
+        };
+        Text2D.prototype._updateCharCount = function () {
+            var count = 0;
+            for (var _i = 0, _a = this._text; _i < _a.length; _i++) {
+                var char = _a[_i];
+                if (char === "\r" || char === "\n" || char === "\t" || char < " ") {
+                    continue;
+                }
+                ++count;
+            }
+            this._charCount = count;
+        };
+        Text2D.prototype._useTextureAlpha = function () {
+            return this.fontTexture != null && this.fontTexture.hasAlpha;
+        };
+        Text2D.prototype._shouldUseAlphaFromTexture = function () {
+            return true;
+        };
+        Text2D.TEXT2D_MAINPARTID = 1;
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, function (pi) { return Text2D.fontProperty = pi; }, false, true)
+        ], Text2D.prototype, "fontName", null);
+        __decorate([
+            BABYLON.dynamicLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, function (pi) { return Text2D.defaultFontColorProperty = pi; })
+        ], Text2D.prototype, "defaultFontColor", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, function (pi) { return Text2D.textProperty = pi; }, false, true)
+        ], Text2D.prototype, "text", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, function (pi) { return Text2D.sizeProperty = pi; })
+        ], Text2D.prototype, "size", null);
+        Text2D = __decorate([
+            BABYLON.className("Text2D", "BABYLON")
+        ], Text2D);
+        return Text2D;
+    }(BABYLON.RenderablePrim2D));
+    BABYLON.Text2D = Text2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.text2d.ts

@@ -0,0 +1,520 @@
+module BABYLON {
+    export class Text2DRenderCache extends ModelRenderCache {
+        effectsReady: boolean                           = false;
+        vb: WebGLBuffer                                 = null;
+        ib: WebGLBuffer                                 = null;
+        instancingAttributes: InstancingAttributeInfo[] = null;
+        fontTexture: FontTexture                        = null;
+        effect: Effect                                  = null;
+        effectInstanced: Effect                         = null;
+
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            let canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+
+            this.fontTexture.update();
+
+            let effect = context.useInstancing ? this.effectInstanced : this.effect;
+
+            engine.enableEffect(effect);
+            effect.setTexture("diffuseSampler", this.fontTexture);
+            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
+
+            var curAlphaMode = engine.getAlphaMode();
+
+            engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+
+            let pid = context.groupInfoPartData[0];
+            if (context.useInstancing) {
+                if (!this.instancingAttributes) {
+                    this.instancingAttributes = this.loadInstancingAttributes(Text2D.TEXT2D_MAINPARTID, effect);
+                }
+
+                let glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
+                let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                canvas._addDrawCallCount(1, context.renderMode);
+                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
+                engine.draw(true, 0, 6, count);
+                engine.unbindInstanceAttributes();
+            } else {
+                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                    this.setupUniforms(effect, 0, pid._partData, i);
+                    engine.draw(true, 0, 6);
+                }
+            }
+
+            engine.setAlphaMode(curAlphaMode, true);
+
+            return true;
+        }
+
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.vb) {
+                this._engine._releaseBuffer(this.vb);
+                this.vb = null;
+            }
+
+            if (this.ib) {
+                this._engine._releaseBuffer(this.ib);
+                this.ib = null;
+            }
+
+            if (this.fontTexture) {
+                this.fontTexture.decCachedFontTextureCounter();
+                this.fontTexture = null;
+            }
+
+            this.effect = null;
+            this.effectInstanced = null;
+
+            return true;
+        }
+
+    }
+
+    export class Text2DInstanceData extends InstanceDataBase {
+        constructor(partId: number, dataElementCount: number) {
+            super(partId, dataElementCount);
+        }
+
+        @instanceData()
+        get topLeftUV(): Vector2 {
+            return null;
+        }
+        set topLeftUV(value: Vector2) {
+        }
+
+        @instanceData()
+        get sizeUV(): Vector2 {
+            return null;
+        }
+        set sizeUV(value: Vector2) {
+        }
+
+        @instanceData()
+        get textureSize(): Vector2 {
+            return null;
+        }
+        set textureSize(value: Vector2) {
+        }
+
+        @instanceData()
+        get color(): Color4 {
+            return null;
+        }
+        set color(value: Color4) {
+        }
+
+        @instanceData()
+        get superSampleFactor(): number {
+            return null;
+        }
+        set superSampleFactor(value: number) {
+        }
+    }
+
+    @className("Text2D", "BABYLON")
+    /**
+     * Primitive that render text using a specific font
+     */
+    export class Text2D extends RenderablePrim2D {
+        static TEXT2D_MAINPARTID = 1;
+
+        public static fontProperty: Prim2DPropInfo;
+        public static defaultFontColorProperty: Prim2DPropInfo;
+        public static textProperty: Prim2DPropInfo;
+        public static sizeProperty: Prim2DPropInfo;
+
+        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => Text2D.fontProperty = pi, false, true)
+        /**
+         * Get/set the font name to use, using HTML CSS notation.
+         * Set is not supported right now.
+         */
+        public get fontName(): string {
+            return this._fontName;
+        }
+
+        public set fontName(value: string) {
+            if (this._fontName) {
+                throw new Error("Font Name change is not supported right now.");
+            }
+            this._fontName = value;
+        }
+
+        @dynamicLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Text2D.defaultFontColorProperty = pi)
+        /**
+         * Get/set the font default color
+         */
+        public get defaultFontColor(): Color4 {
+            return this._defaultFontColor;
+        }
+
+        public set defaultFontColor(value: Color4) {
+            this._defaultFontColor = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Text2D.textProperty = pi, false, true)
+        /**
+         * Get/set the text to render.
+         * \n \t character are supported. 
+         */
+        public get text(): string {
+            return this._text;
+        }
+
+        public set text(value: string) {
+            if (!value) {
+                value = "";
+            }
+            this._text = value;
+            this._textSize = null;    // A change of text will reset the TextSize which will be recomputed next time it's used
+            this._size = null;
+            this._updateCharCount();
+
+            // Trigger a textSize to for a sizeChange if necessary, which is needed for layout to recompute
+            let s = this.textSize;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, pi => Text2D.sizeProperty = pi)
+        /**
+         * Get/set the size of the area where the text is drawn.
+         * You should not set this size, the default behavior compute the size based on the actual text.
+         */
+        public get size(): Size {
+            if (this._size != null) {
+                return this._size;
+            }
+            return this.textSize;
+        }
+
+        public set size(value: Size) {
+            this._size = value;
+        }
+
+        public get isSizeAuto(): boolean {
+            return false;
+        }
+
+        /**
+         * Get the actual size of the Text2D primitive
+         */
+        public get actualSize(): Size {
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+            return this.size;
+        }
+
+        /**
+         * Get the area that bounds the text associated to the primitive
+         */
+        public get textSize(): Size {
+            if (!this._textSize) {
+                if (this.owner && this._text) {
+                    let newSize = this.fontTexture.measureText(this._text, this._tabulationSize);
+                    if (!newSize.equals(this._textSize)) {
+                        this.onPrimitivePropertyDirty(Prim2DBase.sizeProperty.flagId);
+                        this._positioningDirty();
+                    }
+                    this._textSize = newSize;
+                } else {
+                    return Text2D.nullSize;
+                }
+            }
+            
+            return this._textSize;
+        }
+
+        protected get fontTexture(): FontTexture {
+            if (this._fontTexture) {
+                return this._fontTexture;
+            }
+
+            if (this.fontName == null || this.owner == null || this.owner.scene == null) {
+                return null;
+            }
+
+            this._fontTexture = FontTexture.GetCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
+            return this._fontTexture;
+        }
+
+        /**
+         * Dispose the primitive, remove it from its parent
+         */
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this._fontTexture) {
+                FontTexture.ReleaseCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
+                this._fontTexture = null;
+            }
+
+            return true;
+        }
+
+        protected updateLevelBoundingInfo() {
+            BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        }
+
+        /**
+         * Create a Text primitive
+         * @param text the text to display
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - fontName: the name/size/style of the font to use, following the CSS notation. Default is "12pt Arial".
+         * - fontSuperSample: if true the text will be rendered with a superSampled font (the font is twice the given size). Use this settings if the text lies in world space or if it's scaled in.
+         * - defaultFontColor: the color by default to apply on each letter of the text to display, default is plain white.
+         * - areaSize: the size of the area in which to display the text, default is auto-fit from text content.
+         * - tabulationSize: number of space character to insert when a tabulation is encountered, default is 4
+         * - isVisible: true if the text must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        constructor(text: string, settings?: {
+
+            parent                ?: Prim2DBase, 
+            children              ?: Array<Prim2DBase>,
+            id                    ?: string,
+            position              ?: Vector2,
+            x                     ?: number,
+            y                     ?: number,
+            rotation              ?: number,
+            scale                 ?: number,
+            scaleX                ?: number,
+            scaleY                ?: number,
+            dontInheritParentScale?: boolean,
+            opacity               ?: number,
+            zOrder                ?: number, 
+            origin                ?: Vector2,
+            fontName              ?: string,
+            fontSuperSample       ?: boolean,
+            defaultFontColor      ?: Color4,
+            size                  ?: Size,
+            tabulationSize        ?: number,
+            isVisible             ?: boolean,
+            isPickable            ?: boolean,
+            isContainer           ?: boolean,
+            childrenFlatZOrder    ?: boolean,
+            marginTop             ?: number | string,
+            marginLeft            ?: number | string,
+            marginRight           ?: number | string,
+            marginBottom          ?: number | string,
+            margin                ?: number | string,
+            marginHAlignment      ?: number,
+            marginVAlignment      ?: number,
+            marginAlignment       ?: string,
+            paddingTop            ?: number | string,
+            paddingLeft           ?: number | string,
+            paddingRight          ?: number | string,
+            paddingBottom         ?: number | string,
+            padding               ?: string,
+        }) {
+
+            if (!settings) {
+                settings = {};
+            }
+
+            super(settings);
+
+            this.fontName            = (settings.fontName==null) ? "12pt Arial" : settings.fontName;
+            this._fontSuperSample    = (settings.fontSuperSample!=null && settings.fontSuperSample);
+            this.defaultFontColor    = (settings.defaultFontColor==null) ? new Color4(1,1,1,1) : settings.defaultFontColor;
+            this._tabulationSize     = (settings.tabulationSize == null) ? 4 : settings.tabulationSize;
+            this._textSize           = null;
+            this.text                = text;
+            this.size                = (settings.size==null) ? null : settings.size;
+
+            this._updateRenderMode();
+        }
+
+        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
+            // For now I can't do something better that boundingInfo is a hit, detecting an intersection on a particular letter would be possible, but do we really need it? Not for now...
+            return true;
+        }
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            let renderCache = new Text2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+            let renderCache = <Text2DRenderCache>modelRenderCache;
+            let engine = this.owner.engine;
+
+            renderCache.fontTexture = this.fontTexture;
+            renderCache.fontTexture.incCachedFontTextureCounter();
+
+            let vb = new Float32Array(4);
+            for (let i = 0; i < 4; i++) {
+                vb[i] = i;
+            }
+            renderCache.vb = engine.createVertexBuffer(vb);
+
+            let ib = new Float32Array(6);
+            ib[0] = 0;
+            ib[1] = 2;
+            ib[2] = 1;
+            ib[3] = 0;
+            ib[4] = 3;
+            ib[5] = 2;
+
+            renderCache.ib = engine.createIndexBuffer(ib);
+
+            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+            let ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, true);
+            if (ei) {
+                renderCache.effectInstanced = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            }
+
+            ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, false);
+            renderCache.effect = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+
+            return renderCache;
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            return [new Text2DInstanceData(Text2D.TEXT2D_MAINPARTID, this._charCount)];
+        }
+
+        // Looks like a hack!? Yes! Because that's what it is!
+        // For the InstanceData layer to compute correctly we need to set all the properties involved, which won't be the case if there's no text
+        // This method is called before the layout construction for us to detect this case, set some text and return the initial one to restore it after (there can be some text without char to display, say "\t\n" for instance)
+        protected beforeRefreshForLayoutConstruction(part: InstanceDataBase): any {
+            if (!this._charCount) {
+                let curText = this._text;
+                this.text = "A";
+                return curText;
+            }
+        }
+
+        // if obj contains something, we restore the _text property
+        protected afterRefreshForLayoutConstruction(part: InstanceDataBase, obj: any) {
+            if (obj !== undefined) {
+                this.text = obj;
+            }
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+
+            if (part.id === Text2D.TEXT2D_MAINPARTID) {
+                let d = <Text2DInstanceData>part;
+                let texture = this.fontTexture;
+                let superSampleFactor = texture.isSuperSampled ? 0.5 : 1;
+                let ts = texture.getSize();
+                let offset = Vector2.Zero();
+                let lh = this.fontTexture.lineHeight;
+                offset.y = ((this.textSize.height/lh)-1) * lh;  // Origin is bottom, not top, so the offset is starting with a y that is the top location of the text
+                let charxpos = 0;
+                d.dataElementCount = this._charCount;
+                d.curElement = 0;
+                for (let char of this.text) {
+
+                    // Line feed
+                    if (char === "\n") {
+                        offset.x = 0;
+                        offset.y -= texture.lineHeight;
+                    }
+
+                    // Tabulation ?
+                    if (char === "\t") {
+                        let nextPos = charxpos + this._tabulationSize;
+                        nextPos = nextPos - (nextPos % this._tabulationSize);
+
+                        offset.x += (nextPos - charxpos) * texture.spaceWidth;
+                        charxpos = nextPos;
+                        continue;
+                    }
+
+                    if (char < " ") {
+                        continue;
+                    }
+
+                    this.updateInstanceDataPart(d, offset);
+
+                    let ci = texture.getChar(char);
+                    offset.x += ci.charWidth;
+
+                    d.topLeftUV = ci.topLeftUV;
+                    let suv = ci.bottomRightUV.subtract(ci.topLeftUV);
+                    d.sizeUV = suv;
+                    d.textureSize = new Vector2(ts.width, ts.height);
+                    d.color = this.defaultFontColor;
+                    d.superSampleFactor = superSampleFactor;
+
+                    ++d.curElement;
+                }
+            }
+            return true;
+        }
+
+        private _updateCharCount() {
+            let count = 0;
+            for (let char of this._text) {
+                if (char === "\r" || char === "\n" || char === "\t" || char < " ") {
+                    continue;
+                }
+                ++count;
+            }
+            this._charCount = count;
+        }
+
+        protected _useTextureAlpha(): boolean {
+            return this.fontTexture != null && this.fontTexture.hasAlpha;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return true;
+        }
+
+        private _fontTexture: FontTexture;
+        private _tabulationSize: number;
+        private _charCount: number;
+        private _fontName: string;
+        private _fontSuperSample: boolean;
+        private _defaultFontColor: Color4;
+        private _text: string;
+        private _textSize: Size;
+    }
+
+
+}

canvas2D/src/Engine/babylon.worldSpaceCanvas2dNode.js

@@ -0,0 +1,27 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * This is the class that is used to display a World Space Canvas into a 3D scene
+     */
+    var WorldSpaceCanvas2DNode = (function (_super) {
+        __extends(WorldSpaceCanvas2DNode, _super);
+        function WorldSpaceCanvas2DNode(name, scene, canvas) {
+            _super.call(this, name, scene);
+            this._canvas = canvas;
+        }
+        WorldSpaceCanvas2DNode.prototype.dispose = function () {
+            _super.prototype.dispose.call(this);
+            if (this._canvas) {
+                this._canvas.dispose();
+                this._canvas = null;
+            }
+        };
+        return WorldSpaceCanvas2DNode;
+    }(BABYLON.Mesh));
+    BABYLON.WorldSpaceCanvas2DNode = WorldSpaceCanvas2DNode;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/Engine/babylon.worldSpaceCanvas2dNode.ts

@@ -0,0 +1,22 @@
+module BABYLON {
+    /**
+     * This is the class that is used to display a World Space Canvas into a 3D scene
+     */
+    export class WorldSpaceCanvas2DNode extends Mesh {
+        constructor(name: string, scene: Scene, canvas: Canvas2D) {
+            super(name, scene);
+
+            this._canvas = canvas;
+        }
+
+        public dispose(): void {
+            super.dispose();
+            if (this._canvas) {
+                this._canvas.dispose();
+                this._canvas = null;
+            }
+        }
+
+        private _canvas: Canvas2D;
+    }
+}

canvas2D/src/GUI/babylon.gui.UIElement.ts

@@ -0,0 +1,806 @@
+module BABYLON {
+
+    export interface ICommand {
+        canExecute(parameter: any): boolean;
+        execute(parameter: any): void;
+        canExecuteChanged: Observable<void>;
+    }
+
+    export class Command implements ICommand {
+        constructor(execute: (p) => void, canExecute: (p) => boolean) {
+            if (!execute) {
+                throw Error("At least an execute lambda must be given at Command creation time");
+            }
+
+            this._canExecuteChanged    = null;
+            this._lastCanExecuteResult = null;
+            this.execute               = execute;
+            this.canExecute            = canExecute;
+        }
+
+        canExecute(parameter): boolean {
+            let res = true;
+
+            if (this._canExecute) {
+                res = this._canExecute(parameter);
+            }
+
+            if (res !== this._lastCanExecuteResult) {
+                if (this._canExecuteChanged && this._canExecuteChanged.hasObservers()) {
+                    this._canExecuteChanged.notifyObservers(null);
+                }
+
+                this._lastCanExecuteResult = res;
+            }
+
+            return res;
+        }
+
+        execute(parameter): void {
+            this._execute(parameter);
+        }
+
+        get canExecuteChanged(): Observable<void> {
+            if (!this._canExecuteChanged) {
+                this._canExecuteChanged = new Observable<void>();
+            }
+            return this._canExecuteChanged;
+        }
+
+        private _lastCanExecuteResult: boolean;
+        private _execute: (p) => void;
+        private _canExecute: (p) => boolean;
+        private _canExecuteChanged: Observable<void>;
+    }
+
+    export abstract class UIElement extends SmartPropertyBase {
+
+        static UIELEMENT_PROPCOUNT: number = 15;
+
+        static parentProperty         : Prim2DPropInfo;
+        static widthProperty          : Prim2DPropInfo;
+        static heightProperty         : Prim2DPropInfo;
+        static minWidthProperty       : Prim2DPropInfo;
+        static minHeightProperty      : Prim2DPropInfo;
+        static maxWidthProperty       : Prim2DPropInfo;
+        static maxHeightProperty      : Prim2DPropInfo;
+        static actualWidthProperty    : Prim2DPropInfo;
+        static actualHeightProperty   : Prim2DPropInfo;
+        static marginProperty         : Prim2DPropInfo;
+        static paddingProperty        : Prim2DPropInfo;
+        static marginAlignmentProperty: Prim2DPropInfo;
+        static isEnabledProperty      : Prim2DPropInfo;
+        static isFocusedProperty      : Prim2DPropInfo;
+        static isMouseOverProperty    : Prim2DPropInfo;
+
+        constructor(settings: {
+            id              ?: string,
+            parent          ?: UIElement,
+            templateName    ?: string,
+            styleName       ?: string,
+            minWidth        ?: number,
+            minHeight       ?: number,
+            maxWidth        ?: number,
+            maxHeight       ?: number,
+            width           ?: number,
+            height          ?: number,
+            marginTop       ?: number | string,
+            marginLeft      ?: number | string,
+            marginRight     ?: number | string,
+            marginBottom    ?: number | string,
+            margin          ?: number | string,
+            marginHAlignment?: number,
+            marginVAlignment?: number,
+            marginAlignment ?: string,
+            paddingTop      ?: number | string,
+            paddingLeft     ?: number | string,
+            paddingRight    ?: number | string,
+            paddingBottom   ?: number | string,
+            padding         ?: string,
+        }) {
+            super();
+
+            if (!settings) {
+                throw Error("A settings object must be passed with at least either a parent or owner parameter");
+            }
+
+            let type                        = Tools.getFullClassName(this);
+            this._ownerWindow               = null;
+            this._parent                    = null;
+            this._visualPlaceholder         = null;
+            this._visualTemplateRoot        = null;
+            this._visualChildrenPlaceholder = null;
+            this._hierarchyDepth            = 0;
+            this._style                     = (settings.styleName!=null) ? UIElementStyleManager.getStyle(type, settings.styleName) : null;
+            this._flags                     = 0;
+            this._id                        = (settings.id!=null) ? settings.id : null;
+            this._uid                       = null;
+            this._width                     = (settings.width     != null) ? settings.width     : null;
+            this._height                    = (settings.height    != null) ? settings.height    : null;
+            this._minWidth                  = (settings.minWidth  != null) ? settings.minWidth  : 0;
+            this._minHeight                 = (settings.minHeight != null) ? settings.minHeight : 0;
+            this._maxWidth                  = (settings.maxWidth  != null) ? settings.maxWidth  : Number.MAX_VALUE;
+            this._maxHeight                 = (settings.maxHeight != null) ? settings.maxHeight : Number.MAX_VALUE;
+            this._margin                    = null;
+            this._padding                   = null;
+            this._marginAlignment           = null;
+            this._isEnabled                 = true;
+            this._isFocused                 = false;
+            this._isMouseOver               = false;
+
+            // Default Margin Alignment for UIElement is stretch for horizontal/vertical and not left/bottom (which is the default for Canvas2D Primitives)
+            //this.marginAlignment.horizontal = PrimitiveAlignment.AlignStretch;
+            //this.marginAlignment.vertical   = PrimitiveAlignment.AlignStretch;
+
+            // Set the layout/margin stuffs
+            if (settings.marginTop) {
+                this.margin.setTop(settings.marginTop);
+            }
+            if (settings.marginLeft) {
+                this.margin.setLeft(settings.marginLeft);
+            }
+            if (settings.marginRight) {
+                this.margin.setRight(settings.marginRight);
+            }
+            if (settings.marginBottom) {
+                this.margin.setBottom(settings.marginBottom);
+            }
+
+            if (settings.margin) {
+                if (typeof settings.margin === "string") {
+                    this.margin.fromString(<string>settings.margin);
+                } else {
+                    this.margin.fromUniformPixels(<number>settings.margin);
+                }
+            }
+
+            if (settings.marginHAlignment) {
+                this.marginAlignment.horizontal = settings.marginHAlignment;
+            }
+
+            if (settings.marginVAlignment) {
+                this.marginAlignment.vertical = settings.marginVAlignment;
+            }
+
+            if (settings.marginAlignment) {
+                this.marginAlignment.fromString(settings.marginAlignment);
+            }
+
+            if (settings.paddingTop) {
+                this.padding.setTop(settings.paddingTop);
+            }
+            if (settings.paddingLeft) {
+                this.padding.setLeft(settings.paddingLeft);
+            }
+            if (settings.paddingRight) {
+                this.padding.setRight(settings.paddingRight);
+            }
+            if (settings.paddingBottom) {
+                this.padding.setBottom(settings.paddingBottom);
+            }
+
+            if (settings.padding) {
+                this.padding.fromString(settings.padding);
+            }
+
+            this._assignTemplate(settings.templateName);
+
+            if (settings.parent != null) {
+                this._parent = settings.parent;
+                this._hierarchyDepth = this._parent._hierarchyDepth + 1;
+            }
+        }
+
+        public dispose(): boolean {
+            if (this.isDisposed) {
+                return false;
+            }
+
+            if (this._renderingTemplate) {
+                this._renderingTemplate.detach();
+                this._renderingTemplate = null;
+            }
+
+            super.dispose();
+
+            // Don't set to null, it may upset somebody...
+            this.animations.splice(0);
+
+            return true;
+        }
+
+        /**
+         * Animation array, more info: http://doc.babylonjs.com/tutorials/Animations
+         */
+        public animations: Animation[];
+
+        /**
+         * Returns as a new array populated with the Animatable used by the primitive. Must be overloaded by derived primitives.
+         * Look at Sprite2D for more information
+         */
+        public getAnimatables(): IAnimatable[] {
+            return new Array<IAnimatable>();
+        }
+
+        // TODO
+
+        // PROPERTIES
+
+        // Style
+        // Id
+        // Parent/Children
+        // ActualWidth/Height, MinWidth/Height, MaxWidth/Height,
+        // Alignment/Margin
+        // Visibility, IsVisible
+        // IsEnabled (is false, control is disabled, no interaction and a specific render state)
+        // CacheMode of Visual Elements
+        // Focusable/IsFocused
+        // IsPointerCaptured, CapturePointer, IsPointerDirectlyOver, IsPointerOver. De-correlate mouse, stylus, touch?
+        // ContextMenu
+        // Cursor
+        // DesiredSize
+        // IsInputEnable ?
+        // Opacity, OpacityMask ?
+        // SnapToDevicePixels
+        // Tag
+        // ToolTip
+
+        // METHODS
+
+        // BringIntoView (for scrollable content, to move the scroll to bring the given element visible in the parent's area)
+        // Capture/ReleaseCapture (mouse, touch, stylus)
+        // Focus
+        // PointFrom/ToScreen to translate coordinates
+
+        // EVENTS
+
+        // ContextMenuOpening/Closing/Changed
+        // DragEnter/LeaveOver, Drop
+        // Got/LostFocus
+        // IsEnabledChanged
+        // IsPointerOver/DirectlyOverChanged
+        // IsVisibleChanged
+        // KeyDown/Up
+        // LayoutUpdated ?
+        // Pointer related events
+        // SizeChanged
+        // ToolTipOpening/Closing
+
+        public get ownerWindows(): Window {
+            return this._ownerWindow;
+        }
+
+        public get style(): string {
+            if (!this.style) {
+                return UIElementStyleManager.DefaultStyleName;
+            }
+            return this._style.name;
+        }
+
+        public set style(value: string) {
+            if (this._style && (this._style.name === value)) {
+                return;
+            }
+
+            let newStyle: UIElementStyle = null;
+            if (value) {
+                newStyle = UIElementStyleManager.getStyle(Tools.getFullClassName(this), value);
+                if (!newStyle) {
+                    throw Error(`Couldn't find Style ${value} for UIElement ${Tools.getFullClassName(this)}`);
+                }
+            }
+
+            if (this._style) {
+                this._style.removeStyle(this);
+            }
+
+            if (newStyle) {
+                newStyle.applyStyle(this);
+            }
+            
+            this._style = newStyle;
+        }
+
+        /**
+         * A string that identifies the UIElement.
+         * The id is optional and there's possible collision with other UIElement's id as the uniqueness is not supported.
+         */
+        public get id(): string {
+            return this._id;
+        }
+
+        public set id(value: string) {
+            if (this._id === value) {
+                return;
+            }
+
+            this._id = value;
+        }
+
+        /**
+         * Return a unique id automatically generated.
+         * This property is mainly used for serialization to ensure a perfect way of identifying a UIElement
+         */
+        public get uid(): string {
+            if (!this._uid) {
+                this._uid = Tools.RandomId();
+            }
+            return this._uid;
+        }
+
+        public get hierarchyDepth(): number {
+            return this._hierarchyDepth;
+        }
+
+        @dependencyProperty(0, pi => UIElement.parentProperty = pi)
+        public get parent(): UIElement {
+            return this._parent;
+        }
+
+        public set parent(value: UIElement) {
+            this._parent = value;
+        }
+
+        @dependencyProperty(1, pi => UIElement.widthProperty = pi)
+        public get width(): number {
+            return this._width;
+        }
+
+        public set width(value: number) {
+            this._width = value;
+        }
+
+        @dependencyProperty(2, pi => UIElement.heightProperty = pi)
+        public get height(): number {
+            return this._height;
+        }
+
+        public set height(value: number) {
+            this._height = value;
+        }
+
+        @dependencyProperty(3, pi => UIElement.minWidthProperty = pi)
+        public get minWidth(): number {
+            return this._minWidth;
+        }
+
+        public set minWidth(value: number) {
+            this._minWidth = value;
+        }
+
+        @dependencyProperty(4, pi => UIElement.minHeightProperty = pi)
+        public get minHheight(): number {
+            return this._minHeight;
+        }
+
+        public set minHeight(value: number) {
+            this._minHeight = value;
+        }
+
+        @dependencyProperty(5, pi => UIElement.maxWidthProperty = pi)
+        public get maxWidth(): number {
+            return this._maxWidth;
+        }
+
+        public set maxWidth(value: number) {
+            this._maxWidth = value;
+        }
+
+        @dependencyProperty(6, pi => UIElement.maxHeightProperty = pi)
+        public get maxHeight(): number {
+            return this._maxHeight;
+        }
+
+        public set maxHeight(value: number) {
+            this._maxHeight = value;
+        }
+
+        @dependencyProperty(7, pi => UIElement.actualWidthProperty = pi)
+        public get actualWidth(): number {
+            return this._actualWidth;
+        }
+
+        public set actualWidth(value: number) {
+            this._actualWidth = value;
+        }
+
+        @dependencyProperty(8, pi => UIElement.actualHeightProperty = pi)
+        public get actualHeight(): number {
+            return this._actualHeight;
+        }
+
+        public set actualHeight(value: number) {
+            this._actualHeight = value;
+        }
+
+        @dynamicLevelProperty(9, pi => UIElement.marginProperty = pi)
+        /**
+         * You can get/set a margin on the primitive through this property
+         * @returns the margin object, if there was none, a default one is created and returned
+         */
+        public get margin(): PrimitiveThickness {
+            if (!this._margin) {
+                this._margin = new PrimitiveThickness(() => {
+                    if (!this.parent) {
+                        return null;
+                    }
+                    return this.parent.margin;
+                });
+            }
+            return this._margin;
+        }
+
+        public set margin(value: PrimitiveThickness) {
+            this.margin.copyFrom(value);
+        }
+
+        public get _hasMargin(): boolean {
+            return (this._margin !== null && !this._margin.isDefault) || (this._marginAlignment !== null && !this._marginAlignment.isDefault);
+        }
+
+        @dynamicLevelProperty(10, pi => UIElement.paddingProperty = pi)
+        /**
+         * You can get/set a margin on the primitive through this property
+         * @returns the margin object, if there was none, a default one is created and returned
+         */
+        public get padding(): PrimitiveThickness {
+            if (!this._padding) {
+                this._padding = new PrimitiveThickness(() => {
+                    if (!this.parent) {
+                        return null;
+                    }
+                    return this.parent.padding;
+                });
+            }
+            return this._padding;
+        }
+
+        public set padding(value: PrimitiveThickness) {
+            this.padding.copyFrom(value);
+        }
+
+        private get _hasPadding(): boolean {
+            return this._padding !== null && !this._padding.isDefault;
+        }
+
+        @dynamicLevelProperty(11, pi => UIElement.marginAlignmentProperty = pi)
+        /**
+         * You can get/set the margin alignment through this property
+         */
+        public get marginAlignment(): PrimitiveAlignment {
+            if (!this._marginAlignment) {
+                this._marginAlignment = new PrimitiveAlignment();
+            }
+            return this._marginAlignment;
+        }
+
+        public set marginAlignment(value: PrimitiveAlignment) {
+            this.marginAlignment.copyFrom(value);
+        }
+
+        /**
+         * Check if there a marginAlignment specified (non null and not default)
+         */
+        public get _hasMarginAlignment(): boolean {
+            return (this._marginAlignment !== null && !this._marginAlignment.isDefault);
+        }
+
+        @dynamicLevelProperty(12, pi => UIElement.isEnabledProperty = pi)
+        /**
+         * True if the UIElement is enabled, false if it's disabled
+         */
+        public get isEnabled(): boolean {
+            return this._isEnabled;
+        }
+
+        public set isEnabled(value: boolean) {
+            this._isEnabled = value;
+        }
+
+        @dynamicLevelProperty(13, pi => UIElement.isFocusedProperty = pi)
+        /**
+         * True if the UIElement has the focus, false if it doesn't
+         */
+        public get isFocused(): boolean {
+            return this._isFocused;
+        }
+
+        public set isFocused(value: boolean) {
+            this._isFocused = value;
+        }
+
+        @dynamicLevelProperty(14, pi => UIElement.isMouseOverProperty = pi)
+        /**
+         * True if the UIElement has the mouse over it
+         */
+        public get isMouseOver(): boolean {
+            return this._isMouseOver;
+        }
+
+        public set isMouseOver(value: boolean) {
+            this._isMouseOver = value;
+        }
+
+        /**
+         * Check if a given flag is set
+         * @param flag the flag value
+         * @return true if set, false otherwise
+         */
+        public _isFlagSet(flag: number): boolean {
+            return (this._flags & flag) !== 0;
+        }
+
+        /**
+         * Check if all given flags are set
+         * @param flags the flags ORed
+         * @return true if all the flags are set, false otherwise
+         */
+        public _areAllFlagsSet(flags: number): boolean {
+            return (this._flags & flags) === flags;
+        }
+
+        /**
+         * Check if at least one flag of the given flags is set
+         * @param flags the flags ORed
+         * @return true if at least one flag is set, false otherwise
+         */
+        public _areSomeFlagsSet(flags: number): boolean {
+            return (this._flags & flags) !== 0;
+        }
+
+        /**
+         * Clear the given flags
+         * @param flags the flags to clear
+         */
+        public _clearFlags(flags: number) {
+            this._flags &= ~flags;
+        }
+
+        /**
+         * Set the given flags to true state
+         * @param flags the flags ORed to set
+         * @return the flags state before this call
+         */
+        public _setFlags(flags: number): number {
+            let cur = this._flags;
+            this._flags |= flags;
+            return cur;
+        }
+
+        /**
+         * Change the state of the given flags
+         * @param flags the flags ORed to change
+         * @param state true to set them, false to clear them
+         */
+        public _changeFlags(flags: number, state: boolean) {
+            if (state) {
+                this._flags |= flags;
+            } else {
+                this._flags &= ~flags;
+            }
+        }
+
+        private _assignTemplate(templateName: string) {
+            if (!templateName) {
+                templateName = UIElementRenderingTemplateManager.DefaultTemplateName;
+            }
+            let className = Tools.getFullClassName(this);
+            if (!className) {
+                throw Error("Couldn't access class name of this UIElement, you have to decorate the type with the className decorator");
+            }
+
+            let factory = UIElementRenderingTemplateManager.getRenderingTemplate(className, templateName);
+            if (!factory) {
+                throw Error(`Couldn't get the renderingTemplate ${templateName} of class ${className}`);
+            }
+
+            this._renderingTemplate = factory();
+            this._renderingTemplate.attach(this);
+        }
+
+        public _createVisualTree() {
+            let parentPrim: Prim2DBase = this.ownerWindows.canvas;
+            if (this.parent) {
+                parentPrim = this.parent.visualChildrenPlaceholder;
+            }
+
+            this._visualPlaceholder = new Group2D({ parent: parentPrim, id: `GUI Visual Placeholder of ${this.id}`});
+            let p = this._visualPlaceholder;
+            p.addExternalData<UIElement>("_GUIOwnerElement_", this);
+            p.dataSource = this;
+            p.createSimpleDataBinding(Prim2DBase.widthProperty, "width", DataBinding.MODE_ONEWAY);
+            p.createSimpleDataBinding(Prim2DBase.heightProperty, "height", DataBinding.MODE_ONEWAY);
+            p.createSimpleDataBinding(Prim2DBase.actualWidthProperty, "actualWidth", DataBinding.MODE_ONEWAYTOSOURCE);
+            p.createSimpleDataBinding(Prim2DBase.actualHeightProperty, "actualHeight", DataBinding.MODE_ONEWAYTOSOURCE);
+            p.createSimpleDataBinding(Prim2DBase.marginProperty, "margin", DataBinding.MODE_ONEWAY);
+            p.createSimpleDataBinding(Prim2DBase.paddingProperty, "padding", DataBinding.MODE_ONEWAY);
+            p.createSimpleDataBinding(Prim2DBase.marginAlignmentProperty, "marginAlignment", DataBinding.MODE_ONEWAY);
+            this.createVisualTree();
+        }
+
+        public _patchUIElement(ownerWindow: Window, parent: UIElement) {
+            if (ownerWindow) {
+                if (!this._ownerWindow) {
+                    ownerWindow._registerVisualToBuild(this);
+                }
+                this._ownerWindow = ownerWindow;
+            }
+            this._parent = parent;
+
+            if (parent) {
+                this._hierarchyDepth = parent.hierarchyDepth + 1;
+            }
+
+            let children = this._getChildren();
+            if (children) {
+                for (let curChild of children) {
+                    curChild._patchUIElement(ownerWindow, this);
+                }
+            }
+        }
+
+        // Overload the SmartPropertyBase's method to provide the additional logic of returning the parent's dataSource if there's no dataSource specified at this level.
+        protected _getDataSource(): IPropertyChanged {
+            let levelDS = super._getDataSource();
+            if (levelDS != null) {
+                return levelDS;
+            }
+
+            let p = this.parent;
+            if (p != null) {
+                return p.dataSource;
+            }
+
+            return null;
+        }
+
+        protected createVisualTree() {
+            let res = this._renderingTemplate.createVisualTree(this, this._visualPlaceholder);
+            this._visualTemplateRoot = res.root;
+            this._visualChildrenPlaceholder = res.contentPlaceholder;
+        }
+
+        protected get visualPlaceholder(): Prim2DBase {
+            return this._visualPlaceholder;
+        }
+
+        protected get visualTemplateRoot(): Prim2DBase {
+            return this._visualTemplateRoot;
+        }
+
+        protected get visualChildrenPlaceholder(): Prim2DBase {
+            return this._visualChildrenPlaceholder;
+        }
+
+        protected get _position(): Vector2 { return null; } // TODO use abstract keyword when TS 2.0 will be approved
+        protected abstract _getChildren(): Array<UIElement>;
+
+        public static flagVisualToBuild = 0x0000001;    // set if the UIElement visual must be updated
+
+        protected _visualPlaceholder: Group2D;
+        protected _visualTemplateRoot: Prim2DBase;
+        protected _visualChildrenPlaceholder: Prim2DBase;
+        private _renderingTemplate: UIElementRenderingTemplateBase;
+        private _parent: UIElement;
+        private _hierarchyDepth: number;
+        private _flags: number;
+        private _style: UIElementStyle;
+        private _ownerWindow: Window;
+        private _id: string;
+        private _uid: string;
+        private _actualWidth: number;
+        private _actualHeight: number;
+        private _minWidth: number;
+        private _minHeight: number;
+        private _maxWidth: number;
+        private _maxHeight: number;
+        private _width: number;
+        private _height: number;
+        private _margin: PrimitiveThickness;
+        private _padding: PrimitiveThickness;
+        private _marginAlignment: PrimitiveAlignment;
+        private _isEnabled: boolean;
+        private _isFocused: boolean;
+        private _isMouseOver: boolean;
+    }
+
+    export abstract class UIElementStyle {
+        abstract removeStyle(uiel: UIElement);
+        abstract applyStyle(uiel: UIElement);
+        get name(): string { return null; } // TODO use abstract keyword when TS 2.0 will be approved
+    }
+
+    export class UIElementStyleManager {
+        static getStyle(uiElType: string, styleName: string): UIElementStyle {
+            let styles = UIElementStyleManager.stylesByUIElement.get(uiElType);
+            if (!styles) {
+                throw Error(`The type ${uiElType} is unknown, no style were registered for it.`);
+            }
+            let style = styles.get(styleName);
+            if (!style) {
+                throw Error(`Couldn't find Template ${styleName} of UIElement type ${uiElType}`);
+            }
+            return style;
+        }
+
+        static registerStyle(uiElType: string, templateName: string, style: UIElementStyle) {
+            let templates = UIElementStyleManager.stylesByUIElement.getOrAddWithFactory(uiElType, () => new StringDictionary<UIElementStyle>());
+            if (templates.contains(templateName)) {
+                templates[templateName] = style;
+            } else {
+                templates.add(templateName, style);
+            }
+        }
+
+        static stylesByUIElement: StringDictionary<StringDictionary<UIElementStyle>> = new StringDictionary<StringDictionary<UIElementStyle>>();
+
+        public static get DefaultStyleName(): string {
+            return UIElementStyleManager._defaultStyleName;
+        }
+
+        public static set DefaultStyleName(value: string) {
+            UIElementStyleManager._defaultStyleName = value;
+        }
+
+        private static _defaultStyleName = "Default";
+    }
+
+    export class UIElementRenderingTemplateManager {
+        static getRenderingTemplate(uiElType: string, templateName: string): () => UIElementRenderingTemplateBase {
+            let templates = UIElementRenderingTemplateManager.renderingTemplatesByUIElement.get(uiElType);
+            if (!templates) {
+                throw Error(`The type ${uiElType} is unknown, no Rendering Template were registered for it.`);
+            }
+            let templateFactory = templates.get(templateName);
+            if (!templateFactory) {
+                throw Error(`Couldn't find Template ${templateName} of UI Element type ${uiElType}`);
+            }
+            return templateFactory;
+        }
+
+        static registerRenderingTemplate(uiElType: string, templateName: string, factory: () => UIElementRenderingTemplateBase) {
+            let templates = UIElementRenderingTemplateManager.renderingTemplatesByUIElement.getOrAddWithFactory(uiElType, () => new StringDictionary<() => UIElementRenderingTemplateBase>());
+            if (templates.contains(templateName)) {
+                templates[templateName] = factory;
+            } else {
+                templates.add(templateName, factory);
+            }
+        }
+
+        static renderingTemplatesByUIElement: StringDictionary<StringDictionary<() => UIElementRenderingTemplateBase>> = new StringDictionary<StringDictionary<() => UIElementRenderingTemplateBase>>();
+
+        public static get DefaultTemplateName(): string {
+            return UIElementRenderingTemplateManager._defaultTemplateName;
+        }
+
+        public static set DefaultTemplateName(value: string) {
+            UIElementRenderingTemplateManager._defaultTemplateName = value;
+        }
+        
+        private static _defaultTemplateName = "Default";
+    }
+
+    export abstract class UIElementRenderingTemplateBase {
+        attach(owner: UIElement) {
+            this._owner = owner;
+        }
+        detach() {
+            
+        }
+
+        public get owner(): UIElement {
+            return this._owner;
+        }
+
+        abstract createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase, contentPlaceholder: Prim2DBase };
+
+        private _owner: UIElement;
+    }
+
+    export function registerWindowRenderingTemplate(uiElType: string, templateName: string, factory: () => UIElementRenderingTemplateBase): (target: Object) => void {
+        return () => {
+            UIElementRenderingTemplateManager.registerRenderingTemplate(uiElType, templateName, factory);
+        }
+    }
+
+}

canvas2D/src/GUI/babylon.gui.button.ts

@@ -0,0 +1,209 @@
+module BABYLON {
+
+    @className("Button", "BABYLON")
+    export class Button extends ContentControl {
+
+        static BUTTON_PROPCOUNT = ContentControl.CONTENTCONTROL_PROPCOUNT + 3;
+
+        static isPushedProperty: Prim2DPropInfo;
+        static isDefaultProperty: Prim2DPropInfo;
+        static isOutlineProperty: Prim2DPropInfo;
+
+        constructor(settings?: {
+
+            id              ?: string,
+            parent          ?: UIElement,
+            templateName    ?: string,
+            styleName       ?: string,
+            content         ?: any,
+            contentAlignment?: string,
+            marginTop       ?: number | string,
+            marginLeft      ?: number | string,
+            marginRight     ?: number | string,
+            marginBottom    ?: number | string,
+            margin          ?: number | string,
+            marginHAlignment?: number,
+            marginVAlignment?: number,
+            marginAlignment ?: string,
+            paddingTop      ?: number | string,
+            paddingLeft     ?: number | string,
+            paddingRight    ?: number | string,
+            paddingBottom   ?: number | string,
+            padding         ?: string,
+        }) {
+            if (!settings) {
+                settings = {};
+            }
+
+            super(settings);
+
+            // For a button the default contentAlignemnt is center/center
+            if (settings.contentAlignment == null) {
+                this.contentAlignment.horizontal = PrimitiveAlignment.AlignCenter;
+                this.contentAlignment.vertical = PrimitiveAlignment.AlignCenter;
+            }
+            this.normalEnabledBackground    = Canvas2D.GetSolidColorBrushFromHex("#337AB7FF");
+            this.normalDisabledBackground   = Canvas2D.GetSolidColorBrushFromHex("#7BA9D0FF");
+            this.normalMouseOverBackground  = Canvas2D.GetSolidColorBrushFromHex("#286090FF");
+            this.normalPushedBackground     = Canvas2D.GetSolidColorBrushFromHex("#1E496EFF");
+            this.normalEnabledBorder        = Canvas2D.GetSolidColorBrushFromHex("#2E6DA4FF");
+            this.normalDisabledBorder       = Canvas2D.GetSolidColorBrushFromHex("#77A0C4FF");
+            this.normalMouseOverBorder      = Canvas2D.GetSolidColorBrushFromHex("#204D74FF");
+            this.normalPushedBorder         = Canvas2D.GetSolidColorBrushFromHex("#2E5D9EFF");
+
+            this.defaultEnabledBackground   = Canvas2D.GetSolidColorBrushFromHex("#FFFFFFFF");
+            this.defaultDisabledBackground  = Canvas2D.GetSolidColorBrushFromHex("#FFFFFFFF");
+            this.defaultMouseOverBackground = Canvas2D.GetSolidColorBrushFromHex("#E6E6E6FF");
+            this.defaultPushedBackground    = Canvas2D.GetSolidColorBrushFromHex("#D4D4D4FF");
+            this.defaultEnabledBorder       = Canvas2D.GetSolidColorBrushFromHex("#CCCCCCFF");
+            this.defaultDisabledBorder      = Canvas2D.GetSolidColorBrushFromHex("#DEDEDEFF");
+            this.defaultMouseOverBorder     = Canvas2D.GetSolidColorBrushFromHex("#ADADADFF");
+            this.defaultPushedBorder        = Canvas2D.GetSolidColorBrushFromHex("#6C8EC5FF");
+        }
+
+        @dependencyProperty(ContentControl.CONTROL_PROPCOUNT + 0, pi => Button.isPushedProperty = pi)
+        public get isPushed(): boolean {
+            return this._isPushed;
+        }
+
+        public set isPushed(value: boolean) {
+            this._isPushed = value;
+        }
+
+        @dependencyProperty(ContentControl.CONTROL_PROPCOUNT + 1, pi => Button.isDefaultProperty = pi)
+        public get isDefault(): boolean {
+            return this._isDefault;
+        }
+
+        public set isDefault(value: boolean) {
+            this._isDefault = value;
+        }
+
+        @dependencyProperty(ContentControl.CONTROL_PROPCOUNT + 2, pi => Button.isOutlineProperty = pi)
+        public get isOutline(): boolean {
+            return this._isOutline;
+        }
+
+        public set isOutline(value: boolean) {
+            this._isOutline = value;
+        }
+
+        public get clickObservable(): Observable<Button> {
+            if (!this._clickObservable) {
+                this._clickObservable = new Observable<Button>();
+            }
+            return this._clickObservable;
+        }
+
+        public _raiseClick() {
+            console.log("click");
+        }
+
+        protected createVisualTree() {
+            super.createVisualTree();
+            let p = this._visualPlaceholder;
+            p.pointerEventObservable.add((e, s) => {
+                // We reject an event coming from the placeholder because it means it's on an empty spot, so it's not valid.
+                if (e.relatedTarget === this._visualPlaceholder) {
+                    return;
+                }
+
+                if (s.mask === PrimitivePointerInfo.PointerUp) {
+                    this._raiseClick();
+                    this.isPushed = false;
+                } else if (s.mask === PrimitivePointerInfo.PointerDown) {
+                    this.isPushed = true;
+                }
+
+            }, PrimitivePointerInfo.PointerUp|PrimitivePointerInfo.PointerDown);
+        }
+
+        private _isPushed: boolean;
+        private _isDefault: boolean;
+        private _isOutline: boolean;
+        private _clickObservable: Observable<Button>;
+
+        protected get _position(): Vector2 {
+            return Vector2.Zero();
+        }
+
+        public normalEnabledBackground  : IBrush2D;
+        public normalDisabledBackground : IBrush2D;
+        public normalMouseOverBackground: IBrush2D;
+        public normalPushedBackground   : IBrush2D;
+        public normalEnabledBorder      : IBrush2D;
+        public normalDisabledBorder     : IBrush2D;
+        public normalMouseOverBorder    : IBrush2D;
+        public normalPushedBorder       : IBrush2D;
+
+        public defaultEnabledBackground  : IBrush2D;
+        public defaultDisabledBackground : IBrush2D;
+        public defaultMouseOverBackground: IBrush2D;
+        public defaultPushedBackground   : IBrush2D;
+        public defaultEnabledBorder      : IBrush2D;
+        public defaultDisabledBorder     : IBrush2D;
+        public defaultMouseOverBorder    : IBrush2D;
+        public defaultPushedBorder       : IBrush2D;
+    }
+
+    @registerWindowRenderingTemplate("BABYLON.Button", "Default", () => new DefaultButtonRenderingTemplate())
+    export class DefaultButtonRenderingTemplate extends UIElementRenderingTemplateBase {
+
+        createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase; contentPlaceholder: Prim2DBase } {
+            this._rect = new Rectangle2D({ parent: visualPlaceholder, fill: "#FF8080FF", border: "#FF8080FF", roundRadius: 10, borderThickness: 2 });
+
+            this.stateChange();
+            return { root: this._rect, contentPlaceholder: this._rect };
+        }
+
+        attach(owner: UIElement): void {
+            super.attach(owner);
+
+            this.owner.propertyChanged.add((e, s) => this.stateChange(),
+                UIElement.isEnabledProperty.flagId   |
+                UIElement.isFocusedProperty.flagId   |
+                UIElement.isMouseOverProperty.flagId |
+                Button.isDefaultProperty.flagId      |
+                Button.isOutlineProperty.flagId      |
+                Button.isPushedProperty.flagId);
+        }
+
+        stateChange(): void {
+            let b = <Button>this.owner;
+            let bg = b.isDefault ? b.defaultEnabledBackground : b.normalEnabledBackground;
+            let bd = b.isDefault ? b.defaultEnabledBorder : b.normalEnabledBorder;
+
+            if (b.isPushed) {
+                if (b.isDefault) {
+                    bg = b.defaultPushedBackground;
+                    bd = b.defaultPushedBorder;
+                } else {
+                    bg = b.normalPushedBackground;
+                    bd = b.normalPushedBorder;
+                }
+            } else if (b.isMouseOver) {
+                console.log("MouseOver Style");
+                if (b.isDefault) {
+                    bg = b.defaultMouseOverBackground;
+                    bd = b.defaultMouseOverBorder;
+                } else {
+                    bg = b.normalMouseOverBackground;
+                    bd = b.normalMouseOverBorder;
+                }
+            } else if (!b.isEnabled) {
+                if (b.isDefault) {
+                    bg = b.defaultDisabledBackground;
+                    bd = b.defaultDisabledBorder;
+                } else {
+                    bg = b.normalDisabledBackground;
+                    bd = b.normalDisabledBorder;
+                }
+            }
+
+            this._rect.fill = bg;
+            this._rect.border = bd;
+        }
+
+        private _rect: Rectangle2D;
+    }
+}

canvas2D/src/GUI/babylon.gui.control.ts

@@ -0,0 +1,212 @@
+module BABYLON {
+
+    @className("Control", "BABYLON")
+    export abstract class Control extends UIElement {
+        static CONTROL_PROPCOUNT = UIElement.UIELEMENT_PROPCOUNT + 5;
+
+        static backgroundProperty     : Prim2DPropInfo;
+        static borderProperty         : Prim2DPropInfo;
+        static borderThicknessProperty: Prim2DPropInfo;
+        static fontNameProperty       : Prim2DPropInfo;
+        static foregroundProperty     : Prim2DPropInfo;
+
+        constructor(settings: {
+            id?: string,
+            templateName?: string,
+            styleName?: string,
+        }) {
+            super(settings);
+        }
+
+        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 0, pi => Control.backgroundProperty = pi)
+        public get background(): StringDictionary<IBrush2D> {
+            if (!this._background) {
+                this._background = new ObservableStringDictionary<IBrush2D>(false);
+            }
+            return this._background;
+        }
+
+        public set background(value: StringDictionary<IBrush2D>) {
+            this.background.copyFrom(value);
+        }
+
+        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 1, pi => Control.borderProperty = pi)
+        public get border(): IBrush2D {
+            return this._border;
+        }
+
+        public set border(value: IBrush2D) {
+            this._border = value;
+        }
+
+        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 2, pi => Control.borderThicknessProperty = pi)
+        public get borderThickness(): number {
+            return this._borderThickness;
+        }
+
+        public set borderThickness(value: number) {
+            this._borderThickness = value;
+        }
+
+        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 3, pi => Control.fontNameProperty = pi)
+        public get fontName(): string {
+            return this._fontName;
+        }
+
+        public set fontName(value: string) {
+            this._fontName = value;
+        }
+
+        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 4, pi => Control.foregroundProperty = pi)
+        public get foreground(): IBrush2D {
+            return this._foreground;
+        }
+
+        public set foreground(value: IBrush2D) {
+            this._foreground = value;
+        }
+
+        private _background: ObservableStringDictionary<IBrush2D>;
+        private _border: IBrush2D;
+        private _borderThickness: number;
+        private _fontName: string;
+        private _foreground: IBrush2D;
+    }
+
+
+    @className("ContentControl", "BABYLON")
+    export abstract class ContentControl extends Control {
+        static CONTENTCONTROL_PROPCOUNT = Control.CONTROL_PROPCOUNT + 2;
+
+        static contentProperty: Prim2DPropInfo;
+        static contentAlignmentProperty: Prim2DPropInfo;
+
+        constructor(settings?: {
+            id              ?: string,
+            templateName    ?: string,
+            styleName       ?: string,
+            content         ?: any,
+            contentAlignment?: string,
+        }) {
+            if (!settings) {
+                settings = {};
+            }
+
+            super(settings);
+
+            if (settings.content!=null) {
+                this._content = settings.content;
+            }
+
+            if (settings.contentAlignment != null) {
+                this.contentAlignment.fromString(settings.contentAlignment);
+            }
+        }
+
+        dispose(): boolean {
+            if (this.isDisposed) {
+                return false;
+            }
+
+            if (this.content && this.content.dispose) {
+                this.content.dispose();
+                this.content = null;
+            }
+
+            if (this.__contentUIElement) {
+                this.__contentUIElement.dispose();
+                this.__contentUIElement = null;
+            }
+
+            super.dispose();
+
+            return true;
+        }
+
+        @dependencyProperty(Control.CONTROL_PROPCOUNT + 0, pi => ContentControl.contentProperty = pi)
+        public get content(): any {
+            return this._content;
+        }
+
+        public set content(value: any) {
+            this._content = value;
+        }
+
+        @dependencyProperty(Control.CONTROL_PROPCOUNT + 1, pi => ContentControl.contentAlignmentProperty = pi)
+        public get contentAlignment(): PrimitiveAlignment {
+            if (!this._contentAlignment) {
+                this._contentAlignment = new PrimitiveAlignment();
+            }
+            return this._contentAlignment;
+        }
+
+        public set contentAlignment(value: PrimitiveAlignment) {
+            this.contentAlignment.copyFrom(value);
+        }
+
+        /**
+         * Check if there a contentAlignment specified (non null and not default)
+         */
+        public get _hasContentAlignment(): boolean {
+            return (this._contentAlignment !== null && !this._contentAlignment.isDefault);
+        }
+
+        protected get _contentUIElement(): UIElement {
+            if (!this.__contentUIElement) {
+                this._buildContentUIElement();
+            }
+
+            return this.__contentUIElement;
+        }
+
+        private _buildContentUIElement() {
+            let c = this._content;
+            this.__contentUIElement = null;
+
+            // Already a UIElement
+            if (c instanceof UIElement) {
+                this.__contentUIElement = c;
+            }
+
+            // Test primary types
+            else if ((typeof c === "string") || (typeof c === "boolean") || (typeof c === "number")) {
+                let l = new Label({ parent: this, id: "Content of " + this.id });
+                let binding = new DataBinding();
+                binding.propertyPathName = "content";
+                binding.stringFormat = v => `${v}`;
+                binding.dataSource = this;
+                l.createDataBinding(Label.textProperty, binding);
+
+                binding = new DataBinding();
+                binding.propertyPathName = "contentAlignment";
+                binding.dataSource = this;
+                l.createDataBinding(Label.marginAlignmentProperty, binding);
+
+                this.__contentUIElement = l;
+            }
+
+            // Data Template!
+            else {
+                // TODO: DataTemplate lookup and create instance
+            }
+
+            if (this.__contentUIElement) {
+                this.__contentUIElement._patchUIElement(this.ownerWindows, this);               
+            }
+        }
+
+        private _content: any;
+        private _contentAlignment: PrimitiveAlignment;
+        private __contentUIElement: UIElement;
+
+        protected _getChildren(): Array<UIElement> {
+            let children = new Array<UIElement>();
+
+            if (this.content) {
+                children.push(this._contentUIElement);
+            }
+
+            return children;
+        }
+    }
+}

canvas2D/src/GUI/babylon.gui.label.ts

@@ -0,0 +1,78 @@
+module BABYLON {
+
+    @className("Label", "BABYLON")
+    export class Label extends Control {
+
+        static textProperty: Prim2DPropInfo;
+
+        constructor(settings?: {
+
+            id              ?: string,
+            parent          ?: UIElement,
+            templateName    ?: string,
+            styleName       ?: string,
+            text            ?: string,
+            marginTop       ?: number | string,
+            marginLeft      ?: number | string,
+            marginRight     ?: number | string,
+            marginBottom    ?: number | string,
+            margin          ?: number | string,
+            marginHAlignment?: number,
+            marginVAlignment?: number,
+            marginAlignment ?: string,
+            paddingTop      ?: number | string,
+            paddingLeft     ?: number | string,
+            paddingRight    ?: number | string,
+            paddingBottom   ?: number | string,
+            padding         ?: string,
+        }) {
+            if (!settings) {
+                settings = {};
+            }
+            super(settings);
+
+            if (settings.text != null) {
+                this.text = settings.text;
+            }
+        }
+
+        protected get _position(): Vector2 {
+            return Vector2.Zero();
+        }
+
+        private static _emptyArray = new Array<UIElement>();
+        protected _getChildren(): UIElement[] {
+            return Label._emptyArray;
+        }
+
+        protected createVisualTree() {
+            super.createVisualTree();
+            let p = this._visualChildrenPlaceholder;
+
+        }
+
+        @dependencyProperty(Control.CONTROL_PROPCOUNT + 0, pi => Label.textProperty = pi)
+        public get text(): string {
+            return this._text;
+        }
+
+        public set text(value: string) {
+            this._text = value;
+        }
+
+        private _text: string;
+
+    }
+
+    @registerWindowRenderingTemplate("BABYLON.Label", "Default", () => new DefaultLabelRenderingTemplate())
+    export class DefaultLabelRenderingTemplate extends UIElementRenderingTemplateBase {
+
+        createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase; contentPlaceholder: Prim2DBase } {
+            let r = new Text2D("", { parent: visualPlaceholder });
+            r.createSimpleDataBinding(Text2D.textProperty, "text");
+            r.dataSource = <any>owner;
+
+            return { root: r, contentPlaceholder: r };
+        }
+    }
+}

canvas2D/src/GUI/babylon.gui.window.ts

@@ -0,0 +1,214 @@
+module BABYLON {
+    @className("Window", "BABYLON")
+    export class Window extends ContentControl {
+        static WINDOW_PROPCOUNT = ContentControl.CONTENTCONTROL_PROPCOUNT + 2;
+
+        static leftProperty: Prim2DPropInfo;
+        static bottomProperty: Prim2DPropInfo;
+        static positionProperty: Prim2DPropInfo;
+
+        constructor(scene: Scene, settings?: {
+
+            id              ?: string,
+            templateName    ?: string,
+            styleName       ?: string,
+            content         ?: any,
+            contentAlignment?: string,
+            left            ?: number,
+            bottom          ?: number,
+            minWidth        ?: number,
+            minHeight       ?: number,
+            maxWidth        ?: number,
+            maxHeight       ?: number,
+            width           ?: number,
+            height          ?: number,
+            worldPosition   ?: Vector3,
+            worldRotation   ?: Quaternion,
+        }) {
+
+            if (!settings) {
+                settings = {};
+            }
+
+            super(settings);
+
+            if (!this._UIElementVisualToBuildList) {
+                this._UIElementVisualToBuildList = new Array<UIElement>();
+            }
+
+            // Patch the owner and also the parent property through the whole tree
+            this._patchUIElement(this, null);
+
+            // Screen Space UI
+            if (!settings.worldPosition && !settings.worldRotation) {
+                this._canvas = Window.getScreenCanvas(scene);
+                this._isWorldSpaceCanvas = false;
+                this._left = (settings.left != null) ? settings.left : 0;
+                this._bottom = (settings.bottom != null) ? settings.bottom : 0;
+            }
+
+            // WorldSpace UI
+            else {
+                let w = (settings.width == null) ? 100 : settings.width;
+                let h = (settings.height == null) ? 100 : settings.height;
+                let wpos = (settings.worldPosition == null) ? Vector3.Zero() : settings.worldPosition;
+                let wrot = (settings.worldRotation == null) ? Quaternion.Identity() : settings.worldRotation;
+                this._canvas = new WorldSpaceCanvas2D(scene, new Size(w, h), { id: "GUI Canvas", cachingStrategy: Canvas2D.CACHESTRATEGY_DONTCACHE, worldPosition: wpos, worldRotation: wrot });
+                this._isWorldSpaceCanvas = true;
+            }
+
+            this._renderObserver = this._canvas.renderObservable.add((e, s) => this._canvasPreRender(), Canvas2D.RENDEROBSERVABLE_PRE);
+            this._disposeObserver = this._canvas.disposeObservable.add((e, s) => this._canvasDisposed());
+            this._canvas.propertyChanged.add((e, s) => {
+                if (e.propertyName === "overPrim") {
+                    this._overPrimChanged(e.oldValue, e.newValue);
+                }
+            });
+            this._mouseOverUIElement = null;
+        }
+
+        public get canvas(): Canvas2D {
+            return this._canvas;
+        }
+
+        @dependencyProperty(ContentControl.CONTENTCONTROL_PROPCOUNT + 0, pi => Window.leftProperty = pi)
+        public get left(): number {
+            return this._left;
+        }
+
+        public set left(value: number) {
+            let old = new Vector2(this._left, this._bottom);
+            this._left = value;
+            this.onPropertyChanged("_position", old, this._position);
+        }
+
+        @dependencyProperty(ContentControl.CONTENTCONTROL_PROPCOUNT + 1, pi => Window.bottomProperty = pi)
+        public get bottom(): number {
+            return this._bottom;
+        }
+
+        public set bottom(value: number) {
+            let old = new Vector2(this._left, this._bottom);
+            this._bottom = value;
+            this.onPropertyChanged("_position", old, this._position);
+        }
+
+        @dependencyProperty(ContentControl.CONTENTCONTROL_PROPCOUNT + 2, pi => Window.positionProperty = pi)
+        public get position(): Vector2 {
+            return this._position;
+        }
+
+        public set position(value: Vector2) {
+            this._left = value.x;
+            this._bottom = value.y;
+        }
+
+        protected get _position(): Vector2 {
+            return new Vector2(this.left, this.bottom);
+        }
+
+        protected createVisualTree() {
+            super.createVisualTree();
+            let p = this._visualPlaceholder;
+            p.createSimpleDataBinding(Group2D.positionProperty, "position");
+        }
+
+        public _registerVisualToBuild(uiel: UIElement) {
+            if (uiel._isFlagSet(UIElement.flagVisualToBuild)) {
+                return;
+            }
+
+            if (!this._UIElementVisualToBuildList) {
+                this._UIElementVisualToBuildList = new Array<UIElement>();
+            }
+
+            this._UIElementVisualToBuildList.push(uiel);
+            uiel._setFlags(UIElement.flagVisualToBuild);
+        }
+
+        private _overPrimChanged(oldPrim: Prim2DBase, newPrim: Prim2DBase) {
+            let curOverEl = this._mouseOverUIElement;
+            let newOverEl: UIElement = null;
+
+            let curGroup = newPrim ? newPrim.traverseUp(p => p instanceof Group2D) : null;
+            while (curGroup) {
+                let uiel = curGroup.getExternalData<UIElement>("_GUIOwnerElement_");
+                if (uiel) {
+                    newOverEl = uiel;
+                    break;
+                }
+                curGroup = curGroup.parent ? curGroup.parent.traverseUp(p => p instanceof Group2D) : null;
+            }
+
+            if (curOverEl === newOverEl) {
+                return;
+            }
+
+            if (curOverEl) {
+                curOverEl.isMouseOver = false;
+            }
+
+            if (newOverEl) {
+                newOverEl.isMouseOver = true;
+            }
+
+            this._mouseOverUIElement = newOverEl;
+        }
+
+        private _canvasPreRender() {
+
+            // Check if we have visual to create
+            if (this._UIElementVisualToBuildList.length > 0) {
+                // Sort the UI Element to get the highest (so lowest hierarchy depth) in the hierarchy tree first
+                let sortedElementList = this._UIElementVisualToBuildList.sort((a, b) => a.hierarchyDepth - b.hierarchyDepth);
+
+                for (let el of sortedElementList) {
+                    el._createVisualTree();
+                }
+
+                this._UIElementVisualToBuildList.splice(0);
+            }
+        }
+
+        private _canvasDisposed() {
+
+
+            this._canvas.disposeObservable.remove(this._disposeObserver);
+            this._canvas.renderObservable.remove(this._renderObserver);
+        }
+
+        private _canvas: Canvas2D;
+        private _left: number;
+        private _bottom: number;
+        private _isWorldSpaceCanvas: boolean;
+        private _renderObserver: Observer<Canvas2D>;
+        private _disposeObserver: Observer<SmartPropertyBase>;
+        private _UIElementVisualToBuildList: Array<UIElement>;
+        private _mouseOverUIElement: UIElement;
+
+        private static getScreenCanvas(scene: Scene): ScreenSpaceCanvas2D {
+            let canvas = Tools.first(Window._screenCanvasList, c => c.scene === scene);
+            if (canvas) {
+                return canvas;
+            }
+
+            canvas = new ScreenSpaceCanvas2D(scene, { id: "GUI Canvas", cachingStrategy: Canvas2D.CACHESTRATEGY_DONTCACHE });
+            Window._screenCanvasList.push(canvas);
+
+            return canvas;
+        }
+
+        private static _screenCanvasList: Array<ScreenSpaceCanvas2D> = new Array<ScreenSpaceCanvas2D>();
+    }
+
+    @registerWindowRenderingTemplate("BABYLON.Window", "Default", () => new DefaultWindowRenderingTemplate ())
+    export class DefaultWindowRenderingTemplate extends UIElementRenderingTemplateBase {
+
+        createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase; contentPlaceholder: Prim2DBase } {
+
+            let r = new Rectangle2D({ parent: visualPlaceholder, fill: "#808080FF" });
+
+            return { root: r, contentPlaceholder: r };
+        }
+    }
+}

canvas2D/src/Tools/babylon.observable.ts

@@ -0,0 +1,671 @@
+module BABYLON {
+
+    /**
+     * Custom type of the propertyChanged observable
+     */
+    export class PropertyChangedInfo {
+        /**
+         * Previous value of the property
+         */
+        oldValue: any;
+        /**
+         * New value of the property
+         */
+        newValue: any;
+
+        /**
+         * Name of the property that changed its value
+         */
+        propertyName: string;
+    }
+
+    /**
+     * Property Changed interface
+     */
+    export interface IPropertyChanged {
+        /**
+         * PropertyChanged observable
+         */
+        propertyChanged: Observable<PropertyChangedInfo>;
+    }
+
+    /**
+     * The purpose of this class is to provide a base implementation of the IPropertyChanged interface for the user to avoid rewriting a code needlessly.
+     * Typical use of this class is to check for equality in a property set(), then call the onPropertyChanged method if values are different after the new value is set. The protected method will notify observers of the change.
+     * Remark: onPropertyChanged detects reentrant code and acts in a way to make sure everything is fine, fast and allocation friendly (when there no reentrant code which should be 99% of the time)
+     */
+    export abstract class PropertyChangedBase implements IPropertyChanged {
+
+        /**
+         * Protected method to call when there's a change of value in a property set
+         * @param propName the name of the concerned property
+         * @param oldValue its old value
+         * @param newValue its new value
+         * @param mask an optional observable mask
+         */
+        protected onPropertyChanged<T>(propName: string, oldValue: T, newValue: T, mask?: number) {
+            if (this.propertyChanged.hasObservers()) {
+
+                let pci = PropertyChangedBase.calling ? new PropertyChangedInfo() : PropertyChangedBase.pci;
+
+                pci.oldValue = oldValue;
+                pci.newValue = newValue;
+                pci.propertyName = propName;
+
+                try {
+                    PropertyChangedBase.calling = true;
+                    this.propertyChanged.notifyObservers(pci, mask);
+                } finally {
+                    PropertyChangedBase.calling = false;
+                }
+            }
+        }
+
+        /**
+         * An observable that is triggered when a property (using of the XXXXLevelProperty decorator) has its value changing.
+         * You can add an observer that will be triggered only for a given set of Properties using the Mask feature of the Observable and the corresponding Prim2DPropInfo.flagid value (e.g. Prim2DBase.positionProperty.flagid|Prim2DBase.rotationProperty.flagid to be notified only about position or rotation change)
+         */
+        public get propertyChanged(): Observable<PropertyChangedInfo> {
+            if (!this._propertyChanged) {
+                this._propertyChanged = new Observable<PropertyChangedInfo>();
+            }
+            return this._propertyChanged;
+        }
+
+        public _propertyChanged: Observable<PropertyChangedInfo> = null;
+        private static pci = new PropertyChangedInfo();
+        private static calling: boolean = false;
+    }
+
+    /**
+     * Class for the ObservableArray.onArrayChanged observable
+     */
+    export class ArrayChanged<T> {
+        constructor() {
+            this.action = 0;
+            this.newItems = new Array<{index: number, value: T }>();
+            this.removedItems = new Array<{ index: number, value: T }>();
+            this.changedItems = new Array<{ index: number, value: T }>();
+            this.newStartingIndex = -1;
+            this.removedStartingIndex = -1;
+        }
+
+        /**
+         * Contain the action that were made on the ObservableArray, it's one of the ArrayChanged.xxxAction members.
+         * Note the action's value can be used in the "mask" field of the Observable to only be notified about given action(s)
+         */
+        public action: number;
+
+        /**
+         * Only valid if the action is newItemsAction
+         */
+        public newItems: { index: number, value: T }[];
+
+        /**
+         * Only valid if the action is removedItemsAction
+         */
+        public removedItems: { index: number, value: T }[];
+
+        /**
+         * Only valid if the action is changedItemAction
+         */
+        public changedItems: { index: number, value: T }[];
+
+        /**
+         * Get the index of the first item inserted
+         */
+        public newStartingIndex: number;
+
+        /**
+         * Get the index of the first item removed
+         */
+        public removedStartingIndex: number;
+
+        /**
+         * Get the index of the first changed item
+         */
+        public changedStartingIndex: number;
+
+        /**
+         * The content of the array was totally cleared
+         */
+        public static get clearAction() {
+            return ArrayChanged._clearAction;
+        }
+
+        /**
+         * A new item was added, the newItems field contains the key/value pairs
+         */
+        public static get newItemsAction() {
+            return ArrayChanged._newItemsAction;
+        }
+
+        /**
+         * An existing item was removed, the removedKey field contains its key
+         */
+        public static get removedItemsAction() {
+            return ArrayChanged._removedItemsAction;
+        }
+
+        /**
+         * One or many items in the array were changed, the 
+         */
+        public static get changedItemAction() {
+            return ArrayChanged._changedItemAction;
+        }
+
+        /**
+         * The array's content was totally changed
+         * Depending on the method that used this mode the ChangedArray object may contains more information
+         */
+        public static get replacedArrayAction() {
+            return ArrayChanged._replacedArrayAction;
+        }
+
+        /**
+         * The length of the array changed
+         */
+        public static get lengthChangedAction() {
+            return ArrayChanged._lengthChangedAction;
+        }
+
+        private static _clearAction            = 0x1;
+        private static _newItemsAction         = 0x2;
+        private static _removedItemsAction     = 0x4;
+        private static _replacedArrayAction    = 0x8;
+        private static _lengthChangedAction    = 0x10;
+        private static _changedItemAction      = 0x20;
+
+        clear() {
+            this.action = 0;
+            this.newItems.splice(0);
+            this.removedItems.splice(0);
+            this.changedItems.splice(0);
+            this.removedStartingIndex = this.removedStartingIndex = this.changedStartingIndex = 0;
+        }
+    }
+
+    export class OAWatchedObjectChangedInfo<T> {
+        object: T;
+        propertyChanged: PropertyChangedInfo;
+    }
+
+    /**
+     * This class mimics the Javascript Array and TypeScript Array<T> classes, adding new features concerning the Observable pattern.
+     * 
+     */
+    export class ObservableArray<T> extends PropertyChangedBase {
+        /**
+         * Create an Observable Array.
+         * @param watchObjectsPropertyChange
+         * @param array and optional array that will be encapsulated by this ObservableArray instance. That's right, it's NOT a copy!
+         */
+        constructor(watchObjectsPropertyChange: boolean, array?: Array<T>) {
+            super();
+            this._array = (array!=null) ? array : new Array<T>();
+            this.dci = new ArrayChanged<T>();
+            this._callingArrayChanged = false;
+            this._arrayChanged = null;
+
+            this._callingWatchedObjectChanged = false;
+            this._watchObjectsPropertyChange = watchObjectsPropertyChange;
+            this._watchedObjectList = this._watchObjectsPropertyChange ? new StringDictionary<Observer<PropertyChangedInfo>>() : null;
+            this._woci = new OAWatchedObjectChangedInfo<T>();
+        }
+
+        /**
+          * Gets or sets the length of the array. This is a number one higher than the highest element defined in an array.
+          */
+        get length(): number {
+            return this._array.length;
+        }
+
+        set length(value: number) {
+            if (value === this._array.length) {
+                return;
+            }
+
+            let oldLength = this._array.length;
+            this._array.length = value;
+
+            this.onPropertyChanged("length", oldLength, this._array.length);
+        }
+
+        getAt(index: number): T {
+            return this._array[index];
+        }
+
+        setAt(index: number, value: T): boolean {
+            if (index < 0) {
+                return false;
+            }
+
+            let insertion = (index >= this._array.length) || this._array[index] === undefined;
+            let oldLength = 0;
+            if (insertion) {
+                oldLength = this._array.length;
+            } else if (this._watchObjectsPropertyChange) {
+                this._removeWatchedElement(this._array[index]);
+            }
+
+            this._array[index] = value;
+
+            if (this._watchObjectsPropertyChange) {
+                this._addWatchedElement(value);
+            }
+
+            if (insertion) {
+                this.onPropertyChanged("length", oldLength, this._array.length);
+            }
+
+            let ac = this.getArrayChangedObject();
+            if (ac) {
+                ac.action = insertion ? ArrayChanged.newItemsAction : ArrayChanged.changedItemAction;
+                if (insertion) {
+                    ac.newItems.splice(0, ac.newItems.length, { index: index, value: value });
+                    ac.newStartingIndex = index;
+                    ac.changedItems.splice(0);
+                } else {
+                    ac.newItems.splice(0);
+                    ac.changedStartingIndex = index;
+                    ac.changedItems.splice(0, ac.changedItems.length, { index: index, value: value });
+                }
+                ac.removedItems.splice(0);
+                ac.removedStartingIndex = -1;
+                this.callArrayChanged(ac);
+            }
+        }
+
+        /**
+          * Returns a string representation of an array.
+          */
+        toString(): string {
+            return this._array.toString();
+        }
+
+        toLocaleString(): string {
+            return this._array.toLocaleString();
+        }
+
+        /**
+          * Appends new elements to an array, and returns the new length of the array.
+          * @param items New elements of the Array.
+          */
+        push(...items: T[]): number {
+            let oldLength = this._array.length;
+            let n = this._array.push(...items);
+
+            if (this._watchObjectsPropertyChange) {
+                this._addWatchedElement(...items);
+            }
+
+            this.onPropertyChanged("length", oldLength, this._array.length);
+            let ac = this.getArrayChangedObject();
+            if (ac) {
+                ac.action = ArrayChanged.newItemsAction;
+                ac.newStartingIndex = oldLength;
+                this.feedNotifArray(ac.newItems, oldLength, ...items);
+                this.callArrayChanged(ac);
+            }
+
+            return n;
+        }
+
+        /**
+          * Removes the last element from an array and returns it.
+          */
+        pop(): T {
+            let firstRemove = this._array.length - 1;
+            let res = this._array.pop();
+
+            if (res && this._watchObjectsPropertyChange) {
+                this._removeWatchedElement(res);
+            }
+
+            if (firstRemove !== -1) {
+                this.onPropertyChanged("length", this._array.length + 1, this._array.length);
+
+                let ac = this.getArrayChangedObject();
+                if (ac) {
+                    ac.action = ArrayChanged.removedItemsAction;
+                    ac.removedStartingIndex = firstRemove;
+                    this.feedNotifArray(ac.removedItems, firstRemove, res);
+                }
+            }
+
+            return res;
+        }
+
+        /**
+          * Combines two or more arrays.
+          * @param items Additional items to add to the end of array1.
+          */
+        concat(...items: T[]): ObservableArray<T> {
+            return new ObservableArray<T>(this._watchObjectsPropertyChange, this._array.concat(...items));
+        }
+
+        /**
+          * Adds all the elements of an array separated by the specified separator string.
+          * @param separator A string used to separate one element of an array from the next in the resulting String. If omitted, the array elements are separated with a comma.
+          */
+        join(separator?: string): string {
+            return this._array.join(separator);
+        }
+
+        /**
+          * Reverses the elements in an Array.
+         * The arrayChanged action is 
+          */
+        reverse(): T[] {
+            let res = this._array.reverse();
+
+            let ac = this.getArrayChangedObject();
+            ac.action = ArrayChanged.replacedArrayAction;
+
+            return res;
+        }
+
+        /**
+          * Removes the first element from an array and returns it, shift all subsequents element one element before.
+         * The ArrayChange action is replacedArrayAction, the whole array changes and must be reevaluate as such, the removed element is in removedItems.
+         * 
+          */
+        shift(): T {
+            let oldLength = this._array.length;
+            let res = this._array.shift();
+
+            if (this._watchedObjectChanged && res!=null) {
+                this._removeWatchedElement(res);
+            }
+
+            if (oldLength !== 0) {
+                this.onPropertyChanged("length", oldLength, this._array.length);
+
+                let ac = this.getArrayChangedObject();
+                if (ac) {
+                    ac.action = ArrayChanged.replacedArrayAction;
+                    ac.removedItems.splice(0, ac.removedItems.length, { index: 0, value: res });
+                    ac.newItems.splice(0);
+                    ac.changedItems.splice(0);
+                    ac.removedStartingIndex = 0;
+                    this.callArrayChanged(ac);
+                }
+            }
+
+            return res;
+        }
+
+        /** 
+          * Returns a section of an array.
+          * @param start The beginning of the specified portion of the array.
+          * @param end The end of the specified portion of the array.
+          */
+        slice(start?: number, end?: number): ObservableArray<T> {
+            return new ObservableArray<T>(this._watchObjectsPropertyChange, this._array.slice(start, end));
+        }
+
+        /**
+          * Sorts an array.
+          * @param compareFn The name of the function used to determine the order of the elements. If omitted, the elements are sorted in ascending, ASCII character order.
+         * On the contrary of the Javascript Array's implementation, this method returns nothing
+          */
+        sort(compareFn?: (a: T, b: T) => number): void {
+            let oldLength = this._array.length;
+
+            this._array.sort(compareFn);
+
+            if (oldLength !== 0) {
+                let ac = this.getArrayChangedObject();
+                if (ac) {
+                    ac.clear();
+                    ac.action = ArrayChanged.replacedArrayAction;
+                    this.callArrayChanged(ac);
+                }
+            }
+        }
+
+        /**
+          * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
+          * @param start The zero-based location in the array from which to start removing elements.
+          * @param deleteCount The number of elements to remove.
+          * @param items Elements to insert into the array in place of the deleted elements.
+          */
+        splice(start: number, deleteCount: number, ...items: T[]): T[] {
+            let oldLength = this._array.length;
+
+            if (this._watchObjectsPropertyChange) {
+                for (let i = start; i < start+deleteCount; i++) {
+                    let val = this._array[i];
+                    if (this._watchObjectsPropertyChange && val != null) {
+                        this._removeWatchedElement(val);
+                    }
+                }
+            }
+
+            let res = this._array.splice(start, deleteCount, ...items);
+
+            if (this._watchObjectsPropertyChange) {
+                this._addWatchedElement(...items);
+            }
+
+            if (oldLength !== this._array.length) {
+                this.onPropertyChanged("length", oldLength, this._array.length);
+            }
+
+            let ac = this.getArrayChangedObject();
+            if (ac) {
+                ac.clear();
+                ac.action = ArrayChanged.replacedArrayAction;
+                this.callArrayChanged(ac);
+            }
+
+            return res;
+        }
+
+        /**
+          * Inserts new elements at the start of an array.
+          * @param items  Elements to insert at the start of the Array.
+          * The ChangedArray action is replacedArrayAction, newItems contains the list of the added items
+          */
+        unshift(...items: T[]): number {
+            let oldLength = this._array.length;
+            
+            let res = this._array.unshift(...items);
+
+            if (this._watchObjectsPropertyChange) {
+                this._addWatchedElement(...items);
+            }
+
+            this.onPropertyChanged("length", oldLength, this._array.length);
+            let ac = this.getArrayChangedObject();
+            if (ac) {
+                ac.clear();
+                ac.action = ArrayChanged.replacedArrayAction;
+                ac.newStartingIndex = 0,
+                this.feedNotifArray(ac.newItems, 0, ...items);
+                this.callArrayChanged(ac);
+            }
+
+            return res;
+        }
+
+        /**
+          * Returns the index of the first occurrence of a value in an array.
+          * @param searchElement The value to locate in the array.
+          * @param fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at index 0.
+          */
+        indexOf(searchElement: T, fromIndex?: number): number {
+            return this._array.indexOf(searchElement, fromIndex);
+        }
+
+        /**
+          * Returns the index of the last occurrence of a specified value in an array.
+          * @param searchElement The value to locate in the array.
+          * @param fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at the last index in the array.
+          */
+        lastIndexOf(searchElement: T, fromIndex?: number): number {
+            return this._array.lastIndexOf(searchElement, fromIndex);
+        }
+
+        /**
+          * Determines whether all the members of an array satisfy the specified test.
+          * @param callbackfn A function that accepts up to three arguments. The every method calls the callbackfn function for each element in array1 until the callbackfn returns false, or until the end of the array.
+          * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
+          */
+        every(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean {
+            return this._array.every(callbackfn, thisArg);
+        }
+
+        /**
+          * Determines whether the specified callback function returns true for any element of an array.
+          * @param callbackfn A function that accepts up to three arguments. The some method calls the callbackfn function for each element in array1 until the callbackfn returns true, or until the end of the array.
+          * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
+          */
+        some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean {
+            return this._array.some(callbackfn, thisArg);
+        }
+
+        /**
+          * Performs the specified action for each element in an array.
+          * @param callbackfn  A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array. 
+          * @param thisArg  An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
+          */
+        forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void {
+            return this._array.forEach(callbackfn, thisArg);
+        }
+
+        /**
+          * Calls a defined callback function on each element of an array, and returns an array that contains the results.
+          * @param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array. 
+          * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
+          */
+        map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[] {
+            return this._array.map(callbackfn, thisArg);
+        }
+
+        /**
+          * Returns the elements of an array that meet the condition specified in a callback function. 
+          * @param callbackfn A function that accepts up to three arguments. The filter method calls the callbackfn function one time for each element in the array. 
+          * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
+          */
+        filter(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): T[] {
+            return this._array.filter(callbackfn, thisArg);
+        }
+
+        /**
+          * Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
+          * @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
+          * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
+          */
+        reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue?: T): T {
+            return this._array.reduce(callbackfn);
+        }
+
+        /** 
+          * Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
+          * @param callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array. 
+          * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
+          */
+        reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue?: T): T {
+            return this._array.reduceRight(callbackfn);
+        }
+
+        get arrayChanged(): Observable<ArrayChanged<T>> {
+            if (!this._arrayChanged) {
+                this._arrayChanged = new Observable<ArrayChanged<T>>();
+            }
+            return this._arrayChanged;
+        }
+
+        protected getArrayChangedObject(): ArrayChanged<T> {
+            if (this._arrayChanged && this._arrayChanged.hasObservers()) {
+                let ac = this._callingArrayChanged ? new ArrayChanged<T>() : this.dci;
+                return ac;
+            }
+            return null;
+        }
+
+        protected feedNotifArray(array: { index: number, value: T }[], startindIndex: number, ...items: T[]) {
+            array.splice(0);
+            for (let i = 0; i < items.length; i++) {
+                let value = this._array[i + startindIndex];
+                if (value !== undefined) {
+                    array.push({ index: i + startindIndex, value: value });
+                }
+            }
+        }
+
+        protected callArrayChanged(ac: ArrayChanged<T>) {
+            try {
+                this._callingArrayChanged = true;
+                this.arrayChanged.notifyObservers(ac, ac.action);
+            } finally {
+                this._callingArrayChanged = false;
+            }
+        }
+
+        get watchedObjectChanged(): Observable<OAWatchedObjectChangedInfo<T>> {
+            if (!this._watchedObjectChanged) {
+                this._watchedObjectChanged = new Observable<OAWatchedObjectChangedInfo<T>>();
+            }
+            return this._watchedObjectChanged;
+        }
+
+        private _addWatchedElement(...items: T[]) {
+            for (let curItem of items) {
+                if (curItem["propertyChanged"]) {
+                    let key = curItem["__ObsArrayObjID__"] as string;
+
+                    // The object may already be part of another ObsArray, so there already be a valid ID
+                    if (!key) {
+                        key = Tools.RandomId();
+                        curItem["__ObsArrayObjID__"] = key;
+                    }
+
+                    this._watchedObjectList.add(key, (<IPropertyChanged><any>curItem).propertyChanged.add((e, d) => {
+                        this.onWatchedObjectChanged(key, curItem, e);
+                    }));
+                }
+            }
+        }
+
+        private _removeWatchedElement(...items: T[]) {
+            for (let curItem of items) {
+                let key = curItem["__ObsArrayObjID__"] as string;
+                if (key != null) {
+                    let observer = this._watchedObjectList.getAndRemove(key);
+                    (<IPropertyChanged><any>curItem).propertyChanged.remove(observer);
+                }
+            }
+        }
+
+        protected onWatchedObjectChanged(key: string, object: T, propChanged: PropertyChangedInfo) {
+            if (this._watchedObjectChanged && this._watchedObjectChanged.hasObservers()) {
+
+                let woci = this._callingWatchedObjectChanged ? new OAWatchedObjectChangedInfo<T>() : this._woci;
+                woci.object = object;
+                woci.propertyChanged = propChanged;
+
+                try {
+                    this._callingWatchedObjectChanged = true;
+                    this.watchedObjectChanged.notifyObservers(woci);
+                } finally {
+                    this._callingWatchedObjectChanged = false;
+                }
+            }
+        }
+
+        private _array: Array<T>;
+
+        private _arrayChanged: Observable<ArrayChanged<T>>;
+        private dci = new ArrayChanged<T>();
+        private _callingArrayChanged: boolean = false;
+
+        private _watchedObjectChanged: Observable<OAWatchedObjectChangedInfo<T>>;
+        private _woci: OAWatchedObjectChangedInfo<T>;
+        private _callingWatchedObjectChanged: boolean;
+        private _watchObjectsPropertyChange: boolean;
+        private _watchedObjectList: StringDictionary<Observer<PropertyChangedInfo>>;
+
+    }
+}

canvas2D/src/Tools/babylon.stringDictionary.ts

@@ -0,0 +1,320 @@
+module BABYLON {
+
+    /**
+     * Class for the ObservableStringDictionary.onDictionaryChanged observable
+     */
+    export class DictionaryChanged<T> {
+        /**
+         * Contain the action that were made on the dictionary, it's one of the DictionaryChanged.xxxAction members.
+         * Note the action's value can be used in the "mask" field of the Observable to only be notified about given action(s)
+         */
+        public action: number;
+
+        /**
+         * Only valid if the action is newItemAction
+         */
+        public newItem: { key: string, value: T }
+
+        /**
+         * Only valid if the action is removedItemAction
+         */
+        public removedKey: string;
+
+        /**
+         * Only valid if the action is itemValueChangedAction
+         */
+        public changedItem: { key: string, oldValue: T, newValue: T }
+
+        /**
+         * The content of the dictionary was totally cleared
+         */
+        public static get clearAction() {
+            return DictionaryChanged._clearAction;
+        }
+
+        /**
+         * A new item was added, the newItem field contains the key/value pair
+         */
+        public static get newItemAction() {
+            return DictionaryChanged._newItemAction;
+        }
+
+        /**
+         * An existing item was removed, the removedKey field contains its key
+         */
+        public static get removedItemAction() {
+            return DictionaryChanged._removedItemAction;
+        }
+
+        /**
+         * An existing item had a value change, the changedItem field contains the key/value
+         */
+        public static get itemValueChangedAction() {
+            return DictionaryChanged._itemValueChangedAction;
+        }
+
+        /**
+         * The dictionary's content was reset and replaced by the content of another dictionary.
+         * DictionaryChanged<T> contains no further information about this action
+         */
+        public static get replacedAction() {
+            return DictionaryChanged._replacedAction;
+        }
+
+        private static _clearAction            = 0x1;
+        private static _newItemAction          = 0x2;
+        private static _removedItemAction      = 0x4;
+        private static _itemValueChangedAction = 0x8;
+        private static _replacedAction         = 0x10;
+    }
+
+    export class OSDWatchedObjectChangedInfo<T> {
+        key: string;
+        object: T;
+        propertyChanged: PropertyChangedInfo;
+    }
+
+    export class ObservableStringDictionary<T> extends StringDictionary<T> implements IPropertyChanged {
+
+        constructor(watchObjectsPropertyChange: boolean) {
+            super();
+
+            this._propertyChanged = null;
+            this._dictionaryChanged = null;
+            this.dci = new DictionaryChanged<T>();
+            this._callingDicChanged = false;
+            this._watchedObjectChanged = null;
+            this._callingWatchedObjectChanged = false;
+            this._woci = new OSDWatchedObjectChangedInfo<T>();
+            this._watchObjectsPropertyChange = watchObjectsPropertyChange;
+            this._watchedObjectList = this._watchObjectsPropertyChange ? new StringDictionary<Observer<PropertyChangedInfo>>() : null;
+        }
+
+        /**
+         * This will clear this dictionary and copy the content from the 'source' one.
+         * If the T value is a custom object, it won't be copied/cloned, the same object will be used
+         * @param source the dictionary to take the content from and copy to this dictionary
+         */
+        public copyFrom(source: StringDictionary<T>) {
+            let oldCount = this.count;
+            // Don't rely on this class' implementation for clear/add otherwise tons of notification will be thrown
+            super.clear();
+            source.forEach((t, v) => this._add(t, v, false, this._watchObjectsPropertyChange));
+            this.onDictionaryChanged(DictionaryChanged.replacedAction, null, null, null);
+            this.onPropertyChanged("count", oldCount, this.count);
+        }
+
+        /**
+         * Get a value from its key or add it if it doesn't exist.
+         * This method will ensure you that a given key/data will be present in the dictionary.
+         * @param key the given key to get the matching value from
+         * @param factory the factory that will create the value if the key is not present in the dictionary.
+         * The factory will only be invoked if there's no data for the given key.
+         * @return the value corresponding to the key.
+         */
+        public getOrAddWithFactory(key: string, factory: (key: string) => T): T {
+            let val = super.getOrAddWithFactory(key, k => {
+                let v = factory(key);
+                this._add(key, v, true, this._watchObjectsPropertyChange);
+                return v;
+            });
+
+            return val;
+        }
+
+        /**
+         * Add a new key and its corresponding value
+         * @param key the key to add
+         * @param value the value corresponding to the key
+         * @return true if the operation completed successfully, false if we couldn't insert the key/value because there was already this key in the dictionary
+         */
+        public add(key: string, value: T): boolean {
+            return this._add(key, value, true, true);
+        }
+
+        public getAndRemove(key: string): T {
+            let val = super.get(key);
+            this._remove(key, true, val);
+            return val;
+        }
+
+        private _add(key: string, value: T, fireNotif: boolean, registerWatcher: boolean): boolean {
+            if (super.add(key, value)) {
+                if (fireNotif) {
+                    this.onDictionaryChanged(DictionaryChanged.newItemAction, { key: key, value: value }, null, null);
+                    this.onPropertyChanged("count", this.count - 1, this.count);
+                }
+                if (registerWatcher) {
+                    this._addWatchedElement(key, value);
+                }
+                return true;
+            }
+            return false;
+        }
+
+        private _addWatchedElement(key: string, el: T) {
+            if (el["propertyChanged"]) {
+                this._watchedObjectList.add(key, (<IPropertyChanged><any>el).propertyChanged.add((e, d) => {
+                    this.onWatchedObjectChanged(key, el, e);
+                }));
+            }            
+        }
+
+        private _removeWatchedElement(key: string, el: T) {
+            let observer = this._watchedObjectList.getAndRemove(key);
+            (<IPropertyChanged><any>el).propertyChanged.remove(observer);
+        }
+
+        public set(key: string, value: T): boolean {
+            let oldValue = this.get(key);
+            if (this._watchObjectsPropertyChange) {
+                this._removeWatchedElement(key, oldValue);
+            }
+
+            if (super.set(key, value)) {
+                this.onDictionaryChanged(DictionaryChanged.itemValueChangedAction, null, null, { key: key, oldValue: oldValue, newValue: value });
+                this._addWatchedElement(key, value);
+                return true;
+            }
+
+            return false;
+        }
+
+        /**
+         * Remove a key/value from the dictionary.
+         * @param key the key to remove
+         * @return true if the item was successfully deleted, false if no item with such key exist in the dictionary
+         */
+        public remove(key: string): boolean {
+            return this._remove(key, true);
+        }
+
+        private _remove(key: string, fireNotif: boolean, element?: T): boolean {
+            if (!element) {
+                element = this.get(key);
+            }
+
+            if (!element) {
+                return false;
+            }
+
+            if (super.remove(key) === undefined) {
+                return false;
+            }
+
+            this.onDictionaryChanged(DictionaryChanged.removedItemAction, null, key, null);
+            this.onPropertyChanged("count", this.count + 1, this.count);
+
+            if (this._watchObjectsPropertyChange) {
+                this._removeWatchedElement(key, element);
+            }
+
+            return true;
+        }
+
+        /**
+         * Clear the whole content of the dictionary
+         */
+        public clear() {
+            this._watchedObjectList.forEach((k, v) => {
+                let el = this.get(k);
+                this._removeWatchedElement(k, el);
+            });
+            this._watchedObjectList.clear();
+
+            let oldCount = this.count;
+            super.clear();
+            this.onDictionaryChanged(DictionaryChanged.clearAction, null, null, null);
+            this.onPropertyChanged("count", oldCount, 0);
+        }
+
+        get propertyChanged(): Observable<PropertyChangedInfo> {
+            if (!this._propertyChanged) {
+                this._propertyChanged = new Observable<PropertyChangedInfo>();
+            }
+            return this._propertyChanged;
+        }
+
+        protected onPropertyChanged<T>(propName: string, oldValue: T, newValue: T, mask?: number) {
+            if (this._propertyChanged && this._propertyChanged.hasObservers()) {
+
+                let pci = ObservableStringDictionary.callingPropChanged ? new PropertyChangedInfo() : ObservableStringDictionary.pci;
+
+                pci.oldValue = oldValue;
+                pci.newValue = newValue;
+                pci.propertyName = propName;
+
+                try {
+                    ObservableStringDictionary.callingPropChanged = true;
+                    this.propertyChanged.notifyObservers(pci, mask);
+                } finally {
+                    ObservableStringDictionary.callingPropChanged = false;
+                }
+            }
+        }
+
+        get dictionaryChanged(): Observable<DictionaryChanged<T>> {
+            if (!this._dictionaryChanged) {
+                this._dictionaryChanged = new Observable<DictionaryChanged<T>>();
+            }
+            return this._dictionaryChanged;
+        }
+
+        protected onDictionaryChanged(action: number, newItem: { key: string, value: T }, removedKey: string, changedItem: { key: string, oldValue: T, newValue: T }) {
+            if (this._dictionaryChanged && this._dictionaryChanged.hasObservers()) {
+
+                let dci = this._callingDicChanged ? new DictionaryChanged<T>() : this.dci;
+
+                dci.action = action;
+                dci.newItem = newItem;
+                dci.removedKey = removedKey;
+                dci.changedItem = changedItem;
+
+                try {
+                    this._callingDicChanged = true;
+                    this.dictionaryChanged.notifyObservers(dci, action);
+                } finally {
+                    this._callingDicChanged = false;
+                }
+            }
+        }
+
+        get watchedObjectChanged(): Observable<OSDWatchedObjectChangedInfo<T>> {
+            if (!this._watchedObjectChanged) {
+                this._watchedObjectChanged = new Observable<OSDWatchedObjectChangedInfo<T>>();
+            }
+            return this._watchedObjectChanged;
+        }
+
+        protected onWatchedObjectChanged(key: string, object: T, propChanged: PropertyChangedInfo) {
+            if (this._watchedObjectChanged && this._watchedObjectChanged.hasObservers()) {
+
+                let woci = this._callingWatchedObjectChanged ? new OSDWatchedObjectChangedInfo<T>() : this._woci;
+                woci.key = key;
+                woci.object = object;
+                woci.propertyChanged = propChanged;
+
+                try {
+                    this._callingWatchedObjectChanged = true;
+                    this.watchedObjectChanged.notifyObservers(woci);
+                } finally {
+                    this._callingWatchedObjectChanged = false;
+                }
+            }
+        }
+
+        private _propertyChanged: Observable<PropertyChangedInfo>;
+        private static pci = new PropertyChangedInfo();
+        private static callingPropChanged: boolean = false;
+
+        private _dictionaryChanged: Observable<DictionaryChanged<T>>;
+        private dci: DictionaryChanged<T>;
+        private _callingDicChanged: boolean;
+
+        private _watchedObjectChanged: Observable<OSDWatchedObjectChangedInfo<T>>;
+        private _woci: OSDWatchedObjectChangedInfo<T>;
+        private _callingWatchedObjectChanged: boolean;
+        private _watchObjectsPropertyChange: boolean;
+        private _watchedObjectList: StringDictionary<Observer<PropertyChangedInfo>>;
+    }
+}

canvas2D/src/babylon.bounding2d.js

@@ -0,0 +1,211 @@
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Stores 2D Bounding Information.
+     * This class handles a circle area and a bounding rectangle one.
+     */
+    var BoundingInfo2D = (function () {
+        function BoundingInfo2D() {
+            this.radius = 0;
+            this.center = BABYLON.Vector2.Zero();
+            this.extent = BABYLON.Vector2.Zero();
+        }
+        /**
+         * Create a BoundingInfo2D object from a given size
+         * @param size the size that will be used to set the extend, radius will be computed from it.
+         */
+        BoundingInfo2D.CreateFromSize = function (size) {
+            var r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromSizeToRef(size, r);
+            return r;
+        };
+        /**
+         * Create a BoundingInfo2D object from a given radius
+         * @param radius the radius to use, the extent will be computed from it.
+         */
+        BoundingInfo2D.CreateFromRadius = function (radius) {
+            var r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromRadiusToRef(radius, r);
+            return r;
+        };
+        /**
+         * Create a BoundingInfo2D object from a list of points.
+         * The resulted object will be the smallest bounding area that includes all the given points.
+         * @param points an array of points to compute the bounding object from.
+         */
+        BoundingInfo2D.CreateFromPoints = function (points) {
+            var r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromPointsToRef(points, r);
+            return r;
+        };
+        /**
+         * Update a BoundingInfo2D object using the given Size as input
+         * @param size the bounding data will be computed from this size.
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        BoundingInfo2D.CreateFromSizeToRef = function (size, b) {
+            if (!size) {
+                size = BABYLON.Size.Zero();
+            }
+            b.center.x = +size.width / 2;
+            b.center.y = +size.height / 2;
+            b.extent.x = b.center.x;
+            b.extent.y = b.center.y;
+            b.radius = b.extent.length();
+        };
+        /**
+         * Update a BoundingInfo2D object using the given radius as input
+         * @param radius the bounding data will be computed from this radius
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        BoundingInfo2D.CreateFromRadiusToRef = function (radius, b) {
+            b.center.x = b.center.y = 0;
+            var r = +radius;
+            b.extent.x = r;
+            b.extent.y = r;
+            b.radius = r;
+        };
+        /**
+         * Update a BoundingInfo2D object using the given points array as input
+         * @param points the point array to use to update the bounding data
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        BoundingInfo2D.CreateFromPointsToRef = function (points, b) {
+            var xmin = Number.MAX_VALUE, ymin = Number.MAX_VALUE, xmax = Number.MIN_VALUE, ymax = Number.MIN_VALUE;
+            for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
+                var p = points_1[_i];
+                xmin = Math.min(p.x, xmin);
+                xmax = Math.max(p.x, xmax);
+                ymin = Math.min(p.y, ymin);
+                ymax = Math.max(p.y, ymax);
+            }
+            BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, b);
+        };
+        /**
+         * Update a BoundingInfo2D object using the given min/max values as input
+         * @param xmin the smallest x coordinate
+         * @param xmax the biggest x coordinate
+         * @param ymin the smallest y coordinate
+         * @param ymax the buggest y coordinate
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        BoundingInfo2D.CreateFromMinMaxToRef = function (xmin, xmax, ymin, ymax, b) {
+            var w = xmax - xmin;
+            var h = ymax - ymin;
+            b.center = new BABYLON.Vector2(xmin + w / 2, ymin + h / 2);
+            b.extent = new BABYLON.Vector2(xmax - b.center.x, ymax - b.center.y);
+            b.radius = b.extent.length();
+        };
+        /**
+         * Duplicate this instance and return a new one
+         * @return the duplicated instance
+         */
+        BoundingInfo2D.prototype.clone = function () {
+            var r = new BoundingInfo2D();
+            r.center = this.center.clone();
+            r.radius = this.radius;
+            r.extent = this.extent.clone();
+            return r;
+        };
+        BoundingInfo2D.prototype.clear = function () {
+            this.center.copyFromFloats(0, 0);
+            this.radius = 0;
+            this.extent.copyFromFloats(0, 0);
+        };
+        BoundingInfo2D.prototype.copyFrom = function (src) {
+            this.center.copyFrom(src.center);
+            this.radius = src.radius;
+            this.extent.copyFrom(src.extent);
+        };
+        /**
+         * return the max extend of the bounding info
+         */
+        BoundingInfo2D.prototype.max = function () {
+            var r = BABYLON.Vector2.Zero();
+            this.maxToRef(r);
+            return r;
+        };
+        /**
+         * Update a vector2 with the max extend of the bounding info
+         * @param result must be a valid/allocated vector2 that will contain the result of the operation
+         */
+        BoundingInfo2D.prototype.maxToRef = function (result) {
+            result.x = this.center.x + this.extent.x;
+            result.y = this.center.y + this.extent.y;
+        };
+        /**
+         * Apply a transformation matrix to this BoundingInfo2D and return a new instance containing the result
+         * @param matrix the transformation matrix to apply
+         * @return the new instance containing the result of the transformation applied on this BoundingInfo2D
+         */
+        BoundingInfo2D.prototype.transform = function (matrix) {
+            var r = new BoundingInfo2D();
+            this.transformToRef(matrix, r);
+            return r;
+        };
+        /**
+         * Compute the union of this BoundingInfo2D with a given one, returns a new BoundingInfo2D as a result
+         * @param other the second BoundingInfo2D to compute the union with this one
+         * @return a new instance containing the result of the union
+         */
+        BoundingInfo2D.prototype.union = function (other) {
+            var r = new BoundingInfo2D();
+            this.unionToRef(other, r);
+            return r;
+        };
+        /**
+         * Transform this BoundingInfo2D with a given matrix and store the result in an existing BoundingInfo2D instance.
+         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
+         * @param matrix The matrix to use to compute the transformation
+         * @param result A VALID (i.e. allocated) BoundingInfo2D object where the result will be stored
+         */
+        BoundingInfo2D.prototype.transformToRef = function (matrix, result) {
+            // Construct a bounding box based on the extent values
+            var p = BoundingInfo2D._transform;
+            p[0].x = this.center.x + this.extent.x;
+            p[0].y = this.center.y + this.extent.y;
+            p[1].x = this.center.x + this.extent.x;
+            p[1].y = this.center.y - this.extent.y;
+            p[2].x = this.center.x - this.extent.x;
+            p[2].y = this.center.y - this.extent.y;
+            p[3].x = this.center.x - this.extent.x;
+            p[3].y = this.center.y + this.extent.y;
+            // Transform the four points of the bounding box with the matrix
+            for (var i = 0; i < 4; i++) {
+                BABYLON.Vector2.TransformToRef(p[i], matrix, p[i]);
+            }
+            BoundingInfo2D.CreateFromPointsToRef(p, result);
+        };
+        /**
+         * Compute the union of this BoundingInfo2D with another one and store the result in a third valid BoundingInfo2D object
+         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
+         * @param other the second object used to compute the union
+         * @param result a VALID BoundingInfo2D instance (i.e. allocated) where the result will be stored
+         */
+        BoundingInfo2D.prototype.unionToRef = function (other, result) {
+            var xmax = Math.max(this.center.x + this.extent.x, other.center.x + other.extent.x);
+            var ymax = Math.max(this.center.y + this.extent.y, other.center.y + other.extent.y);
+            var xmin = Math.min(this.center.x - this.extent.x, other.center.x - other.extent.x);
+            var ymin = Math.min(this.center.y - this.extent.y, other.center.y - other.extent.y);
+            BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, result);
+        };
+        /**
+         * Check if the given point is inside the BoundingInfo.
+         * The test is first made on the radius, then inside the rectangle described by the extent
+         * @param pickPosition the position to test
+         * @return true if the point is inside, false otherwise
+         */
+        BoundingInfo2D.prototype.doesIntersect = function (pickPosition) {
+            // is it inside the radius?
+            var pickLocal = pickPosition.subtract(this.center);
+            if (pickLocal.lengthSquared() <= (this.radius * this.radius)) {
+                // is it inside the rectangle?
+                return ((Math.abs(pickLocal.x) <= this.extent.x) && (Math.abs(pickLocal.y) <= this.extent.y));
+            }
+            return false;
+        };
+        BoundingInfo2D._transform = new Array(BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero());
+        return BoundingInfo2D;
+    }());
+    BABYLON.BoundingInfo2D = BoundingInfo2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.bounding2d.ts

@@ -0,0 +1,245 @@
+module BABYLON {
+
+    /**
+     * Stores 2D Bounding Information.
+     * This class handles a circle area and a bounding rectangle one.
+     */
+    export class BoundingInfo2D {
+
+        /**
+         * The coordinate of the center of the bounding info
+         */
+        public center: Vector2;
+
+        /**
+         * The radius of the bounding circle, from the center of the bounded object
+         */
+        public radius: number;
+
+        /**
+         * The extent of the bounding rectangle, from the center of the bounded object.
+         * This is an absolute value in both X and Y of the vector which describe the right/top corner of the rectangle, you can easily reconstruct the whole rectangle by negating X &| Y.
+         */
+        public extent: Vector2;
+
+        constructor() {
+            this.radius = 0;
+            this.center = Vector2.Zero();
+            this.extent = Vector2.Zero();
+        }
+
+        /**
+         * Create a BoundingInfo2D object from a given size
+         * @param size the size that will be used to set the extend, radius will be computed from it.
+         */
+        public static CreateFromSize(size: Size): BoundingInfo2D {
+            let r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromSizeToRef(size, r);
+            return r;
+        }
+
+        /**
+         * Create a BoundingInfo2D object from a given radius
+         * @param radius the radius to use, the extent will be computed from it.
+         */
+        public static CreateFromRadius(radius: number): BoundingInfo2D {
+            let r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromRadiusToRef(radius, r);
+            return r;
+        }
+
+        /**
+         * Create a BoundingInfo2D object from a list of points.
+         * The resulted object will be the smallest bounding area that includes all the given points.
+         * @param points an array of points to compute the bounding object from.
+         */
+        public static CreateFromPoints(points: Vector2[]): BoundingInfo2D {
+            let r = new BoundingInfo2D();
+            BoundingInfo2D.CreateFromPointsToRef(points, r);
+
+            return r;
+        }
+
+        /**
+         * Update a BoundingInfo2D object using the given Size as input
+         * @param size the bounding data will be computed from this size.
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        public static CreateFromSizeToRef(size: Size, b: BoundingInfo2D) {
+            if (!size) {
+                size = Size.Zero();
+            }
+            b.center.x = +size.width / 2;
+            b.center.y = +size.height / 2;
+            b.extent.x = b.center.x;
+            b.extent.y = b.center.y;
+            b.radius = b.extent.length();
+        }
+
+        /**
+         * Update a BoundingInfo2D object using the given radius as input
+         * @param radius the bounding data will be computed from this radius
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        public static CreateFromRadiusToRef(radius: number, b: BoundingInfo2D) {
+            b.center.x = b.center.y = 0;
+            let r = +radius;
+            b.extent.x = r;
+            b.extent.y = r;
+            b.radius = r;
+        }
+
+        /**
+         * Update a BoundingInfo2D object using the given points array as input
+         * @param points the point array to use to update the bounding data
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        public static CreateFromPointsToRef(points: Vector2[], b: BoundingInfo2D) {
+            let xmin = Number.MAX_VALUE, ymin = Number.MAX_VALUE, xmax = Number.MIN_VALUE, ymax = Number.MIN_VALUE;
+            for (let p of points) {
+                xmin = Math.min(p.x, xmin);
+                xmax = Math.max(p.x, xmax);
+                ymin = Math.min(p.y, ymin);
+                ymax = Math.max(p.y, ymax);
+            }
+            BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, b);
+        }
+
+        /**
+         * Update a BoundingInfo2D object using the given min/max values as input
+         * @param xmin the smallest x coordinate
+         * @param xmax the biggest x coordinate
+         * @param ymin the smallest y coordinate
+         * @param ymax the buggest y coordinate
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
+        public static CreateFromMinMaxToRef(xmin: number, xmax: number, ymin: number, ymax: number, b: BoundingInfo2D) {
+            let w = xmax - xmin;
+            let h = ymax - ymin;
+            b.center = new Vector2(xmin + w / 2, ymin + h / 2);
+            b.extent = new Vector2(xmax - b.center.x, ymax - b.center.y);
+            b.radius = b.extent.length();
+        }
+
+        /**
+         * Duplicate this instance and return a new one
+         * @return the duplicated instance
+         */
+        public clone(): BoundingInfo2D {
+            let r = new BoundingInfo2D();
+            r.center = this.center.clone();
+            r.radius = this.radius;
+            r.extent = this.extent.clone();
+            return r;
+        }
+
+        public clear() {
+            this.center.copyFromFloats(0, 0);
+            this.radius = 0;
+            this.extent.copyFromFloats(0, 0);
+        }
+
+        public copyFrom(src: BoundingInfo2D) {
+            this.center.copyFrom(src.center);
+            this.radius = src.radius;
+            this.extent.copyFrom(src.extent);
+        }
+
+        /**
+         * return the max extend of the bounding info
+         */
+        public max(): Vector2 {
+            let r = Vector2.Zero();
+            this.maxToRef(r);
+            return r;
+        }
+
+        /**
+         * Update a vector2 with the max extend of the bounding info
+         * @param result must be a valid/allocated vector2 that will contain the result of the operation
+         */
+        public maxToRef(result: Vector2) {
+            result.x = this.center.x + this.extent.x;
+            result.y = this.center.y + this.extent.y;
+        }
+
+        /**
+         * Apply a transformation matrix to this BoundingInfo2D and return a new instance containing the result
+         * @param matrix the transformation matrix to apply
+         * @return the new instance containing the result of the transformation applied on this BoundingInfo2D
+         */
+        public transform(matrix: Matrix): BoundingInfo2D {
+            var r = new BoundingInfo2D();
+            this.transformToRef(matrix, r);
+            return r;
+        }
+
+        /**
+         * Compute the union of this BoundingInfo2D with a given one, returns a new BoundingInfo2D as a result
+         * @param other the second BoundingInfo2D to compute the union with this one
+         * @return a new instance containing the result of the union
+         */
+        public union(other: BoundingInfo2D): BoundingInfo2D {
+            var r = new BoundingInfo2D();
+            this.unionToRef(other, r);
+            return r;
+        }
+
+        private static _transform: Array<Vector2> = new Array<Vector2>(Vector2.Zero(), Vector2.Zero(), Vector2.Zero(), Vector2.Zero());
+
+        /**
+         * Transform this BoundingInfo2D with a given matrix and store the result in an existing BoundingInfo2D instance.
+         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
+         * @param matrix The matrix to use to compute the transformation
+         * @param result A VALID (i.e. allocated) BoundingInfo2D object where the result will be stored
+         */
+        public transformToRef(matrix: Matrix, result: BoundingInfo2D) {
+            // Construct a bounding box based on the extent values
+            let p = BoundingInfo2D._transform;
+            p[0].x = this.center.x + this.extent.x;
+            p[0].y = this.center.y + this.extent.y;
+            p[1].x = this.center.x + this.extent.x;
+            p[1].y = this.center.y - this.extent.y;
+            p[2].x = this.center.x - this.extent.x;
+            p[2].y = this.center.y - this.extent.y;
+            p[3].x = this.center.x - this.extent.x;
+            p[3].y = this.center.y + this.extent.y;
+
+            // Transform the four points of the bounding box with the matrix
+            for (let i = 0; i < 4; i++) {
+                Vector2.TransformToRef(p[i], matrix, p[i]);
+            }
+            BoundingInfo2D.CreateFromPointsToRef(p, result);
+        }
+
+        /**
+         * Compute the union of this BoundingInfo2D with another one and store the result in a third valid BoundingInfo2D object
+         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
+         * @param other the second object used to compute the union
+         * @param result a VALID BoundingInfo2D instance (i.e. allocated) where the result will be stored
+         */
+        public unionToRef(other: BoundingInfo2D, result: BoundingInfo2D) {
+            let xmax = Math.max(this.center.x + this.extent.x, other.center.x + other.extent.x);
+            let ymax = Math.max(this.center.y + this.extent.y, other.center.y + other.extent.y);
+            let xmin = Math.min(this.center.x - this.extent.x, other.center.x - other.extent.x);
+            let ymin = Math.min(this.center.y - this.extent.y, other.center.y - other.extent.y);
+            BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, result);
+        }
+
+        /**
+         * Check if the given point is inside the BoundingInfo.
+         * The test is first made on the radius, then inside the rectangle described by the extent
+         * @param pickPosition the position to test
+         * @return true if the point is inside, false otherwise
+         */
+        public doesIntersect(pickPosition: Vector2): boolean {
+            // is it inside the radius?
+            let pickLocal = pickPosition.subtract(this.center);
+            if (pickLocal.lengthSquared() <= (this.radius * this.radius)) {
+                // is it inside the rectangle?
+                return ((Math.abs(pickLocal.x) <= this.extent.x) && (Math.abs(pickLocal.y) <= this.extent.y));
+            }
+            return false;
+        }
+    }
+}

canvas2D/src/babylon.brushes2d.js

@@ -0,0 +1,212 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Base class implementing the ILocable interface.
+     * The particularity of this class is to call the protected onLock() method when the instance is about to be locked for good.
+     */
+    var LockableBase = (function () {
+        function LockableBase() {
+        }
+        LockableBase.prototype.isLocked = function () {
+            return this._isLocked;
+        };
+        LockableBase.prototype.lock = function () {
+            if (this._isLocked) {
+                return true;
+            }
+            this.onLock();
+            this._isLocked = true;
+            return false;
+        };
+        /**
+         * Protected handler that will be called when the instance is about to be locked.
+         */
+        LockableBase.prototype.onLock = function () {
+        };
+        return LockableBase;
+    }());
+    BABYLON.LockableBase = LockableBase;
+    var SolidColorBrush2D = (function (_super) {
+        __extends(SolidColorBrush2D, _super);
+        function SolidColorBrush2D(color, lock) {
+            if (lock === void 0) { lock = false; }
+            _super.call(this);
+            this._color = color;
+            if (lock) {
+                {
+                    this.lock();
+                }
+            }
+        }
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
+        SolidColorBrush2D.prototype.isTransparent = function () {
+            return this._color && this._color.a < 1.0;
+        };
+        Object.defineProperty(SolidColorBrush2D.prototype, "color", {
+            /**
+             * The color used by this instance to render
+             * @returns the color object. Note that it's not a clone of the actual object stored in the instance so you MUST NOT modify it, otherwise unexpected behavior might occurs.
+             */
+            get: function () {
+                return this._color;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._color = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Return a unique identifier of the instance, which is simply the hexadecimal representation (CSS Style) of the solid color.
+         */
+        SolidColorBrush2D.prototype.toString = function () {
+            return this._color.toHexString();
+        };
+        SolidColorBrush2D = __decorate([
+            BABYLON.className("SolidColorBrush2D")
+        ], SolidColorBrush2D);
+        return SolidColorBrush2D;
+    }(LockableBase));
+    BABYLON.SolidColorBrush2D = SolidColorBrush2D;
+    var GradientColorBrush2D = (function (_super) {
+        __extends(GradientColorBrush2D, _super);
+        function GradientColorBrush2D(color1, color2, translation, rotation, scale, lock) {
+            if (translation === void 0) { translation = BABYLON.Vector2.Zero(); }
+            if (rotation === void 0) { rotation = 0; }
+            if (scale === void 0) { scale = 1; }
+            if (lock === void 0) { lock = false; }
+            _super.call(this);
+            this._color1 = color1;
+            this._color2 = color2;
+            this._translation = translation;
+            this._rotation = rotation;
+            this._scale = scale;
+            if (lock) {
+                this.lock();
+            }
+        }
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
+        GradientColorBrush2D.prototype.isTransparent = function () {
+            return (this._color1 && this._color1.a < 1.0) || (this._color2 && this._color2.a < 1.0);
+        };
+        Object.defineProperty(GradientColorBrush2D.prototype, "color1", {
+            /**
+             * First color, the blend will start from this color
+             */
+            get: function () {
+                return this._color1;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._color1 = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GradientColorBrush2D.prototype, "color2", {
+            /**
+             * Second color, the blend will end to this color
+             */
+            get: function () {
+                return this._color2;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._color2 = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GradientColorBrush2D.prototype, "translation", {
+            /**
+             * Translation vector to apply on the blend
+             * Default is [0;0]
+             */
+            get: function () {
+                return this._translation;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._translation = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GradientColorBrush2D.prototype, "rotation", {
+            /**
+             * Rotation in radian to apply to the brush
+             * Default direction of the brush is vertical, you can change this using this property.
+             * Default is 0.
+             */
+            get: function () {
+                return this._rotation;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._rotation = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GradientColorBrush2D.prototype, "scale", {
+            /**
+             * Scale factor to apply to the gradient.
+             * Default is 1: no scale.
+             */
+            get: function () {
+                return this._scale;
+            },
+            set: function (value) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._scale = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Return a string describing the brush
+         */
+        GradientColorBrush2D.prototype.toString = function () {
+            return "C1:" + this._color1 + ";C2:" + this._color2 + ";T:" + this._translation.toString() + ";R:" + this._rotation + ";S:" + this._scale + ";";
+        };
+        /**
+         * Build a unique key string for the given parameters
+         */
+        GradientColorBrush2D.BuildKey = function (color1, color2, translation, rotation, scale) {
+            return "C1:" + color1 + ";C2:" + color2 + ";T:" + translation.toString() + ";R:" + rotation + ";S:" + scale + ";";
+        };
+        GradientColorBrush2D = __decorate([
+            BABYLON.className("GradientColorBrush2D")
+        ], GradientColorBrush2D);
+        return GradientColorBrush2D;
+    }(LockableBase));
+    BABYLON.GradientColorBrush2D = GradientColorBrush2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.brushes2d.ts

@@ -0,0 +1,242 @@
+module BABYLON {
+    /**
+     * This interface is used to implement a lockable instance pattern.
+     * Classes that implements it may be locked at any time, making their content immutable from now on.
+     * You also can query if a given instance is locked or not.
+     * This allow instances to be shared among several 'consumers'.
+     */
+    export interface ILockable {
+        /**
+         * Query the lock state
+         * @returns returns true if the object is locked and immutable, false if it's not
+         */
+        isLocked(): boolean;
+
+        /**
+         * A call to this method will definitely lock the instance, making its content immutable
+         * @returns the previous lock state of the object. so if true is returned the object  were already locked and this method does nothing, if false is returned it means the object wasn't locked and this call locked it for good.
+         */
+        lock(): boolean;
+    }
+
+    /**
+     * This interface defines the IBrush2D contract.
+     * Classes implementing a new type of Brush2D must implement this interface
+     */
+    export interface IBrush2D extends ILockable {
+        /**
+         * Define if the brush will use transparency / alpha blending
+         * @returns true if the brush use transparency
+         */
+        isTransparent(): boolean;
+
+        /**
+         * It is critical for each instance of a given Brush2D type to return a unique string that identifies it because the Border instance will certainly be part of the computed ModelKey for a given Primitive
+         * @returns A string identifier that uniquely identify the instance
+         */
+        toString(): string;
+    }
+
+    /**
+     * Base class implementing the ILocable interface.
+     * The particularity of this class is to call the protected onLock() method when the instance is about to be locked for good.
+     */
+    export class LockableBase implements ILockable {
+        isLocked(): boolean {
+            return this._isLocked;
+        }
+
+        private _isLocked: boolean;
+
+        lock(): boolean {
+            if (this._isLocked) {
+                return true;
+            }
+
+            this.onLock();
+            this._isLocked = true;
+            return false;
+        }
+
+        /**
+         * Protected handler that will be called when the instance is about to be locked.
+         */
+        protected onLock() {
+
+        }
+    }
+
+    @className("SolidColorBrush2D")
+    /**
+     * This class implements a Brush that will be drawn with a uniform solid color (i.e. the same color everywhere in the content where the brush is assigned to).
+     */
+    export class SolidColorBrush2D extends LockableBase implements IBrush2D {
+        constructor(color: Color4, lock: boolean = false) {
+            super();
+            this._color = color;
+            if (lock) {
+                {
+                    this.lock();
+                }
+            }
+        }
+
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
+        isTransparent(): boolean {
+            return this._color && this._color.a < 1.0;
+        }
+
+        /**
+         * The color used by this instance to render
+         * @returns the color object. Note that it's not a clone of the actual object stored in the instance so you MUST NOT modify it, otherwise unexpected behavior might occurs.
+         */
+        public get color(): Color4 {
+            return this._color;
+        }
+
+        public set color(value: Color4) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._color = value;
+        }
+
+        /**
+         * Return a unique identifier of the instance, which is simply the hexadecimal representation (CSS Style) of the solid color.
+         */
+        public toString(): string {
+            return this._color.toHexString();
+        }
+        private _color: Color4;
+    }
+
+    @className("GradientColorBrush2D")
+    /**
+     * This class implements a Gradient Color Brush, the brush color will blend from a first given color to a second one.
+     */
+    export class GradientColorBrush2D extends LockableBase implements IBrush2D {
+        constructor(color1: Color4, color2: Color4, translation: Vector2 = Vector2.Zero(), rotation: number = 0, scale: number = 1, lock: boolean = false) {
+            super();
+
+            this._color1 = color1;
+            this._color2 = color2;
+            this._translation = translation;
+            this._rotation = rotation;
+            this._scale = scale;
+
+            if (lock) {
+                this.lock();
+            }
+        }
+
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
+        isTransparent(): boolean {
+            return (this._color1 && this._color1.a < 1.0) || (this._color2 && this._color2.a < 1.0);
+        }
+
+        /**
+         * First color, the blend will start from this color
+         */
+        public get color1(): Color4 {
+            return this._color1;
+        }
+
+        public set color1(value: Color4) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._color1 = value;
+        }
+
+        /**
+         * Second color, the blend will end to this color
+         */
+        public get color2(): Color4 {
+            return this._color2;
+        }
+
+        public set color2(value: Color4) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._color2 = value;
+        }
+
+        /**
+         * Translation vector to apply on the blend
+         * Default is [0;0]
+         */
+        public get translation(): Vector2 {
+            return this._translation;
+        }
+
+        public set translation(value: Vector2) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._translation = value;
+        }
+
+        /**
+         * Rotation in radian to apply to the brush
+         * Default direction of the brush is vertical, you can change this using this property.
+         * Default is 0.
+         */
+        public get rotation(): number {
+            return this._rotation;
+        }
+
+        public set rotation(value: number) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._rotation = value;
+        }
+
+        /**
+         * Scale factor to apply to the gradient.
+         * Default is 1: no scale.
+         */
+        public get scale(): number {
+            return this._scale;
+        }
+
+        public set scale(value: number) {
+            if (this.isLocked()) {
+                return;
+            }
+
+            this._scale = value;
+        }
+
+        /**
+         * Return a string describing the brush
+         */
+        public toString(): string {
+            return `C1:${this._color1};C2:${this._color2};T:${this._translation.toString()};R:${this._rotation};S:${this._scale};`;
+        }
+
+        /**
+         * Build a unique key string for the given parameters
+         */
+        public static BuildKey(color1: Color4, color2: Color4, translation: Vector2, rotation: number, scale: number) {
+            return `C1:${color1};C2:${color2};T:${translation.toString()};R:${rotation};S:${scale};`;
+        }
+
+        private _color1: Color4;
+        private _color2: Color4;
+        private _translation: Vector2;
+        private _rotation: number;
+        private _scale: number;
+    }
+
+}

canvas2D/src/babylon.canvas2dLayoutEngine.js

@@ -0,0 +1,184 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var LayoutEngineBase = (function () {
+        function LayoutEngineBase() {
+            this.layoutDirtyOnPropertyChangedMask = 0;
+        }
+        LayoutEngineBase.prototype.updateLayout = function (prim) {
+        };
+        Object.defineProperty(LayoutEngineBase.prototype, "isChildPositionAllowed", {
+            get: function () {
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        LayoutEngineBase.prototype.isLocked = function () {
+            return this._isLocked;
+        };
+        LayoutEngineBase.prototype.lock = function () {
+            if (this._isLocked) {
+                return false;
+            }
+            this._isLocked = true;
+            return true;
+        };
+        LayoutEngineBase = __decorate([
+            BABYLON.className("LayoutEngineBase")
+        ], LayoutEngineBase);
+        return LayoutEngineBase;
+    }());
+    BABYLON.LayoutEngineBase = LayoutEngineBase;
+    var CanvasLayoutEngine = (function (_super) {
+        __extends(CanvasLayoutEngine, _super);
+        function CanvasLayoutEngine() {
+            _super.apply(this, arguments);
+        }
+        // A very simple (no) layout computing...
+        // The Canvas and its direct children gets the Canvas' size as Layout Area
+        // Indirect children have their Layout Area to the actualSize (margin area) of their parent
+        CanvasLayoutEngine.prototype.updateLayout = function (prim) {
+            // If this prim is layoutDiry we update  its layoutArea and also the one of its direct children
+            if (prim._isFlagSet(BABYLON.SmartPropertyPrim.flagLayoutDirty)) {
+                for (var _i = 0, _a = prim.children; _i < _a.length; _i++) {
+                    var child = _a[_i];
+                    this._doUpdate(child);
+                }
+                prim._clearFlags(BABYLON.SmartPropertyPrim.flagLayoutDirty);
+            }
+        };
+        CanvasLayoutEngine.prototype._doUpdate = function (prim) {
+            // Canvas ?
+            if (prim instanceof BABYLON.Canvas2D) {
+                prim.layoutArea = prim.actualSize;
+            }
+            else if (prim.parent instanceof BABYLON.Canvas2D) {
+                prim.layoutArea = prim.owner.actualSize;
+            }
+            else {
+                prim.layoutArea = prim.parent.contentArea;
+            }
+        };
+        Object.defineProperty(CanvasLayoutEngine.prototype, "isChildPositionAllowed", {
+            get: function () {
+                return true;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CanvasLayoutEngine.Singleton = new CanvasLayoutEngine();
+        CanvasLayoutEngine = __decorate([
+            BABYLON.className("CanvasLayoutEngine")
+        ], CanvasLayoutEngine);
+        return CanvasLayoutEngine;
+    }(LayoutEngineBase));
+    BABYLON.CanvasLayoutEngine = CanvasLayoutEngine;
+    var StackPanelLayoutEngine = (function (_super) {
+        __extends(StackPanelLayoutEngine, _super);
+        function StackPanelLayoutEngine() {
+            _super.call(this);
+            this._isHorizontal = true;
+            this.layoutDirtyOnPropertyChangedMask = BABYLON.Prim2DBase.sizeProperty.flagId;
+        }
+        Object.defineProperty(StackPanelLayoutEngine, "Horizontal", {
+            get: function () {
+                if (!StackPanelLayoutEngine._horizontal) {
+                    StackPanelLayoutEngine._horizontal = new StackPanelLayoutEngine();
+                    StackPanelLayoutEngine._horizontal.isHorizontal = true;
+                    StackPanelLayoutEngine._horizontal.lock();
+                }
+                return StackPanelLayoutEngine._horizontal;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(StackPanelLayoutEngine, "Vertical", {
+            get: function () {
+                if (!StackPanelLayoutEngine._vertical) {
+                    StackPanelLayoutEngine._vertical = new StackPanelLayoutEngine();
+                    StackPanelLayoutEngine._vertical.isHorizontal = false;
+                    StackPanelLayoutEngine._vertical.lock();
+                }
+                return StackPanelLayoutEngine._vertical;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(StackPanelLayoutEngine.prototype, "isHorizontal", {
+            get: function () {
+                return this._isHorizontal;
+            },
+            set: function (val) {
+                if (this.isLocked()) {
+                    return;
+                }
+                this._isHorizontal = val;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        StackPanelLayoutEngine.prototype.updateLayout = function (prim) {
+            if (prim._isFlagSet(BABYLON.SmartPropertyPrim.flagLayoutDirty)) {
+                var x = 0;
+                var y = 0;
+                var h = this.isHorizontal;
+                var max = 0;
+                for (var _i = 0, _a = prim.children; _i < _a.length; _i++) {
+                    var child = _a[_i];
+                    var layoutArea = void 0;
+                    if (child._hasMargin) {
+                        child.margin.computeWithAlignment(prim.layoutArea, child.actualSize, child.marginAlignment, StackPanelLayoutEngine.dstOffset, StackPanelLayoutEngine.dstArea, true);
+                        layoutArea = StackPanelLayoutEngine.dstArea.clone();
+                        child.layoutArea = layoutArea;
+                    }
+                    else {
+                        layoutArea = child.layoutArea;
+                        child.margin.computeArea(child.actualSize, layoutArea);
+                    }
+                    max = Math.max(max, h ? layoutArea.height : layoutArea.width);
+                }
+                for (var _b = 0, _c = prim.children; _b < _c.length; _b++) {
+                    var child = _c[_b];
+                    child.layoutAreaPos = new BABYLON.Vector2(x, y);
+                    var layoutArea = child.layoutArea;
+                    if (h) {
+                        x += layoutArea.width;
+                        child.layoutArea = new BABYLON.Size(layoutArea.width, max);
+                    }
+                    else {
+                        y += layoutArea.height;
+                        child.layoutArea = new BABYLON.Size(max, layoutArea.height);
+                    }
+                }
+                prim._clearFlags(BABYLON.SmartPropertyPrim.flagLayoutDirty);
+            }
+        };
+        Object.defineProperty(StackPanelLayoutEngine.prototype, "isChildPositionAllowed", {
+            get: function () {
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        StackPanelLayoutEngine._horizontal = null;
+        StackPanelLayoutEngine._vertical = null;
+        StackPanelLayoutEngine.dstOffset = BABYLON.Vector2.Zero();
+        StackPanelLayoutEngine.dstArea = BABYLON.Size.Zero();
+        StackPanelLayoutEngine = __decorate([
+            BABYLON.className("StackPanelLayoutEngine")
+        ], StackPanelLayoutEngine);
+        return StackPanelLayoutEngine;
+    }(LayoutEngineBase));
+    BABYLON.StackPanelLayoutEngine = StackPanelLayoutEngine;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.canvas2dLayoutEngine.ts

@@ -0,0 +1,181 @@
+module BABYLON {
+
+    @className("LayoutEngineBase")
+    /**
+     * This is the base class you have to extend in order to implement your own Layout Engine.
+     * Note that for performance reason, each different Layout Engine type can be exposed as one/many singleton or must be instanced each time.
+     * If data has to be associated to a given primitive you can use the SmartPropertyPrim.addExternalData API to do it.
+     */
+    export class LayoutEngineBase implements ILockable {
+        constructor() {
+            this.layoutDirtyOnPropertyChangedMask = 0;
+        }
+
+        public updateLayout(prim: Prim2DBase) {
+        }
+
+        public get isChildPositionAllowed(): boolean {
+            return false;
+        }
+
+        isLocked(): boolean {
+            return this._isLocked;
+        }
+
+        lock(): boolean {
+            if (this._isLocked) {
+                return false;
+            }
+            this._isLocked = true;
+            return true;
+        }
+
+        public layoutDirtyOnPropertyChangedMask;
+
+        private _isLocked: boolean;
+    }
+
+    @className("CanvasLayoutEngine")
+    /**
+     * The default Layout Engine, primitive are positioning into a Canvas, using their x/y coordinates.
+     * This layout must be used as a Singleton through the CanvasLayoutEngine.Singleton property.
+     */
+    export class CanvasLayoutEngine extends LayoutEngineBase {
+        public static Singleton: CanvasLayoutEngine = new CanvasLayoutEngine();
+
+        // A very simple (no) layout computing...
+        // The Canvas and its direct children gets the Canvas' size as Layout Area
+        // Indirect children have their Layout Area to the actualSize (margin area) of their parent
+        public updateLayout(prim: Prim2DBase) {
+
+            // If this prim is layoutDiry we update  its layoutArea and also the one of its direct children
+            if (prim._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
+
+                for (let child of prim.children) {
+                    this._doUpdate(child);
+                }
+                prim._clearFlags(SmartPropertyPrim.flagLayoutDirty);
+            }
+
+        }
+
+        private _doUpdate(prim: Prim2DBase) {
+            // Canvas ?
+            if (prim instanceof Canvas2D) {
+                prim.layoutArea = prim.actualSize;
+            }
+
+            // Direct child of Canvas ?
+            else if (prim.parent instanceof Canvas2D) {
+                prim.layoutArea = prim.owner.actualSize;
+            }
+
+            // Indirect child of Canvas
+            else {
+                prim.layoutArea = prim.parent.contentArea;
+            }
+        }
+
+        get isChildPositionAllowed(): boolean {
+            return true;
+        }
+    }
+
+
+    @className("StackPanelLayoutEngine")
+    /**
+     * A stack panel layout. Primitive will be stack either horizontally or vertically.
+     * This Layout type must be used as a Singleton, use the StackPanelLayoutEngine.Horizontal for an horizontal stack panel or StackPanelLayoutEngine.Vertical for a vertical one.
+     */
+    export class StackPanelLayoutEngine extends LayoutEngineBase {
+        constructor() {
+            super();
+            this.layoutDirtyOnPropertyChangedMask = Prim2DBase.sizeProperty.flagId;
+        }
+
+        public static get Horizontal(): StackPanelLayoutEngine {
+            if (!StackPanelLayoutEngine._horizontal) {
+                StackPanelLayoutEngine._horizontal = new StackPanelLayoutEngine();
+                StackPanelLayoutEngine._horizontal.isHorizontal = true;
+                StackPanelLayoutEngine._horizontal.lock();
+            }
+
+            return StackPanelLayoutEngine._horizontal;
+        }
+
+        public static get Vertical(): StackPanelLayoutEngine {
+            if (!StackPanelLayoutEngine._vertical) {
+                StackPanelLayoutEngine._vertical = new StackPanelLayoutEngine();
+                StackPanelLayoutEngine._vertical.isHorizontal = false;
+                StackPanelLayoutEngine._vertical.lock();
+            }
+
+            return StackPanelLayoutEngine._vertical;
+        }
+        private static _horizontal: StackPanelLayoutEngine = null;
+        private static _vertical: StackPanelLayoutEngine = null;
+
+
+        get isHorizontal(): boolean {
+            return this._isHorizontal;
+        }
+
+        set isHorizontal(val: boolean) {
+            if (this.isLocked()) {
+                return;
+            }
+            this._isHorizontal = val;
+        }
+
+        private _isHorizontal: boolean = true;
+
+        private static dstOffset = Vector2.Zero();
+        private static dstArea = Size.Zero();
+
+        public updateLayout(prim: Prim2DBase) {
+            if (prim._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
+
+                let x = 0;
+                let y = 0;
+                let h = this.isHorizontal;
+                let max = 0;
+
+                for (let child of prim.children) {
+
+                    let layoutArea: Size;
+                    if (child._hasMargin) {
+                        child.margin.computeWithAlignment(prim.layoutArea, child.actualSize, child.marginAlignment, StackPanelLayoutEngine.dstOffset, StackPanelLayoutEngine.dstArea, true);
+                        layoutArea = StackPanelLayoutEngine.dstArea.clone();
+                        child.layoutArea = layoutArea;
+                    } else {
+                        layoutArea = child.layoutArea;
+                        child.margin.computeArea(child.actualSize, layoutArea);
+                    }
+
+                    max = Math.max(max, h ? layoutArea.height : layoutArea.width);
+
+                }
+
+                for (let child of prim.children) {
+                    child.layoutAreaPos = new Vector2(x, y);
+
+                    let layoutArea = child.layoutArea;
+
+                    if (h) {
+                        x += layoutArea.width;
+                        child.layoutArea = new Size(layoutArea.width, max);
+                    } else {
+                        y += layoutArea.height;
+                        child.layoutArea = new Size(max, layoutArea.height);
+                    }
+                }
+                prim._clearFlags(SmartPropertyPrim.flagLayoutDirty);
+            }
+
+        }
+
+        get isChildPositionAllowed(): boolean {
+            return false;
+        }
+    }
+}

canvas2D/src/babylon.ellipse2d.js

@@ -0,0 +1,355 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Ellipse2DRenderCache = (function (_super) {
+        __extends(Ellipse2DRenderCache, _super);
+        function Ellipse2DRenderCache(engine, modelKey) {
+            _super.call(this, engine, modelKey);
+            this.effectsReady = false;
+            this.fillVB = null;
+            this.fillIB = null;
+            this.fillIndicesCount = 0;
+            this.instancingFillAttributes = null;
+            this.effectFillInstanced = null;
+            this.effectFill = null;
+            this.borderVB = null;
+            this.borderIB = null;
+            this.borderIndicesCount = 0;
+            this.instancingBorderAttributes = null;
+            this.effectBorderInstanced = null;
+            this.effectBorder = null;
+        }
+        Ellipse2DRenderCache.prototype.render = function (instanceInfo, context) {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
+                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            var canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+            var depthFunction = 0;
+            if (this.effectFill && this.effectBorder) {
+                depthFunction = engine.getDepthFunction();
+                engine.setDepthFunctionToLessOrEqual();
+            }
+            var curAlphaMode = engine.getAlphaMode();
+            if (this.effectFill) {
+                var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_FILLPARTID.toString());
+                var pid = context.groupInfoPartData[partIndex];
+                if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+                }
+                var effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingFillAttributes) {
+                        this.instancingFillAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_FILLPARTID, effect);
+                    }
+                    var glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
+                    engine.draw(true, 0, this.fillIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                }
+                else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.fillIndicesCount);
+                    }
+                }
+            }
+            if (this.effectBorder) {
+                var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_BORDERPARTID.toString());
+                var pid = context.groupInfoPartData[partIndex];
+                if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+                }
+                var effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingBorderAttributes) {
+                        this.instancingBorderAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, effect);
+                    }
+                    var glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
+                    engine.draw(true, 0, this.borderIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                }
+                else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.borderIndicesCount);
+                    }
+                }
+            }
+            engine.setAlphaMode(curAlphaMode, true);
+            if (this.effectFill && this.effectBorder) {
+                engine.setDepthFunction(depthFunction);
+            }
+            return true;
+        };
+        Ellipse2DRenderCache.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.fillVB) {
+                this._engine._releaseBuffer(this.fillVB);
+                this.fillVB = null;
+            }
+            if (this.fillIB) {
+                this._engine._releaseBuffer(this.fillIB);
+                this.fillIB = null;
+            }
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+            if (this.borderVB) {
+                this._engine._releaseBuffer(this.borderVB);
+                this.borderVB = null;
+            }
+            if (this.borderIB) {
+                this._engine._releaseBuffer(this.borderIB);
+                this.borderIB = null;
+            }
+            return true;
+        };
+        return Ellipse2DRenderCache;
+    }(BABYLON.ModelRenderCache));
+    BABYLON.Ellipse2DRenderCache = Ellipse2DRenderCache;
+    var Ellipse2DInstanceData = (function (_super) {
+        __extends(Ellipse2DInstanceData, _super);
+        function Ellipse2DInstanceData(partId) {
+            _super.call(this, partId, 1);
+        }
+        Object.defineProperty(Ellipse2DInstanceData.prototype, "properties", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData()
+        ], Ellipse2DInstanceData.prototype, "properties", null);
+        return Ellipse2DInstanceData;
+    }(BABYLON.Shape2DInstanceData));
+    BABYLON.Ellipse2DInstanceData = Ellipse2DInstanceData;
+    var Ellipse2D = (function (_super) {
+        __extends(Ellipse2D, _super);
+        /**
+         * Create an Ellipse 2D Shape primitive
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id: a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - size: the size of the group. Alternatively the width and height properties can be set. Default will be [10;10].
+         * - subdivision: the number of subdivision to create the ellipse perimeter, default is 64.
+         * - fill: the brush used to draw the fill content of the ellipse, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - border: the brush used to draw the border of the ellipse, you can set null to draw nothing (but you will have to set a fill brush), default is null. can be a string value (see Canvas2D.GetBrushFromString)
+         * - borderThickness: the thickness of the drawn border, default is 1.
+         * - isVisible: true if the group must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        function Ellipse2D(settings) {
+            // Avoid checking every time if the object exists
+            if (settings == null) {
+                settings = {};
+            }
+            _super.call(this, settings);
+            if (settings.size != null) {
+                this.size = settings.size;
+            }
+            else if (settings.width || settings.height) {
+                var size = new BABYLON.Size(settings.width, settings.height);
+                this.size = size;
+            }
+            var sub = (settings.subdivisions == null) ? 64 : settings.subdivisions;
+            this.subdivisions = sub;
+        }
+        Object.defineProperty(Ellipse2D.prototype, "actualSize", {
+            get: function () {
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
+                return this.size;
+            },
+            set: function (value) {
+                this._actualSize = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Ellipse2D.prototype, "subdivisions", {
+            get: function () {
+                return this._subdivisions;
+            },
+            set: function (value) {
+                this._subdivisions = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Ellipse2D.prototype.levelIntersect = function (intersectInfo) {
+            var w = this.size.width / 2;
+            var h = this.size.height / 2;
+            var x = intersectInfo._localPickPosition.x - w;
+            var y = intersectInfo._localPickPosition.y - h;
+            return ((x * x) / (w * w) + (y * y) / (h * h)) <= 1;
+        };
+        Ellipse2D.prototype.updateLevelBoundingInfo = function () {
+            BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        };
+        Ellipse2D.prototype.createModelRenderCache = function (modelKey) {
+            var renderCache = new Ellipse2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        };
+        Ellipse2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+            var renderCache = modelRenderCache;
+            var engine = this.owner.engine;
+            // Need to create WebGL resources for fill part?
+            if (this.fill) {
+                var vbSize = this.subdivisions + 1;
+                var vb = new Float32Array(vbSize);
+                for (var i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.fillVB = engine.createVertexBuffer(vb);
+                var triCount = vbSize - 1;
+                var ib = new Float32Array(triCount * 3);
+                for (var i = 0; i < triCount; i++) {
+                    ib[i * 3 + 0] = 0;
+                    ib[i * 3 + 2] = i + 1;
+                    ib[i * 3 + 1] = i + 2;
+                }
+                ib[triCount * 3 - 2] = 1;
+                renderCache.fillIB = engine.createIndexBuffer(ib);
+                renderCache.fillIndicesCount = triCount * 3;
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectFillInstanced = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
+                renderCache.effectFill = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+            // Need to create WebGL resource for border part?
+            if (this.border) {
+                var vbSize = this.subdivisions * 2;
+                var vb = new Float32Array(vbSize);
+                for (var i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.borderVB = engine.createVertexBuffer(vb);
+                var triCount = vbSize;
+                var rs = triCount / 2;
+                var ib = new Float32Array(triCount * 3);
+                for (var i = 0; i < rs; i++) {
+                    var r0 = i;
+                    var r1 = (i + 1) % rs;
+                    ib[i * 6 + 0] = rs + r1;
+                    ib[i * 6 + 1] = rs + r0;
+                    ib[i * 6 + 2] = r0;
+                    ib[i * 6 + 3] = r1;
+                    ib[i * 6 + 4] = rs + r1;
+                    ib[i * 6 + 5] = r0;
+                }
+                renderCache.borderIB = engine.createIndexBuffer(ib);
+                renderCache.borderIndicesCount = (triCount * 3);
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectBorderInstanced = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
+                renderCache.effectBorder = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+            return renderCache;
+        };
+        Ellipse2D.prototype.createInstanceDataParts = function () {
+            var res = new Array();
+            if (this.border) {
+                res.push(new Ellipse2DInstanceData(BABYLON.Shape2D.SHAPE2D_BORDERPARTID));
+            }
+            if (this.fill) {
+                res.push(new Ellipse2DInstanceData(BABYLON.Shape2D.SHAPE2D_FILLPARTID));
+            }
+            return res;
+        };
+        Ellipse2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            if (part.id === BABYLON.Shape2D.SHAPE2D_BORDERPARTID) {
+                var d = part;
+                var size = this.actualSize;
+                var s = this.actualScale;
+                d.properties = new BABYLON.Vector3(size.width * s.x, size.height * s.y, this.subdivisions);
+            }
+            else if (part.id === BABYLON.Shape2D.SHAPE2D_FILLPARTID) {
+                var d = part;
+                var size = this.actualSize;
+                var s = this.actualScale;
+                d.properties = new BABYLON.Vector3(size.width * s.x, size.height * s.y, this.subdivisions);
+            }
+            return true;
+        };
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 1, function (pi) { return Ellipse2D.acutalSizeProperty = pi; }, false, true)
+        ], Ellipse2D.prototype, "actualSize", null);
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 2, function (pi) { return Ellipse2D.subdivisionsProperty = pi; })
+        ], Ellipse2D.prototype, "subdivisions", null);
+        Ellipse2D = __decorate([
+            BABYLON.className("Ellipse2D")
+        ], Ellipse2D);
+        return Ellipse2D;
+    }(BABYLON.Shape2D));
+    BABYLON.Ellipse2D = Ellipse2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.ellipse2d.ts

@@ -0,0 +1,422 @@
+module BABYLON {
+    export class Ellipse2DRenderCache extends ModelRenderCache {
+        effectsReady: boolean                               = false;
+        fillVB: WebGLBuffer                                 = null;
+        fillIB: WebGLBuffer                                 = null;
+        fillIndicesCount: number                            = 0;
+        instancingFillAttributes: InstancingAttributeInfo[] = null;
+        effectFillInstanced: Effect                         = null;
+        effectFill: Effect                                  = null;
+
+        borderVB: WebGLBuffer                                 = null;
+        borderIB: WebGLBuffer                                 = null;
+        borderIndicesCount: number                            = 0;
+        instancingBorderAttributes: InstancingAttributeInfo[] = null;
+        effectBorderInstanced: Effect                         = null;
+        effectBorder: Effect                                  = null;
+
+        constructor(engine: Engine, modelKey: string) {
+            super(engine, modelKey);
+        }
+
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
+                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+
+            let canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+
+            let depthFunction = 0;
+            if (this.effectFill && this.effectBorder) {
+                depthFunction = engine.getDepthFunction();
+                engine.setDepthFunctionToLessOrEqual();
+            }
+
+            let curAlphaMode = engine.getAlphaMode();
+
+            if (this.effectFill) {
+                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_FILLPARTID.toString());
+                let pid = context.groupInfoPartData[partIndex];
+
+                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+                }
+
+                let effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
+
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingFillAttributes) {
+                        this.instancingFillAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_FILLPARTID, effect);
+                    }
+
+                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
+                    engine.draw(true, 0, this.fillIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                } else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.fillIndicesCount);                        
+                    }
+                }
+            }
+
+            if (this.effectBorder) {
+                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_BORDERPARTID.toString());
+                let pid = context.groupInfoPartData[partIndex];
+
+                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+                }
+
+                let effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
+
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingBorderAttributes) {
+                        this.instancingBorderAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_BORDERPARTID, effect);
+                    }
+
+                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
+                    engine.draw(true, 0, this.borderIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                } else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.borderIndicesCount);
+                    }
+                }
+            }
+
+            engine.setAlphaMode(curAlphaMode, true);
+
+            if (this.effectFill && this.effectBorder) {
+                engine.setDepthFunction(depthFunction);
+            }
+            return true;
+        }
+
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.fillVB) {
+                this._engine._releaseBuffer(this.fillVB);
+                this.fillVB = null;
+            }
+
+            if (this.fillIB) {
+                this._engine._releaseBuffer(this.fillIB);
+                this.fillIB = null;
+            }
+
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+
+            if (this.borderVB) {
+                this._engine._releaseBuffer(this.borderVB);
+                this.borderVB = null;
+            }
+
+            if (this.borderIB) {
+                this._engine._releaseBuffer(this.borderIB);
+                this.borderIB = null;
+            }
+
+            return true;
+        }
+    }
+
+    export class Ellipse2DInstanceData extends Shape2DInstanceData {
+        constructor(partId: number) {
+            super(partId, 1);
+        }
+
+        @instanceData()
+        get properties(): Vector3 {
+            return null;
+        }
+        set properties(value: Vector3) {
+        }
+    }
+
+    @className("Ellipse2D")
+    /**
+     * Ellipse Primitive class
+     */
+    export class Ellipse2D extends Shape2D {
+
+        public static acutalSizeProperty: Prim2DPropInfo;
+        public static subdivisionsProperty: Prim2DPropInfo;
+
+        @instanceLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 1, pi => Ellipse2D.acutalSizeProperty = pi, false, true)
+        /**
+         * Get/Set the size of the ellipse
+         */
+        public get actualSize(): Size {
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+            return this.size;
+        }
+
+        public set actualSize(value: Size) {
+            this._actualSize = value;
+        }
+
+        @modelLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 2, pi => Ellipse2D.subdivisionsProperty = pi)
+        /**
+         * Get/set the number of subdivisions used to draw the ellipsis. Default is 64.
+         */
+        public get subdivisions(): number {
+            return this._subdivisions;
+        }
+
+        public set subdivisions(value: number) {
+            this._subdivisions = value;
+        }
+
+        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
+            let w = this.size.width / 2;
+            let h = this.size.height / 2;
+            let x = intersectInfo._localPickPosition.x-w;
+            let y = intersectInfo._localPickPosition.y-h;
+            return ((x * x) / (w * w) + (y * y) / (h * h)) <= 1;
+        }
+
+        protected updateLevelBoundingInfo() {
+            BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        }
+
+        /**
+         * Create an Ellipse 2D Shape primitive
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children 
+         * - id: a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - size: the size of the group. Alternatively the width and height properties can be set. Default will be [10;10].
+         * - subdivision: the number of subdivision to create the ellipse perimeter, default is 64.
+         * - fill: the brush used to draw the fill content of the ellipse, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - border: the brush used to draw the border of the ellipse, you can set null to draw nothing (but you will have to set a fill brush), default is null. can be a string value (see Canvas2D.GetBrushFromString)
+         * - borderThickness: the thickness of the drawn border, default is 1.
+         * - isVisible: true if the group must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        constructor(settings?: {
+
+            parent                ?: Prim2DBase, 
+            children              ?: Array<Prim2DBase>,
+            id                    ?: string,
+            position              ?: Vector2,
+            x                     ?: number,
+            y                     ?: number,
+            rotation              ?: number,
+            scale                 ?: number,
+            scaleX                ?: number,
+            scaleY                ?: number,
+            dontInheritParentScale?: boolean,
+            opacity               ?: number,
+            zOrder                ?: number, 
+            origin                ?: Vector2,
+            size                  ?: Size,
+            width                 ?: number,
+            height                ?: number,
+            subdivisions          ?: number,
+            fill                  ?: IBrush2D | string,
+            border                ?: IBrush2D | string,
+            borderThickness       ?: number,
+            isVisible             ?: boolean,
+            isPickable            ?: boolean,
+            isContainer           ?: boolean,
+            childrenFlatZOrder    ?: boolean,
+            marginTop             ?: number | string,
+            marginLeft            ?: number | string,
+            marginRight           ?: number | string,
+            marginBottom          ?: number | string,
+            margin                ?: number | string,
+            marginHAlignment      ?: number,
+            marginVAlignment      ?: number,
+            marginAlignment       ?: string,
+            paddingTop            ?: number | string,
+            paddingLeft           ?: number | string,
+            paddingRight          ?: number | string,
+            paddingBottom         ?: number | string,
+            padding               ?: string,
+        }) {
+
+            // Avoid checking every time if the object exists
+            if (settings == null) {
+                settings = {};
+            }
+
+            super(settings);
+
+            if (settings.size != null) {
+                this.size = settings.size;
+            }
+            else if (settings.width || settings.height) {
+                let size = new Size(settings.width, settings.height);
+                this.size = size;
+            }
+
+            let sub  = (settings.subdivisions == null) ? 64 : settings.subdivisions;
+            this.subdivisions = sub;
+        }
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            let renderCache = new Ellipse2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+            let renderCache = <Ellipse2DRenderCache>modelRenderCache;
+            let engine = this.owner.engine;
+
+            // Need to create WebGL resources for fill part?
+            if (this.fill) {
+                let vbSize = this.subdivisions + 1;
+                let vb = new Float32Array(vbSize);
+                for (let i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.fillVB = engine.createVertexBuffer(vb);
+
+                let triCount = vbSize - 1;
+                let ib = new Float32Array(triCount * 3);
+                for (let i = 0; i < triCount; i++) {
+                    ib[i * 3 + 0] = 0;
+                    ib[i * 3 + 2] = i + 1;
+                    ib[i * 3 + 1] = i + 2;
+                }
+                ib[triCount * 3 - 2] = 1;
+
+                renderCache.fillIB = engine.createIndexBuffer(ib);
+                renderCache.fillIndicesCount = triCount * 3;
+
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectFillInstanced = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
+                renderCache.effectFill = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+
+            // Need to create WebGL resource for border part?
+            if (this.border) {
+                let vbSize = this.subdivisions * 2;
+                let vb = new Float32Array(vbSize);
+                for (let i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.borderVB = engine.createVertexBuffer(vb);
+
+                let triCount = vbSize;
+                let rs = triCount / 2;
+                let ib = new Float32Array(triCount * 3);
+                for (let i = 0; i < rs; i++) {
+                    let r0 = i;
+                    let r1 = (i + 1) % rs;
+
+                    ib[i * 6 + 0] = rs + r1;
+                    ib[i * 6 + 1] = rs + r0;
+                    ib[i * 6 + 2] = r0;
+
+                    ib[i * 6 + 3] = r1;
+                    ib[i * 6 + 4] = rs + r1;
+                    ib[i * 6 + 5] = r0;
+                }
+
+                renderCache.borderIB = engine.createIndexBuffer(ib);
+                renderCache.borderIndicesCount = (triCount* 3);
+
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectBorderInstanced = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
+                renderCache.effectBorder = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+
+            return renderCache;
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            var res = new Array<InstanceDataBase>();
+            if (this.border) {
+                res.push(new Ellipse2DInstanceData(Shape2D.SHAPE2D_BORDERPARTID));
+            }
+            if (this.fill) {
+                res.push(new Ellipse2DInstanceData(Shape2D.SHAPE2D_FILLPARTID));
+            }
+            return res;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+            if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                let d = <Ellipse2DInstanceData>part;
+                let size = this.actualSize;
+                let s = this.actualScale;
+                d.properties = new Vector3(size.width * s.x, size.height * s.y, this.subdivisions);
+            }
+            else if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
+                let d = <Ellipse2DInstanceData>part;
+                let size = this.actualSize;
+                let s = this.actualScale;
+                d.properties = new Vector3(size.width * s.x, size.height * s.y, this.subdivisions);
+            }
+            return true;
+        }
+
+        private _subdivisions: number;
+    }
+}

canvas2D/src/babylon.modelRenderCache.js

@@ -0,0 +1,321 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var BABYLON;
+(function (BABYLON) {
+    var GroupInstanceInfo = (function () {
+        function GroupInstanceInfo(owner, mrc, partCount) {
+            this._partCount = partCount;
+            this.owner = owner;
+            this.modelRenderCache = mrc;
+            this.modelRenderCache.addRef();
+            this.partIndexFromId = new BABYLON.StringDictionary();
+            this._usedShaderCategories = new Array(partCount);
+            this._strides = new Array(partCount);
+            this._opaqueData = null;
+            this._alphaTestData = null;
+            this._transparentData = null;
+            this.opaqueDirty = this.alphaTestDirty = this.transparentDirty = this.transparentOrderDirty = false;
+        }
+        GroupInstanceInfo.prototype.dispose = function () {
+            if (this._isDisposed) {
+                return false;
+            }
+            if (this.modelRenderCache) {
+                this.modelRenderCache.dispose();
+                this.modelRenderCache = null;
+            }
+            var engine = this.owner.owner.engine;
+            if (this._opaqueData) {
+                this._opaqueData.forEach(function (d) { return d.dispose(engine); });
+                this._opaqueData = null;
+            }
+            if (this._alphaTestData) {
+                this._alphaTestData.forEach(function (d) { return d.dispose(engine); });
+                this._alphaTestData = null;
+            }
+            if (this._transparentData) {
+                this._transparentData.forEach(function (d) { return d.dispose(engine); });
+                this._transparentData = null;
+            }
+            this.partIndexFromId = null;
+            this._isDisposed = true;
+            return true;
+        };
+        Object.defineProperty(GroupInstanceInfo.prototype, "hasOpaqueData", {
+            get: function () {
+                return this._opaqueData != null;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "hasAlphaTestData", {
+            get: function () {
+                return this._alphaTestData != null;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "hasTransparentData", {
+            get: function () {
+                return this._transparentData != null;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "opaqueData", {
+            get: function () {
+                if (!this._opaqueData) {
+                    this._opaqueData = new Array(this._partCount);
+                    for (var i = 0; i < this._partCount; i++) {
+                        this._opaqueData[i] = new GroupInfoPartData(this._strides[i]);
+                    }
+                }
+                return this._opaqueData;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "alphaTestData", {
+            get: function () {
+                if (!this._alphaTestData) {
+                    this._alphaTestData = new Array(this._partCount);
+                    for (var i = 0; i < this._partCount; i++) {
+                        this._alphaTestData[i] = new GroupInfoPartData(this._strides[i]);
+                    }
+                }
+                return this._alphaTestData;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "transparentData", {
+            get: function () {
+                if (!this._transparentData) {
+                    this._transparentData = new Array(this._partCount);
+                    for (var i = 0; i < this._partCount; i++) {
+                        var zoff = this.modelRenderCache._partData[i]._zBiasOffset;
+                        this._transparentData[i] = new TransparentGroupInfoPartData(this._strides[i], zoff);
+                    }
+                }
+                return this._transparentData;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        GroupInstanceInfo.prototype.sortTransparentData = function () {
+            if (!this.transparentOrderDirty) {
+                return;
+            }
+            for (var i = 0; i < this._transparentData.length; i++) {
+                var td = this._transparentData[i];
+                td._partData.sort();
+            }
+            this.transparentOrderDirty = false;
+        };
+        Object.defineProperty(GroupInstanceInfo.prototype, "usedShaderCategories", {
+            get: function () {
+                return this._usedShaderCategories;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(GroupInstanceInfo.prototype, "strides", {
+            get: function () {
+                return this._strides;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return GroupInstanceInfo;
+    }());
+    BABYLON.GroupInstanceInfo = GroupInstanceInfo;
+    var TransparentSegment = (function () {
+        function TransparentSegment() {
+            this.groupInsanceInfo = null;
+            this.startZ = 0;
+            this.endZ = 0;
+            this.startDataIndex = BABYLON.Prim2DBase._bigInt;
+            this.endDataIndex = 0;
+            this.partBuffers = null;
+        }
+        TransparentSegment.prototype.dispose = function (engine) {
+            if (this.partBuffers) {
+                this.partBuffers.forEach(function (b) { return engine._releaseBuffer(b); });
+                this.partBuffers.splice(0);
+                this.partBuffers = null;
+            }
+        };
+        return TransparentSegment;
+    }());
+    BABYLON.TransparentSegment = TransparentSegment;
+    var GroupInfoPartData = (function () {
+        function GroupInfoPartData(stride) {
+            this._partData = null;
+            this._partBuffer = null;
+            this._partBufferSize = 0;
+            this._partData = new BABYLON.DynamicFloatArray(stride / 4, 50);
+            this._isDisposed = false;
+        }
+        GroupInfoPartData.prototype.dispose = function (engine) {
+            if (this._isDisposed) {
+                return false;
+            }
+            if (this._partBuffer) {
+                engine._releaseBuffer(this._partBuffer);
+                this._partBuffer = null;
+            }
+            this._partData = null;
+            this._isDisposed = true;
+        };
+        return GroupInfoPartData;
+    }());
+    BABYLON.GroupInfoPartData = GroupInfoPartData;
+    var TransparentGroupInfoPartData = (function (_super) {
+        __extends(TransparentGroupInfoPartData, _super);
+        function TransparentGroupInfoPartData(stride, zoff) {
+            _super.call(this, stride);
+            this._partData.compareValueOffset = zoff;
+            this._partData.sortingAscending = false;
+        }
+        return TransparentGroupInfoPartData;
+    }(GroupInfoPartData));
+    BABYLON.TransparentGroupInfoPartData = TransparentGroupInfoPartData;
+    var ModelRenderCache = (function () {
+        function ModelRenderCache(engine, modelKey) {
+            this._engine = engine;
+            this._modelKey = modelKey;
+            this._nextKey = 1;
+            this._refCounter = 1;
+            this._partData = null;
+        }
+        ModelRenderCache.prototype.dispose = function () {
+            if (--this._refCounter !== 0) {
+                return false;
+            }
+            // Remove the Model Render Cache from the global dictionary
+            var edata = this._engine.getExternalData("__BJSCANVAS2D__");
+            if (edata) {
+                edata.DisposeModelRenderCache(this);
+            }
+            return true;
+        };
+        Object.defineProperty(ModelRenderCache.prototype, "isDisposed", {
+            get: function () {
+                return this._refCounter <= 0;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ModelRenderCache.prototype.addRef = function () {
+            return ++this._refCounter;
+        };
+        Object.defineProperty(ModelRenderCache.prototype, "modelKey", {
+            get: function () {
+                return this._modelKey;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Render the model instances
+         * @param instanceInfo
+         * @param context
+         * @return must return true is the rendering succeed, false if the rendering couldn't be done (asset's not yet ready, like Effect)
+         */
+        ModelRenderCache.prototype.render = function (instanceInfo, context) {
+            return true;
+        };
+        ModelRenderCache.prototype.getPartIndexFromId = function (partId) {
+            for (var i = 0; i < this._partData.length; i++) {
+                if (this._partData[i]._partId === partId) {
+                    return i;
+                }
+            }
+            return null;
+        };
+        ModelRenderCache.prototype.loadInstancingAttributes = function (partId, effect) {
+            var i = this.getPartIndexFromId(partId);
+            if (i === null) {
+                return null;
+            }
+            var ci = this._partsClassInfo[i];
+            var categories = this._partData[i]._partUsedCategories;
+            var res = ci.classContent.getInstancingAttributeInfos(effect, categories);
+            return res;
+        };
+        ModelRenderCache.prototype.setupUniforms = function (effect, partIndex, data, elementCount) {
+            var pd = this._partData[partIndex];
+            var offset = (pd._partDataStride / 4) * elementCount;
+            var pci = this._partsClassInfo[partIndex];
+            var self = this;
+            pci.fullContent.forEach(function (k, v) {
+                if (!v.category || pd._partUsedCategories.indexOf(v.category) !== -1) {
+                    switch (v.dataType) {
+                        case 4 /* float */:
+                            {
+                                var attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                                effect.setFloat(v.attributeName, data.buffer[offset + attribOffset]);
+                                break;
+                            }
+                        case 0 /* Vector2 */:
+                            {
+                                var attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                                ModelRenderCache.v2.x = data.buffer[offset + attribOffset + 0];
+                                ModelRenderCache.v2.y = data.buffer[offset + attribOffset + 1];
+                                effect.setVector2(v.attributeName, ModelRenderCache.v2);
+                                break;
+                            }
+                        case 5 /* Color3 */:
+                        case 1 /* Vector3 */:
+                            {
+                                var attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                                ModelRenderCache.v3.x = data.buffer[offset + attribOffset + 0];
+                                ModelRenderCache.v3.y = data.buffer[offset + attribOffset + 1];
+                                ModelRenderCache.v3.z = data.buffer[offset + attribOffset + 2];
+                                effect.setVector3(v.attributeName, ModelRenderCache.v3);
+                                break;
+                            }
+                        case 6 /* Color4 */:
+                        case 2 /* Vector4 */:
+                            {
+                                var attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                                ModelRenderCache.v4.x = data.buffer[offset + attribOffset + 0];
+                                ModelRenderCache.v4.y = data.buffer[offset + attribOffset + 1];
+                                ModelRenderCache.v4.z = data.buffer[offset + attribOffset + 2];
+                                ModelRenderCache.v4.w = data.buffer[offset + attribOffset + 3];
+                                effect.setVector4(v.attributeName, ModelRenderCache.v4);
+                                break;
+                            }
+                        default:
+                    }
+                }
+            });
+        };
+        //setupUniformsLocation(effect: Effect, uniforms: string[], partId: number) {
+        //    let i = this.getPartIndexFromId(partId);
+        //    if (i === null) {
+        //        return null;
+        //    }
+        //    let pci = this._partsClassInfo[i];
+        //    pci.fullContent.forEach((k, v) => {
+        //        if (uniforms.indexOf(v.attributeName) !== -1) {
+        //            v.uniformLocation = effect.getUniform(v.attributeName);
+        //        }
+        //    });
+        //}
+        ModelRenderCache.v2 = BABYLON.Vector2.Zero();
+        ModelRenderCache.v3 = BABYLON.Vector3.Zero();
+        ModelRenderCache.v4 = BABYLON.Vector4.Zero();
+        return ModelRenderCache;
+    }());
+    BABYLON.ModelRenderCache = ModelRenderCache;
+    var ModelRenderCachePartData = (function () {
+        function ModelRenderCachePartData() {
+        }
+        return ModelRenderCachePartData;
+    }());
+    BABYLON.ModelRenderCachePartData = ModelRenderCachePartData;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.modelRenderCache.ts

@@ -0,0 +1,350 @@
+module BABYLON {
+    export const enum ShaderDataType {
+        Vector2, Vector3, Vector4, Matrix, float, Color3, Color4, Size
+    }
+
+    export class GroupInstanceInfo {
+        constructor(owner: Group2D, mrc: ModelRenderCache, partCount: number) {
+            this._partCount = partCount;
+            this.owner = owner;
+            this.modelRenderCache = mrc;
+            this.modelRenderCache.addRef();
+            this.partIndexFromId = new StringDictionary<number>();
+            this._usedShaderCategories = new Array<string>(partCount);
+            this._strides = new Array<number>(partCount);
+            this._opaqueData = null;
+            this._alphaTestData = null;
+            this._transparentData = null;
+            this.opaqueDirty = this.alphaTestDirty = this.transparentDirty = this.transparentOrderDirty = false;
+        }
+
+        public dispose(): boolean {
+            if (this._isDisposed) {
+                return false;
+            }
+
+            if (this.modelRenderCache) {
+                this.modelRenderCache.dispose();
+                this.modelRenderCache = null;
+            }
+
+            let engine = this.owner.owner.engine;
+
+            if (this._opaqueData) {
+                this._opaqueData.forEach(d => d.dispose(engine));
+                this._opaqueData = null;
+            }
+
+            if (this._alphaTestData) {
+                this._alphaTestData.forEach(d => d.dispose(engine));
+                this._alphaTestData = null;
+            }
+
+            if (this._transparentData) {
+                this._transparentData.forEach(d => d.dispose(engine));
+                this._transparentData = null;
+            }
+
+            this.partIndexFromId = null;
+            this._isDisposed = true;
+            return true;
+        }
+
+        private _isDisposed: boolean;
+        owner: Group2D;
+
+        modelRenderCache: ModelRenderCache;
+        partIndexFromId: StringDictionary<number>;
+
+        get hasOpaqueData(): boolean {
+            return this._opaqueData != null;
+        }
+
+        get hasAlphaTestData(): boolean {
+            return this._alphaTestData != null;
+        }
+
+        get hasTransparentData(): boolean {
+            return this._transparentData != null;
+        }
+
+        opaqueDirty: boolean;
+        get opaqueData(): GroupInfoPartData[] {
+            if (!this._opaqueData) {
+                this._opaqueData = new Array<GroupInfoPartData>(this._partCount);
+                for (let i = 0; i < this._partCount; i++) {
+                    this._opaqueData[i] = new GroupInfoPartData(this._strides[i]);
+                }
+            }
+            return this._opaqueData;
+        }
+
+        alphaTestDirty: boolean;
+        get alphaTestData(): GroupInfoPartData[] {
+            if (!this._alphaTestData) {
+                this._alphaTestData = new Array<GroupInfoPartData>(this._partCount);
+                for (let i = 0; i < this._partCount; i++) {
+                    this._alphaTestData[i] = new GroupInfoPartData(this._strides[i]);
+                }
+            }
+            return this._alphaTestData;
+        }
+
+        transparentOrderDirty: boolean;
+        transparentDirty: boolean;
+        get transparentData(): TransparentGroupInfoPartData[] {
+            if (!this._transparentData) {
+                this._transparentData = new Array<TransparentGroupInfoPartData>(this._partCount);
+                for (let i = 0; i < this._partCount; i++) {
+                    let zoff = this.modelRenderCache._partData[i]._zBiasOffset;
+                    this._transparentData[i] = new TransparentGroupInfoPartData(this._strides[i], zoff);
+                }
+            }
+            return this._transparentData;
+        }
+
+        sortTransparentData() {
+            if (!this.transparentOrderDirty) {
+                return;
+            }
+
+            for (let i = 0; i < this._transparentData.length; i++) {
+                let td = this._transparentData[i];
+                td._partData.sort();
+
+            }
+
+            this.transparentOrderDirty = false;
+        }
+
+        get usedShaderCategories(): string[] {
+            return this._usedShaderCategories;
+        }
+
+        get strides(): number[] {
+            return this._strides;
+        }
+
+        private _partCount: number;
+        private _strides: number[];
+        private _usedShaderCategories: string[];
+        private _opaqueData: GroupInfoPartData[];
+        private _alphaTestData: GroupInfoPartData[];
+        private _transparentData: TransparentGroupInfoPartData[];
+    }
+
+    export class TransparentSegment {
+        constructor() {
+            this.groupInsanceInfo = null;
+            this.startZ = 0;
+            this.endZ = 0;
+            this.startDataIndex = Prim2DBase._bigInt;
+            this.endDataIndex = 0;
+            this.partBuffers = null;
+        }
+
+        dispose(engine: Engine) {
+            if (this.partBuffers) {
+                this.partBuffers.forEach(b => engine._releaseBuffer(b));
+                this.partBuffers.splice(0);
+                this.partBuffers = null;
+            }
+        }
+
+        groupInsanceInfo: GroupInstanceInfo;
+        startZ: number;
+        endZ: number;
+        startDataIndex: number;
+        endDataIndex: number;
+        partBuffers: WebGLBuffer[];
+    }
+
+    export class GroupInfoPartData {
+        _partData: DynamicFloatArray = null;
+        _partBuffer: WebGLBuffer     = null;
+        _partBufferSize: number      = 0;
+
+        constructor(stride: number) {
+            this._partData = new DynamicFloatArray(stride/4, 50);
+            this._isDisposed = false;
+        }
+
+        public dispose(engine: Engine): boolean {
+            if (this._isDisposed) {
+                return false;
+            }
+
+            if (this._partBuffer) {
+                engine._releaseBuffer(this._partBuffer);
+                this._partBuffer = null;
+            }
+
+            this._partData = null;
+
+            this._isDisposed = true;
+        }
+
+        private _isDisposed: boolean;        
+    }
+
+    export class TransparentGroupInfoPartData extends GroupInfoPartData {
+        constructor(stride: number, zoff: number) {
+            super(stride);
+            this._partData.compareValueOffset = zoff;
+            this._partData.sortingAscending = false;
+        }
+        
+    }
+
+    export class ModelRenderCache {
+        constructor(engine: Engine, modelKey: string) {
+            this._engine = engine;
+            this._modelKey = modelKey;
+            this._nextKey = 1;
+            this._refCounter = 1;
+            this._partData = null;
+        }
+
+        public dispose(): boolean {
+            if (--this._refCounter !== 0) {
+                return false;
+            }
+
+            // Remove the Model Render Cache from the global dictionary
+            let edata = this._engine.getExternalData<Canvas2DEngineBoundData>("__BJSCANVAS2D__");
+            if (edata) {
+                edata.DisposeModelRenderCache(this);
+            }
+
+            return true;
+        }
+
+        public get isDisposed(): boolean {
+            return this._refCounter <= 0;
+        }
+
+        public addRef(): number {
+            return ++this._refCounter;
+        }
+
+        public get modelKey(): string {
+            return this._modelKey;
+        }
+
+        /**
+         * Render the model instances
+         * @param instanceInfo
+         * @param context
+         * @return must return true is the rendering succeed, false if the rendering couldn't be done (asset's not yet ready, like Effect)
+         */
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            return true;
+        }
+
+        protected getPartIndexFromId(partId: number) {
+            for (var i = 0; i < this._partData.length; i++) {
+                if (this._partData[i]._partId === partId) {
+                    return i;
+                }
+            }
+            return null;
+        }
+
+        protected loadInstancingAttributes(partId: number, effect: Effect): InstancingAttributeInfo[] {
+            let i = this.getPartIndexFromId(partId);
+            if (i === null) {
+                return null;
+            }
+
+            var ci = this._partsClassInfo[i];
+            var categories = this._partData[i]._partUsedCategories;
+            let res = ci.classContent.getInstancingAttributeInfos(effect, categories);
+
+            return res;
+        }
+
+        //setupUniformsLocation(effect: Effect, uniforms: string[], partId: number) {
+        //    let i = this.getPartIndexFromId(partId);
+        //    if (i === null) {
+        //        return null;
+        //    }
+
+        //    let pci = this._partsClassInfo[i];
+        //    pci.fullContent.forEach((k, v) => {
+        //        if (uniforms.indexOf(v.attributeName) !== -1) {
+        //            v.uniformLocation = effect.getUniform(v.attributeName);
+        //        }
+        //    });
+        //}
+
+        private static v2 = Vector2.Zero();
+        private static v3 = Vector3.Zero();
+        private static v4 = Vector4.Zero();
+
+        protected setupUniforms(effect: Effect, partIndex: number, data: DynamicFloatArray, elementCount: number) {
+            let pd = this._partData[partIndex];
+            let offset = (pd._partDataStride/4) * elementCount;
+            let pci = this._partsClassInfo[partIndex];
+
+            let self = this;
+            pci.fullContent.forEach((k, v) => {
+                if (!v.category || pd._partUsedCategories.indexOf(v.category) !== -1) {
+                    switch (v.dataType) {
+                        case ShaderDataType.float:
+                        {
+                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                            effect.setFloat(v.attributeName, data.buffer[offset + attribOffset]);
+                            break;
+                        }
+                        case ShaderDataType.Vector2:
+                        {
+                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                            ModelRenderCache.v2.x = data.buffer[offset + attribOffset + 0];
+                            ModelRenderCache.v2.y = data.buffer[offset + attribOffset + 1];
+                            effect.setVector2(v.attributeName, ModelRenderCache.v2);
+                            break;
+                        }
+                        case ShaderDataType.Color3:
+                        case ShaderDataType.Vector3:
+                        {
+                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                            ModelRenderCache.v3.x = data.buffer[offset + attribOffset + 0];
+                            ModelRenderCache.v3.y = data.buffer[offset + attribOffset + 1];
+                            ModelRenderCache.v3.z = data.buffer[offset + attribOffset + 2];
+                            effect.setVector3(v.attributeName, ModelRenderCache.v3);
+                            break;
+                        }
+                        case ShaderDataType.Color4:
+                        case ShaderDataType.Vector4:
+                        {
+                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
+                            ModelRenderCache.v4.x = data.buffer[offset + attribOffset + 0];
+                            ModelRenderCache.v4.y = data.buffer[offset + attribOffset + 1];
+                            ModelRenderCache.v4.z = data.buffer[offset + attribOffset + 2];
+                            ModelRenderCache.v4.w = data.buffer[offset + attribOffset + 3];
+                            effect.setVector4(v.attributeName, ModelRenderCache.v4);
+                            break;
+                        }
+                        default:
+                    }
+                }
+            });
+        }
+
+        protected _engine: Engine;
+        private _modelKey: string;
+        private _nextKey: number;
+        private _refCounter: number;
+
+        _partData: ModelRenderCachePartData[];
+        _partsClassInfo: ClassTreeInfo<InstanceClassInfo, InstancePropInfo>[];
+    }
+
+    export class ModelRenderCachePartData {
+        _partId: number;
+        _zBiasOffset: number;
+        _partDataStride: number;
+        _partUsedCategories: string[];
+        _partJoinedUsedCategories: string;
+    }
+}

canvas2D/src/babylon.rectangle2d.js

@@ -0,0 +1,453 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Rectangle2DRenderCache = (function (_super) {
+        __extends(Rectangle2DRenderCache, _super);
+        function Rectangle2DRenderCache(engine, modelKey) {
+            _super.call(this, engine, modelKey);
+            this.effectsReady = false;
+            this.fillVB = null;
+            this.fillIB = null;
+            this.fillIndicesCount = 0;
+            this.instancingFillAttributes = null;
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.borderVB = null;
+            this.borderIB = null;
+            this.borderIndicesCount = 0;
+            this.instancingBorderAttributes = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+        }
+        Rectangle2DRenderCache.prototype.render = function (instanceInfo, context) {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
+                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            var canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+            var depthFunction = 0;
+            if (this.effectFill && this.effectBorder) {
+                depthFunction = engine.getDepthFunction();
+                engine.setDepthFunctionToLessOrEqual();
+            }
+            var curAlphaMode = engine.getAlphaMode();
+            if (this.effectFill) {
+                var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_FILLPARTID.toString());
+                var pid = context.groupInfoPartData[partIndex];
+                if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+                }
+                var effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingFillAttributes) {
+                        this.instancingFillAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_FILLPARTID, effect);
+                    }
+                    var glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
+                    engine.draw(true, 0, this.fillIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                }
+                else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.fillIndicesCount);
+                    }
+                }
+            }
+            if (this.effectBorder) {
+                var partIndex = instanceInfo.partIndexFromId.get(BABYLON.Shape2D.SHAPE2D_BORDERPARTID.toString());
+                var pid = context.groupInfoPartData[partIndex];
+                if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+                }
+                var effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingBorderAttributes) {
+                        this.instancingBorderAttributes = this.loadInstancingAttributes(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, effect);
+                    }
+                    var glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
+                    engine.draw(true, 0, this.borderIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                }
+                else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.borderIndicesCount);
+                    }
+                }
+            }
+            engine.setAlphaMode(curAlphaMode, true);
+            if (this.effectFill && this.effectBorder) {
+                engine.setDepthFunction(depthFunction);
+            }
+            return true;
+        };
+        Rectangle2DRenderCache.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.fillVB) {
+                this._engine._releaseBuffer(this.fillVB);
+                this.fillVB = null;
+            }
+            if (this.fillIB) {
+                this._engine._releaseBuffer(this.fillIB);
+                this.fillIB = null;
+            }
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+            if (this.borderVB) {
+                this._engine._releaseBuffer(this.borderVB);
+                this.borderVB = null;
+            }
+            if (this.borderIB) {
+                this._engine._releaseBuffer(this.borderIB);
+                this.borderIB = null;
+            }
+            return true;
+        };
+        return Rectangle2DRenderCache;
+    }(BABYLON.ModelRenderCache));
+    BABYLON.Rectangle2DRenderCache = Rectangle2DRenderCache;
+    var Rectangle2DInstanceData = (function (_super) {
+        __extends(Rectangle2DInstanceData, _super);
+        function Rectangle2DInstanceData(partId) {
+            _super.call(this, partId, 1);
+        }
+        Object.defineProperty(Rectangle2DInstanceData.prototype, "properties", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData()
+        ], Rectangle2DInstanceData.prototype, "properties", null);
+        return Rectangle2DInstanceData;
+    }(BABYLON.Shape2DInstanceData));
+    BABYLON.Rectangle2DInstanceData = Rectangle2DInstanceData;
+    var Rectangle2D = (function (_super) {
+        __extends(Rectangle2D, _super);
+        /**
+         * Create an Rectangle 2D Shape primitive. May be a sharp rectangle (with sharp corners), or a rounded one.
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y settings can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - size: the size of the group. Alternatively the width and height settings can be set. Default will be [10;10].
+         * - roundRadius: if the rectangle has rounded corner, set their radius, default is 0 (to get a sharp edges rectangle).
+         * - fill: the brush used to draw the fill content of the rectangle, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - border: the brush used to draw the border of the rectangle, you can set null to draw nothing (but you will have to set a fill brush), default is null. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - borderThickness: the thickness of the drawn border, default is 1.
+         * - isVisible: true if the primitive must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        function Rectangle2D(settings) {
+            // Avoid checking every time if the object exists
+            if (settings == null) {
+                settings = {};
+            }
+            _super.call(this, settings);
+            if (settings.size != null) {
+                this.size = settings.size;
+            }
+            else if (settings.width || settings.height) {
+                var size = new BABYLON.Size(settings.width, settings.height);
+                this.size = size;
+            }
+            //let size            = settings.size || (new Size((settings.width === null) ? null : (settings.width || 10), (settings.height === null) ? null : (settings.height || 10)));
+            var roundRadius = (settings.roundRadius == null) ? 0 : settings.roundRadius;
+            var borderThickness = (settings.borderThickness == null) ? 1 : settings.borderThickness;
+            //this.size            = size;
+            this.roundRadius = roundRadius;
+            this.borderThickness = borderThickness;
+        }
+        Object.defineProperty(Rectangle2D.prototype, "actualSize", {
+            get: function () {
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
+                return this.size;
+            },
+            set: function (value) {
+                this._actualSize = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Rectangle2D.prototype, "notRounded", {
+            get: function () {
+                return this._notRounded;
+            },
+            set: function (value) {
+                this._notRounded = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Rectangle2D.prototype, "roundRadius", {
+            get: function () {
+                return this._roundRadius;
+            },
+            set: function (value) {
+                this._roundRadius = value;
+                this.notRounded = value === 0;
+                this._positioningDirty();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Rectangle2D.prototype.levelIntersect = function (intersectInfo) {
+            // If we got there it mean the boundingInfo intersection succeed, if the rectangle has not roundRadius, it means it succeed!
+            if (this.notRounded) {
+                return true;
+            }
+            // If we got so far it means the bounding box at least passed, so we know it's inside the bounding rectangle, but it can be outside the roundedRectangle.
+            // The easiest way is to check if the point is inside on of the four corners area (a little square of roundRadius size at the four corners)
+            // If it's the case for one, check if the mouse is located in the quarter that we care about (the one who is visible) then finally make a distance check with the roundRadius radius to see if it's inside the circle quarter or outside.
+            // First let remove the origin out the equation, to have the rectangle with an origin at bottom/left
+            var size = this.size;
+            Rectangle2D._i0.x = intersectInfo._localPickPosition.x;
+            Rectangle2D._i0.y = intersectInfo._localPickPosition.y;
+            var rr = this.roundRadius;
+            var rrs = rr * rr;
+            // Check if the point is in the bottom/left quarter area
+            Rectangle2D._i1.x = rr;
+            Rectangle2D._i1.y = rr;
+            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+            // Check if the point is in the top/left quarter area
+            Rectangle2D._i1.x = rr;
+            Rectangle2D._i1.y = size.height - rr;
+            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+            // Check if the point is in the top/right quarter area
+            Rectangle2D._i1.x = size.width - rr;
+            Rectangle2D._i1.y = size.height - rr;
+            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+            // Check if the point is in the bottom/right quarter area
+            Rectangle2D._i1.x = size.width - rr;
+            Rectangle2D._i1.y = rr;
+            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+            // At any other locations the point is guarantied to be inside
+            return true;
+        };
+        Rectangle2D.prototype.updateLevelBoundingInfo = function () {
+            BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        };
+        Rectangle2D.prototype.createModelRenderCache = function (modelKey) {
+            var renderCache = new Rectangle2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        };
+        Rectangle2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+            var renderCache = modelRenderCache;
+            var engine = this.owner.engine;
+            // Need to create WebGL resources for fill part?
+            if (this.fill) {
+                var vbSize = ((this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4) + 1;
+                var vb = new Float32Array(vbSize);
+                for (var i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.fillVB = engine.createVertexBuffer(vb);
+                var triCount = vbSize - 1;
+                var ib = new Float32Array(triCount * 3);
+                for (var i = 0; i < triCount; i++) {
+                    ib[i * 3 + 0] = 0;
+                    ib[i * 3 + 2] = i + 1;
+                    ib[i * 3 + 1] = i + 2;
+                }
+                ib[triCount * 3 - 2] = 1;
+                renderCache.fillIB = engine.createIndexBuffer(ib);
+                renderCache.fillIndicesCount = triCount * 3;
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectFillInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
+                renderCache.effectFill = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+            // Need to create WebGL resource for border part?
+            if (this.border) {
+                var vbSize = (this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4 * 2;
+                var vb = new Float32Array(vbSize);
+                for (var i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.borderVB = engine.createVertexBuffer(vb);
+                var triCount = vbSize;
+                var rs = triCount / 2;
+                var ib = new Float32Array(triCount * 3);
+                for (var i = 0; i < rs; i++) {
+                    var r0 = i;
+                    var r1 = (i + 1) % rs;
+                    ib[i * 6 + 0] = rs + r1;
+                    ib[i * 6 + 1] = rs + r0;
+                    ib[i * 6 + 2] = r0;
+                    ib[i * 6 + 3] = r1;
+                    ib[i * 6 + 4] = rs + r1;
+                    ib[i * 6 + 5] = r0;
+                }
+                renderCache.borderIB = engine.createIndexBuffer(ib);
+                renderCache.borderIndicesCount = triCount * 3;
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                var ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectBorderInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(BABYLON.Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
+                renderCache.effectBorder = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+            return renderCache;
+        };
+        // We override this method because if there's a roundRadius set, we will reduce the initial Content Area to make sure the computed area won't intersect with the shape contour. The formula is simple: we shrink the incoming size by the amount of the roundRadius
+        Rectangle2D.prototype._getInitialContentAreaToRef = function (primSize, initialContentPosition, initialContentArea) {
+            // Fall back to default implementation if there's no round Radius
+            if (this._notRounded) {
+                _super.prototype._getInitialContentAreaToRef.call(this, primSize, initialContentPosition, initialContentArea);
+            }
+            else {
+                var rr = Math.round((this.roundRadius - (this.roundRadius / Math.sqrt(2))) * 1.3);
+                initialContentPosition.x = initialContentPosition.y = rr;
+                initialContentArea.width = Math.max(0, primSize.width - (rr * 2));
+                initialContentArea.height = Math.max(0, primSize.height - (rr * 2));
+            }
+        };
+        Rectangle2D.prototype._getActualSizeFromContentToRef = function (primSize, newPrimSize) {
+            // Fall back to default implementation if there's no round Radius
+            if (this._notRounded) {
+                _super.prototype._getActualSizeFromContentToRef.call(this, primSize, newPrimSize);
+            }
+            else {
+                var rr = Math.round((this.roundRadius - (this.roundRadius / Math.sqrt(2))) * 1.3);
+                newPrimSize.copyFrom(primSize);
+                newPrimSize.width += rr * 2;
+                newPrimSize.height += rr * 2;
+            }
+        };
+        Rectangle2D.prototype.createInstanceDataParts = function () {
+            var res = new Array();
+            if (this.border) {
+                res.push(new Rectangle2DInstanceData(BABYLON.Shape2D.SHAPE2D_BORDERPARTID));
+            }
+            if (this.fill) {
+                res.push(new Rectangle2DInstanceData(BABYLON.Shape2D.SHAPE2D_FILLPARTID));
+            }
+            return res;
+        };
+        Rectangle2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            if (part.id === BABYLON.Shape2D.SHAPE2D_BORDERPARTID) {
+                var d = part;
+                var size = this.actualSize;
+                var s = this.actualScale;
+                d.properties = new BABYLON.Vector3(size.width * s.x, size.height * s.y, this.roundRadius || 0);
+            }
+            else if (part.id === BABYLON.Shape2D.SHAPE2D_FILLPARTID) {
+                var d = part;
+                var size = this.actualSize;
+                var s = this.actualScale;
+                d.properties = new BABYLON.Vector3(size.width * s.x, size.height * s.y, this.roundRadius || 0);
+            }
+            return true;
+        };
+        Rectangle2D._i0 = BABYLON.Vector2.Zero();
+        Rectangle2D._i1 = BABYLON.Vector2.Zero();
+        Rectangle2D._i2 = BABYLON.Vector2.Zero();
+        Rectangle2D.roundSubdivisions = 16;
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 1, function (pi) { return Rectangle2D.actualSizeProperty = pi; }, false, true)
+        ], Rectangle2D.prototype, "actualSize", null);
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 2, function (pi) { return Rectangle2D.notRoundedProperty = pi; })
+        ], Rectangle2D.prototype, "notRounded", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.Shape2D.SHAPE2D_PROPCOUNT + 3, function (pi) { return Rectangle2D.roundRadiusProperty = pi; })
+        ], Rectangle2D.prototype, "roundRadius", null);
+        Rectangle2D = __decorate([
+            BABYLON.className("Rectangle2D")
+        ], Rectangle2D);
+        return Rectangle2D;
+    }(BABYLON.Shape2D));
+    BABYLON.Rectangle2D = Rectangle2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.rectangle2d.ts

@@ -0,0 +1,539 @@
+module BABYLON {
+    export class Rectangle2DRenderCache extends ModelRenderCache {
+        effectsReady: boolean                               = false;
+        fillVB: WebGLBuffer                                 = null;
+        fillIB: WebGLBuffer                                 = null;
+        fillIndicesCount: number                            = 0;
+        instancingFillAttributes: InstancingAttributeInfo[] = null;
+        effectFill: Effect                                  = null;
+        effectFillInstanced: Effect                         = null;
+
+        borderVB: WebGLBuffer                                 = null;
+        borderIB: WebGLBuffer                                 = null;
+        borderIndicesCount: number                            = 0;
+        instancingBorderAttributes: InstancingAttributeInfo[] = null;
+        effectBorder: Effect                                  = null;
+        effectBorderInstanced: Effect                         = null;
+
+        constructor(engine: Engine, modelKey: string) {
+            super(engine, modelKey);
+        }
+
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
+                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            let canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+
+            let depthFunction = 0;
+            if (this.effectFill && this.effectBorder) {
+                depthFunction = engine.getDepthFunction();
+                engine.setDepthFunctionToLessOrEqual();
+            }
+
+            var curAlphaMode = engine.getAlphaMode();
+
+            if (this.effectFill) {
+
+                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_FILLPARTID.toString());
+                let pid = context.groupInfoPartData[partIndex];
+
+                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+                }
+
+                let effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
+
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingFillAttributes) {
+                        this.instancingFillAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_FILLPARTID, effect);
+                    }
+
+                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
+                    engine.draw(true, 0, this.fillIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                } else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.fillIndicesCount);                        
+                    }
+                }
+            }
+
+            if (this.effectBorder) {
+                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_BORDERPARTID.toString());
+                let pid = context.groupInfoPartData[partIndex];
+
+                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+                }
+
+                let effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
+
+                engine.enableEffect(effect);
+                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
+                if (context.useInstancing) {
+                    if (!this.instancingBorderAttributes) {
+                        this.instancingBorderAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_BORDERPARTID, effect);
+                    }
+
+                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
+                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                    canvas._addDrawCallCount(1, context.renderMode);
+                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
+                    engine.draw(true, 0, this.borderIndicesCount, count);
+                    engine.unbindInstanceAttributes();
+                } else {
+                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                        this.setupUniforms(effect, partIndex, pid._partData, i);
+                        engine.draw(true, 0, this.borderIndicesCount);
+                    }
+                }
+            }
+
+            engine.setAlphaMode(curAlphaMode, true);
+
+            if (this.effectFill && this.effectBorder) {
+                engine.setDepthFunction(depthFunction);
+            }
+            return true;
+        }
+
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.fillVB) {
+                this._engine._releaseBuffer(this.fillVB);
+                this.fillVB = null;
+            }
+
+            if (this.fillIB) {
+                this._engine._releaseBuffer(this.fillIB);
+                this.fillIB = null;
+            }
+
+            this.effectFill = null;
+            this.effectFillInstanced = null;
+            this.effectBorder = null;
+            this.effectBorderInstanced = null;
+
+            if (this.borderVB) {
+                this._engine._releaseBuffer(this.borderVB);
+                this.borderVB = null;
+            }
+
+            if (this.borderIB) {
+                this._engine._releaseBuffer(this.borderIB);
+                this.borderIB = null;
+            }
+
+
+            return true;
+        }
+    }
+
+    export class Rectangle2DInstanceData extends Shape2DInstanceData {
+        constructor(partId: number) {
+            super(partId, 1);
+        }
+
+        @instanceData()
+        get properties(): Vector3 {
+            return null;
+        }
+        set properties(value: Vector3) {
+        }
+    }
+
+    @className("Rectangle2D")
+    /**
+     * The Rectangle Primitive type
+     */
+    export class Rectangle2D extends Shape2D {
+
+        public static actualSizeProperty: Prim2DPropInfo;
+        public static notRoundedProperty: Prim2DPropInfo;
+        public static roundRadiusProperty: Prim2DPropInfo;
+
+        @instanceLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 1, pi => Rectangle2D.actualSizeProperty = pi, false, true)
+        /**
+         * Get/set the rectangle size (width/height)
+         */
+        public get actualSize(): Size {
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+            return this.size;
+        }
+
+        public set actualSize(value: Size) {
+            this._actualSize = value;
+        }
+
+        @modelLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 2, pi => Rectangle2D.notRoundedProperty = pi)
+        /**
+         * Get if the rectangle is notRound (returns true) or rounded (returns false).
+         * Don't use the setter, it's for internal purpose only
+         */
+        public get notRounded(): boolean {
+            return this._notRounded;
+        }
+
+        public set notRounded(value: boolean) {
+            this._notRounded = value;
+        }
+
+        @instanceLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 3, pi => Rectangle2D.roundRadiusProperty = pi)
+        /**
+         * Get/set the round Radius, a value of 0 for a sharp edges rectangle, otherwise the value will be used as the diameter of the round to apply on corder. The Rectangle2D.notRounded property will be updated accordingly.
+         */
+        public get roundRadius(): number {
+            return this._roundRadius;
+        }
+
+        public set roundRadius(value: number) {
+            this._roundRadius = value;
+            this.notRounded = value === 0;
+            this._positioningDirty();
+        }
+
+        private static _i0 = Vector2.Zero();
+        private static _i1 = Vector2.Zero();
+        private static _i2 = Vector2.Zero();
+
+        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
+            // If we got there it mean the boundingInfo intersection succeed, if the rectangle has not roundRadius, it means it succeed!
+            if (this.notRounded) {
+                return true;
+            }
+
+            // If we got so far it means the bounding box at least passed, so we know it's inside the bounding rectangle, but it can be outside the roundedRectangle.
+            // The easiest way is to check if the point is inside on of the four corners area (a little square of roundRadius size at the four corners)
+            // If it's the case for one, check if the mouse is located in the quarter that we care about (the one who is visible) then finally make a distance check with the roundRadius radius to see if it's inside the circle quarter or outside.
+
+            // First let remove the origin out the equation, to have the rectangle with an origin at bottom/left
+            let size = this.size;
+            Rectangle2D._i0.x = intersectInfo._localPickPosition.x;
+            Rectangle2D._i0.y = intersectInfo._localPickPosition.y;
+
+            let rr = this.roundRadius;
+            let rrs = rr * rr;
+
+            // Check if the point is in the bottom/left quarter area
+            Rectangle2D._i1.x = rr;
+            Rectangle2D._i1.y = rr;
+            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+
+            // Check if the point is in the top/left quarter area
+            Rectangle2D._i1.x = rr;
+            Rectangle2D._i1.y = size.height - rr;
+            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+
+            // Check if the point is in the top/right quarter area
+            Rectangle2D._i1.x = size.width - rr;
+            Rectangle2D._i1.y = size.height - rr;
+            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+
+
+            // Check if the point is in the bottom/right quarter area
+            Rectangle2D._i1.x = size.width - rr;
+            Rectangle2D._i1.y = rr;
+            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
+                // Compute the intersection point in the quarter local space
+                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
+                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
+
+                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
+                return Rectangle2D._i2.lengthSquared() <= rrs;
+            }
+
+            // At any other locations the point is guarantied to be inside
+
+            return true;
+        }
+
+        protected updateLevelBoundingInfo() {
+            BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        }
+
+        /**
+         * Create an Rectangle 2D Shape primitive. May be a sharp rectangle (with sharp corners), or a rounded one.
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y settings can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - size: the size of the group. Alternatively the width and height settings can be set. Default will be [10;10].
+         * - roundRadius: if the rectangle has rounded corner, set their radius, default is 0 (to get a sharp edges rectangle).
+         * - fill: the brush used to draw the fill content of the rectangle, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - border: the brush used to draw the border of the rectangle, you can set null to draw nothing (but you will have to set a fill brush), default is null. can also be a string value (see Canvas2D.GetBrushFromString)
+         * - borderThickness: the thickness of the drawn border, default is 1.
+         * - isVisible: true if the primitive must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        constructor(settings      ?: {
+            parent                ?: Prim2DBase, 
+            children              ?: Array<Prim2DBase>,
+            id                    ?: string,
+            position              ?: Vector2,
+            x                     ?: number,
+            y                     ?: number,
+            rotation              ?: number,
+            scale                 ?: number,
+            scaleX                ?: number,
+            scaleY                ?: number,
+            dontInheritParentScale?: boolean,
+            opacity               ?: number,
+            zOrder                ?: number, 
+            origin                ?: Vector2,
+            size                  ?: Size,
+            width                 ?: number,
+            height                ?: number,
+            roundRadius           ?: number,
+            fill                  ?: IBrush2D | string,
+            border                ?: IBrush2D | string,
+            borderThickness       ?: number,
+            isVisible             ?: boolean,
+            isPickable            ?: boolean,
+            isContainer           ?: boolean,
+            childrenFlatZOrder    ?: boolean,
+            marginTop             ?: number | string,
+            marginLeft            ?: number | string,
+            marginRight           ?: number | string,
+            marginBottom          ?: number | string,
+            margin                ?: number | string,
+            marginHAlignment      ?: number,
+            marginVAlignment      ?: number,
+            marginAlignment       ?: string,
+            paddingTop            ?: number | string,
+            paddingLeft           ?: number | string,
+            paddingRight          ?: number | string,
+            paddingBottom         ?: number | string,
+            padding               ?: string,
+        }) {
+
+            // Avoid checking every time if the object exists
+            if (settings == null) {
+                settings = {};
+            }
+
+            super(settings);
+
+            if (settings.size != null) {
+                this.size = settings.size;
+            }
+            else if (settings.width || settings.height) {
+                let size = new Size(settings.width, settings.height);
+                this.size = size;
+            }
+
+            //let size            = settings.size || (new Size((settings.width === null) ? null : (settings.width || 10), (settings.height === null) ? null : (settings.height || 10)));
+            let roundRadius     = (settings.roundRadius == null) ? 0 : settings.roundRadius;
+            let borderThickness = (settings.borderThickness == null) ? 1 : settings.borderThickness;
+
+            //this.size            = size;
+            this.roundRadius     = roundRadius;
+            this.borderThickness = borderThickness;
+        }
+
+        public static roundSubdivisions = 16;
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            let renderCache = new Rectangle2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+            let renderCache = <Rectangle2DRenderCache>modelRenderCache;
+            let engine = this.owner.engine;
+
+            // Need to create WebGL resources for fill part?
+            if (this.fill) {
+                let vbSize = ((this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4) + 1;
+                let vb = new Float32Array(vbSize);
+                for (let i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.fillVB = engine.createVertexBuffer(vb);
+
+                let triCount = vbSize - 1;
+                let ib = new Float32Array(triCount * 3);
+                for (let i = 0; i < triCount; i++) {
+                    ib[i * 3 + 0] = 0;
+                    ib[i * 3 + 2] = i + 1;
+                    ib[i * 3 + 1] = i + 2;
+                }
+                ib[triCount * 3 - 2] = 1;
+
+                renderCache.fillIB = engine.createIndexBuffer(ib);
+                renderCache.fillIndicesCount = triCount * 3;
+
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectFillInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
+                renderCache.effectFill = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+
+            // Need to create WebGL resource for border part?
+            if (this.border) {
+                let vbSize = (this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4 * 2;
+                let vb = new Float32Array(vbSize);
+                for (let i = 0; i < vbSize; i++) {
+                    vb[i] = i;
+                }
+                renderCache.borderVB = engine.createVertexBuffer(vb);
+
+                let triCount = vbSize;
+                let rs = triCount / 2;
+                let ib = new Float32Array(triCount * 3);
+                for (let i = 0; i < rs; i++) {
+                    let r0 = i;
+                    let r1 = (i + 1) % rs;
+
+                    ib[i * 6 + 0] = rs + r1;
+                    ib[i * 6 + 1] = rs + r0;
+                    ib[i * 6 + 2] = r0;
+
+                    ib[i * 6 + 3] = r1;
+                    ib[i * 6 + 4] = rs + r1;
+                    ib[i * 6 + 5] = r0;
+                }
+
+                renderCache.borderIB = engine.createIndexBuffer(ib);
+                renderCache.borderIndicesCount = triCount * 3;
+
+                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
+                if (ei) {
+                    renderCache.effectBorderInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+                }
+
+                // Get the non instanced version
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
+                renderCache.effectBorder = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
+            }
+
+            return renderCache;
+        }
+
+        // We override this method because if there's a roundRadius set, we will reduce the initial Content Area to make sure the computed area won't intersect with the shape contour. The formula is simple: we shrink the incoming size by the amount of the roundRadius
+        protected _getInitialContentAreaToRef(primSize: Size, initialContentPosition: Vector2, initialContentArea: Size) {
+            // Fall back to default implementation if there's no round Radius
+            if (this._notRounded) {
+                super._getInitialContentAreaToRef(primSize, initialContentPosition, initialContentArea);
+            } else {
+                let rr = Math.round((this.roundRadius - (this.roundRadius/Math.sqrt(2))) * 1.3);
+                initialContentPosition.x = initialContentPosition.y = rr;
+                initialContentArea.width = Math.max(0, primSize.width - (rr * 2));
+                initialContentArea.height = Math.max(0, primSize.height - (rr * 2));
+            }
+        }
+
+        protected _getActualSizeFromContentToRef(primSize: Size, newPrimSize: Size) {
+            // Fall back to default implementation if there's no round Radius
+            if (this._notRounded) {
+                super._getActualSizeFromContentToRef(primSize, newPrimSize);
+            } else {
+                let rr = Math.round((this.roundRadius - (this.roundRadius / Math.sqrt(2))) * 1.3);
+                newPrimSize.copyFrom(primSize);
+                newPrimSize.width  += rr * 2;
+                newPrimSize.height += rr * 2;
+            }
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            var res = new Array<InstanceDataBase>();
+            if (this.border) {
+                res.push(new Rectangle2DInstanceData(Shape2D.SHAPE2D_BORDERPARTID));
+            }
+            if (this.fill) {
+                res.push(new Rectangle2DInstanceData(Shape2D.SHAPE2D_FILLPARTID));
+            }
+            return res;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+            if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                let d = <Rectangle2DInstanceData>part;
+                let size = this.actualSize;
+                let s = this.actualScale;
+                d.properties = new Vector3(size.width * s.x, size.height * s.y, this.roundRadius || 0);
+            }
+            else if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
+                let d = <Rectangle2DInstanceData>part;
+                let size = this.actualSize;
+                let s = this.actualScale;
+                d.properties = new Vector3(size.width * s.x, size.height * s.y, this.roundRadius || 0);
+            }
+            return true;
+        }
+
+        private _notRounded: boolean;
+        private _roundRadius: number;
+    }
+}

canvas2D/src/babylon.renderablePrim2d.js

@@ -0,0 +1,893 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var InstanceClassInfo = (function () {
+        function InstanceClassInfo(base) {
+            this._baseInfo = base;
+            this._nextOffset = new BABYLON.StringDictionary();
+            this._attributes = new Array();
+        }
+        InstanceClassInfo.prototype.mapProperty = function (propInfo, push) {
+            var curOff = this._nextOffset.getOrAdd(InstanceClassInfo._CurCategories, 0);
+            propInfo.instanceOffset.add(InstanceClassInfo._CurCategories, this._getBaseOffset(InstanceClassInfo._CurCategories) + curOff);
+            //console.log(`[${InstanceClassInfo._CurCategories}] New PropInfo. Category: ${propInfo.category}, Name: ${propInfo.attributeName}, Offset: ${propInfo.instanceOffset.get(InstanceClassInfo._CurCategories)}, Size: ${propInfo.size / 4}`);
+            this._nextOffset.set(InstanceClassInfo._CurCategories, curOff + (propInfo.size / 4));
+            if (push) {
+                this._attributes.push(propInfo);
+            }
+        };
+        InstanceClassInfo.prototype.getInstancingAttributeInfos = function (effect, categories) {
+            var catInline = ";" + categories.join(";") + ";";
+            var res = new Array();
+            var curInfo = this;
+            while (curInfo) {
+                for (var _i = 0, _a = curInfo._attributes; _i < _a.length; _i++) {
+                    var attrib = _a[_i];
+                    // Only map if there's no category assigned to the instance data or if there's a category and it's in the given list
+                    if (!attrib.category || categories.indexOf(attrib.category) !== -1) {
+                        var index = effect.getAttributeLocationByName(attrib.attributeName);
+                        var iai = new BABYLON.InstancingAttributeInfo();
+                        iai.index = index;
+                        iai.attributeSize = attrib.size / 4; // attrib.size is in byte and we need to store in "component" (i.e float is 1, vec3 is 3)
+                        iai.offset = attrib.instanceOffset.get(catInline) * 4; // attrib.instanceOffset is in float, iai.offset must be in bytes
+                        iai.attributeName = attrib.attributeName;
+                        res.push(iai);
+                    }
+                }
+                curInfo = curInfo._baseInfo;
+            }
+            return res;
+        };
+        InstanceClassInfo.prototype.getShaderAttributes = function (categories) {
+            var res = new Array();
+            var curInfo = this;
+            while (curInfo) {
+                for (var _i = 0, _a = curInfo._attributes; _i < _a.length; _i++) {
+                    var attrib = _a[_i];
+                    // Only map if there's no category assigned to the instance data or if there's a category and it's in the given list
+                    if (!attrib.category || categories.indexOf(attrib.category) !== -1) {
+                        res.push(attrib.attributeName);
+                    }
+                }
+                curInfo = curInfo._baseInfo;
+            }
+            return res;
+        };
+        InstanceClassInfo.prototype._getBaseOffset = function (categories) {
+            var curOffset = 0;
+            var curBase = this._baseInfo;
+            while (curBase) {
+                curOffset += curBase._nextOffset.getOrAdd(categories, 0);
+                curBase = curBase._baseInfo;
+            }
+            return curOffset;
+        };
+        return InstanceClassInfo;
+    }());
+    BABYLON.InstanceClassInfo = InstanceClassInfo;
+    var InstancePropInfo = (function () {
+        function InstancePropInfo() {
+            this.instanceOffset = new BABYLON.StringDictionary();
+        }
+        InstancePropInfo.prototype.setSize = function (val) {
+            if (val instanceof BABYLON.Vector2) {
+                this.size = 8;
+                this.dataType = 0 /* Vector2 */;
+                return;
+            }
+            if (val instanceof BABYLON.Vector3) {
+                this.size = 12;
+                this.dataType = 1 /* Vector3 */;
+                return;
+            }
+            if (val instanceof BABYLON.Vector4) {
+                this.size = 16;
+                this.dataType = 2 /* Vector4 */;
+                return;
+            }
+            if (val instanceof BABYLON.Matrix) {
+                throw new Error("Matrix type is not supported by WebGL Instance Buffer, you have to use four Vector4 properties instead");
+            }
+            if (typeof (val) === "number") {
+                this.size = 4;
+                this.dataType = 4 /* float */;
+                return;
+            }
+            if (val instanceof BABYLON.Color3) {
+                this.size = 12;
+                this.dataType = 5 /* Color3 */;
+                return;
+            }
+            if (val instanceof BABYLON.Color4) {
+                this.size = 16;
+                this.dataType = 6 /* Color4 */;
+                return;
+            }
+            if (val instanceof BABYLON.Size) {
+                this.size = 8;
+                this.dataType = 7 /* Size */;
+                return;
+            }
+            return;
+        };
+        InstancePropInfo.prototype.writeData = function (array, offset, val) {
+            switch (this.dataType) {
+                case 0 /* Vector2 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        break;
+                    }
+                case 1 /* Vector3 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        array[offset + 2] = v.z;
+                        break;
+                    }
+                case 2 /* Vector4 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        array[offset + 2] = v.z;
+                        array[offset + 3] = v.w;
+                        break;
+                    }
+                case 5 /* Color3 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.r;
+                        array[offset + 1] = v.g;
+                        array[offset + 2] = v.b;
+                        break;
+                    }
+                case 6 /* Color4 */:
+                    {
+                        var v = val;
+                        array[offset + 0] = v.r;
+                        array[offset + 1] = v.g;
+                        array[offset + 2] = v.b;
+                        array[offset + 3] = v.a;
+                        break;
+                    }
+                case 4 /* float */:
+                    {
+                        var v = val;
+                        array[offset] = v;
+                        break;
+                    }
+                case 3 /* Matrix */:
+                    {
+                        var v = val;
+                        for (var i = 0; i < 16; i++) {
+                            array[offset + i] = v.m[i];
+                        }
+                        break;
+                    }
+                case 7 /* Size */:
+                    {
+                        var s = val;
+                        array[offset + 0] = s.width;
+                        array[offset + 1] = s.height;
+                        break;
+                    }
+            }
+        };
+        return InstancePropInfo;
+    }());
+    BABYLON.InstancePropInfo = InstancePropInfo;
+    function instanceData(category, shaderAttributeName) {
+        return function (target, propName, descriptor) {
+            var dic = BABYLON.ClassTreeInfo.getOrRegister(target, function (base) { return new InstanceClassInfo(base); });
+            var node = dic.getLevelOf(target);
+            var instanceDataName = propName;
+            shaderAttributeName = shaderAttributeName || instanceDataName;
+            var info = node.levelContent.get(instanceDataName);
+            if (info) {
+                throw new Error("The ID " + instanceDataName + " is already taken by another instance data");
+            }
+            info = new InstancePropInfo();
+            info.attributeName = shaderAttributeName;
+            info.category = category || null;
+            if (info.category) {
+                info.delimitedCategory = ";" + info.category + ";";
+            }
+            node.levelContent.add(instanceDataName, info);
+            descriptor.get = function () {
+                return null;
+            };
+            descriptor.set = function (val) {
+                // Check that we're not trying to set a property that belongs to a category that is not allowed (current)
+                // Quit if it's the case, otherwise we could overwrite data somewhere...
+                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);
+                }
+                var obj = this;
+                if (obj.dataBuffer && obj.dataElements) {
+                    var offset = obj.dataElements[obj.curElement].offset + info.instanceOffset.get(InstanceClassInfo._CurCategories);
+                    info.writeData(obj.dataBuffer.buffer, offset, val);
+                }
+            };
+        };
+    }
+    BABYLON.instanceData = instanceData;
+    var InstanceDataBase = (function () {
+        function InstanceDataBase(partId, dataElementCount) {
+            this.id = partId;
+            this.curElement = 0;
+            this._dataElementCount = dataElementCount;
+            this.renderMode = 0;
+            this.arrayLengthChanged = false;
+        }
+        Object.defineProperty(InstanceDataBase.prototype, "zBias", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(InstanceDataBase.prototype, "transformX", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(InstanceDataBase.prototype, "transformY", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(InstanceDataBase.prototype, "opacity", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        InstanceDataBase.prototype.getClassTreeInfo = function () {
+            if (!this.typeInfo) {
+                this.typeInfo = BABYLON.ClassTreeInfo.get(Object.getPrototypeOf(this));
+            }
+            return this.typeInfo;
+        };
+        InstanceDataBase.prototype.allocElements = function () {
+            if (!this.dataBuffer || this.dataElements) {
+                return;
+            }
+            var res = new Array(this.dataElementCount);
+            for (var i = 0; i < this.dataElementCount; i++) {
+                res[i] = this.dataBuffer.allocElement();
+            }
+            this.dataElements = res;
+        };
+        InstanceDataBase.prototype.freeElements = function () {
+            if (!this.dataElements) {
+                return;
+            }
+            for (var _i = 0, _a = this.dataElements; _i < _a.length; _i++) {
+                var ei = _a[_i];
+                this.dataBuffer.freeElement(ei);
+            }
+            this.dataElements = null;
+        };
+        Object.defineProperty(InstanceDataBase.prototype, "dataElementCount", {
+            get: function () {
+                return this._dataElementCount;
+            },
+            set: function (value) {
+                if (value === this._dataElementCount) {
+                    return;
+                }
+                this.arrayLengthChanged = true;
+                this.freeElements();
+                this._dataElementCount = value;
+                this.allocElements();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            instanceData()
+        ], InstanceDataBase.prototype, "zBias", null);
+        __decorate([
+            instanceData()
+        ], InstanceDataBase.prototype, "transformX", null);
+        __decorate([
+            instanceData()
+        ], InstanceDataBase.prototype, "transformY", null);
+        __decorate([
+            instanceData()
+        ], InstanceDataBase.prototype, "opacity", null);
+        return InstanceDataBase;
+    }());
+    BABYLON.InstanceDataBase = InstanceDataBase;
+    var RenderablePrim2D = (function (_super) {
+        __extends(RenderablePrim2D, _super);
+        function RenderablePrim2D(settings) {
+            _super.call(this, settings);
+            this._transparentPrimitiveInfo = null;
+        }
+        Object.defineProperty(RenderablePrim2D.prototype, "isAlphaTest", {
+            get: function () {
+                return this._useTextureAlpha() || this._isPrimAlphaTest();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(RenderablePrim2D.prototype, "isTransparent", {
+            get: function () {
+                return (this.actualOpacity < 1) || this._shouldUseAlphaFromTexture() || this._isPrimTransparent();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(RenderablePrim2D.prototype, "renderMode", {
+            get: function () {
+                return this._renderMode;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Dispose the primitive and its resources, remove it from its parent
+         */
+        RenderablePrim2D.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.renderGroup) {
+                this.renderGroup._setCacheGroupDirty();
+            }
+            if (this._transparentPrimitiveInfo) {
+                this.renderGroup._renderableData.removeTransparentPrimitiveInfo(this._transparentPrimitiveInfo);
+                this._transparentPrimitiveInfo = null;
+            }
+            if (this._instanceDataParts) {
+                this._cleanupInstanceDataParts();
+            }
+            if (this._modelRenderCache) {
+                this._modelRenderCache.dispose();
+                this._modelRenderCache = null;
+            }
+            if (this._instanceDataParts) {
+                this._instanceDataParts.forEach(function (p) {
+                    p.freeElements();
+                });
+                this._instanceDataParts = null;
+            }
+            return true;
+        };
+        RenderablePrim2D.prototype._cleanupInstanceDataParts = function () {
+            var gii = null;
+            for (var _i = 0, _a = this._instanceDataParts; _i < _a.length; _i++) {
+                var part = _a[_i];
+                part.freeElements();
+                gii = part.groupInstanceInfo;
+            }
+            if (gii) {
+                var usedCount = 0;
+                if (gii.hasOpaqueData) {
+                    var od = gii.opaqueData[0];
+                    usedCount += od._partData.usedElementCount;
+                    gii.opaqueDirty = true;
+                }
+                if (gii.hasAlphaTestData) {
+                    var atd = gii.alphaTestData[0];
+                    usedCount += atd._partData.usedElementCount;
+                    gii.alphaTestDirty = true;
+                }
+                if (gii.hasTransparentData) {
+                    var td = gii.transparentData[0];
+                    usedCount += td._partData.usedElementCount;
+                    gii.transparentDirty = true;
+                }
+                if (usedCount === 0 && gii.modelRenderCache != null) {
+                    this.renderGroup._renderableData._renderGroupInstancesInfo.remove(gii.modelRenderCache.modelKey);
+                    gii.dispose();
+                }
+                if (this._modelRenderCache) {
+                    this._modelRenderCache.dispose();
+                    this._modelRenderCache = null;
+                }
+            }
+            this._instanceDataParts = null;
+        };
+        RenderablePrim2D.prototype._prepareRenderPre = function (context) {
+            _super.prototype._prepareRenderPre.call(this, context);
+            // If the model changed and we have already an instance, we must remove this instance from the obsolete model
+            if (this._isFlagSet(BABYLON.SmartPropertyPrim.flagModelDirty) && this._instanceDataParts) {
+                this._cleanupInstanceDataParts();
+            }
+            // Need to create the model?
+            var setupModelRenderCache = false;
+            if (!this._modelRenderCache || this._isFlagSet(BABYLON.SmartPropertyPrim.flagModelDirty)) {
+                setupModelRenderCache = this._createModelRenderCache();
+            }
+            var gii = null;
+            var newInstance = false;
+            // Need to create the instance data parts?
+            if (!this._instanceDataParts) {
+                // Yes, flag it for later, more processing will have to be done
+                newInstance = true;
+                gii = this._createModelDataParts();
+            }
+            // If the ModelRenderCache is brand new, now is the time to call the implementation's specific setup method to create the rendering resources
+            if (setupModelRenderCache) {
+                this.setupModelRenderCache(this._modelRenderCache);
+            }
+            // At this stage we have everything correctly initialized, ModelRenderCache is setup, Model Instance data are good too, they have allocated elements in the Instanced DynamicFloatArray.
+            // The last thing to do is check if the instanced related data must be updated because a InstanceLevel property had changed or the primitive visibility changed.
+            if (this._areSomeFlagsSet(BABYLON.SmartPropertyPrim.flagVisibilityChanged | BABYLON.SmartPropertyPrim.flagNeedRefresh) || context.forceRefreshPrimitive || newInstance || (this._instanceDirtyFlags !== 0) || (this._globalTransformProcessStep !== this._globalTransformStep) || this._mustUpdateInstance()) {
+                this._updateInstanceDataParts(gii);
+            }
+        };
+        RenderablePrim2D.prototype._createModelRenderCache = function () {
+            var _this = this;
+            var setupModelRenderCache = false;
+            if (this._modelRenderCache) {
+                this._modelRenderCache.dispose();
+            }
+            this._modelRenderCache = this.owner._engineData.GetOrAddModelCache(this.modelKey, function (key) {
+                var mrc = _this.createModelRenderCache(key);
+                setupModelRenderCache = true;
+                return mrc;
+            });
+            this._clearFlags(BABYLON.SmartPropertyPrim.flagModelDirty);
+            // if this is still false it means the MRC already exists, so we add a reference to it
+            if (!setupModelRenderCache) {
+                this._modelRenderCache.addRef();
+            }
+            return setupModelRenderCache;
+        };
+        RenderablePrim2D.prototype._createModelDataParts = function () {
+            var _this = this;
+            // Create the instance data parts of the primitive and store them
+            var parts = this.createInstanceDataParts();
+            this._instanceDataParts = parts;
+            // Check if the ModelRenderCache for this particular instance is also brand new, initialize it if it's the case
+            if (!this._modelRenderCache._partData) {
+                this._setupModelRenderCache(parts);
+            }
+            // The Rendering resources (Effect, VB, IB, Textures) are stored in the ModelRenderCache
+            // But it's the RenderGroup that will store all the Instanced related data to render all the primitive it owns.
+            // So for a given ModelKey we getOrAdd a GroupInstanceInfo that will store all these data
+            var gii = this.renderGroup._renderableData._renderGroupInstancesInfo.getOrAddWithFactory(this.modelKey, function (k) {
+                var res = new BABYLON.GroupInstanceInfo(_this.renderGroup, _this._modelRenderCache, _this._modelRenderCache._partData.length);
+                for (var j = 0; j < _this._modelRenderCache._partData.length; j++) {
+                    var part = _this._instanceDataParts[j];
+                    res.partIndexFromId.add(part.id.toString(), j);
+                    res.usedShaderCategories[j] = ";" + _this.getUsedShaderCategories(part).join(";") + ";";
+                    res.strides[j] = _this._modelRenderCache._partData[j]._partDataStride;
+                }
+                return res;
+            });
+            // Get the GroupInfoDataPart corresponding to the render category of the part
+            var rm = 0;
+            var gipd = null;
+            if (this.isTransparent) {
+                gipd = gii.transparentData;
+                rm = BABYLON.Render2DContext.RenderModeTransparent;
+            }
+            else if (this.isAlphaTest) {
+                gipd = gii.alphaTestData;
+                rm = BABYLON.Render2DContext.RenderModeAlphaTest;
+            }
+            else {
+                gipd = gii.opaqueData;
+                rm = BABYLON.Render2DContext.RenderModeOpaque;
+            }
+            // For each instance data part of the primitive, allocate the instanced element it needs for render
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                part.dataBuffer = gipd[i]._partData;
+                part.allocElements();
+                part.renderMode = rm;
+                part.groupInstanceInfo = gii;
+            }
+            return gii;
+        };
+        RenderablePrim2D.prototype._setupModelRenderCache = function (parts) {
+            var ctiArray = new Array();
+            this._modelRenderCache._partData = new Array();
+            for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+                var dataPart = parts_1[_i];
+                var pd = new BABYLON.ModelRenderCachePartData();
+                this._modelRenderCache._partData.push(pd);
+                var cat = this.getUsedShaderCategories(dataPart);
+                var cti = dataPart.getClassTreeInfo();
+                // Make sure the instance is visible other the properties won't be set and their size/offset wont be computed
+                var curVisible = this.isVisible;
+                this.isVisible = true;
+                // We manually trigger refreshInstanceData for the only sake of evaluating each instance property size and offset in the instance data, this can only be made at runtime. Once it's done we have all the information to create the instance data buffer.
+                //console.log("Build Prop Layout for " + Tools.getClassName(this._instanceDataParts[0]));
+                var joinCat = ";" + cat.join(";") + ";";
+                pd._partJoinedUsedCategories = joinCat;
+                InstanceClassInfo._CurCategories = joinCat;
+                var obj = this.beforeRefreshForLayoutConstruction(dataPart);
+                if (!this.refreshInstanceDataPart(dataPart)) {
+                    console.log("Layout construction for " + BABYLON.Tools.getClassName(this._instanceDataParts[0]) + " failed because refresh returned false");
+                }
+                this.afterRefreshForLayoutConstruction(dataPart, obj);
+                this.isVisible = curVisible;
+                var size = 0;
+                cti.fullContent.forEach(function (k, v) {
+                    if (!v.category || cat.indexOf(v.category) !== -1) {
+                        if (v.attributeName === "zBias") {
+                            pd._zBiasOffset = v.instanceOffset.get(joinCat);
+                        }
+                        if (!v.size) {
+                            console.log("ERROR: Couldn't detect the size of the Property " + v.attributeName + " from type " + BABYLON.Tools.getClassName(cti.type) + ". Property is ignored.");
+                        }
+                        else {
+                            size += v.size;
+                        }
+                    }
+                });
+                pd._partDataStride = size;
+                pd._partUsedCategories = cat;
+                pd._partId = dataPart.id;
+                ctiArray.push(cti);
+            }
+            this._modelRenderCache._partsClassInfo = ctiArray;
+        };
+        RenderablePrim2D.prototype.onZOrderChanged = function () {
+            if (this.isTransparent && this._transparentPrimitiveInfo) {
+                this.renderGroup._renderableData.transparentPrimitiveZChanged(this._transparentPrimitiveInfo);
+                var gii = this.renderGroup._renderableData._renderGroupInstancesInfo.get(this.modelKey);
+                // Flag the transparentData dirty has will have to sort it again
+                gii.transparentOrderDirty = true;
+            }
+        };
+        RenderablePrim2D.prototype._mustUpdateInstance = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._useTextureAlpha = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._shouldUseAlphaFromTexture = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._isPrimAlphaTest = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._isPrimTransparent = function () {
+            return false;
+        };
+        RenderablePrim2D.prototype._updateInstanceDataParts = function (gii) {
+            // Fetch the GroupInstanceInfo if we don't already have it
+            var rd = this.renderGroup._renderableData;
+            if (!gii) {
+                gii = rd._renderGroupInstancesInfo.get(this.modelKey);
+            }
+            var isTransparent = this.isTransparent;
+            var isAlphaTest = this.isAlphaTest;
+            var wereTransparent = false;
+            // Check a render mode change
+            var rmChanged = false;
+            if (this._instanceDataParts.length > 0) {
+                var firstPart = this._instanceDataParts[0];
+                var partRM = firstPart.renderMode;
+                var curRM = this.renderMode;
+                if (partRM !== curRM) {
+                    wereTransparent = partRM === BABYLON.Render2DContext.RenderModeTransparent;
+                    rmChanged = true;
+                    var gipd = void 0;
+                    switch (curRM) {
+                        case BABYLON.Render2DContext.RenderModeTransparent:
+                            gipd = gii.transparentData;
+                            break;
+                        case BABYLON.Render2DContext.RenderModeAlphaTest:
+                            gipd = gii.alphaTestData;
+                            break;
+                        default:
+                            gipd = gii.opaqueData;
+                    }
+                    for (var i = 0; i < this._instanceDataParts.length; i++) {
+                        var part = this._instanceDataParts[i];
+                        part.freeElements();
+                        part.dataBuffer = gipd[i]._partData;
+                        part.renderMode = curRM;
+                    }
+                }
+            }
+            // Handle changes related to ZOffset
+            var visChanged = this._isFlagSet(BABYLON.SmartPropertyPrim.flagVisibilityChanged);
+            if (isTransparent || wereTransparent) {
+                // Handle visibility change, which is also triggered when the primitive just got created
+                if (visChanged || rmChanged) {
+                    if (this.isVisible && !wereTransparent) {
+                        if (!this._transparentPrimitiveInfo) {
+                            // Add the primitive to the list of transparent ones in the group that render is
+                            this._transparentPrimitiveInfo = rd.addNewTransparentPrimitiveInfo(this, gii);
+                        }
+                    }
+                    else {
+                        if (this._transparentPrimitiveInfo) {
+                            rd.removeTransparentPrimitiveInfo(this._transparentPrimitiveInfo);
+                            this._transparentPrimitiveInfo = null;
+                        }
+                    }
+                    gii.transparentOrderDirty = true;
+                }
+            }
+            var rebuildTrans = false;
+            // For each Instance Data part, refresh it to update the data in the DynamicFloatArray
+            for (var _i = 0, _a = this._instanceDataParts; _i < _a.length; _i++) {
+                var part = _a[_i];
+                var justAllocated = false;
+                // Check if we need to allocate data elements (hidden prim which becomes visible again)
+                if (!part.dataElements && (visChanged || rmChanged || this.isVisible)) {
+                    part.allocElements();
+                    justAllocated = true;
+                }
+                InstanceClassInfo._CurCategories = gii.usedShaderCategories[gii.partIndexFromId.get(part.id.toString())];
+                // Will return false if the instance should not be rendered (not visible or other any reasons)
+                part.arrayLengthChanged = false;
+                if (!this.refreshInstanceDataPart(part)) {
+                    // Free the data element
+                    if (part.dataElements) {
+                        part.freeElements();
+                    }
+                    // The refresh couldn't succeed, push the primitive to be dirty again for the next render
+                    if (this.isVisible) {
+                        rd._primNewDirtyList.push(this);
+                    }
+                }
+                rebuildTrans = rebuildTrans || part.arrayLengthChanged || justAllocated;
+            }
+            this._instanceDirtyFlags = 0;
+            // Make the appropriate data dirty
+            if (isTransparent) {
+                gii.transparentDirty = true;
+                if (rebuildTrans) {
+                    rd._transparentListChanged = true;
+                }
+            }
+            else if (isAlphaTest) {
+                gii.alphaTestDirty = true;
+            }
+            else {
+                gii.opaqueDirty = true;
+            }
+            this._clearFlags(BABYLON.SmartPropertyPrim.flagVisibilityChanged); // Reset the flag as we've handled the case            
+        };
+        RenderablePrim2D.prototype._updateTransparentSegmentIndices = function (ts) {
+            var minOff = BABYLON.Prim2DBase._bigInt;
+            var maxOff = 0;
+            for (var _i = 0, _a = this._instanceDataParts; _i < _a.length; _i++) {
+                var part = _a[_i];
+                if (part && part.dataElements) {
+                    part.dataBuffer.pack();
+                    for (var _b = 0, _c = part.dataElements; _b < _c.length; _b++) {
+                        var el = _c[_b];
+                        minOff = Math.min(minOff, el.offset);
+                        maxOff = Math.max(maxOff, el.offset);
+                    }
+                    ts.startDataIndex = Math.min(ts.startDataIndex, minOff / part.dataBuffer.stride);
+                    ts.endDataIndex = Math.max(ts.endDataIndex, (maxOff / part.dataBuffer.stride) + 1); // +1 for exclusive
+                }
+            }
+        };
+        // This internal method is mainly used for transparency processing
+        RenderablePrim2D.prototype._getNextPrimZOrder = function () {
+            var length = this._instanceDataParts.length;
+            for (var i = 0; i < length; i++) {
+                var part = this._instanceDataParts[i];
+                if (part) {
+                    var stride = part.dataBuffer.stride;
+                    var lastElementOffset = part.dataElements[part.dataElements.length - 1].offset;
+                    // check if it's the last in the DFA
+                    if (part.dataBuffer.totalElementCount * stride <= lastElementOffset) {
+                        return null;
+                    }
+                    // Return the Z of the next primitive that lies in the DFA
+                    return part.dataBuffer[lastElementOffset + stride + this.modelRenderCache._partData[i]._zBiasOffset];
+                }
+            }
+            return null;
+        };
+        // This internal method is mainly used for transparency processing
+        RenderablePrim2D.prototype._getPrevPrimZOrder = function () {
+            var length = this._instanceDataParts.length;
+            for (var i = 0; i < length; i++) {
+                var part = this._instanceDataParts[i];
+                if (part) {
+                    var stride = part.dataBuffer.stride;
+                    var firstElementOffset = part.dataElements[0].offset;
+                    // check if it's the first in the DFA
+                    if (firstElementOffset === 0) {
+                        return null;
+                    }
+                    // Return the Z of the previous primitive that lies in the DFA
+                    return part.dataBuffer[firstElementOffset - stride + this.modelRenderCache._partData[i]._zBiasOffset];
+                }
+            }
+            return null;
+        };
+        /**
+         * Transform a given point using the Primitive's origin setting.
+         * This method requires the Primitive's actualSize to be accurate
+         * @param p the point to transform
+         * @param originOffset an offset applied on the current origin before performing the transformation. Depending on which frame of reference your data is expressed you may have to apply a offset. (if you data is expressed from the bottom/left, no offset is required. If it's expressed from the center the a [-0.5;-0.5] offset has to be applied.
+         * @param res an allocated Vector2 that will receive the transformed content
+         */
+        RenderablePrim2D.prototype.transformPointWithOriginByRef = function (p, originOffset, res) {
+            var actualSize = this.actualSize;
+            res.x = p.x - ((this.origin.x + (originOffset ? originOffset.x : 0)) * actualSize.width);
+            res.y = p.y - ((this.origin.y + (originOffset ? originOffset.y : 0)) * actualSize.height);
+        };
+        RenderablePrim2D.prototype.transformPointWithOriginToRef = function (p, originOffset, res) {
+            this.transformPointWithOriginByRef(p, originOffset, res);
+            return res;
+        };
+        /**
+         * Get the info for a given effect based on the dataPart metadata
+         * @param dataPartId partId in part list to get the info
+         * @param vertexBufferAttributes vertex buffer attributes to manually add
+         * @param uniforms uniforms to manually add
+         * @param useInstanced specified if Instanced Array should be used, if null the engine caps will be used (so true if WebGL supports it, false otherwise), but you have the possibility to override the engine capability. However, if you manually set true but the engine does not support Instanced Array, this method will return null
+         */
+        RenderablePrim2D.prototype.getDataPartEffectInfo = function (dataPartId, vertexBufferAttributes, uniforms, useInstanced) {
+            if (uniforms === void 0) { uniforms = null; }
+            if (useInstanced === void 0) { useInstanced = null; }
+            var dataPart = BABYLON.Tools.first(this._instanceDataParts, function (i) { return i.id === dataPartId; });
+            if (!dataPart) {
+                return null;
+            }
+            var instancedArray = this.owner.supportInstancedArray;
+            if (useInstanced != null) {
+                // Check if the caller ask for Instanced Array and the engine does not support it, return null if it's the case
+                if (useInstanced && instancedArray === false) {
+                    return null;
+                }
+                // Use the caller's setting
+                instancedArray = useInstanced;
+            }
+            var cti = dataPart.getClassTreeInfo();
+            var categories = this.getUsedShaderCategories(dataPart);
+            var att = cti.classContent.getShaderAttributes(categories);
+            var defines = "";
+            categories.forEach(function (c) { defines += "#define " + c + "\n"; });
+            if (instancedArray) {
+                defines += "#define Instanced\n";
+            }
+            return {
+                attributes: instancedArray ? vertexBufferAttributes.concat(att) : vertexBufferAttributes,
+                uniforms: instancedArray ? (uniforms != null ? uniforms : []) : ((uniforms != null) ? att.concat(uniforms) : (att != null ? att : [])),
+                defines: defines
+            };
+        };
+        Object.defineProperty(RenderablePrim2D.prototype, "modelRenderCache", {
+            get: function () {
+                return this._modelRenderCache;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        RenderablePrim2D.prototype.createModelRenderCache = function (modelKey) {
+            return null;
+        };
+        RenderablePrim2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+        };
+        RenderablePrim2D.prototype.createInstanceDataParts = function () {
+            return null;
+        };
+        RenderablePrim2D.prototype.getUsedShaderCategories = function (dataPart) {
+            return [];
+        };
+        RenderablePrim2D.prototype.beforeRefreshForLayoutConstruction = function (part) {
+        };
+        RenderablePrim2D.prototype.afterRefreshForLayoutConstruction = function (part, obj) {
+        };
+        RenderablePrim2D.prototype.applyActualScaleOnTransform = function () {
+            return true;
+        };
+        RenderablePrim2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!this.isVisible) {
+                return false;
+            }
+            part.isVisible = this.isVisible;
+            // Which means, if there's only one data element, we're update it from this method, otherwise it is the responsibility of the derived class to call updateInstanceDataPart as many times as needed, properly (look at Text2D's implementation for more information)
+            if (part.dataElementCount === 1) {
+                part.curElement = 0;
+                this.updateInstanceDataPart(part);
+            }
+            return true;
+        };
+        /**
+         * Update the instanceDataBase level properties of a part
+         * @param part the part to update
+         * @param positionOffset to use in multi part per primitive (e.g. the Text2D has N parts for N letter to display), this give the offset to apply (e.g. the position of the letter from the bottom/left corner of the text).
+         */
+        RenderablePrim2D.prototype.updateInstanceDataPart = function (part, positionOffset) {
+            if (positionOffset === void 0) { positionOffset = null; }
+            var t = this._globalTransform.multiply(this.renderGroup.invGlobalTransform); // Compute the transformation into the renderGroup's space
+            var rgScale = this._areSomeFlagsSet(BABYLON.SmartPropertyPrim.flagDontInheritParentScale) ? RenderablePrim2D._uV : this.renderGroup.actualScale; // We still need to apply the scale of the renderGroup to our rendering, so get it.
+            var size = this.renderGroup.viewportSize;
+            var zBias = this.actualZOffset;
+            var offX = 0;
+            var offY = 0;
+            // If there's an offset, apply the global transformation matrix on it to get a global offset
+            if (positionOffset) {
+                offX = positionOffset.x * t.m[0] + positionOffset.y * t.m[4];
+                offY = positionOffset.x * t.m[1] + positionOffset.y * t.m[5];
+            }
+            // Have to convert the coordinates to clip space which is ranged between [-1;1] on X and Y axis, with 0,0 being the left/bottom corner
+            // Current coordinates are expressed in renderGroup coordinates ([0, renderGroup.actualSize.width|height]) with 0,0 being at the left/top corner
+            // So for X: 
+            //  - tx.x = value * 2 / width: is to switch from [0, renderGroup.width] to [0, 2]
+            //  - tx.w = (value * 2 / width) - 1: w stores the translation in renderGroup coordinates so (value * 2 / width) to switch to a clip space translation value. - 1 is to offset the overall [0;2] to [-1;1].
+            // At last we don't forget to apply the actualScale of the Render Group to tx[0] and ty[1] to propagate scaling correctly
+            var w = size.width;
+            var h = size.height;
+            var invZBias = 1 / zBias;
+            var tx = new BABYLON.Vector4(t.m[0] * rgScale.x * 2 / w, t.m[4] * 2 / w, 0 /*t.m[8]*/, ((t.m[12] + offX) * rgScale.x * 2 / w) - 1);
+            var ty = new BABYLON.Vector4(t.m[1] * 2 / h, t.m[5] * rgScale.y * 2 / h, 0 /*t.m[9]*/, ((t.m[13] + offY) * rgScale.y * 2 / h) - 1);
+            if (!this.applyActualScaleOnTransform()) {
+                var las = this.actualScale;
+                tx.x /= las.x;
+                ty.y /= las.y;
+            }
+            part.transformX = tx;
+            part.transformY = ty;
+            part.opacity = this.actualOpacity;
+            // Stores zBias and it's inverse value because that's needed to compute the clip space W coordinate (which is 1/Z, so 1/zBias)
+            part.zBias = new BABYLON.Vector2(zBias, invZBias);
+        };
+        RenderablePrim2D.prototype._updateRenderMode = function () {
+            if (this.isTransparent) {
+                this._renderMode = BABYLON.Render2DContext.RenderModeTransparent;
+            }
+            else if (this.isAlphaTest) {
+                this._renderMode = BABYLON.Render2DContext.RenderModeAlphaTest;
+            }
+            else {
+                this._renderMode = BABYLON.Render2DContext.RenderModeOpaque;
+            }
+        };
+        RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT = BABYLON.Prim2DBase.PRIM2DBASE_PROPCOUNT + 5;
+        RenderablePrim2D._uV = new BABYLON.Vector2(1, 1);
+        __decorate([
+            BABYLON.dynamicLevelProperty(BABYLON.Prim2DBase.PRIM2DBASE_PROPCOUNT + 0, function (pi) { return RenderablePrim2D.isAlphaTestProperty = pi; })
+        ], RenderablePrim2D.prototype, "isAlphaTest", null);
+        __decorate([
+            BABYLON.dynamicLevelProperty(BABYLON.Prim2DBase.PRIM2DBASE_PROPCOUNT + 1, function (pi) { return RenderablePrim2D.isTransparentProperty = pi; })
+        ], RenderablePrim2D.prototype, "isTransparent", null);
+        RenderablePrim2D = __decorate([
+            BABYLON.className("RenderablePrim2D")
+        ], RenderablePrim2D);
+        return RenderablePrim2D;
+    }(BABYLON.Prim2DBase));
+    BABYLON.RenderablePrim2D = RenderablePrim2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.renderablePrim2d.ts

@@ -0,0 +1,987 @@
+module BABYLON {
+    export class InstanceClassInfo {
+        constructor(base: InstanceClassInfo) {
+            this._baseInfo = base;
+            this._nextOffset = new StringDictionary<number>();
+            this._attributes = new Array<InstancePropInfo>();
+        }
+
+        mapProperty(propInfo: InstancePropInfo, push: boolean) {
+            let curOff = this._nextOffset.getOrAdd(InstanceClassInfo._CurCategories, 0);
+            propInfo.instanceOffset.add(InstanceClassInfo._CurCategories, this._getBaseOffset(InstanceClassInfo._CurCategories) + curOff);
+            //console.log(`[${InstanceClassInfo._CurCategories}] New PropInfo. Category: ${propInfo.category}, Name: ${propInfo.attributeName}, Offset: ${propInfo.instanceOffset.get(InstanceClassInfo._CurCategories)}, Size: ${propInfo.size / 4}`);
+
+            this._nextOffset.set(InstanceClassInfo._CurCategories, curOff + (propInfo.size / 4));
+
+            if (push) {
+                this._attributes.push(propInfo);
+            }
+        }
+
+        getInstancingAttributeInfos(effect: Effect, categories: string[]): InstancingAttributeInfo[] {
+            let catInline = ";" + categories.join(";") + ";";
+            let res = new Array<InstancingAttributeInfo>();
+            let curInfo: InstanceClassInfo = this;
+            while (curInfo) {
+                for (let attrib of curInfo._attributes) {
+                    // Only map if there's no category assigned to the instance data or if there's a category and it's in the given list
+                    if (!attrib.category || categories.indexOf(attrib.category) !== -1) {
+                        let index = effect.getAttributeLocationByName(attrib.attributeName);
+                        let iai = new InstancingAttributeInfo();
+                        iai.index = index;
+                        iai.attributeSize = attrib.size / 4; // attrib.size is in byte and we need to store in "component" (i.e float is 1, vec3 is 3)
+                        iai.offset = attrib.instanceOffset.get(catInline) * 4; // attrib.instanceOffset is in float, iai.offset must be in bytes
+                        iai.attributeName = attrib.attributeName;
+                        res.push(iai);
+                    }
+                }
+
+                curInfo = curInfo._baseInfo;
+            }
+            return res;
+        }
+
+        getShaderAttributes(categories: string[]): string[] {
+            let res = new Array<string>();
+            let curInfo: InstanceClassInfo = this;
+            while (curInfo) {
+                for (let attrib of curInfo._attributes) {
+                    // Only map if there's no category assigned to the instance data or if there's a category and it's in the given list
+                    if (!attrib.category || categories.indexOf(attrib.category) !== -1) {
+                        res.push(attrib.attributeName);
+                    }
+                }
+
+                curInfo = curInfo._baseInfo;
+            }
+            return res;
+        }
+
+        private _getBaseOffset(categories: string): number {
+            let curOffset = 0;
+            let curBase = this._baseInfo;
+            while (curBase) {
+                curOffset += curBase._nextOffset.getOrAdd(categories, 0);
+                curBase = curBase._baseInfo;
+            }
+            return curOffset;
+        }
+
+        static _CurCategories: string;
+        private _baseInfo: InstanceClassInfo;
+        private _nextOffset: StringDictionary<number>;
+        private _attributes: Array<InstancePropInfo>;
+    }
+
+    export class InstancePropInfo {
+        attributeName: string;
+        category: string;
+        size: number;
+        shaderOffset: number;
+        instanceOffset: StringDictionary<number>;
+        dataType: ShaderDataType;
+        //uniformLocation: WebGLUniformLocation;
+
+        delimitedCategory: string;
+
+        constructor() {
+            this.instanceOffset = new StringDictionary<number>();
+        }
+
+        setSize(val) {
+            if (val instanceof Vector2) {
+                this.size = 8;
+                this.dataType = ShaderDataType.Vector2;
+                return;
+            }
+            if (val instanceof Vector3) {
+                this.size = 12;
+                this.dataType = ShaderDataType.Vector3;
+                return;
+            }
+            if (val instanceof Vector4) {
+                this.size = 16;
+                this.dataType = ShaderDataType.Vector4;
+                return;
+            }
+            if (val instanceof Matrix) {
+                throw new Error("Matrix type is not supported by WebGL Instance Buffer, you have to use four Vector4 properties instead");
+            }
+            if (typeof (val) === "number") {
+                this.size = 4;
+                this.dataType = ShaderDataType.float;
+                return;
+            }
+            if (val instanceof Color3) {
+                this.size = 12;
+                this.dataType = ShaderDataType.Color3;
+                return;
+            }
+            if (val instanceof Color4) {
+                this.size = 16;
+                this.dataType = ShaderDataType.Color4;
+                return;
+            }
+            if (val instanceof Size) {
+                this.size = 8;
+                this.dataType = ShaderDataType.Size;
+                return;
+            }            return;
+        }
+
+        writeData(array: Float32Array, offset: number, val) {
+            switch (this.dataType) {
+                case ShaderDataType.Vector2:
+                    {
+                        let v = <Vector2>val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        break;
+                    }
+                case ShaderDataType.Vector3:
+                    {
+                        let v = <Vector3>val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        array[offset + 2] = v.z;
+                        break;
+                    }
+                case ShaderDataType.Vector4:
+                    {
+                        let v = <Vector4>val;
+                        array[offset + 0] = v.x;
+                        array[offset + 1] = v.y;
+                        array[offset + 2] = v.z;
+                        array[offset + 3] = v.w;
+                        break;
+                    }
+                case ShaderDataType.Color3:
+                    {
+                        let v = <Color3>val;
+                        array[offset + 0] = v.r;
+                        array[offset + 1] = v.g;
+                        array[offset + 2] = v.b;
+                        break;
+                    }
+                case ShaderDataType.Color4:
+                    {
+                        let v = <Color4>val;
+                        array[offset + 0] = v.r;
+                        array[offset + 1] = v.g;
+                        array[offset + 2] = v.b;
+                        array[offset + 3] = v.a;
+                        break;
+                    }
+                case ShaderDataType.float:
+                    {
+                        let v = <number>val;
+                        array[offset] = v;
+                        break;
+                    }
+                case ShaderDataType.Matrix:
+                    {
+                        let v = <Matrix>val;
+                        for (let i = 0; i < 16; i++) {
+                            array[offset + i] = v.m[i];
+                        }
+                        break;
+                    }
+                case ShaderDataType.Size:
+                    {
+                        let s = <Size>val;
+                        array[offset + 0] = s.width;
+                        array[offset + 1] = s.height;
+                        break;
+                    }
+            }
+        }
+    }
+
+    export function instanceData<T>(category?: string, shaderAttributeName?: string): (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => void {
+        return (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => {
+
+            let dic = ClassTreeInfo.getOrRegister<InstanceClassInfo, InstancePropInfo>(target, (base) => new InstanceClassInfo(base));
+            let node = dic.getLevelOf(target);
+            let instanceDataName = <string>propName;
+            shaderAttributeName = shaderAttributeName || instanceDataName;
+
+
+            let info = node.levelContent.get(instanceDataName);
+            if (info) {
+                throw new Error(`The ID ${instanceDataName} is already taken by another instance data`);
+            }
+
+            info = new InstancePropInfo();
+            info.attributeName = shaderAttributeName;
+            info.category = category || null;
+            if (info.category) {
+                info.delimitedCategory = ";" + info.category + ";";
+            }
+
+            node.levelContent.add(instanceDataName, info);
+
+            descriptor.get = function () {
+                return null;
+            }
+
+            descriptor.set = function (val) {
+                // Check that we're not trying to set a property that belongs to a category that is not allowed (current)
+                // Quit if it's the case, otherwise we could overwrite data somewhere...
+                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 obj: InstanceDataBase = this;
+                if (obj.dataBuffer && obj.dataElements) {
+                    let offset = obj.dataElements[obj.curElement].offset + info.instanceOffset.get(InstanceClassInfo._CurCategories);
+                    info.writeData(obj.dataBuffer.buffer, offset, val);
+                }
+            }
+
+        }
+    }
+
+    export class InstanceDataBase {
+        constructor(partId: number, dataElementCount: number) {
+            this.id = partId;
+            this.curElement = 0;
+            this._dataElementCount = dataElementCount;
+            this.renderMode = 0;
+            this.arrayLengthChanged = false;
+        }
+
+        id: number;
+        isVisible: boolean;
+
+        @instanceData()
+        get zBias(): Vector2 {
+            return null;
+        }
+        set zBias(value: Vector2) {
+        }
+
+
+        @instanceData()
+        get transformX(): Vector4 {
+            return null;
+        }
+        set transformX(value: Vector4) {
+        }
+
+        @instanceData()
+        get transformY(): Vector4 {
+            return null;
+        }
+        set transformY(value: Vector4) {
+        }
+
+        @instanceData()
+        get opacity(): number {
+            return null;
+        }
+        set opacity(value: number) {
+        }
+
+        getClassTreeInfo(): ClassTreeInfo<InstanceClassInfo, InstancePropInfo> {
+            if (!this.typeInfo) {
+                this.typeInfo = ClassTreeInfo.get<InstanceClassInfo, InstancePropInfo>(Object.getPrototypeOf(this));
+            }
+            return this.typeInfo;
+        }
+
+        allocElements() {
+            if (!this.dataBuffer || this.dataElements) {
+                return;
+            }
+            let res = new Array<DynamicFloatArrayElementInfo>(this.dataElementCount);
+            for (let i = 0; i < this.dataElementCount; i++) {
+                res[i] = this.dataBuffer.allocElement();
+            }
+            this.dataElements = res;
+        }
+
+        freeElements() {
+            if (!this.dataElements) {
+                return;
+            }
+            for (let ei of this.dataElements) {
+                this.dataBuffer.freeElement(ei);
+            }
+            this.dataElements = null;
+        }
+
+        get dataElementCount(): number {
+            return this._dataElementCount;
+        }
+
+        set dataElementCount(value: number) {
+            if (value === this._dataElementCount) {
+                return;
+            }
+
+            this.arrayLengthChanged = true;
+            this.freeElements();
+            this._dataElementCount = value;
+            this.allocElements();
+        }
+        groupInstanceInfo: GroupInstanceInfo;
+        arrayLengthChanged: boolean;
+        curElement: number;
+        renderMode: number;
+        dataElements: DynamicFloatArrayElementInfo[];
+        dataBuffer: DynamicFloatArray;
+        typeInfo: ClassTreeInfo<InstanceClassInfo, InstancePropInfo>;
+
+        private _dataElementCount: number;
+    }
+
+    @className("RenderablePrim2D")
+    /**
+     * The abstract class for primitive that render into the Canvas2D
+     */
+    export abstract class RenderablePrim2D extends Prim2DBase {
+        static RENDERABLEPRIM2D_PROPCOUNT: number = Prim2DBase.PRIM2DBASE_PROPCOUNT + 5;
+
+        public static isAlphaTestProperty: Prim2DPropInfo;
+        public static isTransparentProperty: Prim2DPropInfo;
+
+        @dynamicLevelProperty(Prim2DBase.PRIM2DBASE_PROPCOUNT + 0, pi => RenderablePrim2D.isAlphaTestProperty = pi)
+        /**
+         * Get/set if the Primitive is from the AlphaTest rendering category.
+         * The AlphaTest category is the rendering pass with alpha blend, depth compare and write activated.
+         * Primitives that render with an alpha mask should be from this category.
+         * The setter should be used only by implementers of new primitive type.
+         */
+        public get isAlphaTest(): boolean {
+            return this._useTextureAlpha() || this._isPrimAlphaTest();
+        }
+
+        @dynamicLevelProperty(Prim2DBase.PRIM2DBASE_PROPCOUNT + 1, pi => RenderablePrim2D.isTransparentProperty = pi)
+        /**
+         * Get/set if the Primitive is from the Transparent rendering category.
+         * The setter should be used only by implementers of new primitive type.
+         */
+        public get isTransparent(): boolean {
+            return (this.actualOpacity<1) || this._shouldUseAlphaFromTexture() || this._isPrimTransparent();
+        }
+
+        public get renderMode(): number {
+            return this._renderMode;
+        }
+
+        constructor(settings?: {
+            parent       ?: Prim2DBase, 
+            id           ?: string,
+            origin       ?: Vector2,
+            isVisible    ?: boolean,
+        }) {
+            super(settings);
+
+            this._transparentPrimitiveInfo = null;
+        }
+
+        /**
+         * Dispose the primitive and its resources, remove it from its parent
+         */
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.renderGroup) {
+                this.renderGroup._setCacheGroupDirty();
+            }
+
+            if (this._transparentPrimitiveInfo) {
+                this.renderGroup._renderableData.removeTransparentPrimitiveInfo(this._transparentPrimitiveInfo);
+                this._transparentPrimitiveInfo = null;
+            }
+
+            if (this._instanceDataParts) {
+                this._cleanupInstanceDataParts();
+            }
+
+            if (this._modelRenderCache) {
+                this._modelRenderCache.dispose();
+                this._modelRenderCache = null;
+            }
+
+            if (this._instanceDataParts) {
+                this._instanceDataParts.forEach(p => {
+                    p.freeElements();
+                });
+                this._instanceDataParts = null;
+            }
+
+            return true;
+        }
+
+        private _cleanupInstanceDataParts() {
+            let gii: GroupInstanceInfo = null;
+            for (let part of this._instanceDataParts) {
+                part.freeElements();
+                gii = part.groupInstanceInfo;
+            }
+            if (gii) {
+                let usedCount = 0;
+                if (gii.hasOpaqueData) {
+                    let od = gii.opaqueData[0];
+                    usedCount += od._partData.usedElementCount;
+                    gii.opaqueDirty = true;
+                }
+                if (gii.hasAlphaTestData) {
+                    let atd = gii.alphaTestData[0];
+                    usedCount += atd._partData.usedElementCount;
+                    gii.alphaTestDirty = true;
+                }
+                if (gii.hasTransparentData) {
+                    let td = gii.transparentData[0];
+                    usedCount += td._partData.usedElementCount;
+                    gii.transparentDirty = true;
+                }
+
+                if (usedCount === 0 && gii.modelRenderCache!=null) {
+                    this.renderGroup._renderableData._renderGroupInstancesInfo.remove(gii.modelRenderCache.modelKey);
+                    gii.dispose();
+                }
+
+                if (this._modelRenderCache) {
+                    this._modelRenderCache.dispose();
+                    this._modelRenderCache = null;
+                }
+
+            }
+            this._instanceDataParts = null;
+        }
+
+        public _prepareRenderPre(context: PrepareRender2DContext) {
+            super._prepareRenderPre(context);
+
+            // If the model changed and we have already an instance, we must remove this instance from the obsolete model
+            if (this._isFlagSet(SmartPropertyPrim.flagModelDirty) && this._instanceDataParts) {
+                this._cleanupInstanceDataParts();
+            }
+
+            // Need to create the model?
+            let setupModelRenderCache = false;
+            if (!this._modelRenderCache || this._isFlagSet(SmartPropertyPrim.flagModelDirty)) {
+                setupModelRenderCache = this._createModelRenderCache();
+            }
+
+            let gii: GroupInstanceInfo = null;
+            let newInstance = false;
+
+            // Need to create the instance data parts?
+            if (!this._instanceDataParts) {
+                // Yes, flag it for later, more processing will have to be done
+                newInstance = true;
+                gii = this._createModelDataParts();
+            }
+
+            // If the ModelRenderCache is brand new, now is the time to call the implementation's specific setup method to create the rendering resources
+            if (setupModelRenderCache) {
+                this.setupModelRenderCache(this._modelRenderCache);
+            }
+
+            // At this stage we have everything correctly initialized, ModelRenderCache is setup, Model Instance data are good too, they have allocated elements in the Instanced DynamicFloatArray.
+
+            // The last thing to do is check if the instanced related data must be updated because a InstanceLevel property had changed or the primitive visibility changed.
+            if (this._areSomeFlagsSet(SmartPropertyPrim.flagVisibilityChanged | SmartPropertyPrim.flagNeedRefresh) || context.forceRefreshPrimitive || newInstance || (this._instanceDirtyFlags !== 0) || (this._globalTransformProcessStep !== this._globalTransformStep) || this._mustUpdateInstance()) {
+
+                this._updateInstanceDataParts(gii);
+            }
+        }
+
+        private _createModelRenderCache(): boolean {
+            let setupModelRenderCache = false;
+
+            if (this._modelRenderCache) {
+                this._modelRenderCache.dispose();
+            }
+            this._modelRenderCache = this.owner._engineData.GetOrAddModelCache(this.modelKey, (key: string) => {
+                let mrc = this.createModelRenderCache(key);
+                setupModelRenderCache = true;
+                return mrc;
+            });
+            this._clearFlags(SmartPropertyPrim.flagModelDirty);
+
+            // if this is still false it means the MRC already exists, so we add a reference to it
+            if (!setupModelRenderCache) {
+                this._modelRenderCache.addRef();
+            }
+
+            return setupModelRenderCache;
+        }
+
+        private _createModelDataParts(): GroupInstanceInfo {
+            // Create the instance data parts of the primitive and store them
+            let parts = this.createInstanceDataParts();
+            this._instanceDataParts = parts;
+
+            // Check if the ModelRenderCache for this particular instance is also brand new, initialize it if it's the case
+            if (!this._modelRenderCache._partData) {
+                this._setupModelRenderCache(parts);
+            }
+
+            // The Rendering resources (Effect, VB, IB, Textures) are stored in the ModelRenderCache
+            // But it's the RenderGroup that will store all the Instanced related data to render all the primitive it owns.
+            // So for a given ModelKey we getOrAdd a GroupInstanceInfo that will store all these data
+            let gii = this.renderGroup._renderableData._renderGroupInstancesInfo.getOrAddWithFactory(this.modelKey, k => {
+
+                let res = new GroupInstanceInfo(this.renderGroup, this._modelRenderCache, this._modelRenderCache._partData.length);
+
+                for (let j = 0; j < this._modelRenderCache._partData.length; j++) {
+                    let part = this._instanceDataParts[j];
+                    res.partIndexFromId.add(part.id.toString(), j);
+                    res.usedShaderCategories[j] = ";" + this.getUsedShaderCategories(part).join(";") + ";";
+                    res.strides[j] = this._modelRenderCache._partData[j]._partDataStride;
+                }
+
+                return res;
+            });
+
+            // Get the GroupInfoDataPart corresponding to the render category of the part
+            let rm = 0;
+            let gipd: GroupInfoPartData[] = null;
+            if (this.isTransparent) {
+                gipd = gii.transparentData;
+                rm = Render2DContext.RenderModeTransparent;
+            } else if (this.isAlphaTest) {
+                gipd = gii.alphaTestData;
+                rm = Render2DContext.RenderModeAlphaTest;
+            } else {
+                gipd = gii.opaqueData;
+                rm = Render2DContext.RenderModeOpaque;
+            }
+
+            // For each instance data part of the primitive, allocate the instanced element it needs for render
+            for (let i = 0; i < parts.length; i++) {
+                let part = parts[i];
+                part.dataBuffer = gipd[i]._partData;
+                part.allocElements();
+                part.renderMode = rm;
+                part.groupInstanceInfo = gii;
+            }
+
+            return gii;
+        }
+
+        private _setupModelRenderCache(parts: InstanceDataBase[]) {
+            let ctiArray = new Array<ClassTreeInfo<InstanceClassInfo, InstancePropInfo>>();
+            this._modelRenderCache._partData = new Array<ModelRenderCachePartData>();
+            for (let dataPart of parts) {
+                var pd = new ModelRenderCachePartData();
+                this._modelRenderCache._partData.push(pd)
+                var cat = this.getUsedShaderCategories(dataPart);
+                var cti = dataPart.getClassTreeInfo();
+                // Make sure the instance is visible other the properties won't be set and their size/offset wont be computed
+                let curVisible = this.isVisible;
+                this.isVisible = true;
+                // We manually trigger refreshInstanceData for the only sake of evaluating each instance property size and offset in the instance data, this can only be made at runtime. Once it's done we have all the information to create the instance data buffer.
+                //console.log("Build Prop Layout for " + Tools.getClassName(this._instanceDataParts[0]));
+                var joinCat = ";" + cat.join(";") + ";";
+                pd._partJoinedUsedCategories = joinCat;
+                InstanceClassInfo._CurCategories = joinCat;
+                let obj = this.beforeRefreshForLayoutConstruction(dataPart);
+                if (!this.refreshInstanceDataPart(dataPart)) {
+                    console.log(`Layout construction for ${Tools.getClassName(this._instanceDataParts[0])} failed because refresh returned false`);
+                }
+                this.afterRefreshForLayoutConstruction(dataPart, obj);
+                this.isVisible = curVisible;
+
+                var size = 0;
+                cti.fullContent.forEach((k, v) => {
+                    if (!v.category || cat.indexOf(v.category) !== -1) {
+                        if (v.attributeName === "zBias") {
+                            pd._zBiasOffset = v.instanceOffset.get(joinCat);
+                        }
+                        if (!v.size) {
+                            console.log(`ERROR: Couldn't detect the size of the Property ${v.attributeName} from type ${Tools.getClassName(cti.type)}. Property is ignored.`);
+                        } else {
+                            size += v.size;
+                        }
+                    }
+                });
+                pd._partDataStride = size;
+                pd._partUsedCategories = cat;
+                pd._partId = dataPart.id;
+                ctiArray.push(cti);
+            }
+            this._modelRenderCache._partsClassInfo = ctiArray;
+        }
+
+        protected onZOrderChanged() {
+            if (this.isTransparent && this._transparentPrimitiveInfo) {
+                this.renderGroup._renderableData.transparentPrimitiveZChanged(this._transparentPrimitiveInfo);
+                let gii = this.renderGroup._renderableData._renderGroupInstancesInfo.get(this.modelKey);
+
+                // Flag the transparentData dirty has will have to sort it again
+                gii.transparentOrderDirty = true;
+            }
+        }
+
+        protected _mustUpdateInstance(): boolean {
+            return false;
+        }
+
+        protected _useTextureAlpha(): boolean {
+            return false;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return false;
+        }
+
+        protected _isPrimAlphaTest(): boolean {
+            return false;
+        }
+
+        protected _isPrimTransparent(): boolean {
+            return false;
+        }
+
+        private _updateInstanceDataParts(gii: GroupInstanceInfo) {
+            // Fetch the GroupInstanceInfo if we don't already have it
+            let rd = this.renderGroup._renderableData;
+            if (!gii) {
+                gii = rd._renderGroupInstancesInfo.get(this.modelKey);
+            }
+
+            let isTransparent = this.isTransparent;
+            let isAlphaTest = this.isAlphaTest;
+            let wereTransparent = false;
+
+            // Check a render mode change
+            let rmChanged = false;
+            if (this._instanceDataParts.length>0) {
+                let firstPart = this._instanceDataParts[0];
+                let partRM = firstPart.renderMode;
+                let curRM = this.renderMode;
+
+                if (partRM !== curRM) {
+                    wereTransparent = partRM === Render2DContext.RenderModeTransparent;
+                    rmChanged = true;
+                    let gipd: TransparentGroupInfoPartData[];
+                    switch (curRM) {
+                        case Render2DContext.RenderModeTransparent:
+                            gipd = gii.transparentData;
+                            break;
+                        case Render2DContext.RenderModeAlphaTest:
+                            gipd = gii.alphaTestData;
+                            break;
+                        default:
+                            gipd = gii.opaqueData;
+                    }
+
+                    for (let i = 0; i < this._instanceDataParts.length; i++) {
+                        let part = this._instanceDataParts[i];
+                        part.freeElements();
+                        part.dataBuffer = gipd[i]._partData;
+                        part.renderMode = curRM;
+                    }
+
+                }
+            }
+
+            // Handle changes related to ZOffset
+            let visChanged = this._isFlagSet(SmartPropertyPrim.flagVisibilityChanged);
+
+            if (isTransparent || wereTransparent) {
+                // Handle visibility change, which is also triggered when the primitive just got created
+                if (visChanged || rmChanged) {
+                    if (this.isVisible && !wereTransparent) {
+                        if (!this._transparentPrimitiveInfo) {
+                            // Add the primitive to the list of transparent ones in the group that render is
+                            this._transparentPrimitiveInfo = rd.addNewTransparentPrimitiveInfo(this, gii);
+                        }
+                    } else {
+                        if (this._transparentPrimitiveInfo) {
+                            rd.removeTransparentPrimitiveInfo(this._transparentPrimitiveInfo);
+                            this._transparentPrimitiveInfo = null;
+                        }
+                    }
+                    gii.transparentOrderDirty = true;
+                }
+            }
+
+            let rebuildTrans = false;
+
+            // For each Instance Data part, refresh it to update the data in the DynamicFloatArray
+            for (let part of this._instanceDataParts) {
+                let justAllocated = false;
+                // Check if we need to allocate data elements (hidden prim which becomes visible again)
+                if (!part.dataElements && (visChanged || rmChanged || this.isVisible)) {
+                    part.allocElements();
+                    justAllocated = true;
+                }
+
+                InstanceClassInfo._CurCategories = gii.usedShaderCategories[gii.partIndexFromId.get(part.id.toString())];
+
+                // Will return false if the instance should not be rendered (not visible or other any reasons)
+                part.arrayLengthChanged = false;
+                if (!this.refreshInstanceDataPart(part)) {
+                    // Free the data element
+                    if (part.dataElements) {
+                        part.freeElements();
+                    }
+
+                    // The refresh couldn't succeed, push the primitive to be dirty again for the next render
+                    if (this.isVisible) {
+                        rd._primNewDirtyList.push(this);
+                    }
+                }
+
+                rebuildTrans = rebuildTrans || part.arrayLengthChanged || justAllocated;
+            }
+            this._instanceDirtyFlags = 0;
+
+            // Make the appropriate data dirty
+            if (isTransparent) {
+                gii.transparentDirty = true;
+                if (rebuildTrans) {
+                    rd._transparentListChanged = true;
+                }
+            } else if (isAlphaTest) {
+                gii.alphaTestDirty = true;
+            } else {
+                gii.opaqueDirty = true;
+            }
+
+            this._clearFlags(SmartPropertyPrim.flagVisibilityChanged);    // Reset the flag as we've handled the case            
+        }
+
+        _updateTransparentSegmentIndices(ts: TransparentSegment) {
+            let minOff = Prim2DBase._bigInt;
+            let maxOff = 0;
+
+            for (let part of this._instanceDataParts) {
+                if (part && part.dataElements) {
+                    part.dataBuffer.pack();
+                    for (let el of part.dataElements) {
+                        minOff = Math.min(minOff, el.offset);
+                        maxOff = Math.max(maxOff, el.offset);
+                    }
+                    ts.startDataIndex = Math.min(ts.startDataIndex, minOff / part.dataBuffer.stride);
+                    ts.endDataIndex = Math.max(ts.endDataIndex, (maxOff / part.dataBuffer.stride) + 1); // +1 for exclusive
+                }
+            }
+        }
+
+
+        // This internal method is mainly used for transparency processing
+        public _getNextPrimZOrder(): number {
+            let length = this._instanceDataParts.length;
+            for (let i = 0; i < length; i++) {
+                let part = this._instanceDataParts[i];
+                if (part) {
+                    let stride = part.dataBuffer.stride;
+                    let lastElementOffset = part.dataElements[part.dataElements.length - 1].offset;
+
+                    // check if it's the last in the DFA
+                    if (part.dataBuffer.totalElementCount * stride <= lastElementOffset) {
+                        return null;
+                    }
+
+                    // Return the Z of the next primitive that lies in the DFA
+                    return part.dataBuffer[lastElementOffset + stride + this.modelRenderCache._partData[i]._zBiasOffset];
+                }
+            }
+            return null;
+        }
+
+        // This internal method is mainly used for transparency processing
+        public _getPrevPrimZOrder(): number {
+            let length = this._instanceDataParts.length;
+            for (let i = 0; i < length; i++) {
+                let part = this._instanceDataParts[i];
+                if (part) {
+                    let stride = part.dataBuffer.stride;
+                    let firstElementOffset = part.dataElements[0].offset;
+
+                    // check if it's the first in the DFA
+                    if (firstElementOffset === 0) {
+                        return null;
+                    }
+
+                    // Return the Z of the previous primitive that lies in the DFA
+                    return part.dataBuffer[firstElementOffset - stride + this.modelRenderCache._partData[i]._zBiasOffset];
+                }
+            }
+            return null;
+        }
+
+        /**
+         * Transform a given point using the Primitive's origin setting.
+         * This method requires the Primitive's actualSize to be accurate
+         * @param p the point to transform
+         * @param originOffset an offset applied on the current origin before performing the transformation. Depending on which frame of reference your data is expressed you may have to apply a offset. (if you data is expressed from the bottom/left, no offset is required. If it's expressed from the center the a [-0.5;-0.5] offset has to be applied.
+         * @param res an allocated Vector2 that will receive the transformed content
+         */
+        protected transformPointWithOriginByRef(p: Vector2, originOffset:Vector2, res: Vector2) {
+            let actualSize = this.actualSize;
+            res.x = p.x - ((this.origin.x + (originOffset ? originOffset.x : 0)) * actualSize.width);
+            res.y = p.y - ((this.origin.y + (originOffset ? originOffset.y : 0)) * actualSize.height);
+        }
+
+        protected transformPointWithOriginToRef(p: Vector2, originOffset: Vector2, res: Vector2) {
+            this.transformPointWithOriginByRef(p, originOffset, res);
+            return res;
+        }
+
+        /**
+         * Get the info for a given effect based on the dataPart metadata
+         * @param dataPartId partId in part list to get the info
+         * @param vertexBufferAttributes vertex buffer attributes to manually add
+         * @param uniforms uniforms to manually add
+         * @param useInstanced specified if Instanced Array should be used, if null the engine caps will be used (so true if WebGL supports it, false otherwise), but you have the possibility to override the engine capability. However, if you manually set true but the engine does not support Instanced Array, this method will return null
+         */
+        protected getDataPartEffectInfo(dataPartId: number, vertexBufferAttributes: string[], uniforms: string[] = null, useInstanced: boolean = null): { attributes: string[], uniforms: string[], defines: string } {
+            let dataPart = Tools.first(this._instanceDataParts, i => i.id === dataPartId);
+            if (!dataPart) {
+                return null;
+            }
+
+            let instancedArray = this.owner.supportInstancedArray;
+            if (useInstanced != null) {
+                // Check if the caller ask for Instanced Array and the engine does not support it, return null if it's the case
+                if (useInstanced && instancedArray === false) {
+                    return null;
+                }
+
+                // Use the caller's setting
+                instancedArray = useInstanced;
+            }
+
+            let cti = dataPart.getClassTreeInfo();
+            let categories = this.getUsedShaderCategories(dataPart);
+            let att = cti.classContent.getShaderAttributes(categories);
+            let defines = "";
+            categories.forEach(c => { defines += `#define ${c}\n` });
+            if (instancedArray) {
+                defines += "#define Instanced\n";
+            }
+
+            return {
+                attributes: instancedArray ? vertexBufferAttributes.concat(att) : vertexBufferAttributes,
+                uniforms: instancedArray ? (uniforms != null ? uniforms : []) : ((uniforms != null) ? att.concat(uniforms) : (att!=null ? att : [])),
+                defines: defines
+            };
+        }
+
+        protected get modelRenderCache(): ModelRenderCache {
+            return this._modelRenderCache;
+        }
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            return null;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            return null;
+        }
+
+        protected getUsedShaderCategories(dataPart: InstanceDataBase): string[] {
+            return [];
+        }
+
+        protected beforeRefreshForLayoutConstruction(part: InstanceDataBase): any {
+
+        }
+
+        protected afterRefreshForLayoutConstruction(part: InstanceDataBase, obj: any) {
+
+        }
+
+        protected applyActualScaleOnTransform(): boolean {
+            return true;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!this.isVisible) {
+                return false;
+            }
+            part.isVisible = this.isVisible;
+
+            // Which means, if there's only one data element, we're update it from this method, otherwise it is the responsibility of the derived class to call updateInstanceDataPart as many times as needed, properly (look at Text2D's implementation for more information)
+            if (part.dataElementCount === 1) {
+                part.curElement = 0;
+                this.updateInstanceDataPart(part);
+            }
+            return true;
+        }
+
+        private static _uV = new Vector2(1, 1);
+
+        /**
+         * Update the instanceDataBase level properties of a part
+         * @param part the part to update
+         * @param positionOffset to use in multi part per primitive (e.g. the Text2D has N parts for N letter to display), this give the offset to apply (e.g. the position of the letter from the bottom/left corner of the text).
+         */
+        protected updateInstanceDataPart(part: InstanceDataBase, positionOffset: Vector2 = null) {
+            let t = this._globalTransform.multiply(this.renderGroup.invGlobalTransform);    // Compute the transformation into the renderGroup's space
+            let rgScale = this._areSomeFlagsSet(SmartPropertyPrim.flagDontInheritParentScale) ? RenderablePrim2D._uV : this.renderGroup.actualScale;         // We still need to apply the scale of the renderGroup to our rendering, so get it.
+            let size = (<Size>this.renderGroup.viewportSize);
+            let zBias = this.actualZOffset;
+
+            let offX = 0;
+            let offY = 0;
+            // If there's an offset, apply the global transformation matrix on it to get a global offset
+            if (positionOffset) {
+                offX = positionOffset.x * t.m[0] + positionOffset.y * t.m[4];
+                offY = positionOffset.x * t.m[1] + positionOffset.y * t.m[5];
+            }
+
+            // Have to convert the coordinates to clip space which is ranged between [-1;1] on X and Y axis, with 0,0 being the left/bottom corner
+            // Current coordinates are expressed in renderGroup coordinates ([0, renderGroup.actualSize.width|height]) with 0,0 being at the left/top corner
+            // So for X: 
+            //  - tx.x = value * 2 / width: is to switch from [0, renderGroup.width] to [0, 2]
+            //  - tx.w = (value * 2 / width) - 1: w stores the translation in renderGroup coordinates so (value * 2 / width) to switch to a clip space translation value. - 1 is to offset the overall [0;2] to [-1;1].
+            // At last we don't forget to apply the actualScale of the Render Group to tx[0] and ty[1] to propagate scaling correctly
+            let w = size.width;
+            let h = size.height;
+            let invZBias = 1 / zBias;
+            let tx = new Vector4(t.m[0] * rgScale.x * 2 / w, t.m[4] * 2 / w, 0/*t.m[8]*/, ((t.m[12] + offX) * rgScale.x * 2 / w) - 1);
+            let ty = new Vector4(t.m[1] * 2 / h, t.m[5] * rgScale.y * 2 / h, 0/*t.m[9]*/, ((t.m[13] + offY) * rgScale.y * 2 / h) - 1);
+
+            if (!this.applyActualScaleOnTransform()) {
+                let las = this.actualScale;
+                tx.x /= las.x;
+                ty.y /= las.y;
+            }
+
+            part.transformX = tx;
+            part.transformY = ty;
+            part.opacity = this.actualOpacity;
+
+            // Stores zBias and it's inverse value because that's needed to compute the clip space W coordinate (which is 1/Z, so 1/zBias)
+            part.zBias = new Vector2(zBias, invZBias);
+        }
+
+        protected _updateRenderMode() {
+            if (this.isTransparent) {
+                this._renderMode = Render2DContext.RenderModeTransparent;
+            } else if (this.isAlphaTest) {
+                this._renderMode = Render2DContext.RenderModeAlphaTest;
+            } else {
+                this._renderMode = Render2DContext.RenderModeOpaque;
+            }
+        }
+
+        private _modelRenderCache: ModelRenderCache;
+        private _transparentPrimitiveInfo: TransparentPrimitiveInfo;
+
+        protected _instanceDataParts: InstanceDataBase[];
+        private _renderMode: number;
+    }
+
+
+}

canvas2D/src/babylon.shape2d.js

@@ -0,0 +1,308 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Shape2D = (function (_super) {
+        __extends(Shape2D, _super);
+        function Shape2D(settings) {
+            _super.call(this, settings);
+            if (!settings) {
+                settings = {};
+            }
+            var borderBrush = null;
+            if (settings.border) {
+                if (typeof (settings.border) === "string") {
+                    borderBrush = BABYLON.Canvas2D.GetBrushFromString(settings.border);
+                }
+                else {
+                    borderBrush = settings.border;
+                }
+            }
+            var fillBrush = null;
+            if (settings.fill) {
+                if (typeof (settings.fill) === "string") {
+                    fillBrush = BABYLON.Canvas2D.GetBrushFromString(settings.fill);
+                }
+                else {
+                    fillBrush = settings.fill;
+                }
+            }
+            this._isTransparent = false;
+            this._oldTransparent = false;
+            this.border = borderBrush;
+            this.fill = fillBrush;
+            this._updateTransparencyStatus();
+            this.borderThickness = settings.borderThickness;
+        }
+        Object.defineProperty(Shape2D.prototype, "border", {
+            get: function () {
+                return this._border;
+            },
+            set: function (value) {
+                this._border = value;
+                this._updateTransparencyStatus();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2D.prototype, "fill", {
+            /**
+             * Get/set the brush to render the Fill part of the Primitive
+             */
+            get: function () {
+                return this._fill;
+            },
+            set: function (value) {
+                this._fill = value;
+                this._updateTransparencyStatus();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2D.prototype, "borderThickness", {
+            get: function () {
+                return this._borderThickness;
+            },
+            set: function (value) {
+                this._borderThickness = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Shape2D.prototype.getUsedShaderCategories = function (dataPart) {
+            var cat = _super.prototype.getUsedShaderCategories.call(this, dataPart);
+            // Fill Part
+            if (dataPart.id === Shape2D.SHAPE2D_FILLPARTID) {
+                var fill = this.fill;
+                if (fill instanceof BABYLON.SolidColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLSOLID);
+                }
+                if (fill instanceof BABYLON.GradientColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT);
+                }
+            }
+            // Border Part
+            if (dataPart.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                cat.push(Shape2D.SHAPE2D_CATEGORY_BORDER);
+                var border = this.border;
+                if (border instanceof BABYLON.SolidColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID);
+                }
+                if (border instanceof BABYLON.GradientColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT);
+                }
+            }
+            return cat;
+        };
+        Shape2D.prototype.applyActualScaleOnTransform = function () {
+            return false;
+        };
+        Shape2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            // Fill Part
+            if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
+                var d = part;
+                if (this.fill) {
+                    var fill = this.fill;
+                    if (fill instanceof BABYLON.SolidColorBrush2D) {
+                        d.fillSolidColor = fill.color;
+                    }
+                    else if (fill instanceof BABYLON.GradientColorBrush2D) {
+                        d.fillGradientColor1 = fill.color1;
+                        d.fillGradientColor2 = fill.color2;
+                        var t = BABYLON.Matrix.Compose(new BABYLON.Vector3(fill.scale, fill.scale, fill.scale), BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(0, 0, 1), fill.rotation), new BABYLON.Vector3(fill.translation.x, fill.translation.y, 0));
+                        var ty = new BABYLON.Vector4(t.m[1], t.m[5], t.m[9], t.m[13]);
+                        d.fillGradientTY = ty;
+                    }
+                }
+            }
+            else if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                var d = part;
+                if (this.border) {
+                    d.borderThickness = this.borderThickness;
+                    var border = this.border;
+                    if (border instanceof BABYLON.SolidColorBrush2D) {
+                        d.borderSolidColor = border.color;
+                    }
+                    else if (border instanceof BABYLON.GradientColorBrush2D) {
+                        d.borderGradientColor1 = border.color1;
+                        d.borderGradientColor2 = border.color2;
+                        var t = BABYLON.Matrix.Compose(new BABYLON.Vector3(border.scale, border.scale, border.scale), BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(0, 0, 1), border.rotation), new BABYLON.Vector3(border.translation.x, border.translation.y, 0));
+                        var ty = new BABYLON.Vector4(t.m[1], t.m[5], t.m[9], t.m[13]);
+                        d.borderGradientTY = ty;
+                    }
+                }
+            }
+            return true;
+        };
+        Shape2D.prototype._updateTransparencyStatus = function () {
+            this._isTransparent = (this._border && this._border.isTransparent()) || (this._fill && this._fill.isTransparent()) || (this.actualOpacity < 1);
+            if (this._isTransparent !== this._oldTransparent) {
+                this._oldTransparent = this._isTransparent;
+                this._updateRenderMode();
+            }
+        };
+        Shape2D.prototype._mustUpdateInstance = function () {
+            var res = this._oldTransparent !== this._isTransparent;
+            if (res) {
+                this._updateRenderMode();
+                this._oldTransparent = this._isTransparent;
+            }
+            return res;
+        };
+        Shape2D.prototype._isPrimTransparent = function () {
+            return this._isTransparent;
+        };
+        Shape2D.SHAPE2D_BORDERPARTID = 1;
+        Shape2D.SHAPE2D_FILLPARTID = 2;
+        Shape2D.SHAPE2D_CATEGORY_BORDER = "Border";
+        Shape2D.SHAPE2D_CATEGORY_BORDERSOLID = "BorderSolid";
+        Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT = "BorderGradient";
+        Shape2D.SHAPE2D_CATEGORY_FILLSOLID = "FillSolid";
+        Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT = "FillGradient";
+        Shape2D.SHAPE2D_PROPCOUNT = BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5;
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, function (pi) { return Shape2D.borderProperty = pi; }, true)
+        ], Shape2D.prototype, "border", null);
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, function (pi) { return Shape2D.fillProperty = pi; }, true)
+        ], Shape2D.prototype, "fill", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, function (pi) { return Shape2D.borderThicknessProperty = pi; })
+        ], Shape2D.prototype, "borderThickness", null);
+        Shape2D = __decorate([
+            BABYLON.className("Shape2D")
+        ], Shape2D);
+        return Shape2D;
+    }(BABYLON.RenderablePrim2D));
+    BABYLON.Shape2D = Shape2D;
+    var Shape2DInstanceData = (function (_super) {
+        __extends(Shape2DInstanceData, _super);
+        function Shape2DInstanceData() {
+            _super.apply(this, arguments);
+        }
+        Object.defineProperty(Shape2DInstanceData.prototype, "fillSolidColor", {
+            // FILL ATTRIBUTES
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "fillGradientColor1", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "fillGradientColor2", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "fillGradientTY", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderThickness", {
+            // BORDER ATTRIBUTES
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderSolidColor", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderGradientColor1", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderGradientColor2", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Shape2DInstanceData.prototype, "borderGradientTY", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_FILLSOLID)
+        ], Shape2DInstanceData.prototype, "fillSolidColor", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        ], Shape2DInstanceData.prototype, "fillGradientColor1", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        ], Shape2DInstanceData.prototype, "fillGradientColor2", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        ], Shape2DInstanceData.prototype, "fillGradientTY", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDER)
+        ], Shape2DInstanceData.prototype, "borderThickness", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID)
+        ], Shape2DInstanceData.prototype, "borderSolidColor", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        ], Shape2DInstanceData.prototype, "borderGradientColor1", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        ], Shape2DInstanceData.prototype, "borderGradientColor2", null);
+        __decorate([
+            BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        ], Shape2DInstanceData.prototype, "borderGradientTY", null);
+        return Shape2DInstanceData;
+    }(BABYLON.InstanceDataBase));
+    BABYLON.Shape2DInstanceData = Shape2DInstanceData;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.shape2d.ts

@@ -0,0 +1,277 @@
+module BABYLON {
+
+    @className("Shape2D")
+    /**
+     * The abstract class for parametric shape based Primitives types.
+     * Shape2D based primitives are composed of two parts: fill and border, both are optional but at least one must be specified.
+     * The fill part is the primitive 'body', the border is a border around this body. The border has a thickness that can be changed.
+     */
+    export abstract class Shape2D extends RenderablePrim2D {
+        static SHAPE2D_BORDERPARTID            = 1;
+        static SHAPE2D_FILLPARTID              = 2;
+        static SHAPE2D_CATEGORY_BORDER         = "Border";
+        static SHAPE2D_CATEGORY_BORDERSOLID    = "BorderSolid";
+        static SHAPE2D_CATEGORY_BORDERGRADIENT = "BorderGradient";
+        static SHAPE2D_CATEGORY_FILLSOLID      = "FillSolid";
+        static SHAPE2D_CATEGORY_FILLGRADIENT   = "FillGradient";
+
+        static SHAPE2D_PROPCOUNT: number = RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5;
+        public static borderProperty: Prim2DPropInfo;
+        public static fillProperty: Prim2DPropInfo;
+        public static borderThicknessProperty: Prim2DPropInfo;
+
+        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => Shape2D.borderProperty = pi, true)
+        /**
+         * Get/set the brush to render the Border part of the Primitive
+         */
+        public get border(): IBrush2D {
+            return this._border;
+        }
+
+        public set border(value: IBrush2D) {
+            this._border = value;
+            this._updateTransparencyStatus();
+        }
+
+        /**
+         * Get/set the brush to render the Fill part of the Primitive
+         */
+        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Shape2D.fillProperty = pi, true)
+        public get fill(): IBrush2D {
+            return this._fill;
+        }
+
+        public set fill(value: IBrush2D) {
+            this._fill = value;
+            this._updateTransparencyStatus();
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Shape2D.borderThicknessProperty = pi)
+        /**
+         * Get/set the thickness of the border part.
+         */
+        public get borderThickness(): number {
+            return this._borderThickness;
+        }
+
+        public set borderThickness(value: number) {
+            this._borderThickness = value;
+        }
+
+        constructor(settings?: {
+            fill           ?: IBrush2D | string,
+            border         ?: IBrush2D | string,
+            borderThickness?: number,
+        }) {
+
+            super(settings);
+
+            if (!settings) {
+                settings = {};
+            }
+
+            let borderBrush: IBrush2D = null;
+            if (settings.border) {
+                if (typeof (settings.border) === "string") {
+                    borderBrush = Canvas2D.GetBrushFromString(<string>settings.border);
+                } else {
+                    borderBrush = <IBrush2D>settings.border;
+                }
+            }
+
+            let fillBrush: IBrush2D = null;
+            if (settings.fill) {
+                if (typeof (settings.fill) === "string") {
+                    fillBrush = Canvas2D.GetBrushFromString(<string>settings.fill);
+                } else {
+                    fillBrush = <IBrush2D>settings.fill;
+                }
+            }
+
+            this._isTransparent = false;
+            this._oldTransparent = false;
+            this.border = borderBrush;
+            this.fill = fillBrush;
+            this._updateTransparencyStatus();
+            this.borderThickness = settings.borderThickness;
+        }
+
+        protected getUsedShaderCategories(dataPart: InstanceDataBase): string[] {
+            var cat = super.getUsedShaderCategories(dataPart);
+
+            // Fill Part
+            if (dataPart.id === Shape2D.SHAPE2D_FILLPARTID) {
+                let fill = this.fill;
+                if (fill instanceof SolidColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLSOLID);
+                }
+                if (fill instanceof GradientColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT);
+                }
+            }
+
+            // Border Part
+            if (dataPart.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                cat.push(Shape2D.SHAPE2D_CATEGORY_BORDER);
+
+                let border = this.border;
+                if (border instanceof SolidColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID);
+                }
+                if (border instanceof GradientColorBrush2D) {
+                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT);
+                }
+            }
+
+            return cat;
+        }
+
+        protected applyActualScaleOnTransform(): boolean {
+            return false;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+
+            // Fill Part
+            if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
+                let d = <Shape2DInstanceData>part;
+
+                if (this.fill) {
+                    let fill = this.fill;
+                    if (fill instanceof SolidColorBrush2D) {
+                        d.fillSolidColor = fill.color;
+                    } else if (fill instanceof GradientColorBrush2D) {
+                        d.fillGradientColor1 = fill.color1;
+                        d.fillGradientColor2 = fill.color2;
+                        var t = Matrix.Compose(new Vector3(fill.scale, fill.scale, fill.scale), Quaternion.RotationAxis(new Vector3(0, 0, 1), fill.rotation), new Vector3(fill.translation.x, fill.translation.y, 0));
+
+                        let ty = new Vector4(t.m[1], t.m[5], t.m[9], t.m[13]);
+                        d.fillGradientTY = ty;
+                    }
+                }
+            }
+
+            else if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
+                let d = <Shape2DInstanceData>part;
+
+                if (this.border) {
+                    d.borderThickness = this.borderThickness;
+
+                    let border = this.border;
+                    if (border instanceof SolidColorBrush2D) {
+                        d.borderSolidColor = border.color;
+                    } else if (border instanceof GradientColorBrush2D) {
+                        d.borderGradientColor1 = border.color1;
+                        d.borderGradientColor2 = border.color2;
+                        var t = Matrix.Compose(new Vector3(border.scale, border.scale, border.scale), Quaternion.RotationAxis(new Vector3(0, 0, 1), border.rotation), new Vector3(border.translation.x, border.translation.y, 0));
+
+                        let ty = new Vector4(t.m[1], t.m[5], t.m[9], t.m[13]);
+                        d.borderGradientTY = ty;
+                    }
+                }
+            }
+
+            return true;
+        }
+
+        private _updateTransparencyStatus() {
+            this._isTransparent = (this._border && this._border.isTransparent()) || (this._fill && this._fill.isTransparent()) || (this.actualOpacity < 1);
+            if (this._isTransparent !== this._oldTransparent) {
+                this._oldTransparent = this._isTransparent;
+                this._updateRenderMode();
+            }
+        }
+
+        protected _mustUpdateInstance(): boolean {
+            let res = this._oldTransparent !== this._isTransparent;
+            if (res) {
+                this._updateRenderMode();
+                this._oldTransparent = this._isTransparent;
+            }
+            return res;
+        }
+
+        protected _isPrimTransparent(): boolean {
+            return this._isTransparent;
+        }
+
+        private _oldTransparent: boolean;
+        private _isTransparent: boolean;
+        private _border: IBrush2D;
+        private _borderThickness: number;
+        private _fill: IBrush2D;
+
+    }
+
+    export class Shape2DInstanceData extends InstanceDataBase {
+        // FILL ATTRIBUTES
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLSOLID)
+        get fillSolidColor(): Color4 {
+            return null;
+        }
+        set fillSolidColor(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        get fillGradientColor1(): Color4 {
+            return null;
+        }
+        set fillGradientColor1(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        get fillGradientColor2(): Color4 {
+            return null;
+        }
+        set fillGradientColor2(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
+        get fillGradientTY(): Vector4 {
+            return null;
+        }
+        set fillGradientTY(value: Vector4) {
+        }
+
+        // BORDER ATTRIBUTES
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDER)
+        get borderThickness(): number {
+            return null;
+        }
+        set borderThickness(value: number) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID)
+        get borderSolidColor(): Color4 {
+            return null;
+        }
+        set borderSolidColor(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        get borderGradientColor1(): Color4 {
+            return null;
+        }
+        set borderGradientColor1(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        get borderGradientColor2(): Color4 {
+            return null;
+        }
+        set borderGradientColor2(value: Color4) {
+        }
+
+        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
+        get borderGradientTY(): Vector4 {
+            return null;
+        }
+        set borderGradientTY(value: Vector4) {
+        }
+    }
+}

canvas2D/src/babylon.smartPropertyPrim.js

@@ -0,0 +1,584 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Prim2DClassInfo = (function () {
+        function Prim2DClassInfo() {
+        }
+        return Prim2DClassInfo;
+    }());
+    BABYLON.Prim2DClassInfo = Prim2DClassInfo;
+    var Prim2DPropInfo = (function () {
+        function Prim2DPropInfo() {
+        }
+        Prim2DPropInfo.PROPKIND_MODEL = 1;
+        Prim2DPropInfo.PROPKIND_INSTANCE = 2;
+        Prim2DPropInfo.PROPKIND_DYNAMIC = 3;
+        return Prim2DPropInfo;
+    }());
+    BABYLON.Prim2DPropInfo = Prim2DPropInfo;
+    /**
+     * Custom type of the propertyChanged observable
+     */
+    var PropertyChangedInfo = (function () {
+        function PropertyChangedInfo() {
+        }
+        return PropertyChangedInfo;
+    }());
+    BABYLON.PropertyChangedInfo = PropertyChangedInfo;
+    var ClassTreeInfo = (function () {
+        function ClassTreeInfo(baseClass, type, classContentFactory) {
+            this._baseClass = baseClass;
+            this._type = type;
+            this._subClasses = new Array();
+            this._levelContent = new BABYLON.StringDictionary();
+            this._classContentFactory = classContentFactory;
+        }
+        Object.defineProperty(ClassTreeInfo.prototype, "classContent", {
+            get: function () {
+                if (!this._classContent) {
+                    this._classContent = this._classContentFactory(this._baseClass ? this._baseClass.classContent : null);
+                }
+                return this._classContent;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ClassTreeInfo.prototype, "type", {
+            get: function () {
+                return this._type;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ClassTreeInfo.prototype, "levelContent", {
+            get: function () {
+                return this._levelContent;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ClassTreeInfo.prototype, "fullContent", {
+            get: function () {
+                if (!this._fullContent) {
+                    var dic_1 = new BABYLON.StringDictionary();
+                    var curLevel = this;
+                    while (curLevel) {
+                        curLevel.levelContent.forEach(function (k, v) { return dic_1.add(k, v); });
+                        curLevel = curLevel._baseClass;
+                    }
+                    this._fullContent = dic_1;
+                }
+                return this._fullContent;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ClassTreeInfo.prototype.getLevelOf = function (type) {
+            // Are we already there?
+            if (type === this._type) {
+                return this;
+            }
+            var baseProto = Object.getPrototypeOf(type);
+            var curProtoContent = this.getOrAddType(Object.getPrototypeOf(baseProto), baseProto);
+            if (!curProtoContent) {
+                this.getLevelOf(baseProto);
+            }
+            return this.getOrAddType(baseProto, type);
+        };
+        ClassTreeInfo.prototype.getOrAddType = function (baseType, type) {
+            // Are we at the level corresponding to the baseType?
+            // If so, get or add the level we're looking for
+            if (baseType === this._type) {
+                for (var _i = 0, _a = this._subClasses; _i < _a.length; _i++) {
+                    var subType = _a[_i];
+                    if (subType.type === type) {
+                        return subType.node;
+                    }
+                }
+                var node = new ClassTreeInfo(this, type, this._classContentFactory);
+                var info = { type: type, node: node };
+                this._subClasses.push(info);
+                return info.node;
+            }
+            // Recurse down to keep looking for the node corresponding to the baseTypeName
+            for (var _b = 0, _c = this._subClasses; _b < _c.length; _b++) {
+                var subType = _c[_b];
+                var info = subType.node.getOrAddType(baseType, type);
+                if (info) {
+                    return info;
+                }
+            }
+            return null;
+        };
+        ClassTreeInfo.get = function (type) {
+            var dic = type["__classTreeInfo"];
+            if (!dic) {
+                return null;
+            }
+            return dic.getLevelOf(type);
+        };
+        ClassTreeInfo.getOrRegister = function (type, classContentFactory) {
+            var dic = type["__classTreeInfo"];
+            if (!dic) {
+                dic = new ClassTreeInfo(null, type, classContentFactory);
+                type["__classTreeInfo"] = dic;
+            }
+            return dic;
+        };
+        return ClassTreeInfo;
+    }());
+    BABYLON.ClassTreeInfo = ClassTreeInfo;
+    var SmartPropertyPrim = (function () {
+        function SmartPropertyPrim() {
+            this._flags = 0;
+            this._modelKey = null;
+            this._instanceDirtyFlags = 0;
+            this._levelBoundingInfo = new BABYLON.BoundingInfo2D();
+            this.animations = new Array();
+        }
+        Object.defineProperty(SmartPropertyPrim.prototype, "isDisposed", {
+            /**
+             * Check if the object is disposed or not.
+             * @returns true if the object is dispose, false otherwise.
+             */
+            get: function () {
+                return this._isFlagSet(SmartPropertyPrim.flagIsDisposed);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Disposable pattern, this method must be overloaded by derived types in order to clean up hardware related resources.
+         * @returns false if the object is already dispose, true otherwise. Your implementation must call super.dispose() and check for a false return and return immediately if it's the case.
+         */
+        SmartPropertyPrim.prototype.dispose = function () {
+            if (this.isDisposed) {
+                return false;
+            }
+            // Don't set to null, it may upset somebody...
+            this.animations.splice(0);
+            this._setFlags(SmartPropertyPrim.flagIsDisposed);
+            return true;
+        };
+        /**
+         * Returns as a new array populated with the Animatable used by the primitive. Must be overloaded by derived primitives.
+         * Look at Sprite2D for more information
+         */
+        SmartPropertyPrim.prototype.getAnimatables = function () {
+            return new Array();
+        };
+        Object.defineProperty(SmartPropertyPrim.prototype, "modelKey", {
+            /**
+             * Property giving the Model Key associated to the property.
+             * This value is constructed from the type of the primitive and all the name/value of its properties declared with the modelLevelProperty decorator
+             * @returns the model key string.
+             */
+            get: function () {
+                var _this = this;
+                // No need to compute it?
+                if (!this._isFlagSet(SmartPropertyPrim.flagModelDirty) && this._modelKey) {
+                    return this._modelKey;
+                }
+                var modelKey = "Class:" + BABYLON.Tools.getClassName(this) + ";";
+                var propDic = this.propDic;
+                propDic.forEach(function (k, v) {
+                    if (v.kind === Prim2DPropInfo.PROPKIND_MODEL) {
+                        var propVal = _this[v.name];
+                        // Special case, array, this WON'T WORK IN ALL CASES, all entries have to be of the same type and it must be a BJS well known one
+                        if (propVal && propVal.constructor === Array) {
+                            var firstVal = propVal[0];
+                            if (!firstVal) {
+                                propVal = 0;
+                            }
+                            else {
+                                propVal = BABYLON.Tools.hashCodeFromStream(BABYLON.Tools.arrayOrStringFeeder(propVal));
+                            }
+                        }
+                        modelKey += v.name + ":" + ((propVal != null) ? ((v.typeLevelCompare) ? BABYLON.Tools.getClassName(propVal) : propVal.toString()) : "[null]") + ";";
+                    }
+                });
+                this._clearFlags(SmartPropertyPrim.flagModelDirty);
+                this._modelKey = modelKey;
+                return modelKey;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SmartPropertyPrim.prototype, "isDirty", {
+            /**
+             * States if the Primitive is dirty and should be rendered again next time.
+             * @returns true is dirty, false otherwise
+             */
+            get: function () {
+                return (this._instanceDirtyFlags !== 0) || this._areSomeFlagsSet(SmartPropertyPrim.flagModelDirty | SmartPropertyPrim.flagPositioningDirty | SmartPropertyPrim.flagLayoutDirty);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SmartPropertyPrim.prototype, "propDic", {
+            /**
+             * Access the dictionary of properties metadata. Only properties decorated with XXXXLevelProperty are concerned
+             * @returns the dictionary, the key is the property name as declared in Javascript, the value is the metadata object
+             */
+            get: function () {
+                if (!this._propInfo) {
+                    var cti = ClassTreeInfo.get(Object.getPrototypeOf(this));
+                    if (!cti) {
+                        throw new Error("Can't access the propDic member in class definition, is this class SmartPropertyPrim based?");
+                    }
+                    this._propInfo = cti.fullContent;
+                }
+                return this._propInfo;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        SmartPropertyPrim._createPropInfo = function (target, propName, propId, dirtyBoundingInfo, dirtyParentBoundingBox, typeLevelCompare, kind) {
+            var dic = ClassTreeInfo.getOrRegister(target, function () { return new Prim2DClassInfo(); });
+            var node = dic.getLevelOf(target);
+            var propInfo = node.levelContent.get(propId.toString());
+            if (propInfo) {
+                throw new Error("The ID " + propId + " is already taken by another property declaration named: " + propInfo.name);
+            }
+            // Create, setup and add the PropInfo object to our prop dictionary
+            propInfo = new Prim2DPropInfo();
+            propInfo.id = propId;
+            propInfo.flagId = Math.pow(2, propId);
+            propInfo.kind = kind;
+            propInfo.name = propName;
+            propInfo.dirtyBoundingInfo = dirtyBoundingInfo;
+            propInfo.dirtyParentBoundingInfo = dirtyParentBoundingBox;
+            propInfo.typeLevelCompare = typeLevelCompare;
+            node.levelContent.add(propName, propInfo);
+            return propInfo;
+        };
+        SmartPropertyPrim._checkUnchanged = function (curValue, newValue) {
+            // Nothing to nothing: nothing to do!
+            if ((curValue === null && newValue === null) || (curValue === undefined && newValue === undefined)) {
+                return true;
+            }
+            // Check value unchanged
+            if ((curValue != null) && (newValue != null)) {
+                if (typeof (curValue.equals) == "function") {
+                    if (curValue.equals(newValue)) {
+                        return true;
+                    }
+                }
+                else {
+                    if (curValue === newValue) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        SmartPropertyPrim.prototype._triggerPropertyChanged = function (propInfo, newValue) {
+            if (this.isDisposed) {
+                return;
+            }
+            if (!propInfo) {
+                return;
+            }
+            this._handlePropChanged(undefined, newValue, propInfo.name, propInfo, propInfo.typeLevelCompare);
+        };
+        SmartPropertyPrim.prototype._boundingBoxDirty = function () {
+            this._setFlags(SmartPropertyPrim.flagLevelBoundingInfoDirty);
+            // Escalate the dirty flag in the instance hierarchy, stop when a renderable group is found or at the end
+            if (this instanceof BABYLON.Prim2DBase) {
+                var curprim = this;
+                while (curprim) {
+                    curprim._setFlags(SmartPropertyPrim.flagBoundingInfoDirty);
+                    if (curprim.isSizeAuto) {
+                        curprim.onPrimitivePropertyDirty(BABYLON.Prim2DBase.sizeProperty.flagId);
+                        curprim._setFlags(SmartPropertyPrim.flagPositioningDirty);
+                    }
+                    if (curprim instanceof BABYLON.Group2D) {
+                        if (curprim.isRenderableGroup) {
+                            break;
+                        }
+                    }
+                    curprim = curprim.parent;
+                }
+            }
+        };
+        SmartPropertyPrim.prototype._handlePropChanged = function (curValue, newValue, propName, propInfo, typeLevelCompare) {
+            // If the property change also dirty the boundingInfo, update the boundingInfo dirty flags
+            if (propInfo.dirtyBoundingInfo) {
+                this._boundingBoxDirty();
+            }
+            else if (propInfo.dirtyParentBoundingInfo) {
+                var p = this._parent;
+                if (p != null) {
+                    p._boundingBoxDirty();
+                }
+            }
+            // Trigger property changed
+            var info = SmartPropertyPrim.propChangedInfo;
+            info.oldValue = curValue;
+            info.newValue = newValue;
+            info.propertyName = propName;
+            var propMask = propInfo.flagId;
+            this.propertyChanged.notifyObservers(info, propMask);
+            // If the property belong to a group, check if it's a cached one, and dirty its render sprite accordingly
+            if (this instanceof BABYLON.Group2D) {
+                this.handleGroupChanged(propInfo);
+            }
+            // Check for parent layout dirty
+            if (this instanceof BABYLON.Prim2DBase) {
+                var p = this._parent;
+                if (p != null && p.layoutEngine && (p.layoutEngine.layoutDirtyOnPropertyChangedMask & propInfo.flagId) !== 0) {
+                    p._setLayoutDirty();
+                }
+            }
+            // For type level compare, if there's a change of type it's a change of model, otherwise we issue an instance change
+            var instanceDirty = false;
+            if (typeLevelCompare && curValue != null && newValue != null) {
+                var cvProto = curValue.__proto__;
+                var nvProto = newValue.__proto__;
+                instanceDirty = (cvProto === nvProto);
+            }
+            // Set the dirty flags
+            if (!instanceDirty && (propInfo.kind === Prim2DPropInfo.PROPKIND_MODEL)) {
+                if (!this.isDirty) {
+                    this._setFlags(SmartPropertyPrim.flagModelDirty);
+                }
+            }
+            else if (instanceDirty || (propInfo.kind === Prim2DPropInfo.PROPKIND_INSTANCE) || (propInfo.kind === Prim2DPropInfo.PROPKIND_DYNAMIC)) {
+                this.onPrimitivePropertyDirty(propMask);
+            }
+        };
+        SmartPropertyPrim.prototype.onPrimitivePropertyDirty = function (propFlagId) {
+            this.onPrimBecomesDirty();
+            this._instanceDirtyFlags |= propFlagId;
+        };
+        SmartPropertyPrim.prototype.handleGroupChanged = function (prop) {
+        };
+        /**
+         * Check if a given set of properties are dirty or not.
+         * @param flags a ORed combination of Prim2DPropInfo.flagId values
+         * @return true if at least one property is dirty, false if none of them are.
+         */
+        SmartPropertyPrim.prototype.checkPropertiesDirty = function (flags) {
+            return (this._instanceDirtyFlags & flags) !== 0;
+        };
+        /**
+         * Clear a given set of properties.
+         * @param flags a ORed combination of Prim2DPropInfo.flagId values
+         * @return the new set of property still marked as dirty
+         */
+        SmartPropertyPrim.prototype.clearPropertiesDirty = function (flags) {
+            this._instanceDirtyFlags &= ~flags;
+            return this._instanceDirtyFlags;
+        };
+        SmartPropertyPrim.prototype._resetPropertiesDirty = function () {
+            this._instanceDirtyFlags = 0;
+            this._clearFlags(SmartPropertyPrim.flagPrimInDirtyList | SmartPropertyPrim.flagNeedRefresh);
+        };
+        Object.defineProperty(SmartPropertyPrim.prototype, "levelBoundingInfo", {
+            /**
+             * Retrieve the boundingInfo for this Primitive, computed based on the primitive itself and NOT its children
+             */
+            get: function () {
+                if (this._isFlagSet(SmartPropertyPrim.flagLevelBoundingInfoDirty)) {
+                    this.updateLevelBoundingInfo();
+                    this._clearFlags(SmartPropertyPrim.flagLevelBoundingInfoDirty);
+                }
+                return this._levelBoundingInfo;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * This method must be overridden by a given Primitive implementation to compute its boundingInfo
+         */
+        SmartPropertyPrim.prototype.updateLevelBoundingInfo = function () {
+        };
+        /**
+         * Property method called when the Primitive becomes dirty
+         */
+        SmartPropertyPrim.prototype.onPrimBecomesDirty = function () {
+        };
+        SmartPropertyPrim._hookProperty = function (propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox, kind) {
+            return function (target, propName, descriptor) {
+                var propInfo = SmartPropertyPrim._createPropInfo(target, propName, propId, dirtyBoundingInfo, dirtyParentBoundingBox, typeLevelCompare, kind);
+                if (piStore) {
+                    piStore(propInfo);
+                }
+                var getter = descriptor.get, setter = descriptor.set;
+                // Overload the property setter implementation to add our own logic
+                descriptor.set = function (val) {
+                    // check for disposed first, do nothing
+                    if (this.isDisposed) {
+                        return;
+                    }
+                    var curVal = getter.call(this);
+                    if (SmartPropertyPrim._checkUnchanged(curVal, val)) {
+                        return;
+                    }
+                    // Cast the object we're working one
+                    var prim = this;
+                    // Change the value
+                    setter.call(this, val);
+                    // Notify change, dirty flags update
+                    prim._handlePropChanged(curVal, val, propName, propInfo, typeLevelCompare);
+                };
+            };
+        };
+        /**
+         * Add an externally attached data from its key.
+         * This method call will fail and return false, if such key already exists.
+         * If you don't care and just want to get the data no matter what, use the more convenient getOrAddExternalDataWithFactory() method.
+         * @param key the unique key that identifies the data
+         * @param data the data object to associate to the key for this Engine instance
+         * @return true if no such key were already present and the data was added successfully, false otherwise
+         */
+        SmartPropertyPrim.prototype.addExternalData = function (key, data) {
+            if (!this._externalData) {
+                this._externalData = new BABYLON.StringDictionary();
+            }
+            return this._externalData.add(key, data);
+        };
+        /**
+         * Get an externally attached data from its key
+         * @param key the unique key that identifies the data
+         * @return the associated data, if present (can be null), or undefined if not present
+         */
+        SmartPropertyPrim.prototype.getExternalData = function (key) {
+            if (!this._externalData) {
+                return null;
+            }
+            return this._externalData.get(key);
+        };
+        /**
+         * Get an externally attached data from its key, create it using a factory if it's not already present
+         * @param key the unique key that identifies the data
+         * @param factory the factory that will be called to create the instance if and only if it doesn't exists
+         * @return the associated data, can be null if the factory returned null.
+         */
+        SmartPropertyPrim.prototype.getOrAddExternalDataWithFactory = function (key, factory) {
+            if (!this._externalData) {
+                this._externalData = new BABYLON.StringDictionary();
+            }
+            return this._externalData.getOrAddWithFactory(key, factory);
+        };
+        /**
+         * Remove an externally attached data from the Engine instance
+         * @param key the unique key that identifies the data
+         * @return true if the data was successfully removed, false if it doesn't exist
+         */
+        SmartPropertyPrim.prototype.removeExternalData = function (key) {
+            if (!this._externalData) {
+                return false;
+            }
+            return this._externalData.remove(key);
+        };
+        /**
+         * Check if a given flag is set
+         * @param flag the flag value
+         * @return true if set, false otherwise
+         */
+        SmartPropertyPrim.prototype._isFlagSet = function (flag) {
+            return (this._flags & flag) !== 0;
+        };
+        /**
+         * Check if all given flags are set
+         * @param flags the flags ORed
+         * @return true if all the flags are set, false otherwise
+         */
+        SmartPropertyPrim.prototype._areAllFlagsSet = function (flags) {
+            return (this._flags & flags) === flags;
+        };
+        /**
+         * Check if at least one flag of the given flags is set
+         * @param flags the flags ORed
+         * @return true if at least one flag is set, false otherwise
+         */
+        SmartPropertyPrim.prototype._areSomeFlagsSet = function (flags) {
+            return (this._flags & flags) !== 0;
+        };
+        /**
+         * Clear the given flags
+         * @param flags the flags to clear
+         */
+        SmartPropertyPrim.prototype._clearFlags = function (flags) {
+            this._flags &= ~flags;
+        };
+        /**
+         * Set the given flags to true state
+         * @param flags the flags ORed to set
+         * @return the flags state before this call
+         */
+        SmartPropertyPrim.prototype._setFlags = function (flags) {
+            var cur = this._flags;
+            this._flags |= flags;
+            return cur;
+        };
+        /**
+         * Change the state of the given flags
+         * @param flags the flags ORed to change
+         * @param state true to set them, false to clear them
+         */
+        SmartPropertyPrim.prototype._changeFlags = function (flags, state) {
+            if (state) {
+                this._flags |= flags;
+            }
+            else {
+                this._flags &= ~flags;
+            }
+        };
+        SmartPropertyPrim.propChangedInfo = new PropertyChangedInfo();
+        SmartPropertyPrim.flagIsDisposed = 0x0000001; // set if the object is already disposed
+        SmartPropertyPrim.flagLevelBoundingInfoDirty = 0x0000002; // set if the primitive's level bounding box (not including children) is dirty
+        SmartPropertyPrim.flagModelDirty = 0x0000004; // set if the model must be changed
+        SmartPropertyPrim.flagLayoutDirty = 0x0000008; // set if the layout must be computed
+        SmartPropertyPrim.flagLevelVisible = 0x0000010; // set if the primitive is set as visible for its level only
+        SmartPropertyPrim.flagBoundingInfoDirty = 0x0000020; // set if the primitive's overall bounding box (including children) is dirty
+        SmartPropertyPrim.flagIsPickable = 0x0000040; // set if the primitive can be picked during interaction
+        SmartPropertyPrim.flagIsVisible = 0x0000080; // set if the primitive is concretely visible (use the levelVisible of parents)
+        SmartPropertyPrim.flagVisibilityChanged = 0x0000100; // set if there was a transition between visible/hidden status
+        SmartPropertyPrim.flagPositioningDirty = 0x0000200; // set if the primitive positioning must be computed
+        SmartPropertyPrim.flagTrackedGroup = 0x0000400; // set if the group2D is tracking a scene node
+        SmartPropertyPrim.flagWorldCacheChanged = 0x0000800; // set if the cached bitmap of a world space canvas changed
+        SmartPropertyPrim.flagChildrenFlatZOrder = 0x0001000; // set if all the children (direct and indirect) will share the same Z-Order
+        SmartPropertyPrim.flagZOrderDirty = 0x0002000; // set if the Z-Order for this prim and its children must be recomputed
+        SmartPropertyPrim.flagActualOpacityDirty = 0x0004000; // set if the actualOpactity should be recomputed
+        SmartPropertyPrim.flagPrimInDirtyList = 0x0008000; // set if the primitive is in the primDirtyList
+        SmartPropertyPrim.flagIsContainer = 0x0010000; // set if the primitive is a container
+        SmartPropertyPrim.flagNeedRefresh = 0x0020000; // set if the primitive wasn't successful at refresh
+        SmartPropertyPrim.flagActualScaleDirty = 0x0040000; // set if the actualScale property needs to be recomputed
+        SmartPropertyPrim.flagDontInheritParentScale = 0x0080000; // set if the actualScale must not use its parent's scale to be computed
+        SmartPropertyPrim.flagGlobalTransformDirty = 0x0100000; // set if the global transform must be recomputed due to a local transform change
+        SmartPropertyPrim.flagLayoutBoundingInfoDirty = 0x0100000; // set if the layout bounding info is dirty
+        SmartPropertyPrim = __decorate([
+            BABYLON.className("SmartPropertyPrim")
+        ], SmartPropertyPrim);
+        return SmartPropertyPrim;
+    }());
+    BABYLON.SmartPropertyPrim = SmartPropertyPrim;
+    function modelLevelProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox) {
+        if (typeLevelCompare === void 0) { typeLevelCompare = false; }
+        if (dirtyBoundingInfo === void 0) { dirtyBoundingInfo = false; }
+        if (dirtyParentBoundingBox === void 0) { dirtyParentBoundingBox = false; }
+        return SmartPropertyPrim._hookProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox, Prim2DPropInfo.PROPKIND_MODEL);
+    }
+    BABYLON.modelLevelProperty = modelLevelProperty;
+    function instanceLevelProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox) {
+        if (typeLevelCompare === void 0) { typeLevelCompare = false; }
+        if (dirtyBoundingInfo === void 0) { dirtyBoundingInfo = false; }
+        if (dirtyParentBoundingBox === void 0) { dirtyParentBoundingBox = false; }
+        return SmartPropertyPrim._hookProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox, Prim2DPropInfo.PROPKIND_INSTANCE);
+    }
+    BABYLON.instanceLevelProperty = instanceLevelProperty;
+    function dynamicLevelProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox) {
+        if (typeLevelCompare === void 0) { typeLevelCompare = false; }
+        if (dirtyBoundingInfo === void 0) { dirtyBoundingInfo = false; }
+        if (dirtyParentBoundingBox === void 0) { dirtyParentBoundingBox = false; }
+        return SmartPropertyPrim._hookProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox, Prim2DPropInfo.PROPKIND_DYNAMIC);
+    }
+    BABYLON.dynamicLevelProperty = dynamicLevelProperty;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.smartPropertyPrim.ts

@@ -0,0 +1,654 @@
+module BABYLON {
+    export class Prim2DClassInfo {
+
+    }
+
+    export class Prim2DPropInfo {
+        static PROPKIND_MODEL: number = 1;
+        static PROPKIND_INSTANCE: number = 2;
+        static PROPKIND_DYNAMIC: number = 3;
+
+        id: number;
+        flagId: number;
+        kind: number;
+        name: string;
+        dirtyBoundingInfo: boolean;
+        dirtyParentBoundingInfo: boolean;
+        typeLevelCompare: boolean;
+    }
+
+    /**
+     * Custom type of the propertyChanged observable
+     */
+    export class PropertyChangedInfo {
+        /**
+         * Previous value of the property
+         */
+        oldValue: any;
+        /**
+         * New value of the property
+         */
+        newValue: any;
+
+        /**
+         * Name of the property that changed its value
+         */
+        propertyName: string;
+    }
+
+    /**
+     * Property Changed interface
+     */
+    export interface IPropertyChanged {
+        /**
+         * PropertyChanged observable
+         */
+        propertyChanged: Observable<PropertyChangedInfo>;
+    }
+
+    export class ClassTreeInfo<TClass, TProp>{
+        constructor(baseClass: ClassTreeInfo<TClass, TProp>, type: Object, classContentFactory: (base: TClass) => TClass) {
+            this._baseClass = baseClass;
+            this._type = type;
+            this._subClasses = new Array<{ type: Object, node: ClassTreeInfo<TClass, TProp> }>();
+            this._levelContent = new StringDictionary<TProp>();
+            this._classContentFactory = classContentFactory;
+        }
+
+        get classContent(): TClass {
+            if (!this._classContent) {
+                this._classContent = this._classContentFactory(this._baseClass ? this._baseClass.classContent : null);
+            }
+            return this._classContent;
+        }
+
+        get type(): Object {
+            return this._type;
+        }
+
+        get levelContent(): StringDictionary<TProp> {
+            return this._levelContent;
+        }
+
+        get fullContent(): StringDictionary<TProp> {
+            if (!this._fullContent) {
+                let dic = new StringDictionary<TProp>();
+                let curLevel: ClassTreeInfo<TClass, TProp> = this;
+                while (curLevel) {
+                    curLevel.levelContent.forEach((k, v) => dic.add(k, v));
+                    curLevel = curLevel._baseClass;
+                }
+
+                this._fullContent = dic;
+            }
+
+            return this._fullContent;
+        }
+
+        getLevelOf(type: Object): ClassTreeInfo<TClass, TProp> {
+            // Are we already there?
+            if (type === this._type) {
+                return this;
+            }
+
+            let baseProto = Object.getPrototypeOf(type);
+            let curProtoContent = this.getOrAddType(Object.getPrototypeOf(baseProto), baseProto);
+            if (!curProtoContent) {
+                this.getLevelOf(baseProto);
+            }
+
+            return this.getOrAddType(baseProto, type);
+        }
+
+        getOrAddType(baseType: Object, type: Object): ClassTreeInfo<TClass, TProp> {
+
+            // Are we at the level corresponding to the baseType?
+            // If so, get or add the level we're looking for
+            if (baseType === this._type) {
+                for (let subType of this._subClasses) {
+                    if (subType.type === type) {
+                        return subType.node;
+                    }
+                }
+                let node = new ClassTreeInfo<TClass, TProp>(this, type, this._classContentFactory);
+                let info = { type: type, node: node };
+                this._subClasses.push(info);
+                return info.node;
+            }
+
+            // Recurse down to keep looking for the node corresponding to the baseTypeName
+            for (let subType of this._subClasses) {
+                let info = subType.node.getOrAddType(baseType, type);
+                if (info) {
+                    return info;
+                }
+            }
+            return null;
+        }
+
+        static get<TClass, TProp>(type: Object): ClassTreeInfo<TClass, TProp> {
+            let dic = <ClassTreeInfo<TClass, TProp>>type["__classTreeInfo"];
+            if (!dic) {
+                return null;
+            }
+            return dic.getLevelOf(type);
+        }
+
+        static getOrRegister<TClass, TProp>(type: Object, classContentFactory: (base: TClass) => TClass): ClassTreeInfo<TClass, TProp> {
+            let dic = <ClassTreeInfo<TClass, TProp>>type["__classTreeInfo"];
+            if (!dic) {
+                dic = new ClassTreeInfo<TClass, TProp>(null, type, classContentFactory);
+                type["__classTreeInfo"] = dic;
+            }
+            return dic;
+        }
+
+        private _type: Object;
+        private _classContent: TClass;
+        private _baseClass: ClassTreeInfo<TClass, TProp>;
+        private _subClasses: Array<{ type: Object, node: ClassTreeInfo<TClass, TProp> }>;
+        private _levelContent: StringDictionary<TProp>;
+        private _fullContent: StringDictionary<TProp>;
+        private _classContentFactory: (base: TClass) => TClass;
+    }
+
+    @className("SmartPropertyPrim")
+    /**
+     * Base class of the primitives, implementing core crosscutting features
+     */
+    export abstract  class SmartPropertyPrim implements IPropertyChanged {
+
+        constructor() {
+            this._flags = 0;
+            this._modelKey = null;
+            this._instanceDirtyFlags = 0;
+            this._levelBoundingInfo = new BoundingInfo2D();
+            this.animations = new Array<Animation>();
+        }
+
+        /**
+         * An observable that is triggered when a property (using of the XXXXLevelProperty decorator) has its value changing.
+         * You can add an observer that will be triggered only for a given set of Properties using the Mask feature of the Observable and the corresponding Prim2DPropInfo.flagid value (e.g. Prim2DBase.positionProperty.flagid|Prim2DBase.rotationProperty.flagid to be notified only about position or rotation change)
+         */
+        public propertyChanged: Observable<PropertyChangedInfo>;
+
+        /**
+         * Check if the object is disposed or not.
+         * @returns true if the object is dispose, false otherwise.
+         */
+        public get isDisposed(): boolean {
+            return this._isFlagSet(SmartPropertyPrim.flagIsDisposed);
+        }
+
+        /**
+         * Disposable pattern, this method must be overloaded by derived types in order to clean up hardware related resources.
+         * @returns false if the object is already dispose, true otherwise. Your implementation must call super.dispose() and check for a false return and return immediately if it's the case.
+         */
+        public dispose(): boolean {
+            if (this.isDisposed) {
+                return false;
+            }
+
+            // Don't set to null, it may upset somebody...
+            this.animations.splice(0);
+
+            this._setFlags(SmartPropertyPrim.flagIsDisposed);
+            return true;
+        }
+
+        /**
+         * Animation array, more info: http://doc.babylonjs.com/tutorials/Animations
+         */
+        public animations: Animation[];
+
+        /**
+         * Returns as a new array populated with the Animatable used by the primitive. Must be overloaded by derived primitives.
+         * Look at Sprite2D for more information
+         */
+        public getAnimatables(): IAnimatable[] {
+            return new Array<IAnimatable>();
+        }
+
+        /**
+         * Property giving the Model Key associated to the property.
+         * This value is constructed from the type of the primitive and all the name/value of its properties declared with the modelLevelProperty decorator
+         * @returns the model key string.
+         */
+        public get modelKey(): string {
+
+            // No need to compute it?
+            if (!this._isFlagSet(SmartPropertyPrim.flagModelDirty) && this._modelKey) {
+                return this._modelKey;
+            }
+
+            let modelKey = `Class:${Tools.getClassName(this)};`;
+            let propDic = this.propDic;
+            propDic.forEach((k, v) => {
+                if (v.kind === Prim2DPropInfo.PROPKIND_MODEL) {
+                    let propVal = this[v.name];
+
+                    // Special case, array, this WON'T WORK IN ALL CASES, all entries have to be of the same type and it must be a BJS well known one
+                    if (propVal && propVal.constructor === Array) {
+                        let firstVal = propVal[0];
+                        if (!firstVal) {
+                            propVal = 0;
+                        } else {
+                            propVal = Tools.hashCodeFromStream(Tools.arrayOrStringFeeder(propVal));
+                        }
+                    }
+
+                    modelKey += v.name + ":" + ((propVal != null) ? ((v.typeLevelCompare) ? Tools.getClassName(propVal) : propVal.toString()) : "[null]") + ";";
+                }
+            });
+
+            this._clearFlags(SmartPropertyPrim.flagModelDirty);
+            this._modelKey = modelKey;
+
+            return modelKey;
+        }
+
+        /**
+         * States if the Primitive is dirty and should be rendered again next time.
+         * @returns true is dirty, false otherwise
+         */
+        public get isDirty(): boolean {
+            return (this._instanceDirtyFlags !== 0) || this._areSomeFlagsSet(SmartPropertyPrim.flagModelDirty | SmartPropertyPrim.flagPositioningDirty | SmartPropertyPrim.flagLayoutDirty);
+        }
+
+        /**
+         * Access the dictionary of properties metadata. Only properties decorated with XXXXLevelProperty are concerned
+         * @returns the dictionary, the key is the property name as declared in Javascript, the value is the metadata object
+         */
+        private get propDic(): StringDictionary<Prim2DPropInfo> {
+            if (!this._propInfo) {
+                let cti = ClassTreeInfo.get<Prim2DClassInfo, Prim2DPropInfo>(Object.getPrototypeOf(this));
+                if (!cti) {
+                    throw new Error("Can't access the propDic member in class definition, is this class SmartPropertyPrim based?");
+                }
+                this._propInfo = cti.fullContent;
+            }
+
+            return this._propInfo;
+        }
+
+        private static _createPropInfo(target: Object, propName: string, propId: number, dirtyBoundingInfo: boolean, dirtyParentBoundingBox: boolean, typeLevelCompare: boolean, kind: number): Prim2DPropInfo {
+            let dic = ClassTreeInfo.getOrRegister<Prim2DClassInfo, Prim2DPropInfo>(target, () => new Prim2DClassInfo());
+            var node = dic.getLevelOf(target);
+
+            let propInfo = node.levelContent.get(propId.toString());
+            if (propInfo) {
+                throw new Error(`The ID ${propId} is already taken by another property declaration named: ${propInfo.name}`);
+            }
+
+            // Create, setup and add the PropInfo object to our prop dictionary
+            propInfo = new Prim2DPropInfo();
+            propInfo.id = propId;
+            propInfo.flagId = Math.pow(2, propId);
+            propInfo.kind = kind;
+            propInfo.name = propName;
+            propInfo.dirtyBoundingInfo = dirtyBoundingInfo;
+            propInfo.dirtyParentBoundingInfo = dirtyParentBoundingBox;
+            propInfo.typeLevelCompare = typeLevelCompare;
+            node.levelContent.add(propName, propInfo);
+
+            return propInfo;
+        }
+
+        private static _checkUnchanged(curValue, newValue): boolean {
+            // Nothing to nothing: nothing to do!
+            if ((curValue === null && newValue === null) || (curValue === undefined && newValue === undefined)) {
+                return true;
+            }
+
+            // Check value unchanged
+            if ((curValue != null) && (newValue != null)) {
+                if (typeof (curValue.equals) == "function") {
+                    if (curValue.equals(newValue)) {
+                        return true;
+                    }
+                } else {
+                    if (curValue === newValue) {
+                        return true;
+                    }
+                }
+            }
+
+            return false;
+        }
+
+        protected _triggerPropertyChanged(propInfo: Prim2DPropInfo, newValue: any) {
+            if (this.isDisposed) {
+                return;
+            }
+
+            if (!propInfo) {
+                return;
+            }
+
+            this._handlePropChanged(undefined, newValue, propInfo.name, propInfo, propInfo.typeLevelCompare);
+        }
+
+        protected _boundingBoxDirty() {
+            this._setFlags(SmartPropertyPrim.flagLevelBoundingInfoDirty);
+
+            // Escalate the dirty flag in the instance hierarchy, stop when a renderable group is found or at the end
+            if (this instanceof Prim2DBase) {
+                let curprim: Prim2DBase = (<any>this);
+                while (curprim) {
+                    curprim._setFlags(SmartPropertyPrim.flagBoundingInfoDirty);
+                    if (curprim.isSizeAuto) {
+                        curprim.onPrimitivePropertyDirty(Prim2DBase.sizeProperty.flagId);
+                        curprim._setFlags(SmartPropertyPrim.flagPositioningDirty);
+                    }
+
+                    if (curprim instanceof Group2D) {
+                        if (curprim.isRenderableGroup) {
+                            break;
+                        }
+                    }
+
+                    curprim = curprim.parent;
+                }
+            }
+        }
+
+        private static propChangedInfo = new PropertyChangedInfo();
+        private _handlePropChanged<T>(curValue: T, newValue: T, propName: string, propInfo: Prim2DPropInfo, typeLevelCompare: boolean) {
+            // If the property change also dirty the boundingInfo, update the boundingInfo dirty flags
+            if (propInfo.dirtyBoundingInfo) {
+                this._boundingBoxDirty();
+            } else if (propInfo.dirtyParentBoundingInfo) {
+                let p: SmartPropertyPrim = (<any>this)._parent;
+                if (p != null) {
+                    p._boundingBoxDirty();
+                }
+            }
+
+            // Trigger property changed
+            let info = SmartPropertyPrim.propChangedInfo;
+            info.oldValue = curValue;
+            info.newValue = newValue;
+            info.propertyName = propName;
+            let propMask = propInfo.flagId;
+            this.propertyChanged.notifyObservers(info, propMask);
+
+            // If the property belong to a group, check if it's a cached one, and dirty its render sprite accordingly
+            if (this instanceof Group2D) {
+                (<SmartPropertyPrim>this).handleGroupChanged(propInfo);
+            }
+
+            // Check for parent layout dirty
+            if (this instanceof Prim2DBase) {
+                let p = (<any>this)._parent;
+                if (p != null && p.layoutEngine && (p.layoutEngine.layoutDirtyOnPropertyChangedMask & propInfo.flagId) !== 0) {
+                    p._setLayoutDirty();
+                }
+            }
+
+            // For type level compare, if there's a change of type it's a change of model, otherwise we issue an instance change
+            var instanceDirty = false;
+            if (typeLevelCompare && curValue != null && newValue != null) {
+                var cvProto = (<any>curValue).__proto__;
+                var nvProto = (<any>newValue).__proto__;
+
+                instanceDirty = (cvProto === nvProto);
+            }
+
+            // Set the dirty flags
+            if (!instanceDirty && (propInfo.kind === Prim2DPropInfo.PROPKIND_MODEL)) {
+                if (!this.isDirty) {
+                    this._setFlags(SmartPropertyPrim.flagModelDirty);
+                }
+            } else if (instanceDirty || (propInfo.kind === Prim2DPropInfo.PROPKIND_INSTANCE) || (propInfo.kind === Prim2DPropInfo.PROPKIND_DYNAMIC)) {
+                this.onPrimitivePropertyDirty(propMask);
+            }
+        }
+
+        protected onPrimitivePropertyDirty(propFlagId: number) {
+            this.onPrimBecomesDirty();
+            this._instanceDirtyFlags |= propFlagId;
+        }
+
+        protected handleGroupChanged(prop: Prim2DPropInfo) {
+
+        }
+
+        /**
+         * Check if a given set of properties are dirty or not.
+         * @param flags a ORed combination of Prim2DPropInfo.flagId values
+         * @return true if at least one property is dirty, false if none of them are.
+         */
+        public checkPropertiesDirty(flags: number): boolean {
+            return (this._instanceDirtyFlags & flags) !== 0;
+        }
+
+        /**
+         * Clear a given set of properties.
+         * @param flags a ORed combination of Prim2DPropInfo.flagId values
+         * @return the new set of property still marked as dirty
+         */
+        protected clearPropertiesDirty(flags: number): number {
+            this._instanceDirtyFlags &= ~flags;
+            return this._instanceDirtyFlags;
+        }
+
+        public _resetPropertiesDirty() {
+            this._instanceDirtyFlags = 0;
+            this._clearFlags(SmartPropertyPrim.flagPrimInDirtyList | SmartPropertyPrim.flagNeedRefresh);
+        }
+
+        /**
+         * Retrieve the boundingInfo for this Primitive, computed based on the primitive itself and NOT its children
+         */
+        public get levelBoundingInfo(): BoundingInfo2D {
+            if (this._isFlagSet(SmartPropertyPrim.flagLevelBoundingInfoDirty)) {
+                this.updateLevelBoundingInfo();
+                this._clearFlags(SmartPropertyPrim.flagLevelBoundingInfoDirty);
+            }
+            return this._levelBoundingInfo;
+        }
+
+        /**
+         * This method must be overridden by a given Primitive implementation to compute its boundingInfo
+         */
+        protected updateLevelBoundingInfo() {
+
+        }
+
+        /**
+         * Property method called when the Primitive becomes dirty
+         */
+        protected onPrimBecomesDirty() {
+
+        }
+
+        static _hookProperty<T>(propId: number, piStore: (pi: Prim2DPropInfo) => void, typeLevelCompare: boolean, dirtyBoundingInfo: boolean, dirtyParentBoundingBox: boolean, kind: number): (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => void {
+            return (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => {
+
+                var propInfo = SmartPropertyPrim._createPropInfo(target, <string>propName, propId, dirtyBoundingInfo, dirtyParentBoundingBox, typeLevelCompare, kind);
+                if (piStore) {
+                    piStore(propInfo);
+                }
+                let getter = descriptor.get, setter = descriptor.set;
+
+                // Overload the property setter implementation to add our own logic
+                descriptor.set = function (val) {
+                    // check for disposed first, do nothing
+                    if (this.isDisposed) {
+                        return;
+                    }
+
+                    let curVal = getter.call(this);
+
+                    if (SmartPropertyPrim._checkUnchanged(curVal, val)) {
+                        return;
+                    }
+
+                    // Cast the object we're working one
+                    let prim = <SmartPropertyPrim>this;
+
+                    // Change the value
+                    setter.call(this, val);
+
+                    // Notify change, dirty flags update
+                    prim._handlePropChanged(curVal, val, <string>propName, propInfo, typeLevelCompare);
+                }
+            }
+        }
+
+        /**
+         * Add an externally attached data from its key.
+         * This method call will fail and return false, if such key already exists.
+         * If you don't care and just want to get the data no matter what, use the more convenient getOrAddExternalDataWithFactory() method.
+         * @param key the unique key that identifies the data
+         * @param data the data object to associate to the key for this Engine instance
+         * @return true if no such key were already present and the data was added successfully, false otherwise
+         */
+        public addExternalData<T>(key: string, data: T): boolean {
+            if (!this._externalData) {
+                this._externalData = new StringDictionary<Object>();
+            }
+            return this._externalData.add(key, data);
+        }
+
+        /**
+         * Get an externally attached data from its key
+         * @param key the unique key that identifies the data
+         * @return the associated data, if present (can be null), or undefined if not present
+         */
+        public getExternalData<T>(key: string): T {
+            if (!this._externalData) {
+                return null;
+            }
+            return <T>this._externalData.get(key);
+        }
+
+        /**
+         * Get an externally attached data from its key, create it using a factory if it's not already present
+         * @param key the unique key that identifies the data
+         * @param factory the factory that will be called to create the instance if and only if it doesn't exists
+         * @return the associated data, can be null if the factory returned null.
+         */
+        public getOrAddExternalDataWithFactory<T>(key: string, factory: (k: string) => T): T {
+            if (!this._externalData) {
+                this._externalData = new StringDictionary<Object>();
+            }
+            return <T>this._externalData.getOrAddWithFactory(key, factory);
+        }
+
+        /**
+         * Remove an externally attached data from the Engine instance
+         * @param key the unique key that identifies the data
+         * @return true if the data was successfully removed, false if it doesn't exist
+         */
+        public removeExternalData(key): boolean {
+            if (!this._externalData) {
+                return false;
+            }
+            return this._externalData.remove(key);
+        }
+
+        /**
+         * Check if a given flag is set
+         * @param flag the flag value
+         * @return true if set, false otherwise
+         */
+        public _isFlagSet(flag: number): boolean {
+            return (this._flags & flag) !== 0;
+        }
+
+        /**
+         * Check if all given flags are set
+         * @param flags the flags ORed
+         * @return true if all the flags are set, false otherwise
+         */
+        public _areAllFlagsSet(flags: number): boolean {
+            return (this._flags & flags) === flags;
+        }
+
+        /**
+         * Check if at least one flag of the given flags is set
+         * @param flags the flags ORed
+         * @return true if at least one flag is set, false otherwise
+         */
+        public _areSomeFlagsSet(flags: number): boolean {
+            return (this._flags & flags) !== 0;
+        }
+
+        /**
+         * Clear the given flags
+         * @param flags the flags to clear
+         */
+        public _clearFlags(flags: number) {
+            this._flags &= ~flags;
+        }
+
+        /**
+         * Set the given flags to true state
+         * @param flags the flags ORed to set
+         * @return the flags state before this call
+         */
+        public _setFlags(flags: number): number {
+            let cur = this._flags;
+            this._flags |= flags;
+            return cur;
+        }
+
+        /**
+         * Change the state of the given flags
+         * @param flags the flags ORed to change
+         * @param state true to set them, false to clear them
+         */
+        public _changeFlags(flags: number, state: boolean) {
+            if (state) {
+                this._flags |= flags;
+            } else {
+                this._flags &= ~flags;
+            }
+        }
+
+        public static flagIsDisposed              = 0x0000001;    // set if the object is already disposed
+        public static flagLevelBoundingInfoDirty  = 0x0000002;    // set if the primitive's level bounding box (not including children) is dirty
+        public static flagModelDirty              = 0x0000004;    // set if the model must be changed
+        public static flagLayoutDirty             = 0x0000008;    // set if the layout must be computed
+        public static flagLevelVisible            = 0x0000010;    // set if the primitive is set as visible for its level only
+        public static flagBoundingInfoDirty       = 0x0000020;    // set if the primitive's overall bounding box (including children) is dirty
+        public static flagIsPickable              = 0x0000040;    // set if the primitive can be picked during interaction
+        public static flagIsVisible               = 0x0000080;    // set if the primitive is concretely visible (use the levelVisible of parents)
+        public static flagVisibilityChanged       = 0x0000100;    // set if there was a transition between visible/hidden status
+        public static flagPositioningDirty        = 0x0000200;    // set if the primitive positioning must be computed
+        public static flagTrackedGroup            = 0x0000400;    // set if the group2D is tracking a scene node
+        public static flagWorldCacheChanged       = 0x0000800;    // set if the cached bitmap of a world space canvas changed
+        public static flagChildrenFlatZOrder      = 0x0001000;    // set if all the children (direct and indirect) will share the same Z-Order
+        public static flagZOrderDirty             = 0x0002000;    // set if the Z-Order for this prim and its children must be recomputed
+        public static flagActualOpacityDirty      = 0x0004000;    // set if the actualOpactity should be recomputed
+        public static flagPrimInDirtyList         = 0x0008000;    // set if the primitive is in the primDirtyList
+        public static flagIsContainer             = 0x0010000;    // set if the primitive is a container
+        public static flagNeedRefresh             = 0x0020000;    // set if the primitive wasn't successful at refresh
+        public static flagActualScaleDirty        = 0x0040000;    // set if the actualScale property needs to be recomputed
+        public static flagDontInheritParentScale  = 0x0080000;    // set if the actualScale must not use its parent's scale to be computed
+        public static flagGlobalTransformDirty    = 0x0100000;    // set if the global transform must be recomputed due to a local transform change
+        public static flagLayoutBoundingInfoDirty = 0x0100000;    // set if the layout bounding info is dirty
+
+        private   _flags              : number;
+        private   _externalData       : StringDictionary<Object>;
+        private   _modelKey           : string;
+        private   _propInfo           : StringDictionary<Prim2DPropInfo>;
+        protected _levelBoundingInfo  : BoundingInfo2D;
+        protected _boundingInfo       : BoundingInfo2D;
+        protected _layoutBoundingInfo : BoundingInfo2D;
+        protected _instanceDirtyFlags : number;
+    }
+
+    export function modelLevelProperty<T>(propId: number, piStore: (pi: Prim2DPropInfo) => void, typeLevelCompare = false, dirtyBoundingInfo = false, dirtyParentBoundingBox = false): (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => void {
+        return SmartPropertyPrim._hookProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox, Prim2DPropInfo.PROPKIND_MODEL);
+    }
+
+    export function instanceLevelProperty<T>(propId: number, piStore: (pi: Prim2DPropInfo) => void, typeLevelCompare = false, dirtyBoundingInfo = false, dirtyParentBoundingBox = false): (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => void {
+        return SmartPropertyPrim._hookProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox, Prim2DPropInfo.PROPKIND_INSTANCE);
+    }
+
+    export function dynamicLevelProperty<T>(propId: number, piStore: (pi: Prim2DPropInfo) => void, typeLevelCompare = false, dirtyBoundingInfo = false, dirtyParentBoundingBox = false): (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => void {
+        return SmartPropertyPrim._hookProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox, Prim2DPropInfo.PROPKIND_DYNAMIC);
+    }
+}

canvas2D/src/babylon.sprite2d.js

@@ -0,0 +1,486 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Sprite2DRenderCache = (function (_super) {
+        __extends(Sprite2DRenderCache, _super);
+        function Sprite2DRenderCache() {
+            _super.apply(this, arguments);
+            this.effectsReady = false;
+            this.vb = null;
+            this.ib = null;
+            this.instancingAttributes = null;
+            this.texture = null;
+            this.effect = null;
+            this.effectInstanced = null;
+        }
+        Sprite2DRenderCache.prototype.render = function (instanceInfo, context) {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            // Compute the offset locations of the attributes in the vertex shader that will be mapped to the instance buffer data
+            var canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+            var cur = engine.getAlphaMode();
+            var effect = context.useInstancing ? this.effectInstanced : this.effect;
+            engine.enableEffect(effect);
+            effect.setTexture("diffuseSampler", this.texture);
+            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
+            if (context.renderMode !== BABYLON.Render2DContext.RenderModeOpaque) {
+                engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+            }
+            effect.setBool("alphaTest", context.renderMode === BABYLON.Render2DContext.RenderModeAlphaTest);
+            var pid = context.groupInfoPartData[0];
+            if (context.useInstancing) {
+                if (!this.instancingAttributes) {
+                    this.instancingAttributes = this.loadInstancingAttributes(Sprite2D.SPRITE2D_MAINPARTID, effect);
+                }
+                var glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
+                var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                canvas._addDrawCallCount(1, context.renderMode);
+                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
+                engine.draw(true, 0, 6, count);
+                engine.unbindInstanceAttributes();
+            }
+            else {
+                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                    this.setupUniforms(effect, 0, pid._partData, i);
+                    engine.draw(true, 0, 6);
+                }
+            }
+            engine.setAlphaMode(cur, true);
+            return true;
+        };
+        Sprite2DRenderCache.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.vb) {
+                this._engine._releaseBuffer(this.vb);
+                this.vb = null;
+            }
+            if (this.ib) {
+                this._engine._releaseBuffer(this.ib);
+                this.ib = null;
+            }
+            //if (this.texture) {
+            //    this.texture.dispose();
+            //    this.texture = null;
+            //}
+            this.effect = null;
+            this.effectInstanced = null;
+            return true;
+        };
+        return Sprite2DRenderCache;
+    }(BABYLON.ModelRenderCache));
+    BABYLON.Sprite2DRenderCache = Sprite2DRenderCache;
+    var Sprite2DInstanceData = (function (_super) {
+        __extends(Sprite2DInstanceData, _super);
+        function Sprite2DInstanceData(partId) {
+            _super.call(this, partId, 1);
+        }
+        Object.defineProperty(Sprite2DInstanceData.prototype, "topLeftUV", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2DInstanceData.prototype, "sizeUV", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2DInstanceData.prototype, "scaleFactor", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2DInstanceData.prototype, "textureSize", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2DInstanceData.prototype, "properties", {
+            // 3 floats being:
+            // - x: frame number to display
+            // - y: invertY setting
+            // - z: alignToPixel setting
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "topLeftUV", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "sizeUV", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "scaleFactor", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "textureSize", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Sprite2DInstanceData.prototype, "properties", null);
+        return Sprite2DInstanceData;
+    }(BABYLON.InstanceDataBase));
+    BABYLON.Sprite2DInstanceData = Sprite2DInstanceData;
+    var Sprite2D = (function (_super) {
+        __extends(Sprite2D, _super);
+        /**
+         * Create an 2D Sprite primitive
+         * @param texture the texture that stores the sprite to render
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - spriteSize: the size of the sprite (in pixels), if null the size of the given texture will be used, default is null.
+         * - spriteLocation: the location (in pixels) in the texture of the top/left corner of the Sprite to display, default is null (0,0)
+         * - spriteScaleFactor: say you want to display a sprite twice as big as its bitmap which is 64,64, you set the spriteSize to 128,128 and have to set the spriteScaleFactory to 0.5,0.5 in order to address only the 64,64 pixels of the bitmaps. Default is 1,1.
+         * - invertY: if true the texture Y will be inverted, default is false.
+         * - alignToPixel: if true the sprite's texels will be aligned to the rendering viewport pixels, ensuring the best rendering quality but slow animations won't be done as smooth as if you set false. If false a texel could lies between two pixels, being blended by the texture sampling mode you choose, the rendering result won't be as good, but very slow animation will be overall better looking. Default is true: content will be aligned.
+         * - isVisible: true if the sprite must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        function Sprite2D(texture, settings) {
+            var _this = this;
+            if (!settings) {
+                settings = {};
+            }
+            _super.call(this, settings);
+            this.texture = texture;
+            this.texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
+            this.texture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
+            this.size = settings.spriteSize;
+            this.spriteLocation = settings.spriteLocation || new BABYLON.Vector2(0, 0);
+            this.spriteScaleFactor = settings.spriteScaleFactor || new BABYLON.Vector2(1, 1);
+            this.spriteFrame = 0;
+            this.invertY = (settings.invertY == null) ? false : settings.invertY;
+            this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel;
+            this.useAlphaFromTexture = true;
+            if (settings.spriteSize == null || !texture.isReady()) {
+                if (texture.isReady()) {
+                    this.size = texture.getBaseSize();
+                }
+                else {
+                    texture.onLoadObservable.add(function () {
+                        if (settings.spriteSize == null) {
+                            _this.size = texture.getBaseSize();
+                        }
+                        _this._positioningDirty();
+                        _this._instanceDirtyFlags |= BABYLON.Prim2DBase.originProperty.flagId | Sprite2D.textureProperty.flagId; // To make sure the sprite is issued again for render
+                    });
+                }
+            }
+        }
+        Object.defineProperty(Sprite2D.prototype, "texture", {
+            get: function () {
+                return this._texture;
+            },
+            set: function (value) {
+                this._texture = value;
+                this._oldTextureHasAlpha = this._texture && this.texture.hasAlpha;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "useAlphaFromTexture", {
+            get: function () {
+                return this._useAlphaFromTexture;
+            },
+            set: function (value) {
+                if (this._useAlphaFromTexture === value) {
+                    return;
+                }
+                this._useAlphaFromTexture = value;
+                this._updateRenderMode();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "actualSize", {
+            get: function () {
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
+                return this.size;
+            },
+            set: function (value) {
+                this._actualSize = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "spriteLocation", {
+            get: function () {
+                return this._location;
+            },
+            set: function (value) {
+                this._location = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "spriteFrame", {
+            get: function () {
+                return this._spriteFrame;
+            },
+            set: function (value) {
+                this._spriteFrame = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "invertY", {
+            get: function () {
+                return this._invertY;
+            },
+            set: function (value) {
+                this._invertY = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sprite2D.prototype, "spriteScaleFactor", {
+            get: function () {
+                return this._spriteScaleFactor;
+            },
+            set: function (value) {
+                this._spriteScaleFactor = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Sets the scale of the sprite using a BABYLON.Size(w,h).
+         * Keeps proportion by taking the maximum of the two scale for x and y.
+         * @param {Size} size Size(width,height)
+         */
+        Sprite2D.prototype.scaleToSize = function (size) {
+            var baseSize = this.size;
+            if (baseSize == null || !this.texture.isReady()) {
+                // we're probably at initiation of the scene, size is not set
+                if (this.texture.isReady()) {
+                    baseSize = this.texture.getBaseSize();
+                }
+                else {
+                    // the texture is not ready, wait for it to load before calling scaleToSize again
+                    var thisObject = this;
+                    this.texture.onLoadObservable.add(function () {
+                        thisObject.scaleToSize(size);
+                    });
+                    return;
+                }
+            }
+            this.scale = Math.max(size.height / baseSize.height, size.width / baseSize.width);
+        };
+        Object.defineProperty(Sprite2D.prototype, "alignToPixel", {
+            /**
+             * Get/set if the sprite rendering should be aligned to the target rendering device pixel or not
+             */
+            get: function () {
+                return this._alignToPixel;
+            },
+            set: function (value) {
+                this._alignToPixel = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Sprite2D.prototype.updateLevelBoundingInfo = function () {
+            BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.size, this._levelBoundingInfo);
+        };
+        /**
+         * Get the animatable array (see http://doc.babylonjs.com/tutorials/Animations)
+         */
+        Sprite2D.prototype.getAnimatables = function () {
+            var res = new Array();
+            if (this.texture && this.texture.animations && this.texture.animations.length > 0) {
+                res.push(this.texture);
+            }
+            return res;
+        };
+        Sprite2D.prototype.levelIntersect = function (intersectInfo) {
+            // If we've made it so far it means the boundingInfo intersection test succeed, the Sprite2D is shaped the same, so we always return true
+            return true;
+        };
+        Sprite2D._createCachedCanvasSprite = function (owner, texture, size, pos) {
+            var sprite = new Sprite2D(texture, { parent: owner, id: "__cachedCanvasSprite__", position: BABYLON.Vector2.Zero(), origin: BABYLON.Vector2.Zero(), spriteSize: size, spriteLocation: pos, alignToPixel: true });
+            return sprite;
+        };
+        Sprite2D.prototype.createModelRenderCache = function (modelKey) {
+            var renderCache = new Sprite2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        };
+        Sprite2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+            var renderCache = modelRenderCache;
+            var engine = this.owner.engine;
+            var vb = new Float32Array(4);
+            for (var i = 0; i < 4; i++) {
+                vb[i] = i;
+            }
+            renderCache.vb = engine.createVertexBuffer(vb);
+            var ib = new Float32Array(6);
+            ib[0] = 0;
+            ib[1] = 2;
+            ib[2] = 1;
+            ib[3] = 0;
+            ib[4] = 3;
+            ib[5] = 2;
+            renderCache.ib = engine.createIndexBuffer(ib);
+            renderCache.texture = this.texture;
+            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+            var ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], true);
+            if (ei) {
+                renderCache.effectInstanced = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            }
+            ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], false);
+            renderCache.effect = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            return renderCache;
+        };
+        Sprite2D.prototype.createInstanceDataParts = function () {
+            return [new Sprite2DInstanceData(Sprite2D.SPRITE2D_MAINPARTID)];
+        };
+        Sprite2D.prototype.beforeRefreshForLayoutConstruction = function (part) {
+            Sprite2D.layoutConstructMode = true;
+        };
+        // if obj contains something, we restore the _text property
+        Sprite2D.prototype.afterRefreshForLayoutConstruction = function (part, obj) {
+            Sprite2D.layoutConstructMode = false;
+        };
+        Sprite2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            if (!this.texture.isReady() && !Sprite2D.layoutConstructMode) {
+                return false;
+            }
+            if (part.id === Sprite2D.SPRITE2D_MAINPARTID) {
+                var d = this._instanceDataParts[0];
+                if (Sprite2D.layoutConstructMode) {
+                    d.topLeftUV = BABYLON.Vector2.Zero();
+                    d.sizeUV = BABYLON.Vector2.Zero();
+                    d.properties = BABYLON.Vector3.Zero();
+                    d.textureSize = BABYLON.Vector2.Zero();
+                    d.scaleFactor = BABYLON.Vector2.Zero();
+                }
+                else {
+                    var ts = this.texture.getBaseSize();
+                    var sl = this.spriteLocation;
+                    var ss = this.actualSize;
+                    var ssf = this.spriteScaleFactor;
+                    d.topLeftUV = new BABYLON.Vector2(sl.x / ts.width, sl.y / ts.height);
+                    var suv = new BABYLON.Vector2(ss.width / ts.width, ss.height / ts.height);
+                    d.sizeUV = suv;
+                    d.scaleFactor = ssf;
+                    Sprite2D._prop.x = this.spriteFrame;
+                    Sprite2D._prop.y = this.invertY ? 1 : 0;
+                    Sprite2D._prop.z = this.alignToPixel ? 1 : 0;
+                    d.properties = Sprite2D._prop;
+                    d.textureSize = new BABYLON.Vector2(ts.width, ts.height);
+                }
+            }
+            return true;
+        };
+        Sprite2D.prototype._mustUpdateInstance = function () {
+            var res = this._oldTextureHasAlpha !== (this.texture != null && this.texture.hasAlpha);
+            this._oldTextureHasAlpha = this.texture != null && this.texture.hasAlpha;
+            if (res) {
+                this._updateRenderMode();
+            }
+            return res;
+        };
+        Sprite2D.prototype._useTextureAlpha = function () {
+            return this.texture != null && this.texture.hasAlpha;
+        };
+        Sprite2D.prototype._shouldUseAlphaFromTexture = function () {
+            return this.texture != null && this.texture.hasAlpha && this.useAlphaFromTexture;
+        };
+        Sprite2D.SPRITE2D_MAINPARTID = 1;
+        Sprite2D._prop = BABYLON.Vector3.Zero();
+        Sprite2D.layoutConstructMode = false;
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, function (pi) { return Sprite2D.textureProperty = pi; })
+        ], Sprite2D.prototype, "texture", null);
+        __decorate([
+            BABYLON.dynamicLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, function (pi) { return Sprite2D.useAlphaFromTextureProperty = pi; })
+        ], Sprite2D.prototype, "useAlphaFromTexture", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, function (pi) { return Sprite2D.actualSizeProperty = pi; }, false, true)
+        ], Sprite2D.prototype, "actualSize", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, function (pi) { return Sprite2D.spriteLocationProperty = pi; })
+        ], Sprite2D.prototype, "spriteLocation", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5, function (pi) { return Sprite2D.spriteFrameProperty = pi; })
+        ], Sprite2D.prototype, "spriteFrame", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 6, function (pi) { return Sprite2D.invertYProperty = pi; })
+        ], Sprite2D.prototype, "invertY", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 7, function (pi) { return Sprite2D.spriteScaleFactorProperty = pi; })
+        ], Sprite2D.prototype, "spriteScaleFactor", null);
+        Sprite2D = __decorate([
+            BABYLON.className("Sprite2D")
+        ], Sprite2D);
+        return Sprite2D;
+    }(BABYLON.RenderablePrim2D));
+    BABYLON.Sprite2D = Sprite2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.sprite2d.ts

@@ -0,0 +1,533 @@
+module BABYLON {
+    export class Sprite2DRenderCache extends ModelRenderCache {
+        effectsReady: boolean = false;
+        vb: WebGLBuffer = null;
+        ib: WebGLBuffer = null;
+        instancingAttributes: InstancingAttributeInfo[] = null;
+        texture: Texture = null;
+        effect: Effect = null;
+        effectInstanced: Effect = null;
+
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+
+            // Compute the offset locations of the attributes in the vertex shader that will be mapped to the instance buffer data
+            let canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+
+            var cur = engine.getAlphaMode();
+            let effect = context.useInstancing ? this.effectInstanced : this.effect;
+
+            engine.enableEffect(effect);
+            effect.setTexture("diffuseSampler", this.texture);
+            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
+
+            if (context.renderMode !== Render2DContext.RenderModeOpaque) {
+                engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+            }
+
+            effect.setBool("alphaTest", context.renderMode === Render2DContext.RenderModeAlphaTest);
+
+            let pid = context.groupInfoPartData[0];
+            if (context.useInstancing) {
+                if (!this.instancingAttributes) {
+                    this.instancingAttributes = this.loadInstancingAttributes(Sprite2D.SPRITE2D_MAINPARTID, effect);
+                }
+                let glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
+                let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                canvas._addDrawCallCount(1, context.renderMode);
+                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
+                engine.draw(true, 0, 6, count);
+                engine.unbindInstanceAttributes();
+            } else {
+                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                    this.setupUniforms(effect, 0, pid._partData, i);
+                    engine.draw(true, 0, 6);
+                }
+            }
+
+            engine.setAlphaMode(cur, true);
+
+            return true;
+        }
+
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.vb) {
+                this._engine._releaseBuffer(this.vb);
+                this.vb = null;
+            }
+
+            if (this.ib) {
+                this._engine._releaseBuffer(this.ib);
+                this.ib = null;
+            }
+
+            //if (this.texture) {
+            //    this.texture.dispose();
+            //    this.texture = null;
+            //}
+
+            this.effect = null;
+            this.effectInstanced = null;
+
+            return true;
+        }
+    }
+
+    export class Sprite2DInstanceData extends InstanceDataBase {
+        constructor(partId: number) {
+            super(partId, 1);
+        }
+
+        @instanceData()
+        get topLeftUV(): Vector2 {
+            return null;
+        }
+        set topLeftUV(value: Vector2) {
+        }
+
+        @instanceData()
+        get sizeUV(): Vector2 {
+            return null;
+        }
+        set sizeUV(value: Vector2) {
+        }
+
+        @instanceData()
+        get scaleFactor(): Vector2 {
+            return null;
+        }
+        set scaleFactor(value: Vector2) {
+        }
+
+        @instanceData()
+        get textureSize(): Vector2 {
+            return null;
+        }
+        set textureSize(value: Vector2) {
+        }
+
+        // 3 floats being:
+        // - x: frame number to display
+        // - y: invertY setting
+        // - z: alignToPixel setting
+        @instanceData()
+        get properties(): Vector3 {
+            return null;
+        }
+        set properties(value: Vector3) {
+        }
+    }
+
+    @className("Sprite2D")
+    /**
+     * Primitive that displays a Sprite/Picture
+     */
+    export class Sprite2D extends RenderablePrim2D {
+        static SPRITE2D_MAINPARTID = 1;
+
+        public static textureProperty: Prim2DPropInfo;
+        public static useAlphaFromTextureProperty: Prim2DPropInfo;
+        public static actualSizeProperty: Prim2DPropInfo;
+        public static spriteLocationProperty: Prim2DPropInfo;
+        public static spriteFrameProperty: Prim2DPropInfo;
+        public static invertYProperty: Prim2DPropInfo;
+        public static spriteScaleFactorProperty: Prim2DPropInfo;
+
+        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => Sprite2D.textureProperty = pi)
+        /**
+         * Get/set the texture that contains the sprite to display
+         */
+        public get texture(): Texture {
+            return this._texture;
+        }
+
+        public set texture(value: Texture) {
+            this._texture = value;
+            this._oldTextureHasAlpha = this._texture && this.texture.hasAlpha;
+        }
+
+        @dynamicLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Sprite2D.useAlphaFromTextureProperty = pi)
+        /**
+         * If true and the texture has an Alpha Channel which is used (BaseTexture.hasAlpha = true) the Sprite2d will be rendered as a Transparent Primitive, if false and the texture has an Alpha Channel which is used (BaseTexture.hasAlpha = true) the Sprite2d will be rendered as Alpha Test. If false or if the Texture has no alpha or it's not used (BaseTexture.hasAlpha = false) the Sprite2d will be rendered as an Opaque Primitive
+         */
+        public get useAlphaFromTexture(): boolean {
+            return this._useAlphaFromTexture;
+        }
+
+        public set useAlphaFromTexture(value: boolean) {
+            if (this._useAlphaFromTexture === value) {
+                return;
+            }
+            this._useAlphaFromTexture = value;
+            this._updateRenderMode();
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Sprite2D.actualSizeProperty = pi, false, true)
+        /**
+         * Get/set the actual size of the sprite to display
+         */
+        public get actualSize(): Size {
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+            return this.size;
+        }
+
+        public set actualSize(value: Size) {
+            this._actualSize = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, pi => Sprite2D.spriteLocationProperty = pi)
+        /**
+         * Get/set the sprite location (in pixels) in the texture
+         */
+        public get spriteLocation(): Vector2 {
+            return this._location;
+        }
+
+        public set spriteLocation(value: Vector2) {
+            this._location = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5, pi => Sprite2D.spriteFrameProperty = pi)
+        /**
+         * Get/set the sprite frame to display.
+         * The frame number is just an offset applied horizontally, based on the sprite's width. it does not wrap, all the frames must be on the same line.
+         */
+        public get spriteFrame(): number {
+            return this._spriteFrame;
+        }
+
+        public set spriteFrame(value: number) {
+            this._spriteFrame = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 6, pi => Sprite2D.invertYProperty = pi)
+        /**
+         * Get/set if the sprite texture coordinates should be inverted on the Y axis
+         */
+        public get invertY(): boolean {
+            return this._invertY;
+        }
+
+        public set invertY(value: boolean) {
+            this._invertY = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 7, pi => Sprite2D.spriteScaleFactorProperty = pi)
+        /**
+         * Get/set the sprite location (in pixels) in the texture
+         */
+        public get spriteScaleFactor(): Vector2 {
+            return this._spriteScaleFactor;
+        }
+
+        public set spriteScaleFactor(value: Vector2) {
+            this._spriteScaleFactor = value;
+        }
+
+        /**
+         * Sets the scale of the sprite using a BABYLON.Size(w,h).
+         * Keeps proportion by taking the maximum of the two scale for x and y.
+         * @param {Size} size Size(width,height)
+         */
+        public scaleToSize(size: Size) {
+            var baseSize = this.size;
+            if (baseSize == null || !this.texture.isReady()) {
+                // we're probably at initiation of the scene, size is not set
+                if (this.texture.isReady()) {
+                    baseSize = <Size>this.texture.getBaseSize();
+                }
+                else {
+                    // the texture is not ready, wait for it to load before calling scaleToSize again
+                    var thisObject = <Sprite2D>this;
+                    this.texture.onLoadObservable.add(function () {
+                            thisObject.scaleToSize(size); 
+                        });
+                    return;
+                }
+            }
+            
+            this.scale = Math.max(size.height / baseSize.height, size.width / baseSize.width);
+        }
+
+        /**
+         * Get/set if the sprite rendering should be aligned to the target rendering device pixel or not
+         */
+        public get alignToPixel(): boolean {
+            return this._alignToPixel;
+        }
+
+        public set alignToPixel(value: boolean) {
+            this._alignToPixel = value;
+        }
+
+        protected updateLevelBoundingInfo() {
+            BoundingInfo2D.CreateFromSizeToRef(this.size, this._levelBoundingInfo);
+        }
+
+        /**
+         * Get the animatable array (see http://doc.babylonjs.com/tutorials/Animations)
+         */
+        public getAnimatables(): IAnimatable[] {
+            let res = new Array<IAnimatable>();
+
+            if (this.texture && this.texture.animations && this.texture.animations.length > 0) {
+                res.push(this.texture);
+            }
+            return res;
+        }
+
+        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
+            // If we've made it so far it means the boundingInfo intersection test succeed, the Sprite2D is shaped the same, so we always return true
+            return true;
+        }
+
+        /**
+         * Create an 2D Sprite primitive
+         * @param texture the texture that stores the sprite to render
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - spriteSize: the size of the sprite (in pixels), if null the size of the given texture will be used, default is null.
+         * - spriteLocation: the location (in pixels) in the texture of the top/left corner of the Sprite to display, default is null (0,0)
+         * - spriteScaleFactor: say you want to display a sprite twice as big as its bitmap which is 64,64, you set the spriteSize to 128,128 and have to set the spriteScaleFactory to 0.5,0.5 in order to address only the 64,64 pixels of the bitmaps. Default is 1,1.
+         * - invertY: if true the texture Y will be inverted, default is false.
+         * - alignToPixel: if true the sprite's texels will be aligned to the rendering viewport pixels, ensuring the best rendering quality but slow animations won't be done as smooth as if you set false. If false a texel could lies between two pixels, being blended by the texture sampling mode you choose, the rendering result won't be as good, but very slow animation will be overall better looking. Default is true: content will be aligned.
+         * - isVisible: true if the sprite must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        constructor(texture: Texture, settings?: {
+
+            parent                ?: Prim2DBase,
+            children              ?: Array<Prim2DBase>,
+            id                    ?: string,
+            position              ?: Vector2,
+            x                     ?: number,
+            y                     ?: number,
+            rotation              ?: number,
+            scale                 ?: number,
+            scaleX                ?: number,
+            scaleY                ?: number,
+            dontInheritParentScale?: boolean,
+            opacity               ?: number,
+            zOrder                ?: number, 
+            origin                ?: Vector2,
+            spriteSize            ?: Size,
+            spriteLocation        ?: Vector2,
+            spriteScaleFactor     ?: Vector2,
+            invertY               ?: boolean,
+            alignToPixel          ?: boolean,
+            isVisible             ?: boolean,
+            isPickable            ?: boolean,
+            isContainer           ?: boolean,
+            childrenFlatZOrder    ?: boolean,
+            marginTop             ?: number | string,
+            marginLeft            ?: number | string,
+            marginRight           ?: number | string,
+            marginBottom          ?: number | string,
+            margin                ?: number | string,
+            marginHAlignment      ?: number,
+            marginVAlignment      ?: number,
+            marginAlignment       ?: string,
+            paddingTop            ?: number | string,
+            paddingLeft           ?: number | string,
+            paddingRight          ?: number | string,
+            paddingBottom         ?: number | string,
+            padding               ?: string,
+        }) {
+
+            if (!settings) {
+                settings = {};
+            }
+
+            super(settings);
+
+            this.texture = texture;
+            this.texture.wrapU = Texture.CLAMP_ADDRESSMODE;
+            this.texture.wrapV = Texture.CLAMP_ADDRESSMODE;
+            this.size = settings.spriteSize;
+            this.spriteLocation = settings.spriteLocation || new Vector2(0, 0);
+            this.spriteScaleFactor = settings.spriteScaleFactor || new Vector2(1, 1);
+            this.spriteFrame = 0;
+            this.invertY = (settings.invertY == null) ? false : settings.invertY;
+            this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel;
+            this.useAlphaFromTexture = true;
+
+            if (settings.spriteSize == null || !texture.isReady()) {
+                if (texture.isReady()) {
+                    this.size = <Size>texture.getBaseSize();
+                } else {
+                    texture.onLoadObservable.add(() => {
+                        if (settings.spriteSize == null) {
+                            this.size = <Size>texture.getBaseSize();
+                        }
+                        this._positioningDirty();
+                        this._instanceDirtyFlags |= Prim2DBase.originProperty.flagId | Sprite2D.textureProperty.flagId;  // To make sure the sprite is issued again for render
+                    });
+                }
+            }
+        }
+
+        static _createCachedCanvasSprite(owner: Canvas2D, texture: MapTexture, size: Size, pos: Vector2): Sprite2D {
+
+            let sprite = new Sprite2D(texture, { parent: owner, id: "__cachedCanvasSprite__", position: Vector2.Zero(), origin: Vector2.Zero(), spriteSize: size, spriteLocation: pos, alignToPixel: true });
+            return sprite;
+        }
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            let renderCache = new Sprite2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+            let renderCache = <Sprite2DRenderCache>modelRenderCache;
+            let engine = this.owner.engine;
+
+            let vb = new Float32Array(4);
+            for (let i = 0; i < 4; i++) {
+                vb[i] = i;
+            }
+            renderCache.vb = engine.createVertexBuffer(vb);
+
+            let ib = new Float32Array(6);
+            ib[0] = 0;
+            ib[1] = 2;
+            ib[2] = 1;
+            ib[3] = 0;
+            ib[4] = 3;
+            ib[5] = 2;
+
+            renderCache.ib = engine.createIndexBuffer(ib);
+
+            renderCache.texture = this.texture;
+
+            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+            let ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], true);
+            if (ei) {
+                renderCache.effectInstanced = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            }
+
+            ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], false);
+            renderCache.effect = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+
+            return renderCache;
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            return [new Sprite2DInstanceData(Sprite2D.SPRITE2D_MAINPARTID)];
+        }
+
+        private static _prop: Vector3 = Vector3.Zero();
+
+        private static layoutConstructMode = false;
+        protected beforeRefreshForLayoutConstruction(part: InstanceDataBase): any {
+            Sprite2D.layoutConstructMode = true;
+        }
+
+        // if obj contains something, we restore the _text property
+        protected afterRefreshForLayoutConstruction(part: InstanceDataBase, obj: any) {
+            Sprite2D.layoutConstructMode = false;
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+
+            if (!this.texture.isReady() && !Sprite2D.layoutConstructMode) {
+                return false;
+            }
+
+            if (part.id === Sprite2D.SPRITE2D_MAINPARTID) {
+                let d = <Sprite2DInstanceData>this._instanceDataParts[0];
+
+                if (Sprite2D.layoutConstructMode) {
+                    d.topLeftUV = Vector2.Zero();
+                    d.sizeUV = Vector2.Zero();
+                    d.properties = Vector3.Zero();
+                    d.textureSize = Vector2.Zero();
+                    d.scaleFactor = Vector2.Zero();
+                } else {
+                    let ts = this.texture.getBaseSize();
+                    let sl = this.spriteLocation;
+                    let ss = this.actualSize;
+                    let ssf = this.spriteScaleFactor;
+                    d.topLeftUV = new Vector2(sl.x / ts.width, sl.y / ts.height);
+                    let suv = new Vector2(ss.width / ts.width, ss.height / ts.height);
+                    d.sizeUV = suv;
+                    d.scaleFactor = ssf;
+
+                    Sprite2D._prop.x = this.spriteFrame;
+                    Sprite2D._prop.y = this.invertY ? 1 : 0;
+                    Sprite2D._prop.z = this.alignToPixel ? 1 : 0;
+                    d.properties = Sprite2D._prop;
+
+                    d.textureSize = new Vector2(ts.width, ts.height);
+                }
+            }
+            return true;
+        }
+
+        protected _mustUpdateInstance(): boolean {
+            let res = this._oldTextureHasAlpha !== (this.texture != null && this.texture.hasAlpha);
+            this._oldTextureHasAlpha = this.texture != null && this.texture.hasAlpha;
+            if (res) {
+                this._updateRenderMode();
+            }
+            return res;
+        }
+
+        protected _useTextureAlpha(): boolean {
+            return this.texture!=null && this.texture.hasAlpha;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return this.texture!=null && this.texture.hasAlpha && this.useAlphaFromTexture;
+        }
+
+        private _texture: Texture;
+        private _oldTextureHasAlpha: boolean;
+        private _useAlphaFromTexture: boolean;
+        private _location: Vector2;
+        private _spriteScaleFactor: Vector2;
+        private _spriteFrame: number;
+        private _invertY: boolean;
+        private _alignToPixel: boolean;
+    }
+}

canvas2D/src/babylon.text2d.js

@@ -0,0 +1,463 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BABYLON;
+(function (BABYLON) {
+    var Text2DRenderCache = (function (_super) {
+        __extends(Text2DRenderCache, _super);
+        function Text2DRenderCache() {
+            _super.apply(this, arguments);
+            this.effectsReady = false;
+            this.vb = null;
+            this.ib = null;
+            this.instancingAttributes = null;
+            this.fontTexture = null;
+            this.effect = null;
+            this.effectInstanced = null;
+        }
+        Text2DRenderCache.prototype.render = function (instanceInfo, context) {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            var canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+            this.fontTexture.update();
+            var effect = context.useInstancing ? this.effectInstanced : this.effect;
+            engine.enableEffect(effect);
+            effect.setTexture("diffuseSampler", this.fontTexture);
+            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
+            var curAlphaMode = engine.getAlphaMode();
+            engine.setAlphaMode(BABYLON.Engine.ALPHA_COMBINE, true);
+            var pid = context.groupInfoPartData[0];
+            if (context.useInstancing) {
+                if (!this.instancingAttributes) {
+                    this.instancingAttributes = this.loadInstancingAttributes(Text2D.TEXT2D_MAINPARTID, effect);
+                }
+                var glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
+                var count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                canvas._addDrawCallCount(1, context.renderMode);
+                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
+                engine.draw(true, 0, 6, count);
+                engine.unbindInstanceAttributes();
+            }
+            else {
+                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                for (var i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                    this.setupUniforms(effect, 0, pid._partData, i);
+                    engine.draw(true, 0, 6);
+                }
+            }
+            engine.setAlphaMode(curAlphaMode, true);
+            return true;
+        };
+        Text2DRenderCache.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this.vb) {
+                this._engine._releaseBuffer(this.vb);
+                this.vb = null;
+            }
+            if (this.ib) {
+                this._engine._releaseBuffer(this.ib);
+                this.ib = null;
+            }
+            if (this.fontTexture) {
+                this.fontTexture.decCachedFontTextureCounter();
+                this.fontTexture = null;
+            }
+            this.effect = null;
+            this.effectInstanced = null;
+            return true;
+        };
+        return Text2DRenderCache;
+    }(BABYLON.ModelRenderCache));
+    BABYLON.Text2DRenderCache = Text2DRenderCache;
+    var Text2DInstanceData = (function (_super) {
+        __extends(Text2DInstanceData, _super);
+        function Text2DInstanceData(partId, dataElementCount) {
+            _super.call(this, partId, dataElementCount);
+        }
+        Object.defineProperty(Text2DInstanceData.prototype, "topLeftUV", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2DInstanceData.prototype, "sizeUV", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2DInstanceData.prototype, "textureSize", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2DInstanceData.prototype, "color", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2DInstanceData.prototype, "superSampleFactor", {
+            get: function () {
+                return null;
+            },
+            set: function (value) {
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "topLeftUV", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "sizeUV", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "textureSize", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "color", null);
+        __decorate([
+            BABYLON.instanceData()
+        ], Text2DInstanceData.prototype, "superSampleFactor", null);
+        return Text2DInstanceData;
+    }(BABYLON.InstanceDataBase));
+    BABYLON.Text2DInstanceData = Text2DInstanceData;
+    var Text2D = (function (_super) {
+        __extends(Text2D, _super);
+        /**
+         * Create a Text primitive
+         * @param text the text to display
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - fontName: the name/size/style of the font to use, following the CSS notation. Default is "12pt Arial".
+         * - fontSuperSample: if true the text will be rendered with a superSampled font (the font is twice the given size). Use this settings if the text lies in world space or if it's scaled in.
+         * - defaultFontColor: the color by default to apply on each letter of the text to display, default is plain white.
+         * - areaSize: the size of the area in which to display the text, default is auto-fit from text content.
+         * - tabulationSize: number of space character to insert when a tabulation is encountered, default is 4
+         * - isVisible: true if the text must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        function Text2D(text, settings) {
+            if (!settings) {
+                settings = {};
+            }
+            _super.call(this, settings);
+            this.fontName = (settings.fontName == null) ? "12pt Arial" : settings.fontName;
+            this._fontSuperSample = (settings.fontSuperSample != null && settings.fontSuperSample);
+            this.defaultFontColor = (settings.defaultFontColor == null) ? new BABYLON.Color4(1, 1, 1, 1) : settings.defaultFontColor;
+            this._tabulationSize = (settings.tabulationSize == null) ? 4 : settings.tabulationSize;
+            this._textSize = null;
+            this.text = text;
+            this.size = (settings.size == null) ? null : settings.size;
+            this._updateRenderMode();
+        }
+        Object.defineProperty(Text2D.prototype, "fontName", {
+            get: function () {
+                return this._fontName;
+            },
+            set: function (value) {
+                if (this._fontName) {
+                    throw new Error("Font Name change is not supported right now.");
+                }
+                this._fontName = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "defaultFontColor", {
+            get: function () {
+                return this._defaultFontColor;
+            },
+            set: function (value) {
+                this._defaultFontColor = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "text", {
+            get: function () {
+                return this._text;
+            },
+            set: function (value) {
+                this._text = value;
+                this._textSize = null; // A change of text will reset the TextSize which will be recomputed next time it's used
+                this._size = null;
+                this._updateCharCount();
+                // Trigger a textSize to for a sizeChange if necessary, which is needed for layout to recompute
+                var s = this.textSize;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "size", {
+            get: function () {
+                if (this._size != null) {
+                    return this._size;
+                }
+                return this.textSize;
+            },
+            set: function (value) {
+                this._size = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "actualSize", {
+            /**
+             * Get the actual size of the Text2D primitive
+             */
+            get: function () {
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
+                return this.size;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "textSize", {
+            /**
+             * Get the area that bounds the text associated to the primitive
+             */
+            get: function () {
+                if (!this._textSize) {
+                    if (this.owner) {
+                        var newSize = this.fontTexture.measureText(this._text, this._tabulationSize);
+                        if (!newSize.equals(this._textSize)) {
+                            this.onPrimitivePropertyDirty(BABYLON.Prim2DBase.sizeProperty.flagId);
+                            this._positioningDirty();
+                        }
+                        this._textSize = newSize;
+                    }
+                    else {
+                        return Text2D.nullSize;
+                    }
+                }
+                return this._textSize;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Text2D.prototype, "fontTexture", {
+            get: function () {
+                if (this._fontTexture) {
+                    return this._fontTexture;
+                }
+                if (this.fontName == null || this.owner == null || this.owner.scene == null) {
+                    return null;
+                }
+                this._fontTexture = BABYLON.FontTexture.GetCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
+                return this._fontTexture;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Dispose the primitive, remove it from its parent
+         */
+        Text2D.prototype.dispose = function () {
+            if (!_super.prototype.dispose.call(this)) {
+                return false;
+            }
+            if (this._fontTexture) {
+                BABYLON.FontTexture.ReleaseCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
+                this._fontTexture = null;
+            }
+            return true;
+        };
+        Text2D.prototype.updateLevelBoundingInfo = function () {
+            BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        };
+        Text2D.prototype.levelIntersect = function (intersectInfo) {
+            // For now I can't do something better that boundingInfo is a hit, detecting an intersection on a particular letter would be possible, but do we really need it? Not for now...
+            return true;
+        };
+        Text2D.prototype.createModelRenderCache = function (modelKey) {
+            var renderCache = new Text2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        };
+        Text2D.prototype.setupModelRenderCache = function (modelRenderCache) {
+            var renderCache = modelRenderCache;
+            var engine = this.owner.engine;
+            renderCache.fontTexture = this.fontTexture;
+            renderCache.fontTexture.incCachedFontTextureCounter();
+            var vb = new Float32Array(4);
+            for (var i = 0; i < 4; i++) {
+                vb[i] = i;
+            }
+            renderCache.vb = engine.createVertexBuffer(vb);
+            var ib = new Float32Array(6);
+            ib[0] = 0;
+            ib[1] = 2;
+            ib[2] = 1;
+            ib[3] = 0;
+            ib[4] = 3;
+            ib[5] = 2;
+            renderCache.ib = engine.createIndexBuffer(ib);
+            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+            var ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, true);
+            if (ei) {
+                renderCache.effectInstanced = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            }
+            ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, false);
+            renderCache.effect = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            return renderCache;
+        };
+        Text2D.prototype.createInstanceDataParts = function () {
+            return [new Text2DInstanceData(Text2D.TEXT2D_MAINPARTID, this._charCount)];
+        };
+        // Looks like a hack!? Yes! Because that's what it is!
+        // For the InstanceData layer to compute correctly we need to set all the properties involved, which won't be the case if there's no text
+        // This method is called before the layout construction for us to detect this case, set some text and return the initial one to restore it after (there can be some text without char to display, say "\t\n" for instance)
+        Text2D.prototype.beforeRefreshForLayoutConstruction = function (part) {
+            if (!this._charCount) {
+                var curText = this._text;
+                this.text = "A";
+                return curText;
+            }
+        };
+        // if obj contains something, we restore the _text property
+        Text2D.prototype.afterRefreshForLayoutConstruction = function (part, obj) {
+            if (obj !== undefined) {
+                this.text = obj;
+            }
+        };
+        Text2D.prototype.refreshInstanceDataPart = function (part) {
+            if (!_super.prototype.refreshInstanceDataPart.call(this, part)) {
+                return false;
+            }
+            if (part.id === Text2D.TEXT2D_MAINPARTID) {
+                var d = part;
+                var texture = this.fontTexture;
+                var superSampleFactor = texture.isSuperSampled ? 0.5 : 1;
+                var ts = texture.getSize();
+                var offset = BABYLON.Vector2.Zero();
+                var lh = this.fontTexture.lineHeight;
+                offset.y = ((this.textSize.height / lh) - 1) * lh; // Origin is bottom, not top, so the offset is starting with a y that is the top location of the text
+                var charxpos = 0;
+                d.dataElementCount = this._charCount;
+                d.curElement = 0;
+                for (var _i = 0, _a = this.text; _i < _a.length; _i++) {
+                    var char = _a[_i];
+                    // Line feed
+                    if (char === "\n") {
+                        offset.x = 0;
+                        offset.y -= texture.lineHeight;
+                    }
+                    // Tabulation ?
+                    if (char === "\t") {
+                        var nextPos = charxpos + this._tabulationSize;
+                        nextPos = nextPos - (nextPos % this._tabulationSize);
+                        offset.x += (nextPos - charxpos) * texture.spaceWidth;
+                        charxpos = nextPos;
+                        continue;
+                    }
+                    if (char < " ") {
+                        continue;
+                    }
+                    this.updateInstanceDataPart(d, offset);
+                    var ci = texture.getChar(char);
+                    offset.x += ci.charWidth;
+                    d.topLeftUV = ci.topLeftUV;
+                    var suv = ci.bottomRightUV.subtract(ci.topLeftUV);
+                    d.sizeUV = suv;
+                    d.textureSize = new BABYLON.Vector2(ts.width, ts.height);
+                    d.color = this.defaultFontColor;
+                    d.superSampleFactor = superSampleFactor;
+                    ++d.curElement;
+                }
+            }
+            return true;
+        };
+        Text2D.prototype._updateCharCount = function () {
+            var count = 0;
+            for (var _i = 0, _a = this._text; _i < _a.length; _i++) {
+                var char = _a[_i];
+                if (char === "\r" || char === "\n" || char === "\t" || char < " ") {
+                    continue;
+                }
+                ++count;
+            }
+            this._charCount = count;
+        };
+        Text2D.prototype._useTextureAlpha = function () {
+            return this.fontTexture != null && this.fontTexture.hasAlpha;
+        };
+        Text2D.prototype._shouldUseAlphaFromTexture = function () {
+            return true;
+        };
+        Text2D.TEXT2D_MAINPARTID = 1;
+        __decorate([
+            BABYLON.modelLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, function (pi) { return Text2D.fontProperty = pi; }, false, true)
+        ], Text2D.prototype, "fontName", null);
+        __decorate([
+            BABYLON.dynamicLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, function (pi) { return Text2D.defaultFontColorProperty = pi; })
+        ], Text2D.prototype, "defaultFontColor", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, function (pi) { return Text2D.textProperty = pi; }, false, true)
+        ], Text2D.prototype, "text", null);
+        __decorate([
+            BABYLON.instanceLevelProperty(BABYLON.RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, function (pi) { return Text2D.sizeProperty = pi; })
+        ], Text2D.prototype, "size", null);
+        Text2D = __decorate([
+            BABYLON.className("Text2D")
+        ], Text2D);
+        return Text2D;
+    }(BABYLON.RenderablePrim2D));
+    BABYLON.Text2D = Text2D;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.text2d.ts

@@ -0,0 +1,513 @@
+module BABYLON {
+    export class Text2DRenderCache extends ModelRenderCache {
+        effectsReady: boolean                           = false;
+        vb: WebGLBuffer                                 = null;
+        ib: WebGLBuffer                                 = null;
+        instancingAttributes: InstancingAttributeInfo[] = null;
+        fontTexture: FontTexture                        = null;
+        effect: Effect                                  = null;
+        effectInstanced: Effect                         = null;
+
+        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
+            // Do nothing if the shader is still loading/preparing 
+            if (!this.effectsReady) {
+                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
+                    return false;
+                }
+                this.effectsReady = true;
+            }
+            let canvas = instanceInfo.owner.owner;
+            var engine = canvas.engine;
+
+            this.fontTexture.update();
+
+            let effect = context.useInstancing ? this.effectInstanced : this.effect;
+
+            engine.enableEffect(effect);
+            effect.setTexture("diffuseSampler", this.fontTexture);
+            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
+
+            var curAlphaMode = engine.getAlphaMode();
+
+            engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
+
+            let pid = context.groupInfoPartData[0];
+            if (context.useInstancing) {
+                if (!this.instancingAttributes) {
+                    this.instancingAttributes = this.loadInstancingAttributes(Text2D.TEXT2D_MAINPARTID, effect);
+                }
+
+                let glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
+                let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
+                canvas._addDrawCallCount(1, context.renderMode);
+                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
+                engine.draw(true, 0, 6, count);
+                engine.unbindInstanceAttributes();
+            } else {
+                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
+                for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
+                    this.setupUniforms(effect, 0, pid._partData, i);
+                    engine.draw(true, 0, 6);
+                }
+            }
+
+            engine.setAlphaMode(curAlphaMode, true);
+
+            return true;
+        }
+
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this.vb) {
+                this._engine._releaseBuffer(this.vb);
+                this.vb = null;
+            }
+
+            if (this.ib) {
+                this._engine._releaseBuffer(this.ib);
+                this.ib = null;
+            }
+
+            if (this.fontTexture) {
+                this.fontTexture.decCachedFontTextureCounter();
+                this.fontTexture = null;
+            }
+
+            this.effect = null;
+            this.effectInstanced = null;
+
+            return true;
+        }
+
+    }
+
+    export class Text2DInstanceData extends InstanceDataBase {
+        constructor(partId: number, dataElementCount: number) {
+            super(partId, dataElementCount);
+        }
+
+        @instanceData()
+        get topLeftUV(): Vector2 {
+            return null;
+        }
+        set topLeftUV(value: Vector2) {
+        }
+
+        @instanceData()
+        get sizeUV(): Vector2 {
+            return null;
+        }
+        set sizeUV(value: Vector2) {
+        }
+
+        @instanceData()
+        get textureSize(): Vector2 {
+            return null;
+        }
+        set textureSize(value: Vector2) {
+        }
+
+        @instanceData()
+        get color(): Color4 {
+            return null;
+        }
+        set color(value: Color4) {
+        }
+
+        @instanceData()
+        get superSampleFactor(): number {
+            return null;
+        }
+        set superSampleFactor(value: number) {
+        }
+    }
+
+    @className("Text2D")
+    /**
+     * Primitive that render text using a specific font
+     */
+    export class Text2D extends RenderablePrim2D {
+        static TEXT2D_MAINPARTID = 1;
+
+        public static fontProperty: Prim2DPropInfo;
+        public static defaultFontColorProperty: Prim2DPropInfo;
+        public static textProperty: Prim2DPropInfo;
+        public static sizeProperty: Prim2DPropInfo;
+
+        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => Text2D.fontProperty = pi, false, true)
+        /**
+         * Get/set the font name to use, using HTML CSS notation.
+         * Set is not supported right now.
+         */
+        public get fontName(): string {
+            return this._fontName;
+        }
+
+        public set fontName(value: string) {
+            if (this._fontName) {
+                throw new Error("Font Name change is not supported right now.");
+            }
+            this._fontName = value;
+        }
+
+        @dynamicLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Text2D.defaultFontColorProperty = pi)
+        /**
+         * Get/set the font default color
+         */
+        public get defaultFontColor(): Color4 {
+            return this._defaultFontColor;
+        }
+
+        public set defaultFontColor(value: Color4) {
+            this._defaultFontColor = value;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Text2D.textProperty = pi, false, true)
+        /**
+         * Get/set the text to render.
+         * \n \t character are supported. 
+         */
+        public get text(): string {
+            return this._text;
+        }
+
+        public set text(value: string) {
+            this._text = value;
+            this._textSize = null;    // A change of text will reset the TextSize which will be recomputed next time it's used
+            this._size = null;
+            this._updateCharCount();
+
+            // Trigger a textSize to for a sizeChange if necessary, which is needed for layout to recompute
+            let s = this.textSize;
+        }
+
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, pi => Text2D.sizeProperty = pi)
+        /**
+         * Get/set the size of the area where the text is drawn.
+         * You should not set this size, the default behavior compute the size based on the actual text.
+         */
+        public get size(): Size {
+            if (this._size != null) {
+                return this._size;
+            }
+            return this.textSize;
+        }
+
+        public set size(value: Size) {
+            this._size = value;
+        }
+
+        /**
+         * Get the actual size of the Text2D primitive
+         */
+        public get actualSize(): Size {
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+            return this.size;
+        }
+
+        /**
+         * Get the area that bounds the text associated to the primitive
+         */
+        public get textSize(): Size {
+            if (!this._textSize) {
+                if (this.owner) {
+                    let newSize = this.fontTexture.measureText(this._text, this._tabulationSize);
+                    if (!newSize.equals(this._textSize)) {
+                        this.onPrimitivePropertyDirty(Prim2DBase.sizeProperty.flagId);
+                        this._positioningDirty();
+                    }
+                    this._textSize = newSize;
+                } else {
+                    return Text2D.nullSize;
+                }
+            }
+            
+            return this._textSize;
+        }
+
+        protected get fontTexture(): FontTexture {
+            if (this._fontTexture) {
+                return this._fontTexture;
+            }
+
+            if (this.fontName == null || this.owner == null || this.owner.scene == null) {
+                return null;
+            }
+
+            this._fontTexture = FontTexture.GetCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
+            return this._fontTexture;
+        }
+
+        /**
+         * Dispose the primitive, remove it from its parent
+         */
+        public dispose(): boolean {
+            if (!super.dispose()) {
+                return false;
+            }
+
+            if (this._fontTexture) {
+                FontTexture.ReleaseCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
+                this._fontTexture = null;
+            }
+
+            return true;
+        }
+
+        protected updateLevelBoundingInfo() {
+            BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
+        }
+
+        /**
+         * Create a Text primitive
+         * @param text the text to display
+         * @param settings a combination of settings, possible ones are
+         * - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         * - children: an array of direct children
+         * - id a text identifier, for information purpose
+         * - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         * - rotation: the initial rotation (in radian) of the primitive. default is 0
+         * - scale: the initial scale of the primitive. default is 1. You can alternatively use scaleX &| scaleY to apply non uniform scale
+         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
+         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
+         * - zOrder: override the zOrder with the specified value
+         * - origin: define the normalized origin point location, default [0.5;0.5]
+         * - fontName: the name/size/style of the font to use, following the CSS notation. Default is "12pt Arial".
+         * - fontSuperSample: if true the text will be rendered with a superSampled font (the font is twice the given size). Use this settings if the text lies in world space or if it's scaled in.
+         * - defaultFontColor: the color by default to apply on each letter of the text to display, default is plain white.
+         * - areaSize: the size of the area in which to display the text, default is auto-fit from text content.
+         * - tabulationSize: number of space character to insert when a tabulation is encountered, default is 4
+         * - isVisible: true if the text must be visible, false for hidden. Default is true.
+         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
+         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
+         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
+         */
+        constructor(text: string, settings?: {
+
+            parent                ?: Prim2DBase, 
+            children              ?: Array<Prim2DBase>,
+            id                    ?: string,
+            position              ?: Vector2,
+            x                     ?: number,
+            y                     ?: number,
+            rotation              ?: number,
+            scale                 ?: number,
+            scaleX                ?: number,
+            scaleY                ?: number,
+            dontInheritParentScale?: boolean,
+            opacity               ?: number,
+            zOrder                ?: number, 
+            origin                ?: Vector2,
+            fontName              ?: string,
+            fontSuperSample       ?: boolean,
+            defaultFontColor      ?: Color4,
+            size                  ?: Size,
+            tabulationSize        ?: number,
+            isVisible             ?: boolean,
+            isPickable            ?: boolean,
+            isContainer           ?: boolean,
+            childrenFlatZOrder    ?: boolean,
+            marginTop             ?: number | string,
+            marginLeft            ?: number | string,
+            marginRight           ?: number | string,
+            marginBottom          ?: number | string,
+            margin                ?: number | string,
+            marginHAlignment      ?: number,
+            marginVAlignment      ?: number,
+            marginAlignment       ?: string,
+            paddingTop            ?: number | string,
+            paddingLeft           ?: number | string,
+            paddingRight          ?: number | string,
+            paddingBottom         ?: number | string,
+            padding               ?: string,
+        }) {
+
+            if (!settings) {
+                settings = {};
+            }
+
+            super(settings);
+
+            this.fontName            = (settings.fontName==null) ? "12pt Arial" : settings.fontName;
+            this._fontSuperSample    = (settings.fontSuperSample!=null && settings.fontSuperSample);
+            this.defaultFontColor    = (settings.defaultFontColor==null) ? new Color4(1,1,1,1) : settings.defaultFontColor;
+            this._tabulationSize     = (settings.tabulationSize == null) ? 4 : settings.tabulationSize;
+            this._textSize           = null;
+            this.text                = text;
+            this.size                = (settings.size==null) ? null : settings.size;
+
+            this._updateRenderMode();
+        }
+
+        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
+            // For now I can't do something better that boundingInfo is a hit, detecting an intersection on a particular letter would be possible, but do we really need it? Not for now...
+            return true;
+        }
+
+        protected createModelRenderCache(modelKey: string): ModelRenderCache {
+            let renderCache = new Text2DRenderCache(this.owner.engine, modelKey);
+            return renderCache;
+        }
+
+        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
+            let renderCache = <Text2DRenderCache>modelRenderCache;
+            let engine = this.owner.engine;
+
+            renderCache.fontTexture = this.fontTexture;
+            renderCache.fontTexture.incCachedFontTextureCounter();
+
+            let vb = new Float32Array(4);
+            for (let i = 0; i < 4; i++) {
+                vb[i] = i;
+            }
+            renderCache.vb = engine.createVertexBuffer(vb);
+
+            let ib = new Float32Array(6);
+            ib[0] = 0;
+            ib[1] = 2;
+            ib[2] = 1;
+            ib[3] = 0;
+            ib[4] = 3;
+            ib[5] = 2;
+
+            renderCache.ib = engine.createIndexBuffer(ib);
+
+            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
+            let ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, true);
+            if (ei) {
+                renderCache.effectInstanced = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+            }
+
+            ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, false);
+            renderCache.effect = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
+
+            return renderCache;
+        }
+
+        protected createInstanceDataParts(): InstanceDataBase[] {
+            return [new Text2DInstanceData(Text2D.TEXT2D_MAINPARTID, this._charCount)];
+        }
+
+        // Looks like a hack!? Yes! Because that's what it is!
+        // For the InstanceData layer to compute correctly we need to set all the properties involved, which won't be the case if there's no text
+        // This method is called before the layout construction for us to detect this case, set some text and return the initial one to restore it after (there can be some text without char to display, say "\t\n" for instance)
+        protected beforeRefreshForLayoutConstruction(part: InstanceDataBase): any {
+            if (!this._charCount) {
+                let curText = this._text;
+                this.text = "A";
+                return curText;
+            }
+        }
+
+        // if obj contains something, we restore the _text property
+        protected afterRefreshForLayoutConstruction(part: InstanceDataBase, obj: any) {
+            if (obj !== undefined) {
+                this.text = obj;
+            }
+        }
+
+        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
+            if (!super.refreshInstanceDataPart(part)) {
+                return false;
+            }
+
+            if (part.id === Text2D.TEXT2D_MAINPARTID) {
+                let d = <Text2DInstanceData>part;
+                let texture = this.fontTexture;
+                let superSampleFactor = texture.isSuperSampled ? 0.5 : 1;
+                let ts = texture.getSize();
+                let offset = Vector2.Zero();
+                let lh = this.fontTexture.lineHeight;
+                offset.y = ((this.textSize.height/lh)-1) * lh;  // Origin is bottom, not top, so the offset is starting with a y that is the top location of the text
+                let charxpos = 0;
+                d.dataElementCount = this._charCount;
+                d.curElement = 0;
+                for (let char of this.text) {
+
+                    // Line feed
+                    if (char === "\n") {
+                        offset.x = 0;
+                        offset.y -= texture.lineHeight;
+                    }
+
+                    // Tabulation ?
+                    if (char === "\t") {
+                        let nextPos = charxpos + this._tabulationSize;
+                        nextPos = nextPos - (nextPos % this._tabulationSize);
+
+                        offset.x += (nextPos - charxpos) * texture.spaceWidth;
+                        charxpos = nextPos;
+                        continue;
+                    }
+
+                    if (char < " ") {
+                        continue;
+                    }
+
+                    this.updateInstanceDataPart(d, offset);
+
+                    let ci = texture.getChar(char);
+                    offset.x += ci.charWidth;
+
+                    d.topLeftUV = ci.topLeftUV;
+                    let suv = ci.bottomRightUV.subtract(ci.topLeftUV);
+                    d.sizeUV = suv;
+                    d.textureSize = new Vector2(ts.width, ts.height);
+                    d.color = this.defaultFontColor;
+                    d.superSampleFactor = superSampleFactor;
+
+                    ++d.curElement;
+                }
+            }
+            return true;
+        }
+
+        private _updateCharCount() {
+            let count = 0;
+            for (let char of this._text) {
+                if (char === "\r" || char === "\n" || char === "\t" || char < " ") {
+                    continue;
+                }
+                ++count;
+            }
+            this._charCount = count;
+        }
+
+        protected _useTextureAlpha(): boolean {
+            return this.fontTexture != null && this.fontTexture.hasAlpha;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return true;
+        }
+
+        private _fontTexture: FontTexture;
+        private _tabulationSize: number;
+        private _charCount: number;
+        private _fontName: string;
+        private _fontSuperSample: boolean;
+        private _defaultFontColor: Color4;
+        private _text: string;
+        private _textSize: Size;
+    }
+
+
+}

canvas2D/src/babylon.worldSpaceCanvas2dNode.js

@@ -0,0 +1,27 @@
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * This is the class that is used to display a World Space Canvas into a 3D scene
+     */
+    var WorldSpaceCanvas2DNode = (function (_super) {
+        __extends(WorldSpaceCanvas2DNode, _super);
+        function WorldSpaceCanvas2DNode(name, scene, canvas) {
+            _super.call(this, name, scene);
+            this._canvas = canvas;
+        }
+        WorldSpaceCanvas2DNode.prototype.dispose = function () {
+            _super.prototype.dispose.call(this);
+            if (this._canvas) {
+                this._canvas.dispose();
+                this._canvas = null;
+            }
+        };
+        return WorldSpaceCanvas2DNode;
+    }(BABYLON.Mesh));
+    BABYLON.WorldSpaceCanvas2DNode = WorldSpaceCanvas2DNode;
+})(BABYLON || (BABYLON = {}));

canvas2D/src/babylon.worldSpaceCanvas2dNode.ts

@@ -0,0 +1,22 @@
+module BABYLON {
+    /**
+     * This is the class that is used to display a World Space Canvas into a 3D scene
+     */
+    export class WorldSpaceCanvas2DNode extends Mesh {
+        constructor(name: string, scene: Scene, canvas: Canvas2D) {
+            super(name, scene);
+
+            this._canvas = canvas;
+        }
+
+        public dispose(): void {
+            super.dispose();
+            if (this._canvas) {
+                this._canvas.dispose();
+                this._canvas = null;
+            }
+        }
+
+        private _canvas: Canvas2D;
+    }
+}

canvas2D/src/shaders/ellipse2d.fragment.fx

@@ -0,0 +1,5 @@
+varying vec4 vColor;
+
+void main(void) {
+	gl_FragColor = vColor;
+}

canvas2D/src/shaders/ellipse2d.vertex.fx

@@ -0,0 +1,109 @@
+// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
+#ifdef Instanced
+#define att attribute
+#else
+#define att uniform
+#endif
+
+attribute float index;
+att vec2 zBias;
+att vec4 transformX;
+att vec4 transformY;
+att float opacity;
+
+#ifdef Border
+att float borderThickness;
+#endif
+
+#ifdef FillSolid
+att vec4 fillSolidColor;
+#endif
+
+#ifdef BorderSolid
+att vec4 borderSolidColor;
+#endif
+
+#ifdef FillGradient
+att vec4 fillGradientColor1;
+att vec4 fillGradientColor2;
+att vec4 fillGradientTY;
+#endif
+
+#ifdef BorderGradient
+att vec4 borderGradientColor1;
+att vec4 borderGradientColor2;
+att vec4 borderGradientTY;
+#endif
+
+// x, y and z are: width, height, subdivisions
+att vec3 properties;
+
+#define TWOPI 6.28318530
+
+// Output
+varying vec2 vUV;
+varying vec4 vColor;
+
+void main(void) {
+
+	vec2 pos2;
+
+#ifdef Border
+	float w = properties.x;
+	float h = properties.y;
+	float ms = properties.z;
+	vec2 borderOffset = vec2(1.0, 1.0);
+
+	float segi = index;
+	if (index < ms) {
+		borderOffset = vec2(1.0-(borderThickness*2.0 / w), 1.0-(borderThickness*2.0 / h));
+	}
+	else {
+		segi -= ms;
+	}
+
+	float angle = TWOPI * segi / ms;
+	pos2.x = (cos(angle) / 2.0) + 0.5;
+	pos2.y = (sin(angle) / 2.0) + 0.5;
+
+	pos2.x = ((pos2.x - 0.5) * borderOffset.x) + 0.5;
+	pos2.y = ((pos2.y - 0.5) * borderOffset.y) + 0.5;
+#else
+	if (index == 0.0) {
+		pos2 = vec2(0.5, 0.5);
+	}
+	else {
+		float ms = properties.z;
+
+		float angle = TWOPI * (index - 1.0) / ms;
+		pos2.x = (cos(angle) / 2.0) + 0.5;
+		pos2.y = (sin(angle) / 2.0) + 0.5;
+	}
+#endif
+
+#ifdef FillSolid
+	vColor = fillSolidColor;
+#endif
+
+#ifdef BorderSolid
+	vColor = borderSolidColor;
+#endif
+
+#ifdef FillGradient
+	float v = dot(vec4(pos2.xy, 1, 1), fillGradientTY);
+	vColor = mix(fillGradientColor2, fillGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
+#endif
+
+#ifdef BorderGradient
+	float v = dot(vec4(pos2.xy, 1, 1), borderGradientTY);
+	vColor = mix(borderGradientColor2, borderGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
+#endif
+
+	vColor.a *= opacity;
+	vec4 pos;
+	pos.xy = pos2.xy * properties.xy;
+	pos.z = 1.0;
+	pos.w = 1.0;
+	gl_Position = vec4(dot(pos, transformX), dot(pos, transformY), zBias.x, 1);
+
+}

canvas2D/src/shaders/lines2d.fragment.fx

@@ -0,0 +1,5 @@
+varying vec4 vColor;
+
+void main(void) {
+	gl_FragColor = vColor;
+}

canvas2D/src/shaders/lines2d.vertex.fx

@@ -0,0 +1,69 @@
+// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
+#ifdef Instanced
+#define att attribute
+#else
+#define att uniform
+#endif
+
+attribute vec2 position;
+att vec2 zBias;
+att vec4 transformX;
+att vec4 transformY;
+att float opacity;
+
+#ifdef FillSolid
+att vec4 fillSolidColor;
+#endif
+
+#ifdef BorderSolid
+att vec4 borderSolidColor;
+#endif
+
+#ifdef FillGradient
+att vec2 boundingMin;
+att vec2 boundingMax;
+att vec4 fillGradientColor1;
+att vec4 fillGradientColor2;
+att vec4 fillGradientTY;
+#endif
+
+#ifdef BorderGradient
+att vec4 borderGradientColor1;
+att vec4 borderGradientColor2;
+att vec4 borderGradientTY;
+#endif
+
+#define TWOPI 6.28318530
+
+// Output
+varying vec2 vUV;
+varying vec4 vColor;
+
+void main(void) {
+
+#ifdef FillSolid
+	vColor = fillSolidColor;
+#endif
+
+#ifdef BorderSolid
+	vColor = borderSolidColor;
+#endif
+
+#ifdef FillGradient
+	float v = dot(vec4((position.xy - boundingMin) / (boundingMax - boundingMin), 1, 1), fillGradientTY);
+	vColor = mix(fillGradientColor2, fillGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
+#endif
+
+#ifdef BorderGradient
+	float v = dot(vec4((position.xy - boundingMin) / (boundingMax - boundingMin), 1, 1), borderGradientTY);
+	vColor = mix(borderGradientColor2, borderGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
+#endif
+
+	vColor.a *= opacity;
+	vec4 pos;
+	pos.xy = position.xy;
+	pos.z = 1.0;
+	pos.w = 1.0;
+	gl_Position = vec4(dot(pos, transformX), dot(pos, transformY), zBias.x, 1);
+
+}

canvas2D/src/shaders/rect2d.fragment.fx

@@ -0,0 +1,5 @@
+varying vec4 vColor;
+
+void main(void) {
+	gl_FragColor = vColor;
+}

canvas2D/src/shaders/rect2d.vertex.fx

@@ -0,0 +1,207 @@
+// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
+#ifdef Instanced
+#define att attribute
+#else
+#define att uniform
+#endif
+
+attribute float index;
+att vec2 zBias;
+att vec4 transformX;
+att vec4 transformY;
+att float opacity;
+
+#ifdef Border
+att float borderThickness;
+#endif
+
+#ifdef FillSolid
+att vec4 fillSolidColor;
+#endif
+
+#ifdef BorderSolid
+att vec4 borderSolidColor;
+#endif
+
+#ifdef FillGradient
+att vec4 fillGradientColor1;
+att vec4 fillGradientColor2;
+att vec4 fillGradientTY;
+#endif
+
+#ifdef BorderGradient
+att vec4 borderGradientColor1;
+att vec4 borderGradientColor2;
+att vec4 borderGradientTY;
+#endif
+
+// xyzw are: width, height, roundRadius (0.0 for simple rectangle with four vertices)
+att vec3 properties;
+
+// First index is the center, then there's four sections of 16 subdivisions
+
+#define rsub0 17.0
+#define rsub1 33.0
+#define rsub2 49.0
+#define rsub3 65.0
+#define rsub 64.0
+#define TWOPI 6.28318530
+
+// Output
+varying vec2 vUV;
+varying vec4 vColor;
+
+void main(void) {
+
+	vec2 pos2;
+
+	// notRound case, only five vertices, 0 is center, then the 4 other for perimeter
+	if (properties.z == 0.0) {
+#ifdef Border
+		float w = properties.x;
+		float h = properties.y;
+		vec2 borderOffset = vec2(1.0, 1.0);
+
+		float segi = index;
+		if (index < 4.0) {
+			borderOffset = vec2(1.0 - (borderThickness*2.0 / w), 1.0 - (borderThickness*2.0 / h));
+		}
+		else {
+			segi -= 4.0;
+		}
+
+		if (segi == 0.0) {
+			pos2 = vec2(1.0, 1.0);
+		} 
+		else if (segi == 1.0) {
+			pos2 = vec2(1.0, 0.0);
+		}
+		else if (segi == 2.0) {
+			pos2 = vec2(0.0, 0.0);
+		} 
+		else {
+			pos2 = vec2(0.0, 1.0);
+		}
+		pos2.x = ((pos2.x - 0.5) * borderOffset.x) + 0.5;
+		pos2.y = ((pos2.y - 0.5) * borderOffset.y) + 0.5;
+#else
+		if (index == 0.0) {
+			pos2 = vec2(0.5, 0.5);
+		}
+		else if (index == 1.0) {
+			pos2 = vec2(1.0, 1.0);
+		}
+		else if (index == 2.0) {
+			pos2 = vec2(1.0, 0.0);
+		}
+		else if (index == 3.0) {
+			pos2 = vec2(0.0, 0.0);
+		}
+		else {
+			pos2 = vec2(0.0, 1.0);
+		}
+#endif
+	}
+	else
+	{
+#ifdef Border
+		float w = properties.x;
+		float h = properties.y;
+		float r = properties.z;
+		float nru = r / w;
+		float nrv = r / h;
+		vec2 borderOffset = vec2(1.0, 1.0);
+
+		float segi = index;
+		if (index < rsub) {
+			borderOffset = vec2(1.0 - (borderThickness*2.0 / w), 1.0 - (borderThickness*2.0 / h));
+		}
+		else {
+			segi -= rsub;
+		}
+
+		// right/bottom
+		if (segi < rsub0) {
+			pos2 = vec2(1.0 - nru, nrv);
+		}
+		// left/bottom
+		else if (segi < rsub1) {
+			pos2 = vec2(nru, nrv);
+		}
+		// left/top
+		else if (segi < rsub2) {
+			pos2 = vec2(nru, 1.0 - nrv);
+		}
+		// right/top
+		else {
+			pos2 = vec2(1.0 - nru, 1.0 - nrv);
+		}
+
+		float angle = TWOPI - ((index - 1.0) * TWOPI / (rsub - 0.5));
+		pos2.x += cos(angle) * nru;
+		pos2.y += sin(angle) * nrv;
+
+		pos2.x = ((pos2.x - 0.5) * borderOffset.x) + 0.5;
+		pos2.y = ((pos2.y - 0.5) * borderOffset.y) + 0.5;
+
+#else
+		if (index == 0.0) {
+			pos2 = vec2(0.5, 0.5);
+		}
+		else {
+			float w = properties.x;
+			float h = properties.y;
+			float r = properties.z;
+			float nru = r / w;
+			float nrv = r / h;
+
+			// right/bottom
+			if (index < rsub0) {
+				pos2 = vec2(1.0 - nru, nrv);
+			}
+			// left/bottom
+			else if (index < rsub1) {
+				pos2 = vec2(nru, nrv);
+			}
+			// left/top
+			else if (index < rsub2) {
+				pos2 = vec2(nru, 1.0 - nrv);
+			}
+			// right/top
+			else {
+				pos2 = vec2(1.0 - nru, 1.0 - nrv);
+			}
+
+			float angle = TWOPI - ((index - 1.0) * TWOPI / (rsub - 0.5));
+			pos2.x += cos(angle) * nru;
+			pos2.y += sin(angle) * nrv;
+		}
+#endif
+	}
+
+#ifdef FillSolid
+	vColor = fillSolidColor;
+#endif
+
+#ifdef BorderSolid
+	vColor = borderSolidColor;
+#endif
+
+#ifdef FillGradient
+	float v = dot(vec4(pos2.xy, 1, 1), fillGradientTY);
+	vColor = mix(fillGradientColor2, fillGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
+#endif
+
+#ifdef BorderGradient
+	float v = dot(vec4(pos2.xy, 1, 1), borderGradientTY);
+	vColor = mix(borderGradientColor2, borderGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
+#endif
+
+	vColor.a *= opacity;
+	vec4 pos;
+	pos.xy = pos2.xy * properties.xy;
+	pos.z = 1.0;
+	pos.w = 1.0;
+	gl_Position = vec4(dot(pos, transformX), dot(pos, transformY), zBias.x, 1);
+
+}

canvas2D/src/shaders/sprite2d.fragment.fx

@@ -0,0 +1,17 @@
+varying vec2 vUV;
+varying float vOpacity;
+uniform bool alphaTest;
+uniform sampler2D diffuseSampler;
+
+void main(void) {
+	vec4 color = texture2D(diffuseSampler, vUV);
+
+	if (alphaTest)
+	{
+		if (color.a < 0.95) {
+			discard;
+		}
+	}
+	color.a *= vOpacity;
+	gl_FragColor = color;
+}

canvas2D/src/shaders/sprite2d.vertex.fx

@@ -0,0 +1,82 @@
+// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
+#ifdef Instanced
+#define att attribute
+#else
+#define att uniform
+#endif
+
+// Attributes
+attribute float index;
+
+att vec2 topLeftUV;
+att vec2 sizeUV;
+att vec2 scaleFactor;
+att vec2 textureSize;
+
+// x: frame, y: invertY, z: alignToPixel
+att vec3 properties;
+
+att vec2 zBias;
+att vec4 transformX;
+att vec4 transformY;
+att float opacity;
+
+// Uniforms
+
+// Output
+varying vec2 vUV;
+varying float vOpacity;
+
+void main(void) {
+
+	vec2 pos2;
+
+	//vec2 off = vec2(1.0 / textureSize.x, 1.0 / textureSize.y);
+	vec2 off = vec2(0.0, 0.0);
+	vec2 sfSizeUV = sizeUV * scaleFactor;
+
+	float frame = properties.x;
+	float invertY = properties.y;
+	float alignToPixel = properties.z;
+
+	// Left/Top
+	if (index == 0.0) {
+		pos2 = vec2(0.0, 0.0);
+		vUV = vec2(topLeftUV.x + (frame*sfSizeUV.x) + off.x, topLeftUV.y - off.y);
+	}
+
+	// Left/Bottom
+	else if (index == 1.0) {
+		pos2 = vec2(0.0,  1.0);
+		vUV = vec2(topLeftUV.x + (frame*sfSizeUV.x) + off.x, (topLeftUV.y + sfSizeUV.y));
+	}
+
+	// Right/Bottom
+	else if (index == 2.0) {
+		pos2 = vec2( 1.0,  1.0);
+		vUV = vec2(topLeftUV.x + sfSizeUV.x + (frame*sfSizeUV.x), (topLeftUV.y + sfSizeUV.y));
+	}
+
+	// Right/Top
+	else if (index == 3.0) {
+		pos2 = vec2( 1.0, 0.0);
+		vUV = vec2(topLeftUV.x + sfSizeUV.x + (frame*sfSizeUV.x), topLeftUV.y - off.y);
+	}
+
+	if (invertY == 1.0) {
+		vUV.y = 1.0 - vUV.y;
+	}
+
+	vec4 pos;
+	if (alignToPixel == 1.0)
+	{
+		pos.xy = floor(pos2.xy * sizeUV * textureSize);
+	} else {
+		pos.xy = pos2.xy * sizeUV * textureSize;
+	}
+
+	vOpacity = opacity;
+	pos.z = 1.0;
+	pos.w = 1.0;
+	gl_Position = vec4(dot(pos, transformX), dot(pos, transformY), zBias.x, 1);
+}	

canvas2D/src/shaders/text2d.fragment.fx

@@ -0,0 +1,10 @@
+varying vec4 vColor;
+varying vec2 vUV;
+
+// Samplers
+uniform sampler2D diffuseSampler;
+
+void main(void) {
+	vec4 color = texture2D(diffuseSampler, vUV);
+	gl_FragColor = color*vColor;
+}

canvas2D/src/shaders/text2d.vertex.fx

@@ -0,0 +1,64 @@
+// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
+#ifdef Instanced
+#define att attribute
+#else
+#define att uniform
+#endif
+
+// Attributes
+attribute float index;
+att vec2 zBias;
+
+att vec4 transformX;
+att vec4 transformY;
+att float opacity;
+
+att vec2 topLeftUV;
+att vec2 sizeUV;
+att vec2 textureSize;
+att vec4 color;
+att float superSampleFactor;
+
+// Output
+varying vec2 vUV;
+varying vec4 vColor;
+
+void main(void) {
+
+	vec2 pos2;
+
+	// Bottom/Left
+	if (index == 0.0) {
+		pos2 = vec2(0.0, 0.0);
+		vUV = vec2(topLeftUV.x, topLeftUV.y + sizeUV.y);
+	}
+
+	// Top/Left
+	else if (index == 1.0) {
+		pos2 = vec2(0.0, 1.0);
+		vUV = vec2(topLeftUV.x, topLeftUV.y);
+	}
+	
+	// Top/Right
+	else if (index == 2.0) {
+		pos2 = vec2(1.0, 1.0);
+		vUV = vec2(topLeftUV.x + sizeUV.x, topLeftUV.y);
+	}
+
+	// Bottom/Right
+	else if (index == 3.0) {
+		pos2 = vec2(1.0, 0.0);
+		vUV = vec2(topLeftUV.x + sizeUV.x, topLeftUV.y + sizeUV.y);
+	}
+
+	// Align texture coordinate to texel to enhance rendering quality
+	vUV = (floor(vUV*textureSize) + vec2(0.0, 0.0)) / textureSize;
+
+	vColor = color;
+	vColor.a *= opacity;
+	vec4 pos;
+	pos.xy = floor(pos2.xy * superSampleFactor * sizeUV * textureSize);	// Align on target pixel to avoid bad interpolation
+	pos.z = 1.0;
+	pos.w = 1.0;
+	gl_Position = vec4(dot(pos, transformX), dot(pos, transformY), zBias.x, 1);
+}