WebAR Getting started with 8th Wall Web in English.

It is the WebAR hands-on document held on Feb 2, 2019 and March 30, 2019 and April 6, 2019.
https://xr-fukuoka.connpass.com/event/114279/
https://xr-fukuoka.connpass.com/event/124923/
https://xr-fukuoka.connpass.com/event/124923/

You can make easily WebAR content using this document.

Change history
----
Feb 2, 2019: New create.
March 30, 2019: Compatible with iOS12.2. Brightness of glTF model became stronger. A-Frame0.9.0

日本語版
https://speakerdeck.com/sgidon/webar-getting-started-with-8th-wall-web

#AR_Fukuoka

Transcript

1. WebAR Getting started with 8th Wall Web #AR_Fukuoka
2. Self Introduction 杉井　庸一 Youichi Sugii youichi.sugii @sgidon I’m an computer engineer in Japan. Hobbies • WebVR / AR. • Motorcycles. • Chromebook. I translated this document into English to improve English skill.
3. START
4. What's WebAR? AR(Augmented Reality) is the technology which combines real and computer generated information to deliver an enhanced view of the real world. WebAR allows to be used with a web browser instead of dedicated application. You can enjoy AR easily since only accessing an URL linked AR content is required to experience!
5. Marker based AR / Marker-less AR Fiducial marker is used for fixing a virtual object in its position/angle in the real world. Placing virtual objects is easy, but low-flexibility of the user's movement. Marker-less AR doesn’t require fiducial marker to fix virtual objects in real environment since it runs based on SLAM technology. It gives users the freedom to move around virtual object.
6. AR.js ARKit ARCore 8thWallWeb Marker Based Markerless Provider Github: Jerome Etienne Apple Google 8thwall Device Almost all devices iOS 12 iPhone6S over Android Oreo Limited terminals iOS/ Android Browser Almost all browser Safari Chrome Canary iOS Safari/ Android Chrome Product WebAR ジェネレータ AR Quick Look - AR Camera Various WebAR https://web-ar-generator.firebaseapp.com/
7. 8thWallWeb Library that realizes WebAR on mobile browser. It works on multiple mobile platforms (iOS / Android) AR content can be developed easily with some 3D Javascript frameworks (Three.js / A-Frame / Amazon Sumerian). Operational requirements of 8th Wall Web are as below • iPhone/iPad: iOS11 over, Safari • Android: Chrome, Firefox You need the API key issued by 8th Wall. If the number of accesses is over 1000 per month, you need to pay additional fee.
8. 8thWallWeb
9. Web Developer Example AR Camera
10. A-Frame Framework to easily realize 3D representation such as VR on Web browser. You can place 3D objects just writing a few lines of HTML tags. It works on major browsers such as Firefox, Chrome, Edge. Also supports HMD such as WindowMR, HTC Vive, and smartphone VR. You can use various functions by using external libraries together.
11. Example https://aframe.io/
12. Example Rotation: mouse drag Front/Back: [W][S] key Left/Right: [A][D] key https://aframe.io/
13. Today's Goal
14. Menu Create Account of 8thwall Get model data Create AR contents with AR Camera Learning the basic operation of A-Frame Create AR contents with Web Developer Self-Study
15. Requirements for Getting started • Account of 8thWall →　Create an Account at https://8thwall.com/ . • Development PC • Smartphone for checking operation. →　iPhone/iPad(Over iOS11): Safari、Android: Chrome/Firefox • Web server →　This time we will use https://glitch.com/ . →　You can save it on glitch by logging in with Github/Facebook/email
16. 8thwall Account Create account from 8thWall's web page.
17. Create an Account https://8thwall.com/ １）Create Account ３）Get Started ２）Web Developer
18. Create an Account １）Select a country and enter a phone number. ２）Enter the code sent by SMS and click Verify.
19. Create an Account Congratulations. Your account is now created.
20. Get a model data Let's use Poly's model data.
21. POLY https://poly.google.com/
22. POLY input ”astronaut”
23. POLY Click
24. Download the model Download ↓ glTF
25. Download the model Download
26. File Conversion（glTF -> GLB） https://glb-packer.glitch.me Drag and drop three files at once rename to “Astronaut.glb”
27. AR Camera Let's make WebAR contents without coding.
28. Console https://console.8thwall.com/ Sign in
29. Create WORKSPACE １）WORKSPACES ２）Create a New Workspace
30. Create WORKSPACE サインイン １）AR Camera ２）Create
31. Create AR Camera １） AR Camera ２） Dashboard ３） Create a new camera
32. AR Camera setting Drag & Drop Astronaut.glb
33. AR Camera setting Setting change Check Operation
34. AR Cameraの設定 Published To apply changes, you need to click “Publish” every time. Read QRCode on Smartphone
35. A-Frame Learn the basic operation of A-Frame
36. Code to Glitch https://aframe.io/ Click
37. Code to Glitch Click
38. Code to Glitch １）Please choose ２）Click after sign in
39. Code to Glitch Click
40. Operation check on Glitch Click Automatically updated
41. Explain A-Frame source code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! • A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> </head> <body> <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html> Load library Write HTML tags of A-Frame.
42. Explain A-Frame source code <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> position: [x y z] space-separated rotation: [x y z] space-separated 0〜360 degree color: color code[#000000〜#FFFFFF] shadow a-sphere a-box a-cylinder a-plane Detail information on each tag. https://aframe.io/docs/
43. Position・Rotation・Scale X-axis Y-axis Z-axis Back is Z axis plus Check inspector CTRL+ALT+i Y-up right-hand coodinatie system
44. Position・Rotation・Scale a-box Change value Changes on the inspector are not updated to the source code. You need to update to the source code manually .
45. Self-study Let's modify the source freely Let's check the corrected result. It is convenient to divide the screen by half.
46. Web developer Let's make WebAR content with A-Frame.
47. Console https://console.8thwall.com/ Sign in
48. Create WORKSPACE １）WORKSPACES ２）Create a New Workspace If you are already working on WORKSPACE, please proceed to create Web App.
49. Create WORKSPACE １）Web Developer ２）Create
50. Create Web App １）WORKSPACE ２） Dashboard ３） Create a new Web App
51. Create Web App Input Application Name and Create
52. Create Web App Created Web App.
53. Code to Glitch Click
54. Load 8thWallWeb library Delete A-Frame library
55. Load 8thWallWeb library https://docs.8thwall.com/web/ １）AFrame ２）Copy text <script src="//cdn.8thwall.com/web/aframe/8frame-0.8.2.min.js"></script> change「8frame-0.9.0.min.js」
56. Load 8thWallWeb library Paste text
57. App Key ３）Copy １） Dashboard ２）</>
58. App Key Paste AppKey
59. Add xrweb component <a-scene background="color: #ECECEC" xrweb> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> Add
60. Set camera <a-scene background="color: #ECECEC" xrweb> <a-camera position="0 8 8"></a-camera> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene>
61. Authorize the device Developer Mode
62. Authorize the device On Read QRCode on Smartphone
63. Set model object １）assets ２）Drag & Drop model file ３）Click ４）Copy URL
64. Set model object <a-scene background="color: #ECECEC" xrweb> <a-camera position="0 8 8"></a-camera> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> <a-gltf-model src="https://〜" shadow></a-gltf-model> </a-scene> Delete Paste URL
65. iPhone/iPad 「Motion &Orientation Access」and「Camera & Microphone Access」 are disabled as the default setting on latest version of iOS.. Open ”setting” → ”Safari” and turn on these toggle switchs. ※「Motion &Orientation Access」 is a limitation from iOS12.2
66. Support for iOS12.2 and add recenter https://github.com/8thwall/web xrextras
67. Support for iOS12.2 and add recenter <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script> <script src="//apps.8thwall.com/xrweb?appKey=xxxxxxxxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head> <body> <a-scene background="color: #ECECEC" xrweb xrextras-almost-there xrextras-loading xrextras-runtime-error xrextras-tap-recenter> <a-camera position="0 8 8"></a-camera> add in a-scene xrextras-almost-there → Detects unsupported browsers and gives hints. xrextras-loading → Manages the loading screen on startup. xrextras-runtime-error → Shows an error image on runtime error. xrextras-tap-recenter → Calls 'XR.recenter()' when the scene is tapped.
68. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! • A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script> <script src="//apps.8thwall.com/xrweb?appKey=xxxxxxxxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head> <body> <a-scene background="color: #ECECEC" xrweb xrextras-almost-there xrextras-loading xrextras-runtime-error xrextras-tap-recenter> <a-camera position="0 8 8"></a-camera> <a-gltf-model src="https://cdn.glitch.com/xxxxx%2FAstronaut.glb?xxxxx" shadow></a-gltf-model> </a-scene> </body> </html> Source Code
69. Try it Show read on your smartphone
70. Self-study Let's make it as you like in each yourself.
71. Appendix
72. Appendix: link 8thwall • web https://8thwall.com/ • document https://docs.8thwall.com/web/ • Github https://github.com/8thwall/web • Slack https://8thwalldevs.slack.com/ A-Frame • web https://aframe.io/ • document https://aframe.io/docs/ • Github https://github.com/aframevr/aframe
73. Appendix: A-Frame(animation) Ver 0.9.0 You can easily create moving contents. Add animation components to the object you want to apply. <a-gltf-model src="https://xxxx〜" shadow animation=”property:rotation; dur:10000; from:0 0 0; to:0 360 0; loop:true; “> </a-gltf-model> Property property: Target attribute. dur: Duration of the animation. from: Starting value. to: Ending value. loop: Loop count or indefinite. true=indefinite. https://aframe.io/docs/0.9.0/components/animation.html
74. Appendix: Display the glTF model brightly Set the gammaOutput option to True for the renderer of SCENE. The glTF model which was dark can be displayed brightly. However, the brightness of whole scene will become stronger. <script src="//apps.8thwall.com/xrweb?appKey=xxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head> <body> <a-scene xrweb xrextras-almost-there ~ renderer="gamma-output:true" > Add in a-scene
75. Appendix: Add Shadow Set component Add component after API-KEY script. Floor object Add a-plane tag after a-gltf-model tag. <script src="//apps.8thwall.com/xrweb?appKey=xxx"></script> <script> AFRAME.registerComponent('shadow-material', { init() { this.material = new THREE.ShadowMaterial() this.el.getOrCreateObject3D('mesh').material = this.material this.material.opacity = 0.4 } }) </script> </head> <body> <a-camera position="0 8 8"></a-camera> <a-gltf-model src="https://cdn.glitch.com/xxxxx%2FAstronaut.glb?xxxxx" shadow></a-gltf-model> <a-plane rotation="-90 0 0" width="1000" height="1000" shadow shadow-material></a-plane> <a-scene> Write it in one line.
76. Appendix: Price Web Developer / AR Camera Both Free / Pro plans are prepared. In the case Pro plan, you will pay monthly flat fee and page-based usage fee. Also Enterprise, Student license are prepared.
77. Thanks for listening.