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

migration to jsartoolkit5

beta.r3js.org
-=yb4f310 2018-05-11 12:51:30 +02:00
parent 8c0fb722f5
commit eefaa1fbce
5 changed files with 223 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,8 +8,8 @@
* @param pathMarker
* @param scene
* @param camera
* @param renderer
* @param markerRoot
* @param videoScene
* @param videoCamera
* @constructor
*/
R3.API.AR = function(
@ -21,8 +21,8 @@ R3.API.AR = function(
pathMarker,
scene,
camera,
renderer,
markerRoot
videoScene,
videoCamera
) {
if (R3.Utils.UndefinedOrNull(id)) {
id = R3.Utils.RandomId();
@ -59,15 +59,22 @@ R3.API.AR = function(
}
this.camera = camera;
if (R3.Utils.UndefinedOrNull(renderer)) {
renderer = null;
if (R3.Utils.UndefinedOrNull(videoScene)) {
videoScene = new R3.D3.API.Scene(
null,
'Scene - AR Video'
);
}
this.renderer = renderer;
this.videoScene = videoScene;
if (R3.Utils.UndefinedOrNull(markerRoot)) {
markerRoot = null;
if (R3.Utils.UndefinedOrNull(videoCamera)) {
videoCamera = new R3.D3.API.Camera.Orthographic(
{
name : 'Camera Orthgraphic - AR Video'
}
);
}
this.markerRoot = markerRoot;
this.videoCamera = videoCamera;
R3.API.Component.call(
this,

208
src/r3-ar.js
View File

@ -25,9 +25,8 @@ R3.AR = function(
apiAR.pathMarker,
apiAR.scene,
apiAR.camera,
apiAR.renderer,
apiAR.markerRoot,
apiAR.renderConfiguration
apiAR.videoScene,
apiAR.videoCamera
);
if (
@ -39,11 +38,35 @@ R3.AR = function(
}
if (
R3.Utils.Defined(this.markerRoot) &&
R3.Utils.Defined(this.markerRoot.componentType) &&
!(this.markerRoot instanceof R3.D3.Object)
R3.Utils.Defined(this.scene) &&
R3.Utils.Defined(this.scene.componentType) &&
!(this.scene instanceof R3.D3.Scene)
) {
this.markerRoot = R3.Component.ConstructFromObject(this.markerRoot);
this.scene = R3.Component.ConstructFromObject(this.scene);
}
if (
R3.Utils.Defined(this.camera) &&
R3.Utils.Defined(this.camera.componentType) &&
!(this.camera instanceof R3.D3.Camera.Orthographic)
) {
this.camera = R3.Component.ConstructFromObject(this.camera);
}
if (
R3.Utils.Defined(this.videoScene) &&
R3.Utils.Defined(this.videoScene.componentType) &&
!(this.videoScene instanceof R3.D3.Scene)
) {
this.videoScene = R3.Component.ConstructFromObject(this.videoScene);
}
if (
R3.Utils.Defined(this.videoCamera) &&
R3.Utils.Defined(this.videoCamera.componentType) &&
!(this.videoCamera instanceof R3.D3.Camera.Orthographic)
) {
this.videoCamera = R3.Component.ConstructFromObject(this.videoCamera);
}
R3.Component.call(
@ -52,8 +75,8 @@ R3.AR = function(
'video' : R3.Video,
'scene' : R3.D3.Scene,
'camera' : R3.D3.Camera,
'renderer' : R3.D3.Renderer,
'markerRoot' : R3.D3.Object
'videoScene' : R3.D3.Scene,
'videoCamera' : R3.D3.Camera
}
);
@ -68,6 +91,81 @@ R3.AR.prototype.constructor = R3.AR;
*/
R3.AR.prototype.createInstance = function() {
ARController.prototype.setupThree = function(arComponent) {
return function() {
if (this.THREE_JS_ENABLED) {
return;
}
this.THREE_JS_ENABLED = true;
/*
Listen to getMarker events to keep track of Three.js markers.
*/
this.addEventListener(
'getMarker',
function (event) {
if (event.data.type === artoolkit.PATTERN_MARKER) {
console.log('found marker');
/**
* We want to update the camera
*/
var modelViewMatrix = new THREE.Matrix4().fromArray(event.data.matrix);
/**
* Apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
*/
var tmpMatrix = new THREE.Matrix4().copy(this._artoolkitProjectionAxisTransformMatrix);
tmpMatrix.multiply(modelViewMatrix);
modelViewMatrix.copy(tmpMatrix);
/**
* Change axis orientation on marker - artoolkit say Z is normal to the marker - ar.js say Y is normal to the marker
*/
var markerAxisTransformMatrix = new THREE.Matrix4().makeRotationX(Math.PI / 2);
modelViewMatrix.multiply(markerAxisTransformMatrix);
arComponent.camera.instance.matrix.getInverse(modelViewMatrix);
/**
* Decompose - the matrix into .position, .quaternion, .scale
*/
arComponent.camera.instance.matrix.decompose(
arComponent.camera.instance.position,
arComponent.camera.instance.quaternion,
arComponent.camera.instance.scale
);
// get projectionMatrixArr from artoolkit
var projectionMatrixArr = this.camera_mat;
var projectionMatrix = new THREE.Matrix4().fromArray(projectionMatrixArr);
// apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
projectionMatrix.multiply(this._artoolkitProjectionAxisTransformMatrix);
arComponent.camera.instance.projectionMatrix.copy(projectionMatrix);
}
}
);
this.threePatternMarkers = {};
this._artoolkitProjectionAxisTransformMatrix = new THREE.Matrix4();
this._artoolkitProjectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI));
this._artoolkitProjectionAxisTransformMatrix.multiply(new THREE.Matrix4().makeRotationZ(Math.PI));
}
}(this);
R3.Event.Emit(
R3.Event.GET_RENDER_CONFIGURATION,
null,
@ -105,15 +203,39 @@ R3.AR.prototype.createInstance = function() {
ARController.getUserMediaThreeScene(
{
maxARVideoSize: 320,
cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat',
cameraParam: this.pathCamera,
onSuccess: function (arScene,
arController,
arCamera) {
arScene.scene = this.scene.instance;
R3.Event.Emit(
R3.Event.GET_RENDER_CONFIGURATION,
null,
function(renderConfiguration) {
arScene.camera = this.camera.instance;
this.videoCamera.instance = arScene.videoCamera;
this.videoScene.instance = arScene.videoScene;
this.videoScene.camera = this.videoCamera;
/**
* Also update the video texture before render
*/
this.subscribe(
R3.Event.BEFORE_RENDER,
function() {
arScene.videoScene.children[0].material.map.needsUpdate = true;
}
);
if (renderConfiguration.activeScenes.indexOf(this.videoScene) === -1) {
renderConfiguration.activeScenes.unshift(this.videoScene);
}
}.bind(this)
);
arController.loadMarker(
this.pathMarker,
@ -121,25 +243,7 @@ R3.AR.prototype.createInstance = function() {
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);
markerRoot.add(this.scene.instance);
this.instance = {
arScene: arScene,
@ -275,32 +379,32 @@ 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'
}
);
}
}
//
// 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');
if (property === 'videoScene') {
console.warn('todo: update videoScene');
return;
}
if (property === 'markerRoot') {
console.warn('todo: update markerRoot');
if (property === 'videoCamera') {
console.warn('todo: update videoCamera');
return;
}
@ -322,8 +426,8 @@ 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.Utils.IdOrNull(this.videoScene),
R3.Utils.IdOrNull(this.videoCamera)
);
};

2
src/r3-augmented-runtime.js
View File

@ -21,7 +21,7 @@ R3.AugmentedRuntime = function(
this.name = name;
if (R3.Utils.UndefinedOrNull(augmentedType)) {
augmentedType = R3.AugmentedRuntime.AR_JS;
augmentedType = R3.AugmentedRuntime.JS_AR_TOOLKIT_5;
}
this.augmentedType = augmentedType;

17
src/r3-d3-scene.js
View File

@ -7,7 +7,8 @@
*/
R3.D3.Scene = function (
graphics,
apiScene
apiScene,
instance
) {
this.graphics = graphics;
this.graphics.isNotThreeThrow();
@ -106,6 +107,8 @@ R3.D3.Scene = function (
this.storeClones = false;
this.instance = instance;
R3.Component.call(
this,
{
@ -123,13 +126,23 @@ R3.D3.Scene = function (
R3.D3.Scene.prototype = Object.create(R3.Component.prototype);
R3.D3.Scene.prototype.constructor = R3.D3.Scene;
R3.D3.Scene.prototype.constructFromInstance = function() {
this.loaded = true;
console.log('todo: - setup scene from instance');
};
/**
* Creates an instance scene
* @returns {THREE.Scene}
*/
R3.D3.Scene.prototype.createInstance = function() {
this.instance = new THREE.Scene();
if (R3.Utils.UndefinedOrNull(this.instance)) {
this.instance = new THREE.Scene();
} else {
this.constructFromInstance();
return;
}
this.instance.name = this.name;

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

@ -705,6 +705,23 @@ R3.System.Render.prototype.render = function(data) {
arComponent = this.arComponents[0];
}
if (arComponent) {
arComponent.instance.arScene.process();
}
var resetAutoClear = false;
if (scenes.length > 1) {
if (renderer.autoClear) {
resetAutoClear = true;
}
renderer.autoClear = false;
renderer.updateInstance('autoClear');
renderer.clear();
}
var size = renderer.getSize();
renderer.viewports.map(
@ -756,6 +773,15 @@ R3.System.Render.prototype.render = function(data) {
function (scene) {
var backupCamera = camera;
/**
* Scene camera overrides normal camera
*/
if (scene.camera) {
camera = scene.camera;
}
if (renderer.renderMode === R3.API.Renderer.MODE_TARGET ||
renderer.renderMode === R3.API.Renderer.MODE_CANVAS_AND_TARGET) {
@ -774,19 +800,21 @@ R3.System.Render.prototype.render = function(data) {
return;
}
if (arComponent) {
arComponent.beforeRender();
renderer.instance.render( scene.instance, camera.instance);
} else {
renderer.render(scene, camera);
}
renderer.render(scene, camera);
}
camera = backupCamera;
}.bind(this)
);
}.bind(this)
);
if (resetAutoClear) {
renderer.autoClear = true;
renderer.updateInstance('autoClear');
}
R3.Event.Emit(
R3.Event.AFTER_RENDER,
data