Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics
Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33
- - - (Simplicity) (Modularity) (Decentralization) URI resource HTML,, AR. - AR 4/33
HTML Physical Resource - Point of Interest URI - HTTP URI Metadata REST Place Media - CSS Media Module - 2 3 Scene graph CSS Augmentation - POI CSS - & AR DOM Event - POI In-situ 5/33
Physical Resources A Conceptual Framework for Web-based Mirror World Web Media Entity Resource URI (Uniform Resource Identifier) (Point of Interest) Web Resource URI 6/33
Physical Resources URI Resource Representation 7/33
Place Media Type Page(2D) Place(3D) (element) 3 Scene Graph 8/33
CSS Augmentation AR CSS -ar-target POI element transform. -ar-transform element 3D transformation. -ar-transform translate() 3D translation. rotate() 3D rotation. scale() Scale. matrix3d() 3D Transformation 4x4 matrix. 9/33
AR DOM Events In-situ Physical Resource 5 UI (DOM Lv.3 ) 10/33
The Insight: AR Web Browser AR HTML5 - REST for Physical Resource (POI, Place) - Place Media - AR CSS - AR DOM Event - KIST NFT, Qualcomm Vuforia Image Tracking Engine - CSS 3D Transform, WebGL, OSG 3D Engine - ios, Android 11/33
The Insight: Architecture 12/33
S.M.AR.T AR - Point of Interest - Place - Mobile AR WebApp - - - WYSIWYG ( ) : http://smart.imrc.kr/hci2013/ S.M.AR.T.. 13/33
Physical Resource POI 14/33
Physical Resource POI 15/33
Physical Resource 1. 16/33
Physical Resource 2. 17/33
Physical Resource 3. 18/33
Physical Resource 4. Place 19/33
Media Assets 1. 20/33
Media Assets 2. 21/33
ARWebApp ARWebApp - Create ARWebApp My ARWebApps: 22/33
ARWebApp ARWebApp - My ARWebApps: 23/33
Example 1 Hello World "h". <html> <style type="text/css" media="place"> #hello { -ar-target: object("http://smart.imrc.kr/poi/12"); } </style> <body> <p id="hello">hello World!</p> </body> </html> HTML 24/33
Hello World 00:00-00:32 25/33
Example 2 "h". <html> <style type="text/css" media="place">.media { -ar-target: object(http://smart.imrc.kr/hci2013/rest/poi/21); } </style> <body> <img class="media" src="gif_animation.gif" /> <video class="media" preload="none" src="html5_video.ogg" controls /> <svg class="media" xmlns=http://www.w3.org/2000/svg" version="1.1"> <g> <polygon points="0,0 100,0 100,100 0, 100" style="fill:lime" /> </g> </svg> </body> </html> HTML 26/33
(1/2) 00:00-00:40 00:00-00:46 27/33
(2/2) 00:00-00:59 28/33
Example 3 CSS Transform "h". <html> <style type="text/css" media="place"> #container { -ar-target: object("http://smart.imrc.kr/hci2013/rest/poi/22"); } #image { -webkit-transform: translate3d(200px, 100px, 100px) rotate3d(1, 2, 0, 30deg) scale(1.3); } </style> <body> <div id="container"> <img id="image" src="image.png" /> </div> </body> </html> HTML 29/33
CSS Transform 00:00-00:36 30/33
Example 4 JavaScript AR DOM "h". <script type="text/javascript"> function initialize() { insight.addeventlistener( "trackstart", //event type (trackstart, trackend, placein, placeout) "http://smart.imrc.kr/hci2013/rest/poi/25", //target uri function(event) { //callback alert("track Start : " + event.target); event.element.src = "image2.png"; } ); }; </script> JAVASCRIPT 31/33
Track Event Handling 00:00-00:31 32/33
.. -, KIST -, UST HCI & Robotics