Presentation on Best Practices for Webcam Augmented Reality given by Blake Callens, Senior Software Engineer at Zugara

1. Best Practices For Webcam AR
Blake Callens
The Importance of Practicality
Using the Flex SDK
Speeding Up Data Structure Use
Integration with Preexisting CMS and HTTP Services
Integrating Motion Capture
Flash AR Engine Porting and Development

2. About Me
Blake Callens
Sr. Software Engineer, Zugara
@blakecallens
Sr. Developer on:
WSS, Fashionista, ZugMo, ZugSTAR, ZBR (in development)
Creator of ARtisan - Flex FLARToolkit and Papervision3D Manager

3. The Importance of Practicality

4. The Importance of Practicality
• Nobody reuses a gimmick

5. The Importance of Practicality
• Nobody reuses a gimmick
• Over-saturation of services

6. The Importance of Practicality
• Nobody reuses a gimmick
• Over-saturation of services
• Stagnation of the industry

7. The Importance of Practicality
• Nobody reuses a gimmick
• Over-saturation of services
• Stagnation of the industry
• Sustainable business models

8. The Importance of Practicality
• Nobody reuses a gimmick
• Over-saturation of services
• Stagnation of the industry
• Sustainable business models
• Emergence of the NUI

9. Using the Flex SDK
MXML Components
AS3
var loader:Loader = new Loader();
loader.load(new URLRequest(”http://yoursite.com/image.png”));
loader.x = 10;
loader.y = 10;
loader.addEventListener(MouseEvent.CLICK, onClick);
addChild(loader);
Flex
<mx:Image id=”image” source=”http://yoursite.com/image.png” x=”10” y=”10” click=”onClick(event)”/>

10. Using the Flex SDK
“Programmer’s Flash”
Flash IDE
Flex SDK
• Standard application components
• CSS Integration
• Command line compilation
• Full Adobe support
• 100% free to use

11. Using the Flex SDK
Brevity of Code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:artisan="com.onezerothrice.artisan.* "xmlns:local="*" backgroundColor="#000000" preloader="Preloader" width="640" height="480"
layout="absolute" clipContent="false" applicationComplete="init();">
<mx:Script>
<![CDATA[
import com.onezerothrice.artisan.calculations.ReturnType;
import com.onezerothrice.artisan.events.ARtisanSettingsEvent;
private function init():void
{
artisan.addEventListener(ARtisanSettingsEvent.AR_PARAMETERS_LOADED, onARParametersLoaded);
}
private function onARParametersLoaded(event:ARtisanSettingsEvent):void
{
sceneHolder.init(event.extraInfo);
}
private function onARtisanOutput(result:Array):void
{
sceneHolder.updateObjectPositions(result);
}
]]>
</mx:Script>
<artisan:ARtisan id="artisan" outputFunction="{onARtisanOutput}" returnType="{ReturnType.XYZ}" smoothing="true" scaleX="-1" x="{width}"/>
<local:SceneHolder id="sceneHolder" scaleX="-1" x="{width}"/>
</mx:Application>
Flex FLAR examples at:
code.google.com/p/artisanmanager

12. Speeding Up Data Structure Use
aka (speed tweaks)

13. Speeding Up Data Structure Use
aka (speed tweaks)
• Use as few event listeners as possible

14. Speeding Up Data Structure Use
aka (speed tweaks)
• Use as few event listeners as possible
• Pass related variables through custom events

15. Speeding Up Data Structure Use
aka (speed tweaks)
• Use as few event listeners as possible
• Pass related variables through custom events
• Use subscriber functions whenever possible

16. Speeding Up Data Structure Use
aka (speed tweaks)
• Use as few event listeners as possible
• Pass related variables through custom events
• Use subscriber functions whenever possible
• Arrays should only be used for holding multiple object types

17. Speeding Up Data Structure Use
aka (speed tweaks)
• Use as few event listeners as possible
• Pass related variables through custom events
• Use subscriber functions whenever possible
• Arrays should only be used for holding multiple object types
• Initialize arrays as: array:Array = [];

18. Speeding Up Data Structure Use
aka (speed tweaks)
• Use as few event listeners as possible
• Pass related variables through custom events
• Use subscriber functions whenever possible
• Arrays should only be used for holding multiple object types
• Initialize arrays as: array:Array = [];
• Use state constants to switch between dynamic layouts

19. Speeding Up Data Structure Use
aka (speed tweaks)
• Use as few event listeners as possible
• Pass related variables through custom events
• Use subscriber functions whenever possible
• Arrays should only be used for holding multiple object types
• Initialize arrays as: array:Array = [];
• Use state constants to switch between dynamic layouts
• Manually use System.gc();

20. Integration with Existing
CMS and HTTP Services

21. Integration with Existing
CMS and HTTP Services
• Pass relative and absolute URLs through FlashVars

22. Integration with Existing
CMS and HTTP Services
• Pass relative and absolute URLs through FlashVars
• Create a custom class(es) to handle all communications

23. Integration with Existing
CMS and HTTP Services
• Pass relative and absolute URLs through FlashVars
• Create a custom class(es) to handle all communications
• Flex HTTPService class

24. Integration with Existing
CMS and HTTP Services
• Pass relative and absolute URLs through FlashVars
• Create a custom class(es) to handle all communications
• Flex HTTPService class
• Parse all data before sending it to the main application

25. Integration with Existing
CMS and HTTP Services
• Pass relative and absolute URLs through FlashVars
• Create a custom class(es) to handle all communications
• Flex HTTPService class
• Parse all data before sending it to the main application
• Utilize SWC library creation whenever possible

26. Integration with Existing
CMS and HTTP Services
• Pass relative and absolute URLs through FlashVars
• Create a custom class(es) to handle all communications
• Flex HTTPService class
• Parse all data before sending it to the main application
• Utilize SWC library creation whenever possible
• Maintain embeddability whenever possible

27. Integrating Motion Capture

28. Integrating Motion Capture
• Technically AR

29. Integrating Motion Capture
• Technically AR
• Moving the user away from the keyboard

30. Integrating Motion Capture
• Technically AR
• Moving the user away from the keyboard
• Potentially processor intensive

31. Integrating Motion Capture
• Technically AR
• Moving the user away from the keyboard
• Potentially processor intensive
• Pushes applications towards NUI

32. Integrating Motion Capture

33. Integrating Motion Capture
• Working in 2D

34. Integrating Motion Capture
• Working in 2D
• Make room for the user

35. Integrating Motion Capture
• Working in 2D
• Make room for the user
• Keep everything in Reach

36. Integrating Motion Capture
• Working in 2D
• Make room for the user
• Keep everything in Reach
• Easy to understand controls

37. Integrating Motion Capture
• Working in 2D
• Make room for the user
• Keep everything in Reach
• Easy to understand controls
• Motion speed calculation

38. Flash AR Engine
Porting and Development

39. Flash AR Engine
Porting and Development
• Take advantage of ActionScript features

40. Flash AR Engine
Porting and Development
• Take advantage of ActionScript features
•Descriptive variable names

41. Flash AR Engine
Porting and Development
• Take advantage of ActionScript features
•Descriptive variable names
•Fast drawing functionality

42. Flash AR Engine
Porting and Development
• Take advantage of ActionScript features
•Descriptive variable names
•Fast drawing functionality
•BitmapData manipulation

43. Flash AR Engine
Porting and Development
• Take advantage of ActionScript features
•Descriptive variable names
•Fast drawing functionality
•BitmapData manipulation
•Extensive third party libraries

44. Flash AR Engine
Porting and Development
• Take advantage of ActionScript features
•Descriptive variable names
•Fast drawing functionality
•BitmapData manipulation
•Extensive third party libraries
• Think outside of the box

45. Flash AR Engine
Porting and Development
• Take advantage of ActionScript features
•Descriptive variable names
•Fast drawing functionality
•BitmapData manipulation
•Extensive third party libraries
• Think outside of the box
• Know when to stay vigilant and when to move on

46. Flash AR Engine
Porting and Development
• Take advantage of ActionScript features
•Descriptive variable names
•Fast drawing functionality
•BitmapData manipulation
•Extensive third party libraries
• Think outside of the box
• Know when to stay vigilant and when to move on
• Think about how other developers will interact with your engine

47. Questions?