cybafelo
/
r3-legacy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

migrate to AR.js

beta.r3js.org
-=yb4f310 2018-05-06 19:57:07 +02:00
parent c7abedc0c7
commit f3d485ba0a
9 changed files with 257 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/r3-api-ar.js
View File

@ -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;

7
src/r3-api-render-configuration.js
View File

@ -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 = [];
}

16
src/r3-api-renderer-d3.js
View File

@ -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,

8
src/r3-api-video.js
View File

@ -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;

249
src/r3-ar.js
View File

@ -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
// )
// }
}
};

4
src/r3-render-configuration.js
View File

@ -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);

22
src/r3-renderer-d3.js
View File

@ -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;

26
src/r3-system-render.js
View File

@ -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);
}

4
src/r3-video.js
View File

@ -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);
};