From 005f87d6c40322309ad9a68d4b2627cc6599684d Mon Sep 17 00:00:00 2001 From: abrie Date: Sat, 31 Aug 2013 03:58:08 -0400 Subject: [PATCH] refactor: seperate AR functions into module and DOM. - move ar functions from application to realspace.js, - create dedicated div for realspace canvas. --- application.html | 4 ++- application.js | 74 ++++----------------------------------------- realspace.js | 79 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 88 insertions(+), 69 deletions(-) create mode 100644 realspace.js diff --git a/application.html b/application.html index 744faf8..31af9db 100644 --- a/application.html +++ b/application.html @@ -7,6 +7,8 @@ -
+
+
+
diff --git a/application.js b/application.js index 0e0a229..31cce9b 100644 --- a/application.js +++ b/application.js @@ -1,49 +1,19 @@ "use strict"; -requirejs( ['webcam','ardetector','arview','arobject'], function(webcam,ardetector,arview,arobject) { - - var canvas, context, detector, view = undefined; +requirejs( ['webcam','realspace'], function(webcam,realspace) { // Initializes components and starts the game loop function initialize() { - // Create a canvas element to which we will copy video. - canvas = document.createElement('canvas'); - var webcamDimensions = webcam.getDimensions(); - canvas.width = webcamDimensions.width; - canvas.height = webcamDimensions.height; - - // We need a context for the canvas in order to copy to it. - context = canvas.getContext('2d'); - - // create an AR Marker detector using the canvas as the data source - detector = ardetector.create( canvas ); - - // Create an AR View for displaying the augmented reality scene - view = arview.create( webcam.getDimensions(), canvas ); - - // Set the ARView camera projection matrix according to the detector - view.setCameraMatrix( detector.getCameraMatrix(10,1000) ); - - // Place the arview's GL canvas into the DOM. - document.getElementById("application").appendChild( view.glCanvas ); + // Initialize the AR Display + realspace.initialize(); } // Runs one iteration of the game loop function tick() { - // Copy an image from the camara stream onto our canvas - webcam.copyToContext(context); - - // The ardetector requires that we set a flag when the canvas has changed. - canvas.changed = true; - - // Ask the detector to make a detection pass. - detector.detect( onMarkerCreated, onMarkerUpdated, onMarkerDestroyed ); - - // Update and render the AR view - view.update(); - view.render(); + // Run the AR detector and update the AR display + realspace.update(); - // Request another iteration of the gameloop + // Request another iteration of the gameloop window.requestAnimationFrame(tick); } @@ -52,36 +22,4 @@ requirejs( ['webcam','ardetector','arview','arobject'], function(webcam,ardetect initialize(); tick(); }); - - // This function is called when a marker is initally detected on the stream - function onMarkerCreated(marker) { - var object = markerObjects[marker.id]; - object.transform( marker.matrix ); - view.add( object, function(isSelected) { - onMarkerSelectionChanged(marker.id, isSelected); - }); - } - - // This function is called when an existing marker is repositioned - function onMarkerUpdated(marker) { - var object = markerObjects[marker.id]; - object.transform( marker.matrix ); - } - - // This function is called when a marker disappears from the stream. - function onMarkerDestroyed(marker) { - var object = markerObjects[marker.id]; - view.remove( object ); - } - - // This function is called when a marker object is selected/unselected. - function onMarkerSelectionChanged(id, isSelected) { - console.log("Selection:",id,":",isSelected); - } - - // Create marker objects associated with the desired marker ID. - var markerObjects = { - 16: arobject.createMarkerObject({color:0xAA0000}), // Marker #16, red. - 32: arobject.createMarkerObject({color:0x00BB00}), // Marker #32, green. - }; }); diff --git a/realspace.js b/realspace.js new file mode 100644 index 0000000..6d173e5 --- /dev/null +++ b/realspace.js @@ -0,0 +1,79 @@ +"use strict"; +define(['webcam','ardetector','arview','arobject'], function(webcam,ardetector, arview, arobject) { + + var canvas, context, detector, view = undefined; + + function initialize() { + canvas = document.createElement('canvas'); + var webcamDimensions = webcam.getDimensions(); + canvas.width = webcamDimensions.width; + canvas.height = webcamDimensions.height; + + // We need a context for the canvas in order to copy to it. + context = canvas.getContext('2d'); + + // create an AR Marker detector using the canvas as the data source + detector = ardetector.create( canvas ); + + // Create an AR View for displaying the augmented reality scene + view = arview.create( webcam.getDimensions(), canvas ); + + // Set the ARView camera projection matrix according to the detector + view.setCameraMatrix( detector.getCameraMatrix(10,1000) ); + + // Place the arview's GL canvas into the DOM. + document.getElementById("realspace").appendChild( view.glCanvas ); + } + + function update() { + // Copy an image from the camara stream onto our canvas + webcam.copyToContext(context); + + // The ardetector requires that we set a flag when the canvas has changed. + canvas.changed = true; + + // Ask the detector to make a detection pass. + detector.detect( onMarkerCreated, onMarkerUpdated, onMarkerDestroyed ); + + // Update and render the AR view + view.update(); + view.render(); + } + + // This function is called when a marker is initally detected on the stream + function onMarkerCreated(marker) { + var object = markerObjects[marker.id]; + object.transform( marker.matrix ); + view.add( object, function(isSelected) { + onMarkerSelectionChanged(marker.id, isSelected); + }); + } + + // This function is called when an existing marker is repositioned + function onMarkerUpdated(marker) { + var object = markerObjects[marker.id]; + object.transform( marker.matrix ); + } + + // This function is called when a marker disappears from the stream. + function onMarkerDestroyed(marker) { + var object = markerObjects[marker.id]; + view.remove( object ); + } + + // This function is called when a marker object is selected/unselected. + function onMarkerSelectionChanged(id, isSelected) { + console.log("Selection:",id,":",isSelected); + } + + // Create marker objects associated with the desired marker ID. + var markerObjects = { + 16: arobject.createMarkerObject({color:0xAA0000}), // Marker #16, red. + 32: arobject.createMarkerObject({color:0x00BB00}), // Marker #32, green. + }; + + return { + initialize: initialize, + update: update + } +});