migration to jsartoolkit5
parent
8c0fb722f5
commit
eefaa1fbce
|
@ -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
208
src/r3-ar.js
|
@ -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)
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue