Building Mobile AR Web Applications in HTML5 - Google IO 2012

Size: px

Start display at page:

Download "Building Mobile AR Web Applications in HTML5 - Google IO 2012"

미라 진
5 years ago
Views:

1 Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics

2 Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33

3 - - - (Simplicity) (Modularity) (Decentralization) URI resource HTML,, AR. - AR 4/33

4 HTML Physical Resource - Point of Interest URI - HTTP URI Metadata REST Place Media - CSS Media Module Scene graph CSS Augmentation - POI CSS - & AR DOM Event - POI In-situ 5/33

5 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

6 Physical Resources URI Resource Representation 7/33

7 Place Media Type Page(2D) Place(3D) (element) 3 Scene Graph 8/33

8 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

9 AR DOM Events In-situ Physical Resource 5 UI (DOM Lv.3 ) 10/33

10 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

11 The Insight: Architecture 12/33

12 S.M.AR.T AR - Point of Interest - Place - Mobile AR WebApp WYSIWYG ( ) : S.M.AR.T.. 13/33

13 Physical Resource POI 14/33

14 Physical Resource POI 15/33

15 Physical Resource 1. 16/33

16 Physical Resource 2. 17/33

17 Physical Resource 3. 18/33

18 Physical Resource 4. Place 19/33

19 Media Assets 1. 20/33

20 Media Assets 2. 21/33

21 ARWebApp ARWebApp - Create ARWebApp My ARWebApps: 22/33

22 ARWebApp ARWebApp - My ARWebApps: 23/33

23 Example 1 Hello World "h". <html> <style type="text/css" media="place"> #hello { -ar-target: object(" } </style> <body> <p id="hello">hello World!</p> </body> </html> HTML 24/33

24 Hello World 00:00-00:32 25/33

25 Example 2 "h". <html> <style type="text/css" media="place">.media { -ar-target: object( } </style> <body> <img class="media" src="gif_animation.gif" /> <video class="media" preload="none" src="html5_video.ogg" controls /> <svg class="media" xmlns= version="1.1"> <g> <polygon points="0,0 100,0 100,100 0, 100" style="fill:lime" /> </g> </svg> </body> </html> HTML 26/33

26 (1/2) 00:00-00:40 00:00-00:46 27/33

27 (2/2) 00:00-00:59 28/33

28 Example 3 CSS Transform "h". <html> <style type="text/css" media="place"> #container { -ar-target: object(" } #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

29 CSS Transform 00:00-00:36 30/33

30 Example 4 JavaScript AR DOM "h". <script type="text/javascript"> function initialize() { insight.addeventlistener( "trackstart", //event type (trackstart, trackend, placein, placeout) " //target uri function(event) { //callback alert("track Start : " + event.target); event.element.src = "image2.png"; } ); }; </script> JAVASCRIPT 31/33

31 Track Event Handling 00:00-00:31 32/33

32 .. -, KIST -, UST HCI & Robotics

Ext JS À¥¾ÖÇÃ¸®ÄÉÀÌ¼Ç°³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇÃ¸®ÄÉÀÌ¼Ç°³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',