arcs / arcs.js

Go to a project
Toggle navigation Toggle navigation pinning
Jean-Yves Didier
b0151d21 1 parent 7739d80d

Three.js components now using javascript modules

Expand all
Inline Side-by-side
Showing 20 changed files with 169 additions and 122 deletions
module.exports = function (grunt) {
"use strict";
let shim = function(obj) { return `\nexport default ${obj};\n`; };
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
......@@ -80,6 +82,37 @@ module.exports = function (grunt) {
}
},
file_append: {
default_options: {
files: [
{
append: shim('AR'),
prepend: `import CV from '../cv/index.js';\n`,
input: './deps/aruco/index.js'
},
{
append: shim('CV'),
input: './deps/cv/index.js'
}
]
}
},
'string-replace': {
dist: {
files: {
'deps/objloader/objloader.js': 'deps/objloader/index.js',
'deps/mtlloader/mtlloader.js': 'deps/mtlloader/index.js',
'deps/ddsloader/ddsloader.js': 'deps/ddsloader/index.js'
},
options: {
replacements:[{
pattern: '../../../build/three.module.js',
replacement: '../three.js/index.js'
}]
}
}
},
concat: {
dist: {
src: [
......@@ -122,9 +155,13 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-jslint');
grunt.loadNpmTasks('grunt-terser');
grunt.loadNpmTasks('grunt-bower-task');
grunt.loadNpmTasks('grunt-file-append');
grunt.loadNpmTasks('grunt-string-replace');
// Default task(s).
grunt.registerTask('default', ['concat','copy','terser']);
grunt.registerTask('lint', ['jslint']);
grunt.registerTask('doc', ['jsdoc']);
grunt.registerTask('install-deps', ['bower', 'file_append', 'string-replace']);
};
......
{
"name": "ARCS",
"version": "0.1.0",
"version": "0.2.0",
"description": "Augmented Reality Component System in web browser and node environment",
"main": "build/arcs.js",
"keywords": [
......@@ -11,10 +11,10 @@
"license": "GPL",
"dependencies": {
"tracking.js": "*",
"three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r68/build/three.min.js",
"objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJLoader.js",
"mtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/MTLLoader.js",
"objmtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJMTLLoader.js",
"three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r116/build/three.module.js",
"objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/OBJLoader.js",
"mtlloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/MTLLoader.js",
"ddsloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/DDSLoader.js",
"aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js",
"cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js",
"codemirror" : "*",
......
This diff is collapsed. Click to expand it.
arcs_module(
function (ARCS) {
var Animator;
/**
import ARCS from '../build/arcs.js';
var Animator;
/**
* @class Animator
* @classdesc A component that request new frames for animation.
* This component is useful when you want to create animations in the
* context of a web browser.
*/
Animator = ARCS.Component.create(
Animator = ARCS.Component.create(
function() {
var paused = false;
var self=this;
......@@ -49,8 +50,6 @@ arcs_module(
},
['start','stop'],
'onAnimationFrame'
);
return {Animator: Animator};
}
);
export default {Animator: Animator};
......
arcs_module(
function (ARCS, CV, AR) {
var ARUCODetector;
import ARCS from '../build/arcs.js';
import CV from '../deps/cv/index.js';
import AR from '../deps/aruco/index.js';
/**
var ARUCODetector;
/**
* @class ARUCODetector
* @classdesc Component that detects ARUCO markers in images
* This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library.
*/
ARUCODetector = ARCS.Component.create(
ARUCODetector = ARCS.Component.create(
function() {
var detector ;
......@@ -48,12 +50,6 @@ arcs_module(
},
'detect',
['onMarkers']
);
return {ARUCODetector: ARUCODetector};
},
[
{name:"deps/cv/index", exports:"CV"},
{name:"deps/aruco/index",exports:"AR"}
]
);
export default {ARUCODetector: ARUCODetector};
......
arcs_module(
function(ARCS, three) {
var ARViewer;
/**
import ARCS from '../build/arcs.js';
import * as THREE from '../deps/three.js/index.js';
import FrustumCamera from '../deps/three.js/frustumcamera.js';
var ARViewer;
/**
* @class ARViewer
* @classdesc Simple compositing viewer for augmented reality
*/
ARViewer = ARCS.Component.create(
ARViewer = ARCS.Component.create(
/** @lends ARViewer.prototype */
function () {
var container, sourceAspectRatio, sourceHeight;
......@@ -282,7 +285,9 @@ arcs_module(
var box = new THREE.Box3();
box.setFromObject(scene3d);
var center = box.center();
var radius = box.getBoundingSphere().radius;
var sphere = new THREE.Sphere();
box.getBoundingSphere(sphere);
var radius = sphere.radius;
camera3d.position.x = center.x ;
camera3d.position.y = center.y ;
......@@ -311,8 +316,7 @@ arcs_module(
],
[]
);
return {ARViewer: ARViewer};
},
[ 'deps/three.js/index','deps/three.js/frustumcamera']
);
export default {ARViewer: ARViewer};
......
import ARCS from '../build/arcs.js';
import POS from '../deps/pose/square_pose.js';
var MarkerLocator;
arcs_module(
function (ARCS, POS) {
var MarkerLocator;
MarkerLocator = ARCS.Component.create(
MarkerLocator = ARCS.Component.create(
function () {
var square_pose = new POS.SquareFiducial();
......@@ -44,10 +43,7 @@ arcs_module(
},
['locateMarkers','setFocalLength','setModelSize','setImageSource'],
['onLocatedMarkers']
);
);
return { MarkerLocator: MarkerLocator };
},
[ {name: "deps/pose/square_pose", exports: "POS"} ]
);
\ No newline at end of file
export default { MarkerLocator: MarkerLocator };
......
arcs_module(
function(ARCS,_three) {
var ObjectTransform ;
import ARCS from '../build/arcs.js';
import * as THREE from '../deps/three.js/index.js';
/**
var ObjectTransform ;
/**
* @class ObjectTransform
* @classdesc Apply transformations to objects
*/
ObjectTransform = ARCS.Component.create(
ObjectTransform = ARCS.Component.create(
function() {
var objRoot;
var refMat;
......@@ -115,11 +116,6 @@ arcs_module(
},
['setObject', 'setTransform', 'setId'],
[]
);
return { ObjectTransform : ObjectTransform };
},
[ "deps/three.js/index" ]
);
export default { ObjectTransform : ObjectTransform };
......
arcs_module(
function(ARCS, three, _objloader, _mtlloader, _objmtlloader) {
var OBJLoader;
import ARCS from '../build/arcs.js';
import * as THREE from '../deps/three.js/index.js';
import { OBJLoader } from '../deps/objloader/objloader.js';
import { MTLLoader } from '../deps/mtlloader/mtlloader.js';
//import { DDSLoader } from '../deps/ddsloader/ddsloader.js';
OBJLoader = ARCS.Component.create(
var internalOBJLoader;
internalOBJLoader = ARCS.Component.create(
function() {
var self = this;
var innerObject;
......@@ -34,23 +39,31 @@ arcs_module(
// we may use a string tokenizer to determine file types
// then all would be in the same loading slot.
//console.log("loading objects", objURL, mtlURL);
var manager = new THREE.LoadingManager();
//manager.addHandler( /\.dds$/i, new DDSLoader() );
console.log("loading objects", objURL, mtlURL);
if (mtlURL === undefined) {
//console.log("using loader");
loader = new THREE.OBJLoader();
loader = new OBJLoader(manager);
loader.load(objURL, onLoadWrapper, progress, error);
} else {
//console.log("using mtl loader");
loader = new THREE.OBJMTLLoader();
loader.load(objURL, mtlURL, onLoadWrapper, progress, error);
loader = new MTLLoader(manager);
loader.load(mtlURL, function(materials) {
materials.preload();
console.log(materials);
new OBJLoader(manager)
.setMaterials(materials)
.load(objURL, onLoadWrapper, progress, error);
}, progress, error);
}
};
this.loadJSON = function(jsonURL) {
var loader;
//console.log("loading objects", jsonURL);
loader = new THREE.JSONLoader();
loader = new THREE.ObjectLoader();
loader.load(jsonURL, onLoadJSON); //, progress, error);
......@@ -93,9 +106,6 @@ arcs_module(
},
["load","unitize", "resize"],
["onLoad"]
);
return { OBJLoader: OBJLoader};
},
[ 'deps/three.js/index', 'deps/objloader/index', 'deps/mtlloader/index','deps/objmtlloader/index' ]
);
export default { OBJLoader: internalOBJLoader};
......
arcs_module(function(ARCS) {
var TokenSender;
import ARCS from '../build/arcs.js';
TokenSender = ARCS.Component.create(
var TokenSender;
TokenSender = ARCS.Component.create(
function( arr ) {
var i;
var self = this;
......@@ -20,7 +21,6 @@ arcs_module(function(ARCS) {
},
[],
['sendToken']
);
);
return { TokenSender : TokenSender };
});
\ No newline at end of file
export default { TokenSender : TokenSender };
......
arcs_module(function(ARCS) {
var LiveSource, VideoSource;
LiveSource = ARCS.Component.create(
import ARCS from '../build/arcs.js';
var LiveSource, VideoSource;
LiveSource = ARCS.Component.create(
function () {
var context, canvas, video, imageData;
var defaultWidth = 320;
......@@ -8,15 +9,18 @@ arcs_module(function(ARCS) {
var self = this;
var handleMediaStream = function(stream) {
console.log(video,stream);
if (window.webkitURL) {
video.src = window.webkitURL.createObjectURL(stream);
} else if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else if (video.srcObject !== undefined) {
video.srcObject = stream;
} else {
video.src = stream;
}
video.videoWidth=defaultWidth;
video.videoHeight=defaultHeight;
/*video.videoWidth=defaultWidth;
video.videoHeight=defaultHeight;*/
self.emit("onReady");
};
......@@ -25,17 +29,14 @@ arcs_module(function(ARCS) {
};
var setUserMedia = function() {
console.log("video test");
if (navigator.mediaDevices !== undefined) {
navigator.mediaDevices.getUserMedia({video:true})
navigator.mediaDevices.getUserMedia({video: {facingMode: "environment", width: defaultWidth, height: defaultHeight}})
.then(handleMediaStream)
.catch(errorMediaStream);
} else {
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (getUserMedia !== undefined) {
getUserMedia({video:true}, handleMediaStream,
errorMediaStream
);
getUserMedia({video:true}).then(handleMediaStream);
}
}
};
......@@ -71,10 +72,10 @@ arcs_module(function(ARCS) {
},
['grabFrame','setWidgets'],
['onReady','onImage']
);
);
VideoSource = ARCS.Component.create(
VideoSource = ARCS.Component.create(
function() {
var context, canvas, video, imageData;
var defaultWidth=320;
......@@ -120,8 +121,8 @@ arcs_module(function(ARCS) {
},
['grabFrame', 'setWidgets'],
['onReady', 'onImage']
);
);
return {LiveSource: LiveSource, VideoSource: VideoSource};
});
\ No newline at end of file
export default {LiveSource: LiveSource, VideoSource: VideoSource};
......
arcs_module(
function (ARCS) {
var WindowEvent;
import ARCS from '../build/arcs.js';
WindowEvent = ARCS.Component.create(
let WindowEvent;
WindowEvent = ARCS.Component.create(
function () {
var self= this;
let self= this;
window.onresize = function() {
self.emit("onResize",window.innerWidth, window.innerHeight);
......@@ -12,8 +12,7 @@ arcs_module(
},
[],
["onResize"]
);
return { WindowEvent: WindowEvent};
}
);
export default { WindowEvent: WindowEvent};
......
......@@ -493,3 +493,5 @@ Mat3.prototype.row = function(index){
return new Vec3( m[index][0], m[index][1], m[index][2] );
};
export default POS;
......
......@@ -529,3 +529,5 @@ POS.Pose = function(error1, rotation1, translation1, error2, rotation2, translat
this.alternativeRotation = rotation2;
this.alternativeTranslation = translation2;
};
export default POS;
......
......@@ -130,3 +130,5 @@ POS.SimplePose = function(pos, rot) {
this.position = pos;
this.rotation = rot;
};
export default POS;
......
......@@ -281,3 +281,5 @@ SVD.pythag = function(a, b){
SVD.sign = function(a, b){
return b >= 0.0? Math.abs(a): -Math.abs(a);
};
export default SVD;
......
arcs_module(function(ARCS) {
THREE.FrustumCamera = function ( left, right, bottom, top, near, far ) {
import * as THREE from './index.js';
let FrustumCamera = function ( left, right, bottom, top, near, far ) {
THREE.Camera.call( this );
......@@ -17,22 +18,22 @@ THREE.FrustumCamera = function ( left, right, bottom, top, near, far ) {
};
THREE.FrustumCamera.prototype = Object.create( THREE.Camera.prototype );
THREE.FrustumCamera.prototype.constructor = THREE.FrustumCamera;
FrustumCamera.prototype = Object.create( THREE.Camera.prototype );
FrustumCamera.prototype.constructor = FrustumCamera;
THREE.FrustumCamera.prototype.updateProjectionMatrix = function () {
FrustumCamera.prototype.updateProjectionMatrix = function () {
this.projectionMatrix.makeFrustum(
this.left, this.right, this.bottom, this.top, this.near, this.far
);
};
THREE.FrustumCamera.prototype.clone = function () {
FrustumCamera.prototype.clone = function () {
var camera = new THREE.FrustumCamera();
var camera = new FrustumCamera();
THREE.Camera.prototype.clone.call( this, camera );
......@@ -51,6 +52,4 @@ THREE.FrustumCamera.prototype.clone = function () {
};
return {};
}, ['deps/three.js/index']
);
export default FrustumCamera;
......
......@@ -11,7 +11,7 @@
"Reality"
],
"author": "Jean-Yves Didier",
"license": "GPL",
"license": "GPL-3.0-or-later",
"devDependencies": {
"bower": ">=1.3.9",
"grunt": ">=0.4.5",
......@@ -20,6 +20,8 @@
"grunt-jsdoc": ">=0.5.6",
"grunt-bower-task": ">=0.4.0",
"grunt-contrib-concat": ">=0.5.0",
"grunt-contrib-copy": ">=1.0.0"
"grunt-contrib-copy": ">=1.0.0",
"grunt-file-append": ">=0.0.7",
"grunt-string-replace": ">=1.3.1"
}
}
......
{
"context": {
"libraries": [
"components/arviewer","components/animator",
"components/objloader","components/video",
"components/arucodetector", "components/markerlocator",
"components/windowevent", "components/tokensender", "components/objecttransform"
"../components/arviewer.js","../components/animator.js",
"../components/objloader.js","../components/video.js",
"../components/arucodetector.js", "../components/markerlocator.js",
"../components/windowevent.js", "../components/tokensender.js", "../components/objecttransform.js"
],
"components": {
"viewer": { "type": "ARViewer"},
......
......@@ -2,15 +2,15 @@
<head>
<title>ARCS: marker experiment</title>
<link type="text/css" rel="stylesheet" href="arcs.css">
<script data-main="../../build/arcs_browser"
<script src="../../build/arcs_browser.js"
data-base-url="../.."
data-arcsapp="arcsapp.json"
src="../../deps/requirejs/require.js">
type="module">
</script>
<meta charset="UTF-8">
</head>
<body>
<video id="video" width=320 height=240 autoplay="true" style="display: none;"></video>
<video id="video" width=640 height=480 autoplay="true" style="display: none;"></video>
<canvas id="canvas"></canvas>
<div id="container" ></div>
<div id="contents">
......