Toggle navigation
Toggle navigation
This project
Loading...
Sign in
arcs
/
arcs.js
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
3
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Authored by
Jean-Yves Didier
2020-05-03 18:09:32 +0200
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
b0151d21af0c3e45cb1273920665e750c4a47958
b0151d21
1 parent
7739d80d
Three.js components now using javascript modules
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
588 additions
and
545 deletions
Gruntfile.js
bower.json
build/arcs.min.js
components/animator.js
components/arucodetector.js
components/arviewer.js
components/markerlocator.js
components/objecttransform.js
components/objloader.js
components/tokensender.js
components/video.js
components/windowevent.js
deps/pose/posit2.js
deps/pose/posit_gen.js
deps/pose/square_pose.js
deps/pose/svd.js
deps/three.js/frustumcamera.js
package.json
tests/aruco/arcsapp.json
tests/aruco/aruco.html
Gruntfile.js
View file @
b0151d2
module
.
exports
=
function
(
grunt
)
{
"use strict"
;
let
shim
=
function
(
obj
)
{
return
`\nexport default
${
obj
}
;\n`
;
};
// Project configuration.
grunt
.
initConfig
({
...
...
@@ -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'
]);
};
...
...
bower.json
View file @
b0151d2
{
"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/r
68/build/three.min
.js"
,
"objloader"
:
"https://raw.githubusercontent.com/mrdoob/three.js/r
68/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/OBJMTL
Loader.js"
,
"three.js"
:
"https://raw.githubusercontent.com/mrdoob/three.js/r
116/build/three.module
.js"
,
"objloader"
:
"https://raw.githubusercontent.com/mrdoob/three.js/r
116/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/DDS
Loader.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"
:
"*"
,
...
...
build/arcs.min.js
View file @
b0151d2
This diff is collapsed. Click to expand it.
components/animator.js
View file @
b0151d2
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
(
function
()
{
var
paused
=
false
;
var
self
=
this
;
var
tick
=
function
()
{
if
(
paused
===
false
)
{
requestAnimationFrame
(
tick
);
self
.
emit
(
"onAnimationFrame"
);
}
}
/**
* Starts requesting frames for animation. As soon as it is started,
* the signal <b>onAnimationFrame</b> is periodically triggered.
* @slot
* @emits onAnimationFrame
* @function Animator#start
*/
this
.
start
=
function
()
{
paused
=
false
;
tick
();
};
/**
* Stops requesting frames for animation.
* @slot
* @function Animator#stop
*/
this
.
stop
=
function
()
{
paused
=
true
;
};
/**
* Signals that an animation frame is ready.
* @signal
* @function Animator#onAnimationFrame
*/
},
[
'start'
,
'stop'
],
'onAnimationFrame'
);
/**
* @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
(
function
()
{
var
paused
=
false
;
var
self
=
this
;
var
tick
=
function
()
{
if
(
paused
===
false
)
{
requestAnimationFrame
(
tick
);
self
.
emit
(
"onAnimationFrame"
);
}
}
/**
* Starts requesting frames for animation. As soon as it is started,
* the signal <b>onAnimationFrame</b> is periodically triggered.
* @slot
* @emits onAnimationFrame
* @function Animator#start
*/
this
.
start
=
function
()
{
paused
=
false
;
tick
();
};
/**
* Stops requesting frames for animation.
* @slot
* @function Animator#stop
*/
this
.
stop
=
function
()
{
paused
=
true
;
};
/**
* Signals that an animation frame is ready.
* @signal
* @function Animator#onAnimationFrame
*/
},
[
'start'
,
'stop'
],
'onAnimationFrame'
);
return
{
Animator
:
Animator
};
}
);
\ No newline at end of file
export
default
{
Animator
:
Animator
};
...
...
components/arucodetector.js
View file @
b0151d2
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
(
function
()
{
var
detector
;
/**
* @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
(
function
()
{
var
detector
;
/*1 Instanciate here the detector */
detector
=
new
AR
.
Detector
();
/*1 Instanciate here the detector */
detector
=
new
AR
.
Detector
();
/**
* Detects ARUCO markers in the given image.
* If markers are detected, this slot triggers the signal <b>onMarkers</b>.
* @param image {obj} the image in which markers should be detected
* @emits onMarkers
* @function ARUCODetector#detect
* @slot
*/
this
.
detect
=
function
(
image
)
{
/*1 recover markers from image
* then send they will be sent through onMarkers event
*/
var
markers
=
detector
.
detect
(
image
);
this
.
emit
(
"onMarkers"
,
markers
);
};
/**
* Signal that is emitted when markers are detected in an image.
* @function ARUCODetector#onMarkers
* @param markers {Marker[]} Array of detected markers.
* @signal
*/
/**
* @typedef {Object} Marker
* @property {number} id - marker id
* @property {Object} pose - computed pose for the marker
* @property {number[]} pose.rotation - rotation matrix (3x3)
* @property {number[]} pose.position - translation (3 components)
*/
},
'detect'
,
[
'onMarkers'
]
);
/**
* Detects ARUCO markers in the given image.
* If markers are detected, this slot triggers the signal <b>onMarkers</b>.
* @param image {obj} the image in which markers should be detected
* @emits onMarkers
* @function ARUCODetector#detect
* @slot
*/
this
.
detect
=
function
(
image
)
{
/*1 recover markers from image
* then send they will be sent through onMarkers event
*/
var
markers
=
detector
.
detect
(
image
);
this
.
emit
(
"onMarkers"
,
markers
);
};
/**
* Signal that is emitted when markers are detected in an image.
* @function ARUCODetector#onMarkers
* @param markers {Marker[]} Array of detected markers.
* @signal
*/
/**
* @typedef {Object} Marker
* @property {number} id - marker id
* @property {Object} pose - computed pose for the marker
* @property {number[]} pose.rotation - rotation matrix (3x3)
* @property {number[]} pose.position - translation (3 components)
*/
return
{
ARUCODetector
:
ARUCODetector
};
},
[
{
name
:
"deps/cv/index"
,
exports
:
"CV"
},
{
name
:
"deps/aruco/index"
,
exports
:
"AR"
}
]
);
\ No newline at end of file
'detect'
,
[
'onMarkers'
]
);
export
default
{
ARUCODetector
:
ARUCODetector
};
...
...
components/arviewer.js
View file @
b0151d2
This diff is collapsed. Click to expand it.
components/markerlocator.js
View file @
b0151d2
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
(
function
()
{
var
square_pose
=
new
POS
.
SquareFiducial
();
this
.
setFocalLength
=
function
(
focalLength
)
{
square_pose
.
setFocalLength
(
focalLength
);
};
this
.
setModelSize
=
function
(
modelSize
)
{
square_pose
.
setModelSize
(
modelSize
);
};
this
.
setIntrinsics
=
function
(
intrinsics
)
{
square_pose
.
setMatrix
(
intrinsics
);
};
this
.
setImageSource
=
function
(
id
)
{
var
imageSource
=
document
.
getElementById
(
id
);
if
(
id
===
undefined
)
{
return
;
}
var
imageSourceStyle
=
window
.
getComputedStyle
(
imageSource
);
square_pose
.
setImageSize
(
parseInt
(
imageSourceStyle
.
width
),
parseInt
(
imageSourceStyle
.
height
));
};
MarkerLocator
=
ARCS
.
Component
.
create
(
function
()
{
var
square_pose
=
new
POS
.
SquareFiducial
();
this
.
setFocalLength
=
function
(
focalLength
)
{
square_pose
.
setFocalLength
(
focalLength
);
};
this
.
setModelSize
=
function
(
modelSize
)
{
square_pose
.
setModelSize
(
modelSize
);
};
this
.
setIntrinsics
=
function
(
intrinsics
)
{
square_pose
.
setMatrix
(
intrinsics
);
};
this
.
setImageSource
=
function
(
id
)
{
var
imageSource
=
document
.
getElementById
(
id
);
if
(
id
===
undefined
)
{
return
;
}
var
imageSourceStyle
=
window
.
getComputedStyle
(
imageSource
);
square_pose
.
setImageSize
(
parseInt
(
imageSourceStyle
.
width
),
parseInt
(
imageSourceStyle
.
height
));
};
this
.
locateMarkers
=
function
(
markers
)
{
var
k
,
pose
;
for
(
k
=
0
;
k
<
markers
.
length
;
k
++
)
{
corners
=
markers
[
k
].
corners
;
markers
[
k
].
pose
=
square_pose
.
pose
(
corners
);
}
this
.
emit
(
"onLocatedMarkers"
,
markers
);
};
},
[
'locateMarkers'
,
'setFocalLength'
,
'setModelSize'
,
'setImageSource'
],
[
'onLocatedMarkers'
]
);
this
.
locateMarkers
=
function
(
markers
)
{
var
k
,
pose
;
for
(
k
=
0
;
k
<
markers
.
length
;
k
++
)
{
corners
=
markers
[
k
].
corners
;
markers
[
k
].
pose
=
square_pose
.
pose
(
corners
);
}
this
.
emit
(
"onLocatedMarkers"
,
markers
);
};
},
[
'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
};
...
...
components/objecttransform.js
View file @
b0151d2
arcs_module
(
function
(
ARCS
,
_three
)
{
var
ObjectTransform
;
import
ARCS
from
'../build/arcs.js'
;
import
*
as
THREE
from
'../deps/three.js/index.js'
;
/**
* @class ObjectTransform
* @classdesc Apply transformations to objects
*/
ObjectTransform
=
ARCS
.
Component
.
create
(
function
()
{
var
objRoot
;
var
refMat
;
var
id
=
-
1
;
var
ObjectTransform
;
/**
* Sets the object of interest on which we would like to apply transforms.
* @param obj {object} a Three.js Object3D
* @function ObjectTransform#setObject
*/
this
.
setObject
=
function
(
obj
)
{
objRoot
=
new
THREE
.
Object3D
();
obj
.
parent
.
add
(
objRoot
);
obj
.
parent
.
remove
(
obj
);
objRoot
.
add
(
obj
);
var
box
=
new
THREE
.
Box3
;
box
.
setFromObject
(
obj
);
var
s
=
box
.
size
();
var
scale
=
MAX3
(
s
.
x
,
s
.
y
,
s
.
z
);
console
.
log
(
scale
);
obj
.
add
(
new
THREE
.
AxisHelper
(
scale
/
2
));
};
var
MAX3
=
function
(
a
,
b
,
c
)
{
if
(
a
>=
b
)
{
if
(
a
>=
c
)
{
return
a
;
}
else
{
return
c
;
}
}
else
{
if
(
b
>=
c
)
{
return
b
;
}
else
{
return
c
;
}
}
};
/**
* @class ObjectTransform
* @classdesc Apply transformations to objects
*/
ObjectTransform
=
ARCS
.
Component
.
create
(
function
()
{
var
objRoot
;
var
refMat
;
var
id
=
-
1
;
// right now, we make something compatible with aruco markers
// it may evolve in the future
/**
* Takes an array of markers and then applies transformations
* to the referenced object.
* @function ObjectTransform#setTransform
* @param arr {Marker[]} an array of detected markers.
*/
this
.
setTransform
=
function
(
arr
)
{
/*2 set here the transformation we should apply on objRoot
* Each marker has 3 major properties :
* - id is the marker id;
* - pose.rotation gives its orientation using a rotation matrix
* and is a 3x3 array
* - pose.position gives its position with respect to the camera
* and is a vector with 3 components.
*/
if
(
objRoot
===
undefined
)
{
return
;
}
var
i
;
for
(
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
if
(
arr
[
i
].
id
===
id
)
{
// insert your code here.
//<--
var
rotation
=
arr
[
i
].
pose
.
rotation
;
var
translation
=
arr
[
i
].
pose
.
position
;
/*var matrix = new THREE.Matrix4(
rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
0 , 0, 0, 1);
/**
* Sets the object of interest on which we would like to apply transforms.
* @param obj {object} a Three.js Object3D
* @function ObjectTransform#setObject
*/
this
.
setObject
=
function
(
obj
)
{
objRoot
=
new
THREE
.
Object3D
();
obj
.
parent
.
add
(
objRoot
);
obj
.
parent
.
remove
(
obj
);
objRoot
.
add
(
obj
);
var
box
=
new
THREE
.
Box3
;
box
.
setFromObject
(
obj
);
var
s
=
box
.
size
();
var
scale
=
MAX3
(
s
.
x
,
s
.
y
,
s
.
z
);
console
.
log
(
scale
);
obj
.
add
(
new
THREE
.
AxisHelper
(
scale
/
2
));
};
var r = new THREE.Euler();
r.setFromRotationMatrix(matrix);
objRoot.rotation.x = r.x;
objRoot.rotation.y = r.y;
objRoot.rotation.z = r.z;
objRoot.position.x = translation[0];
objRoot.position.y = translation[1];
objRoot.position.z = translation[2];
objRoot.scale.x = 1;
objRoot.scale.y = 1;
objRoot.scale.z = 1;*/
objRoot
.
rotation
.
x
=
-
Math
.
asin
(
-
rotation
[
1
][
2
]);
objRoot
.
rotation
.
y
=
-
Math
.
atan2
(
rotation
[
0
][
2
],
rotation
[
2
][
2
]);
objRoot
.
rotation
.
z
=
Math
.
atan2
(
rotation
[
1
][
0
],
rotation
[
1
][
1
]);
objRoot
.
position
.
x
=
translation
[
0
];
objRoot
.
position
.
y
=
translation
[
1
];
objRoot
.
position
.
z
=
-
translation
[
2
];
//-->
}
var
MAX3
=
function
(
a
,
b
,
c
)
{
if
(
a
>=
b
)
{
if
(
a
>=
c
)
{
return
a
;
}
else
{
return
c
;
}
}
else
{
if
(
b
>=
c
)
{
return
b
;
}
else
{
return
c
;
}
};
this
.
setId
=
function
(
i
)
{
id
=
i
;
};
},
[
'setObject'
,
'setTransform'
,
'setId'
],
[]
);
}
};
// right now, we make something compatible with aruco markers
// it may evolve in the future
/**
* Takes an array of markers and then applies transformations
* to the referenced object.
* @function ObjectTransform#setTransform
* @param arr {Marker[]} an array of detected markers.
*/
this
.
setTransform
=
function
(
arr
)
{
/*2 set here the transformation we should apply on objRoot
* Each marker has 3 major properties :
* - id is the marker id;
* - pose.rotation gives its orientation using a rotation matrix
* and is a 3x3 array
* - pose.position gives its position with respect to the camera
* and is a vector with 3 components.
*/
if
(
objRoot
===
undefined
)
{
return
;
}
var
i
;
for
(
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
if
(
arr
[
i
].
id
===
id
)
{
// insert your code here.
//<--
var
rotation
=
arr
[
i
].
pose
.
rotation
;
var
translation
=
arr
[
i
].
pose
.
position
;
/*var matrix = new THREE.Matrix4(
rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
0 , 0, 0, 1);
var r = new THREE.Euler();
r.setFromRotationMatrix(matrix);
objRoot.rotation.x = r.x;
objRoot.rotation.y = r.y;
objRoot.rotation.z = r.z;
objRoot.position.x = translation[0];
objRoot.position.y = translation[1];
objRoot.position.z = translation[2];
objRoot.scale.x = 1;
objRoot.scale.y = 1;
objRoot.scale.z = 1;*/
objRoot
.
rotation
.
x
=
-
Math
.
asin
(
-
rotation
[
1
][
2
]);
objRoot
.
rotation
.
y
=
-
Math
.
atan2
(
rotation
[
0
][
2
],
rotation
[
2
][
2
]);
objRoot
.
rotation
.
z
=
Math
.
atan2
(
rotation
[
1
][
0
],
rotation
[
1
][
1
]);
return
{
ObjectTransform
:
ObjectTransform
};
objRoot
.
position
.
x
=
translation
[
0
];
objRoot
.
position
.
y
=
translation
[
1
];
objRoot
.
position
.
z
=
-
translation
[
2
];
//-->
}
}
};
this
.
setId
=
function
(
i
)
{
id
=
i
;
};
},
[
"deps/three.js/index"
]
);
\ No newline at end of file
[
'setObject'
,
'setTransform'
,
'setId'
],
[]
);
export
default
{
ObjectTransform
:
ObjectTransform
};
...
...
components/objloader.js
View file @
b0151d2
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';
var
internalOBJLoader
;
internalOBJLoader
=
ARCS
.
Component
.
create
(
function
()
{
var
self
=
this
;
var
innerObject
;
OBJLoader
=
ARCS
.
Component
.
create
(
function
()
{
var
self
=
this
;
var
innerObject
;
var
onLoadWrapper
=
function
(
obj
)
{
innerObject
=
obj
;
console
.
log
(
"[OBJLoader] object has %d components"
,
obj
.
children
.
length
);
//console.log(obj);
self
.
emit
(
"onLoad"
,
obj
);
};
var
onLoadWrapper
=
function
(
obj
)
{
innerObject
=
obj
;
console
.
log
(
"[OBJLoader] object has %d components"
,
obj
.
children
.
length
);
//console.log(obj);
self
.
emit
(
"onLoad"
,
obj
);
};
var
onLoadJSON
=
function
(
geom
,
mat
)
{
innerObject
=
new
THREE
.
Mesh
(
geom
,
new
THREE
.
MeshFaceMaterial
(
mat
));
self
.
emit
(
"onLoad"
,
innerObject
);
};
var
progress
=
function
(
xhr
)
{
console
.
log
(
(
xhr
.
loaded
/
xhr
.
total
*
100
)
+
'% loaded'
);
};
var
error
=
function
(
xhr
)
{
console
.
log
(
'An error happened'
);
};
this
.
load
=
function
(
objURL
,
mtlURL
)
{
var
loader
;
// 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
);
if
(
mtlURL
===
undefined
)
{
//console.log("using loader");
loader
=
new
THREE
.
OBJLoader
();
loader
.
load
(
objURL
,
onLoadWrapper
,
progress
,
error
);
var
onLoadJSON
=
function
(
geom
,
mat
)
{
innerObject
=
new
THREE
.
Mesh
(
geom
,
new
THREE
.
MeshFaceMaterial
(
mat
));
self
.
emit
(
"onLoad"
,
innerObject
);
};
var
progress
=
function
(
xhr
)
{
console
.
log
(
(
xhr
.
loaded
/
xhr
.
total
*
100
)
+
'% loaded'
);
};
var
error
=
function
(
xhr
)
{
console
.
log
(
'An error happened'
);
};
this
.
load
=
function
(
objURL
,
mtlURL
)
{
var
loader
;
// 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() );
if
(
mtlURL
===
undefined
)
{
//console.log("using loader");
loader
=
new
OBJLoader
(
manager
);
loader
.
load
(
objURL
,
onLoadWrapper
,
progress
,
error
);
}
else
{
//console.log("using mtl loader");
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
.
ObjectLoader
();
loader
.
load
(
jsonURL
,
onLoadJSON
);
//, progress, error);
};
var
MAX3
=
function
(
a
,
b
,
c
)
{
if
(
a
>=
b
)
{
if
(
a
>=
c
)
{
return
a
;
}
else
{
//console.log("using mtl loader");
loader
=
new
THREE
.
OBJMTLLoader
();
loader
.
load
(
objURL
,
mtlURL
,
onLoadWrapper
,
progress
,
error
);
return
c
;
}
};
this
.
loadJSON
=
function
(
jsonURL
)
{
var
loader
;
//console.log("loading objects", jsonURL);
loader
=
new
THREE
.
JSONLoader
();
loader
.
load
(
jsonURL
,
onLoadJSON
);
//, progress, error);
};
var
MAX3
=
function
(
a
,
b
,
c
)
{
if
(
a
>=
b
)
{
if
(
a
>=
c
)
{
return
a
;
}
else
{
return
c
;
}
}
else
{
if
(
b
>=
c
)
{
return
b
;
}
else
{
if
(
b
>=
c
)
{
return
b
;
}
else
{
return
c
;
}
return
c
;
}
};
this
.
unitize
=
function
()
{
if
(
innerObject
===
undefined
)
{
return
;
}
var
box
=
new
THREE
.
Box3
();
box
.
setFromObject
(
innerObject
);
var
s
=
box
.
size
();
var
c
=
box
.
center
();
var
scale
=
1
/
MAX3
(
s
.
x
,
s
.
y
,
s
.
z
);
innerObject
.
scale
.
x
=
innerObject
.
scale
.
y
=
innerObject
.
scale
.
z
=
scale
;
};
this
.
resize
=
function
(
s
)
{
this
.
unitize
();
if
(
innerObject
===
undefined
)
{
return
;
}
innerObject
.
scale
.
x
*=
s
;
innerObject
.
scale
.
y
*=
s
;
innerObject
.
scale
.
z
*=
s
;
};
},
[
"load"
,
"unitize"
,
"resize"
],
[
"onLoad"
]
);
}
};
this
.
unitize
=
function
()
{
if
(
innerObject
===
undefined
)
{
return
;
}
var
box
=
new
THREE
.
Box3
();
box
.
setFromObject
(
innerObject
);
var
s
=
box
.
size
();
var
c
=
box
.
center
();
var
scale
=
1
/
MAX3
(
s
.
x
,
s
.
y
,
s
.
z
);
innerObject
.
scale
.
x
=
innerObject
.
scale
.
y
=
innerObject
.
scale
.
z
=
scale
;
};
this
.
resize
=
function
(
s
)
{
this
.
unitize
();
if
(
innerObject
===
undefined
)
{
return
;
}
innerObject
.
scale
.
x
*=
s
;
innerObject
.
scale
.
y
*=
s
;
innerObject
.
scale
.
z
*=
s
;
};
return
{
OBJLoader
:
OBJLoader
};
},
[
'deps/three.js/index'
,
'deps/objloader/index'
,
'deps/mtlloader/index'
,
'deps/objmtlloader/index'
]
);
\ No newline at end of file
[
"load"
,
"unitize"
,
"resize"
],
[
"onLoad"
]
);
export
default
{
OBJLoader
:
internalOBJLoader
};
...
...
components/tokensender.js
View file @
b0151d2
arcs_module
(
function
(
ARCS
)
{
var
TokenSender
;
import
ARCS
from
'../build/arcs.js'
;
TokenSender
=
ARCS
.
Component
.
create
(
function
(
arr
)
{
var
i
;
var
self
=
this
;
for
(
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
if
(
typeof
arr
[
i
]
===
"string"
)
{
this
.
slots
.
push
(
arr
[
i
]);
//TokenSender.prototype.slots.push(arr[i]);
this
[
arr
[
i
]]
=
function
(
s
)
{
return
function
()
{
console
.
log
(
"[TokenSender] emitting %s"
,
s
);
this
.
emit
(
"sendToken"
,
s
);
};
}
(
arr
[
i
]);
}
}
},
[],
[
'sendToken'
]
);
var
TokenSender
;
return
{
TokenSender
:
TokenSender
};
});
\ No newline at end of file
TokenSender
=
ARCS
.
Component
.
create
(
function
(
arr
)
{
var
i
;
var
self
=
this
;
for
(
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
if
(
typeof
arr
[
i
]
===
"string"
)
{
this
.
slots
.
push
(
arr
[
i
]);
//TokenSender.prototype.slots.push(arr[i]);
this
[
arr
[
i
]]
=
function
(
s
)
{
return
function
()
{
console
.
log
(
"[TokenSender] emitting %s"
,
s
);
this
.
emit
(
"sendToken"
,
s
);
};
}
(
arr
[
i
]);
}
}
},
[],
[
'sendToken'
]
);
export
default
{
TokenSender
:
TokenSender
};
...
...
components/video.js
View file @
b0151d2
arcs_module
(
function
(
ARCS
)
{
var
LiveSource
,
VideoSource
;
LiveSource
=
ARCS
.
Component
.
create
(
function
()
{
var
context
,
canvas
,
video
,
imageData
;
var
defaultWidth
=
320
;
var
defaultHeight
=
240
;
var
self
=
this
;
var
handleMediaStream
=
function
(
stream
)
{
if
(
window
.
webkitURL
)
{
video
.
src
=
window
.
webkitURL
.
createObjectURL
(
stream
);
}
else
if
(
video
.
mozSrcObject
!==
undefined
)
{
video
.
mozSrcObject
=
stream
;
}
else
{
video
.
src
=
stream
;
}
video
.
videoWidth
=
defaultWidth
;
video
.
videoHeight
=
defaultHeight
;
self
.
emit
(
"onReady"
);
};
var
errorMediaStream
=
function
(
error
)
{
console
.
error
(
"Cannot initialize video component:"
,
error
.
code
);
};
var
setUserMedia
=
function
()
{
console
.
log
(
"video test"
);
if
(
navigator
.
mediaDevices
!==
undefined
)
{
navigator
.
mediaDevices
.
getUserMedia
({
video
:
true
})
.
then
(
handleMediaStream
)
.
catch
(
errorMediaStream
);
}
else
{
var
getUserMedia
=
navigator
.
getUserMedia
||
navigator
.
webkitGetUserMedia
||
navigator
.
mozGetUserMedia
;
if
(
getUserMedia
!==
undefined
)
{
getUserMedia
({
video
:
true
},
handleMediaStream
,
errorMediaStream
);
}
}
};
this
.
grabFrame
=
function
()
{
if
(
context
===
undefined
||
canvas
===
undefined
||
video
===
undefined
)
return
;
if
(
video
.
readyState
===
video
.
HAVE_ENOUGH_DATA
)
{
context
.
drawImage
(
video
,
0
,
0
,
canvas
.
width
,
canvas
.
height
);
imageData
=
context
.
getImageData
(
0
,
0
,
canvas
.
width
,
canvas
.
height
);
this
.
emit
(
"onImage"
,
imageData
);
import
ARCS
from
'../build/arcs.js'
;
var
LiveSource
,
VideoSource
;
LiveSource
=
ARCS
.
Component
.
create
(
function
()
{
var
context
,
canvas
,
video
,
imageData
;
var
defaultWidth
=
320
;
var
defaultHeight
=
240
;
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;*/
self
.
emit
(
"onReady"
);
};
var
errorMediaStream
=
function
(
error
)
{
console
.
error
(
"Cannot initialize video component:"
,
error
.
code
);
};
var
setUserMedia
=
function
()
{
if
(
navigator
.
mediaDevices
!==
undefined
)
{
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
}).
then
(
handleMediaStream
);
}
};
}
};
this
.
grabFrame
=
function
()
{
if
(
context
===
undefined
||
canvas
===
undefined
||
video
===
undefined
)
return
;
if
(
video
.
readyState
===
video
.
HAVE_ENOUGH_DATA
)
{
context
.
drawImage
(
video
,
0
,
0
,
canvas
.
width
,
canvas
.
height
);
imageData
=
context
.
getImageData
(
0
,
0
,
canvas
.
width
,
canvas
.
height
);
this
.
emit
(
"onImage"
,
imageData
);
}
};
this
.
setSize
=
function
(
x
,
y
)
{
this
.
setSize
=
function
(
x
,
y
)
{
};
};
this
.
setWidgets
=
function
(
videoId
,
canvasId
)
{
video
=
document
.
getElementById
(
videoId
);
canvas
=
document
.
getElementById
(
canvasId
);
this
.
setWidgets
=
function
(
videoId
,
canvasI
d
)
{
video
=
document
.
getElementById
(
videoId
);
canvas
=
document
.
getElementById
(
canvasId
)
;
if
(
video
===
undefined
||
canvas
===
undefined
)
{
console
.
log
(
"video elements not defined"
);
return
;
}
context
=
canvas
.
getContext
(
"2d"
);
var
canvasStyle
=
window
.
getComputedStyle
(
canvas
)
;
canvas
.
width
=
parseInt
(
canvasStyle
.
width
);
canvas
.
height
=
parseInt
(
canvasStyle
.
height
);
setUserMedia
();
}
;
},
[
'grabFrame'
,
'setWidgets'
],
[
'onReady'
,
'onImage'
]
);
VideoSource
=
ARCS
.
Component
.
create
(
function
()
{
var
context
,
canvas
,
video
,
imageData
;
var
defaultWidth
=
320
;
v
ar
defaultHeight
=
240
;
var
self
=
this
;
if
(
video
===
undefined
||
canvas
===
undefine
d
)
{
console
.
log
(
"video elements not defined"
);
return
;
}
context
=
canvas
.
getContext
(
"2d"
);
var
canvasStyle
=
window
.
getComputedStyle
(
canvas
);
canvas
.
width
=
parseInt
(
canvasStyle
.
width
)
;
canvas
.
height
=
parseInt
(
canvasStyle
.
height
);
setUserMedia
(
);
}
;
},
[
'grabFrame'
,
'setWidgets'
],
[
'onReady'
,
'onImage'
]
)
;
VideoSource
=
ARCS
.
Component
.
create
(
function
()
{
var
context
,
canvas
,
video
,
imageData
;
var
defaultWidth
=
320
;
var
defaultHeight
=
240
;
var
self
=
this
;
this
.
setWidgets
=
function
(
videoId
,
canvasId
)
{
v
ideo
=
document
.
getElementById
(
videoId
)
;
canvas
=
document
.
getElementById
(
canvasId
)
;
this
.
setWidgets
=
function
(
videoId
,
canvasId
)
{
video
=
document
.
getElementById
(
videoId
);
canvas
=
document
.
getElementById
(
canvasId
);
if
(
video
===
undefined
||
canvas
===
undefined
)
{
return
;
}
context
=
canvas
.
getContext
(
"2d"
);
var
canvasStyle
=
window
.
getComputedStyle
(
canvas
);
canvas
.
width
=
parseInt
(
canvasStyle
.
width
);
canvas
.
height
=
parseInt
(
canvasStyle
.
height
);
if
(
video
===
undefined
||
canvas
===
undefined
)
{
return
;
}
context
=
canvas
.
getContext
(
"2d"
);
var
canvasStyle
=
window
.
getComputedStyle
(
canvas
);
canvas
.
width
=
parseInt
(
canvasStyle
.
width
);
canvas
.
height
=
parseInt
(
canvasStyle
.
height
);
if
(
video
.
paused
||
video
.
ended
)
{
video
.
addEventListener
(
'play'
,
function
()
{
self
.
emit
(
"onReady"
);
});
}
else
{
if
(
video
.
paused
||
video
.
ended
)
{
video
.
addEventListener
(
'play'
,
function
()
{
self
.
emit
(
"onReady"
);
}
}
;
}
);
}
else
{
self
.
emit
(
"onReady"
);
}
this
.
grabFrame
=
function
()
{
if
(
context
===
undefined
||
canvas
===
undefined
||
video
===
undefined
)
return
;
if
(
video
.
paused
||
video
.
ended
)
{
return
;
}
context
.
drawImage
(
video
,
0
,
0
,
canvas
.
width
,
canvas
.
height
);
imageData
=
context
.
getImageData
(
0
,
0
,
canvas
.
width
,
canvas
.
height
);
this
.
emit
(
"onImage"
,
imageData
);
};
};
this
.
grabFrame
=
function
()
{
if
(
context
===
undefined
||
canvas
===
undefined
||
video
===
undefined
)
return
;
if
(
video
.
paused
||
video
.
ended
)
{
return
;
}
context
.
drawImage
(
video
,
0
,
0
,
canvas
.
width
,
canvas
.
height
);
imageData
=
context
.
getImageData
(
0
,
0
,
canvas
.
width
,
canvas
.
height
);
this
.
emit
(
"onImage"
,
imageData
);
};
},
[
'grabFrame'
,
'setWidgets'
],
[
'onReady'
,
'onImage'
]
);
},
[
'grabFrame'
,
'setWidgets'
],
[
'onReady'
,
'onImage'
]
);
return
{
LiveSource
:
LiveSource
,
VideoSource
:
VideoSource
};
});
\ No newline at end of file
export
default
{
LiveSource
:
LiveSource
,
VideoSource
:
VideoSource
};
...
...
components/windowevent.js
View file @
b0151d2
arcs_module
(
function
(
ARCS
)
{
var
WindowEvent
;
import
ARCS
from
'../build/arcs.js'
;
WindowEvent
=
ARCS
.
Component
.
create
(
function
()
{
var
self
=
this
;
window
.
onresize
=
function
()
{
self
.
emit
(
"onResize"
,
window
.
innerWidth
,
window
.
innerHeight
);
};
},
[],
[
"onResize"
]
);
let
WindowEvent
;
WindowEvent
=
ARCS
.
Component
.
create
(
function
()
{
let
self
=
this
;
window
.
onresize
=
function
()
{
self
.
emit
(
"onResize"
,
window
.
innerWidth
,
window
.
innerHeight
);
};
},
[],
[
"onResize"
]
);
return
{
WindowEvent
:
WindowEvent
};
}
);
\ No newline at end of file
export
default
{
WindowEvent
:
WindowEvent
};
...
...
deps/pose/posit2.js
View file @
b0151d2
...
...
@@ -493,3 +493,5 @@ Mat3.prototype.row = function(index){
return
new
Vec3
(
m
[
index
][
0
],
m
[
index
][
1
],
m
[
index
][
2
]
);
};
export
default
POS
;
...
...
deps/pose/posit_gen.js
View file @
b0151d2
...
...
@@ -529,3 +529,5 @@ POS.Pose = function(error1, rotation1, translation1, error2, rotation2, translat
this
.
alternativeRotation
=
rotation2
;
this
.
alternativeTranslation
=
translation2
;
};
export
default
POS
;
...
...
deps/pose/square_pose.js
View file @
b0151d2
...
...
@@ -129,4 +129,6 @@ POS.SquareFiducial.prototype.crossProduct = function(a,b) {
POS
.
SimplePose
=
function
(
pos
,
rot
)
{
this
.
position
=
pos
;
this
.
rotation
=
rot
;
};
\ No newline at end of file
};
export
default
POS
;
...
...
deps/pose/svd.js
View file @
b0151d2
...
...
@@ -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
;
...
...
deps/three.js/frustumcamera.js
View file @
b0151d2
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
;
...
...
package.json
View file @
b0151d2
...
...
@@ -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"
}
}
...
...
tests/aruco/arcsapp.json
View file @
b0151d2
{
"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"
},
...
...
tests/aruco/aruco.html
View file @
b0151d2
...
...
@@ -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=
24
0
autoplay=
"true"
style=
"display: none;"
></video>
<video
id=
"video"
width=
640
height=
48
0
autoplay=
"true"
style=
"display: none;"
></video>
<canvas
id=
"canvas"
></canvas>
<div
id=
"container"
></div>
<div
id=
"contents"
>
...
...
Please
register
or
login
to post a comment