10 files changed, 151 insertions, 4 deletions

diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index a68a7d6b..deef2a47 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -76,6 +76,26 @@ exports.Combobox = Montage.create(Component, {
         }
     },
 
+    _enabled: {
+        enumerable: false,
+        value: true
+    },
+
+    enabled: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+            return this._enabled;
+        },
+        set: function(value) {
+            if(value !== this._enabled)
+            {
+                this._enabled = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     handleChange:
     {
         value:function(event)
@@ -117,6 +137,7 @@ exports.Combobox = Montage.create(Component, {
                     }
                     this.element.appendChild(optionItem);
                 }
+                this.element.disabled = !this._enabled;
             }
         }
     },
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 5efbccd0..3f1ccc3d 100644
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -5,7 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage =                   require("montage/core/core").Montage,
-    CanvasController = require("js/controllers/elements/canvas-controller").CanvasController;
+    CanvasController = require("js/controllers/elements/canvas-controller").CanvasController,
+    njModule = require("js/lib/NJUtils");
 
 exports.ShapesController = Montage.create(CanvasController, {
 
@@ -56,6 +57,17 @@ exports.ShapesController = Montage.create(CanvasController, {
                     el.elementModel.shapeModel.GLWorld.setViewportFromCanvas(el);
                     el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                     break;
+                case "useWebGl":
+                    var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true);
+                    canvas.width = el.width;
+                    canvas.height = el.height;
+                    this.application.ninja.elementMediator.replaceElement(el, canvas);
+                    NJevent("elementDeleted", el);
+                    this.application.ninja.selectionController.selectElement(canvas);
+                    el = canvas;
+                    this.toggleWebGlMode(el, value);
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    break;
                 default:
                     CanvasController.setProperty(el, p, value);
             }
@@ -76,6 +88,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "fillMaterial":
                 case "border":
                 case "background":
+                case "useWebGl":
                     return this.getShapeProperty(el, p);
                 default:
                     return CanvasController.getProperty(el, p);
@@ -275,6 +288,60 @@ exports.ShapesController = Montage.create(CanvasController, {
         {
             return (el.elementModel && el.elementModel.isShape);
         }
+    },
+
+    toggleWebGlMode: {
+        value: function(el, useWebGl)
+        {
+            if(useWebGl)
+            {
+                this.convertToWebGlWorld(el);
+            }
+            else
+            {
+                this.convertTo2DWorld(el);
+            }
+        }
+    },
+
+    convertToWebGlWorld: {
+        value: function(el)
+        {
+            if(el.elementModel.shapeModel.useWebGl)
+            {
+                return;
+            }
+            var world,
+                worldData = el.elementModel.shapeModel.GLWorld.export();
+            if(worldData)
+            {
+                world = new GLWorld(el, true);
+                el.elementModel.shapeModel.GLWorld = world;
+                el.elementModel.shapeModel.useWebGl = true;
+                world.import(worldData);
+            }
+
+        }
+    },
+
+    convertTo2DWorld: {
+        value: function(el)
+        {
+            if(!el.elementModel.shapeModel.useWebGl)
+            {
+                return;
+            }
+            var world,
+                worldData = el.elementModel.shapeModel.GLWorld.export();
+            if(worldData)
+            {
+                world = new GLWorld(el, false);
+                el.elementModel.shapeModel.GLWorld = world;
+                el.elementModel.shapeModel.useWebGl = false;
+                world.import(worldData);
+            }
+
+        }
     }
 
 });
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index dd75e255..901ca37f 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -369,12 +369,23 @@ exports.PiData = Montage.create( Montage, {
                 Section: [
                     [
                         {
+                            type: "checkbox",
+                            id: "useWebGl",
+                            prop: "useWebGl",
+                            defaultValue: false,
+                            value: "Use WebGL",
+                            checked: false
+                        }
+                    ],
+                    [
+                        {
                             type: "dropdown",
                             id:   "strokeMaterial",
                             prop:   "strokeMaterial",
                             label: "Stroke",
                             labelField: "_name",
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
                         }
                     ],
@@ -385,7 +396,8 @@ exports.PiData = Montage.create( Montage, {
                             prop:   "fillMaterial",
                             label: "Fill",
                             labelField: "_name",
-                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }
+                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
@@ -434,11 +446,22 @@ exports.PiData = Montage.create( Montage, {
                 Section: [
                     [
                         {
+                            type: "checkbox",
+                            id: "useWebGl",
+                            prop: "useWebGl",
+                            defaultValue: false,
+                            value: "Use WebGL",
+                            checked: false
+                        }
+                    ],
+                    [
+                        {
                             type: "dropdown",
                             id:   "stroke",
                             label: "Stroke",
                             labelField: "_name",
-                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }
+                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            enabled: { boundObject: "this.controls", boundPr