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
Show whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
169 additions
and
122 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
({
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'
]);
};
...
...
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
(
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
};
...
...
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
(
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
};
...
...
components/arviewer.js
View file @
b0151d2
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
};
...
...
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
(
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
};
...
...
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'
;
/**
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
};
...
...
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';
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
.
JSON
Loader
();
loader
=
new
THREE
.
Object
Loader
();
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
};
...
...
components/tokensender.js
View file @
b0151d2
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
};
...
...
components/video.js
View file @
b0151d2
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
};
...
...
components/windowevent.js
View file @
b0151d2
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
};
...
...
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
...
...
@@ -130,3 +130,5 @@ POS.SimplePose = function(pos, rot) {
this
.
position
=
pos
;
this
.
rotation
=
rot
;
};
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