From 7106e3368a115cedaa98af7b63c5a831479ef671 Mon Sep 17 00:00:00 2001 From: -=ybafelo Date: Wed, 7 Aug 2019 05:17:41 +0200 Subject: [PATCH] latest --- {src => bak}/r3-api-renderer-d3-target.js | 4 +- {src => bak}/r3-renderer-d3-target.js | 11 +- src/r3-a-1-event.js | 4 + src/r3-a-2-utils.js | 115 ++++ src/r3-a-3-api-component.js | 92 +-- src/r3-a-4-component.js | 85 +-- src/r3-api-project.js | 23 +- src/r3-api-renderer-d3-canvas-target.js | 13 +- src/r3-api-renderer-d3-canvas.js | 15 +- src/r3-api-renderer-d3.js | 18 +- src/r3-color.js | 3 + src/r3-d3-api-camera-a.js | 12 +- ...d3-api-camera-orthographic-fixed-aspect.js | 13 +- ...-api-camera-orthographic-scaled-aspect.js} | 8 +- src/r3-d3-api-camera-orthographic.js | 2 +- src/r3-d3-api-composer-render-target.js | 53 ++ src/r3-d3-api-composer-renderer.js | 33 + src/r3-d3-api-composer.js | 11 +- src/r3-d3-api-effect-a.js | 17 +- src/r3-d3-api-effect-anaglyph.js | 1 + src/r3-d3-api-effect-parallax.js | 1 + src/r3-d3-api-effect-stereo.js | 1 + src/r3-d3-api-face-graphics.js | 110 ++++ src/r3-d3-api-face.js | 48 +- src/r3-d3-api-scene.js | 7 + src/r3-d3-api-viewport.js | 2 +- src/r3-d3-camera-cube.js | 5 +- src/r3-d3-camera-orthographic-fixed-aspect.js | 366 ++++------- ...r3-d3-camera-orthographic-scaled-aspect.js | 88 +++ ...r3-d3-camera-orthographic-zoomed-aspect.js | 289 --------- src/r3-d3-camera-orthographic.js | 187 +----- src/r3-d3-camera-perspective-stereo.js | 66 +- src/r3-d3-camera-perspective.js | 78 +-- src/r3-d3-composer-render-target.js | 98 +++ src/r3-d3-composer-renderer.js | 129 ++++ src/r3-d3-composer.js | 181 ++---- src/r3-d3-effect-a.js | 194 ++---- src/r3-d3-effect-anaglyph.js | 43 +- src/r3-d3-effect-parallax.js | 43 +- src/r3-d3-effect-stereo.js | 45 +- src/r3-d3-face-graphics.js | 287 +++++++++ src/r3-d3-face.js | 132 ++-- src/r3-renderer-a.js | 109 +--- src/r3-renderer-d2.js | 15 - src/r3-renderer-d3-canvas-target.js | 575 +++--------------- src/r3-renderer-d3-canvas.js | 546 ++--------------- src/r3-renderer-d3.js | 343 ++--------- src/r3-runtime-graphics-three.js | 152 +++++ src/r3-runtime-graphics.js | 78 ++- src/r3-system-render.js | 223 ++++--- 50 files changed, 1981 insertions(+), 2993 deletions(-) rename {src => bak}/r3-api-renderer-d3-target.js (96%) rename {src => bak}/r3-renderer-d3-target.js (97%) rename src/{r3-d3-api-camera-orthographic-zoomed-aspect.js => r3-d3-api-camera-orthographic-scaled-aspect.js} (82%) create mode 100644 src/r3-d3-api-composer-render-target.js create mode 100644 src/r3-d3-api-composer-renderer.js create mode 100644 src/r3-d3-api-face-graphics.js create mode 100644 src/r3-d3-camera-orthographic-scaled-aspect.js delete mode 100644 src/r3-d3-camera-orthographic-zoomed-aspect.js create mode 100644 src/r3-d3-composer-render-target.js create mode 100644 src/r3-d3-composer-renderer.js create mode 100644 src/r3-d3-face-graphics.js diff --git a/src/r3-api-renderer-d3-target.js b/bak/r3-api-renderer-d3-target.js similarity index 96% rename from src/r3-api-renderer-d3-target.js rename to bak/r3-api-renderer-d3-target.js index 5734393..ceda4a8 100644 --- a/src/r3-api-renderer-d3-target.js +++ b/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)) { diff --git a/src/r3-renderer-d3-target.js b/bak/r3-renderer-d3-target.js similarity index 97% rename from src/r3-renderer-d3-target.js rename to bak/r3-renderer-d3-target.js index 03f7e5d..e5e59c7 100644 --- a/src/r3-renderer-d3-target.js +++ b/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 diff --git a/src/r3-a-1-event.js b/src/r3-a-1-event.js index 3ee0541..3bb2bc9 100644 --- a/src/r3-a-1-event.js +++ b/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; } diff --git a/src/r3-a-2-utils.js b/src/r3-a-2-utils.js index 9354f09..792fc4f 100644 --- a/src/r3-a-2-utils.js +++ b/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 diff --git a/src/r3-a-3-api-component.js b/src/r3-a-3-api-component.js index e07543f..d547418 100644 --- a/src/r3-a-3-api-component.js +++ b/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() { diff --git a/src/r3-a-4-component.js b/src/r3-a-4-component.js index 5b4784b..7a423de 100644 --- a/src/r3-a-4-component.js +++ b/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; diff --git a/src/r3-api-project.js b/src/r3-api-project.js index 0f52924..e1ed201 100644 --- a/src/r3-api-project.js +++ b/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; \ No newline at end of file +R3.API.Project.CAMERA_INDEX_RUN = 0x1; + +R3.API.Project.RENDERER_INDEX_MAIN = 0x0; + +R3.API.Project.RENDER_TARGET_INDEX_NONE = -0x1; \ No newline at end of file diff --git a/src/r3-api-renderer-d3-canvas-target.js b/src/r3-api-renderer-d3-canvas-target.js index c1b8721..5d9e6aa 100644 --- a/src/r3-api-renderer-d3-canvas-target.js +++ b/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 + } +}; diff --git a/src/r3-api-renderer-d3-canvas.js b/src/r3-api-renderer-d3-canvas.js index 280c72b..7646625 100644 --- a/src/r3-api-renderer-d3-canvas.js +++ b/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; \ No newline at end of file +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 + } + +}; diff --git a/src/r3-api-renderer-d3.js b/src/r3-api-renderer-d3.js index 011c246..f91927f 100644 --- a/src/r3-api-renderer-d3.js +++ b/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; \ No newline at end of file +R3.API.Renderer.D3.prototype.constructor = R3.API.Renderer.D3; diff --git a/src/r3-color.js b/src/r3-color.js index 72bf557..e63af56 100644 --- a/src/r3-color.js +++ b/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; } diff --git a/src/r3-d3-api-camera-a.js b/src/r3-d3-api-camera-a.js index d8c3cc0..d25ef04 100644 --- a/src/r3-d3-api-camera-a.js +++ b/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; \ No newline at end of file +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; \ No newline at end of file diff --git a/src/r3-d3-api-camera-orthographic-fixed-aspect.js b/src/r3-d3-api-camera-orthographic-fixed-aspect.js index f06c5cb..5dcbe17 100644 --- a/src/r3-d3-api-camera-orthographic-fixed-aspect.js +++ b/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); diff --git a/src/r3-d3-api-camera-orthographic-zoomed-aspect.js b/src/r3-d3-api-camera-orthographic-scaled-aspect.js similarity index 82% rename from src/r3-d3-api-camera-orthographic-zoomed-aspect.js rename to src/r3-d3-api-camera-orthographic-scaled-aspect.js index 374b249..83b3fce 100644 --- a/src/r3-d3-api-camera-orthographic-zoomed-aspect.js +++ b/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; diff --git a/src/r3-d3-api-camera-orthographic.js b/src/r3-d3-api-camera-orthographic.js index a10492f..b34e193 100644 --- a/src/r3-d3-api-camera-orthographic.js +++ b/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 diff --git a/src/r3-d3-api-composer-render-target.js b/src/r3-d3-api-composer-render-target.js new file mode 100644 index 0000000..44d4f0f --- /dev/null +++ b/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; diff --git a/src/r3-d3-api-composer-renderer.js b/src/r3-d3-api-composer-renderer.js new file mode 100644 index 0000000..1ea9312 --- /dev/null +++ b/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; diff --git a/src/r3-d3-api-composer.js b/src/r3-d3-api-composer.js index f65220b..ad38e18 100644 --- a/src/r3-d3-api-composer.js +++ b/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; diff --git a/src/r3-d3-api-effect-a.js b/src/r3-d3-api-effect-a.js index e77e856..cfc519e 100644 --- a/src/r3-d3-api-effect-a.js +++ b/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); diff --git a/src/r3-d3-api-effect-anaglyph.js b/src/r3-d3-api-effect-anaglyph.js index f02a30a..852b46a 100644 --- a/src/r3-d3-api-effect-anaglyph.js +++ b/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 ); diff --git a/src/r3-d3-api-effect-parallax.js b/src/r3-d3-api-effect-parallax.js index f73060c..5c269d5 100644 --- a/src/r3-d3-api-effect-parallax.js +++ b/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 ); diff --git a/src/r3-d3-api-effect-stereo.js b/src/r3-d3-api-effect-stereo.js index c5913c8..e285b60 100644 --- a/src/r3-d3-api-effect-stereo.js +++ b/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 ); diff --git a/src/r3-d3-api-face-graphics.js b/src/r3-d3-api-face-graphics.js new file mode 100644 index 0000000..393a237 --- /dev/null +++ b/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 + ); +}; diff --git a/src/r3-d3-api-face.js b/src/r3-d3-api-face.js index 7493177..5b75048 100644 --- a/src/r3-d3-api-face.js +++ b/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 ); }; diff --git a/src/r3-d3-api-scene.js b/src/r3-d3-api-scene.js index f035829..e83a82b 100644 --- a/src/r3-d3-api-scene.js +++ b/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(); } diff --git a/src/r3-d3-api-viewport.js b/src/r3-d3-api-viewport.js index aae4314..42d8df1 100644 --- a/src/r3-d3-api-viewport.js +++ b/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 diff --git a/src/r3-d3-camera-cube.js b/src/r3-d3-camera-cube.js index 22ef5e4..1a482ea 100644 --- a/src/r3-d3-camera-cube.js +++ b/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 - ) + }; diff --git a/src/r3-d3-camera-orthographic-fixed-aspect.js b/src/r3-d3-camera-orthographic-fixed-aspect.js index 3ba3c1b..b8072cd 100644 --- a/src/r3-d3-camera-orthographic-fixed-aspect.js +++ b/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(); -}; \ No newline at end of file diff --git a/src/r3-d3-camera-orthographic-scaled-aspect.js b/src/r3-d3-camera-orthographic-scaled-aspect.js new file mode 100644 index 0000000..46ad19b --- /dev/null +++ b/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); +}; diff --git a/src/r3-d3-camera-orthographic-zoomed-aspect.js b/src/r3-d3-camera-orthographic-zoomed-aspect.js deleted file mode 100644 index 3ba3c1b..0000000 --- a/src/r3-d3-camera-orthographic-zoomed-aspect.js +++ /dev/null @@ -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(); -}; \ No newline at end of file diff --git a/src/r3-d3-camera-orthographic.js b/src/r3-d3-camera-orthographic.js index aa0ddd1..0436752 100644 --- a/src/r3-d3-camera-orthographic.js +++ b/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() { diff --git a/src/r3-d3-camera-perspective-stereo.js b/src/r3-d3-camera-perspective-stereo.js index ed22ec1..909f29c 100644 --- a/src/r3-d3-camera-perspective-stereo.js +++ b/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); }; diff --git a/src/r3-d3-camera-perspective.js b/src/r3-d3-camera-perspective.js index 06cfe76..00a10b9 100644 --- a/src/r3-d3-camera-perspective.js +++ b/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); -}; \ No newline at end of file diff --git a/src/r3-d3-composer-render-target.js b/src/r3-d3-composer-render-target.js new file mode 100644 index 0000000..d95f4ff --- /dev/null +++ b/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); + +}; diff --git a/src/r3-d3-composer-renderer.js b/src/r3-d3-composer-renderer.js new file mode 100644 index 0000000..8ad6910 --- /dev/null +++ b/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); + +}; diff --git a/src/r3-d3-composer.js b/src/r3-d3-composer.js index 9eee17b..5f96bb5 100644 --- a/src/r3-d3-composer.js +++ b/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; -}; diff --git a/src/r3-d3-effect-a.js b/src/r3-d3-effect-a.js index becbec0..fca936d 100644 --- a/src/r3-d3-effect-a.js +++ b/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 - ); - -}; diff --git a/src/r3-d3-effect-anaglyph.js b/src/r3-d3-effect-anaglyph.js index 261d415..f940d17 100644 --- a/src/r3-d3-effect-anaglyph.js +++ b/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; -}; diff --git a/src/r3-d3-effect-parallax.js b/src/r3-d3-effect-parallax.js index e47a224..7df3784 100644 --- a/src/r3-d3-effect-parallax.js +++ b/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; -}; diff --git a/src/r3-d3-effect-stereo.js b/src/r3-d3-effect-stereo.js index 1eb6423..6893bd0 100644 --- a/src/r3-d3-effect-stereo.js +++ b/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; -}; diff --git a/src/r3-d3-face-graphics.js b/src/r3-d3-face-graphics.js new file mode 100644 index 0000000..f21a926 --- /dev/null +++ b/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'); + +}; \ No newline at end of file diff --git a/src/r3-d3-face.js b/src/r3-d3-face.js index 30feef4..9682b72 100644 --- a/src/r3-d3-face.js +++ b/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, diff --git a/src/r3-renderer-a.js b/src/r3-renderer-a.js index 85868ed..396bedb 100644 --- a/src/r3-renderer-a.js +++ b/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; -}; diff --git a/src/r3-renderer-d2.js b/src/r3-renderer-d2.js index cf8798f..4fd46b2 100644 --- a/src/r3-renderer-d2.js +++ b/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; -}; - diff --git a/src/r3-renderer-d3-canvas-target.js b/src/r3-renderer-d3-canvas-target.js index 2930603..c0e301b 100644 --- a/src/r3-renderer-d3-canvas-target.js +++ b/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); +}; \ No newline at end of file diff --git a/src/r3-renderer-d3-canvas.js b/src/r3-renderer-d3-canvas.js index 952820d..cf4720e 100644 --- a/src/r3-renderer-d3-canvas.js +++ b/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); +}; \ No newline at end of file diff --git a/src/r3-renderer-d3.js b/src/r3-renderer-d3.js index cc2b5b3..0795f6f 100644 --- a/src/r3-renderer-d3.js +++ b/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; -}; diff --git a/src/r3-runtime-graphics-three.js b/src/r3-runtime-graphics-three.js index 04e4de1..59843cb 100644 --- a/src/r3-runtime-graphics-three.js +++ b/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 + ); }; \ No newline at end of file diff --git a/src/r3-runtime-graphics.js b/src/r3-runtime-graphics.js index 4f57b44..5d53c5c 100644 --- a/src/r3-runtime-graphics.js +++ b/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'); +}; \ No newline at end of file diff --git a/src/r3-system-render.js b/src/r3-system-render.js index 3497351..b555387 100644 --- a/src/r3-system-render.js +++ b/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(