Let’s try AR on mobile Web with <model-viewer>

Make a mobile web AR experience with just a few lines!
The slide also shows how to prepare 3D model files.
I will upload videos in the slide later!

Transcript

1. Let’s try AR
 on mobile Web with <model-viewer> @yomotsu 2019-10-26
2. FrontEnd dev at PixelGrid, Inc. Akihiro Oyamada @yomotsu
3. Google provides AR
 for your search result
6. Let’s make it!
7. • Blender 2.8 • <model-viewer> • USD.command
 (USDPython) What you need
8. Blender 2.8
9. The 3D modeling tool
11. https://fund.blender.org
12. https://www.blender.org/user-stories/japanese-anime-studio-khara-moving-to-blender/
13. https://www.blender.org
14. https://www.blender.org For FREE
15. <model-viewer>
16. A custom element
17. <model-viewer src="./my-3d-model.glb" camera-controls ar ></model-viewer>
18. https://googlewebcomponents.github.io/model-viewer/
19. <model-viewer src="./my-3d-model.glb" camera-controls ar ></model-viewer>
20. <model-viewer src="./my-3d-model.glb" camera-controls ar ></model-viewer> <script type="module" src="https://unpkg.com/@google/ model-viewer/dist/model-viewer.js" ></script>
21. USD.command
22. The tool for iOS AR
24. https://developer.apple.com/augmented-reality/resources/
25. https://developer.apple.com/augmented-reality/resources/
26. How?
27. 1. Prepare a 3D model in Blender 2. Export as .glb 3. Convert to .usdz 4. Load with <model-viewer>
31. my-3d-model.glb
32. ></model-viewer> <model-viewer src="./my-3d-model.glb"
33. ></model-viewer> <model-viewer src="./my-3d-model.glb" camera-controls ar
34. ></model-viewer> <model-viewer src="./my-3d-model.glb" camera-controls ar <script type="module" src="https://unpkg.com/@google/ model-viewer/dist/model-viewer.js" ></script>
37. Apple does not support GLB We need to prepare in another format.
41. Type “usdzconvert” and a space
42. Drag and drop the GLB file
43. Drag and drop the GLB file Then press Enter key
45. my-3d-model.usdz
46. <script type="module" src="https://unpkg.com/@google/ model-viewer/dist/model-viewer.js" ></script> <model-viewer src="./my-3d-model.glb" ></model-viewer>
47. <script type="module" src="https://unpkg.com/@google/ model-viewer/dist/model-viewer.js" ></script> ios-src="./my-3d-model.usdz" <model-viewer src="./my-3d-model.glb" ></model-viewer>
50. FYI: URL must be HTTPS
51. Demo
52. Is <model-viewer> tag valid?
53. Kind of. <model-viewr> is a Custom Element.
 A.K.A. Web Component.
54. https://developer.mozilla.org/docs/Web/Web_Components
57. Not a web standard
58. Unstable Not a web standard
59. Unstable Not a web standard
61. What you need to know is
 <model-viewer>
62. Wanna try?
63. gl.finish(); @yomotsu