From d13e4fb350c72868d0c9411b3d995cf7141e1de0 Mon Sep 17 00:00:00 2001 From: cybafelo Date: Fri, 18 Oct 2019 16:39:56 +0200 Subject: [PATCH] stereo viewports with fixed aspect --- src/build_component_lists.php | 1 + src/r3-a-1-component-info.js | 106 +- src/r3-a-2-event-1.js | 392 ++-- src/r3-a-4-component.js | 4 + src/r3-api-gui.js | 19 - src/r3-api-project-d3-0.js | 4 +- src/r3-api-project-d3-vr.js | 46 +- src/r3-api-query-0.js | 14 +- src/r3-api-query-devices-0.js | 7 +- src/r3-api-query-devices-known.js | 2 +- src/r3-api-query-devices-unknown.js | 2 +- src/r3-api-renderer-d3-0.js | 11 + src/r3-api-renderer-d3-canvas-0.js | 16 + src/r3-api-renderer-d3-canvas-vr.js | 49 - src/r3-api-scalar.js | 59 + src/r3-canvas.js | 9 +- src/r3-d3-api-camera-0.js | 13 +- src/r3-d3-api-camera-cube.js | 2 +- ...-d3-api-camera-orthographic-fixedAspect.js | 2 +- ...d3-api-camera-orthographic-scaledAspect.js | 2 +- src/r3-d3-api-camera-perspective-stereo.js | 7 +- src/r3-d3-api-scene.js | 9 + src/r3-d3-api-viewport-0.js | 28 +- ...js => r3-d3-api-viewport-fixedAspect-0.js} | 12 +- src/r3-d3-api-viewport-fixedAspect-vr.js | 36 + src/r3-d3-api-viewport-zoomedAspect.js | 2 +- src/r3-d3-camera-0.js | 4 +- src/r3-d3-camera-cube.js | 4 +- src/r3-d3-camera-orthographic-fixedAspect.js | 20 +- src/r3-d3-camera-orthographic-scaledAspect.js | 16 +- src/r3-d3-camera-perspective-0.js | 11 + src/r3-d3-camera-perspective-stereo.js | 69 +- src/r3-d3-scene.js | 2 + src/r3-d3-viewport-0.js | 8 +- src/r3-d3-viewport-fixedAspect-0.js | 202 ++ src/r3-d3-viewport-fixedAspect-vr.js | 194 ++ src/r3-d3-viewport-fixedAspect.js | 44 - src/r3-d3-viewport-zoomedAspect.js | 1 + src/r3-gui.js | 177 +- src/r3-query-devices-0.js | 52 + src/r3-renderer-d3-0.js | 5 + src/r3-renderer-d3-canvas-0.js | 16 + src/r3-renderer-d3-canvas-vr.js | 56 - src/r3-runtime-graphics-three.js | 31 +- src/r3-runtime-gui-controlKit.js | 147 ++ src/r3-runtime-gui-datgui.js | 1639 ++++++++++++- src/r3-scalar.js | 49 + src/r3-system-gui.js | 2089 +++-------------- src/r3-system-input.js | 8 + src/r3-system-render.js | 305 ++- 50 files changed, 3524 insertions(+), 2479 deletions(-) delete mode 100644 src/r3-api-gui.js delete mode 100644 src/r3-api-renderer-d3-canvas-vr.js create mode 100644 src/r3-api-scalar.js rename src/{r3-d3-api-viewport-fixedAspect.js => r3-d3-api-viewport-fixedAspect-0.js} (96%) create mode 100644 src/r3-d3-api-viewport-fixedAspect-vr.js create mode 100644 src/r3-d3-viewport-fixedAspect-0.js create mode 100644 src/r3-d3-viewport-fixedAspect-vr.js delete mode 100644 src/r3-d3-viewport-fixedAspect.js delete mode 100644 src/r3-renderer-d3-canvas-vr.js create mode 100644 src/r3-runtime-gui-controlKit.js create mode 100644 src/r3-scalar.js diff --git a/src/build_component_lists.php b/src/build_component_lists.php index 9fbf8f1..1e1c46c 100755 --- a/src/build_component_lists.php +++ b/src/build_component_lists.php @@ -26,6 +26,7 @@ foreach ($files as $file) { !preg_match('/r3\-system/', $file) && !preg_match('/entityManager/', $file) && !preg_match('/r3\-runtime/', $file) && + !preg_match('/r3\-gui/', $file) && !preg_match('/r3\-z\./', $file) && !preg_match('/^r3\-a\-.*/', $file) && !preg_match('/^\.$/', $file) && diff --git a/src/r3-a-1-component-info.js b/src/r3-a-1-component-info.js index 5dec235..c5226af 100644 --- a/src/r3-a-1-component-info.js +++ b/src/r3-a-1-component-info.js @@ -9,7 +9,7 @@ R3.COMPONENT_SOCKET_RECEIVE = 0x8; R3.COMPONENT_SOCKET_CAST = 0x9; R3.COMPONENT_SOCKET = 0xa; R3.COMPONENT_SERVER = 0xb; -R3.COMPONENT_RENDERER_D3_CANVAS_VR = 0xc; +R3.COMPONENT_SCALAR = 0xc; R3.COMPONENT_RENDERER_D3_CANVAS_TARGET = 0xd; R3.COMPONENT_RENDERER_D3_CANVAS = 0xe; R3.COMPONENT_RENDERER_D3 = 0xf; @@ -42,18 +42,18 @@ R3.COMPONENT_PLANE = 0x29; R3.COMPONENT_MOUSE = 0x2a; R3.COMPONENT_MATRIX4 = 0x2b; R3.COMPONENT_IMAGE = 0x2c; -R3.COMPONENT_GUI = 0x2d; -R3.COMPONENT_GROUP = 0x2e; -R3.COMPONENT_GRAPH_TABLE = 0x2f; -R3.COMPONENT_GRAPH_METRIC = 0x30; -R3.COMPONENT_GRAPH_BARCHART_STACKED = 0x31; -R3.COMPONENT_GRAPH_BARCHART = 0x32; -R3.COMPONENT_GRAPH = 0x33; -R3.COMPONENT_FONT = 0x34; -R3.COMPONENT_ENTITY = 0x35; -R3.COMPONENT_DRAWRANGE = 0x36; -R3.COMPONENT_DOMELEMENT = 0x37; -R3.COMPONENT_D3_VIEWPORT_ZOOMEDASPECT = 0x38; +R3.COMPONENT_GROUP = 0x2d; +R3.COMPONENT_GRAPH_TABLE = 0x2e; +R3.COMPONENT_GRAPH_METRIC = 0x2f; +R3.COMPONENT_GRAPH_BARCHART_STACKED = 0x30; +R3.COMPONENT_GRAPH_BARCHART = 0x31; +R3.COMPONENT_GRAPH = 0x32; +R3.COMPONENT_FONT = 0x33; +R3.COMPONENT_ENTITY = 0x34; +R3.COMPONENT_DRAWRANGE = 0x35; +R3.COMPONENT_DOMELEMENT = 0x36; +R3.COMPONENT_D3_VIEWPORT_ZOOMEDASPECT = 0x37; +R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT_VR = 0x38; R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT = 0x39; R3.COMPONENT_D3_VIEWPORT = 0x3a; R3.COMPONENT_D3_VERTEX = 0x3b; @@ -252,8 +252,8 @@ R3.GetComponentType = function(component) { return R3.COMPONENT_SERVER; } - if (component instanceof R3.Renderer.D3.Canvas.VR) { - return R3.COMPONENT_RENDERER_D3_CANVAS_VR; + if (component instanceof R3.Scalar) { + return R3.COMPONENT_SCALAR; } if (component instanceof R3.Renderer.D3.Canvas.Target) { @@ -384,10 +384,6 @@ R3.GetComponentType = function(component) { return R3.COMPONENT_IMAGE; } - if (component instanceof R3.GUI) { - return R3.COMPONENT_GUI; - } - if (component instanceof R3.Group) { return R3.COMPONENT_GROUP; } @@ -432,6 +428,10 @@ R3.GetComponentType = function(component) { return R3.COMPONENT_D3_VIEWPORT_ZOOMEDASPECT; } + if (component instanceof R3.D3.Viewport.FixedAspect.VR) { + return R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT_VR; + } + if (component instanceof R3.D3.Viewport.FixedAspect) { return R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT; } @@ -952,6 +952,10 @@ R3.GetComponentType = function(component) { return R3.COMPONENT_D3_VIEWPORT_ZOOMEDASPECT; } + if (component instanceof R3.D3.API.Viewport.FixedAspect.VR) { + return R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT_VR; + } + if (component instanceof R3.D3.API.Viewport.FixedAspect) { return R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT; } @@ -1576,8 +1580,8 @@ R3.GetComponentType = function(component) { return R3.COMPONENT_SERVER; } - if (component instanceof R3.API.Renderer.D3.Canvas.VR) { - return R3.COMPONENT_RENDERER_D3_CANVAS_VR; + if (component instanceof R3.API.Scalar) { + return R3.COMPONENT_SCALAR; } if (component instanceof R3.API.Renderer.D3.Canvas.Target) { @@ -1708,10 +1712,6 @@ R3.GetComponentType = function(component) { return R3.COMPONENT_IMAGE; } - if (component instanceof R3.API.GUI) { - return R3.COMPONENT_GUI; - } - if (component instanceof R3.API.Group) { return R3.COMPONENT_GROUP; } @@ -1888,11 +1888,11 @@ R3.GetComponentInfo = function(componentType) { apiConstructor : R3.API.Server, runtime: R3.Runtime.SOCKETS }; - case R3.COMPONENT_RENDERER_D3_CANVAS_VR : return { - name : 'R3.Renderer.D3.Canvas.VR', - constructor : R3.Renderer.D3.Canvas.VR, - apiConstructor : R3.API.Renderer.D3.Canvas.VR, - runtime: R3.Runtime.GRAPHICS + case R3.COMPONENT_SCALAR : return { + name : 'R3.Scalar', + constructor : R3.Scalar, + apiConstructor : R3.API.Scalar, + runtime: R3.Runtime.DEFAULT }; case R3.COMPONENT_RENDERER_D3_CANVAS_TARGET : return { name : 'R3.Renderer.D3.Canvas.Target', @@ -2086,12 +2086,6 @@ R3.GetComponentInfo = function(componentType) { apiConstructor : R3.API.Image, runtime: R3.Runtime.GRAPHICS }; - case R3.COMPONENT_GUI : return { - name : 'R3.GUI', - constructor : R3.GUI, - apiConstructor : R3.API.GUI, - runtime: R3.Runtime.GUI - }; case R3.COMPONENT_GROUP : return { name : 'R3.Group', constructor : R3.Group, @@ -2158,6 +2152,12 @@ R3.GetComponentInfo = function(componentType) { apiConstructor : R3.D3.API.Viewport.ZoomedAspect, runtime: R3.Runtime.GRAPHICS }; + case R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT_VR : return { + name : 'R3.D3.Viewport.FixedAspect.VR', + constructor : R3.D3.Viewport.FixedAspect.VR, + apiConstructor : R3.D3.API.Viewport.FixedAspect.VR, + runtime: R3.Runtime.GRAPHICS + }; case R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT : return { name : 'R3.D3.Viewport.FixedAspect', constructor : R3.D3.Viewport.FixedAspect, @@ -3074,8 +3074,8 @@ R3.GetAPIConstructor = function(runtimeComponent) { if (runtimeComponent instanceof R3.Server){ return R3.API.Server; } - if (runtimeComponent instanceof R3.Renderer.D3.Canvas.VR){ - return R3.API.Renderer.D3.Canvas.VR; + if (runtimeComponent instanceof R3.Scalar){ + return R3.API.Scalar; } if (runtimeComponent instanceof R3.Renderer.D3.Canvas.Target){ return R3.API.Renderer.D3.Canvas.Target; @@ -3173,9 +3173,6 @@ R3.GetAPIConstructor = function(runtimeComponent) { if (runtimeComponent instanceof R3.Image){ return R3.API.Image; } - if (runtimeComponent instanceof R3.GUI){ - return R3.API.GUI; - } if (runtimeComponent instanceof R3.Group){ return R3.API.Group; } @@ -3209,6 +3206,9 @@ R3.GetAPIConstructor = function(runtimeComponent) { if (runtimeComponent instanceof R3.D3.Viewport.ZoomedAspect){ return R3.D3.API.Viewport.ZoomedAspect; } + if (runtimeComponent instanceof R3.D3.Viewport.FixedAspect.VR){ + return R3.D3.API.Viewport.FixedAspect.VR; + } if (runtimeComponent instanceof R3.D3.Viewport.FixedAspect){ return R3.D3.API.Viewport.FixedAspect; } @@ -3688,8 +3688,8 @@ R3.GetConstructor = function(apiComponent) { if (apiComponent instanceof R3.API.Server){ return R3.Server; } - if (apiComponent instanceof R3.API.Renderer.D3.Canvas.VR){ - return R3.Renderer.D3.Canvas.VR; + if (apiComponent instanceof R3.API.Scalar){ + return R3.Scalar; } if (apiComponent instanceof R3.API.Renderer.D3.Canvas.Target){ return R3.Renderer.D3.Canvas.Target; @@ -3787,9 +3787,6 @@ R3.GetConstructor = function(apiComponent) { if (apiComponent instanceof R3.API.Image){ return R3.Image; } - if (apiComponent instanceof R3.API.GUI){ - return R3.GUI; - } if (apiComponent instanceof R3.API.Group){ return R3.Group; } @@ -3823,6 +3820,9 @@ R3.GetConstructor = function(apiComponent) { if (apiComponent instanceof R3.D3.API.Viewport.ZoomedAspect){ return R3.D3.Viewport.ZoomedAspect; } + if (apiComponent instanceof R3.D3.API.Viewport.FixedAspect.VR){ + return R3.D3.Viewport.FixedAspect.VR; + } if (apiComponent instanceof R3.D3.API.Viewport.FixedAspect){ return R3.D3.Viewport.FixedAspect; } @@ -4282,7 +4282,7 @@ R3.GetConstructorFromComponentType = function(componentType) { case R3.COMPONENT_SOCKET_CAST: return R3.Socket.Cast; case R3.COMPONENT_SOCKET: return R3.Socket; case R3.COMPONENT_SERVER: return R3.Server; - case R3.COMPONENT_RENDERER_D3_CANVAS_VR: return R3.Renderer.D3.Canvas.VR; + case R3.COMPONENT_SCALAR: return R3.Scalar; case R3.COMPONENT_RENDERER_D3_CANVAS_TARGET: return R3.Renderer.D3.Canvas.Target; case R3.COMPONENT_RENDERER_D3_CANVAS: return R3.Renderer.D3.Canvas; case R3.COMPONENT_RENDERER_D3: return R3.Renderer.D3; @@ -4315,7 +4315,6 @@ R3.GetConstructorFromComponentType = function(componentType) { case R3.COMPONENT_MOUSE: return R3.Mouse; case R3.COMPONENT_MATRIX4: return R3.Matrix4; case R3.COMPONENT_IMAGE: return R3.Image; - case R3.COMPONENT_GUI: return R3.GUI; case R3.COMPONENT_GROUP: return R3.Group; case R3.COMPONENT_GRAPH_TABLE: return R3.Graph.Table; case R3.COMPONENT_GRAPH_METRIC: return R3.Graph.Metric; @@ -4327,6 +4326,7 @@ R3.GetConstructorFromComponentType = function(componentType) { case R3.COMPONENT_DRAWRANGE: return R3.DrawRange; case R3.COMPONENT_DOMELEMENT: return R3.DomElement; case R3.COMPONENT_D3_VIEWPORT_ZOOMEDASPECT: return R3.D3.Viewport.ZoomedAspect; + case R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT_VR: return R3.D3.Viewport.FixedAspect.VR; case R3.COMPONENT_D3_VIEWPORT_FIXEDASPECT: return R3.D3.Viewport.FixedAspect; case R3.COMPONENT_D3_VIEWPORT: return R3.D3.Viewport; case R3.COMPONENT_D3_VERTEX: return R3.D3.Vertex; @@ -4518,8 +4518,8 @@ R3.GetComponentName = function(runtimeComponent) { if (runtimeComponent instanceof R3.Server){ return 'R3.Server'; } - if (runtimeComponent instanceof R3.Renderer.D3.Canvas.VR){ - return 'R3.Renderer.D3.Canvas.VR'; + if (runtimeComponent instanceof R3.Scalar){ + return 'R3.Scalar'; } if (runtimeComponent instanceof R3.Renderer.D3.Canvas.Target){ return 'R3.Renderer.D3.Canvas.Target'; @@ -4617,9 +4617,6 @@ R3.GetComponentName = function(runtimeComponent) { if (runtimeComponent instanceof R3.Image){ return 'R3.Image'; } - if (runtimeComponent instanceof R3.GUI){ - return 'R3.GUI'; - } if (runtimeComponent instanceof R3.Group){ return 'R3.Group'; } @@ -4653,6 +4650,9 @@ R3.GetComponentName = function(runtimeComponent) { if (runtimeComponent instanceof R3.D3.Viewport.ZoomedAspect){ return 'R3.D3.Viewport.ZoomedAspect'; } + if (runtimeComponent instanceof R3.D3.Viewport.FixedAspect.VR){ + return 'R3.D3.Viewport.FixedAspect.VR'; + } if (runtimeComponent instanceof R3.D3.Viewport.FixedAspect){ return 'R3.D3.Viewport.FixedAspect'; } diff --git a/src/r3-a-2-event-1.js b/src/r3-a-2-event-1.js index 671a6cc..98a131c 100644 --- a/src/r3-a-2-event-1.js +++ b/src/r3-a-2-event-1.js @@ -13,103 +13,106 @@ R3.Event.BLENDER_DATA_RECEIVED = 0xc; R3.Event.BUILD_GUI = 0xd; R3.Event.CANVAS_CHANGE = 0xe; R3.Event.CAST_SOURCE_CHANGED = 0xf; -R3.Event.COMPILE_FAILED = 0x10; -R3.Event.COMPILE_SUCCESS = 0x11; -R3.Event.COMPONENTS_LINKED = 0x12; -R3.Event.COMPONENT_CLONED = 0x13; -R3.Event.COMPONENT_CREATED = 0x14; -R3.Event.COMPONENT_DELETED = 0x15; -R3.Event.COMPONENT_DOWNLOAD_COMPLETE = 0x16; -R3.Event.COMPONENT_LINKED = 0x17; -R3.Event.COMPONENT_REGISTER = 0x18; -R3.Event.COMPONENT_REPLACED = 0x19; -R3.Event.COMPONENT_SAVED = 0x1a; -R3.Event.COMPONENT_TYPES_UPDATE = 0x1b; -R3.Event.COMPONENT_UPDATE = 0x1c; -R3.Event.CONTINUE_ALL_AUDIO = 0x1d; -R3.Event.CONTROLS_CANVAS_CHANGE = 0x1e; -R3.Event.DELETE_COMPONENT = 0x1f; -R3.Event.DELETE_COMPONENT_ERROR = 0x20; -R3.Event.DONE_SAVING = 0x21; -R3.Event.ENGINE_FIRED_PARTICLES_ZERO = 0x22; -R3.Event.ENTITY_LOADED = 0x23; -R3.Event.EVENT_ID_UPDATE = 0x24; -R3.Event.EXCLUDE_FROM_ENVIRONMENT = 0x25; -R3.Event.FETCH_COMPONENTS = 0x26; -R3.Event.FETCH_COMPONENT_TYPES = 0x27; -R3.Event.GET_API_URL = 0x28; -R3.Event.GET_APPLICATION_MODE = 0x29; -R3.Event.GET_GRAPHICS_RUNTIME = 0x2a; -R3.Event.GET_PHYSICS_RUNTIME = 0x2b; -R3.Event.GET_PROJECT = 0x2c; -R3.Event.GET_REMOTE_API_URL = 0x2d; -R3.Event.GET_RENDER_CONFIGURATION = 0x2e; -R3.Event.GET_RUNTIME = 0x2f; -R3.Event.GET_USER = 0x30; -R3.Event.GET_WEBSOCKET_CONFIG = 0x31; -R3.Event.GET_WINDOW_SIZE = 0x32; -R3.Event.IMAGE_UPLOAD_COMPLETE = 0x33; -R3.Event.INSTANCE_CLONED = 0x34; -R3.Event.INSTANCE_CREATED = 0x35; -R3.Event.INSTANCE_DISPOSAL = 0x36; -R3.Event.INSTANCE_LOADED = 0x37; -R3.Event.KEY_DOWN = 0x38; -R3.Event.KEY_UP = 0x39; -R3.Event.LOAD_COMPONENT = 0x3a; -R3.Event.LOAD_COMPONENT_ERROR = 0x3b; -R3.Event.LOAD_FONT = 0x3c; -R3.Event.LOAD_IMAGE = 0x3d; -R3.Event.LOAD_PROGRESS = 0x3e; -R3.Event.MATERIAL_TEXTURES_UPDATED = 0x3f; -R3.Event.MATERIAL_TYPE_CHANGED = 0x40; -R3.Event.MAXIMUM_PROJECTS = 0x41; -R3.Event.MESH_DESELECTED = 0x42; -R3.Event.MESH_FACE_DESELECTED = 0x43; -R3.Event.MESH_FACE_SELECTED = 0x44; -R3.Event.MESH_SELECTED = 0x45; -R3.Event.MOUSE_DOWN = 0x46; -R3.Event.MOUSE_MOVE = 0x47; -R3.Event.MOUSE_UP = 0x48; -R3.Event.MOUSE_WHEEL = 0x49; -R3.Event.MUTE_AUDIO = 0x4a; -R3.Event.NAME_UPDATE = 0x4b; -R3.Event.PARENT_SCENE_CHANGE = 0x4c; -R3.Event.PARENT_WORLD_CHANGE = 0x4d; -R3.Event.PAUSE = 0x4e; -R3.Event.PAUSE_ALL_AUDIO = 0x4f; -R3.Event.PLAY_AUDIO = 0x50; -R3.Event.PROJECT_LOADED = 0x51; -R3.Event.QUERY_PARSED = 0x52; -R3.Event.RECEIVE_DESTINATION_CHANGED = 0x53; -R3.Event.REGISTER_DEPENDENCIES = 0x54; -R3.Event.REGISTER_UPDATE = 0x55; -R3.Event.REMOVE_COMPONENT = 0x56; -R3.Event.REMOVE_MESH = 0x57; -R3.Event.REMOVE_PARTICLE_ENGINE = 0x58; -R3.Event.RENDERER_SIZE_CHANGE = 0x59; -R3.Event.REPLACE_COMPONENT = 0x5a; -R3.Event.RESOLVE_DEPENDENCIES = 0x5b; -R3.Event.RESTART = 0x5c; -R3.Event.SAVE_COMPONENT = 0x5d; -R3.Event.SAVE_COMPONENT_ERROR = 0x5e; -R3.Event.SAVING = 0x5f; -R3.Event.SELECTION_MODE_CHANGE = 0x60; -R3.Event.SIGN_IN = 0x61; -R3.Event.SIGN_OUT = 0x62; -R3.Event.START = 0x63; -R3.Event.STOP_ALL_AUDIO = 0x64; -R3.Event.STOP_AUDIO = 0x65; -R3.Event.STOP_VISUALIZE = 0x66; -R3.Event.TEXTURE_ANIMATED_CHANGE = 0x67; -R3.Event.TEXTURE_INSTANCE_UPDATED = 0x68; -R3.Event.TOUCH_CANCEL = 0x69; -R3.Event.TOUCH_END = 0x6a; -R3.Event.TOUCH_MOVE = 0x6b; -R3.Event.TOUCH_START = 0x6c; -R3.Event.UNRESOLVED_DEPENDENCIES_UPDATE = 0x6d; -R3.Event.VISUALIZE = 0x6e; -R3.Event.WINDOW_RESIZE = 0x6f; -R3.Event.MAX_EVENTS = 0x70; +R3.Event.CLEAR_GUI = 0x10; +R3.Event.COMPILE_FAILED = 0x11; +R3.Event.COMPILE_SUCCESS = 0x12; +R3.Event.COMPONENTS_LINKED = 0x13; +R3.Event.COMPONENT_CLONED = 0x14; +R3.Event.COMPONENT_CREATED = 0x15; +R3.Event.COMPONENT_DELETED = 0x16; +R3.Event.COMPONENT_DOWNLOAD_COMPLETE = 0x17; +R3.Event.COMPONENT_LINKED = 0x18; +R3.Event.COMPONENT_REGISTER = 0x19; +R3.Event.COMPONENT_REPLACED = 0x1a; +R3.Event.COMPONENT_SAVED = 0x1b; +R3.Event.COMPONENT_TYPES_UPDATE = 0x1c; +R3.Event.COMPONENT_UPDATE = 0x1d; +R3.Event.CONTINUE_ALL_AUDIO = 0x1e; +R3.Event.CONTROLS_CANVAS_CHANGE = 0x1f; +R3.Event.DELETE_COMPONENT = 0x20; +R3.Event.DELETE_COMPONENT_ERROR = 0x21; +R3.Event.DONE_SAVING = 0x22; +R3.Event.ENGINE_FIRED_PARTICLES_ZERO = 0x23; +R3.Event.ENTITY_LOADED = 0x24; +R3.Event.EVENT_ID_UPDATE = 0x25; +R3.Event.EXCLUDE_FROM_ENVIRONMENT = 0x26; +R3.Event.FETCH_COMPONENTS = 0x27; +R3.Event.FETCH_COMPONENT_TYPES = 0x28; +R3.Event.GET_API_URL = 0x29; +R3.Event.GET_APPLICATION_MODE = 0x2a; +R3.Event.GET_GRAPHICS_RUNTIME = 0x2b; +R3.Event.GET_PHYSICS_RUNTIME = 0x2c; +R3.Event.GET_PROJECT = 0x2d; +R3.Event.GET_REMOTE_API_URL = 0x2e; +R3.Event.GET_RENDER_CONFIGURATION = 0x2f; +R3.Event.GET_RUNTIME = 0x30; +R3.Event.GET_USER = 0x31; +R3.Event.GET_WEBSOCKET_CONFIG = 0x32; +R3.Event.GET_WINDOW_SIZE = 0x33; +R3.Event.GUI_CREATED = 0x34; +R3.Event.GUI_REMOVED = 0x35; +R3.Event.IMAGE_UPLOAD_COMPLETE = 0x36; +R3.Event.INSTANCE_CLONED = 0x37; +R3.Event.INSTANCE_CREATED = 0x38; +R3.Event.INSTANCE_DISPOSAL = 0x39; +R3.Event.INSTANCE_LOADED = 0x3a; +R3.Event.KEY_DOWN = 0x3b; +R3.Event.KEY_UP = 0x3c; +R3.Event.LOAD_COMPONENT = 0x3d; +R3.Event.LOAD_COMPONENT_ERROR = 0x3e; +R3.Event.LOAD_FONT = 0x3f; +R3.Event.LOAD_IMAGE = 0x40; +R3.Event.LOAD_PROGRESS = 0x41; +R3.Event.MATERIAL_TEXTURES_UPDATED = 0x42; +R3.Event.MATERIAL_TYPE_CHANGED = 0x43; +R3.Event.MAXIMUM_PROJECTS = 0x44; +R3.Event.MESH_DESELECTED = 0x45; +R3.Event.MESH_FACE_DESELECTED = 0x46; +R3.Event.MESH_FACE_SELECTED = 0x47; +R3.Event.MESH_SELECTED = 0x48; +R3.Event.MOUSE_DOWN = 0x49; +R3.Event.MOUSE_MOVE = 0x4a; +R3.Event.MOUSE_UP = 0x4b; +R3.Event.MOUSE_WHEEL = 0x4c; +R3.Event.MUTE_AUDIO = 0x4d; +R3.Event.NAME_UPDATE = 0x4e; +R3.Event.PARENT_SCENE_CHANGE = 0x4f; +R3.Event.PARENT_WORLD_CHANGE = 0x50; +R3.Event.PAUSE = 0x51; +R3.Event.PAUSE_ALL_AUDIO = 0x52; +R3.Event.PLAY_AUDIO = 0x53; +R3.Event.PROJECT_LOADED = 0x54; +R3.Event.QUERY_PARSED = 0x55; +R3.Event.RECEIVE_DESTINATION_CHANGED = 0x56; +R3.Event.REGISTER_DEPENDENCIES = 0x57; +R3.Event.REGISTER_UPDATE = 0x58; +R3.Event.REMOVE_COMPONENT = 0x59; +R3.Event.REMOVE_MESH = 0x5a; +R3.Event.REMOVE_PARTICLE_ENGINE = 0x5b; +R3.Event.RENDERER_SIZE_CHANGE = 0x5c; +R3.Event.REPLACE_COMPONENT = 0x5d; +R3.Event.RESOLVE_DEPENDENCIES = 0x5e; +R3.Event.RESTART = 0x5f; +R3.Event.SAVE_COMPONENT = 0x60; +R3.Event.SAVE_COMPONENT_ERROR = 0x61; +R3.Event.SAVING = 0x62; +R3.Event.SELECTION_MODE_CHANGE = 0x63; +R3.Event.SIGN_IN = 0x64; +R3.Event.SIGN_OUT = 0x65; +R3.Event.START = 0x66; +R3.Event.STOP_ALL_AUDIO = 0x67; +R3.Event.STOP_AUDIO = 0x68; +R3.Event.STOP_VISUALIZE = 0x69; +R3.Event.TEXTURE_ANIMATED_CHANGE = 0x6a; +R3.Event.TEXTURE_INSTANCE_UPDATED = 0x6b; +R3.Event.TOUCH_CANCEL = 0x6c; +R3.Event.TOUCH_END = 0x6d; +R3.Event.TOUCH_MOVE = 0x6e; +R3.Event.TOUCH_START = 0x6f; +R3.Event.UNRESOLVED_DEPENDENCIES_UPDATE = 0x70; +R3.Event.VISUALIZE = 0x71; +R3.Event.WINDOW_RESIZE = 0x72; +R3.Event.MAX_EVENTS = 0x73; /** * R3.Event.GetEventName @@ -135,102 +138,105 @@ R3.Event.GetEventName = function(eventId) { case 0xd : return 'build_gui'; case 0xe : return 'canvas_change'; case 0xf : return 'cast_source_changed'; - case 0x10 : return 'compile_failed'; - case 0x11 : return 'compile_success'; - case 0x12 : return 'components_linked'; - case 0x13 : return 'component_cloned'; - case 0x14 : return 'component_created'; - case 0x15 : return 'component_deleted'; - case 0x16 : return 'component_download_complete'; - case 0x17 : return 'component_linked'; - case 0x18 : return 'component_register'; - case 0x19 : return 'component_replaced'; - case 0x1a : return 'component_saved'; - case 0x1b : return 'component_types_update'; - case 0x1c : return 'component_update'; - case 0x1d : return 'continue_all_audio'; - case 0x1e : return 'controls_canvas_change'; - case 0x1f : return 'delete_component'; - case 0x20 : return 'delete_component_error'; - case 0x21 : return 'done_saving'; - case 0x22 : return 'engine_fired_particles_zero'; - case 0x23 : return 'entity_loaded'; - case 0x24 : return 'event_id_update'; - case 0x25 : return 'exclude_from_environment'; - case 0x26 : return 'fetch_components'; - case 0x27 : return 'fetch_component_types'; - case 0x28 : return 'get_api_url'; - case 0x29 : return 'get_application_mode'; - case 0x2a : return 'get_graphics_runtime'; - case 0x2b : return 'get_physics_runtime'; - case 0x2c : return 'get_project'; - case 0x2d : return 'get_remote_api_url'; - case 0x2e : return 'get_render_configuration'; - case 0x2f : return 'get_runtime'; - case 0x30 : return 'get_user'; - case 0x31 : return 'get_websocket_config'; - case 0x32 : return 'get_window_size'; - case 0x33 : return 'image_upload_complete'; - case 0x34 : return 'instance_cloned'; - case 0x35 : return 'instance_created'; - case 0x36 : return 'instance_disposal'; - case 0x37 : return 'instance_loaded'; - case 0x38 : return 'key_down'; - case 0x39 : return 'key_up'; - case 0x3a : return 'load_component'; - case 0x3b : return 'load_component_error'; - case 0x3c : return 'load_font'; - case 0x3d : return 'load_image'; - case 0x3e : return 'load_progress'; - case 0x3f : return 'material_textures_updated'; - case 0x40 : return 'material_type_changed'; - case 0x41 : return 'maximum_projects'; - case 0x42 : return 'mesh_deselected'; - case 0x43 : return 'mesh_face_deselected'; - case 0x44 : return 'mesh_face_selected'; - case 0x45 : return 'mesh_selected'; - case 0x46 : return 'mouse_down'; - case 0x47 : return 'mouse_move'; - case 0x48 : return 'mouse_up'; - case 0x49 : return 'mouse_wheel'; - case 0x4a : return 'mute_audio'; - case 0x4b : return 'name_update'; - case 0x4c : return 'parent_scene_change'; - case 0x4d : return 'parent_world_change'; - case 0x4e : return 'pause'; - case 0x4f : return 'pause_all_audio'; - case 0x50 : return 'play_audio'; - case 0x51 : return 'project_loaded'; - case 0x52 : return 'query_parsed'; - case 0x53 : return 'receive_destination_changed'; - case 0x54 : return 'register_dependencies'; - case 0x55 : return 'register_update'; - case 0x56 : return 'remove_component'; - case 0x57 : return 'remove_mesh'; - case 0x58 : return 'remove_particle_engine'; - case 0x59 : return 'renderer_size_change'; - case 0x5a : return 'replace_component'; - case 0x5b : return 'resolve_dependencies'; - case 0x5c : return 'restart'; - case 0x5d : return 'save_component'; - case 0x5e : return 'save_component_error'; - case 0x5f : return 'saving'; - case 0x60 : return 'selection_mode_change'; - case 0x61 : return 'sign_in'; - case 0x62 : return 'sign_out'; - case 0x63 : return 'start'; - case 0x64 : return 'stop_all_audio'; - case 0x65 : return 'stop_audio'; - case 0x66 : return 'stop_visualize'; - case 0x67 : return 'texture_animated_change'; - case 0x68 : return 'texture_instance_updated'; - case 0x69 : return 'touch_cancel'; - case 0x6a : return 'touch_end'; - case 0x6b : return 'touch_move'; - case 0x6c : return 'touch_start'; - case 0x6d : return 'unresolved_dependencies_update'; - case 0x6e : return 'visualize'; - case 0x6f : return 'window_resize'; + case 0x10 : return 'clear_gui'; + case 0x11 : return 'compile_failed'; + case 0x12 : return 'compile_success'; + case 0x13 : return 'components_linked'; + case 0x14 : return 'component_cloned'; + case 0x15 : return 'component_created'; + case 0x16 : return 'component_deleted'; + case 0x17 : return 'component_download_complete'; + case 0x18 : return 'component_linked'; + case 0x19 : return 'component_register'; + case 0x1a : return 'component_replaced'; + case 0x1b : return 'component_saved'; + case 0x1c : return 'component_types_update'; + case 0x1d : return 'component_update'; + case 0x1e : return 'continue_all_audio'; + case 0x1f : return 'controls_canvas_change'; + case 0x20 : return 'delete_component'; + case 0x21 : return 'delete_component_error'; + case 0x22 : return 'done_saving'; + case 0x23 : return 'engine_fired_particles_zero'; + case 0x24 : return 'entity_loaded'; + case 0x25 : return 'event_id_update'; + case 0x26 : return 'exclude_from_environment'; + case 0x27 : return 'fetch_components'; + case 0x28 : return 'fetch_component_types'; + case 0x29 : return 'get_api_url'; + case 0x2a : return 'get_application_mode'; + case 0x2b : return 'get_graphics_runtime'; + case 0x2c : return 'get_physics_runtime'; + case 0x2d : return 'get_project'; + case 0x2e : return 'get_remote_api_url'; + case 0x2f : return 'get_render_configuration'; + case 0x30 : return 'get_runtime'; + case 0x31 : return 'get_user'; + case 0x32 : return 'get_websocket_config'; + case 0x33 : return 'get_window_size'; + case 0x34 : return 'gui_created'; + case 0x35 : return 'gui_removed'; + case 0x36 : return 'image_upload_complete'; + case 0x37 : return 'instance_cloned'; + case 0x38 : return 'instance_created'; + case 0x39 : return 'instance_disposal'; + case 0x3a : return 'instance_loaded'; + case 0x3b : return 'key_down'; + case 0x3c : return 'key_up'; + case 0x3d : return 'load_component'; + case 0x3e : return 'load_component_error'; + case 0x3f : return 'load_font'; + case 0x40 : return 'load_image'; + case 0x41 : return 'load_progress'; + case 0x42 : return 'material_textures_updated'; + case 0x43 : return 'material_type_changed'; + case 0x44 : return 'maximum_projects'; + case 0x45 : return 'mesh_deselected'; + case 0x46 : return 'mesh_face_deselected'; + case 0x47 : return 'mesh_face_selected'; + case 0x48 : return 'mesh_selected'; + case 0x49 : return 'mouse_down'; + case 0x4a : return 'mouse_move'; + case 0x4b : return 'mouse_up'; + case 0x4c : return 'mouse_wheel'; + case 0x4d : return 'mute_audio'; + case 0x4e : return 'name_update'; + case 0x4f : return 'parent_scene_change'; + case 0x50 : return 'parent_world_change'; + case 0x51 : return 'pause'; + case 0x52 : return 'pause_all_audio'; + case 0x53 : return 'play_audio'; + case 0x54 : return 'project_loaded'; + case 0x55 : return 'query_parsed'; + case 0x56 : return 'receive_destination_changed'; + case 0x57 : return 'register_dependencies'; + case 0x58 : return 'register_update'; + case 0x59 : return 'remove_component'; + case 0x5a : return 'remove_mesh'; + case 0x5b : return 'remove_particle_engine'; + case 0x5c : return 'renderer_size_change'; + case 0x5d : return 'replace_component'; + case 0x5e : return 'resolve_dependencies'; + case 0x5f : return 'restart'; + case 0x60 : return 'save_component'; + case 0x61 : return 'save_component_error'; + case 0x62 : return 'saving'; + case 0x63 : return 'selection_mode_change'; + case 0x64 : return 'sign_in'; + case 0x65 : return 'sign_out'; + case 0x66 : return 'start'; + case 0x67 : return 'stop_all_audio'; + case 0x68 : return 'stop_audio'; + case 0x69 : return 'stop_visualize'; + case 0x6a : return 'texture_animated_change'; + case 0x6b : return 'texture_instance_updated'; + case 0x6c : return 'touch_cancel'; + case 0x6d : return 'touch_end'; + case 0x6e : return 'touch_move'; + case 0x6f : return 'touch_start'; + case 0x70 : return 'unresolved_dependencies_update'; + case 0x71 : return 'visualize'; + case 0x72 : return 'window_resize'; default : throw new Error('Event type not defined : ' + eventId); } diff --git a/src/r3-a-4-component.js b/src/r3-a-4-component.js index a6e7b53..d21bcb5 100644 --- a/src/r3-a-4-component.js +++ b/src/r3-a-4-component.js @@ -681,6 +681,7 @@ R3.Component.prototype.updateFromInstance = function(property) { this[property].g = this.instance[property].g; this[property].b = this.instance[property].b; this[property].a = this.instance[property].a; + return; } if ( @@ -688,6 +689,7 @@ R3.Component.prototype.updateFromInstance = function(property) { ) { this[property].x = this.instance[property].x; this[property].y = this.instance[property].y; + return; } if ( @@ -696,6 +698,7 @@ R3.Component.prototype.updateFromInstance = function(property) { this[property].x = this.instance[property].x; this[property].y = this.instance[property].y; this[property].z = this.instance[property].z; + return; } if ( @@ -706,6 +709,7 @@ R3.Component.prototype.updateFromInstance = function(property) { this[property].y = this.instance[property].y; this[property].z = this.instance[property].z; this[property].w = this.instance[property].w; + return; } if ( diff --git a/src/r3-api-gui.js b/src/r3-api-gui.js deleted file mode 100644 index d54ec8b..0000000 --- a/src/r3-api-gui.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Raw GUI API object - should always correspond with the GUI Schema - * @param apiComponent - * @constructor - */ -R3.API.GUI = function( - apiComponent -) { - - __API_COMPONENT__; - - if (R3.Utils.UndefinedOrNull(apiComponent.domElement)) { - apiComponent.domElement = null; - } - this.domElement = apiComponent.domElement; -}; - -R3.API.GUI.prototype = Object.create(R3.API.Component.prototype); -R3.API.GUI.prototype.constructor = R3.API.GUI; diff --git a/src/r3-api-project-d3-0.js b/src/r3-api-project-d3-0.js index 5f22f51..51a6449 100644 --- a/src/r3-api-project-d3-0.js +++ b/src/r3-api-project-d3-0.js @@ -15,7 +15,7 @@ R3.API.Project.D3 = function( ) { /** - * Override Controls for 3D projects + * Override everything not coming from DB */ __API_COMPONENT__; @@ -114,7 +114,7 @@ R3.API.Project.D3 = function( { parent : this, name : this.name + ' - Orbit Controls', - camera : editCamera, + camera : this.cameras[0], canvas : this.renderers[0].canvas } ) diff --git a/src/r3-api-project-d3-vr.js b/src/r3-api-project-d3-vr.js index 7094343..aa943a7 100644 --- a/src/r3-api-project-d3-vr.js +++ b/src/r3-api-project-d3-vr.js @@ -15,22 +15,62 @@ R3.API.Project.D3.VR = function( ) { /** - * Override Controls for 3D projects + * Override everything not coming from DB */ __API_COMPONENT__; + /** + * This means we need to construct the cameras first if they are not coming from the database + */ + if (R3.Utils.UndefinedOrNull(apiComponent.cameras)) { + var editCamera = new R3.D3.API.Camera.Perspective.Stereo( + { + parent : this, + name : this.name + ' - Stereo Edit Camera' + } + ); + var runCamera = new R3.D3.API.Camera.Perspective.Stereo( + { + parent : this, + name : this.name + ' - Run Camera' + } + ); + apiComponent.cameras = [editCamera, runCamera]; + } + this.cameras = apiComponent.cameras; + /** * And we should also override here the renderers if they are not coming from the API */ if (R3.Utils.UndefinedOrNull(apiComponent.renderers)) { + apiComponent.renderers = [ - new R3.API.Renderer.D3.Canvas.VR( + new R3.API.Renderer.D3.Canvas( { parent : this, - name : this.name + ' - VR Canvas Renderer' + name : this.name + ' - Canvas Renderer', + viewports : [ + new R3.D3.API.Viewport.FixedAspect.VR( + { + parent : this, + name : this.name + ' - FA VR Left Viewport', + side : R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_LEFT + } + ), + new R3.D3.API.Viewport.FixedAspect.VR( + { + parent : this, + name : this.name + ' - FA VR Right Viewport', + side : R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_RIGHT + } + ) + ] } ) ]; + + apiComponent.renderers[0].viewports[0].parent = apiComponent.renderers[0]; + apiComponent.renderers[0].viewports[1].parent = apiComponent.renderers[0]; } this.renderers = apiComponent.renderers; diff --git a/src/r3-api-query-0.js b/src/r3-api-query-0.js index 0cee754..f1a77ce 100644 --- a/src/r3-api-query-0.js +++ b/src/r3-api-query-0.js @@ -15,7 +15,7 @@ R3.API.Query = function( apiComponent ) { - __API_COMPONENT__; + __DEFINE_API_COMPONENT__; if (R3.Utils.UndefinedOrNull(apiComponent.path)) { apiComponent.path = null; @@ -65,6 +65,12 @@ R3.API.Query.LOGIN_TYPE_DEVICE = 'local|remote'; R3.API.Query.LOGIN_TYPE_APPLICATION = 'application'; R3.API.Query.LOGIN_TYPE_VPN = 'vpn'; -R3.API.Query.ACKNOWLEDGED_ALL = 'true|false'; -R3.API.Query.ACKNOWLEDGED_TRUE = 'true'; -R3.API.Query.ACKNOWLEDGED_FALSE = 'false'; \ No newline at end of file +R3.API.Query.ACKNOWLEDGED_ALL = ''; +R3.API.Query.ACKNOWLEDGED_TRUE = ',\n' + + ' {\n' + + ' "term" : { "acknowledged": true }\n' + + ' }'; +R3.API.Query.ACKNOWLEDGED_FALSE = ',\n' + + ' {\n' + + ' "term" : { "acknowledged": false }\n' + + ' }'; \ No newline at end of file diff --git a/src/r3-api-query-devices-0.js b/src/r3-api-query-devices-0.js index 82e1b9c..015a6c3 100644 --- a/src/r3-api-query-devices-0.js +++ b/src/r3-api-query-devices-0.js @@ -7,7 +7,7 @@ R3.API.Query.Devices = function( apiComponent ) { - __DEFINE_API_COMPONENT__ + __API_COMPONENT__; if (R3.Utils.UndefinedOrNull(apiComponent.path)) { apiComponent.path = '/devices/_search'; @@ -44,10 +44,7 @@ R3.API.Query.Devices = function( ' "lt" : "' + R3.API.Query.QUERY_END + '"\n' + ' }\n' + ' }\n' + - ' },\n' + - ' {\n' + - ' "term" : { "acknowledged": ' + R3.API.Query.QUERY_ACKNOWLEDGED + ' }\n' + - ' }\n' + + ' }' + R3.API.Query.QUERY_ACKNOWLEDGED + '\n' + ' ]\n' + ' }\n' + ' }\n' + diff --git a/src/r3-api-query-devices-known.js b/src/r3-api-query-devices-known.js index b53cdf2..7617ea7 100644 --- a/src/r3-api-query-devices-known.js +++ b/src/r3-api-query-devices-known.js @@ -7,7 +7,7 @@ R3.API.Query.Devices.Known = function( apiComponent ) { - __DEFINE_API_COMPONENT__ + __API_COMPONENT__ if (R3.Utils.UndefinedOrNull(apiComponent.acknowledged)) { apiComponent.acknowledged = R3.API.Query.ACKNOWLEDGED_TRUE; diff --git a/src/r3-api-query-devices-unknown.js b/src/r3-api-query-devices-unknown.js index 02ee95d..66f3032 100644 --- a/src/r3-api-query-devices-unknown.js +++ b/src/r3-api-query-devices-unknown.js @@ -7,7 +7,7 @@ R3.API.Query.Devices.Unknown = function( apiComponent ) { - __DEFINE_API_COMPONENT__ + __API_COMPONENT__; if (R3.Utils.UndefinedOrNull(apiComponent.acknowledged)) { apiComponent.acknowledged = R3.API.Query.ACKNOWLEDGED_FALSE; diff --git a/src/r3-api-renderer-d3-0.js b/src/r3-api-renderer-d3-0.js index 7abc681..44cedf2 100644 --- a/src/r3-api-renderer-d3-0.js +++ b/src/r3-api-renderer-d3-0.js @@ -200,6 +200,17 @@ R3.API.Renderer.D3 = function( } this.viewports = apiComponent.viewports; + if (R3.Utils.UndefinedOrNull(apiComponent.scenes)) { + apiComponent.scenes = [new R3.D3.API.Scene( + { + parent : this, + name : this.name + ' - Scene', + viewports : this.viewports + } + )]; + } + this.scenes = apiComponent.scenes; + if (R3.Utils.UndefinedOrNull(apiComponent.alpha)) { apiComponent.alpha = true; } diff --git a/src/r3-api-renderer-d3-canvas-0.js b/src/r3-api-renderer-d3-canvas-0.js index 6d60ecb..73d20ff 100644 --- a/src/r3-api-renderer-d3-canvas-0.js +++ b/src/r3-api-renderer-d3-canvas-0.js @@ -51,3 +51,19 @@ R3.API.Renderer.D3.Canvas.prototype.getSize = function(viewport) { } }; + +R3.API.Renderer.D3.Canvas.prototype.getCanvasAspectRatio = function() { + + return this.canvas.width / this.canvas.height; + +}; + +R3.API.Renderer.D3.Canvas.prototype.getCanvasSize = function() { + + return { + width : this.canvas.width, + height : this.canvas.height, + aspectRatio : this.canvas.width / this.canvas.height + }; + +}; \ No newline at end of file diff --git a/src/r3-api-renderer-d3-canvas-vr.js b/src/r3-api-renderer-d3-canvas-vr.js deleted file mode 100644 index 8925ce4..0000000 --- a/src/r3-api-renderer-d3-canvas-vr.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * R3.API.Renderer.D3.Canvas.VR - * @param apiComponent - * - * @property target - * - * @constructor - */ -R3.API.Renderer.D3.Canvas.VR = function( - apiComponent -) { - - __API_COMPONENT__; - - if (R3.Utils.UndefinedOrNull(apiComponent.viewports)) { - apiComponent.viewports = [ - new R3.D3.API.Viewport.FixedAspect( - { - parent : this, - name : this.name + ' - FA Viewport L', - x : 0, - y : 0, - width : 0.5, - height : 1 - } - ), - new R3.D3.API.Viewport.FixedAspect( - { - parent : this, - name : this.name + ' - FA Viewport R', - x : 0.5, - y : 0, - width : 0.5, - height : 1 - } - ) - ]; - } - this.viewports = apiComponent.viewports; - - R3.API.Renderer.D3.Canvas.call( - this, - apiComponent - ); - -}; - -R3.API.Renderer.D3.Canvas.VR.prototype = Object.create(R3.API.Renderer.D3.Canvas.prototype); -R3.API.Renderer.D3.Canvas.VR.prototype.constructor = R3.API.Renderer.D3.Canvas.VR; diff --git a/src/r3-api-scalar.js b/src/r3-api-scalar.js new file mode 100644 index 0000000..1cf1cb1 --- /dev/null +++ b/src/r3-api-scalar.js @@ -0,0 +1,59 @@ +/** + * R3.API.Scalar + * @param apiComponent + * + * @property x + * @property y + * + * @constructor + */ +R3.API.Scalar = function( + apiComponent +) { + + __DEREGISTER_COMPONENT__; + + __API_COMPONENT__; + + if (R3.Utils.UndefinedOrNull(apiComponent.value)) { + apiComponent.value = 0; + } + this.value = apiComponent.value; + +}; + +R3.API.Scalar.prototype = Object.create(R3.API.Component.prototype); +R3.API.Scalar.prototype.constructor = R3.API.Scalar; + +/** + * Equals + * @param scalar + * @returns {boolean} + */ +R3.API.Scalar.prototype.equals = function(scalar) { + + if (this.value === scalar.value) { + return true; + } else { + return false; + } + +}; + +/** + * Add + * @param v + */ +R3.API.Scalar.prototype.add = function(scalar) { + this.value += scalar.value; + return this; +}; + +/** + * Subtract + * @param v + */ +R3.API.Scalar.prototype.subtract = function(scalar) { + this.value -= scalar.value; + return this; +}; diff --git a/src/r3-canvas.js b/src/r3-canvas.js index 17f5bf7..abe53b1 100644 --- a/src/r3-canvas.js +++ b/src/r3-canvas.js @@ -57,16 +57,23 @@ R3.Canvas.prototype.updateInstance = function(property) { if (property === 'width') { this.instance.setAttribute('width', this.width); this.instance.setAttribute('style', 'left: ' + this.offset.x + 'px;top: ' + this.offset.y + 'px;width:' + this.width + 'px;height:' + this.height + 'px'); + R3.Event.Emit( + R3.Event.CANVAS_RESIZE, + this + ); return; } if (property === 'height') { this.instance.setAttribute('height', this.height); this.instance.setAttribute('style', 'left: ' + this.offset.x + 'px;top: ' + this.offset.y + 'px;width:' + this.width + 'px;height:' + this.height + 'px'); + R3.Event.Emit( + R3.Event.CANVAS_RESIZE, + this + ); return; } - if (property === 'autoUpdateSize') { /** * TODO : whatever - can't remember what the purpose of this stupid property was... diff --git a/src/r3-d3-api-camera-0.js b/src/r3-d3-api-camera-0.js index b29970c..97a2cea 100644 --- a/src/r3-d3-api-camera-0.js +++ b/src/r3-d3-api-camera-0.js @@ -10,16 +10,17 @@ R3.D3.API.Camera = function( apiComponent ) { + __DEFINE_API_COMPONENT__ + + if (R3.Utils.UndefinedOrNull(apiComponent.aspectRatio)) { + apiComponent.aspectRatio = R3.D3.API.Camera.ASPECT_RATIO_1_1; + } + this.aspectRatio = apiComponent.aspectRatio; + R3.D3.API.Object.call( this, apiComponent ); - - if (R3.Utils.UndefinedOrNull(apiComponent.aspect)) { - apiComponent.aspect = R3.D3.API.Camera.ASPECT_RATIO_1_1; - } - this.aspect = apiComponent.aspect; - }; R3.D3.API.Camera.prototype = Object.create(R3.D3.API.Object.prototype); diff --git a/src/r3-d3-api-camera-cube.js b/src/r3-d3-api-camera-cube.js index 307807c..bb2a7bc 100644 --- a/src/r3-d3-api-camera-cube.js +++ b/src/r3-d3-api-camera-cube.js @@ -23,7 +23,7 @@ R3.D3.API.Camera.Cube = function( * Following two properties are hardcoded for Cube Cameras * @type {number} */ - this.aspect = 1; + this.aspectRatio = 1; this.fov = 90; diff --git a/src/r3-d3-api-camera-orthographic-fixedAspect.js b/src/r3-d3-api-camera-orthographic-fixedAspect.js index 35612b6..a1ed136 100644 --- a/src/r3-d3-api-camera-orthographic-fixedAspect.js +++ b/src/r3-d3-api-camera-orthographic-fixedAspect.js @@ -11,7 +11,7 @@ R3.D3.API.Camera.Orthographic.FixedAspect = function( apiComponent ) { - __API_COMPONENT__; + __API_COMPONENT__ R3.D3.API.Camera.Orthographic.call( this, diff --git a/src/r3-d3-api-camera-orthographic-scaledAspect.js b/src/r3-d3-api-camera-orthographic-scaledAspect.js index aed5dac..49ce20a 100644 --- a/src/r3-d3-api-camera-orthographic-scaledAspect.js +++ b/src/r3-d3-api-camera-orthographic-scaledAspect.js @@ -18,7 +18,7 @@ R3.D3.API.Camera.Orthographic.ScaledAspect = function( apiComponent ) { - __API_COMPONENT__; + __API_COMPONENT__ if (R3.Utils.UndefinedOrNull(apiComponent.left)) { apiComponent.left = -5; diff --git a/src/r3-d3-api-camera-perspective-stereo.js b/src/r3-d3-api-camera-perspective-stereo.js index fbb586d..bf3e8f4 100644 --- a/src/r3-d3-api-camera-perspective-stereo.js +++ b/src/r3-d3-api-camera-perspective-stereo.js @@ -7,7 +7,12 @@ R3.D3.API.Camera.Perspective.Stereo = function( apiComponent ) { - __DEFINE_API_COMPONENT__; + __API_COMPONENT__ + + if (R3.Utils.UndefinedOrNull(apiComponent.eyeSeperation)) { + apiComponent.eyeSeperation = 0.064; + } + this.eyeSeperation = apiComponent.eyeSeperation; R3.D3.API.Camera.Perspective.call( this, diff --git a/src/r3-d3-api-scene.js b/src/r3-d3-api-scene.js index 28b6cd0..3a361fb 100644 --- a/src/r3-d3-api-scene.js +++ b/src/r3-d3-api-scene.js @@ -130,6 +130,15 @@ R3.D3.API.Scene = function( } this.enableEffect = apiComponent.enableEffect; + /** + * By default scenes have no viewport so they are able to render outside of viewports (svg rendering, rendertargets, etc) + * But if they do the renderer system will pick it up and render them in their appropriate viewport + */ + if (R3.Utils.UndefinedOrNull(apiComponent.viewport)) { + apiComponent.viewports = []; + } + this.viewports = apiComponent.viewports; + }; R3.D3.API.Scene.prototype = Object.create(R3.API.Component.prototype); diff --git a/src/r3-d3-api-viewport-0.js b/src/r3-d3-api-viewport-0.js index ea6e27c..792ac18 100644 --- a/src/r3-d3-api-viewport-0.js +++ b/src/r3-d3-api-viewport-0.js @@ -10,6 +10,7 @@ * @property width * @property height * @property scenes + * @property offset * * @constructor */ @@ -17,7 +18,7 @@ R3.D3.API.Viewport = function( apiComponent ) { - __API_COMPONENT__; + __DEFINE_API_COMPONENT__; if (R3.Utils.UndefinedOrNull(apiComponent.x)) { apiComponent.x = 0; @@ -39,24 +40,27 @@ R3.D3.API.Viewport = function( } this.height = apiComponent.height; - if (R3.Utils.UndefinedOrNull(apiComponent.scenes)) { - apiComponent.scenes = [new R3.D3.API.Scene( + if (R3.Utils.UndefinedOrNull(apiComponent.offset)) { + apiComponent.offset = new R3.API.Vector2( { + name : this.name + 'Offset', parent : this, - name : this.name + ' - Scene' + register : true, + x : 0, + y : 0 } - )]; + ); } - this.scenes = apiComponent.scenes; + this.offset = apiComponent.offset; }; R3.D3.API.Viewport.prototype = Object.create(R3.API.Component.prototype); R3.D3.API.Viewport.prototype.constructor = R3.D3.API.Viewport; -R3.D3.API.Viewport.ASPECT_RATIO_NONE = 0x1; -R3.D3.API.Viewport.ASPECT_RATIO_4_3 = 0x2; -R3.D3.API.Viewport.ASPECT_RATIO_3_2 = 0x3; -R3.D3.API.Viewport.ASPECT_RATIO_16_10 = 0x4; -R3.D3.API.Viewport.ASPECT_RATIO_17_10 = 0x5; -R3.D3.API.Viewport.ASPECT_RATIO_16_9 = 0x6; +R3.D3.API.Viewport.ASPECT_RATIO_1_1 = 1; +R3.D3.API.Viewport.ASPECT_RATIO_4_3 = 4 / 3; +R3.D3.API.Viewport.ASPECT_RATIO_3_2 = 3 / 2; +R3.D3.API.Viewport.ASPECT_RATIO_16_10 = 16 / 10; +R3.D3.API.Viewport.ASPECT_RATIO_17_10 = 17 / 10; +R3.D3.API.Viewport.ASPECT_RATIO_16_9 = 16 / 9; diff --git a/src/r3-d3-api-viewport-fixedAspect.js b/src/r3-d3-api-viewport-fixedAspect-0.js similarity index 96% rename from src/r3-d3-api-viewport-fixedAspect.js rename to src/r3-d3-api-viewport-fixedAspect-0.js index e9899f2..65428f6 100644 --- a/src/r3-d3-api-viewport-fixedAspect.js +++ b/src/r3-d3-api-viewport-fixedAspect-0.js @@ -15,16 +15,18 @@ R3.D3.API.Viewport.FixedAspect = function( apiComponent ) { + __API_COMPONENT__; + + if (R3.Utils.UndefinedOrNull(apiComponent.aspectRatio)) { + apiComponent.aspectRatio = R3.D3.API.Viewport.ASPECT_RATIO_1_1; + } + this.aspectRatio = apiComponent.aspectRatio; + R3.D3.API.Viewport.call( this, apiComponent ); - if (R3.Utils.UndefinedOrNull(apiComponent.aspectRatio)) { - apiComponent.aspectRatio = R3.D3.API.Viewport.ASPECT_RATIO_16_9; - } - this.aspectRatio = apiComponent.aspectRatio; - }; R3.D3.API.Viewport.FixedAspect.prototype = Object.create(R3.D3.API.Viewport.prototype); diff --git a/src/r3-d3-api-viewport-fixedAspect-vr.js b/src/r3-d3-api-viewport-fixedAspect-vr.js new file mode 100644 index 0000000..f508f32 --- /dev/null +++ b/src/r3-d3-api-viewport-fixedAspect-vr.js @@ -0,0 +1,36 @@ +/** + * R3.D3.API.Viewport.FixedAspect.VR + * + * Respect the aspectRatio setting and adjust viewport x,y,width and height accordingly + * - entire viewport remains visible at all times + * - will have empty space above or below viewport depending on canvas size (if canvas ratio != viewport ratio) + * + * @param apiComponent + * + * @property aspectRatio + * + * @constructor + */ +R3.D3.API.Viewport.FixedAspect.VR = function( + apiComponent +) { + + __API_COMPONENT__; + + if (R3.Utils.UndefinedOrNull(apiComponent.side)) { + apiComponent.side = R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_LEFT; + } + this.side = apiComponent.side; + + R3.D3.API.Viewport.FixedAspect.call( + this, + apiComponent + ); + +}; + +R3.D3.API.Viewport.FixedAspect.VR.prototype = Object.create(R3.D3.API.Viewport.FixedAspect.prototype); +R3.D3.API.Viewport.FixedAspect.VR.prototype.constructor = R3.D3.API.Viewport.FixedAspect.VR; + +R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_LEFT = 0x1; +R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_RIGHT = 0x2; \ No newline at end of file diff --git a/src/r3-d3-api-viewport-zoomedAspect.js b/src/r3-d3-api-viewport-zoomedAspect.js index 8a50a10..a731c67 100644 --- a/src/r3-d3-api-viewport-zoomedAspect.js +++ b/src/r3-d3-api-viewport-zoomedAspect.js @@ -20,7 +20,7 @@ * * - with 'expandHeight' and 'expandWidth' turned off, the VIEWPORT_TYPE_ZOOMED_ASPECT essentially behaves * similar to a VIEWPORT_TYPE_FIXED_ASPECT in the case that the entire viewport actually fits into the canvas - * (when did this ever happen? wouldn't live have been great?) + * (when did this ever happen? wouldn't life have been great?) * * @param apiComponent * diff --git a/src/r3-d3-camera-0.js b/src/r3-d3-camera-0.js index ab91156..392ee05 100644 --- a/src/r3-d3-camera-0.js +++ b/src/r3-d3-camera-0.js @@ -29,9 +29,9 @@ R3.D3.Camera.prototype.constructor = R3.D3.Camera; */ R3.D3.Camera.prototype.updateInstance = function(property) { - if (property === 'aspect') { + if (property === 'aspectRatio') { - this.instance.aspect = this.aspect; + this.instance.aspect = this.aspectRatio; if (typeof this.instance.updateProjectionMatrix === 'function') { this.instance.updateProjectionMatrix(); diff --git a/src/r3-d3-camera-cube.js b/src/r3-d3-camera-cube.js index 0cdb075..b10f570 100644 --- a/src/r3-d3-camera-cube.js +++ b/src/r3-d3-camera-cube.js @@ -61,11 +61,11 @@ R3.D3.Camera.Cube.prototype.createInstance = function() { R3.D3.Camera.Cube.prototype.updateInstance = function(property) { if ( - property === 'aspect' || + property === 'aspectRatio' || property === 'fov' ) { console.warn('Cube camera fov and aspect cannot be changed'); - this.aspect = 1; + this.aspectRatio = 1; this.fov = 90; } diff --git a/src/r3-d3-camera-orthographic-fixedAspect.js b/src/r3-d3-camera-orthographic-fixedAspect.js index 682d62e..f18244e 100644 --- a/src/r3-d3-camera-orthographic-fixedAspect.js +++ b/src/r3-d3-camera-orthographic-fixedAspect.js @@ -102,12 +102,12 @@ R3.D3.Camera.Orthographic.FixedAspect.prototype.getDimensions = function() { /** * Width is greater than height (landscape) */ - if (this.aspect < 1) { + if (this.aspectRatio < 1) { /** * The required aspect is more high than wide - use the full height */ - width = this.aspect * size.height; + width = this.aspectRatio * size.height; height = size.height; } else { @@ -119,18 +119,18 @@ R3.D3.Camera.Orthographic.FixedAspect.prototype.getDimensions = function() { * 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) { + if (this.aspectRatio > currentAspect) { /** * a) */ width = size.width; - height = width / this.aspect; + height = width / this.aspectRatio; } else { /** * b) */ height = size.height; - width = this.aspect * height; + width = this.aspectRatio * height; } } @@ -139,13 +139,13 @@ R3.D3.Camera.Orthographic.FixedAspect.prototype.getDimensions = function() { /** * The height is greater than the width (portrait) */ - if (this.aspect > 1) { + if (this.aspectRatio > 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; + height = width / this.aspectRatio; } else { @@ -158,12 +158,12 @@ R3.D3.Camera.Orthographic.FixedAspect.prototype.getDimensions = function() { * than the current aspect, so we can use the full height of the current size and determine a new width */ - if (this.aspect > currentAspect) { + if (this.aspectRatio > currentAspect) { width = size.width; - height = width / this.aspect; + height = width / this.aspectRatio; } else { height = size.height; - width = this.aspect * height; + width = this.aspectRatio * height; } } diff --git a/src/r3-d3-camera-orthographic-scaledAspect.js b/src/r3-d3-camera-orthographic-scaledAspect.js index b02a13f..265d192 100644 --- a/src/r3-d3-camera-orthographic-scaledAspect.js +++ b/src/r3-d3-camera-orthographic-scaledAspect.js @@ -46,32 +46,32 @@ R3.D3.Camera.Orthographic.ScaledAspect.prototype.updateInstance = function(prope if (property === 'left') { this.instance.left = this.left; - this.aspect = (this.right - this.left) / (this.top - this.bottom); - this.instance.aspect = this.aspect; + this.aspectRatio = (this.right - this.left) / (this.top - this.bottom); + this.instance.aspect = this.aspectRatio; this.instance.updateProjectionMatrix(); return; } if (property === 'right') { this.instance.right = this.right; - this.aspect = (this.right - this.left) / (this.top - this.bottom); - this.instance.aspect = this.aspect; + this.aspectRatio = (this.right - this.left) / (this.top - this.bottom); + this.instance.aspect = this.aspectRatio; this.instance.updateProjectionMatrix(); return; } if (property === 'top') { this.instance.top = this.top; - this.aspect = (this.right - this.left) / (this.top - this.bottom); - this.instance.aspect = this.aspect; + this.aspectRatio = (this.right - this.left) / (this.top - this.bottom); + this.instance.aspect = this.aspectRatio; this.instance.updateProjectionMatrix(); return; } if (property === 'bottom') { this.instance.bottom = this.bottom; - this.aspect = (this.right - this.left) / (this.top - this.bottom); - this.instance.aspect = this.aspect; + this.aspectRatio = (this.right - this.left) / (this.top - this.bottom); + this.instance.aspect = this.aspectRatio; this.instance.updateProjectionMatrix(); return; } diff --git a/src/r3-d3-camera-perspective-0.js b/src/r3-d3-camera-perspective-0.js index a6c8cba..7ab0368 100644 --- a/src/r3-d3-camera-perspective-0.js +++ b/src/r3-d3-camera-perspective-0.js @@ -49,6 +49,17 @@ R3.D3.Camera.Perspective.prototype.updateInstance = function(property) { return; } + if (property === 'lookAt') { + console.log('test here lookAt'); + this.instance.lookAt( + this.lookAt.x, + this.lookAt.y, + this.lookAt.z + ); + this.instance.updateProjectionMatrix(); + return; + } + if (property === 'near') { this.instance.near = this.near; this.instance.updateProjectionMatrix(); diff --git a/src/r3-d3-camera-perspective-stereo.js b/src/r3-d3-camera-perspective-stereo.js index 3827eff..e5ecade 100644 --- a/src/r3-d3-camera-perspective-stereo.js +++ b/src/r3-d3-camera-perspective-stereo.js @@ -26,12 +26,7 @@ R3.D3.Camera.Perspective.Stereo.prototype.constructor = R3.D3.Camera.Perspective */ R3.D3.Camera.Perspective.Stereo.prototype.createInstance = function() { - this.instance = this.graphics.StereoCamera( - this.fov, - this.aspect, - this.near, - this.far - ); + this.instance = this.graphics.StereoCamera(this); __CREATE_INSTANCE__; @@ -42,6 +37,66 @@ R3.D3.Camera.Perspective.Stereo.prototype.createInstance = function() { */ R3.D3.Camera.Perspective.Stereo.prototype.updateInstance = function(property) { - R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + if (property === 'eyeSeperation') { + this.instance.userData.stereo.eyeSep = this.eyeSeperation; + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'position') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'lookAt') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'near') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'far') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'fov') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'filmGauge') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'filmOffset') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'focus') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + if (property === 'zoom') { + R3.D3.Camera.Perspective.prototype.updateInstance.call(this, property); + this.instance.userData.stereo.update(this.instance); + return; + } + + R3.D3.Camera.prototype.updateInstance.call(this, property); }; diff --git a/src/r3-d3-scene.js b/src/r3-d3-scene.js index 03aafe4..9dea662 100644 --- a/src/r3-d3-scene.js +++ b/src/r3-d3-scene.js @@ -14,6 +14,8 @@ R3.D3.Scene = function( this.linkedComponents.textures = [R3.D3.Texture]; this.linkedComponents.materials = [R3.D3.Material]; this.linkedComponents.fog = R3.D3.Fog; + this.linkedComponents.viewports = [R3.D3.Viewport]; + this.linkedComponents.camera = R3.D3.Camera; this.helpers = []; diff --git a/src/r3-d3-viewport-0.js b/src/r3-d3-viewport-0.js index f8d5973..19d0114 100644 --- a/src/r3-d3-viewport-0.js +++ b/src/r3-d3-viewport-0.js @@ -25,12 +25,16 @@ R3.D3.Viewport.prototype.constructor = R3.D3.Viewport; R3.D3.Viewport.prototype.updateInstance = function(property) { if (property === 'x') { - this.instance.x = this.x; + this.instance.x = this.x + this.offset.x; return; } if (property === 'y') { - this.instance.y = this.y; + this.instance.y = this.y + this.offset.y; + return; + } + + if (property === 'offset') { return; } diff --git a/src/r3-d3-viewport-fixedAspect-0.js b/src/r3-d3-viewport-fixedAspect-0.js new file mode 100644 index 0000000..7b9ffe6 --- /dev/null +++ b/src/r3-d3-viewport-fixedAspect-0.js @@ -0,0 +1,202 @@ +/** + * R3.D3.Viewport.FixedAspect + * + * Respect the aspectRatio setting and adjust viewport x,y,width and height accordingly + * - entire viewport remains visible at all times + * - will have empty space above or below viewport depending on canvas size (if canvas ratio != viewport ratio) + * - is centered around center of canvas + * + * @param apiComponent + */ +R3.D3.Viewport.FixedAspect = function( + apiComponent, + inherited +) { + + __INHERIT_AND_INSTANTIATE__; + + R3.D3.Viewport.call( + this, + true + ) + +}; + +R3.D3.Viewport.FixedAspect.prototype = Object.create(R3.D3.Viewport.prototype); +R3.D3.Viewport.FixedAspect.prototype.constructor = R3.D3.Viewport.FixedAspect; + +R3.D3.Viewport.FixedAspect.prototype.createInstance = function() { + + this.calculateDimensions(); + + this.instance = this.graphics.Vector4( + this.x, + this.y, + this.width, + this.height + ); + + __CREATE_INSTANCE__; +}; + +R3.D3.Viewport.FixedAspect.prototype.updateInstance = function(property) { + + /** + * Viewports don't have an explicit size, but calling updateInstance with 'size' property will update its dimensions + */ + if ( + property === 'aspectRatio' || + property === 'size' + ) { + this.calculateDimensions(); + this.instance.x = this.x; + this.instance.y = this.y; + this.instance.z = this.width; + this.instance.w = this.height; + return; + } + + R3.D3.Viewport.prototype.updateInstance.call(this, property); + +}; + +/** + * This calculates the dimensions of the viewport 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.Viewport.FixedAspect.prototype.calculateDimensions = function() { + + var canvasSize = this.parent.getCanvasSize(); + + var canvasAspectRatio = canvasSize.aspectRatio; + + if (canvasAspectRatio > 1) { + + /** + * Width is greater than height (landscape) + */ + + if (this.aspectRatio < 1) { + + /** + * The required aspect ratio is portrait mode - use the full Height of the canvas + */ + this.width = this.aspectRatio * canvasSize.height; + this.height = canvasSize.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.aspectRatio > canvasAspectRatio) { + /** + * a) + */ + this.width = canvasSize.width; + this.height = canvasSize.width / this.aspectRatio; + + } else { + /** + * b) + */ + this.height = canvasSize.height; + this.width = this.aspectRatio * canvasSize.height; + } + + } + + } else { + + /** + * Width is less than height (portrait) + */ + + if (this.aspectRatio > 1) { + + /** + * The required aspect is landscape in a portrait mode - but we are in landscape - use the full width and + * calculate the new height + */ + this.width = canvasSize.width; + this.height = canvasSize.width / this.aspectRatio; + + } 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.aspectRatio > canvasAspectRatio) { + + /** + * a) + */ + this.width = canvasSize.width; + this.height = canvasSize.width / this.aspectRatio; + + } else { + + /** + * b) + */ + this.height = canvasSize.height; + this.width = canvasSize.height * this.aspectRatio; + } + } + } + + /** + * Clamp the values between 0 and 1 + */ + this.width = this.width / canvasSize.width; + this.height = this.height / canvasSize.height; + + /** + * Center the viewport + */ + if (this.height < 1) { + this.y = (1 - this.height) / 2; + } else { + this.y = 0; + } + + if (this.width < 1) { + this.x = (1 - this.width) / 2; + } else { + this.x = 0; + } + + this.x += this.offset.x; + this.y += this.offset.y; + +}; \ No newline at end of file diff --git a/src/r3-d3-viewport-fixedAspect-vr.js b/src/r3-d3-viewport-fixedAspect-vr.js new file mode 100644 index 0000000..fd043be --- /dev/null +++ b/src/r3-d3-viewport-fixedAspect-vr.js @@ -0,0 +1,194 @@ +/** + * R3.D3.Viewport.FixedAspect.VR + * + * Respect the aspectRatio setting and adjust viewport x,y,width and height accordingly + * - entire viewport remains visible at all times + * - will have empty space above or below viewport depending on canvas size (if canvas ratio != viewport ratio) + * - is centered around center of canvas + * + * @param apiComponent + */ +R3.D3.Viewport.FixedAspect.VR = function( + apiComponent +) { + + __RUNTIME_COMPONENT__; + + R3.D3.Viewport.FixedAspect.call( + this, + apiComponent, + true + ) + +}; + +R3.D3.Viewport.FixedAspect.VR.prototype = Object.create(R3.D3.Viewport.FixedAspect.prototype); +R3.D3.Viewport.FixedAspect.VR.prototype.constructor = R3.D3.Viewport.FixedAspect.VR; + +R3.D3.Viewport.FixedAspect.VR.prototype.createInstance = function() { + + R3.D3.Viewport.FixedAspect.prototype.createInstance.call(this); +}; + +R3.D3.Viewport.FixedAspect.VR.prototype.updateInstance = function(property) { + + R3.D3.Viewport.FixedAspect.prototype.updateInstance.call(this, property); + +}; + +/** + * This calculates the dimensions of the viewport 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}} + * + * At all times we have to half the width since this is only one half of the viewport + */ +R3.D3.Viewport.FixedAspect.VR.prototype.calculateDimensions = function() { + + var canvasSize = this.parent.getCanvasSize(); + + var newCanvasWidth = canvasSize.width / 2; + + var canvasAspectRatio = newCanvasWidth / canvasSize.height; + + if (canvasAspectRatio > 1) { + + /** + * Width is greater than height (landscape) + */ + + if (this.aspectRatio < 1) { + + /** + * The required aspect ratio is portrait mode - use the full Height of the canvas + */ + this.width = this.aspectRatio * canvasSize.height; + this.height = canvasSize.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.aspectRatio > canvasAspectRatio) { + /** + * a) + */ + this.width = newCanvasWidth; + this.height = newCanvasWidth / this.aspectRatio; + + } else { + /** + * b) + */ + this.height = canvasSize.height; + this.width = this.aspectRatio * canvasSize.height; + } + + } + + } else { + + /** + * Width is less than height (portrait) + */ + + if (this.aspectRatio > 1) { + + /** + * The required aspect is landscape in a portrait mode - but we are in landscape - use the full width and + * calculate the new height + */ + this.width = newCanvasWidth; + this.height = newCanvasWidth / this.aspectRatio; + + } 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.aspectRatio > canvasAspectRatio) { + + /** + * a) + */ + this.width = newCanvasWidth; + this.height = newCanvasWidth / this.aspectRatio; + + } else { + + /** + * b) + */ + this.height = canvasSize.height; + this.width = canvasSize.height * this.aspectRatio; + } + } + } + + /** + * Clamp the values between 0 and 1 + */ + this.width = this.width / canvasSize.width; + this.height = this.height / canvasSize.height; + + /** + * Center the viewport + */ + if (this.height < 1) { + this.y = (1 - this.height) / 2; + } else { + this.y = 0; + } + + if (this.width < 1) { + this.x = (1 - this.width) / 2; + } else { + this.x = 0; + } + + if (this.side === R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_RIGHT) { + this.offset.x = this.width / 2; + } + + if (this.side === R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_LEFT) { + this.offset.x = -1 * (this.width / 2); + } + + this.x = this.x + this.offset.x; + this.y = this.y + this.offset.y; + /** + * Now we need to modify the x and width dimensions of this viewport + */ + console.log('vr viewport update'); + +}; \ No newline at end of file diff --git a/src/r3-d3-viewport-fixedAspect.js b/src/r3-d3-viewport-fixedAspect.js deleted file mode 100644 index 4245805..0000000 --- a/src/r3-d3-viewport-fixedAspect.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * R3.D3.Viewport.FixedAspect - * @param apiComponent - */ -R3.D3.Viewport.FixedAspect = function( - apiComponent -) { - - __RUNTIME_COMPONENT__; - - R3.D3.Viewport.call( - this, - true - ) - -}; - -R3.D3.Viewport.FixedAspect.prototype = Object.create(R3.D3.Viewport.prototype); -R3.D3.Viewport.FixedAspect.prototype.constructor = R3.D3.Viewport.FixedAspect; - -/** - * - * @returns {boolean} - */ -R3.D3.Viewport.FixedAspect.prototype.createInstance = function() { - - this.instance = this.graphics.Vector4( - this.x, - this.y, - this.width, - this.height - ); - - __CREATE_INSTANCE__; -}; - -/** - * - */ -R3.D3.Viewport.FixedAspect.prototype.updateInstance = function(property) { - - R3.D3.Viewport.prototype.updateInstance.call(this, property); - -}; diff --git a/src/r3-d3-viewport-zoomedAspect.js b/src/r3-d3-viewport-zoomedAspect.js index f0f2a91..f146608 100644 --- a/src/r3-d3-viewport-zoomedAspect.js +++ b/src/r3-d3-viewport-zoomedAspect.js @@ -42,3 +42,4 @@ R3.D3.Viewport.ZoomedAspect.prototype.updateInstance = function(property) { R3.D3.Viewport.prototype.updateInstance.call(this, property); }; + diff --git a/src/r3-gui.js b/src/r3-gui.js index c24ccbc..579b103 100644 --- a/src/r3-gui.js +++ b/src/r3-gui.js @@ -1,75 +1,162 @@ /** - * GUI component - * @param apiComponent + * R3.GUI + * + * This class uses the existing runtime but is not a component - we don't store these to API + * but they do have the capability of changing their runtime implementations + * * @constructor */ -R3.GUI = function( - apiComponent -) { +R3.GUI = function(options) { - __RUNTIME_COMPONENT__; + if (R3.Utils.UndefinedOrNull(options)) { + options = {}; + } - __UPGRADE_TO_RUNTIME__; + this.gui = null; + R3.Event.Emit( + R3.Event.GET_RUNTIME, + this, + function(runtime) { + this.gui = runtime.gui; + }.bind(this) + ); + + if (R3.Utils.UndefinedOrNull(options.id)) { + throw new Error('You need to specify the DOM element ID'); + } + this.id = options.id; + + this.dom = document.getElementById(this.id); + + if (R3.Utils.UndefinedOrNull(options.groups)) { + options.groups = []; + } + this.groups = options.groups; + + this.createInstance(); }; -R3.GUI.prototype = Object.create(R3.Component.prototype); -R3.GUI.prototype.constructor = R3.GUI; +R3.GUI.Group = function(options) { + + if (R3.Utils.UndefinedOrNull(options)) { + options = {}; + } + + if (R3.Utils.UndefinedOrNull(options.components)) { + options.components = []; + } + this.options = options.components; + + if (R3.Utils.UndefinedOrNull(options.templates)) { + options.templates = []; + } + this.options = options.templates; +}; + +R3.GUI.Template = function(options) { + + if (R3.Utils.UndefinedOrNull(options)) { + options = {}; + } + + if (R3.Utils.UndefinedOrNull(options.component)) { + options.component = null; + } + this.component = options.component; + + if (R3.Utils.UndefinedOrNull(options.affected)) { + options.affected = []; + } + this.affected = options.affected; +}; /** * Creates a helper instance */ R3.GUI.prototype.createInstance = function() { - this.instance = new this.guiRuntime.instance( { autoPlace: false } ); - - __CREATE_INSTANCE__; - -}; - -/** - * Updates the instance with the current state - */ -R3.GUI.prototype.updateInstance = function(property) { - - if (property === 'domElement') { - console.warn('todo: update domElement for gui'); - return; + if (R3.Utils.UndefinedOrNull(this.gui)) { + throw new Error('Need a GUI runtime'); } - __UPDATE_INSTANCE__; + this.instance = this.gui.createInstance(); + + this.dom.appendChild(this.gui.getDomElement(this)); + + R3.Event.Emit( + R3.Event.GUI_CREATED, + this + ) }; -/** - * Removes empty folders from instance - */ -R3.GUI.prototype.removeEmtpyFolders = function() { - this.instance.removeEmptyFolders(); +R3.GUI.prototype.dispose = function() { + + this.clear(); + + this.dom.removeChild(this.gui.getDomElement(this)); + + R3.Event.Emit( + R3.Event.GUI_REMOVED, + this + ) + +}; + +R3.GUI.prototype.addPanel = function(component) { + return this.gui.addPanel(this, component); +}; + + +R3.GUI.prototype.addNumber = function(panel, component, property) { + return this.gui.addNumber(this, panel, component, property); +}; + +R3.GUI.prototype.addString = function(panel, component, property) { + return this.gui.addString(this, panel, component, property); +}; + +R3.GUI.prototype.addButton = function(panel, component, property) { + return this.gui.addButton(this, panel, component, property); +}; + +R3.GUI.prototype.addRange = function(panel, component, property) { + return this.gui.addRange(this, panel); +}; + +R3.GUI.prototype.addComponent = function(component) { + this.gui.addComponent(this, component); }; /** * Remove all folders from instance */ -R3.GUI.prototype.removeAllFolders = function() { - this.instance.removeAllFolders(); +R3.GUI.prototype.removeComponent = function(component) { + this.gui.removeComponent(this, component); }; /** - * Adds a folder to instance - * @param folderName + * Adds a group to instance + * @param name * @returns {*} */ -R3.GUI.prototype.addFolder = function(folderName) { - try { - return this.instance.addFolder(folderName); - } catch (e) { - try { - folderName += ' duplicate (' + R3.Utils.RandomId() + ')'; - return this.instance.addFolder(folderName); - } catch (e) { - console.log(e.message); - return null; - } - } +R3.GUI.prototype.addGroup = function(panel, name) { + return this.gui.addGroup(this, panel, name); }; + +/** + * Remove a group + * @param name + */ +R3.GUI.prototype.removeGroup = function(name) { + this.gui.removeGroup(this, name); +}; + +R3.GUI.prototype.removeAllGroups = function() { + this.gui.removeAllGroups(this); +}; + +R3.GUI.prototype.clear = function() { + this.gui.clear(this); +}; \ No newline at end of file diff --git a/src/r3-query-devices-0.js b/src/r3-query-devices-0.js index ec87440..46942d8 100644 --- a/src/r3-query-devices-0.js +++ b/src/r3-query-devices-0.js @@ -4,6 +4,7 @@ * @constructor */ R3.Query.Devices = function( + apiComponent, inherited ) { @@ -19,6 +20,14 @@ R3.Query.Devices = function( R3.Query.Devices.prototype = Object.create(R3.Query.prototype); R3.Query.Devices.prototype.constructor = R3.Query.Devices; +R3.Query.Devices.prototype.createInstance = function() { + + this.instance = true; + + __CREATE_INSTANCE__; + +}; + /** * Updates the instance with the current state */ @@ -27,3 +36,46 @@ R3.Query.Devices.prototype.updateInstance = function(property) { R3.Query.prototype.updateInstance.call(this, property); }; + +R3.Query.Devices.prototype.parse = function(data) { + + this.columns = [ + { + type: 'string', + name: 'Hostname' + }, + { + type: 'string', + name: 'IP' + }, + { + type: 'string', + name: 'MAC Address' + }, + { + type: 'datetime', + name: 'Detected' + }, + ]; + + if (data.error) { + this.rows = [ + ['error', null, null, null] + ] + } else { + this.rows = data.hits.hits.reduce( + function (result, hit) { + var row = [ + hit._source.hostname, + hit._source.ip_v4, + hit._source.mac_address, + new Date(hit._source.timestamp) + ]; + result.push(row); + return result; + }, + [] + ); + } + +}; diff --git a/src/r3-renderer-d3-0.js b/src/r3-renderer-d3-0.js index 3288606..c0a95a3 100644 --- a/src/r3-renderer-d3-0.js +++ b/src/r3-renderer-d3-0.js @@ -10,6 +10,7 @@ R3.Renderer.D3 = function( __INHERIT_ONLY__ this.linkedComponents.viewports = [R3.D3.Viewport]; + this.linkedComponents.scenes = [R3.D3.Scenes]; R3.Renderer.call( this, @@ -222,6 +223,10 @@ R3.Renderer.D3.prototype.updateInstance = function(property) { console.warn('todo: viewports change'); } + if (property === 'scenes') { + console.warn('todo: scenes change'); + } + if (property === 'alpha') { this.instance.alpha = this.alpha; return; diff --git a/src/r3-renderer-d3-canvas-0.js b/src/r3-renderer-d3-canvas-0.js index 890013c..5583b23 100644 --- a/src/r3-renderer-d3-canvas-0.js +++ b/src/r3-renderer-d3-canvas-0.js @@ -77,4 +77,20 @@ R3.Renderer.D3.Canvas.prototype.updateInstance = function(property) { */ R3.Renderer.D3.Canvas.prototype.getSize = function() { return R3.API.Renderer.D3.Canvas.prototype.getSize.call(this); +}; + +/** + * Return the aspect ratio of the canvas + * @returns {*} + */ +R3.Renderer.D3.Canvas.prototype.getCanvasAspectRatio = function() { + return R3.API.Renderer.D3.Canvas.prototype.getCanvasAspectRatio.call(this); +}; + +/** + * Returns the size information of the canvas + * @returns {{width, aspectRatio, height}} + */ +R3.Renderer.D3.Canvas.prototype.getCanvasSize = function() { + return R3.API.Renderer.D3.Canvas.prototype.getCanvasSize.call(this); }; \ No newline at end of file diff --git a/src/r3-renderer-d3-canvas-vr.js b/src/r3-renderer-d3-canvas-vr.js deleted file mode 100644 index dff09b3..0000000 --- a/src/r3-renderer-d3-canvas-vr.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * R3.Renderer.D3.Canvas.VR - * @param apiComponent - * @constructor - */ -R3.Renderer.D3.Canvas.VR = function( - apiComponent -) { - - __RUNTIME_COMPONENT__; - - R3.Renderer.D3.Canvas.call( - this, - apiComponent, - true - ); - -}; - -R3.Renderer.D3.Canvas.VR.prototype = Object.create(R3.Renderer.D3.Canvas.prototype); -R3.Renderer.D3.Canvas.VR.prototype.constructor = R3.Renderer.D3.Canvas.VR; - -/** - * Create R3.Renderer.D3 Instance - * @returns {*} - */ -R3.Renderer.D3.Canvas.VR.prototype.createInstance = function() { - - /** - * 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 or canvas not ready'); - return; - } - - this.instance = this.graphics.Renderer3D(this); - - /** - * 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.VR.prototype.updateInstance = function(property) { - - R3.Renderer.D3.Canvas.prototype.updateInstance.call(this, property); -}; diff --git a/src/r3-runtime-graphics-three.js b/src/r3-runtime-graphics-three.js index 1a6ef7d..58383ac 100644 --- a/src/r3-runtime-graphics-three.js +++ b/src/r3-runtime-graphics-three.js @@ -525,7 +525,7 @@ R3.Runtime.Graphics.Three.prototype.PerspectiveCamera = function(runtimeObject) var instance = new THREE.PerspectiveCamera( runtimeObject.fov, - runtimeObject.aspect, + runtimeObject.aspectRatio, runtimeObject.near, runtimeObject.far ); @@ -548,34 +548,17 @@ R3.Runtime.Graphics.Three.prototype.PerspectiveCamera = function(runtimeObject) return instance; }; -R3.Runtime.Graphics.Three.prototype.StereoCamera = function( - fov, - aspect, - near, - far -) { +R3.Runtime.Graphics.Three.prototype.StereoCamera = function(runtimeObject) { - console.warn('TODO: implement stereo camera again'); + var instance = R3.Runtime.Graphics.Three.prototype.PerspectiveCamera(runtimeObject); + var stereo = new THREE.StereoCamera(); - var camera = new THREE.PerspectiveCamera( - fov, - aspect, - near, - far - ); + stereo.update(instance); - var instance = new THREE.StereoCamera(); + instance.userData.stereo = stereo; - for (var property in instance) { - if ( - instance.hasOwnProperty(property) || - typeof instance[property] === 'function' - ) { - camera[property] = instance[property]; - } - } + return instance; - return camera; }; diff --git a/src/r3-runtime-gui-controlKit.js b/src/r3-runtime-gui-controlKit.js new file mode 100644 index 0000000..5ff3606 --- /dev/null +++ b/src/r3-runtime-gui-controlKit.js @@ -0,0 +1,147 @@ +/** + * R3.Runtime.GUI.ControlKit + * @constructor + */ +R3.Runtime.GUI.ControlKit = function() { + + R3.Runtime.GUI.call( + this + ); + + this.range = [-100, 100]; + + +}; + +R3.Runtime.GUI.ControlKit.prototype = Object.create(R3.Runtime.GUI.prototype); +R3.Runtime.GUI.ControlKit.prototype.constructor = R3.Runtime.GUI.ControlKit; + +R3.Runtime.GUI.ControlKit.prototype.createInstance = function() { + return new ControlKit(); +}; + +R3.Runtime.GUI.ControlKit.prototype.addComponent = function(gui, component) { + + if (component instanceof R3.Color) { + + } + + if (component instanceof R3.Vector2) { + + } + + //... + +}; + +R3.Runtime.GUI.ControlKit.prototype.getDomElement = function(gui) { + return gui.instance._node._element; +}; + +R3.Runtime.GUI.ControlKit.prototype.removeComponent = function(gui, component) { + +}; + +R3.Runtime.GUI.ControlKit.prototype.addPanel = function(gui, name) { + return gui.instance.addPanel({ + label : name, + width : 600, + fixed : false + }); +}; + +R3.Runtime.GUI.ControlKit.prototype.addRamge = function(gui, panel) { + +}; + +R3.Runtime.GUI.ControlKit.prototype.componentUpdate = function(component, property) { + return function() { + /** + * Here we update the property that changed of the component + */ + component.updateInstance(property); + + /** + * If this is a Vector or Quaternion component - the parent has to update its property which + * is this _component, because Vector numbers are a level deeper than the actual vector + */ + if ( + component instanceof R3.Vector2 || + component instanceof R3.Vector3 || + component instanceof R3.Vector4 || + component instanceof R3.Quaternion + ) { + for (var key in component.parent) { + if (component.parent.hasOwnProperty(key) && + component.parent[key] === component + ) { + component.parent.updateInstance(key); + return; + } + } + } + } +}; + +R3.Runtime.GUI.ControlKit.prototype.addNumber = function(gui, panel, component, property) { + + component.range = this.range; + + panel.addRange( + component, + 'range' + ); + panel.addSlider( + component, + property, + 'range', + { + dp : 4, + onChange : this.componentUpdate(component, property), + onFinish : this.componentUpdate(component, property) + } + ); + + panel.addNumberOutput( + component, + property, + { + dp : 4 + } + ); +}; + +R3.Runtime.GUI.ControlKit.prototype.addString = function(gui, panel, component, property) { + panel.addStringInput( + component, + property + ); +}; + +R3.Runtime.GUI.ControlKit.prototype.addButton = function(gui, panel, component, property) { + panel.addButton( + component, + property + ); +}; + + + + +R3.Runtime.GUI.ControlKit.prototype.addGroup = function(gui, panel, name) { + return panel.addGroup({ + label : name + }); +}; + +R3.Runtime.GUI.ControlKit.prototype.removeGroup = function(gui, name) { + +}; + +R3.Runtime.GUI.ControlKit.prototype.removeAllGroups = function(gui) { + +}; + +R3.Runtime.GUI.ControlKit.prototype.clear = function(gui) { + +}; diff --git a/src/r3-runtime-gui-datgui.js b/src/r3-runtime-gui-datgui.js index 8078480..deeba2e 100644 --- a/src/r3-runtime-gui-datgui.js +++ b/src/r3-runtime-gui-datgui.js @@ -8,12 +8,1645 @@ R3.Runtime.GUI.DatGUI = function() { this ); - this.createInstance(); }; R3.Runtime.GUI.DatGUI.prototype = Object.create(R3.Runtime.GUI.prototype); R3.Runtime.GUI.DatGUI.prototype.constructor = R3.Runtime.GUI.DatGUI; -R3.Runtime.GUI.prototype.createInstance = function() { - this.instance = dat.GUI; +R3.Runtime.GUI.DatGUI.prototype.createInstance = function() { + + /** + * Add some GUI behaviour + */ + dat.GUI.prototype.removeEmtpyFolders = function() { + for (var property in this.__folders) { + if (this.__folders.hasOwnProperty(property)){ + + var folder = this.__folders[property]; + + if (folder.__listening.length === 0) { + folder.close(); + this.__ul.removeChild(folder.domElement.parentNode); + delete this.__folders[property]; + this.onResize(); + } + } + } + }; + + dat.GUI.prototype.listen = function(controller) { + const init = this.__listening.length === 0; + this.__listening.push(controller); + + delete this.closed; + + Object.defineProperty(this, 'closed', { + get: function() { + return this.params.closed; + }, + set: function(v) { + // console.log('override here too'); + + this.params.closed = v; + if (this.params.closed) { + this.dom.addClass(this.__ul, 'closed'); + + cancelAnimationFrame(this.animationId); + + } else { + this.dom.removeClass(this.__ul, 'closed'); + + this.updateDisplaysCallback = function() { + + /** + * We store the animationFrameId so we can remove this callback later + */ + this.animationId = requestAnimationFrame(this.updateDisplaysCallback.bind(this)); + + this.__listening.map(function(controller){ + controller.updateDisplay(); + }); + + }.bind(this); + + this.animationId = requestAnimationFrame(this.updateDisplaysCallback); + } + // For browsers that aren't going to respect the CSS transition, + // Lets just check our height against the window height right off + // the bat. + this.onResize(); + + if (this.__closeButton) { + this.__closeButton.innerHTML = v ? 'Open Controls' : 'Close Controls'; + } + }, + configurable: true + }); + + }; + + dat.GUI.prototype.removeAllFolders = function() { + for (var property in this.__folders) { + if (this.__folders.hasOwnProperty(property)){ + + var folder = this.__folders[property]; + + /** + * Theres a big 'TODO' in the controller remove() function to actually remove the listener + * That's what we are going to do now.. - because it really fucks with the framerate eventually + */ + cancelAnimationFrame(folder.animationId); + + folder.__controllers.map( + function(controller) { + controller.remove(); + + } + ); + + folder.__controllers = []; + + folder.__listening = []; + + /** + * Call UpdateDisplays with + */ + folder.close(); + + this.__ul.removeChild(folder.domElement.parentNode); + delete this.__folders[property]; + this.onResize(); + } + } + }; + + return new dat.GUI({autoPlace : false}); +}; + +R3.Runtime.GUI.DatGUI.prototype.getDomElement = function(instance) { + return instance.domElement; +}; + +R3.Runtime.GUI.DatGUI.prototype.addPanel = function(component) { + +}; + +R3.Runtime.GUI.DatGUI.prototype.addComponent = function(component) { + +}; + +R3.Runtime.GUI.DatGUI.prototype.removeComponent = function(component) { + +}; + +R3.Runtime.GUI.DatGUI.prototype.addGroup = function(name) { + try { + return this.instance.addFolder(name); + } catch (e) { + try { + name += ' duplicate (' + R3.Utils.RandomId() + ')'; + return this.instance.addFolder(name); + } catch (e) { + console.log(e.message); + return null; + } + } +}; + +R3.Runtime.GUI.DatGUI.prototype.removeGroup = function(name) { + try { + return this.instance.addFolder(name); + } catch (e) { + try { + name += ' duplicate (' + R3.Utils.RandomId() + ')'; + return this.instance.addFolder(name); + } catch (e) { + console.log(e.message); + return null; + } + } +}; + +R3.Runtime.GUI.DatGUI.prototype.removeAllFolders = function(name) { + try { + return this.instance.addFolder(name); + } catch (e) { + try { + name += ' duplicate (' + R3.Utils.RandomId() + ')'; + return this.instance.addFolder(name); + } catch (e) { + console.log(e.message); + return null; + } + } +}; + +R3.Runtime.GUI.DatGUI.prototype.clear = function(gui) { + gui.instance.destroy(); + gui.removeAllFolders(); +}; + +R3.Runtime.GUI.DatGUI.prototype.onChange = function(property, subProperty, affected) { + return function(value) { + affected.map(function(component){ + + component[property][subProperty] = value; + + if (component instanceof R3.D3.Mesh && property === 'rotation') { + component.useQuaternion = false; + } + + if (component instanceof R3.D3.Mesh && property === 'quaternion') { + component.useQuaternion = true; + } + + if (typeof component[property].updateInstance === 'function') { + component[property].updateInstance(property); + } else if (typeof component[property][subProperty].updateInstance === 'function') { + component[property][subProperty].updateInstance(subProperty); + } else { + component.updateInstance(property); + } + + }); + } +}; + +R3.Runtime.GUI.DatGUI.prototype.controller = function(folder, object, property, subProperty, step, listen, affected, min, max) { + + if (R3.Utils.UndefinedOrNull(min)) { + min = -1000; + } + + if (R3.Utils.UndefinedOrNull(max)) { + max = 1000; + } + + if ( + // property === 'chassisConnectionPointLocal' || + property === 'axleLocal' || + property === 'directionLocal' + ) { + min = -1; + max = 1; + step = 1; + } + + if ( + // property === 'chassisConnectionPointLocal' || + property === 'offset' || + property === 'repeat' || + property === 'position' + ) { + min = -100; + max = 100; + step = 0.0001; + } + + if ( + property === 'scale' + ) { + min = -10; + max = 10; + step = 0.001; + } + + if ( + property === 'rotation' + ) { + min = -Math.PI * 2; + max = Math.PI * 2; + step = 0.0001; + } + + if ( + property === 'mapSize' + ) { + min = 16; + max = 4096; + step = 16; + } + + var handle = folder.add( + object[property], + subProperty, + min, + max, + step + ).name(property + '.' + subProperty); + + handle.onChange(this.onChange(property, subProperty, affected)); + + if (listen) { + handle.listen(); + } + + return handle; +}; + +R3.Runtime.GUI.DatGUI.prototype.buildQuaternionControl = function(folder, componentTemplate, property) { + + var step = 0.1; + + var object = componentTemplate.template; + + var listen = false; + + if (componentTemplate.affected.length === 1) { + /** + * If the template only affects a single object - put the handle on this so we can listen for changes + */ + object = componentTemplate.affected[0]; + + listen = true; + } + + var affected = componentTemplate.affected; + + this.controller(folder, object, property, 'x', step, listen, affected); + this.controller(folder, object, property, 'y', step, listen, affected); + this.controller(folder, object, property, 'z', step, listen, affected); + this.controller(folder, object, property, 'w', step, listen, affected); + this.controller(folder, object, property, 'angle', 0.001, listen, affected, -Math.PI, Math.PI); + + folder.add( + object[property]['axis'], + 'x', + -1, + 1, + 0.01 + ).name('quaternion.axis.x').onChange( + function(value) { + affected.map(function(component){ + component.useQuaternion = true; + component[property]['axis'].x = Number(value); + component.updateInstance('x'); + }) + } + ); + + folder.add( + object[property]['axis'], + 'y', + -1, + 1, + 0.01 + ).name('quaternion.axis.y').onChange( + function(value) { + affected.map(function(component){ + component.useQuaternion = true; + component[property]['axis'].y = Number(value); + component.updateInstance('y'); + }) + } + ); + + folder.add( + object[property]['axis'], + 'z', + -1, + 1, + 0.01 + ).name('quaternion.axis.z').onChange( + function(value) { + affected.map(function(component){ + component.useQuaternion = true; + component[property]['axis'].z = Number(value); + component.updateInstance('z'); + }) + } + ); + +}; + +R3.Runtime.GUI.DatGUI.prototype.buildVectorControl = function(folder, componentTemplate, property) { + + var step = 0.001; + + var object = componentTemplate.template; + + var listen = false; + + if (componentTemplate.affected.length === 1) { + /** + * If the template only affects a single object - put the handle on this so we can listen for changes + */ + object = componentTemplate.affected[0]; + + listen = true; + } + + var affected = componentTemplate.affected; + + var controllers = []; + + if (R3.Utils.IsVector4(object[property])) { + controllers.push(this.controller(folder, object, property, 'w', step, listen, affected)); + } + + controllers.push(this.controller(folder, object, property, 'x', step, listen, affected)); + controllers.push(this.controller(folder, object, property, 'y', step, listen, affected)); + + if ( + R3.Utils.IsVector3(object[property]) || + R3.Utils.IsVector4(object[property]) + ) { + controllers.push(this.controller(folder, object, property, 'z', step, listen, affected)); + } + +}; + +/** + * Builds a Parent Selection control + * @param folder + * @param componentTemplate + * @param property + */ +R3.Runtime.GUI.DatGUI.prototype.buildParentSelectionControl = function(folder, componentTemplate, property) { + + var constructor = componentTemplate.template.parent.__proto__.constructor; + + var options = R3.EntityManager.Instance.findComponentsByConstructor(constructor).reduce( + function(result, object) { + result[object.name] = object; + return result; + }, + { + 'none' : null + } + ); + + var object = componentTemplate.template; + + var affected = componentTemplate.affected; + + folder.add(object, property, options).listen().onChange( + + function(value) { + + var newComponent = null; + + if (value !== 'null') { + newComponent = R3.EntityManager.Instance.findComponentById(value); + } + + affected.map( + function(component) { + + component[property] = newComponent; + component.updateInstance(property); + + if (property === 'parentPhysicsWorld') { + R3.Event.Emit( + R3.Event.PARENT_WORLD_CHANGE, + { + originalWorld : this.initialValue, + newWorld : newComponent, + object : component + } + ) + } + + if (property === 'parentScene') { + R3.Event.Emit( + R3.Event.PARENT_SCENE_CHANGE, + { + originalScene: this.initialValue, + newScene: newComponent, + object: component + } + ); + } + + }.bind(this) + ); + + if (property === 'parent') { + R3.Event.Emit( + R3.Event.BUILD_GUI, + null + ); + } + + this.initialValue = newComponent; + } + ); +}; + +R3.Runtime.GUI.DatGUI.prototype.buildArrayManagerControl = function( + folder, + componentTemplate, + property +) { + + var constructors = componentTemplate.template.linkedComponents[property]; + + if (constructors instanceof Array) { + /** + * All good + */ + } else { + /** + * There is a data mismatch + */ + console.error('data mismatch - something not an array'); + return; + } + + var object = componentTemplate.template; + + var array = object[property]; + + var addArrayItem = function(item, index){ + + var name = 'invalid item'; + + if (item && item.name) { + name = item.name; + } + + var controller = folder.add( + { + 'remove' : function() { + componentTemplate.affected.map(function(component){ + component[property].splice(index, 1); + component.updateInstance(property); + folder.remove(controller); + }); + } + }, + 'remove' + ).name('remove ' + property + '[' + index + '] - ' + name); + + folder.updateDisplay(); + }; + + array.map(addArrayItem); + + var idObject = {}; + + var selectionObject = R3.EntityManager.Instance.findComponentsByConstructor(constructors).reduce( + function(result, component) { + result[component.name] = component; + idObject[component.id] = component; + return result; + }, + { + 'none' : null + } + ); + + var activeSelection = { + component: null, + add: function() { + + componentTemplate.affected.map(function(component) { + //if (component[property].indexOf(activeSelection.component) === -1) { + component[property].push(activeSelection.component); + + R3.Event.Emit( + R3.Event.ARRAY_ITEM_ADDED, + { + component : component, + property : property, + item : activeSelection.component + } + ); + + component.updateInstance(property, activeSelection.component); + + // addArrayItem(activeSelection.component, component[property].length - 1); + //} + }); + + R3.Event.Emit( + R3.Event.BUILD_GUI + ); + } + }; + + folder.add(activeSelection, 'component', selectionObject).name('select ' + property).onChange( + function(value){ + if (value === 'null') { + activeSelection['component'] = null; + } else { + activeSelection['component'] = idObject[value]; + } + } + ).listen(); + + folder.add(activeSelection, 'add').name('add to ' + property); + +}; + +/** + * This is only for uvs right now + */ +R3.Runtime.GUI.DatGUI.prototype.buildUVManagerControl = function( + folder, + componentTemplate, + property +) { + + var object = componentTemplate.template; + + var array = object[property]; + + array.map( + function(uvs, uvSet) { + /** + * uvs should be an array of three vector2's + */ + uvs.map( + function(uv, uvIndex) { + + var onChange = function(__uvSet, __uvIndex, __property) { + return function(value) { + componentTemplate.affected.map( + function(component) { + component.uvs[__uvSet][__uvIndex][__property] = value; + component.updateInstance('uvs', __uvSet, __uvIndex); + } + ); + } + }; + + folder.add(uv, 'x').name('uvs[' + uvSet + '][' + uvIndex +'].x').onChange(onChange(uvSet, uvIndex, 'x')).listen(); + folder.add(uv, 'y').name('uvs[' + uvSet + '][' + uvIndex +'].y').onChange(onChange(uvSet, uvIndex, 'y')).listen(); + } + ) + + } + ); + + +}; + +R3.Runtime.GUI.DatGUI.prototype.buildColorControl = function(folder, componentTemplate, property) { + + var object = componentTemplate.template; + + var tempObject = { + hexColor : object[property].toHex() + }; + + folder.addColor( + tempObject, + 'hexColor' + ).name(property).listen().onChange( + function(value) { + componentTemplate.affected.map( + function(component) { + component[property].fromHex(value); + component[property].updateInstance(property); + } + ) + } + ); + + folder.add( + tempObject, + 'hexColor' + ).name(property).listen().onChange( + function(value) { + componentTemplate.affected.map( + function(component) { + component[property].fromHex(value); + component[property].updateInstance(property); + } + ) + } + ) + +}; + +R3.Runtime.GUI.DatGUI.prototype.buildObjectControl = function(folder, componentTemplate, property) { + + var object = componentTemplate.template[property]; + + if (object === null) { + return; + } + + if ( + property === 'sourceProperties' || + property === 'destinationProperties' + ) { + Object.keys(object).map( + function(propertyId) { + folder.add( + object, + propertyId + ).name(property + '.' + propertyId).listen().onChange( + function(value) { + componentTemplate.affected.map( + function(component){ + component[property][propertyId] = value; + component.updateInstance(property); + } + ); + } + ); + } + ); + } +}; + +R3.Runtime.GUI.DatGUI.prototype.buildSelectControl = function(folder, componentTemplate, property) { + + /** + * We need to discover the constructor for this component + */ + var constructors = null; + + if (componentTemplate.template.linkedComponents && componentTemplate.template.linkedComponents[property]) { + constructors = componentTemplate.template.linkedComponents[property]; + } else { + if (componentTemplate.template[property]) { + constructors = componentTemplate.template[property].constructor; + } + } + + if (!constructors) { + console.log('cannot determine constructor'); + return; + } + + var object = componentTemplate.template; + + var objects = R3.EntityManager.Instance.findComponentsByConstructor(constructors); + + var idObject = {}; + + var options = objects.reduce( + function(result, obj) { + result[obj.name] = obj; + idObject[obj.id] = obj; + return result; + }, + { + 'none' : null + } + ); + + folder.add( + object, + property, + options + ).name(property).listen().onChange( + + function(value) { + + var newComponent = null; + + if (value !== 'null') { + newComponent = idObject[value]; + } + + componentTemplate.affected.map( + function(component) { + component[property] = newComponent; + component.updateInstance(property); + } + ); + + this.initialValue = newComponent; + } + ); +}; + +R3.Runtime.GUI.DatGUI.prototype.buildControl = function(folder, componentTemplate, property) { + + var object = componentTemplate.template; + + var listen = false; + + if (componentTemplate.affected.length === 1) { + /** + * If the template only affects a single object - put the handle on this so we can listen for changes + */ + object = componentTemplate.affected[0]; + + listen = true; + } + + var componentType = componentTemplate.componentType; + + var controllers = []; + + if ( + R3.Utils.IsString(object[property]) || + R3.Utils.IsBoolean(object[property]) + ) { + controllers.push(folder.add(object, property)); + } + + if (R3.Utils.IsNumber(object[property])) { + + var grain = 0.001; + + if (object.grain) { + grain = object.grain; + } + + if (property === 'componentType') { + + var readOnly = { + componentType : R3.Component.GetComponentInfo(object[property]).name + }; + + controllers.push( + folder.add( + readOnly, + 'componentType' + ) + ); + } else if (property === 'systemType') { + controllers.push( + folder.add( + object, + property, + { + 'animation' : R3.System.SYSTEM_TYPE_ANIMATION, + 'gui' : R3.System.SYSTEM_TYPE_GUI, + 'input' : R3.System.SYSTEM_TYPE_INPUT, + 'render' : R3.System.SYSTEM_TYPE_RENDER, + 'storage' : R3.System.SYSTEM_TYPE_STORAGE, + 'linking' : R3.System.SYSTEM_TYPE_LINKING, + 'physics' : R3.System.SYSTEM_TYPE_PHYSICS, + 'custom code' : R3.System.SYSTEM_TYPE_CUSTOM + } + ) + ); + } else if (property === 'controlsType') { + controllers.push( + folder.add( + object, + property, + { + 'touch' : R3.API.Controls.CONTROLS_TYPE_TOUCH, + 'mouse' : R3.API.Controls.CONTROLS_TYPE_MOUSE, + 'keyboard' : R3.API.Controls.CONTROLS_TYPE_KEYBOARD, + 'editor' : R3.API.Controls.CONTROLS_TYPE_EDITOR + } + ) + ); + } else if (property === 'stereoMode') { + controllers.push( + folder.add( + object, + property, + { + 'stereo' : R3.D3.API.Camera.Stereo.STEREO_MODE_STEREO, + 'anaglyph' : R3.D3.API.Camera.Stereo.STEREO_MODE_ANAGLYPH, + 'parallax' : R3.D3.API.Camera.Stereo.STEREO_MODE_PARALLAX + } + ) + ); + } else if (property === 'defaultMode') { + controllers.push( + folder.add( + object, + property, + { + 'run' : R3.API.Project.APPLICATION_MODE_RUN, + 'edit' : R3.API.Project.APPLICATION_MODE_EDIT + } + ) + ); + } else if (property === 'aspectRatioMode') { + controllers.push( + folder.add( + object, + property, + { + 'none' : R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_NONE, + 'fixed' : R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED, + 'based on current' : R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT + } + ) + ); + } else if (property === 'socketType') { + controllers.push( + folder.add( + object, + property, + { + 'none' : R3.API.Socket.TYPE_NONE, + 'cast' : R3.API.Socket.TYPE_CAST, + 'receive' : R3.API.Socket.TYPE_RECEIVE + } + ) + ); + } else if (property === 'castType') { + controllers.push( + folder.add( + object, + property, + { + 'room': R3.API.Socket.Cast.CAST_TYPE_ROOM, + 'peer': R3.API.Socket.Cast.CAST_TYPE_PEER , + 'all': R3.API.Socket.Cast.CAST_TYPE_ALL, + 'all but peer': R3.API.Socket.Cast.CAST_TYPE_ALL_BUT_PEER + } + ) + ); + } else if (property === 'receiveType') { + controllers.push( + folder.add( + object, + property, + { + 'room': R3.API.Socket.Receive.RECEIVE_TYPE_ROOM, + 'peer': R3.API.Socket.Cast.RECEIVE_TYPE_PEER + } + ) + ); + } else if (property === 'drawMode') { + controllers.push( + folder.add( + object, + property, + { + 'triangles' : R3.D3.API.Mesh.DRAW_MODE_TRIANGLES, + 'triangle strip' : R3.D3.API.Mesh.DRAW_MODE_TRIANGLE_STRIP, + 'triangle fan' : R3.D3.API.Mesh.DRAW_MODE_TRIANGLE_FAN + } + ) + ); + } else if (property === 'shadowType') { + controllers.push( + folder.add( + object, + property, + { + 'directional': R3.D3.API.Shadow.SHADOW_TYPE_DIRECTIONAL, + 'spot': R3.D3.API.Shadow.SHADOW_TYPE_SPOT + } + ) + ); + } else if (property === 'shadowMapType') { + controllers.push( + folder.add( + object, + property, + { + 'basic': R3.API.Renderer.SHADOW_MAP_TYPE_BASIC, + 'pcf': R3.API.Renderer.SHADOW_MAP_TYPE_PCF, + 'pcf soft': R3.API.Renderer.SHADOW_MAP_TYPE_PCF_SOFT + } + ) + ); + } else if (property === 'toneMapping') { + controllers.push( + folder.add( + object, + property, + { + 'linear': R3.API.Renderer.TONE_MAPPING_LINEAR, + 'reinhard': R3.API.Renderer.TONE_MAPPING_REINHARD, + 'uncharted 2': R3.API.Renderer.TONE_MAPPING_UNCHARTED_2, + 'cineon': R3.API.Renderer.TONE_MAPPING_CINEON + } + ) + ); + } else if (property === 'opacityType') { + controllers.push( + folder.add( + object, + property, + { + 'constant': R3.D3.API.Particle.OPACITY_TYPE_CONSTANT, + 'fade out': R3.D3.API.Particle.OPACITY_TYPE_FADE_OUT_LINEAR, + 'fade in': R3.D3.API.Particle.OPACITY_TYPE_FADE_IN_LINEAR, + 'fade in / out': R3.D3.API.Particle.OPACITY_TYPE_FADE_IN_OUT_LINEAR + } + ) + ); + } else if (property === 'positionOffsetType') { + controllers.push( + folder.add( + object, + property, + { + 'constant': R3.D3.API.Particle.POSITION_OFFSET_TYPE_CONSTANT, + 'random': R3.D3.API.Particle.POSITION_OFFSET_TYPE_RANDOM, + 'function': R3.D3.API.Particle.POSITION_OFFSET_TYPE_FUNCTION + } + ) + ); + } else if (property === 'directionType') { + controllers.push( + folder.add( + object, + property, + { + 'constant': R3.D3.API.Particle.DIRECTION_TYPE_CONSTANT, + 'random': R3.D3.API.Particle.DIRECTION_TYPE_RANDOM, + 'random normalized': R3.D3.API.Particle.DIRECTION_TYPE_RANDOM_NORMALIZED, + 'function': R3.D3.API.Particle.DIRECTION_TYPE_FUNCTION + } + ) + ); + } else if (property === 'speedType') { + controllers.push( + folder.add( + object, + property, + { + 'constant': R3.D3.API.Particle.SPEED_TYPE_CONSTANT, + 'linear': R3.D3.API.Particle.SPEED_TYPE_LINEAR, + 'exponential': R3.D3.API.Particle.SPEED_TYPE_EXPONENTIAL, + 'logarithmic': R3.D3.API.Particle.SPEED_TYPE_LOGARITHMIC, + '1 / log': R3.D3.API.Particle.SPEED_TYPE_ONE_OVER_LOG, + 'exp' : R3.D3.API.Particle.SPEED_TYPE_EXP, + '1 / exp' : R3.D3.API.Particle.SPEED_TYPE_ONE_OVER_EXP + } + ) + ); + } else if (property === 'scaleType') { + controllers.push( + folder.add( + object, + property, + { + 'constant': R3.D3.API.Particle.SCALE_TYPE_CONSTANT, + 'linear': R3.D3.API.Particle.SCALE_TYPE_LINEAR, + 'exponential': R3.D3.API.Particle.SCALE_TYPE_EXPONENTIAL, + 'random': R3.D3.API.Particle.SCALE_TYPE_RANDOM, + 'random (x = y)': R3.D3.API.Particle.SCALE_TYPE_RANDOM_X_EQUALS_Y, + 'function': R3.D3.API.Particle.SCALE_TYPE_FUNCTION + } + ) + ); + } else if (property === 'rotationType') { + controllers.push( + folder.add( + object, + property, + { + 'constant': R3.D3.API.Particle.ROTATION_TYPE_CONSTANT, + 'random': R3.D3.API.Particle.ROTATION_TYPE_RANDOM, + 'random - x': R3.D3.API.Particle.ROTATION_TYPE_RANDOM_X, + 'random - y': R3.D3.API.Particle.ROTATION_TYPE_RANDOM_Y, + 'random - z': R3.D3.API.Particle.ROTATION_TYPE_RANDOM_Z, + 'function': R3.D3.API.Particle.ROTATION_TYPE_FUNCTION + } + ) + ); + } else if (property === 'broadphaseType') { + controllers.push( + folder.add( + object, + property, + { + 'naive': R3.D3.Broadphase.BROADPHASE_TYPE_NAIVE, + 'grid': R3.D3.Broadphase.BROADPHASE_TYPE_GRID, + 'sap': R3.D3.Broadphase.BROADPHASE_TYPE_SAP + } + ) + ); + } else if (property === 'solverType') { + controllers.push( + folder.add( + object, + property, + { + 'gs': R3.D3.API.Solver.GS_SOLVER, + 'split': R3.D3.API.Solver.SPLIT_SOLVER + } + ) + ); + } else if (property === 'meshType') { + controllers.push( + folder.add( + object, + property, + { + 'normal' : R3.D3.API.Object.OBJECT_TYPE_MESH, + 'curve' : R3.D3.API.Object.OBJECT_TYPE_MESH_CURVE, + 'skinned' : R3.D3.API.Object.OBJECT_TYPE_MESH_SKINNED, + 'plane' : R3.D3.API.Object.OBJECT_TYPE_MESH_PLANE, + 'sphere' : R3.D3.API.Object.OBJECT_TYPE_MESH_SPHERE, + 'box' : R3.D3.API.Object.OBJECT_TYPE_MESH_BOX, + 'cylinder' : R3.D3.API.Object.OBJECT_TYPE_MESH_CYLINDER, + 'text' : R3.D3.API.Object.OBJECT_TYPE_MESH_TEXT + } + ) + ); + } else if (property === 'cameraType') { + controllers.push( + folder.add( + object, + property, + { + 'perspective' : R3.D3.API.Object.OBJECT_TYPE_CAMERA_PERSPECTIVE, + 'orthographic' : R3.D3.API.Object.OBJECT_TYPE_CAMERA_ORTHOGRAPHIC, + 'stereo' : R3.D3.API.Object.OBJECT_TYPE_CAMERA_STEREO, + 'cube' : R3.D3.API.Object.OBJECT_TYPE_CAMERA_CUBE + } + ) + ); + } else if (property === 'passType') { + controllers.push( + folder.add( + object, + property, + { + 'ssao': R3.D3.API.Pass.PASS_TYPE_SSAO, + 'bloom': R3.D3.API.Pass.PASS_TYPE_BLOOM, + 'fxaa': R3.D3.API.Pass.PASS_TYPE_FXAA, + 'render': R3.D3.API.Pass.PASS_TYPE_RENDER + } + ) + ); + } else if (property === 'rendererType') { + controllers.push( + folder.add( + object, + property, + { + '2D': R3.API.Renderer.RENDERER_TYPE_2D, + '3D': R3.API.Renderer.RENDERER_TYPE_3D + } + ) + ); + } else if (property === 'materialType') { + controllers.push( + folder.add( + object, + property, + { + 'standard': R3.D3.API.Material.MATERIAL_TYPE_STANDARD, + 'basic': R3.D3.API.Material.MATERIAL_TYPE_BASIC, + 'phong': R3.D3.API.Material.MATERIAL_TYPE_PHONG, + 'shader': R3.D3.API.Material.MATERIAL_TYPE_SHADER, + 'raw shader': R3.D3.API.Material.MATERIAL_TYPE_SHADER_RAW, + 'points': R3.D3.API.Material.MATERIAL_TYPE_POINTS + // 'toon': R3.D3.API.Material.MATERIAL_TYPE_TOON, + // 'line basic' : R3.D3.API.Material.MATERIAL_TYPE_LINE_BASIC + } + ) + ); + } else if (property === 'side') { + controllers.push( + folder.add( + object, + property, + { + 'double': R3.D3.API.Material.TYPE_DOUBLE_SIDE, + 'front': R3.D3.API.Material.TYPE_FRONT_SIDE, + 'back': R3.D3.API.Material.TYPE_BACK_SIDE + } + ) + ); + } else if (property === 'combine') { + controllers.push( + folder.add( + object, + property, + { + 'multiply': R3.D3.API.Material.COMBINE_MULTIPLY_OPERATION, + 'mix': R3.D3.API.Material.COMBINE_MIX_OPERATION, + 'add': R3.D3.API.Material.COMBINE_ADD_OPERATION + } + ) + ); + } else if (property === 'vertexColors') { + controllers.push( + folder.add( + object, + property, + { + 'none': R3.D3.API.Material.TYPE_NO_COLORS, + 'face': R3.D3.API.Material.TYPE_FACE_COLORS, + 'vertex': R3.D3.API.Material.TYPE_VERTEX_COLORS + } + ) + ); + } else if (property === 'blending') { + controllers.push( + folder.add( + object, + property, + { + 'none': R3.D3.API.Material.TYPE_NO_BLENDING, + 'normal': R3.D3.API.Material.TYPE_NORMAL_BLENDING, + 'additive': R3.D3.API.Material.TYPE_ADDITIVE_BLENDING, + 'subtractive': R3.D3.API.Material.TYPE_SUBTRACTIVE_BLENDING, + 'multiply': R3.D3.API.Material.TYPE_MULTIPLY_BLENDING, + 'custom': R3.D3.API.Material.TYPE_CUSTOM_BLENDING + } + ) + ); + } else if (property === 'blendSrc') { + controllers.push( + folder.add( + object, + property, + { + 'zero': R3.D3.API.Material.TYPE_ZERO_FACTOR, + 'one': R3.D3.API.Material.TYPE_ONE_FACTOR, + 'source color': R3.D3.API.Material.TYPE_SRC_COLOR_FACTOR, + 'one minus source color': R3.D3.API.Material.TYPE_ONE_MINUS_SRC_COLOR_FACTOR, + 'source alpha': R3.D3.API.Material.TYPE_SRC_ALPHA_FACTOR, + 'one minus source alpha': R3.D3.API.Material.TYPE_ONE_MINUS_SRC_ALPHA_FACTOR, + 'destination alpha': R3.D3.API.Material.TYPE_DST_ALPHA_FACTOR, + 'one minus destination alpha': R3.D3.API.Material.TYPE_ONE_MINUS_DST_ALPHA_FACTOR, + 'destination color': R3.D3.API.Material.TYPE_DST_COLOR_FACTOR, + 'one minus destination color': R3.D3.API.Material.TYPE_ONE_MINUS_DST_COLOR_FACTOR, + 'source alpha saturate': R3.D3.API.Material.TYPE_SRC_ALPHA_SATURATE_FACTOR + } + ) + ); + } else if (property === 'blendDst') { + controllers.push( + folder.add( + object, + property, + { + 'zero': R3.D3.API.Material.TYPE_ZERO_FACTOR, + 'one': R3.D3.API.Material.TYPE_ONE_FACTOR, + 'source color': R3.D3.API.Material.TYPE_SRC_COLOR_FACTOR, + 'one minus source color': R3.D3.API.Material.TYPE_ONE_MINUS_SRC_COLOR_FACTOR, + 'source alpha': R3.D3.API.Material.TYPE_SRC_ALPHA_FACTOR, + 'one minus source alpha': R3.D3.API.Material.TYPE_ONE_MINUS_SRC_ALPHA_FACTOR, + 'destination alpha': R3.D3.API.Material.TYPE_DST_ALPHA_FACTOR, + 'one minus destination alpha': R3.D3.API.Material.TYPE_ONE_MINUS_DST_ALPHA_FACTOR, + 'destination color': R3.D3.API.Material.TYPE_DST_COLOR_FACTOR, + 'one minus destination color': R3.D3.API.Material.TYPE_ONE_MINUS_DST_COLOR_FACTOR, + 'source alpha saturate': R3.D3.API.Material.TYPE_SRC_ALPHA_SATURATE_FACTOR + } + ) + ); + } else if (property === 'blendEquation') { + controllers.push( + folder.add( + object, + property, + { + 'add': R3.D3.API.Material.TYPE_ADD_EQUATION, + 'subtract': R3.D3.API.Material.TYPE_SUBTRACT_EQUATION, + 'reverse subtract': R3.D3.API.Material.TYPE_REVERSE_SUBTRACT_EQUATION, + 'min': R3.D3.API.Material.TYPE_MIN_EQUATION, + 'max': R3.D3.API.Material.TYPE_MAX_EQUATION + } + ) + ); + } else if (property === 'depthFunc') { + controllers.push( + folder.add( + object, + property, + { + 'never': R3.D3.API.Material.TYPE_NEVER_DEPTH, + 'always': R3.D3.API.Material.TYPE_ALWAYS_DEPTH, + 'less depth': R3.D3.API.Material.TYPE_LESS_DEPTH, + 'less equal depth': R3.D3.API.Material.TYPE_LESS_EQUAL_DEPTH, + 'equal depth': R3.D3.API.Material.TYPE_EQUAL_DEPTH, + 'greated equal depth': R3.D3.API.Material.TYPE_GREATER_EQUAL_DEPTH, + 'greated depth': R3.D3.API.Material.TYPE_GREATER_DEPTH, + 'not equal depth': R3.D3.API.Material.TYPE_NOT_EQUAL_DEPTH + } + ) + ); + } else if (property === 'wrapS') { + controllers.push( + folder.add( + object, + property, + { + 'repeat': R3.D3.API.Texture.TYPE_REPEAT_WRAPPING, + 'clamp': R3.D3.API.Texture.TYPE_CLAMP_TO_EDGE_WRAPPING, + 'mirrored repeat': R3.D3.API.Texture.TYPE_MIRRORED_REPEAT_WRAPPING + } + ) + ); + } else if (property === 'wrapT') { + controllers.push( + folder.add( + object, + property, + { + 'repeat': R3.D3.API.Texture.TYPE_REPEAT_WRAPPING, + 'clamp': R3.D3.API.Texture.TYPE_CLAMP_TO_EDGE_WRAPPING, + 'mirrored repeat': R3.D3.API.Texture.TYPE_MIRRORED_REPEAT_WRAPPING + } + ) + ); + } else if (property === 'format') { + controllers.push( + folder.add( + object, + property, + { + 'alpha': R3.D3.API.Texture.TYPE_ALPHA_FORMAT, + 'rgb': R3.D3.API.Texture.TYPE_RGB_FORMAT, + 'rgba': R3.D3.API.Texture.TYPE_RGBA_FORMAT, + 'luminance': R3.D3.API.Texture.TYPE_LUMINANCE_FORMAT, + 'luminance alpha': R3.D3.API.Texture.TYPE_LUMINANCE_ALPHA_FORMAT, + 'depth': R3.D3.API.Texture.TYPE_DEPTH_FORMAT + } + ) + ); + } else if (property === 'mapping') { + controllers.push( + folder.add( + object, + property, + { + 'uv': R3.D3.API.Texture.TYPE_UV_MAPPING, + 'cube reflection': R3.D3.API.Texture.TYPE_CUBE_REFLECTION_MAPPING, + 'cube refraction': R3.D3.API.Texture.TYPE_CUBE_REFRACTION_MAPPING, + 'equi rectangular reflection': R3.D3.API.Texture.TYPE_EQUI_RECTANGULAR_REFLECTION_MAPPING, + 'equi rectangular refraction': R3.D3.API.Texture.TYPE_EQUI_RECTANGULAR_REFRACTION_MAPPING, + 'spherical reflection': R3.D3.API.Texture.TYPE_SPHERICAL_REFLECTION_MAPPING, + 'cube uv reflection': R3.D3.API.Texture.TYPE_CUBE_UV_REFLECTION_MAPPING, + 'cube uv refraction': R3.D3.API.Texture.TYPE_CUBE_UV_REFRACTION_MAPPING + } + ) + ); + } else if (property === 'magFilter') { + controllers.push( + folder.add( + object, + property, + { + 'nearest': R3.D3.API.Texture.TYPE_NEAREST_FILTER, + 'nearest mipmap nearest': R3.D3.API.Texture.TYPE_NEAREST_MIPMAP_NEAREST_FILTER, + 'nearest mipmap linear': R3.D3.API.Texture.TYPE_NEAREST_MIPMAP_LINEAR_FILTER, + 'linear': R3.D3.API.Texture.TYPE_LINEAR_FILTER, + 'linear mipmap nearest': R3.D3.API.Texture.TYPE_LINEAR_MIPMAP_NEAREST_FILTER, + 'linear mipmap linear': R3.D3.API.Texture.TYPE_LINEAR_MIPMAP_LINEAR_FILTER + } + ) + ); + } else if (property === 'minFilter') { + controllers.push( + folder.add( + object, + property, + { + 'nearest': R3.D3.API.Texture.TYPE_NEAREST_FILTER, + 'nearest mipmap nearest': R3.D3.API.Texture.TYPE_NEAREST_MIPMAP_NEAREST_FILTER, + 'nearest mipmap linear': R3.D3.API.Texture.TYPE_NEAREST_MIPMAP_LINEAR_FILTER, + 'linear': R3.D3.API.Texture.TYPE_LINEAR_FILTER, + 'linear mipmap nearest': R3.D3.API.Texture.TYPE_LINEAR_MIPMAP_NEAREST_FILTER, + 'linear mipmap linear': R3.D3.API.Texture.TYPE_LINEAR_MIPMAP_LINEAR_FILTER + } + ) + ); + } else if (property === 'textureType') { + controllers.push( + folder.add( + object, + property, + { + 'normal': R3.D3.API.Texture.TEXTURE_TYPE_NONE, + 'image': R3.D3.API.Texture.TEXTURE_TYPE_IMAGE, + 'cube': R3.D3.API.Texture.TEXTURE_TYPE_CUBE, + 'canvas': R3.D3.API.Texture.TEXTURE_TYPE_CANVAS + } + ) + ); + } else if (property === 'storageType') { + controllers.push( + folder.add( + object, + property, + { + 'unsigned byte': R3.D3.API.Texture.TYPE_UNSIGNED_BYTE, + 'byte': R3.D3.API.Texture.TYPE_BYTE, + 'short': R3.D3.API.Texture.TYPE_SHORT, + 'unsigned short': R3.D3.API.Texture.TYPE_UNSIGNED_SHORT, + 'int': R3.D3.API.Texture.TYPE_INT, + 'unsigned int': R3.D3.API.Texture.TYPE_UNSIGNED_INT, + 'float': R3.D3.API.Texture.TYPE_FLOAT, + 'half float': R3.D3.API.Texture.TYPE_HALF_FLOAT + } + ) + ); + } else if (property === 'aspectRatio') { + controllers.push( + folder.add( + object, + property, + { + 'none': R3.API.Renderer.ASPECT_RATIO_NONE, + '4:3 (1.3333)': R3.API.Renderer.ASPECT_RATIO_4_3, + '3:2 (1.5)': R3.API.Renderer.ASPECT_RATIO_3_2, + '16:10 (1.6667)': R3.API.Renderer.ASPECT_RATIO_16_10, + '17:10 (1.7)': R3.API.Renderer.ASPECT_RATIO_17_10, + '16:9 (1.7778)': R3.API.Renderer.ASPECT_RATIO_16_9 + } + ) + ); + } else if (property === 'scaleMode') { + controllers.push( + folder.add( + object, + property, + { + 'none': R3.API.Renderer.SCALE_MODE_NONE, + 'letterbox': R3.API.Renderer.SCALE_MODE_LETTERBOX, + 'zoom-bigger': R3.API.Renderer.SCALE_MODE_ZOOM_TO_BIGGER, + 'non-uniform': R3.API.Renderer.SCALE_MODE_NON_UNIFORM + } + ) + ); + } else if (property === 'encoding') { + controllers.push( + folder.add( + object, + property, + { + 'linear': R3.D3.API.Texture.TYPE_LINEAR_ENCODING, + 'srgb': R3.D3.API.Texture.TYPE_SRGB_ENCODING, + 'gamma': R3.D3.API.Texture.TYPE_GAMMA_ENCODING, + 'rgbe': R3.D3.API.Texture.TYPE_RGBE_ENCODING, + 'log luv': R3.D3.API.Texture.TYPE_LOG_LUV_ENCODING, + 'rgbm7': R3.D3.API.Texture.TYPE_RGBM7_ENCODING, + 'rgbm16': R3.D3.API.Texture.TYPE_RGBM16_ENCODING, + 'rgbd': R3.D3.API.Texture.TYPE_RGBD_ENCODING + } + ) + ); + } else if (property === 'lightType') { + controllers.push( + folder.add( + object, + property, + { + 'ambient': R3.D3.API.Light.LIGHT_TYPE_AMBIENT, + 'directional': R3.D3.API.Light.LIGHT_TYPE_DIRECTIONAL, + 'spot': R3.D3.API.Light.LIGHT_TYPE_SPOT, + 'point': R3.D3.API.Light.LIGHT_TYPE_POINT, + 'hemisphere': R3.D3.API.Light.LIGHT_TYPE_HEMISPHERE, + 'rect area': R3.D3.API.Light.LIGHT_TYPE_RECT_AREA + } + ) + ); + } else if (property === 'eventId') { + + var options = {}; + + for (var i = 0; i < 200; i++) { + try { + options[R3.Event.GetEventName(i)] = i; + } catch (error) { + + } + } + + controllers.push( + folder.add( + object, + property, + options + ) + ); + } else if (property === 'functionType') { + controllers.push( + folder.add( + object, + property, + { + 'rotation': R3.D3.Animation.ANIMATION_FUNCTION_TYPE_ROTATION, + 'translation': R3.D3.Animation.ANIMATION_FUNCTION_TYPE_TRANSLATION, + 'scale': R3.D3.Animation.ANIMATION_FUNCTION_TYPE_SCALE + } + ) + ); + } else { + + /** + * Try to guess a scale for this property + */ + if ( + property === 'opacity' || + property === 'fadeInFactor' || + property === 'fadeOutFactor' || + property === 'metalness' || + property === 'roughness' || + property === 'aoClamp' || + property === 'lumInfluence' || + property === 'volume' + ) { + controllers.push(folder.add(object, property, 0, 1.0, 0.001)); + } else if ( + property === 'cubeResolution' + ) { + controllers.push(folder.add(object, property, 16, 4096, 16)); + } else if ( + property === 'shininess' || + property === 'fov' + ) { + controllers.push(folder.add(object, property, -255, 255, 1)); + } else if ( + property === 'aspect' || + property === 'wireframeLineWidth' || + property === 'lineWidth' + ) { + controllers.push(folder.add(object, property, 0, 5, 0.001)); + } else if ( + property === 'bumpScale' || + property === 'normalScale' || + property === 'displacementScale' || + property === 'heightMapScale' || + property === 'lightMapIntensity' || + property === 'aoMapIntensity' || + property === 'envMapIntensity' || + property === 'intensity' + ) { + controllers.push(folder.add(object, property, -10, 10, 0.001)); + } else if ( + property === 'minX' || + property === 'minY' || + property === 'minZ' || + property === 'maxX' || + property === 'maxY' || + property === 'maxZ' || + property === 'offsetX' + ) { + controllers.push(folder.add(object, property, -1000, 1000, 0.01)); + } else if ( + property === 'widthSegments' || + property === 'radiusSegments' || + property === 'heightSegments' || + property === 'particlesPerSecond' + ) { + controllers.push(folder.add(object, property, 1, 1000, 1)); + } else if ( + property === 'width' || + property === 'height' + ) { + controllers.push(folder.add(object, property, 0, 4096, 0.001)); + } else if ( + property === 'depth' || + property === 'radius' + ) { + + if (object instanceof R3.D3.Pass.Bloom) { + controllers.push(folder.add(object, property, -10, 10, 0.001)); + } else { + controllers.push(folder.add(object, property, 0, 1000, 0.001)); + } + + } else if ( + property === 'near' || + property === 'distanceGrain' || + property === 'envMapIntensity' + ) { + controllers.push(folder.add(object, property, -10, 100, 0.001)); + } else if ( + property === 'bumpScale' || + property === 'speed' + ) { + controllers.push(folder.add(object, property, 0, 100, 0.01)); + } else if ( + property === 'heightOffset' || + property === 'rotationFactor' + ) { + controllers.push(folder.add(object, property, -100, 100, 0.001)); + } else if ( + property === 'friction' + ) { + controllers.push(folder.add(object, property, 0, 1000, 0.01)); + } else if ( + property === 'radiusTop' || + property === 'radiusBottom' + ) { + controllers.push(folder.add(object, property, 0, 100, 0.1)); + } else if ( + property === 'mass' + ) { + controllers.push(folder.add(object, property, 0, 1000, 0.1)); + } else if ( + property === 'sensitivity' + ) { + controllers.push(folder.add(object, property, 1, 50, 1)); + } else if ( + property === 'density' || + property === 'bias' || + property === 'threshold' + ) { + controllers.push(folder.add(object, property, 0, 1, 0.0001)); + } else if ( + property === 'strength' || + property === 'power' + ) { + controllers.push(folder.add(object, property, 0, 25, 0.01)); + } else if ( + property === 'thetaLength' || + property === 'angle' + ) { + controllers.push(folder.add(object, property, -Math.PI * 2, Math.PI * 2, 0.01)); + } else if ( + property === 'port' || + property === 'far' + ) { + controllers.push(folder.add(object, property, 1, 65536, 1)); + } else if ( + property === 'eyeSep' + ) { + controllers.push(folder.add(object, property, -2, 2, 0.0001)); + } else if ( + property === 'arc' || + property === 'size' + ) { + controllers.push(folder.add(object, property, 0, 200, 0.001)); + } else { + controllers.push(folder.add(object, property, -1000, 1000, 0.1)); + } + + + + } + } + + controllers.map( + function(controller) { + + if (property === 'name') { + controller.onFinishChange( + function(__handle, __folder) { + return function(value) { + + componentTemplate.affected.map( + function(component){ + component[property] = value; + component.updateInstance(property); + } + ); + + var li = __folder.domElement.getElementsByClassName('title')[0]; + li.innerHTML = value; + } + }(controller, folder) + ); + } else { + controller.onChange( + function(value) { + + if (typeof this.initialValue === 'number') { + value = Number(value); + } + + componentTemplate.affected.map( + function(component){ + component[property] = value; + component.updateInstance(property); + } + ); + } + ); + } + + if (listen) { + controller.listen(); + } + + } + ); + }; diff --git a/src/r3-scalar.js b/src/r3-scalar.js new file mode 100644 index 0000000..91426e6 --- /dev/null +++ b/src/r3-scalar.js @@ -0,0 +1,49 @@ +/** + * R3.Scalar + * @param apiComponent + * + * @property x + * @property y + * + * @constructor + */ +R3.Scalar = function( + apiComponent +) { + + __RUNTIME_COMPONENT__; + + __UPGRADE_TO_RUNTIME__; + +}; + +R3.Scalar.prototype = Object.create(R3.Component.prototype); +R3.Scalar.prototype.constructor = R3.Scalar; + +/** + * Creates an instance vector2 + * @returns {*} + */ +R3.Scalar.prototype.createInstance = function() { + + this.instance = { + value : this.value + }; + + __CREATE_INSTANCE__; + +}; + +/** + * Updates the instance vector, calls updateInstance on the parent object + */ +R3.Scalar.prototype.updateInstance = function(property) { + + if (property === 'value') { + this.instance.value = this.value; + return; + } + + __UPDATE_INSTANCE__; + +}; diff --git a/src/r3-system-gui.js b/src/r3-system-gui.js index 1aed505..4422e0f 100644 --- a/src/r3-system-gui.js +++ b/src/r3-system-gui.js @@ -7,1813 +7,243 @@ * R3.System.GU * @constructor */ -R3.System.GUI = function() { +R3.System.GUI = function(options) { + + if (R3.Utils.UndefinedOrNull(options)) { + options = {}; + } R3.System.call(this); - this.guis = []; + if (R3.Utils.UndefinedOrNull(options.guis)) { + options.guis = []; + } + this.guis = options.guis; - this.components = []; + this.guiCreatedSubscription = null; - /** - * When we want to show a specific set of components - we backup the current components and then restore them - * later when we are done. - * @type {null} - */ - this.backupComponents = []; - - this.faces = []; - - this.exclusiveMode = false; + this.guiRemovedSubscription = null; this.buildGUISubscription = null; - this.meshDeletedSubscription = null; + this.clearGUISubscription = null; - this.meshSelectedSubscription = null; + this.beforeRenderSubscription = null; - this.meshDeselectedSubscription = null; - this.newEntitySubscription = null; - - this.meshSelectionObjects = {}; - - this.sourceChangedSubscription = null; - - this.instanceCreatedSubscription = null; - - this.removeComponentSubscription = null; - - this.windowResizeSubscription = null; - - this.meshFaceSelectedSubscription = null; - - this.meshFaceDeselectedSubscription = null; + // this.faces = []; + // + // this.exclusiveMode = false; + // + // + // this.meshDeletedSubscription = null; + // + // this.meshSelectedSubscription = null; + // + // this.meshDeselectedSubscription = null; + // + // this.newEntitySubscription = null; + // + // this.meshSelectionObjects = {}; + // + // this.sourceChangedSubscription = null; + // + // + // + // this.windowResizeSubscription = null; + // + // this.meshFaceSelectedSubscription = null; + // + // this.meshFaceDeselectedSubscription = null; }; R3.System.GUI.prototype = Object.create(R3.System.prototype); R3.System.GUI.prototype.constructor = R3.System.GUI; -R3.System.GUI.prototype.windowResize = function(data) { - this.guis.map( - function(gui) { - gui.instance.domElement.getElementsByTagName('ul')[0].style.maxHeight = data.height - 93 + 'px'; - } - ); -}; - -R3.System.GUI.prototype.initialize = function(gui) { - - var length = this.guis.length; - - gui.instance.domElement.style.position = 'absolute'; - gui.instance.domElement.style.top = length * 34 + 'px'; - gui.instance.domElement.style.right = '0px'; - - gui.domElement.instance.parentElement.appendChild(gui.instance.domElement); - - gui.instance.domElement.getElementsByTagName('ul')[0].style.maxHeight = window.screen.availHeight - 93 + 'px'; -}; - -R3.System.GUI.prototype.instanceCreated = function(data) { - if (data.component instanceof R3.GUI) { - R3.Utils.PushUnique(this.guis, data.component); - this.initialize(data.component); - } -}; - -R3.System.GUI.prototype.removeComponent = function(data) { - - if (data.component instanceof R3.GUI) { - var index = this.guis.indexOf(data.component); - - if (index === -1) { - console.warn('gui system out of sync'); - } else { - var gui = this.guis[index]; - - gui.domElement.instance.parentElement.removeChild(gui.instance.domElement); - - this.guis.splice(index, 1); - } - } - -}; R3.System.GUI.prototype.start = function() { - R3.System.prototype.start.call(this); - - this.instanceCreatedSubscription = R3.Event.Subscribe( - R3.Event.INSTANCE_CREATED, - this.instanceCreated.bind(this) + this.guiCreatedSubscription = R3.Event.Subscribe( + R3.Event.GUI_CREATED, + this.guiCreated.bind(this) ); - this.removeComponentSubscription = R3.Event.Subscribe( - R3.Event.REMOVE_COMPONENT, - this.removeComponent.bind(this) + this.guiRemovedSubscription = R3.Event.Subscribe( + R3.Event.GUI_REMOVED, + this.guiRemoved.bind(this) ); - this.windowResizeSubscription = R3.Event.Subscribe( - R3.Event.WINDOW_RESIZE, - this.windowResize.bind(this) - ); - - this.meshFaceSelectedSubscription = R3.Event.Subscribe( - R3.Event.MESH_FACE_SELECTED, - this.meshFaceSelected.bind(this) - ); - - this.meshFaceDeselectedSubscription = R3.Event.Subscribe( - R3.Event.MESH_FACE_DESELECTED, - this.meshFaceDeselected.bind(this) - ); - - this.guis = R3.EntityManager.Instance.queryComponents(R3.Component.GUI); - this.guis.map( - function(gui){ - this.initialize(gui); - }.bind(this) - ); - - /** - * Add some GUI behaviour - */ - dat.GUI.prototype.removeEmtpyFolders = function() { - for (var property in this.__folders) { - if (this.__folders.hasOwnProperty(property)){ - - var folder = this.__folders[property]; - - if (folder.__listening.length === 0) { - folder.close(); - this.__ul.removeChild(folder.domElement.parentNode); - delete this.__folders[property]; - this.onResize(); - } - } - } - }; - - dat.GUI.prototype.listen = function(controller) { - const init = this.__listening.length === 0; - this.__listening.push(controller); - - delete this.closed; - - Object.defineProperty(this, 'closed', { - get: function() { - return this.params.closed; - }, - set: function(v) { - // console.log('override here too'); - - this.params.closed = v; - if (this.params.closed) { - this.dom.addClass(this.__ul, 'closed'); - - cancelAnimationFrame(this.animationId); - - } else { - this.dom.removeClass(this.__ul, 'closed'); - - this.updateDisplaysCallback = function() { - - /** - * We store the animationFrameId so we can remove this callback later - */ - this.animationId = requestAnimationFrame(this.updateDisplaysCallback.bind(this)); - - this.__listening.map(function(controller){ - controller.updateDisplay(); - }); - - }.bind(this); - - this.animationId = requestAnimationFrame(this.updateDisplaysCallback); - } - // For browsers that aren't going to respect the CSS transition, - // Lets just check our height against the window height right off - // the bat. - this.onResize(); - - if (this.__closeButton) { - this.__closeButton.innerHTML = v ? 'Open Controls' : 'Close Controls'; - } - }, - configurable: true - }); - - }; - - dat.GUI.prototype.removeAllFolders = function() { - for (var property in this.__folders) { - if (this.__folders.hasOwnProperty(property)){ - - var folder = this.__folders[property]; - - /** - * Theres a big 'TODO' in the controller remove() function to actually remove the listener - * That's what we are going to do now.. - because it really fucks with the framerate eventually - */ - cancelAnimationFrame(folder.animationId); - - folder.__controllers.map( - function(controller) { - controller.remove(); - - } - ); - - folder.__controllers = []; - - folder.__listening = []; - - /** - * Call UpdateDisplays with - */ - folder.close(); - - this.__ul.removeChild(folder.domElement.parentNode); - delete this.__folders[property]; - this.onResize(); - } - } - }; - this.buildGUISubscription = R3.Event.Subscribe( R3.Event.BUILD_GUI, this.buildGUI.bind(this) ); - this.meshDeletedSubscription = R3.Event.Subscribe( - R3.Event.REMOVE_MESH, - this.meshDeleted.bind(this) + this.clearGUISubscription = R3.Event.Subscribe( + R3.Event.CLEAR_GUI, + this.clearGUI.bind(this) ); - this.meshSelectedSubscription = R3.Event.Subscribe( - R3.Event.MESH_SELECTED, - this.meshSelected.bind(this) + this.beforeRenderSubscription = R3.Event.Subscribe( + R3.Event.BEFORE_RENDER, + this.beforeRender.bind(this) ); - this.meshDeselectedSubscription = R3.Event.Subscribe( - R3.Event.MESH_DESELECTED, - this.meshDeslected.bind(this) - ); + R3.System.prototype.start.call(this); - this.componentRemovedSubscription = R3.Event.Subscribe( - R3.Event.REMOVE_COMPONENT, - this.removeComponent.bind(this) - ); - this.sourceChangedSubscription = R3.Event.Subscribe( - R3.Event.CAST_SOURCE_CHANGED, - this.castSourceChanged.bind(this) - ); - - this.destinationChangedSubscription = R3.Event.Subscribe( - R3.Event.RECEIVE_DESTINATION_CHANGED, - this.receiveDestinationChanged.bind(this) - ); - -}; - -R3.System.GUI.prototype.onChange = function(property, subProperty, affected) { - return function(value) { - affected.map(function(component){ - - component[property][subProperty] = value; - - if (component instanceof R3.D3.Mesh && property === 'rotation') { - component.useQuaternion = false; - } - - if (component instanceof R3.D3.Mesh && property === 'quaternion') { - component.useQuaternion = true; - } - - if (typeof component[property].updateInstance === 'function') { - component[property].updateInstance(property); - } else if (typeof component[property][subProperty].updateInstance === 'function') { - component[property][subProperty].updateInstance(subProperty); - } else { - component.updateInstance(property); - } - - }); - } -}; - -R3.System.GUI.prototype.controller = function(folder, object, property, subProperty, step, listen, affected, min, max) { - - if (R3.Utils.UndefinedOrNull(min)) { - min = -1000; - } - - if (R3.Utils.UndefinedOrNull(max)) { - max = 1000; - } - - if ( - // property === 'chassisConnectionPointLocal' || - property === 'axleLocal' || - property === 'directionLocal' - ) { - min = -1; - max = 1; - step = 1; - } - - if ( - // property === 'chassisConnectionPointLocal' || - property === 'offset' || - property === 'repeat' || - property === 'position' - ) { - min = -100; - max = 100; - step = 0.0001; - } - - if ( - property === 'scale' - ) { - min = -10; - max = 10; - step = 0.001; - } - - if ( - property === 'rotation' - ) { - min = -Math.PI * 2; - max = Math.PI * 2; - step = 0.0001; - } - - if ( - property === 'mapSize' - ) { - min = 16; - max = 4096; - step = 16; - } - - var handle = folder.add( - object[property], - subProperty, - min, - max, - step - ).name(property + '.' + subProperty); - - handle.onChange(this.onChange(property, subProperty, affected)); - - if (listen) { - handle.listen(); - } - - return handle; -}; - -R3.System.GUI.prototype.buildQuaternionControl = function(folder, componentTemplate, property) { - - var step = 0.1; - - var object = componentTemplate.template; - - var listen = false; - - if (componentTemplate.affected.length === 1) { - /** - * If the template only affects a single object - put the handle on this so we can listen for changes - */ - object = componentTemplate.affected[0]; - - listen = true; - } - - var affected = componentTemplate.affected; - - this.controller(folder, object, property, 'x', step, listen, affected); - this.controller(folder, object, property, 'y', step, listen, affected); - this.controller(folder, object, property, 'z', step, listen, affected); - this.controller(folder, object, property, 'w', step, listen, affected); - this.controller(folder, object, property, 'angle', 0.001, listen, affected, -Math.PI, Math.PI); - - folder.add( - object[property]['axis'], - 'x', - -1, - 1, - 0.01 - ).name('quaternion.axis.x').onChange( - function(value) { - affected.map(function(component){ - component.useQuaternion = true; - component[property]['axis'].x = Number(value); - component.updateInstance('x'); - }) - } - ); - - folder.add( - object[property]['axis'], - 'y', - -1, - 1, - 0.01 - ).name('quaternion.axis.y').onChange( - function(value) { - affected.map(function(component){ - component.useQuaternion = true; - component[property]['axis'].y = Number(value); - component.updateInstance('y'); - }) - } - ); - - folder.add( - object[property]['axis'], - 'z', - -1, - 1, - 0.01 - ).name('quaternion.axis.z').onChange( - function(value) { - affected.map(function(component){ - component.useQuaternion = true; - component[property]['axis'].z = Number(value); - component.updateInstance('z'); - }) - } - ); - -}; - -R3.System.GUI.prototype.buildVectorControl = function(folder, componentTemplate, property) { - - var step = 0.001; - - var object = componentTemplate.template; - - var listen = false; - - if (componentTemplate.affected.length === 1) { - /** - * If the template only affects a single object - put the handle on this so we can listen for changes - */ - object = componentTemplate.affected[0]; - - listen = true; - } - - var affected = componentTemplate.affected; - - var controllers = []; - - if (R3.Utils.IsVector4(object[property])) { - controllers.push(this.controller(folder, object, property, 'w', step, listen, affected)); - } - - controllers.push(this.controller(folder, object, property, 'x', step, listen, affected)); - controllers.push(this.controller(folder, object, property, 'y', step, listen, affected)); - - if ( - R3.Utils.IsVector3(object[property]) || - R3.Utils.IsVector4(object[property]) - ) { - controllers.push(this.controller(folder, object, property, 'z', step, listen, affected)); - } - -}; - -/** - * Builds a Parent Selection control - * @param folder - * @param componentTemplate - * @param property - */ -R3.System.GUI.prototype.buildParentSelectionControl = function(folder, componentTemplate, property) { - - console.warn('todo : fix this'); - return; + // this.windowResizeSubscription = R3.Event.Subscribe( + // R3.Event.WINDOW_RESIZE, + // this.windowResize.bind(this) + // ); // - // var type = R3.Utils.UpperCaseUnderscore(property.replace('parent','')); + // this.meshFaceSelectedSubscription = R3.Event.Subscribe( + // R3.Event.MESH_FACE_SELECTED, + // this.meshFaceSelected.bind(this) + // ); // - // var componentType = R3.Component[type]; + // this.meshFaceDeselectedSubscription = R3.Event.Subscribe( + // R3.Event.MESH_FACE_DESELECTED, + // this.meshFaceDeselected.bind(this) + // ); // - // var constructor = R3.Component.GetComponentConstructor(componentType); + // this.guis = R3.EntityManager.Instance.findComponentsByConstructor(R3.GUI); + // this.guis.map( + // function(gui){ + // this.initialize(gui); + // }.bind(this) + // ); + + + // this.meshDeletedSubscription = R3.Event.Subscribe( + // R3.Event.REMOVE_MESH, + // this.meshDeleted.bind(this) + // ); // - // var options = R3.EntityManager.Instance.findComponentsByConstructor(constructor).reduce( - // function(result, object) { - // result[object.name] = object; - // return result; - // }, - // { - // 'none' : null - // } + // this.meshSelectedSubscription = R3.Event.Subscribe( + // R3.Event.MESH_SELECTED, + // this.meshSelected.bind(this) + // ); + // + // this.meshDeselectedSubscription = R3.Event.Subscribe( + // R3.Event.MESH_DESELECTED, + // this.meshDeslected.bind(this) + // ); + // + // this.componentRemovedSubscription = R3.Event.Subscribe( + // R3.Event.REMOVE_COMPONENT, + // this.removeComponent.bind(this) // ); // - // var object = componentTemplate.template; + // this.sourceChangedSubscription = R3.Event.Subscribe( + // R3.Event.CAST_SOURCE_CHANGED, + // this.castSourceChanged.bind(this) + // ); // - // var affected = componentTemplate.affected; - // - // folder.add(object, property, options).listen().onChange( - // - // function(value) { - // - // var newComponent = null; - // - // if (value !== 'null') { - // newComponent = R3.EntityManager.Instance.findComponentById(value); - // } - // - // affected.map( - // function(component) { - // - // component[property] = newComponent; - // component.updateInstance(property); - // - // if (property === 'parentPhysicsWorld') { - // R3.Event.Emit( - // R3.Event.PARENT_WORLD_CHANGE, - // { - // originalWorld : this.initialValue, - // newWorld : newComponent, - // object : component - // } - // ) - // } - // - // if (property === 'parentScene') { - // R3.Event.Emit( - // R3.Event.PARENT_SCENE_CHANGE, - // { - // originalScene: this.initialValue, - // newScene: newComponent, - // object: component - // } - // ); - // } - // - // }.bind(this) - // ); - // - // if (property === 'parent') { - // R3.Event.Emit( - // R3.Event.BUILD_GUI, - // null - // ); - // } - // - // this.initialValue = newComponent; - // } - // ); -}; - -R3.System.GUI.prototype.buildArrayManagerControl = function( - folder, - componentTemplate, - property -) { - - var constructors = componentTemplate.template.linkedComponents[property]; - - if (constructors instanceof Array) { - /** - * All good - */ - } else { - /** - * There is a data mismatch - */ - console.error('data mismatch - something not an array'); - return; - } - - var object = componentTemplate.template; - - var array = object[property]; - - var addArrayItem = function(item, index){ - - var name = 'invalid item'; - - if (item && item.name) { - name = item.name; - } - - var controller = folder.add( - { - 'remove' : function() { - componentTemplate.affected.map(function(component){ - component[property].splice(index, 1); - component.updateInstance(property); - folder.remove(controller); - }); - } - }, - 'remove' - ).name('remove ' + property + '[' + index + '] - ' + name); - - folder.updateDisplay(); - }; - - array.map(addArrayItem); - - var idObject = {}; - - var selectionObject = R3.EntityManager.Instance.findComponentsByConstructor(constructors).reduce( - function(result, component) { - result[component.name] = component; - idObject[component.id] = component; - return result; - }, - { - 'none' : null - } - ); - - var activeSelection = { - component: null, - add: function() { - - componentTemplate.affected.map(function(component) { - //if (component[property].indexOf(activeSelection.component) === -1) { - component[property].push(activeSelection.component); - - R3.Event.Emit( - R3.Event.ARRAY_ITEM_ADDED, - { - component : component, - property : property, - item : activeSelection.component - } - ); - - component.updateInstance(property, activeSelection.component); - - // addArrayItem(activeSelection.component, component[property].length - 1); - //} - }); - - R3.Event.Emit( - R3.Event.BUILD_GUI - ); - } - }; - - folder.add(activeSelection, 'component', selectionObject).name('select ' + property).onChange( - function(value){ - if (value === 'null') { - activeSelection['component'] = null; - } else { - activeSelection['component'] = idObject[value]; - } - } - ).listen(); - - folder.add(activeSelection, 'add').name('add to ' + property); + // this.destinationChangedSubscription = R3.Event.Subscribe( + // R3.Event.RECEIVE_DESTINATION_CHANGED, + // this.receiveDestinationChanged.bind(this) + // ); }; -/** - * This is only for uvs right now - */ -R3.System.GUI.prototype.buildUVManagerControl = function( - folder, - componentTemplate, - property -) { +// R3.System.GUI.prototype.windowResize = function(data) { +// }; - var object = componentTemplate.template; +R3.System.GUI.prototype.beforeRender = function() { - var array = object[property]; - - array.map( - function(uvs, uvSet) { - /** - * uvs should be an array of three vector2's - */ - uvs.map( - function(uv, uvIndex) { - - var onChange = function(__uvSet, __uvIndex, __property) { - return function(value) { - componentTemplate.affected.map( - function(component) { - component.uvs[__uvSet][__uvIndex][__property] = value; - component.updateInstance('uvs', __uvSet, __uvIndex); - } - ); - } - }; - - folder.add(uv, 'x').name('uvs[' + uvSet + '][' + uvIndex +'].x').onChange(onChange(uvSet, uvIndex, 'x')).listen(); - folder.add(uv, 'y').name('uvs[' + uvSet + '][' + uvIndex +'].y').onChange(onChange(uvSet, uvIndex, 'y')).listen(); - } - ) - - } - ); - - -}; - -R3.System.GUI.prototype.buildColorControl = function(folder, componentTemplate, property) { - - var object = componentTemplate.template; - - var tempObject = { - hexColor : object[property].toHex() - }; - - folder.addColor( - tempObject, - 'hexColor' - ).name(property).listen().onChange( - function(value) { - componentTemplate.affected.map( - function(component) { - component[property].fromHex(value); - component[property].updateInstance(property); - } - ) - } - ); - - folder.add( - tempObject, - 'hexColor' - ).name(property).listen().onChange( - function(value) { - componentTemplate.affected.map( - function(component) { - component[property].fromHex(value); - component[property].updateInstance(property); - } - ) - } - ) - -}; - -R3.System.GUI.prototype.buildObjectControl = function(folder, componentTemplate, property) { - - var object = componentTemplate.template[property]; - - if (object === null) { - return; - } - - if ( - property === 'sourceProperties' || - property === 'destinationProperties' - ) { - Object.keys(object).map( - function(propertyId) { - folder.add( - object, - propertyId - ).name(property + '.' + propertyId).listen().onChange( - function(value) { - componentTemplate.affected.map( - function(component){ - component[property][propertyId] = value; - component.updateInstance(property); - } - ); - } - ); - } - ); - } -}; - -R3.System.GUI.prototype.buildSelectControl = function(folder, componentTemplate, property) { - - /** - * We need to discover the constructor for this component - */ - var constructors = null; - - if (componentTemplate.template.linkedComponents && componentTemplate.template.linkedComponents[property]) { - constructors = componentTemplate.template.linkedComponents[property]; - } else { - if (componentTemplate.template[property]) { - constructors = componentTemplate.template[property].constructor; - } - } - - if (!constructors) { - console.log('cannot determine constructor'); - return; - } - - var object = componentTemplate.template; - - var objects = R3.EntityManager.Instance.findComponentsByConstructor(constructors); - - var idObject = {}; - - var options = objects.reduce( - function(result, obj) { - result[obj.name] = obj; - idObject[obj.id] = obj; - return result; - }, - { - 'none' : null - } - ); - - folder.add( - object, - property, - options - ).name(property).listen().onChange( - - function(value) { - - var newComponent = null; - - if (value !== 'null') { - newComponent = idObject[value]; + this.guis.map( + function(gui) { + if (typeof gui.instance.update === 'function') { + gui.instance.update(); } - - componentTemplate.affected.map( - function(component) { - component[property] = newComponent; - component.updateInstance(property); - } - ); - - this.initialValue = newComponent; - } - ); -}; - -R3.System.GUI.prototype.buildControl = function(folder, componentTemplate, property) { - - var object = componentTemplate.template; - - var listen = false; - - if (componentTemplate.affected.length === 1) { - /** - * If the template only affects a single object - put the handle on this so we can listen for changes - */ - object = componentTemplate.affected[0]; - - listen = true; - } - - var componentType = componentTemplate.componentType; - - var controllers = []; - - if ( - R3.Utils.IsString(object[property]) || - R3.Utils.IsBoolean(object[property]) - ) { - controllers.push(folder.add(object, property)); - } - - if (R3.Utils.IsNumber(object[property])) { - - var grain = 0.001; - - if (object.grain) { - grain = object.grain; - } - - if (property === 'componentType') { - - var readOnly = { - componentType : R3.Component.GetComponentInfo(object[property]).name - }; - - controllers.push( - folder.add( - readOnly, - 'componentType' - ) - ); - } else if (property === 'systemType') { - controllers.push( - folder.add( - object, - property, - { - 'animation' : R3.System.SYSTEM_TYPE_ANIMATION, - 'gui' : R3.System.SYSTEM_TYPE_GUI, - 'input' : R3.System.SYSTEM_TYPE_INPUT, - 'render' : R3.System.SYSTEM_TYPE_RENDER, - 'storage' : R3.System.SYSTEM_TYPE_STORAGE, - 'linking' : R3.System.SYSTEM_TYPE_LINKING, - 'physics' : R3.System.SYSTEM_TYPE_PHYSICS, - 'custom code' : R3.System.SYSTEM_TYPE_CUSTOM - } - ) - ); - } else if (property === 'controlsType') { - controllers.push( - folder.add( - object, - property, - { - 'touch' : R3.API.Controls.CONTROLS_TYPE_TOUCH, - 'mouse' : R3.API.Controls.CONTROLS_TYPE_MOUSE, - 'keyboard' : R3.API.Controls.CONTROLS_TYPE_KEYBOARD, - 'editor' : R3.API.Controls.CONTROLS_TYPE_EDITOR - } - ) - ); - } else if (property === 'stereoMode') { - controllers.push( - folder.add( - object, - property, - { - 'stereo' : R3.D3.API.Camera.Stereo.STEREO_MODE_STEREO, - 'anaglyph' : R3.D3.API.Camera.Stereo.STEREO_MODE_ANAGLYPH, - 'parallax' : R3.D3.API.Camera.Stereo.STEREO_MODE_PARALLAX - } - ) - ); - } else if (property === 'defaultMode') { - controllers.push( - folder.add( - object, - property, - { - 'run' : R3.API.Project.APPLICATION_MODE_RUN, - 'edit' : R3.API.Project.APPLICATION_MODE_EDIT - } - ) - ); - } else if (property === 'aspectRatioMode') { - controllers.push( - folder.add( - object, - property, - { - 'none' : R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_NONE, - 'fixed' : R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_FIXED, - 'based on current' : R3.D3.API.Camera.Orthographic.ASPECT_RATIO_MODE_BASED_ON_CURRENT - } - ) - ); - } else if (property === 'socketType') { - controllers.push( - folder.add( - object, - property, - { - 'none' : R3.API.Socket.TYPE_NONE, - 'cast' : R3.API.Socket.TYPE_CAST, - 'receive' : R3.API.Socket.TYPE_RECEIVE - } - ) - ); - } else if (property === 'castType') { - controllers.push( - folder.add( - object, - property, - { - 'room': R3.API.Socket.Cast.CAST_TYPE_ROOM, - 'peer': R3.API.Socket.Cast.CAST_TYPE_PEER , - 'all': R3.API.Socket.Cast.CAST_TYPE_ALL, - 'all but peer': R3.API.Socket.Cast.CAST_TYPE_ALL_BUT_PEER - } - ) - ); - } else if (property === 'receiveType') { - controllers.push( - folder.add( - object, - property, - { - 'room': R3.API.Socket.Receive.RECEIVE_TYPE_ROOM, - 'peer': R3.API.Socket.Cast.RECEIVE_TYPE_PEER - } - ) - ); - } else if (property === 'drawMode') { - controllers.push( - folder.add( - object, - property, - { - 'triangles' : R3.D3.API.Mesh.DRAW_MODE_TRIANGLES, - 'triangle strip' : R3.D3.API.Mesh.DRAW_MODE_TRIANGLE_STRIP, - 'triangle fan' : R3.D3.API.Mesh.DRAW_MODE_TRIANGLE_FAN - } - ) - ); - } else if (property === 'shadowType') { - controllers.push( - folder.add( - object, - property, - { - 'directional': R3.D3.API.Shadow.SHADOW_TYPE_DIRECTIONAL, - 'spot': R3.D3.API.Shadow.SHADOW_TYPE_SPOT - } - ) - ); - } else if (property === 'shadowMapType') { - controllers.push( - folder.add( - object, - property, - { - 'basic': R3.API.Renderer.SHADOW_MAP_TYPE_BASIC, - 'pcf': R3.API.Renderer.SHADOW_MAP_TYPE_PCF, - 'pcf soft': R3.API.Renderer.SHADOW_MAP_TYPE_PCF_SOFT - } - ) - ); - } else if (property === 'toneMapping') { - controllers.push( - folder.add( - object, - property, - { - 'linear': R3.API.Renderer.TONE_MAPPING_LINEAR, - 'reinhard': R3.API.Renderer.TONE_MAPPING_REINHARD, - 'uncharted 2': R3.API.Renderer.TONE_MAPPING_UNCHARTED_2, - 'cineon': R3.API.Renderer.TONE_MAPPING_CINEON - } - ) - ); - } else if (property === 'opacityType') { - controllers.push( - folder.add( - object, - property, - { - 'constant': R3.D3.API.Particle.OPACITY_TYPE_CONSTANT, - 'fade out': R3.D3.API.Particle.OPACITY_TYPE_FADE_OUT_LINEAR, - 'fade in': R3.D3.API.Particle.OPACITY_TYPE_FADE_IN_LINEAR, - 'fade in / out': R3.D3.API.Particle.OPACITY_TYPE_FADE_IN_OUT_LINEAR - } - ) - ); - } else if (property === 'positionOffsetType') { - controllers.push( - folder.add( - object, - property, - { - 'constant': R3.D3.API.Particle.POSITION_OFFSET_TYPE_CONSTANT, - 'random': R3.D3.API.Particle.POSITION_OFFSET_TYPE_RANDOM, - 'function': R3.D3.API.Particle.POSITION_OFFSET_TYPE_FUNCTION - } - ) - ); - } else if (property === 'directionType') { - controllers.push( - folder.add( - object, - property, - { - 'constant': R3.D3.API.Particle.DIRECTION_TYPE_CONSTANT, - 'random': R3.D3.API.Particle.DIRECTION_TYPE_RANDOM, - 'random normalized': R3.D3.API.Particle.DIRECTION_TYPE_RANDOM_NORMALIZED, - 'function': R3.D3.API.Particle.DIRECTION_TYPE_FUNCTION - } - ) - ); - } else if (property === 'speedType') { - controllers.push( - folder.add( - object, - property, - { - 'constant': R3.D3.API.Particle.SPEED_TYPE_CONSTANT, - 'linear': R3.D3.API.Particle.SPEED_TYPE_LINEAR, - 'exponential': R3.D3.API.Particle.SPEED_TYPE_EXPONENTIAL, - 'logarithmic': R3.D3.API.Particle.SPEED_TYPE_LOGARITHMIC, - '1 / log': R3.D3.API.Particle.SPEED_TYPE_ONE_OVER_LOG, - 'exp' : R3.D3.API.Particle.SPEED_TYPE_EXP, - '1 / exp' : R3.D3.API.Particle.SPEED_TYPE_ONE_OVER_EXP - } - ) - ); - } else if (property === 'scaleType') { - controllers.push( - folder.add( - object, - property, - { - 'constant': R3.D3.API.Particle.SCALE_TYPE_CONSTANT, - 'linear': R3.D3.API.Particle.SCALE_TYPE_LINEAR, - 'exponential': R3.D3.API.Particle.SCALE_TYPE_EXPONENTIAL, - 'random': R3.D3.API.Particle.SCALE_TYPE_RANDOM, - 'random (x = y)': R3.D3.API.Particle.SCALE_TYPE_RANDOM_X_EQUALS_Y, - 'function': R3.D3.API.Particle.SCALE_TYPE_FUNCTION - } - ) - ); - } else if (property === 'rotationType') { - controllers.push( - folder.add( - object, - property, - { - 'constant': R3.D3.API.Particle.ROTATION_TYPE_CONSTANT, - 'random': R3.D3.API.Particle.ROTATION_TYPE_RANDOM, - 'random - x': R3.D3.API.Particle.ROTATION_TYPE_RANDOM_X, - 'random - y': R3.D3.API.Particle.ROTATION_TYPE_RANDOM_Y, - 'random - z': R3.D3.API.Particle.ROTATION_TYPE_RANDOM_Z, - 'function': R3.D3.API.Particle.ROTATION_TYPE_FUNCTION - } - ) - ); - } else if (property === 'broadphaseType') { - controllers.push( - folder.add( - object, - property, - { - 'naive': R3.D3.Broadphase.BROADPHASE_TYPE_NAIVE, - 'grid': R3.D3.Broadphase.BROADPHASE_TYPE_GRID, - 'sap': R3.D3.Broadphase.BROADPHASE_TYPE_SAP - } - ) - ); - } else if (property === 'solverType') { - controllers.push( - folder.add( - object, - property, - { - 'gs': R3.D3.API.Solver.GS_SOLVER, - 'split': R3.D3.API.Solver.SPLIT_SOLVER - } - ) - ); - } else if (property === 'meshType') { - controllers.push( - folder.add( - object, - property, - { - 'normal' : R3.D3.API.Object.OBJECT_TYPE_MESH, - 'curve' : R3.D3.API.Object.OBJECT_TYPE_MESH_CURVE, - 'skinned' : R3.D3.API.Object.OBJECT_TYPE_MESH_SKINNED, - 'plane' : R3.D3.API.Object.OBJECT_TYPE_MESH_PLANE, - 'sphere' : R3.D3.API.Object.OBJECT_TYPE_MESH_SPHERE, - 'box' : R3.D3.API.Object.OBJECT_TYPE_MESH_BOX, - 'cylinder' : R3.D3.API.Object.OBJECT_TYPE_MESH_CYLINDER, - 'text' : R3.D3.API.Object.OBJECT_TYPE_MESH_TEXT - } - ) - ); - } else if (property === 'cameraType') { - controllers.push( - folder.add( - object, - property, - { - 'perspective' : R3.D3.API.Object.OBJECT_TYPE_CAMERA_PERSPECTIVE, - 'orthographic' : R3.D3.API.Object.OBJECT_TYPE_CAMERA_ORTHOGRAPHIC, - 'stereo' : R3.D3.API.Object.OBJECT_TYPE_CAMERA_STEREO, - 'cube' : R3.D3.API.Object.OBJECT_TYPE_CAMERA_CUBE - } - ) - ); - } else if (property === 'passType') { - controllers.push( - folder.add( - object, - property, - { - 'ssao': R3.D3.API.Pass.PASS_TYPE_SSAO, - 'bloom': R3.D3.API.Pass.PASS_TYPE_BLOOM, - 'fxaa': R3.D3.API.Pass.PASS_TYPE_FXAA, - 'render': R3.D3.API.Pass.PASS_TYPE_RENDER - } - ) - ); - } else if (property === 'rendererType') { - controllers.push( - folder.add( - object, - property, - { - '2D': R3.API.Renderer.RENDERER_TYPE_2D, - '3D': R3.API.Renderer.RENDERER_TYPE_3D - } - ) - ); - } else if (property === 'materialType') { - controllers.push( - folder.add( - object, - property, - { - 'standard': R3.D3.API.Material.MATERIAL_TYPE_STANDARD, - 'basic': R3.D3.API.Material.MATERIAL_TYPE_BASIC, - 'phong': R3.D3.API.Material.MATERIAL_TYPE_PHONG, - 'shader': R3.D3.API.Material.MATERIAL_TYPE_SHADER, - 'raw shader': R3.D3.API.Material.MATERIAL_TYPE_SHADER_RAW, - 'points': R3.D3.API.Material.MATERIAL_TYPE_POINTS - // 'toon': R3.D3.API.Material.MATERIAL_TYPE_TOON, - // 'line basic' : R3.D3.API.Material.MATERIAL_TYPE_LINE_BASIC - } - ) - ); - } else if (property === 'side') { - controllers.push( - folder.add( - object, - property, - { - 'double': R3.D3.API.Material.TYPE_DOUBLE_SIDE, - 'front': R3.D3.API.Material.TYPE_FRONT_SIDE, - 'back': R3.D3.API.Material.TYPE_BACK_SIDE - } - ) - ); - } else if (property === 'combine') { - controllers.push( - folder.add( - object, - property, - { - 'multiply': R3.D3.API.Material.COMBINE_MULTIPLY_OPERATION, - 'mix': R3.D3.API.Material.COMBINE_MIX_OPERATION, - 'add': R3.D3.API.Material.COMBINE_ADD_OPERATION - } - ) - ); - } else if (property === 'vertexColors') { - controllers.push( - folder.add( - object, - property, - { - 'none': R3.D3.API.Material.TYPE_NO_COLORS, - 'face': R3.D3.API.Material.TYPE_FACE_COLORS, - 'vertex': R3.D3.API.Material.TYPE_VERTEX_COLORS - } - ) - ); - } else if (property === 'blending') { - controllers.push( - folder.add( - object, - property, - { - 'none': R3.D3.API.Material.TYPE_NO_BLENDING, - 'normal': R3.D3.API.Material.TYPE_NORMAL_BLENDING, - 'additive': R3.D3.API.Material.TYPE_ADDITIVE_BLENDING, - 'subtractive': R3.D3.API.Material.TYPE_SUBTRACTIVE_BLENDING, - 'multiply': R3.D3.API.Material.TYPE_MULTIPLY_BLENDING, - 'custom': R3.D3.API.Material.TYPE_CUSTOM_BLENDING - } - ) - ); - } else if (property === 'blendSrc') { - controllers.push( - folder.add( - object, - property, - { - 'zero': R3.D3.API.Material.TYPE_ZERO_FACTOR, - 'one': R3.D3.API.Material.TYPE_ONE_FACTOR, - 'source color': R3.D3.API.Material.TYPE_SRC_COLOR_FACTOR, - 'one minus source color': R3.D3.API.Material.TYPE_ONE_MINUS_SRC_COLOR_FACTOR, - 'source alpha': R3.D3.API.Material.TYPE_SRC_ALPHA_FACTOR, - 'one minus source alpha': R3.D3.API.Material.TYPE_ONE_MINUS_SRC_ALPHA_FACTOR, - 'destination alpha': R3.D3.API.Material.TYPE_DST_ALPHA_FACTOR, - 'one minus destination alpha': R3.D3.API.Material.TYPE_ONE_MINUS_DST_ALPHA_FACTOR, - 'destination color': R3.D3.API.Material.TYPE_DST_COLOR_FACTOR, - 'one minus destination color': R3.D3.API.Material.TYPE_ONE_MINUS_DST_COLOR_FACTOR, - 'source alpha saturate': R3.D3.API.Material.TYPE_SRC_ALPHA_SATURATE_FACTOR - } - ) - ); - } else if (property === 'blendDst') { - controllers.push( - folder.add( - object, - property, - { - 'zero': R3.D3.API.Material.TYPE_ZERO_FACTOR, - 'one': R3.D3.API.Material.TYPE_ONE_FACTOR, - 'source color': R3.D3.API.Material.TYPE_SRC_COLOR_FACTOR, - 'one minus source color': R3.D3.API.Material.TYPE_ONE_MINUS_SRC_COLOR_FACTOR, - 'source alpha': R3.D3.API.Material.TYPE_SRC_ALPHA_FACTOR, - 'one minus source alpha': R3.D3.API.Material.TYPE_ONE_MINUS_SRC_ALPHA_FACTOR, - 'destination alpha': R3.D3.API.Material.TYPE_DST_ALPHA_FACTOR, - 'one minus destination alpha': R3.D3.API.Material.TYPE_ONE_MINUS_DST_ALPHA_FACTOR, - 'destination color': R3.D3.API.Material.TYPE_DST_COLOR_FACTOR, - 'one minus destination color': R3.D3.API.Material.TYPE_ONE_MINUS_DST_COLOR_FACTOR, - 'source alpha saturate': R3.D3.API.Material.TYPE_SRC_ALPHA_SATURATE_FACTOR - } - ) - ); - } else if (property === 'blendEquation') { - controllers.push( - folder.add( - object, - property, - { - 'add': R3.D3.API.Material.TYPE_ADD_EQUATION, - 'subtract': R3.D3.API.Material.TYPE_SUBTRACT_EQUATION, - 'reverse subtract': R3.D3.API.Material.TYPE_REVERSE_SUBTRACT_EQUATION, - 'min': R3.D3.API.Material.TYPE_MIN_EQUATION, - 'max': R3.D3.API.Material.TYPE_MAX_EQUATION - } - ) - ); - } else if (property === 'depthFunc') { - controllers.push( - folder.add( - object, - property, - { - 'never': R3.D3.API.Material.TYPE_NEVER_DEPTH, - 'always': R3.D3.API.Material.TYPE_ALWAYS_DEPTH, - 'less depth': R3.D3.API.Material.TYPE_LESS_DEPTH, - 'less equal depth': R3.D3.API.Material.TYPE_LESS_EQUAL_DEPTH, - 'equal depth': R3.D3.API.Material.TYPE_EQUAL_DEPTH, - 'greated equal depth': R3.D3.API.Material.TYPE_GREATER_EQUAL_DEPTH, - 'greated depth': R3.D3.API.Material.TYPE_GREATER_DEPTH, - 'not equal depth': R3.D3.API.Material.TYPE_NOT_EQUAL_DEPTH - } - ) - ); - } else if (property === 'wrapS') { - controllers.push( - folder.add( - object, - property, - { - 'repeat': R3.D3.API.Texture.TYPE_REPEAT_WRAPPING, - 'clamp': R3.D3.API.Texture.TYPE_CLAMP_TO_EDGE_WRAPPING, - 'mirrored repeat': R3.D3.API.Texture.TYPE_MIRRORED_REPEAT_WRAPPING - } - ) - ); - } else if (property === 'wrapT') { - controllers.push( - folder.add( - object, - property, - { - 'repeat': R3.D3.API.Texture.TYPE_REPEAT_WRAPPING, - 'clamp': R3.D3.API.Texture.TYPE_CLAMP_TO_EDGE_WRAPPING, - 'mirrored repeat': R3.D3.API.Texture.TYPE_MIRRORED_REPEAT_WRAPPING - } - ) - ); - } else if (property === 'format') { - controllers.push( - folder.add( - object, - property, - { - 'alpha': R3.D3.API.Texture.TYPE_ALPHA_FORMAT, - 'rgb': R3.D3.API.Texture.TYPE_RGB_FORMAT, - 'rgba': R3.D3.API.Texture.TYPE_RGBA_FORMAT, - 'luminance': R3.D3.API.Texture.TYPE_LUMINANCE_FORMAT, - 'luminance alpha': R3.D3.API.Texture.TYPE_LUMINANCE_ALPHA_FORMAT, - 'depth': R3.D3.API.Texture.TYPE_DEPTH_FORMAT - } - ) - ); - } else if (property === 'mapping') { - controllers.push( - folder.add( - object, - property, - { - 'uv': R3.D3.API.Texture.TYPE_UV_MAPPING, - 'cube reflection': R3.D3.API.Texture.TYPE_CUBE_REFLECTION_MAPPING, - 'cube refraction': R3.D3.API.Texture.TYPE_CUBE_REFRACTION_MAPPING, - 'equi rectangular reflection': R3.D3.API.Texture.TYPE_EQUI_RECTANGULAR_REFLECTION_MAPPING, - 'equi rectangular refraction': R3.D3.API.Texture.TYPE_EQUI_RECTANGULAR_REFRACTION_MAPPING, - 'spherical reflection': R3.D3.API.Texture.TYPE_SPHERICAL_REFLECTION_MAPPING, - 'cube uv reflection': R3.D3.API.Texture.TYPE_CUBE_UV_REFLECTION_MAPPING, - 'cube uv refraction': R3.D3.API.Texture.TYPE_CUBE_UV_REFRACTION_MAPPING - } - ) - ); - } else if (property === 'magFilter') { - controllers.push( - folder.add( - object, - property, - { - 'nearest': R3.D3.API.Texture.TYPE_NEAREST_FILTER, - 'nearest mipmap nearest': R3.D3.API.Texture.TYPE_NEAREST_MIPMAP_NEAREST_FILTER, - 'nearest mipmap linear': R3.D3.API.Texture.TYPE_NEAREST_MIPMAP_LINEAR_FILTER, - 'linear': R3.D3.API.Texture.TYPE_LINEAR_FILTER, - 'linear mipmap nearest': R3.D3.API.Texture.TYPE_LINEAR_MIPMAP_NEAREST_FILTER, - 'linear mipmap linear': R3.D3.API.Texture.TYPE_LINEAR_MIPMAP_LINEAR_FILTER - } - ) - ); - } else if (property === 'minFilter') { - controllers.push( - folder.add( - object, - property, - { - 'nearest': R3.D3.API.Texture.TYPE_NEAREST_FILTER, - 'nearest mipmap nearest': R3.D3.API.Texture.TYPE_NEAREST_MIPMAP_NEAREST_FILTER, - 'nearest mipmap linear': R3.D3.API.Texture.TYPE_NEAREST_MIPMAP_LINEAR_FILTER, - 'linear': R3.D3.API.Texture.TYPE_LINEAR_FILTER, - 'linear mipmap nearest': R3.D3.API.Texture.TYPE_LINEAR_MIPMAP_NEAREST_FILTER, - 'linear mipmap linear': R3.D3.API.Texture.TYPE_LINEAR_MIPMAP_LINEAR_FILTER - } - ) - ); - } else if (property === 'textureType') { - controllers.push( - folder.add( - object, - property, - { - 'normal': R3.D3.API.Texture.TEXTURE_TYPE_NONE, - 'image': R3.D3.API.Texture.TEXTURE_TYPE_IMAGE, - 'cube': R3.D3.API.Texture.TEXTURE_TYPE_CUBE, - 'canvas': R3.D3.API.Texture.TEXTURE_TYPE_CANVAS - } - ) - ); - } else if (property === 'storageType') { - controllers.push( - folder.add( - object, - property, - { - 'unsigned byte': R3.D3.API.Texture.TYPE_UNSIGNED_BYTE, - 'byte': R3.D3.API.Texture.TYPE_BYTE, - 'short': R3.D3.API.Texture.TYPE_SHORT, - 'unsigned short': R3.D3.API.Texture.TYPE_UNSIGNED_SHORT, - 'int': R3.D3.API.Texture.TYPE_INT, - 'unsigned int': R3.D3.API.Texture.TYPE_UNSIGNED_INT, - 'float': R3.D3.API.Texture.TYPE_FLOAT, - 'half float': R3.D3.API.Texture.TYPE_HALF_FLOAT - } - ) - ); - } else if (property === 'aspectRatio') { - controllers.push( - folder.add( - object, - property, - { - 'none': R3.API.Renderer.ASPECT_RATIO_NONE, - '4:3 (1.3333)': R3.API.Renderer.ASPECT_RATIO_4_3, - '3:2 (1.5)': R3.API.Renderer.ASPECT_RATIO_3_2, - '16:10 (1.6667)': R3.API.Renderer.ASPECT_RATIO_16_10, - '17:10 (1.7)': R3.API.Renderer.ASPECT_RATIO_17_10, - '16:9 (1.7778)': R3.API.Renderer.ASPECT_RATIO_16_9 - } - ) - ); - } else if (property === 'scaleMode') { - controllers.push( - folder.add( - object, - property, - { - 'none': R3.API.Renderer.SCALE_MODE_NONE, - 'letterbox': R3.API.Renderer.SCALE_MODE_LETTERBOX, - 'zoom-bigger': R3.API.Renderer.SCALE_MODE_ZOOM_TO_BIGGER, - 'non-uniform': R3.API.Renderer.SCALE_MODE_NON_UNIFORM - } - ) - ); - } else if (property === 'encoding') { - controllers.push( - folder.add( - object, - property, - { - 'linear': R3.D3.API.Texture.TYPE_LINEAR_ENCODING, - 'srgb': R3.D3.API.Texture.TYPE_SRGB_ENCODING, - 'gamma': R3.D3.API.Texture.TYPE_GAMMA_ENCODING, - 'rgbe': R3.D3.API.Texture.TYPE_RGBE_ENCODING, - 'log luv': R3.D3.API.Texture.TYPE_LOG_LUV_ENCODING, - 'rgbm7': R3.D3.API.Texture.TYPE_RGBM7_ENCODING, - 'rgbm16': R3.D3.API.Texture.TYPE_RGBM16_ENCODING, - 'rgbd': R3.D3.API.Texture.TYPE_RGBD_ENCODING - } - ) - ); - } else if (property === 'lightType') { - controllers.push( - folder.add( - object, - property, - { - 'ambient': R3.D3.API.Light.LIGHT_TYPE_AMBIENT, - 'directional': R3.D3.API.Light.LIGHT_TYPE_DIRECTIONAL, - 'spot': R3.D3.API.Light.LIGHT_TYPE_SPOT, - 'point': R3.D3.API.Light.LIGHT_TYPE_POINT, - 'hemisphere': R3.D3.API.Light.LIGHT_TYPE_HEMISPHERE, - 'rect area': R3.D3.API.Light.LIGHT_TYPE_RECT_AREA - } - ) - ); - } else if (property === 'eventId') { - - var options = {}; - - for (var i = 0; i < 200; i++) { - try { - options[R3.Event.GetEventName(i)] = i; - } catch (error) { - - } - } - - controllers.push( - folder.add( - object, - property, - options - ) - ); - } else if (property === 'functionType') { - controllers.push( - folder.add( - object, - property, - { - 'rotation': R3.D3.Animation.ANIMATION_FUNCTION_TYPE_ROTATION, - 'translation': R3.D3.Animation.ANIMATION_FUNCTION_TYPE_TRANSLATION, - 'scale': R3.D3.Animation.ANIMATION_FUNCTION_TYPE_SCALE - } - ) - ); - } else { - - /** - * Try to guess a scale for this property - */ - if ( - property === 'opacity' || - property === 'fadeInFactor' || - property === 'fadeOutFactor' || - property === 'metalness' || - property === 'roughness' || - property === 'aoClamp' || - property === 'lumInfluence' || - property === 'volume' - ) { - controllers.push(folder.add(object, property, 0, 1.0, 0.001)); - } else if ( - property === 'cubeResolution' - ) { - controllers.push(folder.add(object, property, 16, 4096, 16)); - } else if ( - property === 'shininess' || - property === 'fov' - ) { - controllers.push(folder.add(object, property, -255, 255, 1)); - } else if ( - property === 'aspect' || - property === 'wireframeLineWidth' || - property === 'lineWidth' - ) { - controllers.push(folder.add(object, property, 0, 5, 0.001)); - } else if ( - property === 'bumpScale' || - property === 'normalScale' || - property === 'displacementScale' || - property === 'heightMapScale' || - property === 'lightMapIntensity' || - property === 'aoMapIntensity' || - property === 'envMapIntensity' || - property === 'intensity' - ) { - controllers.push(folder.add(object, property, -10, 10, 0.001)); - } else if ( - property === 'minX' || - property === 'minY' || - property === 'minZ' || - property === 'maxX' || - property === 'maxY' || - property === 'maxZ' || - property === 'offsetX' - ) { - controllers.push(folder.add(object, property, -1000, 1000, 0.01)); - } else if ( - property === 'widthSegments' || - property === 'radiusSegments' || - property === 'heightSegments' || - property === 'particlesPerSecond' - ) { - controllers.push(folder.add(object, property, 1, 1000, 1)); - } else if ( - property === 'width' || - property === 'height' - ) { - controllers.push(folder.add(object, property, 0, 4096, 0.001)); - } else if ( - property === 'depth' || - property === 'radius' - ) { - - if (object instanceof R3.D3.Pass.Bloom) { - controllers.push(folder.add(object, property, -10, 10, 0.001)); - } else { - controllers.push(folder.add(object, property, 0, 1000, 0.001)); - } - - } else if ( - property === 'near' || - property === 'distanceGrain' || - property === 'envMapIntensity' - ) { - controllers.push(folder.add(object, property, -10, 100, 0.001)); - } else if ( - property === 'bumpScale' || - property === 'speed' - ) { - controllers.push(folder.add(object, property, 0, 100, 0.01)); - } else if ( - property === 'heightOffset' || - property === 'rotationFactor' - ) { - controllers.push(folder.add(object, property, -100, 100, 0.001)); - } else if ( - property === 'friction' - ) { - controllers.push(folder.add(object, property, 0, 1000, 0.01)); - } else if ( - property === 'radiusTop' || - property === 'radiusBottom' - ) { - controllers.push(folder.add(object, property, 0, 100, 0.1)); - } else if ( - property === 'mass' - ) { - controllers.push(folder.add(object, property, 0, 1000, 0.1)); - } else if ( - property === 'sensitivity' - ) { - controllers.push(folder.add(object, property, 1, 50, 1)); - } else if ( - property === 'density' || - property === 'bias' || - property === 'threshold' - ) { - controllers.push(folder.add(object, property, 0, 1, 0.0001)); - } else if ( - property === 'strength' || - property === 'power' - ) { - controllers.push(folder.add(object, property, 0, 25, 0.01)); - } else if ( - property === 'thetaLength' || - property === 'angle' - ) { - controllers.push(folder.add(object, property, -Math.PI * 2, Math.PI * 2, 0.01)); - } else if ( - property === 'port' || - property === 'far' - ) { - controllers.push(folder.add(object, property, 1, 65536, 1)); - } else if ( - property === 'eyeSep' - ) { - controllers.push(folder.add(object, property, -2, 2, 0.0001)); - } else if ( - property === 'arc' || - property === 'size' - ) { - controllers.push(folder.add(object, property, 0, 200, 0.001)); - } else { - controllers.push(folder.add(object, property, -1000, 1000, 0.1)); - } - - - - } - } - - controllers.map( - function(controller) { - - if (property === 'name') { - controller.onFinishChange( - function(__handle, __folder) { - return function(value) { - - componentTemplate.affected.map( - function(component){ - component[property] = value; - component.updateInstance(property); - } - ); - - var li = __folder.domElement.getElementsByClassName('title')[0]; - li.innerHTML = value; - } - }(controller, folder) - ); - } else { - controller.onChange( - function(value) { - - if (typeof this.initialValue === 'number') { - value = Number(value); - } - - componentTemplate.affected.map( - function(component){ - component[property] = value; - component.updateInstance(property); - } - ); - } - ); - } - - if (listen) { - controller.listen(); - } - } ); }; -/** - * Push the mesh to our backup components, if in exclusiveMode (menu at top is selected), - * otherwise, just to our normal components - * @param data - */ -R3.System.GUI.prototype.meshSelected = function(data) { +R3.System.GUI.prototype.guiCreated = function(gui) { + R3.Utils.PushUnique(this.guis, gui); +}; - if (this.exclusiveMode) { - R3.Utils.PushUnique(this.backupComponents, data.mesh); +R3.System.GUI.prototype.guiRemoved = function(gui) { + + gui.dispose(); + + var index = this.guis.indexOf(gui); + + if (index === -1) { + console.warn('gui system out of sync'); } else { - R3.Utils.PushUnique(this.components, data.mesh); + this.guis.splice(index, 1); } }; -/** - * Same as selected above, but removes the mesh from the components - * @param data - */ -R3.System.GUI.prototype.meshDeslected = function(data) { - var index = -1; - - if (this.exclusiveMode) { - index = this.backupComponents.indexOf(data.mesh); - if (index !== -1) { - this.backupComponents.splice(index, 1); - } - } else { - index = this.components.indexOf(data.mesh); - if (index !== -1) { - this.components.splice(index, 1); - } - } - -}; - -R3.System.GUI.prototype.meshFaceSelected = function(data) { - - this.faces.push(data.face); - - this.buildGUI({ - components : this.faces - }) -}; - -R3.System.GUI.prototype.meshFaceDeselected = function(data) { - - var index = this.faces.indexOf(data.face); - - if (index !== -1) { - this.faces.splice(index, 1); - - if (this.faces.length === 0) { - this.buildGUI({}); - } else { - this.buildGUI({components : this.faces}) - } - - } else { - console.warn('could not remove face'); - } -}; +// /** +// * Push the mesh to our backup components, if in exclusiveMode (menu at top is selected), +// * otherwise, just to our normal components +// * @param data +// */ +// R3.System.GUI.prototype.meshSelected = function(data) { +// +// if (this.exclusiveMode) { +// R3.Utils.PushUnique(this.backupComponents, data.mesh); +// } else { +// R3.Utils.PushUnique(this.components, data.mesh); +// } +// +// }; +// +// /** +// * Same as selected above, but removes the mesh from the components +// * @param data +// */ +// R3.System.GUI.prototype.meshDeslected = function(data) { +// +// var index = -1; +// +// if (this.exclusiveMode) { +// index = this.backupComponents.indexOf(data.mesh); +// if (index !== -1) { +// this.backupComponents.splice(index, 1); +// } +// } else { +// index = this.components.indexOf(data.mesh); +// if (index !== -1) { +// this.components.splice(index, 1); +// } +// } +// +// }; +// +// R3.System.GUI.prototype.meshFaceSelected = function(data) { +// +// this.faces.push(data.face); +// +// this.buildGUI({ +// components : this.faces +// }) +// }; +// +// R3.System.GUI.prototype.meshFaceDeselected = function(data) { +// +// var index = this.faces.indexOf(data.face); +// +// if (index !== -1) { +// this.faces.splice(index, 1); +// +// if (this.faces.length === 0) { +// this.buildGUI({}); +// } else { +// this.buildGUI({components : this.faces}) +// } +// +// } else { +// console.warn('could not remove face'); +// } +// }; /** * This function responds to the BUILD_GUI event, data contains the components to build a GUI for data. @@ -1827,7 +257,67 @@ R3.System.GUI.prototype.meshFaceDeselected = function(data) { * * @param data */ -R3.System.GUI.prototype.buildGUI = function(data) { +R3.System.GUI.prototype.clearGUI = function() { + this.guis.map( + function(gui) { + gui.clear(); + } + ); +}; + +R3.System.GUI.prototype.buildGUI = function(__component) { + + this.guis.map( + function(gui) { + + /** + * First, start fresh - remove all folders + */ + gui.clear(); + + var panel = gui.addPanel(__component.name); + + Object.keys(__component.idToObject).map( + function(id) { + + var component = R3.EntityManager.Instance.findComponentById(id); + + var group = gui.addGroup(panel, component.name); + + Object.keys(component).map( + function(property) { + + if ( + property === 'id' || + property === 'componentType' + ) { + return; + } + + if (component.hasOwnProperty(property)) { + + if (typeof component[property] === 'number') { + gui.addNumber(group, component, property) + } + + if (typeof component[property] === 'string') { + gui.addString(group, component, property) + } + + if (typeof component[property] === 'function') { + gui.addButton(group, component, property) + } + } + } + ) + + } + ); + + }.bind(this) + ); + + return; this.guis.map(function(gui){ @@ -2237,77 +727,58 @@ R3.System.GUI.prototype.buildGUI = function(data) { }; -R3.System.GUI.prototype.meshDeleted = function(data) { - - data.meshes.map(function(mesh){ - this.meshDeslected({ - mesh : mesh - }) - }.bind(this)); - - this.buildGUI(null); -}; - -R3.System.GUI.prototype.removeComponent = function(data) { - - var index = this.backupComponents.indexOf(data.component); - if (index !== -1) { - this.backupComponents.splice(index, 1); - } - - index = this.components.indexOf(data.component); - if (index !== -1) { - this.components.splice(index, 1); - } - -}; - -R3.System.GUI.prototype.castSourceChanged = function(data) { - this.buildGUI(null); -}; - -R3.System.GUI.prototype.receiveDestinationChanged = function(data) { - this.buildGUI(null); -}; +// R3.System.GUI.prototype.meshDeleted = function(data) { +// +// data.meshes.map(function(mesh){ +// this.meshDeslected({ +// mesh : mesh +// }) +// }.bind(this)); +// +// this.buildGUI(null); +// }; +// +// R3.System.GUI.prototype.removeComponent = function(data) { +// +// var index = this.backupComponents.indexOf(data.component); +// if (index !== -1) { +// this.backupComponents.splice(index, 1); +// } +// +// index = this.components.indexOf(data.component); +// if (index !== -1) { +// this.components.splice(index, 1); +// } +// +// }; +// +// R3.System.GUI.prototype.castSourceChanged = function(data) { +// this.buildGUI(null); +// }; +// +// R3.System.GUI.prototype.receiveDestinationChanged = function(data) { +// this.buildGUI(null); +// }; R3.System.GUI.prototype.stop = function() { - R3.System.prototype.stop.call(this); + this.guis.map( + function(gui) { + gui.dispose(); + } + ); - this.guis.map(function(gui){ - gui.domElement.instance.parentElement.removeChild(gui.instance.domElement); - }); + this.guiCreatedSubscription.remove(); - delete dat.GUI.removeEmtpyFolders; - - delete dat.GUI.removeAllFolders; + this.guiRemovedSubscription.remove(); this.buildGUISubscription.remove(); - this.meshDeletedSubscription.remove(); + this.clearGUISubscription.remove(); - this.meshSelectedSubscription.remove(); + this.beforeRenderSubscription.remove(); - this.meshDeselectedSubscription.remove(); + R3.System.prototype.stop.call(this); - this.newEntitySubscription.remove(); - - this.componentRemovedSubscription.remove(); - - this.sourceChangedSubscription.remove(); - - this.destinationChangedSubscription.remove(); - - this.instanceCreatedSubscription.remove(); - - this.removeComponentSubscription.remove(); - - this.windowResizeSubscription.remove(); - - this.meshFaceSelectedSubscription.remove(); - - this.meshFaceDeselectedSubscription.remove(); - - this.guis = []; }; diff --git a/src/r3-system-input.js b/src/r3-system-input.js index 845344e..d4e172c 100644 --- a/src/r3-system-input.js +++ b/src/r3-system-input.js @@ -332,6 +332,14 @@ R3.System.Input.prototype.beforeRender = function(project) { control instanceof R3.Controls.D3.FirstPerson ) { control.instance.update(project.clock.getDelta()); + + control.camera.updateFromInstance('position'); + control.camera.updateFromInstance('quaternion'); + control.camera.updateFromInstance('rotation'); + + if (control.camera instanceof R3.D3.Camera.Perspective.Stereo) { + control.camera.instance.userData.stereo.update(control.camera.instance); + } } } ); diff --git a/src/r3-system-render.js b/src/r3-system-render.js index 8813879..d6ba408 100644 --- a/src/r3-system-render.js +++ b/src/r3-system-render.js @@ -46,6 +46,8 @@ R3.System.Render = function() { this.queryParsedSubscription = null; + this.canvasResizeSubscription = null; + }; R3.System.Render.prototype = Object.create(R3.System.prototype); @@ -86,6 +88,11 @@ R3.System.Render.prototype.start = function() { this.queryParsed.bind(this) ); + this.canvasResizeSubscription = R3.Event.Subscribe( + R3.Event.CANVAS_RESIZE, + this.canvasResize.bind(this) + ); + this.graphs = R3.EntityManager.Instance.findComponentsByConstructor(R3.Graph); // this.cameras = R3.EntityManager.Instance.findComponentsByConstructor(R3.D3.Camera); @@ -157,6 +164,29 @@ R3.System.Render.prototype.queryParsed = function(data) { }; +R3.System.Render.prototype.canvasResize = function(canvas) { + + /** + * When canvas size changes - all viewports that belong to the renderer which owns the canvas has to + * update their sizes accordingly + */ + this.projects.map( + function(project) { + project.renderers.map( + function(renderer) { + if (renderer.canvas === canvas) { + renderer.viewports.map( + function(viewport) { + viewport.updateInstance('size'); + } + ) + } + } + ) + } + ); +}; + /** * It is assumed that the canvas size represents the 'window size'. * The R3.Event.WINDOW_RESIZE event data should contain the canvas size (width + height) in pixels @@ -540,6 +570,41 @@ R3.System.Render.prototype.render = function() { var size = renderer.getSize(); + var scenes = renderer.scenes; + + /** + * Render all scenes which do not belong to a viewport + */ + scenes.map( + function(scene) { + if (scene.viewport === null) { + + var camera = null; + + if (project.applicationMode === R3.API.Project.APPLICATION_MODE_EDIT) { + camera = project.cameras[scene.cameraIndexEdit]; + } else { + camera = project.cameras[scene.cameraIndexRun]; + } + + if (!scene.instance) { + console.warn('scene not ready'); + return; + } + + if (!camera || !camera.instance) { + console.warn('scene not ready'); + return; + } + + renderer.instance.render( + scene.instance, + camera.instance + ) + } + } + ); + var resetAutoClear = false; if (renderer.viewports.length > 1) { @@ -570,72 +635,75 @@ R3.System.Render.prototype.render = function() { viewport.height * size.height ); - // renderer.instance.setViewport( - // viewport.x, - // viewport.y, - // viewport.width, - // viewport.height - // ); - - - viewport.scenes.map( + scenes.map( function (scene) { + /** + * Ignore scenes which are not assigned to this viewport + */ + if (scene.viewports.indexOf(viewport) !== -1) { + return; + } + + /** + * Ignore scenes which are not ready + */ if (!scene.instance) { console.warn('scene not ready'); return; } + /** * Render textures first */ - 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) { - result.push(mesh) - } - return result; - }, - [] - ); - - meshesExcluded.map( - function(mesh){ - mesh.visible = false; - mesh.updateInstance('visible'); - } - ); - - cubeCamera.instance.update( - renderer.instance, - scene.instance - ); - - meshesExcluded.map( - function(mesh){ - mesh.visible = true; - mesh.updateInstance('visible'); - } - ); - - }.bind(this) - - ); + // 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) { + // result.push(mesh) + // } + // return result; + // }, + // [] + // ); + // + // meshesExcluded.map( + // function(mesh){ + // mesh.visible = false; + // mesh.updateInstance('visible'); + // } + // ); + // + // cubeCamera.instance.update( + // renderer.instance, + // scene.instance + // ); + // + // meshesExcluded.map( + // function(mesh){ + // mesh.visible = true; + // mesh.updateInstance('visible'); + // } + // ); + // + // }.bind(this) + // + // ); var camera = null; @@ -650,85 +718,104 @@ R3.System.Render.prototype.render = function() { return; } - if (scene.enableEffect) { + var cameraInstance = camera.instance; - if (!scene.effect) { - console.warn('enabling an effect when no effect is specified on the scene has no effect'); - return; - } + if (camera instanceof R3.D3.Camera.Perspective.Stereo) { - if (scene.enableComposer) { - console.warn('only an effect or composer can be active at any given time'); - return; - } - if (!scene.effect.ready()) { - console.warn('the effect is not ready yet: ' + scene.effect.name); - } + if (!viewport instanceof R3.D3.Viewport.FixedAspect.VR) { + console.warn('stereo cameras should work with VR viewports'); + } else { - if (renderer.target) { - console.warn('todo: test if rendering effect to target works'); - - if (!scene.effect.instance) { - return; + if (viewport.side === R3.D3.API.Viewport.FixedAspect.VR.VIEWPORT_LEFT) { + cameraInstance = camera.instance.userData.stereo.cameraL; + } else { + cameraInstance = camera.instance.userData.stereo.cameraR; } - scene.effect.instance.render( - scene.instance, - camera.instance, - renderer.target.instance - ); } - if (!scene.effect.instance) { - return; - } - - scene.effect.instance.render( - scene.instance, - camera.instance - ); - - console.warn('todo: check if have to return from effect render here'); - //return; - } - if (scene.enableComposer) { + // if (scene.enableEffect) { + // + // if (!scene.effect) { + // console.warn('enabling an effect when no effect is specified on the scene has no effect'); + // return; + // } + // + // if (scene.enableComposer) { + // console.warn('only an effect or composer can be active at any given time'); + // return; + // } + // + // 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; + // } + // + // scene.effect.instance.render( + // scene.instance, + // camera.instance, + // renderer.target.instance + // ); + // } + // + // if (!scene.effect.instance) { + // return; + // } + // + // scene.effect.instance.render( + // scene.instance, + // camera.instance + // ); + // + // console.warn('todo: check if have to return from effect render here'); + // //return; + // + // } - if (!scene.composer) { - console.warn('enabling a composer when no composer is specified on the scene has no effect'); - return; - } - - if (!scene.composer.ready()) { - console.warn('the composer is not ready yet: ' + scene.composer.name); - } - - scene.composer.render(); - - console.warn('todo: check if have to return from composer render here'); - //return; - } + // if (scene.enableComposer) { + // + // if (!scene.composer) { + // console.warn('enabling a composer when no composer is specified on the scene has no effect'); + // return; + // } + // + // if (!scene.composer.ready()) { + // console.warn('the composer is not ready yet: ' + scene.composer.name); + // } + // + // scene.composer.render(); + // + // console.warn('todo: check if have to return from composer render here'); + // //return; + // } if (renderer.target) { - if (!render.target.instance) { + if (!renderer.target.instance) { console.warn('render target instance not ready'); } renderer.instance.render( scene.instance, - camera.instance, + cameraInstance, renderer.target.instance ) } - camera.instance.updateProjectionMatrix(); + // camera.instance.updateProjectionMatrix(); renderer.instance.render( scene.instance, - camera.instance + cameraInstance ); /** @@ -793,6 +880,8 @@ R3.System.Render.prototype.stop = function() { this.queryParsedSubscription.remove(); + this.canvasResizeSubscription.remove(); + this.graphs = []; // this.renderers = [];