latest

bak/r3-api-renderer-d3-target.js

@@ -17,7 +17,6 @@ R3.API.Renderer.D3.Target = function(
     R3.API.Renderer.D3.call(
         this,
         this.apiRendererD3,
-        this.apiRendererD3.renderMode,
         this.apiRendererD3.autoClear,
         this.apiRendererD3.autoClearColor,
         this.apiRendererD3.autoClearDepth,
@@ -49,7 +48,8 @@ R3.API.Renderer.D3.Target = function(
         this.apiRendererD3.clearColor,
         this.apiRendererD3.viewports,
         this.apiRendererD3.alpha,
-        this.apiRendererD3.opacity
+        this.apiRendererD3.opacity,
+        this.apiRendererD3.pixelRatio
     );
 
     if (R3.Utils.UndefinedOrNull(target)) {

bak/r3-renderer-d3-target.js

@@ -114,8 +114,15 @@ R3.Renderer.D3.Target = function(
 
 };
 
-R3.Renderer.D3.prototype = Object.create(R3.Renderer.prototype);
-R3.Renderer.D3.prototype.constructor = R3.Renderer.D3;
+R3.Renderer.D3.Target.prototype = Object.create(R3.Renderer.D3.prototype);
+R3.Renderer.D3.Target.prototype.constructor = R3.Renderer.D3.Target;
+
+R3.Renderer.D3.Target.prototype.getSize = function() {
+    return {
+        width   : this.target.width,
+        height  : this.target.height
+    }
+};
 
 /**
  * Create R3.Renderer.D3 Instance

src/r3-a-1-event.js

@@ -141,6 +141,8 @@ R3.Event.GET_DEFAULT_SCENE                  = 0x77;
 R3.Event.GET_DEFAULT_CAMERA                 = 0x78;
 R3.Event.GET_WEBSOCKET_CONFIG				= 0x79;
 R3.Event.GET_PROJECT						= 0x7a;
+R3.Event.GET_APPLICATION_MODE				= 0x80;
+R3.Event.RENDERER_SIZE_CHANGE				= 0x81;
 
 /**
  * Returns string name of event ID
@@ -273,6 +275,8 @@ R3.Event.GetEventName = function(number) {
 		case 0x78 : return 'get_default_camera';
 		case 0x79 : return 'get_websocket_config';
 		case 0x7a : return 'get_project';
+		case 0x80 : return 'get_application_mode';
+		case 0x81 : return 'renderer_size_change';
         break;
 	}
 

src/r3-a-2-utils.js

@@ -1,5 +1,120 @@
 R3.Utils = function() {};
 
+/**
+ * Gets the first parent of the object which is an instance of constructor
+ * @param object
+ * @param constructor
+ * @returns {*}
+ * @constructor
+ */
+R3.Utils.GetFirstParent = function(object, constructor) {
+
+    if (R3.Utils.UndefinedOrNull(constructor)) {
+        throw new Error('You need to specify a constructor');
+    }
+
+    if (object.parent === null) {
+        return null;
+    }
+
+    if (object.parent instanceof constructor) {
+        return object.parent;
+    } else {
+        return R3.Utils.GetFirstParent(object.parent, constructor);
+    }
+
+};
+
+/**
+ * Gets the parent of object whith property of optional type constructor. If index is specified, get the parent of the
+ * object with property[index] - which means the property should be an array
+ * @param object
+ * @param property
+ * @param index
+ * @param constructor
+ * @returns {*}
+ * @constructor
+ */
+R3.Utils.GetParent = function(object, property, index, constructor) {
+
+    if (R3.Utils.UndefinedOrNull(constructor)) {
+        constructor = null;
+    }
+
+    if (R3.Utils.UndefinedOrNull(index)) {
+        index = null;
+    }
+
+    if (object.parent) {
+        /**
+         * Parent defined
+         */
+        if (object.parent.hasOwnProperty(property)) {
+
+            if (constructor) {
+
+                if (index) {
+
+                    if (object.parent[property][index] instanceof constructor) {
+                        return object.parent[property][index];
+                    } else {
+
+                        if (typeof object.parent.getParent === 'function') {
+                            return object.parent.getParent(property, index, constructor);
+                        } else {
+                            console.warn('getParent not defined on API object : ' + object.parent + ' - you should avoid having these messsages');
+                            return null;
+                        }
+                    }
+
+                } else {
+                    if (object.parent[property] instanceof constructor) {
+                        return object.parent[property];
+                    } else {
+
+                        if (typeof object.parent.getParent === 'function') {
+                            return object.parent.getParent(property, index, constructor);
+                        } else {
+                            console.warn('getParent not defined on API object : ' + object.parent + ' - you should avoid having these messsages');
+                            return null;
+                        }
+
+                    }
+                }
+
+            } else {
+
+                if (index) {
+                    return object.parent[property][index];
+                } else {
+                    return object.parent[property];
+                }
+
+            }
+        } else {
+
+            /**
+             * This parent does not have the property - go a level higher
+             */
+            if (typeof object.parent.getParent === 'function') {
+                return object.parent.getParent(property, index, constructor);
+            } else {
+                console.warn('getParent not defined on API object : ' + object.parent + ' - you should avoid having these messsages');
+                return null;
+            }
+        }
+
+    } else {
+        /**
+         * No parent defined
+         */
+        console.warn('property : ' + property + ' of type ' + constructor + ' was not found in the parent chain');
+        return null;
+    }
+
+};
+
+
 /**
  * Strips image extension from given path
  * @param imagePath

src/r3-a-3-api-component.js

@@ -31,82 +31,24 @@ R3.API.Component = function(
 
 R3.API.Component.prototype.constructor = R3.API.Component;
 
-R3.API.Component.prototype.getParent = function(property, index, constructor) {
-
-    if (R3.Utils.UndefinedOrNull(constructor)) {
-        constructor = null;
-    }
-
-    if (R3.Utils.UndefinedOrNull(index)) {
-        index = null;
-    }
-
-    if (this.parent) {
-        /**
-         * Parent defined
-         */
-        if (this.parent.hasOwnProperty(property)) {
-
-            if (constructor) {
-
-                if (index) {
-
-                    if (this.parent[property][index] instanceof constructor) {
-                        return this.parent[property][index];
-                    } else {
-
-                        if (typeof this.parent.getParent === 'function') {
-                            return this.parent.getParent(property, index, constructor);
-                        } else {
-                            console.warn('getParent not defined on API object : ' + this.parent + ' - you should avoid having these messsages');
-                            return null;
-                        }
-                    }
-
-                } else {
-                    if (this.parent[property] instanceof constructor) {
-                        return this.parent[property];
-                    } else {
-
-                        if (typeof this.parent.getParent === 'function') {
-                            return this.parent.getParent(property, index, constructor);
-                        } else {
-                            console.warn('getParent not defined on API object : ' + this.parent + ' - you should avoid having these messsages');
-                            return null;
-                        }
-
-                    }
-                }
-
-            } else {
-
-                if (index) {
-                    return this.parent[property][index];
-                } else {
-                    return this.parent[property];
-                }
-            }
-        } else {
-
-            /**
-             * This parent does not have the property - go a level higher
-             */
-            if (typeof this.parent.getParent === 'function') {
-                return this.parent.getParent(property, index, constructor);
-            } else {
-                console.warn('getParent not defined on API object : ' + this.parent + ' - you should avoid having these messsages');
-                return null;
-            }
-        }
-
-    } else {
-        /**
-         * No parent defined
-         */
-        console.warn('property : ' + property + ' of type ' + constructor + ' was not found in the parent chain');
-        return null;
-    }
+/**
+ * Wrapper for R3.Utils.GetFirstParent
+ * @param constructor
+ * @returns {*}
+ */
+R3.API.Component.prototype.getFirstParent = function(constructor) {
+    return R3.D3.GetFirstParent(this, constructor);
+};
 
+/**
+ * Wrapper for R3.Utils.GetParent
+ * @param property
+ * @param index
+ * @param constructor
+ * @returns {*}
+ */
+R3.API.Component.getParent = function(property, index, constructor) {
+    return R3.D3.GetParent(this, property, index, constructor);
 };
 
 R3.API.Component.prototype.getComponentType = function() {

src/r3-a-4-component.js

@@ -257,7 +257,7 @@ R3.Component.prototype.updateFromInstance = function(property) {
     }
 
     if (
-        this[property] instanceof R3.Vector4 |
+        this[property] instanceof R3.Vector4 ||
         this[property] instanceof R3.Quaternion
     ) {
         this[property].x = this.instance[property].x;
@@ -280,63 +280,26 @@ R3.Component.prototype.updateFromInstance = function(property) {
 };
 
 /**
- * R3.Component.prototype.getParent traverses the parent chain looking for the first parent which has a certain
- * property. If the constructor is given, then not only does the property have to exist - it also has to match the
- * constructor
- * @param property
+ * Wrapper for R3.Utils.GetFirstParent
  * @param constructor
- * @returns {null|*}
+ * @returns {*}
  */
-R3.Component.prototype.getParent = function(property, constructor) {
-
-    if (R3.Utils.UndefinedOrNull(constructor)) {
-        constructor = null;
-    }
-
-    if (this.parent) {
-        if (this.parent.hasOwnProperty(property)) {
-
-            if (constructor) {
-                if (this.parent[property] instanceof constructor) {
-                    return this.parent[property];
-                } else {
-                    return this.parent.getParent(property, constructor);
-                }
-            } else {
-                return this.parent[property];
-            }
-        } else {
-            return this.parent.getParent(property, constructor);
-        }
-    } else {
-        console.warn('property : ' + property + ' of type ' + constructor + ' was not found in the parent chain');
-        return null;
-    }
-
+R3.Component.prototype.getFirstParent = function(constructor) {
+    return R3.D3.GetFirstParent(this, constructor);
 };
 
 /**
- * This function traverses the parent chain to find the first parent which matches the constructor
+ * Wrapper for R3.Utils.GetParent
+ * @param property
+ * @param index
  * @param constructor
+ * @returns {*}
  */
-R3.Component.prototype.getFirstParent = function(constructor) {
-
-    if (R3.Utils.UndefinedOrNull(constructor)) {
-        throw new Error('You need to specify a constructor');
-    }
-
-    if (this.parent === null) {
-        return null;
-    }
-
-    if (this.parent instanceof constructor) {
-        return this.parent;
-    } else {
-        return this.getFirstParent(constructor);
-    }
-
+R3.Component.getParent = function(property, index, constructor) {
+    return R3.D3.GetParent(this, property, index, constructor);
 };
 
+
 R3.Component.prototype.toString = function() {
 	return this.id;
 };
@@ -2107,11 +2070,11 @@ R3.Component.prototype.getPropertyValue = function(item) {
      * Handle colors, vectors and matrices - they are not components so they have their own toApiObject functions
      */
     if (
-        item instanceof R3.Color        |
-        item instanceof R3.Vector2      |
-        item instanceof R3.Vector3      |
-        item instanceof R3.Vector4      |
-        item instanceof R3.Quaternion   |
+        item instanceof R3.Color        ||
+        item instanceof R3.Vector2      ||
+        item instanceof R3.Vector3      ||
+        item instanceof R3.Vector4      ||
+        item instanceof R3.Quaternion   ||
         item instanceof R3.Matrix4
     ) {
         return item.toApiObject();
@@ -2172,13 +2135,23 @@ R3.Component.prototype.toApiObject = function() {
                      * the array to the apiObject
                      */
                     apiObject[property] = this[property].reduce(
-                        function(result, item) {
+                        function(result, item, index) {
 
                             if (item instanceof R3.Runtime) {
                                 throw new Error('Please don\'t store Runtime Objects in Arrays');
                             }
 
-                            result.push(this.getPropertyValue(item));
+                            if (item.isArray) {
+                                result[index] = item.reduce(
+                                    function (subResult, subItem) {
+                                        subResult.push(this.getPropertyValue(subItem));
+                                        return subResult;
+                                    }.bind(this),
+                                    []
+                                )
+                            } else {
+                                result.push(this.getPropertyValue(item));
+                            }
 
                             return result;
 

src/r3-api-project.js

@@ -5,9 +5,10 @@
  * @param isPublic
  * @param entities
  * @param renderers
+ * @param renderTargets
  * @param cameras
  * @param audios
- * @param mode
+ * @param applicationMode
  * @constructor
  */
 R3.API.Project = function(
@@ -16,9 +17,10 @@ R3.API.Project = function(
     isPublic,
     entities,
     renderers,
+    renderTargets,
     cameras,
     audios,
-    mode
+    applicationMode
 ) {
 
     __API_COMPONENT_MACRO__;
@@ -43,6 +45,11 @@ R3.API.Project = function(
     }
     this.renderers = renderers;
 
+    if (R3.Utils.UndefinedOrNull(renderTargets)) {
+        renderTargets = [];
+    }
+    this.renderTargets = renderTargets;
+    
     if (R3.Utils.UndefinedOrNull(cameras)) {
         var editCamera = new R3.D3.API.Camera.Perspective(
             {
@@ -63,10 +70,10 @@ R3.API.Project = function(
     }
     this.audios = audios;
 
-    if (R3.Utils.UndefinedOrNull(mode)) {
-        mode = R3.API.Project.APPLICATION_MODE_EDIT;
+    if (R3.Utils.UndefinedOrNull(applicationMode)) {
+        applicationMode = R3.API.Project.APPLICATION_MODE_EDIT;
     }
-    this.mode = mode;
+    this.applicationMode = applicationMode;
 };
 
 R3.API.Project.prototype = Object.create(R3.API.Component.prototype);
@@ -76,4 +83,8 @@ R3.API.Project.APPLICATION_MODE_RUN        = 0x1;
 R3.API.Project.APPLICATION_MODE_EDIT       = 0x2;
 
 R3.API.Project.CAMERA_INDEX_EDIT    = 0x0;
-R3.API.Project.CAMERA_INDEX_RUN     = 0x1;
+R3.API.Project.CAMERA_INDEX_RUN     = 0x1;
+
+R3.API.Project.RENDERER_INDEX_MAIN  = 0x0;
+
+R3.API.Project.RENDER_TARGET_INDEX_NONE = -0x1;

src/r3-api-renderer-d3-canvas-target.js

@@ -26,4 +26,15 @@ R3.API.Renderer.D3.Canvas.Target = function(
 };
 
 R3.API.Renderer.D3.Canvas.Target.prototype = Object.create(R3.API.Renderer.D3.Canvas.prototype);
-R3.API.Renderer.D3.prototype.constructor = R3.API.Renderer.D3.Canvas.Target;
+R3.API.Renderer.D3.Canvas.Target.prototype.constructor = R3.API.Renderer.D3.Canvas.Target;
+
+/**
+ * Return the size of the target instead of the canvas
+ * @returns {{width: *, height: *}}
+ */
+R3.API.Renderer.D3.Canvas.Target.prototype.getSize = function() {
+    return {
+        width   : this.target.width,
+        height  : this.target.height
+    }
+};

src/r3-api-renderer-d3-canvas.js

@@ -17,7 +17,6 @@ R3.API.Renderer.D3.Canvas = function(
     R3.API.Renderer.D3.call(
         this,
         this.apiRendererD3,
-        this.apiRendererD3.renderMode,
         this.apiRendererD3.autoClear,
         this.apiRendererD3.autoClearColor,
         this.apiRendererD3.autoClearDepth,
@@ -49,7 +48,8 @@ R3.API.Renderer.D3.Canvas = function(
         this.apiRendererD3.clearColor,
         this.apiRendererD3.viewports,
         this.apiRendererD3.alpha,
-        this.apiRendererD3.opacity
+        this.apiRendererD3.opacity,
+        this.apiRendererD3.pixelRatio
     );
 
     if (R3.Utils.UndefinedOrNull(canvas)) {
@@ -60,4 +60,13 @@ R3.API.Renderer.D3.Canvas = function(
 };
 
 R3.API.Renderer.D3.Canvas.prototype = Object.create(R3.API.Renderer.D3.prototype);
-R3.API.Renderer.D3.Canvas.prototype.constructor = R3.API.Renderer.D3.Canvas;
+R3.API.Renderer.D3.Canvas.prototype.constructor = R3.API.Renderer.D3.Canvas;
+
+R3.API.Renderer.D3.Canvas.prototype.getSize = function() {
+
+    return {
+        width  : this.canvas.width,
+        height : this.canvas.height
+    }
+
+};

src/r3-api-renderer-d3.js

@@ -1,7 +1,6 @@
 /**
  * R3.API.Renderer.D3
  * @param apiRenderer
- * @param renderMode
  * @param autoClear
  * @param autoClearColor
  * @param autoClearDepth
@@ -34,11 +33,11 @@
  * @param viewports
  * @param alpha
  * @param opacity
+ * @param pixelRatio
  * @constructor
  */
 R3.API.Renderer.D3 = function(
     apiRenderer,
-    renderMode,
     autoClear,
     autoClearColor,
     autoClearDepth,
@@ -70,7 +69,8 @@ R3.API.Renderer.D3 = function(
     clearColor,
     viewports,
     alpha,
-    opacity
+    opacity,
+    pixelRatio
 ) {
 
     if (R3.Utils.UndefinedOrNull(apiRenderer)) {
@@ -83,11 +83,6 @@ R3.API.Renderer.D3 = function(
         this.apiRenderer
     );
 
-    if (R3.Utils.UndefinedOrNull(renderMode)) {
-        renderMode = R3.API.Renderer.MODE_CANVAS;
-    }
-    this.renderMode = renderMode;
-
     if (R3.Utils.UndefinedOrNull(autoClear)) {
         autoClear = true;
     }
@@ -248,7 +243,12 @@ R3.API.Renderer.D3 = function(
     }
     this.opacity = opacity;
 
+    if (R3.Utils.UndefinedOrNull(pixelRatio)) {
+        pixelRatio = window.devicePixelRatio;
+    }
+    this.pixelRatio = pixelRatio;
+
 };
 
 R3.API.Renderer.D3.prototype = Object.create(R3.API.Renderer.prototype);
-R3.API.Renderer.D3.prototype.constructor = R3.API.Renderer.D3;
+R3.API.Renderer.D3.prototype.constructor = R3.API.Renderer.D3;

src/r3-color.js

@@ -9,6 +9,9 @@ R3.Color = function(
     apiComponent
 ) {
 
+    /**
+     * Color does not extend component so initialize the parent
+     */
     if (R3.Utils.UndefinedOrNull(parent)) {
         parent = null;
     }

src/r3-d3-api-camera-a.js

@@ -35,7 +35,7 @@ R3.D3.API.Camera = function(
     );
 
     if (R3.Utils.UndefinedOrNull(aspect)) {
-        aspect = 1;
+        aspect = R3.D3.API.Camera.ASPECT_RATIO_1_1;
     }
     this.aspect = aspect;
 
@@ -44,8 +44,8 @@ R3.D3.API.Camera = function(
 R3.D3.API.Camera.prototype = Object.create(R3.D3.API.Object.prototype);
 R3.D3.API.Camera.prototype.constructor = R3.D3.API.Camera;
 
-R3.D3.API.Camera.ASPECT_RATIO_1_1           = 0x1;
-R3.D3.API.Camera.ASPECT_RATIO_3_2           = 0x2;
-R3.D3.API.Camera.ASPECT_RATIO_4_3           = 0x3;
-R3.D3.API.Camera.ASPECT_RATIO_16_9          = 0x4;
-R3.D3.API.Camera.ASPECT_RATIO_16_10         = 0x5;
+R3.D3.API.Camera.ASPECT_RATIO_1_1           = 1;
+R3.D3.API.Camera.ASPECT_RATIO_3_2           = 3/2;
+R3.D3.API.Camera.ASPECT_RATIO_4_3           = 4/3;
+R3.D3.API.Camera.ASPECT_RATIO_16_9          = 16/9;
+R3.D3.API.Camera.ASPECT_RATIO_16_10         = 16/10;

src/r3-d3-api-camera-orthographic-fixed-aspect.js

@@ -1,16 +1,14 @@
 /**
  * R3.D3.API.Camera.Orthographic.FixedAspect
  *
- * This camera calculates left, right, top and bottom coordinates from the provided aspect ratio. It uses the inherited
- * default values for near and far values for the Z space
+ *  - This camera calculates left, right, top and bottom coordinates from the provided aspect ratio. It uses the
+ *    inherited default values for near and far values for the Z space
  *
  * @param apiD3CameraOrthographic
- * @param aspectRatio
  * @constructor
  */
 R3.D3.API.Camera.Orthographic.FixedAspect = function(
-    apiD3CameraOrthographic,
-    aspectRatio
+    apiD3CameraOrthographic
 ) {
 
     if (R3.Utils.UndefinedOrNull(apiD3CameraOrthographic)) {
@@ -26,11 +24,6 @@ R3.D3.API.Camera.Orthographic.FixedAspect = function(
         this.apiD3CameraOrthographic.zoom
     );
 
-    if (R3.Utils.UndefinedOrNull(aspectRatio)) {
-        aspectRatio = R3.D3.API.Camera.ASPECT_RATIO_1_1;
-    }
-    this.aspectRatio = aspectRatio;
-
 };
 
 R3.D3.API.Camera.Orthographic.FixedAspect.prototype = Object.create(R3.D3.API.Camera.Orthographic.prototype);

src/r3-d3-api-camera-orthographic-scaled-aspect.js

@@ -1,5 +1,5 @@
 /**
- * R3.D3.API.Camera.Orthographic.ZoomedAspect
+ * R3.D3.API.Camera.Orthographic.ScaledAspect
  *
  * This camera does not automatically adjust its left, right, top and bottom values - it assumes they have been defined
  * and are correct. It uses the inherited default near and far values for the Z space. It essentially ignores aspect
@@ -12,7 +12,7 @@
  * @param bottom
  * @constructor
  */
-R3.D3.API.Camera.Orthographic.ZoomedAspect = function(
+R3.D3.API.Camera.Orthographic.ScaledAspect = function(
     apiD3CameraOrthographic,
     left,
     right,
@@ -55,5 +55,5 @@ R3.D3.API.Camera.Orthographic.ZoomedAspect = function(
 
 };
 
-R3.D3.API.Camera.Orthographic.ZoomedAspect.prototype = Object.create(R3.D3.API.Camera.Orthographic.prototype);
-R3.D3.API.Camera.Orthographic.ZoomedAspect.prototype.constructor = R3.D3.API.Camera.Orthographic.ZoomedAspect;
+R3.D3.API.Camera.Orthographic.ScaledAspect.prototype = Object.create(R3.D3.API.Camera.Orthographic.prototype);
+R3.D3.API.Camera.Orthographic.ScaledAspect.prototype.constructor = R3.D3.API.Camera.Orthographic.ScaledAspect;

src/r3-d3-api-camera-orthographic.js

@@ -2,7 +2,7 @@
  * R3.D3.API.Camera.Orthographic
  *
  * Base class for Orthographic Cameras - do define an aspect ratio for the camera, use FixedAspect child class, to
- * manually set the camera size, use the ZoomedAspect child class
+ * manually set the camera size, use the ScaledAspect child class
  *
  * @constructor
  * @param apiD3Camera

src/r3-d3-api-composer-render-target.js

@@ -0,0 +1,53 @@
+/**
+ * R3.D3.API.Composer.RenderTarget
+ * @param apiComposer
+ * @param renderTarget
+ * @constructor
+ */
+R3.D3.API.Composer.RenderTarget = function(
+    apiComposer,
+    renderTarget
+) {
+
+    if (R3.Utils.UndefinedOrNull(apiComposer)) {
+        apiComposer = {};
+    }
+    this.apiComposer = apiComposer;
+
+    R3.D3.API.Composer.call(
+        this,
+        this.apiComposer,
+        this.apiComposer.width,
+        this.apiComposer.height,
+        this.apiComposer.passes
+    );
+
+    if (R3.Utils.UndefinedOrNull(renderTarget)) {
+
+        /**
+         * We look at the project to see if any renderTargets exist - we use the most recent created one or
+         * construct a new one if none exist
+         * @type {number|*}
+         */
+        R3.Event.Emit(
+            R3.Event.GET_PROJECT,
+            null,
+            function(project) {
+
+                if (project.renderTargets.length > 0) {
+                    renderTarget = project.renderTargets[project.renderTargets.length - 1];
+                } else {
+                    renderTarget = new R3.D3.API.RenderTarget();
+                    project.renderTargets.push(renderTarget);
+                }
+
+            }.bind(this)
+        );
+
+    }
+    this.renderTarget = renderTarget
+
+};
+
+R3.D3.API.Composer.RenderTarget.prototype = Object.create(R3.D3.API.Composer.prototype);
+R3.D3.API.Composer.RenderTarget.prototype.constructor = R3.D3.API.Composer.RenderTarget;

src/r3-d3-api-composer-renderer.js

@@ -0,0 +1,33 @@
+/**
+ * R3.D3.API.Composer.Renderer
+ * @param apiComposer
+ * @param renderer
+ * @constructor
+ */
+R3.D3.API.Composer.Renderer = function(
+    apiComposer,
+    renderer
+) {
+
+    if (R3.Utils.UndefinedOrNull(apiComposer)) {
+        apiComposer = {};
+    }
+    this.apiComposer = apiComposer;
+
+    R3.D3.API.Composer.call(
+        this,
+        this.apiComposer,
+        this.apiComposer.width,
+        this.apiComposer.height,
+        this.apiComposer.passes
+    );
+
+    if (R3.Utils.UndefinedOrNull(renderer)) {
+        renderer = this.getFirstParent(R3.API.Renderer.D3);
+    }
+    this.renderer = renderer;
+
+};
+
+R3.D3.API.Composer.Renderer.prototype = Object.create(R3.D3.API.Composer.prototype);
+R3.D3.API.Composer.Renderer.prototype.constructor = R3.D3.API.Composer.Renderer;

src/r3-d3-api-composer.js

@@ -1,7 +1,6 @@
 /**
  * R3.D3.API.Composer
  * @param apiComponent
- * @param autoUpdateSize
  * @param width
  * @param height
  * @param passes
@@ -9,7 +8,6 @@
  */
 R3.D3.API.Composer = function(
     apiComponent,
-    autoUpdateSize,
     width,
     height,
     passes
@@ -17,18 +15,13 @@ R3.D3.API.Composer = function(
 
     __API_COMPONENT_MACRO__;
 
-    if (R3.Utils.UndefinedOrNull(autoUpdateSize)) {
-        autoUpdateSize = true;
-    }
-    this.autoUpdateSize = autoUpdateSize;
-
     if (R3.Utils.UndefinedOrNull(width)) {
-        width = 512;
+        width = 0;
     }
     this.width = width;
 
     if (R3.Utils.UndefinedOrNull(height)) {
-        height = 512;
+        height = 0;
     }
     this.height = height;
 

src/r3-d3-api-effect-a.js

@@ -1,30 +1,37 @@
 /**
  * R3.D3.API.Effect
  * @param apiComponent
+ * @param renderer
  * @param width
  * @param height
- *
- * @property effectType
- *
  * @constructor
  */
 R3.D3.API.Effect = function(
     apiComponent,
+    renderer,
     width,
     height
 ) {
 
     __API_COMPONENT_MACRO__;
 
+    if (R3.Utils.UndefinedOrNull(renderer)) {
+        renderer = this.getFirstParent(R3.API.Renderer.D3);
+    }
+    this.renderer = renderer;
+
+    var size = renderer.getSize();
+
     if (R3.Utils.UndefinedOrNull(width)) {
-        width = 512;
+        width = size.width;
     }
     this.width = width;
 
     if (R3.Utils.UndefinedOrNull(height)) {
-        height = 512;
+        height = size.height;
     }
     this.height = height;
+
 };
 
 R3.D3.API.Effect.prototype = Object.create(R3.API.Component.prototype);

src/r3-d3-api-effect-anaglyph.js

@@ -15,6 +15,7 @@ R3.D3.API.Effect.Anaglyph = function(
     R3.D3.API.Effect.call(
         this,
         this.apiEffect,
+        this.apiEffect.renderer,
         this.apiEffect.width,
         this.apiEffect.height
     );

src/r3-d3-api-effect-parallax.js

@@ -15,6 +15,7 @@ R3.D3.API.Effect.Parallax = function(
     R3.D3.API.Effect.call(
         this,
         this.apiEffect,
+        this.apiEffect.renderer,
         this.apiEffect.width,
         this.apiEffect.height
     );

src/r3-d3-api-effect-stereo.js

@@ -17,6 +17,7 @@ R3.D3.API.Effect.Stereo = function(
     R3.D3.API.Effect.call(
         this,
         this.apiEffect,
+        this.apiEffect.renderer,
         this.apiEffect.width,
         this.apiEffect.height
     );

src/r3-d3-api-face-graphics.js

@@ -0,0 +1,110 @@
+/**
+ * R3.D3.API.Face
+ * @param apiFace
+ * @param materialIndex
+ * @param uvs [[v0uv (R3.Vector2), v1uv(R3.Vector2), v2uv(R3.Vector2)]]
+ * @param color
+ * @param vertexColors
+ * @constructor
+ */
+R3.D3.API.Face.Graphics = function(
+	apiFace,
+	materialIndex,
+	uvs,
+	color,
+	vertexColors
+) {
+
+    R3.D3.API.Face.call(
+    	this,
+        apiFace,
+        apiFace.v0index,
+        apiFace.v1index,
+        apiFace.v2index,
+        apiFace.vertexNormals,
+        apiFace.normal,
+        apiFace.selected
+    );
+
+	if (R3.Utils.UndefinedOrNull(v0index)) {
+		v0index = -1;
+	}
+	this.v0index = v0index;
+
+	if (R3.Utils.UndefinedOrNull(v1index)) {
+		v1index = -1;
+	}
+	this.v1index = v1index;
+
+	if (R3.Utils.UndefinedOrNull(v2index)) {
+		v2index = -1;
+	}
+	this.v2index = v2index;
+
+	if (R3.Utils.UndefinedOrNull(materialIndex)) {
+		materialIndex = -1;
+	}
+	this.materialIndex = materialIndex;
+
+	if (R3.Utils.UndefinedOrNull(uvs)) {
+		uvs = [[]];
+	}
+	this.uvs = uvs;
+
+	if (R3.Utils.UndefinedOrNull(color)) {
+		color = new R3.API.Color();
+	}
+	this.color = color;
+
+	if (R3.Utils.UndefinedOrNull(vertexColors)) {
+		vertexColors = [
+		    new R3.API.Color(),
+		    new R3.API.Color(),
+		    new R3.API.Color()
+        ];
+	}
+	this.vertexColors = vertexColors;
+
+	if (R3.Utils.UndefinedOrNull(vertexNormals)) {
+		vertexNormals = [];
+	}
+	this.vertexNormals = vertexNormals;
+
+	if (R3.Utils.UndefinedOrNull(normal)) {
+		normal = null;
+	}
+	this.normal = normal;
+
+    if (R3.Utils.UndefinedOrNull(selected)) {
+        selected = false;
+    }
+    this.selected = selected;
+
+};
+
+/**
+ * We don't inherit from component - it makes the entitymanager too heavy - all faces end up in the register etc..
+ */
+
+R3.D3.API.Face.Graphics.prototype = Object.create(R3.API.Component.prototype);
+R3.D3.API.Face.Graphics.prototype.constructor = R3.D3.API.Face.Graphics;
+
+/**
+ * Clone a Face
+ * @returns {R3.D3.API.Face}
+ */
+R3.D3.API.Face.Graphics.prototype.clone = function(){
+	return new R3.D3.API.Face(
+		null,
+		this.v0index,
+		this.v1index,
+		this.v2index,
+		this.materialIndex,
+		this.uvs,
+		this.color,
+		this.vertexColors,
+		this.vertexNormals,
+		this.normal,
+		this.selected
+	);
+};

src/r3-d3-api-face.js

@@ -4,10 +4,6 @@
  * @param v0index
  * @param v1index
  * @param v2index
- * @param materialIndex
- * @param uvs [[v0uv (R3.Vector2), v1uv(R3.Vector2), v2uv(R3.Vector2)]]
- * @param color
- * @param vertexColors
  * @param vertexNormals
  * @param normal
  * @param selected
@@ -18,10 +14,6 @@ R3.D3.API.Face = function(
 	v0index,
 	v1index,
 	v2index,
-	materialIndex,
-	uvs,
-	color,
-	vertexColors,
 	vertexNormals,
 	normal,
     selected
@@ -44,30 +36,6 @@ R3.D3.API.Face = function(
 	}
 	this.v2index = v2index;
 
-	if (R3.Utils.UndefinedOrNull(materialIndex)) {
-		materialIndex = -1;
-	}
-	this.materialIndex = materialIndex;
-
-	if (R3.Utils.UndefinedOrNull(uvs)) {
-		uvs = [[]];
-	}
-	this.uvs = uvs;
-
-	if (R3.Utils.UndefinedOrNull(color)) {
-		color = new R3.API.Color();
-	}
-	this.color = color;
-
-	if (R3.Utils.UndefinedOrNull(vertexColors)) {
-		vertexColors = [
-		    new R3.API.Color(),
-		    new R3.API.Color(),
-		    new R3.API.Color()
-        ];
-	}
-	this.vertexColors = vertexColors;
-
 	if (R3.Utils.UndefinedOrNull(vertexNormals)) {
 		vertexNormals = [];
 	}
@@ -99,16 +67,12 @@ R3.D3.API.Face.prototype.constructor = R3.D3.API.Face;
 R3.D3.API.Face.prototype.clone = function(){
 	return new R3.D3.API.Face(
 		null,
-		this.v0index,
-		this.v1index,
-		this.v2index,
-		this.materialIndex,
-		this.uvs,
-		this.color,
-		this.vertexColors,
-		this.vertexNormals,
-		this.normal,
-		this.selected
+        this.v0index,
+        this.v1index,
+        this.v2index,
+        this.vertexNormals,
+        this.normal,
+        this.selected
 	);
 };
 

src/r3-d3-api-scene.js

@@ -13,6 +13,7 @@
  * @param gridColor
  * @param cameraIndexEdit
  * @param cameraIndexRun
+ * @param cubeCameras
  * @param effect
  * @param composer
  * @param enableEffect
@@ -34,6 +35,7 @@ R3.D3.API.Scene = function(
     gridColor,
     cameraIndexEdit,
     cameraIndexRun,
+    cubeCameras,
     effect,
     composer,
     enableEffect,
@@ -103,6 +105,11 @@ R3.D3.API.Scene = function(
     }
     this.cameraIndexRun = cameraIndexRun;
 
+    if (R3.Utils.UndefinedOrNull(cubeCameras)) {
+        cubeCameras = [];
+    }
+    this.cubeCameras = cubeCameras;
+
     if (R3.Utils.UndefinedOrNull(composer)) {
         composer = new R3.API.Composer();
     }

src/r3-d3-api-viewport.js

@@ -1,4 +1,4 @@
-/**
+,/**
  * R3.D3.API.Viewport
  *
  * Ignore aspect ratio and make viewport respect x,y,width and height as is

src/r3-d3-camera-cube.js

@@ -111,8 +111,5 @@ R3.D3.Camera.Cube.prototype.updateInstance = function(property) {
  * @param scene
  */
 R3.D3.Camera.Cube.prototype.update = function(renderer, scene) {
-    this.instance.update(
-        renderer.instance,
-        scene.instance
-    )
+
 };

src/r3-d3-camera-orthographic-fixed-aspect.js

@@ -1,289 +1,193 @@
 /**
- * R3.D3.Camera.Orthographic
- * @param graphics R3.Runtime.Graphics
- * @param apiD3OBjectOrthographicCamera
+ * R3.D3.Camera.Orthographic.FixedAspect
+ * @param parent
+ * @param apiComponent
  * @constructor
  */
 R3.D3.Camera.Orthographic.FixedAspect = function(
-	graphics,
-	apiD3OBjectOrthographicCamera
+	parent,
+	apiComponent
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
+    __RUNTIME_COMPONENT_MACRO__;
 
-    if (R3.Utils.UndefinedOrNull(apiD3OBjectOrthographicCamera)) {
-        apiD3OBjectOrthographicCamera = {
-            objectType : R3.D3.API.Object.OBJECT_TYPE_CAMERA_ORTHOGRAPHIC,
-            position : R3.API.Vector3(0,0,10),
-            lookAt: R3.API.Vector3(0,0,-10)
-        };
-    }
-
-    R3.D3.API.Camera.Orthographic.call(
+    R3.D3.API.Camera.Orthographic.FixedAspect.call(
         this,
-        apiD3OBjectOrthographicCamera,
-        apiD3OBjectOrthographicCamera.aspectRatioMode,
-        apiD3OBjectOrthographicCamera.minWidth,
-        apiD3OBjectOrthographicCamera.minHeight,
-        apiD3OBjectOrthographicCamera.width,
-        apiD3OBjectOrthographicCamera.height,
-        apiD3OBjectOrthographicCamera.near,
-        apiD3OBjectOrthographicCamera.far,
-        apiD3OBjectOrthographicCamera.left,
-        apiD3OBjectOrthographicCamera.right,
-        apiD3OBjectOrthographicCamera.top,
-        apiD3OBjectOrthographicCamera.bottom,
-        apiD3OBjectOrthographicCamera.zoom
+        apiComponent
     );
 
-    R3.D3.Camera.call(
+    var linkedObjects = {};
+
+    R3.D3.Camera.Orthographic.call(
         this,
-        this.graphics,
-        this
+        parent,
+        linkedObjects
     );
     
 };
 
-R3.D3.Camera.Orthographic.prototype = Object.create(R3.D3.Camera.prototype);
-R3.D3.Camera.Orthographic.prototype.constructor = R3.D3.Camera.Orthographic;
+R3.D3.Camera.Orthographic.FixedAspect.prototype = Object.create(R3.D3.Camera.Orthographic.prototype);
+R3.D3.Camera.Orthographic.FixedAspect.prototype.constructor = R3.D3.Camera.Orthographic.FixedAspect;
 
 /**
  * Creates a camera instance
  * @returns {*}
  */
-R3.D3.Camera.Orthographic.prototype.createInstance = function() {
+R3.D3.Camera.Orthographic.FixedAspect.prototype.createInstance = function() {
 
-    this.instance = new THREE.OrthographicCamera(
-        this.left,
-        this.right,
-        this.top,
-        this.bottom,
+    /**
+     * We need to get the viewport width and height
+     * @type {void|*}
+     */
+
+    var dimensions = this.getDimensions();
+
+    this.instance = this.graphics.OrthographicCamera(
+        dimensions.left,
+        dimensions.right,
+        dimensions.top,
+        dimensions.bottom,
         this.near,
         this.far
     );
 
-    if (
-        this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED ||
-        this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-    ) {
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-
-            var size = R3.Utils.GetWindowSize();
-
-            this.aspect = size.width / size.height;
-        }
-
-        this.updateFromAspectRatio();
-    }
-
-    R3.D3.Camera.prototype.createInstance.call(this);
+    R3.Component.prototype.createInstance.call(this);
 };
 
 /**
  * Updates the instance with the current state
  */
-R3.D3.Camera.Orthographic.prototype.updateInstance = function(property) {
+R3.D3.Camera.Orthographic.FixedAspect.prototype.updateInstance = function(property) {
 
-    var size;
+    if (property === 'aspect') {
 
-    if (property === 'aspectRatioMode') {
+        var dimensions = this.getDimensions();
 
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_NONE) {
-            this.updateFromDimensions();
-            return;
-        }
+        this.instance.left      = dimensions.left;
+        this.instance.right     = dimensions.right;
+        this.instance.top       = dimensions.top;
+        this.instance.bottom    = dimensions.bottom;
 
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED) {
-            this.updateFromAspectRatio();
-            return;
-        }
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-
-            size = R3.Utils.GetWindowSize();
-
-            this.aspect = size.width / size.height;
-
-            this.updateFromAspectRatio();
-            return;
-        }
-    }
-
-    if (
-        property === 'width' ||
-        property === 'height' ||
-        property === 'minWidth' ||
-        property === 'minHeight' ||
-        property === 'aspect'
-    ) {
-
-        if (
-            this.aspectRatioMode !== R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED &&
-            this.aspectRatioMode !== R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-        ) {
-            console.warn('changing the this value when this camera is not in the right aspect ratio mode has no effect');
-            return;
-        }
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-            size = R3.Utils.GetWindowSize();
-            this.aspect = size.width / size.height;
-        }
-
-        this.updateFromAspectRatio();
-
-        return;
-    }
-
-    if (
-        property === 'left' ||
-        property === 'right' ||
-        property === 'top' ||
-        property === 'bottom'
-    ) {
-
-        if (
-            this.aspectRatioMode === R3.D3.API.Camera.ASPECT_RATIO_MODE_FIXED ||
-            this.aspectRatioMode === R3.D3.API.Camera.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-        ) {
-            console.warn('changing this value within a fixed aspect ratio has no effect');
-            return;
-        }
-
-        this.updateFromDimensions();
-
-        return;
-    }
-
-    if (property === 'zoom') {
-        this.instance.zoom = this.zoom;
         this.instance.updateProjectionMatrix();
+
+        return;
     }
 
-    R3.D3.Camera.prototype.updateInstance.call(this, property);
+    R3.D3.Camera.Orthographic.prototype.updateInstance.call(this, property);
 };
 
 /**
- * Converts a R3.D3.Camera to a R3.D3.API.Camera
- * @returns {R3.D3.API.Camera}
+ * This calculates the dimensions of the camera based on the following example info:
+ *
+ * aspect =  width
+ *           ------
+ *           height
+ *
+ * width    = aspect * height;
+ * height   = width / aspect;
+ *
+ * aspect > 1 (width > height) (landscape)
+ * aspect < 1 (height > width) (portrait)
+ *
+ * 4 / 3   = 1.33333 (1920 x 1440)
+ * 16 / 9  = 1.77777 (1920 x 1080)
+ *
+ * w   h                w      h
+ * 9 / 16  = 0.5625    (1080 x 1920) - required
+ * 3 / 4   = 0.75      (1440 x 1920) - current
+ *
+ * @returns {{left: number, right: number, top: number, bottom: number}}
  */
-R3.D3.Camera.Orthographic.prototype.toApiObject = function() {
+R3.D3.Camera.Orthographic.FixedAspect.prototype.getDimensions = function() {
 
-    var apiCamera = R3.D3.Camera.prototype.toApiObject.call(this);
 
-    var apiOrthographicCamera = new R3.D3.API.Camera.Orthographic(
-        apiCamera,
-        this.aspectRatioMode,
-        this.minWidth,
-        this.minHeight,
-        this.width,
-        this.height,
-        this.near,
-        this.far,
-        this.left,
-        this.right,
-        this.top,
-        this.bottom,
-        this.zoom
-    );
+    var size = R3.Utils.GetWindowSize();
 
-    return apiOrthographicCamera;
-};
+    var currentAspect = size.width / size.height;
 
-R3.D3.Camera.Orthographic.prototype.updateFromInstance = function() {
-    this.width  = this.instance.right - this.instance.left;
-    this.height = this.instance.top - this.instance.bottom;
-    this.near   = this.instance.near;
-    this.far    = this.instance.far;
-    this.left   = this.instance.left;
-    this.right  = this.instance.right;
-    this.top    = this.instance.top;
-    this.bottom = this.instance.bottom;
-    this.zoom   = this.instance.zoom;
-    R3.D3.Camera.prototype.updateFromInstance.call(this);
-};
+    var width, height;
 
-R3.D3.Camera.Orthographic.prototype.updateFromAspectRatio = function() {
-
-    var requiredAspect = this.minWidth / this.minHeight;
-
-    if (this.aspect < requiredAspect) {
+    if (currentAspect > 1) {
         /**
-         * Make height dependend on width
+         * Width is greater than height (landscape)
          */
-        this.width      = this.minWidth;
-        this.height     = this.minWidth / this.aspect;
+        if (this.aspect < 1) {
 
-        // if (this.height < this.minHeight) {
-        //     /**
-        //      * We have a problem - our new height is less than our minimum height
-        //      */
-        //
-        //
-        //     ;
-        //
-        //     if (requiredAspect < this.aspect) {
-        //         this.width  = requiredAspect * this.height;
-        //     } else {
-        //         this.height = this.minHeight;
-        //         this.width  = this.aspect * this.height;
-        //     }
-        //
-        //
-        // } else {
-        //
-        //     /**
-        //      * Try to fit our game into the window
-        //      * @type {number}
-        //      */
-        //  //   var requiredAspect = this.minWidth / this.minHeight;
-        //  //   this.width = requiredAspect * this.height;
-        // }
+            /**
+             * The required aspect is more high than wide - use the full height
+             */
+            width   = this.aspect * size.height;
+            height  = size.height;
+
+        } else {
+            /**
+             * The required aspect is also more wide than high - so we have another two possibilities:
+             * a) The required aspect is greater than the current aspect - this means the required aspect is less high
+             *    than the current aspect - we can use the full width
+             *
+             * b) The required aspect is less than the current aspect - this means the required aspect is higher than
+             *    the current aspect - we need to determine a new width based on the current height
+             */
+            if (this.aspect > currentAspect) {
+                /**
+                 * a)
+                 */
+                width   = size.width;
+                height  = width / this.aspect;
+            } else {
+                /**
+                 * b)
+                 */
+                height  = size.height;
+                width   = this.aspect * height;
+            }
+
+        }
 
     } else {
         /**
-         * Make width dependend on height
+         * The height is greater than the width (portrait)
          */
-        this.height = this.minHeight;
-        this.width  = this.aspect * this.minHeight;
-        //
-        // if (this.width < this.minWidth) {
-        //     /**
-        //      * We have a problem - our new width is less than our minimum width
-        //      */
-        //     this.width  = this.minWidth;
-        //     this.height = this.width / this.aspect;
-        // }
+        if (this.aspect > 1) {
+
+            /**
+             * The required aspect is landscape in a portrait mode - use the full width and calculate the new height
+             */
+            width   = size.width;
+            height  = width / this.aspect;
+
+        } else {
+
+            /**
+             * The required aspect is also more high than wide (portrait) - we have again, two possibilities
+             * a) The required aspect is greater than the current aspect - this means the required aspect does not fit
+             *    the full width of the current aspect - use the full width of the current size and determine a new height
+             *
+             * b) The required aspect is less than the current aspect - this means that the required aspect is less wide
+             *    than the current aspect, so we can use the full height of the current size and determine a new width
+             */
+
+            if (this.aspect > currentAspect) {
+                width   = size.width;
+                height  = width / this.aspect;
+            } else {
+                height = size.height;
+                width   = this.aspect * height;
+            }
+
+        }
+
     }
 
-    this.left   = this.width / -2;
-    this.right  = this.width / 2;
+    /**
+     * We now have the correct width and height of of the camera
+     */
 
-    this.top    = this.height / 2;
-    this.bottom = this.height / -2;
-
-    this.instance.left      = this.left;
-    this.instance.right     = this.right;
-    this.instance.top       = this.top;
-    this.instance.bottom    = this.bottom;
-
-    this.instance.updateProjectionMatrix();
+    return {
+        left    : width  / -2,
+        right   : width  /  2,
+        top     : height /  2,
+        bottom  : height / -2
+    }
 
 };
-
-R3.D3.Camera.Orthographic.prototype.updateFromDimensions = function() {
-
-    this.instance.left      = this.left;
-    this.instance.right     = this.right;
-    this.instance.top       = this.top;
-    this.instance.bottom    = this.bottom;
-
-    this.width   = this.right - this.left;
-    this.height  = this.top - this.bottom;
-
-    this.aspect = this.width / this.height;
-
-    this.instance.updateProjectionMatrix();
-};

src/r3-d3-camera-orthographic-scaled-aspect.js

@@ -0,0 +1,88 @@
+/**
+ * R3.D3.Camera.Orthographic.ScaledAspect
+ * @param parent
+ * @param apiComponent
+ * @constructor
+ */
+R3.D3.Camera.Orthographic.ScaledAspect = function(
+	parent,
+	apiComponent
+) {
+
+    __RUNTIME_COMPONENT_MACRO__;
+
+    R3.D3.API.Camera.Orthographic.ScaledAspect.call(
+        this,
+        apiComponent,
+        apiComponent.left,
+        apiComponent.right,
+        apiComponent.top,
+        apiComponent.bottom
+    );
+
+    var linkedObjects = {};
+
+    R3.D3.Camera.Orthographic.call(
+        this,
+        parent,
+        linkedObjects
+    );
+    
+};
+
+R3.D3.Camera.Orthographic.ScaledAspect.prototype = Object.create(R3.D3.Camera.Orthographic.prototype);
+R3.D3.Camera.Orthographic.ScaledAspect.prototype.constructor = R3.D3.Camera.Orthographic.ScaledAspect;
+
+/**
+ * Creates a camera instance
+ * @returns {*}
+ */
+R3.D3.Camera.Orthographic.ScaledAspect.prototype.createInstance = function() {
+
+    this.instance = new this.graphics.OrthographicCamera(
+        this.left,
+        this.right,
+        this.top,
+        this.bottom,
+        this.near,
+        this.far
+    );
+    R3.Component.prototype.createInstance.call(this);
+};
+
+/**
+ * Updates the instance with the current state
+ */
+R3.D3.Camera.Orthographic.ScaledAspect.prototype.updateInstance = function(property) {
+
+    if (property === 'left') {
+        this.instance.left = this.left;
+        this.instance.updateProjectionMatrix();
+        this.aspect = (this.right - this.left) / (this.top - this.bottom);
+        return;
+    }
+
+    if (property === 'right') {
+        this.instance.right = this.right;
+        this.instance.updateProjectionMatrix();
+        this.aspect = (this.right - this.left) / (this.top - this.bottom);
+        return;
+    }
+
+    if (property === 'top') {
+        this.instance.top = this.top;
+        this.instance.updateProjectionMatrix();
+        this.aspect = (this.right - this.left) / (this.top - this.bottom);
+        return;
+    }
+
+    if (property === 'bottom') {
+        this.instance.bottom = this.bottom;
+        this.instance.updateProjectionMatrix();
+        this.aspect = (this.right - this.left) / (this.top - this.bottom);
+        return;
+    }
+
+
+    R3.D3.Camera.Orthographic.prototype.updateInstance.call(this, property);
+};

src/r3-d3-camera-orthographic-zoomed-aspect.js

@@ -1,289 +0,0 @@
-/**
- * R3.D3.Camera.Orthographic
- * @param graphics R3.Runtime.Graphics
- * @param apiD3OBjectOrthographicCamera
- * @constructor
- */
-R3.D3.Camera.Orthographic.FixedAspect = function(
-	graphics,
-	apiD3OBjectOrthographicCamera
-) {
-
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
-
-    if (R3.Utils.UndefinedOrNull(apiD3OBjectOrthographicCamera)) {
-        apiD3OBjectOrthographicCamera = {
-            objectType : R3.D3.API.Object.OBJECT_TYPE_CAMERA_ORTHOGRAPHIC,
-            position : R3.API.Vector3(0,0,10),
-            lookAt: R3.API.Vector3(0,0,-10)
-        };
-    }
-
-    R3.D3.API.Camera.Orthographic.call(
-        this,
-        apiD3OBjectOrthographicCamera,
-        apiD3OBjectOrthographicCamera.aspectRatioMode,
-        apiD3OBjectOrthographicCamera.minWidth,
-        apiD3OBjectOrthographicCamera.minHeight,
-        apiD3OBjectOrthographicCamera.width,
-        apiD3OBjectOrthographicCamera.height,
-        apiD3OBjectOrthographicCamera.near,
-        apiD3OBjectOrthographicCamera.far,
-        apiD3OBjectOrthographicCamera.left,
-        apiD3OBjectOrthographicCamera.right,
-        apiD3OBjectOrthographicCamera.top,
-        apiD3OBjectOrthographicCamera.bottom,
-        apiD3OBjectOrthographicCamera.zoom
-    );
-
-    R3.D3.Camera.call(
-        this,
-        this.graphics,
-        this
-    );
-    
-};
-
-R3.D3.Camera.Orthographic.prototype = Object.create(R3.D3.Camera.prototype);
-R3.D3.Camera.Orthographic.prototype.constructor = R3.D3.Camera.Orthographic;
-
-/**
- * Creates a camera instance
- * @returns {*}
- */
-R3.D3.Camera.Orthographic.prototype.createInstance = function() {
-
-    this.instance = new THREE.OrthographicCamera(
-        this.left,
-        this.right,
-        this.top,
-        this.bottom,
-        this.near,
-        this.far
-    );
-
-    if (
-        this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED ||
-        this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-    ) {
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-
-            var size = R3.Utils.GetWindowSize();
-
-            this.aspect = size.width / size.height;
-        }
-
-        this.updateFromAspectRatio();
-    }
-
-    R3.D3.Camera.prototype.createInstance.call(this);
-};
-
-/**
- * Updates the instance with the current state
- */
-R3.D3.Camera.Orthographic.prototype.updateInstance = function(property) {
-
-    var size;
-
-    if (property === 'aspectRatioMode') {
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_NONE) {
-            this.updateFromDimensions();
-            return;
-        }
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED) {
-            this.updateFromAspectRatio();
-            return;
-        }
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-
-            size = R3.Utils.GetWindowSize();
-
-            this.aspect = size.width / size.height;
-
-            this.updateFromAspectRatio();
-            return;
-        }
-    }
-
-    if (
-        property === 'width' ||
-        property === 'height' ||
-        property === 'minWidth' ||
-        property === 'minHeight' ||
-        property === 'aspect'
-    ) {
-
-        if (
-            this.aspectRatioMode !== R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED &&
-            this.aspectRatioMode !== R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-        ) {
-            console.warn('changing the this value when this camera is not in the right aspect ratio mode has no effect');
-            return;
-        }
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-            size = R3.Utils.GetWindowSize();
-            this.aspect = size.width / size.height;
-        }
-
-        this.updateFromAspectRatio();
-
-        return;
-    }
-
-    if (
-        property === 'left' ||
-        property === 'right' ||
-        property === 'top' ||
-        property === 'bottom'
-    ) {
-
-        if (
-            this.aspectRatioMode === R3.D3.API.Camera.ASPECT_RATIO_MODE_FIXED ||
-            this.aspectRatioMode === R3.D3.API.Camera.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-        ) {
-            console.warn('changing this value within a fixed aspect ratio has no effect');
-            return;
-        }
-
-        this.updateFromDimensions();
-
-        return;
-    }
-
-    if (property === 'zoom') {
-        this.instance.zoom = this.zoom;
-        this.instance.updateProjectionMatrix();
-    }
-
-    R3.D3.Camera.prototype.updateInstance.call(this, property);
-};
-
-/**
- * Converts a R3.D3.Camera to a R3.D3.API.Camera
- * @returns {R3.D3.API.Camera}
- */
-R3.D3.Camera.Orthographic.prototype.toApiObject = function() {
-
-    var apiCamera = R3.D3.Camera.prototype.toApiObject.call(this);
-
-    var apiOrthographicCamera = new R3.D3.API.Camera.Orthographic(
-        apiCamera,
-        this.aspectRatioMode,
-        this.minWidth,
-        this.minHeight,
-        this.width,
-        this.height,
-        this.near,
-        this.far,
-        this.left,
-        this.right,
-        this.top,
-        this.bottom,
-        this.zoom
-    );
-
-    return apiOrthographicCamera;
-};
-
-R3.D3.Camera.Orthographic.prototype.updateFromInstance = function() {
-    this.width  = this.instance.right - this.instance.left;
-    this.height = this.instance.top - this.instance.bottom;
-    this.near   = this.instance.near;
-    this.far    = this.instance.far;
-    this.left   = this.instance.left;
-    this.right  = this.instance.right;
-    this.top    = this.instance.top;
-    this.bottom = this.instance.bottom;
-    this.zoom   = this.instance.zoom;
-    R3.D3.Camera.prototype.updateFromInstance.call(this);
-};
-
-R3.D3.Camera.Orthographic.prototype.updateFromAspectRatio = function() {
-
-    var requiredAspect = this.minWidth / this.minHeight;
-
-    if (this.aspect < requiredAspect) {
-        /**
-         * Make height dependend on width
-         */
-        this.width      = this.minWidth;
-        this.height     = this.minWidth / this.aspect;
-
-        // if (this.height < this.minHeight) {
-        //     /**
-        //      * We have a problem - our new height is less than our minimum height
-        //      */
-        //
-        //
-        //     ;
-        //
-        //     if (requiredAspect < this.aspect) {
-        //         this.width  = requiredAspect * this.height;
-        //     } else {
-        //         this.height = this.minHeight;
-        //         this.width  = this.aspect * this.height;
-        //     }
-        //
-        //
-        // } else {
-        //
-        //     /**
-        //      * Try to fit our game into the window
-        //      * @type {number}
-        //      */
-        //  //   var requiredAspect = this.minWidth / this.minHeight;
-        //  //   this.width = requiredAspect * this.height;
-        // }
-
-    } else {
-        /**
-         * Make width dependend on height
-         */
-        this.height = this.minHeight;
-        this.width  = this.aspect * this.minHeight;
-        //
-        // if (this.width < this.minWidth) {
-        //     /**
-        //      * We have a problem - our new width is less than our minimum width
-        //      */
-        //     this.width  = this.minWidth;
-        //     this.height = this.width / this.aspect;
-        // }
-    }
-
-    this.left   = this.width / -2;
-    this.right  = this.width / 2;
-
-    this.top    = this.height / 2;
-    this.bottom = this.height / -2;
-
-    this.instance.left      = this.left;
-    this.instance.right     = this.right;
-    this.instance.top       = this.top;
-    this.instance.bottom    = this.bottom;
-
-    this.instance.updateProjectionMatrix();
-
-};
-
-R3.D3.Camera.Orthographic.prototype.updateFromDimensions = function() {
-
-    this.instance.left      = this.left;
-    this.instance.right     = this.right;
-    this.instance.top       = this.top;
-    this.instance.bottom    = this.bottom;
-
-    this.width   = this.right - this.left;
-    this.height  = this.top - this.bottom;
-
-    this.aspect = this.width / this.height;
-
-    this.instance.updateProjectionMatrix();
-};

src/r3-d3-camera-orthographic.js

@@ -1,46 +1,21 @@
 /**
  * R3.D3.Camera.Orthographic
- * @param graphics R3.Runtime.Graphics
- * @param apiD3OBjectOrthographicCamera
+ *
+ *  - This is an abstract class - should not be instantiated directly
+ *
+ * @param parent
+ * @param linkedObjects
  * @constructor
  */
 R3.D3.Camera.Orthographic = function(
-	graphics,
-	apiD3OBjectOrthographicCamera
+    parent,
+    linkedObjects
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
-
-    if (R3.Utils.UndefinedOrNull(apiD3OBjectOrthographicCamera)) {
-        apiD3OBjectOrthographicCamera = {
-            objectType : R3.D3.API.Object.OBJECT_TYPE_CAMERA_ORTHOGRAPHIC,
-            position : R3.API.Vector3(0,0,10),
-            lookAt: R3.API.Vector3(0,0,-10)
-        };
-    }
-
-    R3.D3.API.Camera.Orthographic.call(
-        this,
-        apiD3OBjectOrthographicCamera,
-        apiD3OBjectOrthographicCamera.aspectRatioMode,
-        apiD3OBjectOrthographicCamera.minWidth,
-        apiD3OBjectOrthographicCamera.minHeight,
-        apiD3OBjectOrthographicCamera.width,
-        apiD3OBjectOrthographicCamera.height,
-        apiD3OBjectOrthographicCamera.near,
-        apiD3OBjectOrthographicCamera.far,
-        apiD3OBjectOrthographicCamera.left,
-        apiD3OBjectOrthographicCamera.right,
-        apiD3OBjectOrthographicCamera.top,
-        apiD3OBjectOrthographicCamera.bottom,
-        apiD3OBjectOrthographicCamera.zoom
-    );
-
     R3.D3.Camera.call(
         this,
-        this.graphics,
-        this
+        parent,
+        linkedObjects
     );
     
 };
@@ -48,162 +23,28 @@ R3.D3.Camera.Orthographic = function(
 R3.D3.Camera.Orthographic.prototype = Object.create(R3.D3.Camera.prototype);
 R3.D3.Camera.Orthographic.prototype.constructor = R3.D3.Camera.Orthographic;
 
-/**
- * Creates a camera instance
- * @returns {*}
- */
-R3.D3.Camera.Orthographic.prototype.createInstance = function() {
-
-    this.instance = new THREE.OrthographicCamera(
-        this.left,
-        this.right,
-        this.top,
-        this.bottom,
-        this.near,
-        this.far
-    );
-
-    if (
-        this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED ||
-        this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-    ) {
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-
-            var size = R3.Utils.GetWindowSize();
-
-            this.aspect = size.width / size.height;
-        }
-
-        this.updateFromAspectRatio();
-    }
-
-    R3.D3.Camera.prototype.createInstance.call(this);
-};
-
 /**
  * Updates the instance with the current state
  */
 R3.D3.Camera.Orthographic.prototype.updateInstance = function(property) {
 
-    var size;
-
-    if (property === 'aspectRatioMode') {
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_NONE) {
-            this.updateFromDimensions();
-            return;
-        }
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED) {
-            this.updateFromAspectRatio();
-            return;
-        }
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-
-            size = R3.Utils.GetWindowSize();
-
-            this.aspect = size.width / size.height;
-
-            this.updateFromAspectRatio();
-            return;
-        }
-    }
-
-    if (
-        property === 'width' ||
-        property === 'height' ||
-        property === 'minWidth' ||
-        property === 'minHeight' ||
-        property === 'aspect'
-    ) {
-
-        if (
-            this.aspectRatioMode !== R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED &&
-            this.aspectRatioMode !== R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-        ) {
-            console.warn('changing the this value when this camera is not in the right aspect ratio mode has no effect');
-            return;
-        }
-
-        if (this.aspectRatioMode === R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT) {
-            size = R3.Utils.GetWindowSize();
-            this.aspect = size.width / size.height;
-        }
-
-        this.updateFromAspectRatio();
-
+    if (property === 'near') {
+        this.instance.near = this.near;
         return;
     }
 
-    if (
-        property === 'left' ||
-        property === 'right' ||
-        property === 'top' ||
-        property === 'bottom'
-    ) {
-
-        if (
-            this.aspectRatioMode === R3.D3.API.Camera.ASPECT_RATIO_MODE_FIXED ||
-            this.aspectRatioMode === R3.D3.API.Camera.ASPECT_RATIO_MODE_BASED_ON_CURRENT
-        ) {
-            console.warn('changing this value within a fixed aspect ratio has no effect');
-            return;
-        }
-
-        this.updateFromDimensions();
-
-        return;
+    if (property === 'far') {
+        this.instance.far = this.far;
     }
 
     if (property === 'zoom') {
         this.instance.zoom = this.zoom;
-        this.instance.updateProjectionMatrix();
+        this.instance.updateProjectionMatrix()
     }
 
     R3.D3.Camera.prototype.updateInstance.call(this, property);
 };
 
-/**
- * Converts a R3.D3.Camera to a R3.D3.API.Camera
- * @returns {R3.D3.API.Camera}
- */
-R3.D3.Camera.Orthographic.prototype.toApiObject = function() {
-
-    var apiCamera = R3.D3.Camera.prototype.toApiObject.call(this);
-
-    var apiOrthographicCamera = new R3.D3.API.Camera.Orthographic(
-        apiCamera,
-        this.aspectRatioMode,
-        this.minWidth,
-        this.minHeight,
-        this.width,
-        this.height,
-        this.near,
-        this.far,
-        this.left,
-        this.right,
-        this.top,
-        this.bottom,
-        this.zoom
-    );
-
-    return apiOrthographicCamera;
-};
-
-R3.D3.Camera.Orthographic.prototype.updateFromInstance = function() {
-    this.width  = this.instance.right - this.instance.left;
-    this.height = this.instance.top - this.instance.bottom;
-    this.near   = this.instance.near;
-    this.far    = this.instance.far;
-    this.left   = this.instance.left;
-    this.right  = this.instance.right;
-    this.top    = this.instance.top;
-    this.bottom = this.instance.bottom;
-    this.zoom   = this.instance.zoom;
-    R3.D3.Camera.prototype.updateFromInstance.call(this);
-};
 
 R3.D3.Camera.Orthographic.prototype.updateFromAspectRatio = function() {
 

src/r3-d3-camera-perspective-stereo.js

@@ -1,33 +1,28 @@
 /**
  * R3.D3.Camera.Perspective.Stereo
- * @param graphics R3.Runtime.Graphics
- * @param apiD3ObjectPerspectiveStereoCamera
+ * @param parent
+ * @param apiComponent
  * @constructor
  */
 R3.D3.Camera.Perspective.Stereo = function(
-	graphics,
-	apiD3ObjectPerspectiveStereoCamera
+	parent,
+	apiComponent
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
+    __RUNTIME_COMPONENT_MACRO__;
 
-    if (R3.Utils.UndefinedOrNull(apiD3ObjectPerspectiveStereoCamera)) {
-        apiD3ObjectPerspectiveStereoCamera = {
-            objectType : R3.D3.API.Object.OBJECT_TYPE_CAMERA_PERSPECTIVE_STEREO
-        };
-    }
-    linkedObjects.effect        = R3.D3.Effect;
     R3.D3.API.Camera.Perspective.Stereo.call(
         this,
-        apiD3ObjectPerspectiveStereoCamera,
-        apiD3ObjectPerspectiveStereoCamera.stereoMode
+        apiComponent,
+        apiComponent.stereoMode
     );
 
+    var linkedObjects = {};
+
     R3.D3.Camera.call(
         this,
-        this.graphics,
-        this
+        parent,
+        linkedObjects
     );
     
 };
@@ -41,20 +36,15 @@ R3.D3.Camera.Perspective.Stereo.prototype.constructor = R3.D3.Camera.Perspective
  */
 R3.D3.Camera.Perspective.Stereo.prototype.createInstance = function() {
 
-    this.instance = new THREE.PerspectiveCamera();
+    this.instance = this.graphics.StereoCamera(
+        this.fov,
+        this.aspect,
+        this.near,
+        this.far,
+        this.stereoMode
+    );
 
-    var instance = new THREE.StereoCamera();
-
-    for (var property in instance) {
-        if (
-            instance.hasOwnProperty(property) ||
-            typeof instance[property] === 'function'
-        ) {
-            this.instance[property] = instance[property];
-        }
-    }
-
-    R3.D3.Camera.prototype.createInstance.call(this);
+    R3.Component.prototype.createInstance.call(this);
 };
 
 /**
@@ -67,21 +57,5 @@ R3.D3.Camera.Perspective.Stereo.prototype.updateInstance = function(property) {
         return;
     }
 
-    R3.D3.Camera.prototype.updateInstance.call(this, property);
-};
-
-/**
- * Converts a R3.D3.Camera to a R3.D3.API.Camera
- * @returns {R3.D3.API.Camera}
- */
-R3.D3.Camera.Perspective.Stereo.prototype.toApiObject = function() {
-
-    var apiCamera = R3.D3.Camera.prototype.toApiObject.call(this);
-
-    var apiStereoCamera = new R3.D3.API.Camera.Perspective.Stereo(
-        apiCamera,
-        this.stereoMode
-    );
-
-    return apiStereoCamera;
+    R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property);
 };

src/r3-d3-camera-perspective.js

@@ -1,39 +1,34 @@
 /**
  * R3.D3.Camera.Perspective
- * @param graphics R3.Runtime.Graphics
- * @param apiD3ObjectPerspectiveCamera
+ * @param parent
+ * @param apiComponent
  * @constructor
  */
 R3.D3.Camera.Perspective = function(
-	graphics,
-	apiD3ObjectPerspectiveCamera
+	parent,
+	apiComponent
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
-
-    if (R3.Utils.UndefinedOrNull(apiD3ObjectPerspectiveCamera)) {
-        apiD3ObjectPerspectiveCamera = {
-            objectType : R3.D3.API.Object.OBJECT_TYPE_CAMERA_PERSPECTIVE
-        };
-    }
+    __RUNTIME_COMPONENT_MACRO__;
 
     R3.D3.API.Camera.Perspective.call(
         this,
-        apiD3ObjectPerspectiveCamera,
-        apiD3ObjectPerspectiveCamera.near,
-        apiD3ObjectPerspectiveCamera.far,
-        apiD3ObjectPerspectiveCamera.fov,
-        apiD3ObjectPerspectiveCamera.filmGauge,
-        apiD3ObjectPerspectiveCamera.filmOffset,
-        apiD3ObjectPerspectiveCamera.focus,
-        apiD3ObjectPerspectiveCamera.zoom
+        apiComponent,
+        apiComponent.near,
+        apiComponent.far,
+        apiComponent.fov,
+        apiComponent.filmGauge,
+        apiComponent.filmOffset,
+        apiComponent.focus,
+        apiComponent.zoom
     );
 
+    var linkedObjects = {};
+
     R3.D3.Camera.call(
         this,
-        this.graphics,
-        this
+        parent,
+        linkedObjects
     );
     
 };
@@ -47,7 +42,7 @@ R3.D3.Camera.Perspective.prototype.constructor = R3.D3.Camera.Perspective;
  */
 R3.D3.Camera.Perspective.prototype.createInstance = function() {
 
-    this.instance = new THREE.PerspectiveCamera(
+    this.instance = this.graphics.PerspectiveCamera(
         this.fov,
         this.aspect,
         this.near,
@@ -59,7 +54,9 @@ R3.D3.Camera.Perspective.prototype.createInstance = function() {
     this.instance.focus         = this.focus;
     this.instance.zoom          = this.zoom;
 
-    R3.D3.Camera.prototype.createInstance.call(this);
+    this.instance.updateProjectionMatrix();
+
+    R3.Component.prototype.createInstance.call(this);
 };
 
 /**
@@ -111,36 +108,3 @@ R3.D3.Camera.Perspective.prototype.updateInstance = function(property) {
         
     R3.D3.Camera.prototype.updateInstance.call(this, property);
 };
-
-/**
- * Converts a R3.D3.Camera to a R3.D3.API.Camera
- * @returns {R3.D3.API.Camera}
- */
-R3.D3.Camera.Perspective.prototype.toApiObject = function() {
-
-    var apiCamera = R3.D3.Camera.prototype.toApiObject.call(this);
-
-    var apiPerspectiveCamera = new R3.D3.API.Camera.Perspective(
-        apiCamera,
-        this.near,
-        this.far,
-        this.fov,
-        this.filmGauge,
-        this.filmOffset,
-        this.focus,
-        this.zoom
-    );
-
-    return apiPerspectiveCamera;
-};
-
-R3.D3.Camera.Perspective.prototype.updateFromInstance = function() {
-    this.near = this.instance.near;
-    this.far = this.instance.far;
-    this.fov = this.instance.fov;
-    this.filmGauge = this.instance.filmGauge;
-    this.filmOffset = this.instance.filmOffset;
-    this.focus = this.instance.focus;
-    this.zoom = this.instance.zoom;
-    R3.D3.Camera.prototype.updateFromInstance.call(this);
-};

src/r3-d3-composer-render-target.js

@@ -0,0 +1,98 @@
+/**
+ * R3.D3.Composer.RenderTarget
+ * @param parent
+ * @param apiComponent
+ * @constructor
+ */
+R3.D3.Composer.RenderTarget = function(
+    parent,
+    apiComponent
+) {
+
+    __RUNTIME_COMPONENT_MACRO__;
+
+    R3.D3.API.Composer.RenderTarget.call(
+        this,
+        apiComponent,
+        apiComponent.renderTarget
+    );
+
+    if (this.renderTarget instanceof R3.D3.API.RenderTarget) {
+        this.renderTarget = R3.Component.ConstructFromObject(this.renderTarget);
+    }
+
+    var linkedObjects = {
+        renderTarget : R3.D3.RenderTarget
+    };
+
+    R3.D3.Composer.call(
+        this,
+        parent,
+        linkedObjects
+    );
+};
+
+R3.D3.Composer.RenderTarget.prototype = Object.create(R3.D3.Composer.prototype);
+R3.D3.Composer.RenderTarget.prototype.constructor = R3.D3.Composer.RenderTarget;
+
+/**
+ * Creates a Composer instance
+ * @returns {*}
+ */
+R3.D3.Composer.RenderTarget.prototype.createInstance = function() {
+
+    if (R3.Utils.UndefinedOrNull(this.renderTarget)) {
+        throw new Error('Need at least a renderTarget to create this composer object instance')
+    }
+
+    this.width  = this.renderTarget.width;
+    this.height = this.renderTarget.height;
+
+    /**
+     * Right - now we should have the right size of the composer - we can continue
+     */
+    this.instance = this.graphics.Composer(
+        null,
+        this.renderTarget,
+        this.passes,
+        {
+            width   : this.width,
+            height  : this.height
+        }
+    );
+
+    R3.Component.prototype.createInstance.call(this);
+};
+
+/**
+ * Updates Composer instance
+ */
+R3.D3.Composer.RenderTarget.prototype.updateInstance = function(property) {
+
+    if (property === 'rendererTarget') {
+
+        console.warn('TODO: renderTarget update');
+
+        return;
+    }
+
+    R3.D3.Composer.prototype.updateInstance.call(this, property);
+};
+
+/**
+ * Returns true if this composer is ready
+ * @returns {boolean}
+ */
+R3.D3.Composer.RenderTarget.prototype.ready = function() {
+
+    if (R3.Utils.UndefinedOrNull(this.instance)) {
+        return false;
+    }
+
+    if (R3.Utils.UndefinedOrNull(this.renderTarget)) {
+        return false;
+    }
+
+    return R3.D3.Composer.prototype.ready.call(this);
+
+};

src/r3-d3-composer-renderer.js

@@ -0,0 +1,129 @@
+/**
+ * R3.D3.Composer.Renderer
+ * @param parent
+ * @param apiComponent
+ * @constructor
+ */
+R3.D3.Composer.Renderer = function(
+    parent,
+    apiComponent
+) {
+
+    __RUNTIME_COMPONENT_MACRO__;
+
+    R3.D3.API.Composer.Renderer.call(
+        this,
+        apiComponent,
+        apiComponent.renderer
+    );
+
+    if (this.renderer instanceof R3.API.Renderer.D3) {
+        this.renderer = R3.Component.ConstructFromObject(this.renderer);
+    }
+
+    var linkedObjects = {
+        renderer : R3.Renderer.D3
+    };
+
+    R3.D3.Composer.call(
+        this,
+        parent,
+        linkedObjects
+    );
+};
+
+R3.D3.Composer.Renderer.prototype = Object.create(R3.D3.Composer.prototype);
+R3.D3.Composer.Renderer.prototype.constructor = R3.D3.Composer.Renderer;
+
+/**
+ * Creates a Composer instance
+ * @returns {*}
+ */
+R3.D3.Composer.Renderer.prototype.createInstance = function() {
+
+    if (
+        R3.Utils.UndefinedOrNull(this.renderer)
+    ) {
+        throw new Error('Need at least a renderer to create a composer renderer object')
+    }
+
+
+    if (
+        this.renderer instanceof R3.Renderer.D3.Target ||
+        this.renderer instanceof R3.Renderer.D3.Canvas.Target
+    ) {
+
+        this.width  = this.renderer.target.width;
+        this.height = this.renderer.target.height;
+
+    } else if (
+        this.renderer instanceof R3.Renderer.D3.Canvas
+    ) {
+
+        /**
+         * This composer belongs to a scene which belongs to a viewport
+         */
+        var viewport = this.getFirstParent(R3.D3.Viewport);
+
+        /**
+         * The canvas is associated to the renderer - it has the actual size of the canvas and we need the size
+         * of the viewport to determine the actual pixel size of this composer
+         */
+        var canvas = this.renderer.canvas;
+
+        this.width  = canvas.width * viewport.width;
+        this.height = canvas.height * viewport.height;
+
+
+    } else {
+        throw new Error('Unhandled renderer type : ' + this.renderer);
+    }
+
+    /**
+     * Right - now we should have the right size of the composer - we can continue
+     */
+    this.instance = this.graphics.Composer(
+        renderer,
+        null,
+        this.passes,
+        {
+            width   : this.width,
+            height  : this.height
+        }
+    );
+
+    R3.Component.prototype.createInstance.call(this);
+};
+
+/**
+ * Updates Composer instance
+ */
+R3.D3.Composer.Renderer.prototype.updateInstance = function(property) {
+
+    if (property === 'renderer') {
+
+        console.warn('todo update composer renderer');
+
+        return;
+    }
+
+    R3.D3.Composer.prototype.updateInstance.call(this, property);
+};
+
+/**
+ * Checks if this composer is ready for rendering
+ * @returns {boolean}
+ */
+R3.D3.Composer.Renderer.prototype.ready = function() {
+
+    if (R3.Utils.UndefinedOrNull(this.instance)) {
+        return false;
+    }
+
+    if (R3.Utils.UndefinedOrNull(this.renderer)) {
+        return false;
+    }
+
+    return R3.D3.Composer.prototype.ready.call(this);
+
+};

src/r3-d3-composer.js

@@ -1,143 +1,61 @@
 /**
- * Renders a scene with a camera
- * @param graphics R3.Runtime.Graphics
- * @param apiComposer R3.D3.API.Composer
+ * R3.D3.Composer
+ *
+ *  - This is an abstract class, don't instatiate it directly
+ *
+ * @param parent
+ * @param linkedObjects
  * @constructor
  */
 R3.D3.Composer = function(
-    graphics,
-    apiComposer
+    parent,
+    linkedObjects
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
-
-    if (R3.Utils.UndefinedOrNull(apiComposer)) {
-		apiComposer = {};
+    if (R3.Utils.UndefinedOrNull(linkedObjects)) {
+        linkedObjects = {};
     }
 
-	R3.D3.API.Composer.call(
-        this,
-        apiComposer.id,
-        apiComposer.name,
-        apiComposer.parent,
-        apiComposer.autoUpdateSize,
-        apiComposer.width,
-        apiComposer.height,
-        apiComposer.renderer,
-        apiComposer.renderTarget,
-        apiComposer.passes
+    this.passes = this.passes.reduce(
+	    function(result, pass) {
+
+	        if (pass instanceof R3.API.Component) {
+	            pass = R3.Component.ConstructFromObject(pass);
+            }
+
+            result.push(pass);
+
+	        return result;
+        },
+        []
     );
 
+    linkedObjects.passes = [R3.D3.Pass];
+
     R3.Component.call(
         this,
-        {
-            'renderer'      : R3.Renderer,
-            'renderTarget'  : R3.D3.RenderTarget,
-            'passes'        : [R3.D3.Pass]
-        }
+        parent,
+        linkedObjects
     );
 };
 
 R3.D3.Composer.prototype = Object.create(R3.Component.prototype);
 R3.D3.Composer.prototype.constructor = R3.D3.Composer;
 
-/**
- * Creates a Composer instance
- * @returns {*}
- */
-R3.D3.Composer.prototype.createInstance = function() {
-
-    if (
-        R3.Utils.UndefinedOrNull(this.renderer) ||
-        R3.Utils.UndefinedOrNull(this.renderer.instance)
-    ) {
-        console.warn('renderer not ready');
-        return;
-    }
-
-    var renderTargetInstance = undefined;
-
-    if (
-        R3.Utils.Defined(this.renderTarget) &&
-        R3.Utils.Defined(this.renderTarget.instance)
-    ) {
-        renderTargetInstance = this.renderTarget.instance;
-    }
-
-    this.instance = new THREE.EffectComposer(
-        this.renderer.instance,
-        renderTargetInstance
-    );
-
-    this.passes.map(
-        function(pass) {
-
-            if (R3.Utils.UndefinedOrNull(pass.instance)) {
-                console.warn('pass not ready');
-                return;
-            }
-
-            this.instance.addPass(pass.instance);
-
-        }.bind(this)
-    );
-
-    if (this.autoUpdateSize) {
-        var size = R3.Utils.GetWindowSize();
-        this.width  = size.width;
-        this.height = size.height;
-    }
-
-    this.instance.setSize(
-        this.width,
-        this.height
-    );
-
-    console.log('Constructed a composer instance');
-
-    R3.Component.prototype.createInstance.call(this);
-};
-
 /**
  * Updates Composer instance
  */
 R3.D3.Composer.prototype.updateInstance = function(property) {
 
-    if (property === 'renderer') {
-
-        if (R3.Utils.UndefinedOrNull(this.instance)) {
-            this.createInstance();
-        }
-
+    if (property === 'width') {
+        this.instance.setSize(
+            this.width,
+            this.height
+        );
         return;
     }
 
-    if (property === 'renderTarget') {
-
-        if (
-            R3.Utils.Defined(this.instance) &&
-            R3.Utils.Defined(this.renderTarget) &&
-            R3.Utils.Defined(this.renderTarget.instance)
-        ) {
-            this.instance.reset(this.renderTarget.instance);
-        }
-
-        return;
-    }
-
-    if (
-        property === 'width' ||
-        property === 'height' ||
-        property === 'autoUpdateSize'
-    ) {
-
-        if (this.autoUpdateSize) {
-            var size = R3.Utils.GetWindowSize();
-            this.width  = size.width;
-            this.height = size.height;
-        }
-
+    if (property === 'height') {
         this.instance.setSize(
             this.width,
             this.height
@@ -159,10 +77,11 @@ R3.D3.Composer.prototype.updateInstance = function(property) {
 
                 this.instance.addPass(pass.instance);
 
-                console.log('adding pass : ' + pass.name);
-
             }.bind(this)
-        )
+        );
+
+        console.warn('TODO test composer passes update');
+        //this.instance.reset();
     }
 
     R3.Component.prototype.updateInstance.call(this, property);
@@ -186,6 +105,9 @@ R3.D3.Composer.prototype.render = function() {
     this.instance.render();
 };
 
+/**
+ * True if ready
+ */
 R3.D3.Composer.prototype.ready = function() {
 
     if (this.passes.length === 0) {
@@ -202,28 +124,3 @@ R3.D3.Composer.prototype.ready = function() {
         true
     )
 };
-
-/**
- * R3.D3.Composer to R3.D3.API.Composer
- * @returns {R3.D3.API.Composer}
- */
-R3.D3.Composer.prototype.toApiObject = function() {
-
-    var apiComposer = new R3.D3.API.Composer(
-        this.id,
-        this.name,
-        R3.Utils.IdOrNull(this.parent),
-        this.autoUpdateSize,
-        this.width,
-        this.height,
-        R3.Utils.IdOrNull(this.renderer),
-        R3.Utils.IdOrNull(this.renderTarget),
-        this.passes.map(
-            function(pass) {
-                return R3.Utils.IdOrNull(pass);
-            }
-        )
-    );
-
-    return apiComposer;
-};

src/r3-d3-effect-a.js

@@ -1,55 +1,40 @@
 /**
  * R3.D3.Effect
- * @param graphics R3.Runtime.Graphics
- * @param apiEffect R3.D3.API.Effect
+ * @param parent
+ * @param linkedObjects
  * @constructor
  */
 R3.D3.Effect = function(
-    graphics,
-    apiEffect
+    parent,
+    linkedObjects
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
-
-    if (R3.Utils.UndefinedOrNull(apiEffect)) {
-        apiEffect = {};
+    if (R3.Utils.UndefinedOrNull(linkedObjects)) {
+        linkedObjects = {};
     }
 
-    R3.D3.API.Effect.call(
-        this,
-        apiEffect.id,
-        apiEffect.name,
-        apiEffect.effectType,
-        apiEffect.parent,
-        apiEffect.renderer,
-        apiEffect.width,
-        apiEffect.height
+    if (this.renderer instanceof R3.API.Component) {
+        this.renderer = R3.Component.ConstructFromObject(this.renderer);
+    }
+
+    linkedObjects.renderer = R3.Renderer.D3;
+
+    R3.Event.Subscribe(
+        R3.Event.RENDERER_SIZE_CHANGE,
+        function(renderer) {
+
+            var size = renderer.getSize();
+
+            this.width  = size.width;
+            this.height = size.height;
+
+            this.updateInstance('size');
+        }.bind(this)
     );
 
-    if (R3.Utils.UndefinedOrNull(this.render)) {
-        /**
-         * We don't have a renderer - get a handle on the project and initialize the renderer from there
-         */
-        R3.Event.Emit(
-            R3.Event.GET_PROJECT,
-            function(project) {
-
-                /**
-                 * Assign the last created renderer to this effect
-                 */
-                this.renderer = project.renderers[project.renderers.length - 1];
-
-            }.bind(this)
-        );
-    }
-
-    var linkedObjects = {
-        renderer : R3.Renderer
-    };
-
     R3.Component.call(
         this,
+        parent,
         linkedObjects
     );
 };
@@ -59,26 +44,10 @@ R3.D3.Effect.prototype.constructor = R3.D3.Effect;
 
 R3.D3.Effect.prototype.createInstance = function() {
 
-    if (!this.instance) {
-        console.warn('call this child create instance first');
-        return;
-    }
-
-    var width = this.width;
-    var height = this.height;
-
-    if (this.renderer && this.renderer.instance) {
-        var size = this.renderer.getSize();
-        width = size.width;
-        height = size.height;
-    }
-
-    this.setSize(
-        width,
-        height
-    );
+    this.updateInstance('size');
 
     R3.Component.prototype.createInstance.call(this);
+
 };
 
 /**
@@ -86,110 +55,43 @@ R3.D3.Effect.prototype.createInstance = function() {
  */
 R3.D3.Effect.prototype.updateInstance = function(property) {
 
-    if (R3.Utils.UndefinedOrNull(property)) {
-        console.warn('no camera property specified for : ' + this.name);
-    }
-
-    if (property === 'effectType') {
-        console.warn('todo: update effect type');
-        return;
-    }
-
-    if (
-        property === 'width' ||
+    if (property === 'size'     ||
+        property === 'width'    ||
         property === 'height'
     ) {
-        this.setSize(
+        this.instance.setSize(
             this.width,
             this.height
         )
     }
 
     if (property === 'renderer') {
-        if (property === 'renderer') {
 
-            if (
-                R3.Utils.Defined(this.renderer) &&
-                R3.Utils.Defined(this.renderer.instance)
-            ) {
+        console.warn('TODO: renderer update');
 
-                if (R3.Utils.UndefinedOrNull(this.instance)) {
-                    this.createInstance();
-                } else {
-                    this.instance.dispose();
-                    this.createInstance();
-                }
+        if (
+            R3.Utils.Defined(this.renderer) &&
+            R3.Utils.Defined(this.renderer.instance)
+        ) {
+
+            var size = this.renderer.getSize();
+
+            this.width  = size.width;
+            this.height = size.height;
+
+            if (R3.Utils.UndefinedOrNull(this.instance)) {
+                this.createInstance();
+            } else {
+                this.instance.dispose();
+                this.createInstance();
             }
-
+        } else {
+            console.warn('The renderer was unassigned - this wil break things - do not save now');
         }
+
         return;
     }
 
     R3.Component.prototype.updateInstance.call(this, property);
 
 };
-
-/**
- * Convenience function to set effect size
- * @param width
- * @param height
- */
-R3.D3.Effect.prototype.setSize = function(width, height) {
-    this.instance.setSize(
-        width,
-        height
-    );
-};
-
-/**
- * Convenience function to render a scene / camera with this effect
- * @param scene
- * @param camera
- */
-R3.D3.Effect.prototype.render = function(scene, camera) {
-    this.instance.render(
-        scene.instance,
-        camera.instance
-    );
-};
-
-/**
- *
- * @param scene
- * @param camera
- * @returns {boolean}
- */
-R3.D3.Effect.prototype.ready = function(scene, camera) {
-
-    if (!this.instance) {
-        return false;
-    }
-
-    if (!scene.instance) {
-        return false;
-    }
-
-    if (!camera.instance) {
-        return false;
-    }
-
-    return true;
-};
-
-/**
- * Converts a R3.D3.Effect to a new R3.D3.API.Effect
- * @returns {R3.D3.API.Effect}
- */
-R3.D3.Effect.prototype.toApiObject = function() {
-
-    return new R3.D3.API.Effect(
-        this.id,
-        this.name,
-        this.effectType,
-        R3.Utils.IdOrNull(this.parent),
-        R3.Utils.IdOrNull(this.renderer),
-        this.width,
-        this.height
-    );
-
-};

src/r3-d3-effect-anaglyph.js

@@ -1,32 +1,24 @@
 /**
  * R3.D3.Effect.Anaglyph
- * @param graphics R3.Runtime.Graphics
- * @param apiAnaglyphEffect
+ * @param parent
+ * @param apiComponent
  * @constructor
  */
 R3.D3.Effect.Anaglyph = function(
-	graphics,
-	apiAnaglyphEffect
+	parent,
+	apiComponent
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
-
-    if (R3.Utils.UndefinedOrNull(apiAnaglyphEffect)) {
-        apiAnaglyphEffect = {
-            effectType : R3.D3.API.Effect.EFFECT_TYPE_ANAGLYPH
-        };
-    }
+    __RUNTIME_COMPONENT_MACRO__;
 
     R3.D3.API.Effect.Anaglyph.call(
         this,
-        apiAnaglyphEffect
+        apiComponent
     );
 
     R3.D3.Effect.call(
         this,
-        this.graphics,
-        this
+        parent
     );
     
 };
@@ -48,11 +40,7 @@ R3.D3.Effect.Anaglyph.prototype.createInstance = function() {
         return;
     }
 
-    this.instance = new THREE.AnaglyphEffect(
-        this.renderer.instance
-    );
-
-    console.log('anaglyph effect instance created');
+    this.instance = this.graphics.AnaglyphEffect(this.renderer);
 
     R3.D3.Effect.prototype.createInstance.call(this);
 };
@@ -63,18 +51,3 @@ R3.D3.Effect.Anaglyph.prototype.createInstance = function() {
 R3.D3.Effect.Anaglyph.prototype.updateInstance = function(property) {
     R3.D3.Effect.prototype.updateInstance.call(this, property);
 };
-
-/**
- * Converts a R3.D3.Effect to a R3.D3.API.Effect
- * @returns {R3.D3.API.Effect}
- */
-R3.D3.Effect.Anaglyph.prototype.toApiObject = function() {
-
-    var apiEffect = R3.D3.Effect.prototype.toApiObject.call(this);
-
-    var apiAnaglyphEffect = new R3.D3.API.Effect.Anaglyph(
-        apiEffect
-    );
-
-    return apiAnaglyphEffect;
-};

src/r3-d3-effect-parallax.js

@@ -1,32 +1,24 @@
 /**
  * R3.D3.Effect.Parallax
- * @param graphics R3.Runtime.Graphics
- * @param apiParallaxEffect
+ * @param parent
+ * @param apiComponent
  * @constructor
  */
 R3.D3.Effect.Parallax = function(
-	graphics,
-	apiParallaxEffect
+    parent,
+    apiComponent
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
-
-    if (R3.Utils.UndefinedOrNull(apiParallaxEffect)) {
-        apiParallaxEffect = {
-            effectType : R3.D3.API.Effect.EFFECT_TYPE_PARALLAX
-        };
-    }
+    __RUNTIME_COMPONENT_MACRO__;
 
     R3.D3.API.Effect.Parallax.call(
         this,
-        apiParallaxEffect
+        apiComponent
     );
 
     R3.D3.Effect.call(
         this,
-        this.graphics,
-        this
+        parent
     );
     
 };
@@ -48,11 +40,7 @@ R3.D3.Effect.Parallax.prototype.createInstance = function() {
         return;
     }
 
-    this.instance = new THREE.ParallaxBarrierEffect(
-        this.renderer.instance
-    );
-
-    console.log('parallax effect instance created');
+    this.instance = this.graphics.ParallaxEffect(this.renderer);
 
     R3.D3.Effect.prototype.createInstance.call(this);
 };
@@ -63,18 +51,3 @@ R3.D3.Effect.Parallax.prototype.createInstance = function() {
 R3.D3.Effect.Parallax.prototype.updateInstance = function(property) {
     R3.D3.Effect.prototype.updateInstance.call(this, property);
 };
-
-/**
- * Converts a R3.D3.Effect to a R3.D3.API.Effect
- * @returns {R3.D3.API.Effect}
- */
-R3.D3.Effect.Parallax.prototype.toApiObject = function() {
-
-    var apiEffect = R3.D3.Effect.prototype.toApiObject.call(this);
-
-    var apiParallaxEffect = new R3.D3.API.Effect.Parallax(
-        apiEffect
-    );
-
-    return apiParallaxEffect;
-};

src/r3-d3-effect-stereo.js

@@ -1,33 +1,24 @@
 /**
  * R3.D3.Effect.Stereo
- * @param graphics R3.Runtime.Graphics
- * @param apiStereoEffect
+ * @param parent
+ * @param apiComponent
  * @constructor
  */
 R3.D3.Effect.Stereo = function(
-	graphics,
-	apiStereoEffect
+    parent,
+    apiComponent
 ) {
 
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
-
-    if (R3.Utils.UndefinedOrNull(apiStereoEffect)) {
-        apiStereoEffect = {
-            effectType : R3.D3.API.Effect.EFFECT_TYPE_STEREO
-        };
-    }
+    __RUNTIME_COMPONENT_MACRO__;
 
     R3.D3.API.Effect.Stereo.call(
         this,
-        apiStereoEffect,
-        apiStereoEffect.eyeSeperation
+        apiComponent
     );
 
     R3.D3.Effect.call(
         this,
-        this.graphics,
-        this
+        parent
     );
     
 };
@@ -49,14 +40,10 @@ R3.D3.Effect.Stereo.prototype.createInstance = function() {
         return;
     }
 
-    this.instance = new THREE.StereoEffect(
-        this.renderer.instance
-    );
+    this.instance = this.graphics.StereoEffect(this.renderer);
 
     this.instance.setEyeSeparation(this.eyeSeperation);
 
-    console.log('stereo effect instance created');
-
     R3.D3.Effect.prototype.createInstance.call(this);
 };
 
@@ -72,19 +59,3 @@ R3.D3.Effect.Stereo.prototype.updateInstance = function(property) {
 
     R3.D3.Effect.prototype.updateInstance.call(this, property);
 };
-
-/**
- * Converts a R3.D3.Effect to a R3.D3.API.Effect
- * @returns {R3.D3.API.Effect}
- */
-R3.D3.Effect.Stereo.prototype.toApiObject = function() {
-
-    var apiEffect = R3.D3.Effect.prototype.toApiObject.call(this);
-
-    var apiStereoEffect = new R3.D3.API.Effect.Stereo(
-        apiEffect,
-        this.eyeSeperation
-    );
-
-    return apiStereoEffect;
-};

src/r3-d3-face-graphics.js

@@ -0,0 +1,287 @@
+/**
+ * R3.D3.Face
+ * @param parent
+ * @param apiComponent
+ * @constructor
+ */
+R3.D3.Face.Graphics = function(
+    parent,
+    apiComponent
+) {
+
+    __RUNTIME_COMPONENT_MACRO__;
+
+    R3.D3.Face.call(
+        this,
+        parent,
+        apiComponent,
+        linkedObjects
+    );
+
+	R3.D3.API.Face.call(
+		this,
+        apiComponent,
+        apiComponent.v0index,
+        apiComponent.v1index,
+        apiComponent.v2index,
+        apiComponent.materialIndex,
+        apiComponent.uvs,
+        apiComponent.color,
+        apiComponent.vertexColors,
+        apiComponent.vertexNormals,
+        apiComponent.normal,
+        apiComponent.selected
+	);
+
+    this.componentRuntime = R3.Component.GetComponentRuntime(this.parent);
+
+    switch (this.componentRuntime) {
+        case R3.Component.GRAPHICS_RUNTIME :
+            break;
+        case R3.Component.PHYSICS_RUNTIME :
+            break;
+    }
+
+    R3.Component.call(
+        this,
+        parent
+    );
+
+    if (this.implementation instanceof R3.Runtime.Graphics) {
+        /**
+         * physics faces have no color... a little sad right?
+         */
+        this.color = new R3.Color(
+            this.implementation,
+            this.color,
+            this
+        );
+
+        this.vertexColors = this.vertexColors.map(function(vertexColor){
+
+            return new R3.Color(
+                this.implementation,
+                vertexColor,
+                this
+            );
+            /*
+            if (vertexColor instanceof R3.Color) {
+                return vertexColor;
+            }
+
+            if (vertexColor instanceof R3.API.Color) {
+
+            }
+
+            console.warn('unknown vertex color type', vertexColor);*/
+        }.bind(this));
+
+    }
+
+	this.vertexNormals = this.vertexNormals.map(
+	    function(vertexNormal) {
+            return new R3.Vector3(
+                this.implementation,
+                vertexNormal,
+                this
+            );
+        }.bind(this)
+    );
+
+    this.uvs = this.uvs.reduce(
+
+        function(result, uvs, uvSet) {
+
+            result[uvSet] = uvs.reduce(
+                function(uvResult, uv) {
+
+                    uvResult.push(
+                        new R3.Vector2(
+                            this.implementation,
+                            uv,
+                            this
+                        )
+                    );
+
+                    return uvResult;
+                }.bind(this),
+                []
+            );
+
+            return result;
+
+
+        }.bind(this),
+        []
+    );
+
+    this.normal = new R3.Vector3(
+        this.implementation,
+        this.normal,
+        this
+    );
+
+};
+
+R3.D3.Face.Graphics.prototype = Object.create(R3.D3.Face.prototype);
+R3.D3.Face.Graphics.prototype.constructor = R3.D3.Face.Graphics;
+
+/**
+ * We don't follow the standard procedure for Faces - We don't want them in the EntityManager registry - so
+ * they don't call component createinstance
+ * @param parentGeometry
+ */
+R3.D3.Face.Graphics.prototype.createInstance = function(parentGeometry) {
+
+    this.instance = new THREE.Face3(
+        this.v0index,
+        this.v1index,
+        this.v2index
+    );
+
+    if (this.normal) {
+        this.instance.normal = new THREE.Vector3(
+            this.normal.x,
+            this.normal.y,
+            this.normal.z
+        );
+    }
+
+    if (this.color) {
+        this.instance.color = new THREE.Color(
+            this.color.r,
+            this.color.g,
+            this.color.b
+        )
+    }
+
+    this.instance.materialIndex = this.materialIndex;
+
+    if (R3.Utils.UndefinedOrNull(parentGeometry)) {
+        console.warn('please pass a parentmesh to face createInstance()');
+    }
+    this.parentGeometry = parentGeometry;
+};
+
+R3.D3.Face.Graphics.prototype.updateInstance = function(property, uvSet, uvIndex) {
+
+    if (property === 'materialIndex') {
+        this.instance.materialIndex = this.materialIndex;
+        this.parentGeometry.instance.groupsNeedUpdate = true;
+        return;
+    }
+
+    if (property === 'uvs') {
+
+        this.uvs[uvSet][uvIndex].instance.x = this.uvs[uvSet][uvIndex].x;
+        this.uvs[uvSet][uvIndex].instance.y = this.uvs[uvSet][uvIndex].y;
+        this.parentGeometry.instance.uvsNeedUpdate = true;
+        return;
+    }
+
+    console.warn('todo: update face property: ' + property);
+};
+
+R3.D3.Face.prototype.toApiObject = function() {
+
+    return new R3.D3.API.Face(
+	    this.id,
+	    this.name,
+	    this.v0index,
+        this.v1index,
+		this.v2index,
+		this.materialIndex,
+        this.uvs.reduce(
+            function(result, uvArray, index) {
+
+                result[index] = uvArray.reduce(
+                    function(uvResult, uv) {
+
+                        if (uv instanceof R3.Vector2) {
+                            uvResult.push(uv.toApiObject());
+                        } else {
+                            console.warn('unknown uv type - cannot commit to API');
+                        }
+
+                        return uvResult;
+                    }.bind(this),
+                    []
+                );
+
+                return result;
+
+            }.bind(this),
+            []
+        ),
+		this.color.toApiObject(),
+		this.vertexColors.map(function(vertexColor){
+		    return vertexColor.toApiObject();
+        }),
+		this.vertexNormals.map(function(vertexNormal){
+		    return vertexNormal.toApiObject();
+        }),
+		this.normal.toApiObject(),
+        this.selected
+	);
+};
+
+
+R3.D3.Face.prototype.createHelper = function(mesh) {
+
+    this.backupProperties = {
+        color : {
+            r: this.color.r,
+            g: this.color.g,
+            b: this.color.b
+        },
+
+        material : {
+            emissive : {
+                r: mesh.materials[this.materialIndex].emissive.r,
+                g: mesh.materials[this.materialIndex].emissive.g,
+                b: mesh.materials[this.materialIndex].emissive.b
+            }
+        },
+        vertexColors : mesh.materials[this.materialIndex].vertexColors
+    };
+
+    this.instance.vertexColors = [
+        new THREE.Color(1,0,0),
+        new THREE.Color(0,1,0),
+        new THREE.Color(0,0,1)
+    ];
+
+    // this.instance.color.r = 1;
+    // this.instance.color.g = 0;
+    // this.instance.color.b = 0;
+
+    //
+    // mesh.materials[this.materialIndex].emissive.r = 0.5;
+    // mesh.materials[this.materialIndex].emissive.g = 0.5;
+    // mesh.materials[this.materialIndex].emissive.b = 0.5;
+    // mesh.materials[this.materialIndex].updateInstance('emissive');
+
+    mesh.materials[this.materialIndex].vertexColors = R3.D3.API.Material.TYPE_VERTEX_COLORS;
+    mesh.materials[this.materialIndex].updateInstance('vertexColors');
+
+    mesh.instance.geometry.elementsNeedUpdate = true;
+
+};
+
+R3.D3.Face.prototype.removeHelper = function(mesh) {
+
+    this.instance.color.r = this.backupProperties.color.r;
+    this.instance.color.g = this.backupProperties.color.g;
+    this.instance.color.b = this.backupProperties.color.b;
+
+    mesh.instance.geometry.colorsNeedUpdate = true;
+
+    // mesh.materials[this.materialIndex].emissive.r = this.backupProperties.material.emissive.r;
+    // mesh.materials[this.materialIndex].emissive.g = this.backupProperties.material.emissive.g;
+    // mesh.materials[this.materialIndex].emissive.b = this.backupProperties.material.emissive.b;
+    // mesh.materials[this.materialIndex].updateInstance('emissive');
+
+    mesh.materials[this.materialIndex].vertexColors = this.backupProperties.vertexColors;
+    mesh.materials[this.materialIndex].updateInstance('vertexColors');
+
+};

src/r3-d3-face.js

@@ -1,117 +1,55 @@
 /**
  * R3.D3.Face
+ * @param parent
+ * @param apiComponent
+ * @param linkedObjects
  * @constructor
- * @param implementation
- * @param apiFace
  */
 R3.D3.Face = function(
-    implementation,
-    apiFace
+    parent,
+    apiComponent,
+    linkedObjects
 ) {
 
-    this.implementation = implementation;
-    if (implementation instanceof R3.Runtime.Graphics) {
-        this.implementation.isNotThreeThrow();
-    } else if (implementation instanceof R3.Runtime.Physics) {
-        this.implementation.isNotCannonThrow();
-    } else {
-        throw new Error('Unhandled implementation : ' + implementation);
-    }
-
-	if (R3.Utils.UndefinedOrNull(apiFace)) {
-		apiFace = {};
-	}
+    __RUNTIME_COMPONENT_MACRO__;
 
 	R3.D3.API.Face.call(
 		this,
-		apiFace.id,
-		apiFace.name,
-		apiFace.v0index,
-		apiFace.v1index,
-		apiFace.v2index,
-		apiFace.materialIndex,
-		apiFace.uvs,
-		apiFace.color,
-		apiFace.vertexColors,
-		apiFace.vertexNormals,
-		apiFace.normal,
-        apiFace.selected,
-        apiFace.parentGeometry,
-        apiFace.parent
+        apiComponent,
+        apiComponent.v0index,
+        apiComponent.v1index,
+        apiComponent.v2index,
+        apiComponent.vertexNormals,
+        apiComponent.normal,
+        apiComponent.selected
 	);
 
-    if (this.implementation instanceof R3.Runtime.Graphics) {
-        /**
-         * physics faces have no color... a little sad right?
-         */
-        this.color = new R3.Color(
-            this.implementation,
-            this.color,
-            this
-        );
+    this.componentRuntime = R3.Component.GetComponentRuntime(this.parent);
 
-        this.vertexColors = this.vertexColors.map(function(vertexColor){
+    this.vertexNormals = this.vertexNormals.reduce(
+        function(result, vertexNormal) {
 
-            return new R3.Color(
-                this.implementation,
-                vertexColor,
-                this
-            );
-            /*
-            if (vertexColor instanceof R3.Color) {
-                return vertexColor;
-            }
-
-            if (vertexColor instanceof R3.API.Color) {
-
-            }
-
-            console.warn('unknown vertex color type', vertexColor);*/
-        }.bind(this));
-
-    }
-
-	this.vertexNormals = this.vertexNormals.map(
-	    function(vertexNormal) {
-            return new R3.Vector3(
-                this.implementation,
-                vertexNormal,
-                this
-            );
-        }.bind(this)
-    );
-
-    this.uvs = this.uvs.reduce(
-
-        function(result, uvs, uvSet) {
-
-            result[uvSet] = uvs.reduce(
-                function(uvResult, uv) {
-
-                    uvResult.push(
-                        new R3.Vector2(
-                            this.implementation,
-                            uv,
-                            this
-                        )
-                    );
-
-                    return uvResult;
-                }.bind(this),
-                []
+            result.push(
+                new R3.Vector3(
+                    parent,
+                    vertexNormal
+                )
             );
 
             return result;
-
-
-        }.bind(this),
+        },
         []
     );
 
     this.normal = new R3.Vector3(
-        this.implementation,
-        this.normal,
-        this
+        parent,
+        this.normal
+    );
+
+    R3.Component.call(
+        this,
+        parent,
+        linkedObjects
     );
 
 };
@@ -126,6 +64,14 @@ R3.D3.Face.prototype.constructor = R3.D3.Face;
  */
 R3.D3.Face.prototype.createInstance = function(parentGeometry) {
 
+    switch (this.componentRuntime) {
+        case R3.Component.GRAPHICS_RUNTIME :
+            break;
+        case R3.Component.PHYSICS_RUNTIME :
+            break;
+    }
+
+
     this.instance = new THREE.Face3(
         this.v0index,
         this.v1index,

src/r3-renderer-a.js

@@ -1,45 +1,18 @@
 /**
  * R3.Renderer
- * @param graphics
- * @param apiRenderer R3.API.Renderer
- * @property rendererType
+ * @param parent
+ * @param linkedObjects
  * @constructor
  */
 R3.Renderer = function(
-    graphics,
-    apiRenderer
+    parent,
+    linkedObjects
 ) {
 
-    if (R3.Utils.UndefinedOrNull(graphics)) {
-        graphics = null;
-    }
-    this.graphics = graphics;
-
-    if (R3.Utils.UndefinedOrNull(apiRenderer)) {
-        apiRenderer = {
-            rendererType : R3.API.Renderer.RENDERER_TYPE_NONE
-        };
-    }
-
-    R3.API.Renderer.call(
-        this,
-        apiRenderer.id,
-        apiRenderer.name,
-        apiRenderer.parent,
-        apiRenderer.rendererType,
-        apiRenderer.canvas
-    );
-
-    if (this.canvas instanceof R3.API.Canvas) {
-        this.canvas = new R3.Canvas(
-            this.graphics,
-            this.canvas
-        );
-    }
-
     R3.Component.call(
         this,
-        R3.Renderer.GetLinkedObjects(this.rendererType)
+        parent,
+        linkedObjects
     );
 
 };
@@ -47,34 +20,6 @@ R3.Renderer = function(
 R3.Renderer.prototype = Object.create(R3.Component.prototype);
 R3.Renderer.prototype.constructor = R3.Renderer;
 
-R3.Renderer.GetLinkedObjects = function(rendererType) {
-
-    var linkedObjects = {
-        'canvas' : R3.Canvas
-    };
-
-    switch (rendererType) {
-        case R3.API.Renderer.RENDERER_TYPE_3D :
-            linkedObjects.renderTarget      = R3.D3.RenderTarget;
-            linkedObjects.clippingPlanes    = [R3.Plane];
-            linkedObjects.viewports         = [R3.D3.Viewport];
-            linkedObjects.composer          = R3.D3.Composer;
-            linkedObjects.effect            = R3.D3.Effect;
-            break;
-    }
-
-    return linkedObjects;
-
-};
-
-/**
- * Create Renderer Instance
- * @returns {*}
- */
-R3.Renderer.prototype.createInstance = function() {
-    R3.Component.prototype.createInstance.call(this);
-};
-
 /**
  * Update Renderer Instance
  */
@@ -88,36 +33,24 @@ R3.Renderer.prototype.updateInstance = function(property) {
         throw new Error('no renderer instance');
     }
 
-    if (property === 'rendererType') {
+    if (property === 'size') {
 
-        var componentType = R3.API.Renderer.GetComponentType(this.rendererType);
+        this.width  = this.target.width;
+        this.height = this.target.height;
 
-        this.replace(componentType);
-
-        return;
-    }
-
-    if (property === 'canvas') {
-        console.log('todo: canvas update');
-        return;
+        /**
+         * Emit a resize event so other objects like effects and composers can update their sizes
+         */
+        R3.Event.Emit(
+            R3.Event.RENDERER_SIZE_CHANGE,
+            this
+        );
+        /**
+         * TODO: Allow other objects like effects and composers to update their size if it was using this render target
+         */
+        console.warn('TODO: Allow other objects like effects and composers to update their size if it was using this render target');
+        //R3.Event.Emit(R3.Event.RENDER_TARGET_CHANGE, this.renderTarget);
     }
 
     R3.Component.prototype.updateInstance.call(this, property);
 };
-
-/**
- *
- * @returns {R3.API.Renderer}
- */
-R3.Renderer.prototype.toApiObject = function() {
-
-    var apiRenderer = new R3.API.Renderer(
-        this.id,
-        this.name,
-        R3.Utils.IdOrNull(this.parent),
-        this.rendererType,
-        R3.Utils.IdOrNull(this.canvas)
-    );
-
-    return apiRenderer;
-};

src/r3-renderer-d2.js

@@ -71,18 +71,3 @@ R3.Renderer.D2.prototype.updateInstance = function(property) {
     R3.Renderer.prototype.updateInstance.call(this, property);
 };
 
-/**
- *
- * @returns {R3.API.Renderer.D2}
- */
-R3.Renderer.D2.prototype.toApiObject = function() {
-
-    var apiRenderer = R3.Renderer.prototype.toApiObject.call(this);
-
-    var apiRendererD2 = new R3.API.Renderer.D2(
-        apiRenderer
-    );
-
-    return apiRendererD2;
-};
-

src/r3-renderer-d3-canvas-target.js

@@ -1,533 +1,122 @@
 /**
  * R3.Renderer.D3.Canvas.Target
- * @param graphics R3.Runtime.Graphics
- * @param apiRendererD3 R3.API.Renderer.D3
+ * @param parent
+ * @param apiComponent
  * @constructor
  */
 R3.Renderer.D3.Canvas.Target = function(
-    graphics,
-    apiRendererD3
+    parent,
+    apiComponent
 ) {
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
 
-    if (R3.Utils.UndefinedOrNull(apiRendererD3)) {
-        apiRendererD3 = {
-            rendererType : R3.API.Renderer.RENDERER_TYPE_3D
-        };
-    }
+    __RUNTIME_COMPONENT_MACRO__;
 
-    R3.API.Renderer.D3.call(
+    R3.API.Renderer.D3.Canvas.Target.call(
         this,
-        apiRendererD3,
-        apiRendererD3.renderMode,
-        apiRendererD3.autoClear,
-        apiRendererD3.autoClearColor,
-        apiRendererD3.autoClearDepth,
-        apiRendererD3.autoClearStencil,
-        apiRendererD3.gammaFactor,
-        apiRendererD3.gammaInput,
-        apiRendererD3.gammaOutput,
-        apiRendererD3.maxMorphTargets,
-        apiRendererD3.maxMorphNormals,
-        apiRendererD3.physicallyCorrectLights,
-        apiRendererD3.shadowMapEnabled,
-        apiRendererD3.shadowMapAutoUpdate,
-        apiRendererD3.shadowMapNeedsUpdate,
-        apiRendererD3.shadowMapType,
-        apiRendererD3.shadowMapRenderReverseSided,
-        apiRendererD3.shadowMapRenderSingleSided,
-        apiRendererD3.sortObjects,
-        apiRendererD3.toneMapping,
-        apiRendererD3.toneMappingExposure,
-        apiRendererD3.toneMappingWhitePoint,
-        apiRendererD3.premultipliedAlpha,
-        apiRendererD3.antialias,
-        apiRendererD3.stencil,
-        apiRendererD3.preserveDrawingBuffer,
-        apiRendererD3.depth,
-        apiRendererD3.logarithmicDepthBuffer,
-        apiRendererD3.localClippingEnabled,
-        apiRendererD3.renderTarget,
-        apiRendererD3.clippingPlanes,
-        apiRendererD3.clearColor,
-        apiRendererD3.viewports,
-        apiRendererD3.alpha,
-        apiRendererD3.opacity,
-        apiRendererD3.composer,
-        apiRendererD3.effect,
-        apiRendererD3.enableComposer,
-        apiRendererD3.enableEffect
+        apiComponent,
+        apiComponent.target
     );
 
-    if (this.renderTarget instanceof R3.D3.API.RenderTarget) {
-        this.renderTarget = R3.Component.ConstructFromObject(this.renderTarget);
+    if (this.target instanceof R3.D3.API.RenderTarget) {
+        this.target = R3.Component.ConstructFromObject(this.target);
     }
 
-    this.clippingPlanes = this.clippingPlanes.reduce(
-        function(result, clippingPlane) {
+    var linkedObjects = {
+        target : R3.D3.RenderTarget
+    };
 
-            if (clippingPlane instanceof R3.API.Plane) {
-                clippingPlane = R3.Component.ConstructFromObject(clippingPlane);
-            }
-
-            result.push(clippingPlane);
-
-            return result;
-        },
-        []
-    );
-
-    this.clearColor = new R3.Color(
-        this.graphics,
-        this.clearColor,
-        this
-    );
-
-    this.viewports = this.viewports.reduce(
-        function(result, viewport) {
-
-            if (viewport instanceof R3.D3.API.Viewport) {
-                viewport = R3.Component.ConstructFromObject(viewport);
-            }
-
-            result.push(viewport);
-
-            return result;
-        },
-        []
-    );
-
-    if (this.composer instanceof R3.D3.API.Composer) {
-        this.composer = R3.Component.ConstructFromObject(this.composer);
-    }
-
-    if (this.effect instanceof R3.D3.API.Effect) {
-        this.effect = R3.Component.ConstructFromObject(this.effect);
-    }
-
-    R3.Renderer.call(
+    R3.Renderer.D3.Canvas.call(
         this,
-        this.graphics,
-        this
+        parent,
+        apiComponent,
+        linkedObjects
     );
 
 };
 
-R3.Renderer.D3.prototype = Object.create(R3.Renderer.prototype);
-R3.Renderer.D3.prototype.constructor = R3.Renderer.D3;
+R3.Renderer.D3.Canvas.Target.prototype = Object.create(R3.Renderer.D3.Canvas.prototype);
+R3.Renderer.D3.Canvas.Target.prototype.constructor = R3.Renderer.D3.Canvas.Target;
 
 /**
  * Create R3.Renderer.D3 Instance
  * @returns {*}
  */
-R3.Renderer.D3.prototype.createInstance = function() {
+R3.Renderer.D3.Canvas.Target.prototype.createInstance = function() {
 
+    if (
+        R3.Utils.UndefinedOrNull(this.target) ||
+        R3.Utils.UndefinedOrNull(this.target.instance)
+    ) {
+        throw new Error('target not ready');
+    }
+
+    /**
+     * We can't call the canvas createInstance because it will call component create instance before being able
+     * to assign the render target
+     */
     if (
         R3.Utils.UndefinedOrNull(this.canvas) ||
         R3.Utils.UndefinedOrNull(this.canvas.instance)
     ) {
-        console.warn('no canvas instance');
+        console.warn('no canvas instance or canvas not ready');
         return;
     }
 
-    this.instance = new THREE.WebGLRenderer(
-        {
-            canvas : this.canvas.instance,
-            alpha : this.alpha,
-            premultipliedAlpha : this.premultipliedAlpha,
-            antialias : this.antialias,
-            stencil : this.stencil,
-            preserveDrawingBuffer : this.preserveDrawingBuffer,
-            depth : this.depth,
-            logarithmicDepthBuffer : this.logarithmicDepthBuffer
-        }
-    );
-
-    this.instance.setPixelRatio(window.devicePixelRatio);
-
-    this.instance.autoClear = this.autoClear;
-    this.instance.autoClearColor = this.autoClearColor;
-    this.instance.autoClearDepth = this.autoClearDepth;
-    this.instance.autoClearStencil = this.autoClearStencil;
-
-    this.instance.gammaFactor = this.gammaFactor;
-    this.instance.gammaInput = this.gammaInput;
-    this.instance.gammaOutput = this.gammaOutput;
-
-    this.instance.maxMorphTargets = this.maxMorphTargets;
-    this.instance.maxMorphNormals = this.maxMorphNormals;
-
-    this.instance.physicallyCorrectLights = this.physicallyCorrectLights;
-
-    this.instance.shadowMap.enabled = this.shadowMapEnabled;
-    this.instance.shadowMap.autoUpdate = this.shadowMapAutoUpdate;
-    this.instance.shadowMap.needsUpdate = this.shadowMapNeedsUpdate;
-    this.instance.shadowMap.type = this.shadowMapType;
-    this.instance.shadowMap.renderReverseSided = this.shadowMapRenderReverseSided;
-    this.instance.shadowMap.renderSingleSided = this.shadowMapRenderSingleSided;
-
-    this.instance.sortObjects = this.sortObjects;
-
-    this.instance.toneMapping = this.toneMapping;
-    this.instance.toneMappingExposure = this.toneMappingExposure;
-    this.instance.toneMappingWhitePoint = this.toneMappingWhitePoint;
-
-    this.instance.premultipliedAlpha = this.premultipliedAlpha;
-
-    this.instance.localClippingEnabled = this.localClippingEnabled;
-
-    if (this.renderTarget) {
-        this.instance.setRenderTarget(this.renderTarget.instance);
-    }
-
-    if (this.clippingPlanes.length > 0) {
-        this.instance.clippingPlanes = this.clippingPlanes.map(
-            function(clippingPlane) {
-                return clippingPlane.instance;
-            }
-        )
-    }
-
-    this.instance.setClearColor(
-        new THREE.Color(
-            this.clearColor.r,
-            this.clearColor.g,
-            this.clearColor.b
-        ),
-        this.opacity
-    );
-
-    R3.Renderer.prototype.createInstance.call(this);
-};
-
-/**
- * Update Renderer.D3 Instance
- */
-R3.Renderer.D3.prototype.updateInstance = function(property) {
-
-    if (!property) {
-        throw new Error('no renderer property');
-    }
-
-    if (!this.instance) {
-        throw new Error('no renderer instance');
-    }
-
-    if (property === 'renderMode') {
-        console.log('render mode change');
-        return;
-    }
-
-    if (property === 'autoClear') {
-        this.instance.autoClear = this.autoClear;
-        return;
-    }
-
-    if (property === 'autoClearColor') {
-        this.instance.autoClearColor = this.autoClearColor;
-        return;
-    }
-
-    if (property === 'autoClearDepth') {
-        this.instance.autoClearDepth = this.autoClearDepth;
-        return;
-    }
-
-    if (property === 'autoClearStencil') {
-        this.instance.autoClearStencil = this.autoClearStencil;
-        return;
-    }
-
-    if (property === 'gammaFactor') {
-        this.instance.gammaFactor = this.gammaFactor;
-        return;
-    }
-
-    if (property === 'gammaInput') {
-        this.instance.gammaInput = this.gammaInput;
-        return;
-    }
-
-    if (property === 'gammaOutput') {
-        this.instance.gammaOutput = this.gammaOutput;
-        return;
-    }
-
-    if (property === 'maxMorphTargets') {
-        this.instance.maxMorphTargets = this.maxMorphTargets;
-        return;
-    }
-
-    if (property === 'maxMorphNormals') {
-        this.instance.maxMorphNormals = this.maxMorphNormals;
-        return;
-    }
-
-    if (property === 'physicallyCorrectLights') {
-        this.instance.physicallyCorrectLights = this.physicallyCorrectLights;
-        return;
-    }
-
-    if (property === 'shadowMapEnabled') {
-        this.instance.shadowMap.enabled = this.shadowMapEnabled;
-        return;
-    }
-
-    if (property === 'shadowMapAutoUpdate') {
-        this.instance.shadowMap.autoUpdate = this.shadowMapAutoUpdate;
-        return;
-    }
-
-    if (property === 'shadowMapNeedsUpdate') {
-        this.instance.shadowMap.needsUpdate = this.shadowMapNeedsUpdate;
-        return;
-    }
-
-    if (property === 'shadowMapType') {
-        this.instance.shadowMap.type = this.shadowMapType;
-        return;
-    }
-
-    if (property === 'shadowMapRenderReverseSided') {
-        this.instance.shadowMap.renderReverseSided = this.shadowMapRenderReverseSided;
-        return;
-    }
-
-    if (property === 'shadowMapRenderSingleSided') {
-        this.instance.shadowMap.renderSingleSided = this.shadowMapRenderSingleSided;
-        return;
-    }
-
-    if (property === 'sortObjects') {
-        this.instance.sortObjects = this.sortObjects;
-        return;
-    }
-
-    if (property === 'toneMapping') {
-        this.instance.toneMapping = this.toneMapping;
-        return;
-    }
-
-    if (property === 'toneMappingExposure') {
-        this.instance.toneMappingExposure = this.toneMappingExposure;
-        return;
-    }
-
-    if (property === 'toneMappingWhitePoint') {
-        this.instance.toneMappingWhitePoint = this.toneMappingWhitePoint;
-        return;
-    }
-
-    if (property === 'premultipliedAlpha') {
-        this.instance.premultipliedAlpha = this.premultipliedAlpha;
-        return;
-    }
-
-    if (property === 'premultipliedAlpha') {
-        this.instance.premultipliedAlpha = this.premultipliedAlpha;
-        return;
-    }
-
-    if (property === 'antialias') {
-        this.instance.antialias = this.antialias;
-        return;
-    }
-
-    if (property === 'stencil') {
-        this.instance.stencil = this.stencil;
-        return;
-    }
-
-    if (property === 'preserveDrawingBuffer') {
-        this.instance.preserveDrawingBuffer = this.preserveDrawingBuffer;
-        return;
-    }
-
-    if (property === 'depth') {
-        this.instance.depth = this.depth;
-        return;
-    }
-
-    if (property === 'logarithmicDepthBuffer') {
-        this.instance.logarithmicDepthBuffer = this.logarithmicDepthBuffer;
-        return;
-    }
-
-    if (property === 'localClippingEnabled') {
-        this.instance.localClippingEnabled = this.localClippingEnabled;
-        return;
-    }
-
-    if (property === 'canvas') {
-
-        if (R3.Utils.UndefinedOrNull(this.instance)) {
-            this.createInstance();
-        } else {
-            console.warn('experimental canvas change for renderer');
-            this.instance.dispose();
-            this.createInstance();
-        }
-
-        return;
-    }
-
-    if (property === 'renderTarget') {
-
-        if (
-            R3.Utils.Defined(this.instance) &&
-            R3.Utils.Defined(this.renderTarget) &&
-            R3.Utils.Defined(this.renderTarget.instance)
-        ) {
-            this.instance.setRenderTarget(this.renderTarget.instance);
-            console.log('updated render target on render instance');
-        }
-
-        return;
-    }
-
-    if (property === 'clippingPlanes') {
-        console.warn('todo: clipping planes change');
-        return;
-    }
-
-    if (
-        property === 'clearColor' ||
-        property === 'opacity'
-    ) {
-        this.instance.setClearColor(
-            new THREE.Color(
-                this.clearColor.r,
-                this.clearColor.g,
-                this.clearColor.b
-            ),
-            this.opacity
-        );
-        return;
-    }
-
-    if (property === 'viewports') {
-        console.warn('todo: viewports change');
-    }
-
-    if (property === 'alpha') {
-        this.instance.alpha = this.alpha;
-        return;
-    }
-
-    R3.Renderer.prototype.updateInstance.call(this, property);
-};
-
-/**
- * Wrapper for clear()
- */
-R3.Renderer.D3.prototype.clear = function() {
-    return this.instance.clear();
-};
-
-
-/**
- * Convenience function to set viewport
- * @param x
- * @param y
- * @param width
- * @param height
- */
-R3.Renderer.D3.prototype.setViewport = function(
-    x,
-    y,
-    width,
-    height
-) {
-    this.instance.setViewport(
-        x,
-        y,
-        width,
-        height
-    );
-};
-
-/**
- * Renders to this.renderTarget
- * @param scene
- * @param camera
- */
-R3.Renderer.D3.prototype.renderToTarget = function(scene, camera) {
-
-    this.instance.render(
-        scene.instance,
-        camera.instance,
-        this.renderTarget.instance
-    );
-
-};
-
-/**
- * Renders normally
- * @param scene
- * @param camera
- */
-R3.Renderer.D3.prototype.render = function(scene, camera) {
-    this.instance.render(
-        scene.instance,
-        camera.instance
-    )
-};
-
-
-/**
- *
- * @returns {R3.API.Renderer.D3}
- */
-R3.Renderer.D3.prototype.toApiObject = function() {
-
-    var apiRenderer = R3.Renderer.prototype.toApiObject.call(this);
-
-    var apiRendererD3 = new R3.API.Renderer.D3(
-        apiRenderer,
-        this.renderMode,
-        this.autoClear,
-        this.autoClearColor,
-        this.autoClearDepth,
-        this.autoClearStencil,
-        this.gammaFactor,
-        this.gammaInput,
-        this.gammaOutput,
-        this.maxMorphTargets,
-        this.maxMorphNormals,
-        this.physicallyCorrectLights,
-        this.shadowMapEnabled,
-        this.shadowMapAutoUpdate,
-        this.shadowMapNeedsUpdate,
-        this.shadowMapType,
-        this.shadowMapRenderReverseSided,
-        this.shadowMapRenderSingleSided,
-        this.sortObjects,
-        this.toneMapping,
-        this.toneMappingExposure,
-        this.toneMappingWhitePoint,
+    this.instance = this.graphics.Renderer3D(
+        this.canvas,
+        this.alpha,
         this.premultipliedAlpha,
         this.antialias,
         this.stencil,
         this.preserveDrawingBuffer,
         this.depth,
-        this.logarithmicDepthBuffer,
-        this.localClippingEnabled,
-        R3.Utils.IdOrNull(this.renderTarget),
-        this.clippingPlanes.map(
-            function(clippingPlane){
-                return R3.Utils.IdOrNull(clippingPlane);
-            }
-        ),
-        this.clearColor.toApiObject(),
-        this.viewports.map(
-            function(viewport){
-                return R3.Utils.IdOrNull(viewport);
-            }
-        ),
-        this.alpha,
-        this.opacity
+        this.logarithmicDepthBuffer
     );
 
-    return apiRendererD3;
+    this.instance.setRenderTarget(this.target.instance);
+
+    /**
+     * So we skip the canvas createInstance but call the rest of the parent class createInstances
+     */
+    R3.Renderer.D3.prototype.createInstance.call(this);
+
 };
+
+/**
+ * Update Renderer.D3 Instance
+ */
+R3.Renderer.D3.Canvas.Target.prototype.updateInstance = function(property) {
+
+    if (property === 'target') {
+
+        console.warn('todo also check for target being set to null or unassigned');
+
+        if (
+            R3.Utils.Defined(this.instance) &&
+            R3.Utils.Defined(this.target) &&
+            R3.Utils.Defined(this.target.instance)
+        ) {
+            this.instance.setRenderTarget(this.target.instance);
+
+            /**
+             * The size probably changed
+             */
+            R3.Event.Emit(
+                R3.Event.RENDERER_SIZE_CHANGE,
+                this
+            )
+        }
+
+        return;
+    }
+
+    R3.Renderer.D3.Canvas.prototype.updateInstance.call(this, property);
+};
+
+/**
+ * Return the size of the target instead of the canvas
+ * @returns {{width: *, height: *}}
+ */
+R3.Renderer.D3.Canvas.Target.prototype.getSize = function() {
+    return R3.API.Renderer.D3.Canvas.Target.prototype.getSize.call(this);
+};

src/r3-renderer-d3-canvas.js

@@ -1,533 +1,107 @@
 /**
  * R3.Renderer.D3.Canvas
- * @param graphics R3.Runtime.Graphics
- * @param apiRendererD3 R3.API.Renderer.D3
+ * @param parent
+ * @param apiComponent
+ * @param linkedObjects
  * @constructor
  */
 R3.Renderer.D3.Canvas = function(
-    graphics,
-    apiRendererD3
+    parent,
+    apiComponent,
+    linkedObjects
 ) {
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
 
-    if (R3.Utils.UndefinedOrNull(apiRendererD3)) {
-        apiRendererD3 = {
-            rendererType : R3.API.Renderer.RENDERER_TYPE_3D
-        };
+    if (R3.Utils.UndefinedOrNull(linkedObjects)) {
+
+        linkedObjects = {};
+
+        __RUNTIME_COMPONENT_MACRO__;
+
+        R3.API.Renderer.D3.Canvas.call(
+            this,
+            apiComponent,
+            apiComponent.canvas
+        );
     }
-
-    R3.API.Renderer.D3.call(
+    
+    if (this.canvas instanceof R3.API.Canvas) {
+        this.canvas = R3.Component.ConstructFromObject(this.canvas);
+    }
+    
+    linkedObjects.canvas = R3.Canvas;
+    
+    R3.Component.call(
         this,
-        apiRendererD3,
-        apiRendererD3.renderMode,
-        apiRendererD3.autoClear,
-        apiRendererD3.autoClearColor,
-        apiRendererD3.autoClearDepth,
-        apiRendererD3.autoClearStencil,
-        apiRendererD3.gammaFactor,
-        apiRendererD3.gammaInput,
-        apiRendererD3.gammaOutput,
-        apiRendererD3.maxMorphTargets,
-        apiRendererD3.maxMorphNormals,
-        apiRendererD3.physicallyCorrectLights,
-        apiRendererD3.shadowMapEnabled,
-        apiRendererD3.shadowMapAutoUpdate,
-        apiRendererD3.shadowMapNeedsUpdate,
-        apiRendererD3.shadowMapType,
-        apiRendererD3.shadowMapRenderReverseSided,
-        apiRendererD3.shadowMapRenderSingleSided,
-        apiRendererD3.sortObjects,
-        apiRendererD3.toneMapping,
-        apiRendererD3.toneMappingExposure,
-        apiRendererD3.toneMappingWhitePoint,
-        apiRendererD3.premultipliedAlpha,
-        apiRendererD3.antialias,
-        apiRendererD3.stencil,
-        apiRendererD3.preserveDrawingBuffer,
-        apiRendererD3.depth,
-        apiRendererD3.logarithmicDepthBuffer,
-        apiRendererD3.localClippingEnabled,
-        apiRendererD3.renderTarget,
-        apiRendererD3.clippingPlanes,
-        apiRendererD3.clearColor,
-        apiRendererD3.viewports,
-        apiRendererD3.alpha,
-        apiRendererD3.opacity,
-        apiRendererD3.composer,
-        apiRendererD3.effect,
-        apiRendererD3.enableComposer,
-        apiRendererD3.enableEffect
-    );
-
-    if (this.renderTarget instanceof R3.D3.API.RenderTarget) {
-        this.renderTarget = R3.Component.ConstructFromObject(this.renderTarget);
-    }
-
-    this.clippingPlanes = this.clippingPlanes.reduce(
-        function(result, clippingPlane) {
-
-            if (clippingPlane instanceof R3.API.Plane) {
-                clippingPlane = R3.Component.ConstructFromObject(clippingPlane);
-            }
-
-            result.push(clippingPlane);
-
-            return result;
-        },
-        []
-    );
-
-    this.clearColor = new R3.Color(
-        this.graphics,
-        this.clearColor,
-        this
-    );
-
-    this.viewports = this.viewports.reduce(
-        function(result, viewport) {
-
-            if (viewport instanceof R3.D3.API.Viewport) {
-                viewport = R3.Component.ConstructFromObject(viewport);
-            }
-
-            result.push(viewport);
-
-            return result;
-        },
-        []
-    );
-
-    if (this.composer instanceof R3.D3.API.Composer) {
-        this.composer = R3.Component.ConstructFromObject(this.composer);
-    }
-
-    if (this.effect instanceof R3.D3.API.Effect) {
-        this.effect = R3.Component.ConstructFromObject(this.effect);
-    }
-
-    R3.Renderer.call(
-        this,
-        this.graphics,
-        this
+        parent,
+        linkedObjects
     );
 
 };
 
-R3.Renderer.D3.prototype = Object.create(R3.Renderer.prototype);
-R3.Renderer.D3.prototype.constructor = R3.Renderer.D3;
+R3.Renderer.D3.Canvas.prototype = Object.create(R3.Renderer.D3.prototype);
+R3.Renderer.D3.Canvas.prototype.constructor = R3.Renderer.D3.Canvas;
 
 /**
  * Create R3.Renderer.D3 Instance
  * @returns {*}
  */
-R3.Renderer.D3.prototype.createInstance = function() {
+R3.Renderer.D3.Canvas.prototype.createInstance = function() {
 
     if (
         R3.Utils.UndefinedOrNull(this.canvas) ||
         R3.Utils.UndefinedOrNull(this.canvas.instance)
     ) {
-        console.warn('no canvas instance');
+        console.warn('no canvas instance or canvas not ready');
         return;
     }
 
-    this.instance = new THREE.WebGLRenderer(
-        {
-            canvas : this.canvas.instance,
-            alpha : this.alpha,
-            premultipliedAlpha : this.premultipliedAlpha,
-            antialias : this.antialias,
-            stencil : this.stencil,
-            preserveDrawingBuffer : this.preserveDrawingBuffer,
-            depth : this.depth,
-            logarithmicDepthBuffer : this.logarithmicDepthBuffer
-        }
+    this.instance = this.graphics.Renderer3D(
+		this.canvas,
+		this.alpha,
+		this.premultipliedAlpha,
+		this.antialias,
+		this.stencil,
+		this.preserveDrawingBuffer,
+		this.depth,
+		this.logarithmicDepthBuffer
     );
 
-    this.instance.setPixelRatio(window.devicePixelRatio);
-
-    this.instance.autoClear = this.autoClear;
-    this.instance.autoClearColor = this.autoClearColor;
-    this.instance.autoClearDepth = this.autoClearDepth;
-    this.instance.autoClearStencil = this.autoClearStencil;
-
-    this.instance.gammaFactor = this.gammaFactor;
-    this.instance.gammaInput = this.gammaInput;
-    this.instance.gammaOutput = this.gammaOutput;
-
-    this.instance.maxMorphTargets = this.maxMorphTargets;
-    this.instance.maxMorphNormals = this.maxMorphNormals;
-
-    this.instance.physicallyCorrectLights = this.physicallyCorrectLights;
-
-    this.instance.shadowMap.enabled = this.shadowMapEnabled;
-    this.instance.shadowMap.autoUpdate = this.shadowMapAutoUpdate;
-    this.instance.shadowMap.needsUpdate = this.shadowMapNeedsUpdate;
-    this.instance.shadowMap.type = this.shadowMapType;
-    this.instance.shadowMap.renderReverseSided = this.shadowMapRenderReverseSided;
-    this.instance.shadowMap.renderSingleSided = this.shadowMapRenderSingleSided;
-
-    this.instance.sortObjects = this.sortObjects;
-
-    this.instance.toneMapping = this.toneMapping;
-    this.instance.toneMappingExposure = this.toneMappingExposure;
-    this.instance.toneMappingWhitePoint = this.toneMappingWhitePoint;
-
-    this.instance.premultipliedAlpha = this.premultipliedAlpha;
-
-    this.instance.localClippingEnabled = this.localClippingEnabled;
-
-    if (this.renderTarget) {
-        this.instance.setRenderTarget(this.renderTarget.instance);
-    }
-
-    if (this.clippingPlanes.length > 0) {
-        this.instance.clippingPlanes = this.clippingPlanes.map(
-            function(clippingPlane) {
-                return clippingPlane.instance;
-            }
-        )
-    }
-
-    this.instance.setClearColor(
-        new THREE.Color(
-            this.clearColor.r,
-            this.clearColor.g,
-            this.clearColor.b
-        ),
-        this.opacity
-    );
-
-    R3.Renderer.prototype.createInstance.call(this);
+    R3.Renderer.D3.prototype.createInstance.call(this);
 };
 
 /**
  * Update Renderer.D3 Instance
  */
-R3.Renderer.D3.prototype.updateInstance = function(property) {
-
-    if (!property) {
-        throw new Error('no renderer property');
-    }
-
-    if (!this.instance) {
-        throw new Error('no renderer instance');
-    }
-
-    if (property === 'renderMode') {
-        console.log('render mode change');
-        return;
-    }
-
-    if (property === 'autoClear') {
-        this.instance.autoClear = this.autoClear;
-        return;
-    }
-
-    if (property === 'autoClearColor') {
-        this.instance.autoClearColor = this.autoClearColor;
-        return;
-    }
-
-    if (property === 'autoClearDepth') {
-        this.instance.autoClearDepth = this.autoClearDepth;
-        return;
-    }
-
-    if (property === 'autoClearStencil') {
-        this.instance.autoClearStencil = this.autoClearStencil;
-        return;
-    }
-
-    if (property === 'gammaFactor') {
-        this.instance.gammaFactor = this.gammaFactor;
-        return;
-    }
-
-    if (property === 'gammaInput') {
-        this.instance.gammaInput = this.gammaInput;
-        return;
-    }
-
-    if (property === 'gammaOutput') {
-        this.instance.gammaOutput = this.gammaOutput;
-        return;
-    }
-
-    if (property === 'maxMorphTargets') {
-        this.instance.maxMorphTargets = this.maxMorphTargets;
-        return;
-    }
-
-    if (property === 'maxMorphNormals') {
-        this.instance.maxMorphNormals = this.maxMorphNormals;
-        return;
-    }
-
-    if (property === 'physicallyCorrectLights') {
-        this.instance.physicallyCorrectLights = this.physicallyCorrectLights;
-        return;
-    }
-
-    if (property === 'shadowMapEnabled') {
-        this.instance.shadowMap.enabled = this.shadowMapEnabled;
-        return;
-    }
-
-    if (property === 'shadowMapAutoUpdate') {
-        this.instance.shadowMap.autoUpdate = this.shadowMapAutoUpdate;
-        return;
-    }
-
-    if (property === 'shadowMapNeedsUpdate') {
-        this.instance.shadowMap.needsUpdate = this.shadowMapNeedsUpdate;
-        return;
-    }
-
-    if (property === 'shadowMapType') {
-        this.instance.shadowMap.type = this.shadowMapType;
-        return;
-    }
-
-    if (property === 'shadowMapRenderReverseSided') {
-        this.instance.shadowMap.renderReverseSided = this.shadowMapRenderReverseSided;
-        return;
-    }
-
-    if (property === 'shadowMapRenderSingleSided') {
-        this.instance.shadowMap.renderSingleSided = this.shadowMapRenderSingleSided;
-        return;
-    }
-
-    if (property === 'sortObjects') {
-        this.instance.sortObjects = this.sortObjects;
-        return;
-    }
-
-    if (property === 'toneMapping') {
-        this.instance.toneMapping = this.toneMapping;
-        return;
-    }
-
-    if (property === 'toneMappingExposure') {
-        this.instance.toneMappingExposure = this.toneMappingExposure;
-        return;
-    }
-
-    if (property === 'toneMappingWhitePoint') {
-        this.instance.toneMappingWhitePoint = this.toneMappingWhitePoint;
-        return;
-    }
-
-    if (property === 'premultipliedAlpha') {
-        this.instance.premultipliedAlpha = this.premultipliedAlpha;
-        return;
-    }
-
-    if (property === 'premultipliedAlpha') {
-        this.instance.premultipliedAlpha = this.premultipliedAlpha;
-        return;
-    }
-
-    if (property === 'antialias') {
-        this.instance.antialias = this.antialias;
-        return;
-    }
-
-    if (property === 'stencil') {
-        this.instance.stencil = this.stencil;
-        return;
-    }
-
-    if (property === 'preserveDrawingBuffer') {
-        this.instance.preserveDrawingBuffer = this.preserveDrawingBuffer;
-        return;
-    }
-
-    if (property === 'depth') {
-        this.instance.depth = this.depth;
-        return;
-    }
-
-    if (property === 'logarithmicDepthBuffer') {
-        this.instance.logarithmicDepthBuffer = this.logarithmicDepthBuffer;
-        return;
-    }
-
-    if (property === 'localClippingEnabled') {
-        this.instance.localClippingEnabled = this.localClippingEnabled;
-        return;
-    }
+R3.Renderer.D3.Canvas.prototype.updateInstance = function(property) {
 
     if (property === 'canvas') {
 
-        if (R3.Utils.UndefinedOrNull(this.instance)) {
-            this.createInstance();
-        } else {
-            console.warn('experimental canvas change for renderer');
+        if (this.canvas && this.canvas.instance) {
             this.instance.dispose();
             this.createInstance();
+
+            R3.Event.Emit(
+                R3.Event.RENDERER_SIZE_CHANGE,
+                this
+            )
+
+        } else {
+            /**
+             * The canvas object was unassigned
+             */
+            console.warn('The canvas object was unassigned - this will break something - do not save now')
         }
 
         return;
     }
 
-    if (property === 'renderTarget') {
-
-        if (
-            R3.Utils.Defined(this.instance) &&
-            R3.Utils.Defined(this.renderTarget) &&
-            R3.Utils.Defined(this.renderTarget.instance)
-        ) {
-            this.instance.setRenderTarget(this.renderTarget.instance);
-            console.log('updated render target on render instance');
-        }
-
-        return;
-    }
-
-    if (property === 'clippingPlanes') {
-        console.warn('todo: clipping planes change');
-        return;
-    }
-
-    if (
-        property === 'clearColor' ||
-        property === 'opacity'
-    ) {
-        this.instance.setClearColor(
-            new THREE.Color(
-                this.clearColor.r,
-                this.clearColor.g,
-                this.clearColor.b
-            ),
-            this.opacity
-        );
-        return;
-    }
-
-    if (property === 'viewports') {
-        console.warn('todo: viewports change');
-    }
-
-    if (property === 'alpha') {
-        this.instance.alpha = this.alpha;
-        return;
-    }
-
-    R3.Renderer.prototype.updateInstance.call(this, property);
+    R3.Renderer.D3.prototype.updateInstance.call(this, property);
 };
 
 /**
- * Wrapper for clear()
+ * Return the size of the canvas
+ * @returns {{width: *, height: *}}
  */
-R3.Renderer.D3.prototype.clear = function() {
-    return this.instance.clear();
-};
-
-
-/**
- * Convenience function to set viewport
- * @param x
- * @param y
- * @param width
- * @param height
- */
-R3.Renderer.D3.prototype.setViewport = function(
-    x,
-    y,
-    width,
-    height
-) {
-    this.instance.setViewport(
-        x,
-        y,
-        width,
-        height
-    );
-};
-
-/**
- * Renders to this.renderTarget
- * @param scene
- * @param camera
- */
-R3.Renderer.D3.prototype.renderToTarget = function(scene, camera) {
-
-    this.instance.render(
-        scene.instance,
-        camera.instance,
-        this.renderTarget.instance
-    );
-
-};
-
-/**
- * Renders normally
- * @param scene
- * @param camera
- */
-R3.Renderer.D3.prototype.render = function(scene, camera) {
-    this.instance.render(
-        scene.instance,
-        camera.instance
-    )
-};
-
-
-/**
- *
- * @returns {R3.API.Renderer.D3}
- */
-R3.Renderer.D3.prototype.toApiObject = function() {
-
-    var apiRenderer = R3.Renderer.prototype.toApiObject.call(this);
-
-    var apiRendererD3 = new R3.API.Renderer.D3(
-        apiRenderer,
-        this.renderMode,
-        this.autoClear,
-        this.autoClearColor,
-        this.autoClearDepth,
-        this.autoClearStencil,
-        this.gammaFactor,
-        this.gammaInput,
-        this.gammaOutput,
-        this.maxMorphTargets,
-        this.maxMorphNormals,
-        this.physicallyCorrectLights,
-        this.shadowMapEnabled,
-        this.shadowMapAutoUpdate,
-        this.shadowMapNeedsUpdate,
-        this.shadowMapType,
-        this.shadowMapRenderReverseSided,
-        this.shadowMapRenderSingleSided,
-        this.sortObjects,
-        this.toneMapping,
-        this.toneMappingExposure,
-        this.toneMappingWhitePoint,
-        this.premultipliedAlpha,
-        this.antialias,
-        this.stencil,
-        this.preserveDrawingBuffer,
-        this.depth,
-        this.logarithmicDepthBuffer,
-        this.localClippingEnabled,
-        R3.Utils.IdOrNull(this.renderTarget),
-        this.clippingPlanes.map(
-            function(clippingPlane){
-                return R3.Utils.IdOrNull(clippingPlane);
-            }
-        ),
-        this.clearColor.toApiObject(),
-        this.viewports.map(
-            function(viewport){
-                return R3.Utils.IdOrNull(viewport);
-            }
-        ),
-        this.alpha,
-        this.opacity
-    );
-
-    return apiRendererD3;
-};
+R3.Renderer.D3.Canvas.prototype.getSize = function() {
+    return R3.API.Renderer.D3.Canvas.prototype.getSize.call(this);
+};

src/r3-renderer-d3.js

@@ -1,67 +1,16 @@
 /**
  * R3.Renderer.D3
- * @param graphics R3.Runtime.Graphics
- * @param apiRendererD3 R3.API.Renderer.D3
+ * @param parent
+ * @param linkedObjects
  * @constructor
  */
 R3.Renderer.D3 = function(
-    graphics,
-    apiRendererD3
+    parent,
+    linkedObjects
 ) {
-    this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
 
-    if (R3.Utils.UndefinedOrNull(apiRendererD3)) {
-        apiRendererD3 = {
-            rendererType : R3.API.Renderer.RENDERER_TYPE_3D
-        };
-    }
-
-    R3.API.Renderer.D3.call(
-        this,
-        apiRendererD3,
-        apiRendererD3.renderMode,
-        apiRendererD3.autoClear,
-        apiRendererD3.autoClearColor,
-        apiRendererD3.autoClearDepth,
-        apiRendererD3.autoClearStencil,
-        apiRendererD3.gammaFactor,
-        apiRendererD3.gammaInput,
-        apiRendererD3.gammaOutput,
-        apiRendererD3.maxMorphTargets,
-        apiRendererD3.maxMorphNormals,
-        apiRendererD3.physicallyCorrectLights,
-        apiRendererD3.shadowMapEnabled,
-        apiRendererD3.shadowMapAutoUpdate,
-        apiRendererD3.shadowMapNeedsUpdate,
-        apiRendererD3.shadowMapType,
-        apiRendererD3.shadowMapRenderReverseSided,
-        apiRendererD3.shadowMapRenderSingleSided,
-        apiRendererD3.sortObjects,
-        apiRendererD3.toneMapping,
-        apiRendererD3.toneMappingExposure,
-        apiRendererD3.toneMappingWhitePoint,
-        apiRendererD3.premultipliedAlpha,
-        apiRendererD3.antialias,
-        apiRendererD3.stencil,
-        apiRendererD3.preserveDrawingBuffer,
-        apiRendererD3.depth,
-        apiRendererD3.logarithmicDepthBuffer,
-        apiRendererD3.localClippingEnabled,
-        apiRendererD3.renderTarget,
-        apiRendererD3.clippingPlanes,
-        apiRendererD3.clearColor,
-        apiRendererD3.viewports,
-        apiRendererD3.alpha,
-        apiRendererD3.opacity,
-        apiRendererD3.composer,
-        apiRendererD3.effect,
-        apiRendererD3.enableComposer,
-        apiRendererD3.enableEffect
-    );
-
-    if (this.renderTarget instanceof R3.D3.API.RenderTarget) {
-        this.renderTarget = R3.Component.ConstructFromObject(this.renderTarget);
+    if (R3.Utils.UndefinedOrNull(linkedObjects)) {
+        linkedObjects = {}
     }
 
     this.clippingPlanes = this.clippingPlanes.reduce(
@@ -72,18 +21,11 @@ R3.Renderer.D3 = function(
             }
 
             result.push(clippingPlane);
-
             return result;
         },
         []
     );
 
-    this.clearColor = new R3.Color(
-        this.graphics,
-        this.clearColor,
-        this
-    );
-
     this.viewports = this.viewports.reduce(
         function(result, viewport) {
 
@@ -92,24 +34,23 @@ R3.Renderer.D3 = function(
             }
 
             result.push(viewport);
-
             return result;
         },
         []
     );
 
-    if (this.composer instanceof R3.D3.API.Composer) {
-        this.composer = R3.Component.ConstructFromObject(this.composer);
-    }
+    linkedObjects.clippingPlanes    = [R3.Plane];
+    linkedObjects.viewports         = [R3.D3.Viewport];
 
-    if (this.effect instanceof R3.D3.API.Effect) {
-        this.effect = R3.Component.ConstructFromObject(this.effect);
-    }
+    this.clearColor = new R3.Color(
+        parent,
+        this.clearColor
+    );
 
     R3.Renderer.call(
         this,
-        this.graphics,
-        this
+        parent,
+        linkedObjects
     );
 
 };
@@ -123,82 +64,39 @@ R3.Renderer.D3.prototype.constructor = R3.Renderer.D3;
  */
 R3.Renderer.D3.prototype.createInstance = function() {
 
-    if (
-        R3.Utils.UndefinedOrNull(this.canvas) ||
-        R3.Utils.UndefinedOrNull(this.canvas.instance)
-    ) {
-        console.warn('no canvas instance');
-        return;
+    if (!this.instance) {
+        throw new Error('R3.Renderer.D3 createInstance called out of order');
     }
 
-    this.instance = new THREE.WebGLRenderer(
-        {
-            canvas : this.canvas.instance,
-            alpha : this.alpha,
-            premultipliedAlpha : this.premultipliedAlpha,
-            antialias : this.antialias,
-            stencil : this.stencil,
-            preserveDrawingBuffer : this.preserveDrawingBuffer,
-            depth : this.depth,
-            logarithmicDepthBuffer : this.logarithmicDepthBuffer
-        }
-    );
+	this.updateInstance('autoClear');
+	this.updateInstance('autoClearColor');
+	this.updateInstance('autoClearDepth');
+	this.updateInstance('autoClearStencil');
+	this.updateInstance('gammaFactor');
+	this.updateInstance('gammaInput');
+	this.updateInstance('gammaOutput');
+	this.updateInstance('maxMorphTargets');
+	this.updateInstance('maxMorphNormals');
+	this.updateInstance('physicallyCorrectLights');
+	this.updateInstance('shadowMapEnabled');
+	this.updateInstance('shadowMapAutoUpdate');
+	this.updateInstance('shadowMapNeedsUpdate');
+	this.updateInstance('shadowMapType');
+	this.updateInstance('shadowMapRenderReverseSided');
+	this.updateInstance('shadowMapRenderSingleSided');
+	this.updateInstance('sortObjects');
+	this.updateInstance('toneMapping');
+	this.updateInstance('toneMappingExposure');
+	this.updateInstance('toneMappingWhitePoint');
+	this.updateInstance('localClippingEnabled');
+	this.updateInstance('clippingPlanes');
+	this.updateInstance('clearColor');
+	this.updateInstance('viewports');
+	this.updateInstance('opacity');
+	this.updateInstance('pixelRatio');
 
-    this.instance.setPixelRatio(window.devicePixelRatio);
+    R3.Component.prototype.createInstance.call(this);
 
-    this.instance.autoClear = this.autoClear;
-    this.instance.autoClearColor = this.autoClearColor;
-    this.instance.autoClearDepth = this.autoClearDepth;
-    this.instance.autoClearStencil = this.autoClearStencil;
-
-    this.instance.gammaFactor = this.gammaFactor;
-    this.instance.gammaInput = this.gammaInput;
-    this.instance.gammaOutput = this.gammaOutput;
-
-    this.instance.maxMorphTargets = this.maxMorphTargets;
-    this.instance.maxMorphNormals = this.maxMorphNormals;
-
-    this.instance.physicallyCorrectLights = this.physicallyCorrectLights;
-
-    this.instance.shadowMap.enabled = this.shadowMapEnabled;
-    this.instance.shadowMap.autoUpdate = this.shadowMapAutoUpdate;
-    this.instance.shadowMap.needsUpdate = this.shadowMapNeedsUpdate;
-    this.instance.shadowMap.type = this.shadowMapType;
-    this.instance.shadowMap.renderReverseSided = this.shadowMapRenderReverseSided;
-    this.instance.shadowMap.renderSingleSided = this.shadowMapRenderSingleSided;
-
-    this.instance.sortObjects = this.sortObjects;
-
-    this.instance.toneMapping = this.toneMapping;
-    this.instance.toneMappingExposure = this.toneMappingExposure;
-    this.instance.toneMappingWhitePoint = this.toneMappingWhitePoint;
-
-    this.instance.premultipliedAlpha = this.premultipliedAlpha;
-
-    this.instance.localClippingEnabled = this.localClippingEnabled;
-
-    if (this.renderTarget) {
-        this.instance.setRenderTarget(this.renderTarget.instance);
-    }
-
-    if (this.clippingPlanes.length > 0) {
-        this.instance.clippingPlanes = this.clippingPlanes.map(
-            function(clippingPlane) {
-                return clippingPlane.instance;
-            }
-        )
-    }
-
-    this.instance.setClearColor(
-        new THREE.Color(
-            this.clearColor.r,
-            this.clearColor.g,
-            this.clearColor.b
-        ),
-        this.opacity
-    );
-
-    R3.Renderer.prototype.createInstance.call(this);
 };
 
 /**
@@ -214,11 +112,6 @@ R3.Renderer.D3.prototype.updateInstance = function(property) {
         throw new Error('no renderer instance');
     }
 
-    if (property === 'renderMode') {
-        console.log('render mode change');
-        return;
-    }
-
     if (property === 'autoClear') {
         this.instance.autoClear = this.autoClear;
         return;
@@ -324,11 +217,6 @@ R3.Renderer.D3.prototype.updateInstance = function(property) {
         return;
     }
 
-    if (property === 'premultipliedAlpha') {
-        this.instance.premultipliedAlpha = this.premultipliedAlpha;
-        return;
-    }
-
     if (property === 'antialias') {
         this.instance.antialias = this.antialias;
         return;
@@ -359,33 +247,6 @@ R3.Renderer.D3.prototype.updateInstance = function(property) {
         return;
     }
 
-    if (property === 'canvas') {
-
-        if (R3.Utils.UndefinedOrNull(this.instance)) {
-            this.createInstance();
-        } else {
-            console.warn('experimental canvas change for renderer');
-            this.instance.dispose();
-            this.createInstance();
-        }
-
-        return;
-    }
-
-    if (property === 'renderTarget') {
-
-        if (
-            R3.Utils.Defined(this.instance) &&
-            R3.Utils.Defined(this.renderTarget) &&
-            R3.Utils.Defined(this.renderTarget.instance)
-        ) {
-            this.instance.setRenderTarget(this.renderTarget.instance);
-            console.log('updated render target on render instance');
-        }
-
-        return;
-    }
-
     if (property === 'clippingPlanes') {
         console.warn('todo: clipping planes change');
         return;
@@ -415,119 +276,11 @@ R3.Renderer.D3.prototype.updateInstance = function(property) {
         return;
     }
 
+    if (property === 'pixelRatio') {
+        this.instance.setPixelRatio(this.pixelRatio);
+        return;
+    }
+
     R3.Renderer.prototype.updateInstance.call(this, property);
 };
 
-/**
- * Wrapper for clear()
- */
-R3.Renderer.D3.prototype.clear = function() {
-    return this.instance.clear();
-};
-
-
-/**
- * Convenience function to set viewport
- * @param x
- * @param y
- * @param width
- * @param height
- */
-R3.Renderer.D3.prototype.setViewport = function(
-    x,
-    y,
-    width,
-    height
-) {
-    this.instance.setViewport(
-        x,
-        y,
-        width,
-        height
-    );
-};
-
-/**
- * Renders to this.renderTarget
- * @param scene
- * @param camera
- */
-R3.Renderer.D3.prototype.renderToTarget = function(scene, camera) {
-
-    this.instance.render(
-        scene.instance,
-        camera.instance,
-        this.renderTarget.instance
-    );
-
-};
-
-/**
- * Renders normally
- * @param scene
- * @param camera
- */
-R3.Renderer.D3.prototype.render = function(scene, camera) {
-    this.instance.render(
-        scene.instance,
-        camera.instance
-    )
-};
-
-
-/**
- *
- * @returns {R3.API.Renderer.D3}
- */
-R3.Renderer.D3.prototype.toApiObject = function() {
-
-    var apiRenderer = R3.Renderer.prototype.toApiObject.call(this);
-
-    var apiRendererD3 = new R3.API.Renderer.D3(
-        apiRenderer,
-        this.renderMode,
-        this.autoClear,
-        this.autoClearColor,
-        this.autoClearDepth,
-        this.autoClearStencil,
-        this.gammaFactor,
-        this.gammaInput,
-        this.gammaOutput,
-        this.maxMorphTargets,
-        this.maxMorphNormals,
-        this.physicallyCorrectLights,
-        this.shadowMapEnabled,
-        this.shadowMapAutoUpdate,
-        this.shadowMapNeedsUpdate,
-        this.shadowMapType,
-        this.shadowMapRenderReverseSided,
-        this.shadowMapRenderSingleSided,
-        this.sortObjects,
-        this.toneMapping,
-        this.toneMappingExposure,
-        this.toneMappingWhitePoint,
-        this.premultipliedAlpha,
-        this.antialias,
-        this.stencil,
-        this.preserveDrawingBuffer,
-        this.depth,
-        this.logarithmicDepthBuffer,
-        this.localClippingEnabled,
-        R3.Utils.IdOrNull(this.renderTarget),
-        this.clippingPlanes.map(
-            function(clippingPlane){
-                return R3.Utils.IdOrNull(clippingPlane);
-            }
-        ),
-        this.clearColor.toApiObject(),
-        this.viewports.map(
-            function(viewport){
-                return R3.Utils.IdOrNull(viewport);
-            }
-        ),
-        this.alpha,
-        this.opacity
-    );
-
-    return apiRendererD3;
-};

src/r3-runtime-graphics-three.js

@@ -375,6 +375,70 @@ R3.Runtime.Graphics.Three.prototype.CubeCamera = function(near, far, cubeResolut
 
 };
 
+R3.Runtime.Graphics.Three.prototype.OrthographicCamera = function(
+    left,
+    right,
+    top,
+    bottom,
+    near,
+    far
+) {
+    return new THREE.OrthographicCamera(
+        left,
+        right,
+        top,
+        bottom,
+        near,
+        far
+    );
+};
+
+R3.Runtime.Graphics.Three.prototype.PerspectiveCamera = function(
+    fov,
+    aspect,
+    near,
+    far
+) {
+    return new THREE.PerspectiveCamera(
+        this.fov,
+        this.aspect,
+        this.near,
+        this.far
+    );
+};
+
+R3.Runtime.Graphics.Three.prototype.StereoCamera = function(
+    fov,
+    aspect,
+    near,
+    far,
+    stereoMode
+) {
+
+    console.warn('TODO: implement stereo camera again');
+
+    var camera = new THREE.PerspectiveCamera(
+        fov,
+        aspect,
+        near,
+        far
+    );
+
+    var instance = new THREE.StereoCamera();
+
+    for (var property in instance) {
+        if (
+            instance.hasOwnProperty(property) ||
+            typeof instance[property] === 'function'
+        ) {
+            camera[property] = instance[property];
+        }
+    }
+
+    return camera;
+};
+
+
 R3.Runtime.Graphics.Three.prototype.RenderTarget = function(
     width,
     height,
@@ -405,4 +469,92 @@ R3.Runtime.Graphics.Three.prototype.RenderTarget = function(
             stencilBuffer   : stencilBuffer,
         }
     );
+};
+
+R3.Runtime.Graphics.Three.prototype.Composer = function(
+    renderer,
+    renderTarget,
+    passes,
+    size
+) {
+    if (!renderer.instance) {
+        throw new Error('no renderer instance');
+    }
+
+    var renderTargetInstance = undefined;
+
+    if (renderTarget && renderTarget.instance) {
+        renderTargetInstance;
+    }
+
+    var composer = new THREE.EffectComposer(
+        renderer.instance,
+        renderTargetInstance
+    );
+
+    passes.map(
+        function(pass) {
+
+            if (!pass.instance) {
+                throw new Error('Pass instance not set');
+            }
+
+            composer.addPass(pass.instance);
+        }
+    );
+
+    composer.setSize(
+        size.width,
+        size.height
+    );
+};
+
+R3.Runtime.Graphics.Three.prototype.Renderer3D = function(
+    canvas,
+    alpha,
+    premultipliedAlpha,
+    antialias,
+    stencil,
+    preserveDrawingBuffer,
+    depth,
+    logarithmicDepthBuffer
+) {
+
+    return new THREE.WebGLRenderer(
+        {
+            canvas                  : canvas.instance,
+            alpha                   : alpha,
+            premultipliedAlpha      : premultipliedAlpha,
+            antialias               : antialias,
+            stencil                 : stencil,
+            preserveDrawingBuffer   : preserveDrawingBuffer,
+            depth                   : depth,
+            logarithmicDepthBuffer  : logarithmicDepthBuffer
+        }
+    );
+
+};
+
+R3.Runtime.Graphics.Three.prototype.AnaglyphEffect = function(
+    renderer
+) {
+    return new THREE.AnaglyphEffect(
+        renderer.instance
+    );
+};
+
+R3.Runtime.Graphics.Three.prototype.ParallaxEffect = function(
+    renderer
+) {
+    return new THREE.ParallaxBarrierEffect(
+        renderer.instance
+    );
+};
+
+R3.Runtime.Graphics.Three.prototype.StereoEffect = function(
+    renderer
+) {
+    new THREE.StereoEffect(
+        renderer.instance
+    );
 };

src/r3-runtime-graphics.js

@@ -78,15 +78,45 @@ R3.Runtime.Graphics.prototype.Audio = function(
     volume,
     cameraIndex
 ) {
-    console.warn('override Shape in child class');
+    console.warn('override Audio in child class');
 };
 
 R3.Runtime.Graphics.prototype.Bone = function() {
-    console.warn('override Shape in child class');
+    console.warn('override Bone in child class');
 };
 
 R3.Runtime.Graphics.prototype.CubeCamera = function(near, far, cubeResolution) {
-    console.warn('override Shape in child class');
+    console.warn('override CubeCamera in child class');
+};
+
+R3.Runtime.Graphics.prototype.OrthographicCamera = function(
+    left,
+    right,
+    top,
+    bottom,
+    near,
+    far
+) {
+    console.warn('override OrthographicCamera in child class');
+};
+
+R3.Runtime.Graphics.prototype.PerspectiveCamera = function(
+    fov,
+    aspect,
+    near,
+    far
+) {
+    console.warn('override PerspectiveCamera in child class');
+};
+
+R3.Runtime.Graphics.prototype.StereoCamera = function(
+    fov,
+    aspect,
+    near,
+    far,
+    stereoMode
+) {
+    console.warn('override StereoCamera in child class');
 };
 
 R3.Runtime.Graphics.prototype.RenderTarget = function(
@@ -103,5 +133,45 @@ R3.Runtime.Graphics.prototype.RenderTarget = function(
     depthBuffer,
     stencilBuffer
 ) {
-    console.warn('override Shape in child class');
+    console.warn('override RenderTarget in child class');
 };
+
+R3.Runtime.Graphics.prototype.Composer = function(
+    renderer,
+    renderTarget,
+    passes,
+    size
+) {
+    console.warn('override Composer in child class');
+};
+
+R3.Runtime.Graphics.prototype.Renderer3D = function(
+    canvas,
+    alpha,
+    premultipliedAlpha,
+    antialias,
+    stencil,
+    preserveDrawingBuffer,
+    depth,
+    logarithmicDepthBuffer
+) {
+    console.warn('override Renderer3D in child class');
+};
+
+R3.Runtime.Graphics.prototype.AnaglyphEffect = function(
+    renderer
+) {
+    console.warn('override AnaglyphEffect in child class');
+};
+
+R3.Runtime.Graphics.prototype.ParallaxEffect = function(
+    renderer
+) {
+    console.warn('override ParallaxEffect in child class');
+};
+
+R3.Runtime.Graphics.prototype.StereoEffect = function(
+    renderer
+) {
+    console.warn('override StereoEffect in child class');
+};

src/r3-system-render.js

@@ -65,8 +65,6 @@ R3.System.Render = function(
     this.windowResizeSubscription = null;
 
     this.statistics = [];
-
-    this.projects = [];
 };
 
 R3.System.Render.prototype = Object.create(R3.System.prototype);
@@ -474,42 +472,38 @@ R3.System.Render.prototype.render = function(data) {
      * TODO: implement 2D rendering
      */
     if (renderer instanceof R3.Renderer.D2) {
-        console.log('TODO: implement 2D rendering')
+        console.log('TODO: implement 2D rendering');
         return;
     }
 
-    this.projects.map(
-        function(project) {
+    this.project.renderers.map(
 
-            project.renderers.map(
-                function(renderer) {
+        function(renderer) {
 
-                    var scenes = project.scenes;
+            if (!renderer.instance) {
+                console.warn('renderer not ready');
+                return;
+            }
 
-                    var camera = project.cameras[project.cameraIndex];
+            var size = renderer.getSize();
 
-                    var effect = renderer.effect;
+            renderer.viewports.map(
+                function (viewport) {
 
-                    if (
-                        renderer.renderMode === R3.API.Renderer.MODE_TARGET ||
-                        renderer.renderMode === R3.API.Renderer.MODE_CANVAS_AND_TARGET
-                    ) {
-                        if (!renderer.renderTarget) {
-                            console.warn('no renderTarget');
-                            renderer.clear();
-                            return;
-                        }
+                    if (!viewport.instance) {
+                        console.warn('viewport not ready');
+                        return;
                     }
 
-                    /**
-                     * If this renderer has autoClear set but multiple scenes, we want to render the all the scenes
-                     * first and then restore the autoClear setting, otherwise rendering multiple scenes will result in
-                     * only one scene being rendered. Setting the autoClear setting to false is not an option because
-                     * in this situation all scenes will be renderered continuously (with no clearing in between at all)
-                     * @type {boolean}
-                     */
+                    renderer.setViewport(
+                        viewport.x * size.width,
+                        viewport.y * size.height,
+                        viewport.width * size.width,
+                        viewport.height * size.height
+                    );
+
                     var resetAutoClear = false;
-                    if (scenes.length > 1) {
+                    if (viewport.scenes.length > 1) {
 
                         if (renderer.autoClear) {
                             resetAutoClear = true;
@@ -521,37 +515,32 @@ R3.System.Render.prototype.render = function(data) {
                         renderer.clear();
                     }
 
-                    /**
-                     * Do the rendering
-                     */
-                    var size = renderer.getSize();
-                    renderer.viewports.map(
+                    viewport.scenes.map(
 
-                        function(viewport) {
+                        function (scene) {
 
-                            renderer.setViewport(
-                                viewport.x * size.width,
-                                viewport.y * size.height,
-                                viewport.width * size.width,
-                                viewport.height * size.height
-                            );
-
-                            var cubeCameras = project.cameras.reduce(
-                                function(result, camera){
-                                    if (camera instanceof R3.D3.Camera.Cube) {
-                                        result.push(camera);
-                                    }
-                                    return result;
-                                },
-                                []
-                            );
+                            if (!scene.instance) {
+                                console.warn('scene not ready');
+                                return;
+                            }
 
                             /**
-                             * Update any cube camera's based on the scene
+                             * Render textures first
                              */
-                            cubeCameras.map(
+                            scene.cubeCameras.map(
+
                                 function(cubeCamera) {
 
+                                    if (!cubeCamera.instance) {
+                                        console.warn('cube camera not ready');
+                                        return;
+                                    }
+
+                                    /**
+                                     * TODO: optimize this to add / remove meshes via Events to prevent looping through
+                                     * TODO: all of them to inspect their excludeFromEnvironmentMapMap settings
+                                     * @type {T | Array}
+                                     */
                                     var meshesExcluded = scene.meshes.reduce(
                                         function(result, mesh){
                                             if (mesh.excludeFromEnvironmentMapMap) {
@@ -569,10 +558,9 @@ R3.System.Render.prototype.render = function(data) {
                                         }
                                     );
 
-                                    scenes.map(
-                                        function(scene) {
-                                            cubeCamera.update(renderer, scene);
-                                        }
+                                    cubeCamera.instance.update(
+                                        renderer.instance,
+                                        scene.instance
                                     );
 
                                     meshesExcluded.map(
@@ -583,64 +571,106 @@ R3.System.Render.prototype.render = function(data) {
                                     );
 
                                 }.bind(this)
+
                             );
 
-                            if (renderer.enableComposer) {
+                            var camera = null;
 
-                                if (renderer.composer && renderer.composer.ready()) {
-                                    renderer.composer.render();
-                                } else {
-                                    console.log('composer not ready');
-                                }
+                            if (this.applicationMode === R3.API.Project.APPLICATION_MODE_EDIT) {
+                                camera = this.project.cameras[scene.cameraIndexEdit];
+                            } else {
+                                camera = this.project.cameras[scene.cameraIndexRun];
+                            }
 
+                            if (!camera || !camera.instance) {
+                                console.warn('camera not ready');
                                 return;
                             }
 
-                            scenes.map(
+                            if (scene.enableEffect) {
 
-                                function(scene) {
+                                if (!scene.effect) {
+                                    console.warn('enabling an effect when no effect is specified on the scene has no effect');
+                                    return;
+                                }
 
-                                    var backupCamera = camera;
+                                if (scene.enableComposer) {
+                                    console.warn('only an effect or composer can be active at any given time');
+                                    return;
+                                }
 
-                                    /**
-                                     * Scene camera overrides normal camera
-                                     */
-                                    if (scene.camera) {
-                                        camera = scene.camera;
+                                if (!scene.effect.ready()) {
+                                    console.warn('the effect is not ready yet: ' + scene.effect.name);
+                                }
+
+                                if (renderer.target) {
+                                    console.warn('todo: test if rendering effect to target works');
+
+                                    if (!scene.effect.instance) {
+                                        return;
                                     }
 
-                                    if (renderer.renderMode === R3.API.Renderer.MODE_TARGET ||
-                                        renderer.renderMode === R3.API.Renderer.MODE_CANVAS_AND_TARGET) {
+                                    scene.effect.instance.render(
+                                        scene.instance,
+                                        camera.instance,
+                                        renderer.target.instance
+                                    );
+                                }
 
-                                        renderer.renderToTarget(
-                                            scene,
-                                            camera
-                                        )
+                                if (!scene.effect.instance) {
+                                    return;
+                                }
 
-                                    }
+                                scene.effect.instance.render(
+                                    scene.instance,
+                                    camera.instance
+                                );
 
-                                    if (renderer.renderMode === R3.API.Renderer.MODE_CANVAS ||
-                                        renderer.renderMode === R3.API.Renderer.MODE_CANVAS_AND_TARGET) {
+                                console.warn('todo: check if have to return from effect render here');
+                                //return;
 
-                                        if (renderer.enableEffect) {
+                            }
 
-                                            if (renderer.effect && renderer.effect.ready(scene, camera)) {
-                                                effect.render(scene, camera);
-                                            } else {
-                                                console.log('effect not ready');
-                                            }
+                            if (scene.enableComposer) {
 
-                                            return;
-                                        }
+                                if (!scene.composer) {
+                                    console.warn('enabling a composer when no composer is specified on the scene has no effect');
+                                    return;
+                                }
 
-                                        renderer.render(scene, camera);
-                                    }
+                                if (!scene.composer.ready()) {
+                                    console.warn('the composer is not ready yet: ' + scene.composer.name);
+                                }
 
-                                    camera = backupCamera;
+                                scene.composer.render();
 
-                                }.bind(this)
+                                console.warn('todo: check if have to return from composer render here');
+                                //return;
+                            }
+
+                            if (renderer.target) {
+
+                                if (!render.target.instance) {
+                                    console.warn('render target instance not ready');
+                                }
+
+                                renderer.instance.render(
+                                    scene.instance,
+                                    camera.instance,
+                                    renderer.target.instance
+                                )
+                            }
+
+                            renderer.instance.render(
+                                scene.instance,
+                                camera.instance
                             );
+
+                            /**
+                             * end of scene
+                             */
                         }.bind(this)
+
                     );
 
                     /**
@@ -650,9 +680,18 @@ R3.System.Render.prototype.render = function(data) {
                         renderer.autoClear = true;
                         renderer.updateInstance('autoClear');
                     }
-                }
+
+                    /**
+                     * end of viewport
+                     */
+                }.bind(this)
             );
-        }
+
+            /**
+             * end of renderer
+             */
+        }.bind(this)
+
     );
 
     R3.Event.Emit(