diff --git a/src/r3-api-ar.js b/src/r3-api-ar.js index 490191d..fff6176 100644 --- a/src/r3-api-ar.js +++ b/src/r3-api-ar.js @@ -8,6 +8,7 @@ * @param pathMarker * @param scene * @param camera + * @param renderer * @param markerRoot * @constructor */ @@ -20,6 +21,7 @@ R3.API.AR = function( pathMarker, scene, camera, + renderer, markerRoot ) { if (R3.Utils.UndefinedOrNull(id)) { @@ -57,8 +59,13 @@ R3.API.AR = function( } this.camera = camera; + if (R3.Utils.UndefinedOrNull(renderer)) { + renderer = null; + } + this.renderer = renderer; + if (R3.Utils.UndefinedOrNull(markerRoot)) { - markerRoot = new R3.D3.API.Object(); + markerRoot = null; } this.markerRoot = markerRoot; diff --git a/src/r3-api-render-configuration.js b/src/r3-api-render-configuration.js index 1585690..09aec02 100644 --- a/src/r3-api-render-configuration.js +++ b/src/r3-api-render-configuration.js @@ -7,6 +7,7 @@ * @param aspectRatio * @param scaleMode * @param activeCamera + * @param activeScene * @param activeScenes * @param activeComposer * @param activeEffect @@ -23,6 +24,7 @@ R3.API.RenderConfiguration = function ( aspectRatio, scaleMode, activeCamera, + activeScene, activeScenes, activeRenderer, activeComposer, @@ -63,6 +65,11 @@ R3.API.RenderConfiguration = function ( } this.activeCamera = activeCamera; + if (R3.Utils.UndefinedOrNull(activeScene)) { + activeScene = null; + } + this.activeScene = activeScene; + if (R3.Utils.UndefinedOrNull(activeScenes)) { activeScenes = []; } diff --git a/src/r3-api-renderer-d3.js b/src/r3-api-renderer-d3.js index 9de21bf..6458000 100644 --- a/src/r3-api-renderer-d3.js +++ b/src/r3-api-renderer-d3.js @@ -33,6 +33,8 @@ * @param clippingPlanes * @param clearColor * @param viewports + * @param alpha + * @param opacity * @constructor */ R3.API.Renderer.D3 = function ( @@ -68,7 +70,9 @@ R3.API.Renderer.D3 = function ( renderTarget, clippingPlanes, clearColor, - viewports + viewports, + alpha, + opacity ) { if (R3.Utils.UndefinedOrNull(apiRenderer)) { @@ -248,6 +252,16 @@ R3.API.Renderer.D3 = function ( } this.viewports = viewports; + if (R3.Utils.UndefinedOrNull(alpha)) { + alpha = true; + } + this.alpha = alpha; + + if (R3.Utils.UndefinedOrNull(opacity)) { + opacity = 1; + } + this.opacity = opacity; + R3.API.Renderer.call( this, apiRenderer.id, diff --git a/src/r3-api-video.js b/src/r3-api-video.js index b8cd51e..eec1ead 100644 --- a/src/r3-api-video.js +++ b/src/r3-api-video.js @@ -35,13 +35,15 @@ R3.API.Video = function( } this.autoUpdateSize = autoUpdateSize; + var size = R3.Utils.GetWindowSize(); + if (R3.Utils.UndefinedOrNull(width)) { - width = 320; + width = size.width; } this.width = width; if (R3.Utils.UndefinedOrNull(height)) { - height = 240; + height = size.height; } this.height = height; @@ -51,7 +53,7 @@ R3.API.Video = function( this.offset = offset; if (R3.Utils.UndefinedOrNull(source)) { - source = "Data/output_4.ogg"; + source = null; } this.source = source; diff --git a/src/r3-ar.js b/src/r3-ar.js index 71b44ca..4cc4c98 100644 --- a/src/r3-ar.js +++ b/src/r3-ar.js @@ -25,7 +25,9 @@ R3.AR = function( apiAR.pathMarker, apiAR.scene, apiAR.camera, - apiAR.markerRoot + apiAR.renderer, + apiAR.markerRoot, + apiAR.renderConfiguration ); if ( @@ -50,9 +52,11 @@ R3.AR = function( 'video' : R3.Video, 'scene' : R3.D3.Scene, 'camera' : R3.D3.Camera, + 'renderer' : R3.D3.Renderer, 'markerRoot' : R3.D3.Object } ); + }; R3.AR.prototype = Object.create(R3.Component.prototype); @@ -64,98 +68,168 @@ R3.AR.prototype.constructor = R3.AR; */ R3.AR.prototype.createInstance = function() { - if (this.augmented.augmentedType !== R3.AugmentedRuntime.JS_AR_TOOLKIT_5) { - console.warn('this augmented runtime is not implemented'); - return; - } + R3.Event.Emit( + R3.Event.GET_RENDER_CONFIGURATION, + null, + function (renderConfiguration) { - if (this.scene === null) { + if (this.scene === null) { + this.scene = renderConfiguration.activeScene; + } - R3.Event.Emit( - R3.Event.GET_DEFAULT_SCENE, - null, - function(scene) { - this.scene = scene; - }.bind(this) - ); + if (this.camera === null) { + this.camera = renderConfiguration.activeCamera; + } + + if (this.renderer === null) { + this.renderer = renderConfiguration.activeRenderer; + } + + }.bind(this) + ); + + if (this.augmented.augmentedType === R3.AugmentedRuntime.JS_AR_TOOLKIT_5) { + + console.warn('Using js artoolkit 5'); if (this.scene === null) { console.warn('there is no default scene to create an AR component with'); return; } - } - - if (this.camera === null) { - - R3.Event.Emit( - R3.Event.GET_DEFAULT_CAMERA, - null, - function(camera) { - this.camera = camera; - }.bind(this) - ); if (this.camera === null) { console.warn('there is no default camera to create an AR component with'); return; } + + ARController.getUserMediaThreeScene( + { + maxARVideoSize: 320, + cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat', + + onSuccess: function (arScene, + arController, + arCamera) { + + arScene.scene = this.scene.instance; + + arScene.camera = this.camera.instance; + + arController.loadMarker( + this.pathMarker, + function (markerId) { + + var markerRoot = arController.createThreeMarker(markerId); + + this.markerRoot.instance = markerRoot; + + this.markerRoot.instance.markerMatrix = new Float64Array(12); + + // var cameraMatrix = arController.getCameraMatrix(); + // this.camera.instance.projectionMatrix.fromArray(cameraMatrix); + + var child = null; + var c = arScene.scene.children.length - 1; + + for (c; c >= 0; c -= 1) { + child = arScene.scene.children[c]; + markerRoot.add(child); + arScene.scene.remove(child); + } + + arScene.scene.add(markerRoot); + + //arScene.scene.add(this.camera.instance); + + this.instance = { + arScene: arScene, + arController: arController, + arCamera: arCamera + }; + + R3.Component.prototype.createInstance.call(this); + + }.bind(this) + ); + + }.bind(this) + } + ); + + return; } - ARController.getUserMediaThreeScene( - { - maxARVideoSize: 320, - cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat', + if (this.augmented.augmentedType === R3.AugmentedRuntime.AR_JS) { - onSuccess: function( - arScene, - arController, - arCamera - ) { + console.log('using ar.js'); - arScene.scene = this.scene.instance; + var size = R3.Utils.GetWindowSize(); - arScene.camera = this.camera.instance; + this.arToolkitSource = new THREEx.ArToolkitSource( + { + sourceType: 'webcam', + sourceWidth: size.width, + sourceHeight: size.height, + displayWidth: size.width, + displayHeight: size.height + } + ); - arController.loadMarker( - this.pathMarker, - function(markerId) { + this.arToolkitSource.init( - var markerRoot = arController.createThreeMarker(markerId); + function initialized() { - this.markerRoot.instance = markerRoot; + delete this.video.instance; - this.markerRoot.instance.markerMatrix = new Float64Array(12); + this.video.instance = this.arToolkitSource.domElement; - // var cameraMatrix = arController.getCameraMatrix(); - // this.camera.instance.projectionMatrix.fromArray(cameraMatrix); + this.arToolkitContext = new THREEx.ArToolkitContext( + { + cameraParametersUrl: this.pathCamera, + detectionMode: 'mono' + } + ); - var child = null; - var c = arScene.scene.children.length - 1; + this.arToolkitContext.init( - for (c; c >= 0; c -= 1) { - child = arScene.scene.children[c]; - markerRoot.add(child); - arScene.scene.remove(child); - } + function initialized() { - arScene.scene.add(markerRoot); - - //arScene.scene.add(this.camera.instance); + this.controls = new THREEx.ArMarkerControls( + this.arToolkitContext, + this.camera.instance, + { + type: 'pattern', + patternUrl: this.pathMarker, + changeMatrixMode: 'cameraTransformMatrix' + } + ); this.instance = { - arScene : arScene, - arController : arController, - arCamera : arCamera + arToolkitContext: this.arToolkitContext, + arToolkitSource: this.arToolkitSource }; + this.scene.instance.add(this.camera.instance); + + this.resize(); + + /** + * Copy the projectionmatrix of the context to our camera + * UPDATE - don't do this cause it messes up the projection matrix + */ + // this.camera.instance.projectionMatrix.copy( + // this.arToolkitContext.getProjectionMatrix() + // ); + + R3.Component.prototype.createInstance.call(this); }.bind(this) - ); + ) }.bind(this) - } - ); + ); + } }; @@ -198,6 +272,27 @@ R3.AR.prototype.updateInstance = function(property) { if (property === 'camera') { console.warn('todo: update camera'); + + if (this.augmented.augmentedType === R3.AugmentedRuntime.AR_JS) { + + if (this.camera) { + this.controls = new THREEx.ArMarkerControls( + this.arToolkitContext, + this.camera.instance, + { + type: 'pattern', + patternUrl: this.pathMarker, + changeMatrixMode: 'cameraTransformMatrix' + } + ); + } + } + + return; + } + + if (property === 'renderer') { + console.warn('todo: update camera'); return; } @@ -224,6 +319,42 @@ R3.AR.prototype.toApiObject = function() { this.pathMarker, R3.Utils.IdOrNull(this.scene), R3.Utils.IdOrNull(this.camera), + R3.Utils.IdOrNull(this.renderer), R3.Utils.IdOrNull(this.markerRoot) ); }; + +R3.AR.prototype.beforeRender = function() { + + if (this.augmented.augmentedType === R3.AugmentedRuntime.JS_AR_TOOLKIT_5) { + this.instance.arScene.process(); + this.instance.arScene.renderOn(renderer.instance); + return; + } + + if (this.augmented.augmentedType === R3.AugmentedRuntime.AR_JS) { + this.arToolkitContext.update( + this.arToolkitSource.domElement + ); + return; + } + +}; + +R3.AR.prototype.resize = function() { + + if (this.augmented.augmentedType === R3.AugmentedRuntime.AR_JS) { + + console.log('updating AR size'); + + this.arToolkitSource.onResizeElement(); + + // if (this.arToolkitContext.arController !== null){ + // this.arToolkitSource.copyElementSizeTo( + // this.arToolkitContext.arController.canvas + // ) + // } + + } + +}; \ No newline at end of file diff --git a/src/r3-render-configuration.js b/src/r3-render-configuration.js index cf67929..f38b154 100644 --- a/src/r3-render-configuration.js +++ b/src/r3-render-configuration.js @@ -25,6 +25,7 @@ R3.RenderConfiguration = function ( apiRenderConfiguration.aspectRatio, apiRenderConfiguration.scaleMode, apiRenderConfiguration.activeCamera, + apiRenderConfiguration.activeScene, apiRenderConfiguration.activeScenes, apiRenderConfiguration.activeRenderer, apiRenderConfiguration.activeComposer, @@ -43,6 +44,7 @@ R3.RenderConfiguration = function ( this, { 'activeCamera' : R3.D3.Camera, + 'activeScene' : R3.D3.Scene, 'activeScenes' : [R3.D3.Scene], 'activeRenderer' : R3.Renderer, 'activeComposer' : R3.D3.Composer, @@ -135,6 +137,7 @@ R3.RenderConfiguration.prototype.updateInstance = function(property) { } if ( + property === 'activeScene' || property === 'activeScenes' || property === 'activeRenderer' ) { @@ -239,6 +242,7 @@ R3.RenderConfiguration.prototype.toApiObject = function() { this.aspectRatio, this.scaleMode, R3.Utils.IdOrNull(this.activeCamera), + R3.Utils.IdOrNull(this.activeScene), this.activeScenes.map( function(activeScene) { return R3.Utils.IdOrNull(activeScene); diff --git a/src/r3-renderer-d3.js b/src/r3-renderer-d3.js index e2eafcc..b415ae7 100644 --- a/src/r3-renderer-d3.js +++ b/src/r3-renderer-d3.js @@ -51,7 +51,9 @@ R3.Renderer.D3 = function ( apiRendererD3.renderTarget, apiRendererD3.clippingPlanes, apiRendererD3.clearColor, - apiRendererD3.viewports + apiRendererD3.viewports, + apiRendererD3.alpha, + apiRendererD3.opacity ); if (this.renderTarget instanceof R3.D3.API.RenderTarget) { @@ -180,7 +182,7 @@ R3.Renderer.D3.prototype.createInstance = function() { this.clearColor.g, this.clearColor.b ), - 1 - this.clearColor.a + this.opacity ); R3.Renderer.prototype.createInstance.call(this); @@ -385,14 +387,17 @@ R3.Renderer.D3.prototype.updateInstance = function(property) { return; } - if (property === 'clearColor') { + if ( + property === 'clearColor' || + property === 'opacity' + ) { this.instance.setClearColor( new THREE.Color( this.clearColor.r, this.clearColor.g, this.clearColor.b ), - 1 - this.clearColor.a + this.opacity ); return; } @@ -401,6 +406,11 @@ R3.Renderer.D3.prototype.updateInstance = function(property) { console.warn('todo: viewports change'); } + if (property === 'alpha') { + this.instance.alpha = this.alpha; + return; + } + R3.Renderer.prototype.updateInstance.call(this, property); }; @@ -533,7 +543,9 @@ R3.Renderer.D3.prototype.toApiObject = function() { function(viewport){ return R3.Utils.IdOrNull(viewport); } - ) + ), + this.alpha, + this.opacity ); return apiRendererD3; diff --git a/src/r3-system-render.js b/src/r3-system-render.js index cb7b53f..d0f2aae 100644 --- a/src/r3-system-render.js +++ b/src/r3-system-render.js @@ -293,6 +293,12 @@ R3.System.Render.prototype.windowResize = function(data) { } ); + R3.EntityManager.Instance.queryComponentsByConstructor(R3.AR).map( + function(ar) { + ar.resize(); + } + ); + R3.Event.Emit( R3.Event.AFTER_WINDOW_RESIZE, data @@ -769,24 +775,8 @@ R3.System.Render.prototype.render = function(data) { } if (arComponent) { - - arComponent.instance.arScene.process(); - - // if (arComponent.markerRoot.instance.visible) { - // arComponent.instance.arController.getTransMatSquareCont( - // 0, - // 1, - // arComponent.markerRoot.instance.markerMatrix, - // arComponent.markerRoot.instance.markerMatrix - // ); - // } - // - // arComponent.instance.arController.transMatToGLMat( - // arComponent.markerRoot.instance.markerMatrix, - // arComponent.markerRoot.instance.matrix.elements - // ); - - arComponent.instance.arScene.renderOn(renderer.instance); + arComponent.beforeRender(); + renderer.instance.render( scene.instance, camera.instance); } else { renderer.render(scene, camera); } diff --git a/src/r3-video.js b/src/r3-video.js index 815d96c..6263d8c 100644 --- a/src/r3-video.js +++ b/src/r3-video.js @@ -77,7 +77,9 @@ R3.Video.prototype.createInstance = function() { this.instance.height = this.height; } - this.instance.setAttribute('src', this.source); + if (this.source) { + this.instance.setAttribute('src', this.source); + } R3.Component.prototype.createInstance.call(this); };