arcs / arcs.js

Go to a project
Toggle navigation Toggle navigation pinning
Jean-Yves Didier
4dcf440e 1 parent 02a32667

upgrade of components to the new system

Expand all
Inline Side-by-side
Showing 9 changed files with 151 additions and 136 deletions
......@@ -9,6 +9,7 @@
"video" : { "type": "LiveSource", "value": { "video": "video", "facingMode": "environment" }},
"viewer" : { "type": "XRViewer", "value": {
"sessionConfig": {
"requiredFeatures": [ "camera-access"],
"optionalFeatures": [ "local-floor", "dom-overlay" ],
"domOverlay" : { "root": "#container"}
}
......@@ -66,7 +67,7 @@
"connections" : [
{ "source": "viewer", "signal": "onRender", "destination": "display", "slot": "updatePosition"},
{ "source": "viewer", "signal": "onRender", "destination": "filters", "slot": "computeProjection"},
{ "source": "viewer", "signal": "onRender", "destination": "trigger", "slot": "triggerCamera"},
{ "source": "viewer", "signal": "onRender", "destination": "filters", "slot": "triggerCamera"},
{ "source": "viewer", "signal": "onRender", "destination": "video", "slot": "grabFrame"},
{ "source": "viewer", "signal": "onStarted", "destination": "video", "slot": "start"},
{ "source": "filters", "signal": "updateProjection", "destination": "display", "slot": "updateProjection"}
......
......@@ -3,8 +3,8 @@
<title>ARCS: WebXR example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="arcs.css">
<script src="../../deps/mobileconsole/hnl.mobileConsole.js"></script>
<script>mobileConsole.init()</script>
<!--script src="../../deps/mobileconsole/hnl.mobileConsole.js"></script-->
<!--script>mobileConsole.init()</script-->
<script type="module"
data-base-url="../.."
data-arcsapp="arcsapp.json"
......
arcs_module(function (ARCS,three) {
var PipeNetwork = ARCS.Component.create(
function ( jsonData ) {
console.log("instanciating pipe network");
var pipeNetwork = new THREE.Object3D();
import ARCS from '../build/arcs.js';
import * as THREE from '../deps/three.js/index.js';
var X_OFFSET = 0; // 2.428592;
var Y_OFFSET = 0; // 48.613426;
const mmtoDeg = 0.00000001;
var createTube = function(coords, p, color, idx) {
var i, j, k;
// the father of it all
var root = new THREE.Object3D();
var PipeNetwork = ARCS.Component.create(
function ( jsonData ) {
console.log("instanciating pipe network");
var pipeNetwork = new THREE.Object3D();
// computing the internal diameter of the conduct
var diametre = (p.DIAMETRE*mmtoDeg) || (100*mmtoDeg) ;
var X_OFFSET = 0; // 2.428592;
var Y_OFFSET = 0; // 48.613426;
const mmtoDeg = 0.00000001;
var createTube = function(coords, p, color, idx) {
var i, j, k;
// the father of it all
var root = new THREE.Object3D();
// computing the internal diameter of the conduct
var diametre = (p.DIAMETRE*mmtoDeg) || (100*mmtoDeg) ;
for (j=0; j < coords.length ; j++) {
if (coords[j].length >= 2) {
var path = new THREE.CurvePath();
for (j=0; j < coords.length ; j++) {
if (coords[j].length >= 2) {
var path = new THREE.CurvePath();
for (k=0; k < coords[j].length-1 ; k++) {
path.add(
new THREE.LineCurve3(
new THREE.Vector3( coords[j][k][0] - X_OFFSET, coords[j][k][1] - Y_OFFSET,0),
new THREE.Vector3( coords[j][k+1][0] - X_OFFSET , coords[j][k+1][1] - Y_OFFSET, 0)
)
);
}
var geometry = new THREE.TubeGeometry(path, 10, diametre,10);
var bufferedGeometry = new THREE.BufferGeometry();
bufferedGeometry.fromGeometry(geometry);
root = new THREE.Mesh( bufferedGeometry, new THREE.MeshBasicMaterial({
color: color,
})); //new THREE.MeshBasicMaterial({color : color}) );
root.userData = idx;
}
for (k=0; k < coords[j].length-1 ; k++) {
path.add(
new THREE.LineCurve3(
new THREE.Vector3( coords[j][k][0] - X_OFFSET, coords[j][k][1] - Y_OFFSET,0),
new THREE.Vector3( coords[j][k+1][0] - X_OFFSET , coords[j][k+1][1] - Y_OFFSET, 0)
)
);
}
return root;
};
var geometry = new THREE.TubeGeometry(path, 10, diametre,10);
var bufferedGeometry = new THREE.BufferGeometry();
bufferedGeometry.fromGeometry(geometry);
root = new THREE.Mesh( bufferedGeometry, new THREE.MeshBasicMaterial({
color: color,
})); //new THREE.MeshBasicMaterial({color : color}) );
root.userData = idx;
}
}
return root;
};
var prepareNetwork = function ( gjObject, color ) {
if (gjObject.type === "FeatureCollection") {
if (gjObject.features === undefined) { return ; }
var i, j, k;
var prepareNetwork = function ( gjObject, color ) {
if (gjObject.type === "FeatureCollection") {
if (gjObject.features === undefined) { return ; }
var i, j, k;
for (i=0; i < gjObject.features.length; i++) {
var feature = gjObject.features[i];
if (feature.geometry === undefined || feature.properties === undefined) {
return ;
}
var geometry = feature.geometry;
if (geometry.type === "MultiLineString") {
pipeNetwork.add(createTube(geometry.coordinates, feature.properties , color, i));
}
}
for (i=0; i < gjObject.features.length; i++) {
var feature = gjObject.features[i];
if (feature.geometry === undefined || feature.properties === undefined) {
return ;
}
};
var geometry = feature.geometry;
prepareNetwork(jsonData, 0x0000ff);
if (geometry.type === "MultiLineString") {
pipeNetwork.add(createTube(geometry.coordinates, feature.properties , color, i));
}
}
}
};
prepareNetwork(jsonData, 0x0000ff);
this.init = function() {
this.emit('sendSceneGraph', pipeNetwork);
};
this.init = function() {
this.emit('sendSceneGraph', pipeNetwork);
};
},
['init'],
['sendSceneGraph']
);
return { PipeNetwork : PipeNetwork };
},
['deps/three.js/index']
);
\ No newline at end of file
},
['init'],
['sendSceneGraph']
);
export default { PipeNetwork : PipeNetwork };
......
arcs_module(
function(ARCS) {
var GPSInertialPose = new ARCS.Component.create(
function() {
var id = 0;
var pose = {
position : [ 0, 0, 0],
rotation : [ [ 1, 0, 0 ], [ 0, 1, 0 ], [ 0, 0, 1 ] ]
};
var cos = Math.cos;
var sin = Math.sin;
var meterToDegree = 0.00001;
this.setId = function(identifier) {
id = identifier;
};
this.setPosition = function(longitude, latitude) {
pose.position = [ longitude, latitude, 1.2*meterToDegree ];
this.emit('sendPose', [{ id: id, pose : pose}]);
};
// this function computes the rotation matrix according to
// https://w3c.github.io/deviceorientation/spec-source-orientation.html
this.setOrientation = function(orientation) {
var alpha = orientation.alpha;
var beta = orientation.beta;
var gamma = orientation.gamma;
pose.rotation = [[
cos(alpha)*cos(gamma) - sin(alpha)*sin(beta)*sin(gamma),
-cos(beta)*sin(alpha),
cos(gamma)*sin(alpha)*sin(beta) + cos(alpha)*sin(gamma)
], [
cos(gamma)*sin(alpha) + cos(alpha)*sin(beta)*sin(gamma),
cos(alpha)*cos(beta),
sin(alpha)*sin(gamma) - cos(alpha)*cos(gamma)*sin(beta)
], [
-cos(beta)*sin(gamma),
sin(beta),
cos(beta)*cos(gamma)
]
];
this.emit('sendPose', [{ id: id, pose : pose}]);
};
},
['setPosition','setOrientation', 'setId'],
['sendPose']
);
import ARCS from '../build/arcs.js';
var GPSInertialPose = new ARCS.Component.create(
function() {
var id = 0;
var pose = {
position : [ 0, 0, 0],
rotation : [ [ 1, 0, 0 ], [ 0, 1, 0 ], [ 0, 0, 1 ] ]
};
var cos = Math.cos;
var sin = Math.sin;
var meterToDegree = 0.00001;
this.setId = function(identifier) {
id = identifier;
};
this.setPosition = function(longitude, latitude) {
pose.position = [ longitude, latitude, 1.2*meterToDegree ];
this.emit('sendPose', [{ id: id, pose : pose}]);
};
// this function computes the rotation matrix according to
// https://w3c.github.io/deviceorientation/spec-source-orientation.html
this.setOrientation = function(orientation) {
var alpha = orientation.alpha;
var beta = orientation.beta;
var gamma = orientation.gamma;
pose.rotation = [[
cos(alpha)*cos(gamma) - sin(alpha)*sin(beta)*sin(gamma),
-cos(beta)*sin(alpha),
cos(gamma)*sin(alpha)*sin(beta) + cos(alpha)*sin(gamma)
], [
cos(gamma)*sin(alpha) + cos(alpha)*sin(beta)*sin(gamma),
cos(alpha)*cos(beta),
sin(alpha)*sin(gamma) - cos(alpha)*cos(gamma)*sin(beta)
], [
-cos(beta)*sin(gamma),
sin(beta),
cos(beta)*cos(gamma)
]
];
this.emit('sendPose', [{ id: id, pose : pose}]);
};
},
['setPosition','setOrientation', 'setId'],
['sendPose']
);
return { GPSInertialPose: GPSInertialPose };
}
);
\ No newline at end of file
export default { GPSInertialPose: GPSInertialPose };
......
This diff is collapsed. Click to expand it.
/**
* DEPRECATED
*/
arcs_module(
function(ARCS) {
var MessageBox;
......@@ -30,4 +34,4 @@ arcs_module(
return { MessageBox: MessageBox };
}
);
\ No newline at end of file
);
......
/**
* DEPRECATED
*/
arcs_module(
function(ARCS) {
var Notificator;
......@@ -39,4 +42,4 @@ arcs_module(
return { Notificator: Notificator};
}
);
\ No newline at end of file
);
......
/**
* DEPRECATED
*/
arcs_module(
function (ARCS) {
var ScoreBoard;
......@@ -44,4 +47,4 @@ arcs_module(
return { ScoreBoard: ScoreBoard };
}
);
\ No newline at end of file
);
......
......@@ -106,6 +106,7 @@ XRViewer = ARCS.Component.create(
)
);
// we will also have to modify the orientation
// because offset position is not enough
xrSpace = xrSpace.getOffsetReferenceSpace(
new XRRigidTransform(
{ x: pos.x, y: pos.y, z:pos.z, w:1},
......@@ -145,6 +146,12 @@ XRViewer = ARCS.Component.create(
//console.log(JSON.stringify(renderer.xr.getCamera().position));
let pose = frame.getViewerPose(renderer.xr.getReferenceSpace());
console.log(pose);
/*for (let xrView of pose.views) {
if (xrView.camera) {
console.log("I can see a camera");
} */
/*if (pose) {
console.log(pose.views[0].projectionMatrix);
}*/
......