Skip to content

A
AR.js

cqiang1993 / AR.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

体验新版 GitCode，发现更多精彩内容 >>

提交 d1c8eee0 编写于 作者: J Jerome Etienne
浏览文件
操作

more on tests + stuff

上级 b0f4edf5
隐藏空白更改
内联 并排
Showing with 200 addition and 203 deletion
three.js/build/ar.js
浏览文件 @ d1c8eee0
......@@ -5327,7 +5327,7 @@ ARjs.Context.prototype._initArtoolkit = function(onCompleted){
// init controller
var arController = new ARController(_this.parameters.canvasWidth, _this.parameters.canvasHeight, cameraParameters);
_this.arController = arController
// honor this.parameters.imageSmoothingEnabled
arController.ctx.mozImageSmoothingEnabled = _this.parameters.imageSmoothingEnabled;
arController.ctx.webkitImageSmoothingEnabled = _this.parameters.imageSmoothingEnabled;
......@@ -5391,15 +5391,11 @@ ARjs.Context.prototype.getProjectionMatrix = function(srcElement){
// FIXME rename this function to say it is artoolkit specific - getArtoolkitProjectMatrix
// keep a backward compatibility with a console.warn
if( this.parameters.trackingBackend === 'aruco' ){
console.assert(false, 'dont call this function with aruco')
}else if( this.parameters.trackingBackend === 'artoolkit' ){
console.assert(this.arController, 'arController MUST be initialized to call this function')
// get projectionMatrixArr from artoolkit
var projectionMatrixArr = this.arController.getCameraMatrix();
var projectionMatrix = new THREE.Matrix4().fromArray(projectionMatrixArr)
}else console.assert(false)
console.assert( this.parameters.trackingBackend === 'artoolkit' )
console.assert(this.arController, 'arController MUST be initialized to call this function')
// get projectionMatrixArr from artoolkit
var projectionMatrixArr = this.arController.getCameraMatrix();
var projectionMatrix = new THREE.Matrix4().fromArray(projectionMatrixArr)
// apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
projectionMatrix.multiply(this._artoolkitProjectionAxisTransformMatrix)
three.js/examples/dev.html
浏览文件 @ d1c8eee0
......@@ -122,7 +122,7 @@
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
......
three.js/examples/test-runner.html
浏览文件 @ d1c8eee0
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<!-- three.js library -->
<script src='vendor/three.js/build/three.min.js'></script>
<!-- jsartookit -->
<script src='../examples/vendor/three.js/build/three.js'></script>
<!-- include for artoolkit trackingBackend -->
<script src='../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- aruco -->
<script src='../vendor/js-aruco/src/svd.js'></script>
<script src='../vendor/js-aruco/src/posit1.js'></script>
<script src='../vendor/js-aruco/src/cv.js'></script>
<script src='../vendor/js-aruco/src/aruco.js'></script>
<script src='../src/threex/threex-aruco/threex-arucocontext.js'></script>
<!-- include for aruco trackingBackend -->
<script src='../vendor/js-aruco/src/svd.js'></script>
<script src='../vendor/js-aruco/src/posit1.js'></script>
<script src='../vendor/js-aruco/src/cv.js'></script>
<script src='../vendor/js-aruco/src/aruco.js'></script>
<script src='../src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='../src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include threex.artoolkit -->
<!-- include for tango trackingBackend -->
<script src='../vendor/chromium-tango/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src='../src/threex/threex-artoolkitsource.js'></script>
<script src='../src/threex/threex-artoolkitcontext.js'></script>
<script src='../src/threex/threex-artoolkitprofile.js'></script>
<script src='../src/threex/threex-arbasecontrols.js'></script>
<script src='../src/threex/threex-armarkercontrols.js'></script>
<script src='../src/threex/threex-armarkerhelper.js'></script>
<script src='../src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
<script src='../src/threex/threex-hittesting-plane.js'></script>
<script src='../src/threex/threex-hittesting-tango.js'></script>
<script src='../src/new-api/arjs-utils.js'></script>
<script src='../src/new-api/arjs-session.js'></script>
<script src='../src/new-api/arjs-anchor.js'></script>
<script src='../src/new-api/arjs-hittesting.js'></script>
<script src='../src/new-api/arjs-tangovideomesh.js'></script>
<script src='../src/new-api/arjs-tangopointcloud.js'></script>
<script src='../src/new-api/arjs-debugui.js'></script>
<script src='../src/markers-area/threex-armultimarkerutils.js'></script>
<script src='../src/markers-area/threex-armultimarkercontrols.js'></script>
<script src='../src/markers-area/threex-armultimarkerlearning.js'></script>
<script>ARjs.Context.baseURL = '../'</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - BLABLA test runner for three.js
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - Session API demo with multi tracking and hit testing
- by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
Marker image
<a href='../../../data/images/hiro.jpg' target='_blank'>hiro for artoolkit</a>
/
<a href='../../../three.js/threex/threex-aruco/examples/images/1001.png' target='_blank'>1001 for aruco</a>
<a href='../../three.js/examples/multi-markers/markers-page/' target='_blank'>Markers page</a>
<br/>
<strong>Backend:</strong>
switch to :
<a href='?artoolkit'>artoolkit</a>
/
<a href='?aruco'>aruco</a>
/
<a href='?tango'>tango</a>
-
current : <span id='currentArBackend'>unknown</a>
<strong>Tracking Backend:</strong>
<a href='?artoolkit'>artoolkit</a>
/
<a href='?aruco'>aruco</a>
/
<a href='?area-artoolkit'>area artoolkit</a>
/
<a href='?area-aruco'>area aruco</a>
/
<a href='?tango'>tango</a>
/
<a href='?best'>best</a>
</div><script>
var trackingBackend = location.search.substring(1) ? location.search.substring(1) : 'artoolkit'
document.querySelector('#currentArBackend').innerHTML = trackingBackend
;(function(){
// get tracking method from location.search
var trackingMethod = location.search.substring(1) ? location.search.substring(1) : 'best'
var changeMatrixMode = 'cameraTransformMatrix'
// var changeMatrixMode = 'modelViewMatrix'
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
// antialias: true,
alpha: true
antialias : true,
alpha : true
});
renderer.autoClear = false;
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
renderer.setSize( 640, 480 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
// array of functions for the rendering loop
var onRenderFcts= [];
// init scene and camera
var scene = new THREE.Scene();
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
// Initialize the camera
//////////////////////////////////////////////////////////////////////////////////
// Create a camera
if( trackingBackend === 'artoolkit' ){
var camera = new THREE.Camera();
}else if( trackingBackend === 'aruco' ){
var camera = new THREE.PerspectiveCamera(42, renderer.domElement.width / renderer.domElement.height, 0.01, 100);
}else if( trackingBackend === 'tango' ){
var camera = new THREE.PerspectiveCamera(42, renderer.domElement.width / renderer.domElement.height, 0.01, 1000);
console.log('TODO here init tango trackingBackend')
}else console.assert(false)
scene.add(camera);
var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
scene.add(camera)
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
// Set up Arjs.Profile
////////////////////////////////////////////////////////////////////////////////
if( trackingBackend === 'artoolkit' ){
var sourceParameters = {
// to read from an image
sourceType : 'image',
sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
}
}else if( trackingBackend === 'aruco' ){
var sourceParameters = {
// to read from an image
sourceType : 'image',
sourceUrl : THREEx.ArToolkitContext.baseURL + 'threex/threex-aruco/examples/images/screenshot-marker-aruco.png',
}
var arProfile = new ARjs.Profile().trackingMethod(trackingMethod)
if( arProfile.contextParameters.trackingBackend === 'artoolkit' ){
// arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad.jpg')
arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + '../test/data/images/markers-page-ipad-640x480.jpg')
// arProfile.sourceVideo(THREEx.ArToolkitContext.baseURL + '../test/data/videos/markers-page-ipad.mp4')
}else if( arProfile.contextParameters.trackingBackend === 'aruco' ){
arProfile.sourceImage(THREEx.ArToolkitContext.baseURL + 'src/threex/threex-aruco/examples/images/screenshot-marker-aruco.png')
}else console.assert(false)
var arToolkitSource = new THREEx.ArToolkitSource(sourceParameters)
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(renderer.domElement)
if( trackingBackend === 'artoolkit' ){
if( arToolkitContext.arController !== null ){
arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}else if( trackingBackend === 'aruco' ){
arToolkitSource.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
camera.aspect = renderer.domElement.width / renderer.domElement.height;
camera.updateProjectionMatrix();
}else if( trackingBackend === 'tango' ){
// console.log('here resize for tango')
camera.aspect = renderer.domElement.width / renderer.domElement.height;
camera.updateProjectionMatrix();
}else console.assert(false)
arProfile.defaultMarker()
// .changeMatrixMode('modelViewMatrix')
// .changeMatrixMode('cameraTransformMatrix')
.checkIfValid()
// arProfile.contextParameters.debug = true
if( arProfile.contextParameters.trackingBackend === 'tango' ){
arProfile.changeMatrixMode('cameraTransformMatrix')
}
//////////////////////////////////////////////////////////////////////////////
// build ARjs.Session
//////////////////////////////////////////////////////////////////////////////
var arSession = new ARjs.Session({
scene: scene,
renderer: renderer,
camera: camera,
sourceParameters: arProfile.sourceParameters,
contextParameters: arProfile.contextParameters
})
onRenderFcts.push(function(){
arSession.update()
})
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
// Create a ARjs.Anchor
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
detectionMode: 'mono',
trackingBackend: trackingBackend,
var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters)
onRenderFcts.push(function(){
arAnchor.update()
})
// initialize it
arToolkitContext.init(function onCompleted(){
// if artoolkit, copy projection matrix to camera
if( arToolkitContext.parameters.trackingBackend === 'artoolkit' ){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
}
//////////////////////////////////////////////////////////////////////////////
// handle Hit Tester
//////////////////////////////////////////////////////////////////////////////
var hitTesting = new ARjs.HitTesting(arSession)
onRenderFcts.push(function(){
hitTesting.update(camera, arAnchor.object3d, arAnchor.parameters.changeMatrixMode)
})
// update artoolkit on every frame
onRenderFcts.push(function(){
if( arToolkitSource.ready === false ) return
// tango only - picking to set object position
renderer.domElement.addEventListener("click", function(domEvent){
var hitTestResults = hitTesting.testDomEvent(domEvent)
if( hitTestResults.length === 0 ) return
arToolkitContext.update( arToolkitSource.domElement )
var hitTestResult = hitTestResults[0]
hitTestResult.apply(arAnchor.object3d)
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
// init controls for camera
var controlsParameters = {
// as we controls the camera, set changeMatrixMode: 'cameraTransformMatrix'
changeMatrixMode: changeMatrixMode
}
if( arToolkitContext.parameters.trackingBackend === 'artoolkit' ){
controlsParameters.type = 'pattern'
controlsParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
}else if( arToolkitContext.parameters.trackingBackend === 'aruco' ){
controlsParameters.type = 'barcode'
controlsParameters.barcodeValue = 1001
}else if( arToolkitContext.parameters.trackingBackend === 'tango' ){
controlsParameters.type = 'barcode'
controlsParameters.barcodeValue = 1001
}else console.assert(false)
if( changeMatrixMode === 'modelViewMatrix' ){
var markerRoot = new THREE.Group
scene.add(markerRoot)
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, controlsParameters)
}else if( changeMatrixMode === 'cameraTransformMatrix' ){
var markerRoot = scene
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, controlsParameters)
//////////////////////////////////////////////////////////////////////////////
// tango specifics
//////////////////////////////////////////////////////////////////////////////
if( arProfile.contextParameters.trackingBackend === 'tango' ){
// init tangoVideoMesh
var tangoVideoMesh = new ARjs.TangoVideoMesh(arSession)
onRenderFcts.push(function(){
// update scene.visible if the marker is seen
arWorldRoot.visible = camera.visible
tangoVideoMesh.update()
})
}else console.assert(false)
// build a smoothedControls
var smoothedRoot = new THREE.Group()
scene.add(smoothedRoot)
var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
lerpPosition: 0.8,
lerpQuaternion: 0.2,
lerpScale: 0.7,
})
onRenderFcts.push(function(delta){
smoothedControls.update(markerRoot)
})
var arWorldRoot = smoothedRoot
}
if( arProfile.contextParameters.trackingBackend === 'tango' ){
// init tangoPointCloud
var tangoPointCloud = new ARjs.TangoPointCloud(arSession)
scene.add(tangoPointCloud.object3d)
}
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
// add an object to the arAnchor
//////////////////////////////////////////////////////////////////////////////////
var arWorldRoot = arAnchor.object3d
var mesh = new THREE.AxisHelper()
arWorldRoot.add(mesh)
......@@ -221,22 +198,58 @@
mesh.position.y = geometry.parameters.height/2
arWorldRoot.add( mesh );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
// var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
// var material = new THREE.MeshNormalMaterial();
// var mesh = new THREE.Mesh( geometry, material );
// mesh.position.y = 0.5
arWorldRoot.add( mesh );
// arWorldRoot.add( mesh );
//
// onRenderFcts.push(function(delta){
// mesh.rotation.x += Math.PI*delta
// })
//////////////////////////////////////////////////////////////////////////////
// DebugUI
//////////////////////////////////////////////////////////////////////////////
// create arjsDebugUIContainer if needed
if( document.querySelector('#arjsDebugUIContainer') === null ){
var domElement = document.createElement('div')
domElement.id = 'arjsDebugUIContainer'
domElement.setAttribute('style', 'position: fixed; bottom: 10px; width:100%; text-align: center; z-index: 1;color: grey;')
document.body.appendChild(domElement)
}
var sessionDebugUI = new ARjs.SessionDebugUI(arSession, tangoPointCloud)
document.querySelector('#arjsDebugUIContainer').appendChild(sessionDebugUI.domElement)
var anchorDebugUI = new ARjs.AnchorDebugUI(arAnchor)
document.querySelector('#arjsDebugUIContainer').appendChild(anchorDebugUI.domElement)
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// render the scene
onRenderFcts.push(function(){
// Render the see through camera scene
renderer.clear()
// render tangoVideoMesh
if( arProfile.contextParameters.trackingBackend === 'tango' ){
tangoVideoMesh.render()
}
// render hitTesting pickingPlane - for debug
var renderHitTestingPickingPlane = false
if( renderHitTestingPickingPlane && hitTesting._hitTestingPlane){
hitTesting._hitTestingPlane.renderDebug(renderer)
}
renderer.render( scene, camera );
})
// run the rendering loop
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
......@@ -251,4 +264,5 @@
onRenderFct(deltaMsec/1000, nowMsec/1000)
})
})
})()
</script></body>
three.js/src/threex/threex-artoolkitcontext.js
浏览文件 @ d1c8eee0
......@@ -195,7 +195,7 @@ ARjs.Context.prototype._initArtoolkit = function(onCompleted){
// init controller
var arController = new ARController(_this.parameters.canvasWidth, _this.parameters.canvasHeight, cameraParameters);
_this.arController = arController
// honor this.parameters.imageSmoothingEnabled
arController.ctx.mozImageSmoothingEnabled = _this.parameters.imageSmoothingEnabled;
arController.ctx.webkitImageSmoothingEnabled = _this.parameters.imageSmoothingEnabled;
......@@ -259,15 +259,11 @@ ARjs.Context.prototype.getProjectionMatrix = function(srcElement){
// FIXME rename this function to say it is artoolkit specific - getArtoolkitProjectMatrix
// keep a backward compatibility with a console.warn
if( this.parameters.trackingBackend === 'aruco' ){
console.assert(false, 'dont call this function with aruco')
}else if( this.parameters.trackingBackend === 'artoolkit' ){
console.assert(this.arController, 'arController MUST be initialized to call this function')
// get projectionMatrixArr from artoolkit
var projectionMatrixArr = this.arController.getCameraMatrix();
var projectionMatrix = new THREE.Matrix4().fromArray(projectionMatrixArr)
}else console.assert(false)
console.assert( this.parameters.trackingBackend === 'artoolkit' )
console.assert(this.arController, 'arController MUST be initialized to call this function')
// get projectionMatrixArr from artoolkit
var projectionMatrixArr = this.arController.getCameraMatrix();
var projectionMatrix = new THREE.Matrix4().fromArray(projectionMatrixArr)
// apply context._axisTransformMatrix - change artoolkit axis to match usual webgl one
projectionMatrix.multiply(this._artoolkitProjectionAxisTransformMatrix)
......
three.js/src/threex/threex-artoolkitsource.js
浏览文件 @ d1c8eee0
......@@ -289,11 +289,14 @@ ARjs.Source.prototype.toggleMobileTorch = function(){
// handle resize
////////////////////////////////////////////////////////////////////////////////
ARjs.Source.prototype.onResizeElement = function(mirrorDomElements){
ARjs.Source.prototype.onResizeElement = function(){
var _this = this
var screenWidth = window.innerWidth
var screenHeight = window.innerHeight
// sanity check
console.assert( arguments.length === 0 )
// compute sourceWidth, sourceHeight
if( this.domElement.nodeName === "IMG" ){
var sourceWidth = this.domElement.naturalWidth
......@@ -330,21 +333,6 @@ ARjs.Source.prototype.onResizeElement = function(mirrorDomElements){
this.domElement.style.width = screenWidth+'px'
this.domElement.style.marginLeft = '0px'
}
if( arguments.length !== 0 ){
debugger
console.warn('use bad signature for arToolkitSource.copyElementSizeTo')
}
// honor default parameters
// if( mirrorDomElements !== undefined ) console.warn('still use the old resize. fix it')
if( mirrorDomElements === undefined ) mirrorDomElements = []
if( mirrorDomElements instanceof Array === false ) mirrorDomElements = [mirrorDomElements]
// Mirror _this.domElement.style to mirrorDomElements
mirrorDomElements.forEach(function(domElement){
_this.copyElementSizeTo(domElement)
})
}
ARjs.Source.prototype.copyElementSizeTo = function(otherElement){
......
three.js/vendor/jsartoolkit5/js/artoolkit.api.js
浏览文件 @ d1c8eee0
......@@ -981,16 +981,19 @@
}
if (this.orientation === 'portrait') {
this.ctx.save();
this.ctx.translate(this.canvas.width, 0);
this.ctx.rotate(Math.PI/2);
this.ctx.drawImage(image, 0, 0, this.canvas.height, this.canvas.width); // draw video
this.ctx.restore();
} else {
this.ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); // draw video
}
// if (this.orientation === 'portrait') {
// this.ctx.save();
// this.ctx.translate(this.canvas.width, 0);
// this.ctx.rotate(Math.PI/2);
// this.ctx.drawImage(image, 0, 0, this.canvas.height, this.canvas.width); // draw video
// this.ctx.restore();
// } else {
// debugger
// this.ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); // draw video
// }
this.ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height); // draw video
var imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
var data = imageData.data;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或