multiple renderer support

src/game-lib-d3-renderer.js

@@ -2,13 +2,11 @@
  * Renders a scene with a camera
  * @param graphics GameLib.D3.Graphics
  * @param apiRenderer GameLib.D3.API.Renderer
- * @param statistics GameLib.D3.Stats
  * @constructor
  */
 GameLib.D3.Renderer = function (
     graphics,
-    apiRenderer,
-    statistics
+    apiRenderer
 ) {
 
     this.graphics = graphics;
@@ -125,14 +123,6 @@ GameLib.D3.Renderer = function (
         )
     }
 
-	/**
-     * Only runtime Renderer Components have runtime statistics
-	 */
-	if (GameLib.Utils.UndefinedOrNull(statistics)) {
-		statistics = null;
-	}
-	this.statistics = statistics;
-
     GameLib.Component.call(
         this,
         GameLib.Component.COMPONENT_RENDERER,
@@ -323,25 +313,25 @@ GameLib.D3.Renderer.FromObject = function(graphics, objectComponent) {
 /**
  * Convenience render function
  */
-GameLib.D3.Renderer.prototype.render = function(delta) {
-
-    if (this.statistics) {
-        this.statistics.start();
-    }
+GameLib.D3.Renderer.prototype.render = function(delta, scenes) {
 
 	if (!this.instance) {
 		return;
 	}
 
+	if (GameLib.Utils.UndefinedOrNull(scenes)) {
+	    scenes = this.scenes;
+    }
+
 	if (this.viewports.length > 1) {
 		this.instance.autoClear = false;
 	}
 
-	if (this.scenes.length > 1) {
+	if (scenes.length > 1) {
 		this.instance.autoClear = false;
 	}
 
-	this.instance.clear();
+    this.instance.clear();
 
     if (
         this.bufferScene &&
@@ -372,7 +362,7 @@ GameLib.D3.Renderer.prototype.render = function(delta) {
 				viewport.height * this.height
 			);
 
-			this.scenes.map(function(scene) {
+            scenes.map(function(scene) {
 
 				if (!scene.instance) {
 					return;
@@ -392,9 +382,6 @@ GameLib.D3.Renderer.prototype.render = function(delta) {
 		}.bind(this)
 	);
 
-	if (this.statistics) {
-		this.statistics.end();
-	}
 };
 
 GameLib.D3.Renderer.prototype.setSize = function(width, height) {

src/game-lib-d3-stats.js

@@ -61,6 +61,11 @@ GameLib.D3.Stats.prototype.resize = function() {
  */
 GameLib.D3.Stats.prototype.createInstance = function() {
     this.instance = this.stats();
+
+    this.resize();
+
+    this.domElement.instance.parentElement.appendChild(this.instance.dom);
+
     GameLib.Component.prototype.createInstance.call(this);
 };
 

src/game-lib-system-input.js

@@ -161,18 +161,29 @@ GameLib.System.Input.prototype.start = function() {
                     false
                 );
 
-                editorControl.domElement.instance.addEventListener(
-                    'keydown',
-                    this.keyDown,
-                    false
-                );
+                /**
+                 * If we already have keyboard controls, we don't want to add another event listener onto the DOM
+                 */
+                if (this.keyboardControls.length > 0) {
+                    /**
+                     * Do Nothing
+                     */
+                } else {
 
-                editorControl.domElement.instance.addEventListener(
-                    'keyup',
-                    this.keyUp,
-                    false
-                );
+                    editorControl.domElement.instance.addEventListener(
+                        'keydown',
+                        this.keyDown,
+                        false
+                    );
 
+                    editorControl.domElement.instance.addEventListener(
+                        'keyup',
+                        this.keyUp,
+                        false
+                    );
+
+                }
+                
                 editorControl.createInstance();
 
                 editorControl.domElement.instance.addEventListener(

src/game-lib-system-render.js

@@ -28,14 +28,7 @@ GameLib.System.Render.prototype.start = function() {
 
 	this.renderers = GameLib.EntityManager.Instance.queryComponents(GameLib.D3.Renderer);
 
-	this.renderers.map(
-		function(renderer) {
-			if (renderer.statistics) {
-				renderer.statistics.resize();
-				renderer.domElement.instance.parentElement.appendChild(renderer.statistics.instance.dom);
-			}
-		}
-	);
+	this.statistics = GameLib.EntityManager.Instance.queryComponents(GameLib.D3.Stats);
 
 	this.renderSubscription = this.subscribe(
 		GameLib.Event.RENDER,
@@ -49,21 +42,73 @@ GameLib.System.Render.prototype.start = function() {
  */
 GameLib.System.Render.prototype.render = function(data) {
 
+    if (this.statistics) {
+        this.statistics.map(
+            function (statistics) {
+                statistics.start();
+            }
+        );
+    }
+
     GameLib.Event.Emit(
         GameLib.Event.BEFORE_RENDER,
         data
     );
 
-    this.renderers.map(
-		function (renderer) {
-			renderer.render(data.delta);
-		}
-	);
+    if (this.renderers.length < 1) {
+        /**
+         * Do nothing
+         */
+    } else if (this.renderers.length === 1) {
+        /**
+         * Quite simple - we have a renderer - it wants to render its stuff
+         */
+        this.renderers[0].render(data.delta);
+
+    } else {
+
+        /**
+         * If we have multiple renderers, we have a problem - they don't share the same webGL context -
+         * So, we need to get their scenes and render them individually instead of trying to have both renderers render
+         * to the same canvas (sharing the same webgl context does not work)
+         */
+        var scenes = this.renderers.reduce(
+            function(result, renderer) {
+                renderer.scenes.map(
+                    function(scene){
+                        result.push(scene);
+                    }
+                );
+                return result;
+            },
+            []
+        );
+
+        var renderer = GameLib.EntityManager.Instance.defaultRenderer;
+
+        if (GameLib.Utils.UndefinedOrNull(renderer)) {
+            /**
+             * No default renderer, using first one
+             */
+            renderer = this.renderers[0];
+        }
+
+        renderer.render(data.delta, scenes);
+
+    }
 
     GameLib.Event.Emit(
         GameLib.Event.AFTER_RENDER,
         data
     );
+
+    if (this.statistics) {
+        this.statistics.map(
+            function (statistics) {
+                statistics.end();
+            }
+        );
+    }
 };
 
 /**