Merge branch 'decouple-renderer'

README.md

@@ -103,7 +103,6 @@ See how others are using matter.js physics
 - Collision queries (raycasting, region tests)
 - Time scaling (slow-mo, speed-up)
 - Canvas renderer (supports vectors and textures)
-- WebGL renderer (requires [pixi.js](https://github.com/GoodBoyDigital/pixi.js/))
 - [MatterTools](https://github.com/liabru/matter-tools) for creating, testing and debugging worlds
 - World state serialisation (requires [resurrect.js](https://github.com/skeeto/resurrect-js))
 - Cross-browser (Chrome, Firefox, Safari, IE8+)
@@ -173,7 +172,7 @@ The engine uses the following techniques:
 - Constraints solved with the Gauss-Siedel method
 - Semi-variable time step, synced with rendering
 -   A basic sleeping strategy
-- HTML5 Canvas / WebGL renderer
+- HTML5 Canvas rendering
 
 For more information see my post on [Game physics for beginners](http://brm.io/game-physics-for-beginners/).
 

demo/js/Demo.js

@@ -33,7 +33,8 @@
         Events = Matter.Events,
         Mouse = Matter.Mouse,
         MouseConstraint = Matter.MouseConstraint,
-        Runner = Matter.Runner;
+        Runner = Matter.Runner,
+        Render = Matter.Render;
 
     // MatterTools aliases
     if (window.MatterTools) {
@@ -64,12 +65,24 @@
         // run the engine
         demo.runner = Engine.run(demo.engine);
 
+        // create a debug renderer
+        demo.render = Render.create({
+            element: demo.container,
+            engine: demo.engine
+        });
+
+        // run the renderer
+        Render.run(demo.render);
+
         // add a mouse controlled constraint
-        demo.mouseConstraint = MouseConstraint.create(demo.engine);
+        demo.mouseConstraint = MouseConstraint.create(demo.engine, {
+            element: demo.render.canvas
+        });
+
         World.add(demo.engine.world, demo.mouseConstraint);
 
         // pass mouse to renderer to enable showMousePosition
-        demo.engine.render.mouse = demo.mouseConstraint.mouse;
+        demo.render.mouse = demo.mouseConstraint.mouse;
 
         // get the scene function name from hash
         if (window.location.hash.length !== 0) 
@@ -108,23 +121,21 @@
 
         // create a Matter.Gui
         if (!_isMobile && Gui) {
-            demo.gui = Gui.create(demo.engine, demo.runner);
+            demo.gui = Gui.create(demo.engine, demo.runner, demo.render);
 
             // need to add mouse constraint back in after gui clear or load is pressed
             Events.on(demo.gui, 'clear load', function() {
-                demo.mouseConstraint = MouseConstraint.create(demo.engine);
-                World.add(demo.engine.world, demo.mouseConstraint);
-            });
+                demo.mouseConstraint = MouseConstraint.create(demo.engine, {
+                    element: demo.render.canvas
+                });
 
-            // need to rebind mouse on render change
-            Events.on(demo.gui, 'setRenderer', function() {
-                Mouse.setElement(demo.mouseConstraint.mouse, demo.engine.render.canvas);
+                World.add(demo.engine.world, demo.mouseConstraint);
             });
         }
 
         // create a Matter.Inspector
         if (!_isMobile && Inspector && _useInspector) {
-            demo.inspector = Inspector.create(demo.engine, demo.runner);
+            demo.inspector = Inspector.create(demo.engine, demo.runner, demo.render);
 
             Events.on(demo.inspector, 'import', function() {
                 demo.mouseConstraint = MouseConstraint.create(demo.engine);
@@ -150,7 +161,7 @@
             var body = document.body;
 
             body.className += ' is-mobile';
-            demo.engine.render.canvas.addEventListener('touchstart', Demo.fullscreen);
+            demo.render.canvas.addEventListener('touchstart', Demo.fullscreen);
 
             var fullscreenChange = function() {
                 var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
@@ -248,7 +259,7 @@
     };
 
     Demo.fullscreen = function(demo) {
-        var _fullscreenElement = demo.engine.render.canvas;
+        var _fullscreenElement = demo.render.canvas;
 
         if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
             if (_fullscreenElement.requestFullscreen) {
@@ -269,10 +280,10 @@
         Engine.clear(demo.engine);
 
         // clear scene graph (if defined in controller)
-        if (demo.engine.render) {
-            var renderController = demo.engine.render.controller;
+        if (demo.render) {
+            var renderController = demo.render.controller;
             if (renderController && renderController.clear)
-                renderController.clear(demo.engine.render);
+                renderController.clear(demo.render);
         }
 
         // clear all scene events
@@ -296,9 +307,9 @@
                 Events.off(demo.runner, demo.sceneEvents[i]);
         }
 
-        if (demo.engine.render && demo.engine.render.events) {
+        if (demo.render && demo.render.events) {
             for (i = 0; i < demo.sceneEvents.length; i++)
-                Events.off(demo.engine.render, demo.sceneEvents[i]);
+                Events.off(demo.render, demo.sceneEvents[i]);
         }
 
         demo.sceneEvents = [];
@@ -335,8 +346,8 @@
             World.add(world, demo.mouseConstraint);
         }
 
-        if (demo.engine.render) {
-            var renderOptions = demo.engine.render.options;
+        if (demo.render) {
+            var renderOptions = demo.render.options;
             renderOptions.wireframes = true;
             renderOptions.hasBounds = false;
             renderOptions.showDebug = false;

demo/js/lib/matter-tools/matter-tools-dev.js

@@ -1,5 +1,5 @@
 /**
-* matter-tools-dev.min.js 0.5.0-dev 2015-12-05
+* matter-tools-dev.min.js 0.5.0-dev 2016-04-26
 * https://github.com/liabru/matter-tools
 * License: MIT
 */
@@ -10,7 +10,7 @@
   var Gui = {};
   (function() {
     var _isWebkit = "WebkitAppearance" in document.documentElement.style;
-    Gui.create = function(engine, runner, options) {
+    Gui.create = function(engine, runner, render, options) {
       var _datGuiSupported = window.dat && window.localStorage;
       if (!_datGuiSupported) {
         console.log("Could not create GUI. Check dat.gui library is loaded first.");
@@ -20,6 +20,7 @@
       var gui = {
         engine:engine,
         runner:runner,
+        render:render,
         datGui:datGui,
         broadphase:"grid",
         broadphaseCache:{
@@ -116,7 +117,7 @@
           Events.trigger(gui, "load");
         },
         inspect:function() {
-          if (!Inspector.instance) gui.inspector = Inspector.create(gui.engine, gui.runner);
+          if (!Inspector.instance) gui.inspector = Inspector.create(gui.engine, gui.runner, gui.render);
         },
         recordGif:function() {
           if (!gui.isRecording) {
@@ -201,40 +202,24 @@
       physics.add(runner, "enabled");
       physics.open();
       var render = datGui.addFolder("Render");
-      render.add(gui, "renderer", [ "canvas", "webgl" ]).onFinishChange(function(value) {
-        _setRenderer(gui, value);
-      });
-      render.add(engine.render.options, "wireframes");
-      render.add(engine.render.options, "showDebug");
-      render.add(engine.render.options, "showPositions");
-      render.add(engine.render.options, "showBroadphase");
-      render.add(engine.render.options, "showBounds");
-      render.add(engine.render.options, "showVelocity");
-      render.add(engine.render.options, "showCollisions");
-      render.add(engine.render.options, "showSeparations");
-      render.add(engine.render.options, "showAxes");
-      render.add(engine.render.options, "showAngleIndicator");
-      render.add(engine.render.options, "showSleeping");
-      render.add(engine.render.options, "showIds");
-      render.add(engine.render.options, "showVertexNumbers");
-      render.add(engine.render.options, "showConvexHulls");
-      render.add(engine.render.options, "showInternalEdges");
-      render.add(engine.render.options, "enabled");
+      render.add(gui.render.options, "wireframes");
+      render.add(gui.render.options, "showDebug");
+      render.add(gui.render.options, "showPositions");
+      render.add(gui.render.options, "showBroadphase");
+      render.add(gui.render.options, "showBounds");
+      render.add(gui.render.options, "showVelocity");
+      render.add(gui.render.options, "showCollisions");
+      render.add(gui.render.options, "showSeparations");
+      render.add(gui.render.options, "showAxes");
+      render.add(gui.render.options, "showAngleIndicator");
+      render.add(gui.render.options, "showSleeping");
+      render.add(gui.render.options, "showIds");
+      render.add(gui.render.options, "showVertexNumbers");
+      render.add(gui.render.options, "showConvexHulls");
+      render.add(gui.render.options, "showInternalEdges");
+      render.add(gui.render.options, "enabled");
       render.open();
     };
-    var _setRenderer = function(gui, rendererName) {
-      var engine = gui.engine, controller;
-      if (rendererName === "canvas") controller = Render;
-      if (rendererName === "webgl") controller = RenderPixi;
-      engine.render.element.removeChild(engine.render.canvas);
-      var options = engine.render.options;
-      engine.render = controller.create({
-        element:engine.render.element,
-        options:options
-      });
-      engine.render.options = options;
-      Events.trigger(gui, "setRenderer");
-    };
     var _addBody = function(gui) {
       var engine = gui.engine;
       var options = {
@@ -257,8 +242,8 @@
       var engine = gui.engine;
       World.clear(engine.world, true);
       Engine.clear(engine);
-      var renderController = engine.render.controller;
-      if (renderController.clear) renderController.clear(engine.render);
+      var renderController = gui.render.controller;
+      if (renderController.clear) renderController.clear(gui.render);
       Events.trigger(gui, "clear");
     };
     var _initGif = function(gui) {
@@ -268,7 +253,7 @@
       var engine = gui.engine, skipFrame = false;
       Matter.Events.on(gui.runner, "beforeTick", function(event) {
         if (gui.isRecording && !skipFrame) {
-          gui.gif.addFrame(engine.render.context, {
+          gui.gif.addFrame(gui.render.context, {
             copy:true,
             delay:25
           });
@@ -280,14 +265,15 @@
   var Inspector = {};
   (function() {
     var _key, _isWebkit = "WebkitAppearance" in document.documentElement.style, $body;
-    Inspector.create = function(engine, runner, options) {
+    Inspector.create = function(engine, runner, render, options) {
       if (!jQuery || !$.fn.jstree || !window.key) {
         console.log("Could not create inspector. Check keymaster, jQuery, jsTree libraries are loaded first.");
         return;
       }
       var inspector = {
-        engine:engine,
-        runner:runner,
+        engine:null,
+        runner:null,
+        render:null,
         isPaused:false,
         selected:[],
         selectStart:null,
@@ -317,7 +303,10 @@
       };
       inspector = Common.extend(inspector, options);
       Inspector.instance = inspector;
-      inspector.mouse = Mouse.create(engine.render.canvas);
+      inspector.engine = engine;
+      inspector.runner = runner;
+      inspector.render = render;
+      inspector.mouse = Mouse.create(inspector.render.canvas);
       inspector.mouseConstraint = MouseConstraint.create(engine, {
         mouse:inspector.mouse
       });
@@ -670,8 +659,8 @@
           _updateSelectedMouseDownOffset(inspector);
         }
       });
-      Events.on(inspector.engine.render, "afterRender", function() {
-        var renderController = engine.render.controller, context = engine.render.context;
+      Events.on(inspector.render, "afterRender", function() {
+        var renderController = inspector.render.controller, context = inspector.render.context;
         if (renderController.inspector) renderController.inspector(inspector, context);
       });
     };

examples/airFriction.js

@@ -23,7 +23,7 @@ if (!_isBrowser) {
             Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 })
         ]);
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.showAngleIndicator = false;
         renderOptions.showVelocity = true;
     };

examples/broadphase.js

@@ -27,7 +27,7 @@
 
         World.add(world, stack);
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.showBroadphase = true;
     };
 

examples/car.js

@@ -21,7 +21,7 @@
             Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
         ]);
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.showAngleIndicator = true;
         renderOptions.showCollisions = true;
     };

examples/catapult.js

@@ -24,7 +24,7 @@
             Constraint.create({ bodyA: catapult, pointB: { x: 410, y: 580 } })
         ]);
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.showCollisions = true;
         renderOptions.showVelocity = true;
         renderOptions.showAngleIndicator = true;

examples/collisionFiltering.js

@@ -88,7 +88,7 @@
         // red category objects should not be draggable with the mouse
         mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory;
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.wireframes = false;
         renderOptions.background = '#222';
         renderOptions.showAngleIndicator = false;

examples/compositeManipulation.js

@@ -42,7 +42,7 @@
             })
         );
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.wireframes = false;
         renderOptions.showAxes = true;
         renderOptions.showCollisions = true;

examples/compound.js

@@ -40,7 +40,7 @@
 
         World.add(world, [compoundBodyA, compoundBodyB, constraint]);
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.showAxes = true;
         renderOptions.showPositions = true;
         renderOptions.showConvexHulls = true;

examples/concave.js

@@ -27,7 +27,7 @@
 
         World.add(world, stack);
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.showAngleIndicator = false;
     };
 

examples/engine.js

@@ -11,7 +11,7 @@
             metrics: { extended: true }
         };
 
-        return Engine.create(demo.container, options);
+        return Engine.create(options);
     };
 
 })();

examples/events.js

@@ -92,7 +92,7 @@
             Events.on(mouseConstraint, 'mousedown', function(event) {
                 var mousePosition = event.mouse.position;
                 console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y);
-                engine.render.options.background = 'cornsilk';
+                demo.render.options.background = 'cornsilk';
                 shakeScene(engine);
             })
 
@@ -103,7 +103,7 @@
             // an example of using mouse events on a mouse
             Events.on(mouseConstraint, 'mouseup', function(event) {
                 var mousePosition = event.mouse.position;
-                engine.render.options.background = "white";
+                demo.render.options.background = "white";
                 console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y);
             })
 
@@ -135,7 +135,7 @@
 
         World.add(world, stack);
 
-        var renderOptions = engine.render.options;
+        var renderOptions = demo.render.options;
         renderOptions.wireframes = false;
 
         var shakeScene = function(engine) {