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
   @yomotsu 2019-10-26
   

   View Slide

2. FrontEnd dev
   at PixelGrid, Inc.
   Akihiro Oyamada
   @yomotsu
   

   View Slide

3. Google provides AR

   for your search result
   

   View Slide

4. View Slide

5. View Slide

6. Let’s make it!
   

   View Slide

7. • Blender 2.8
   •
   • USD.command

   (USDPython)
   What you need
   

   View Slide

8. Blender 2.8
   

   View Slide

9. The 3D modeling tool
   

   View Slide

10. View Slide

11. https://fund.blender.org
    

    View Slide

12. https://www.blender.org/user-stories/japanese-anime-studio-khara-moving-to-blender/
    

    View Slide

13. https://www.blender.org
    

    View Slide

14. https://www.blender.org
    For FREE
    

    View Slide

15. 
    

    View Slide

16. A custom element
    

    View Slide

17. src="./my-3d-model.glb"
    camera-controls
    ar
    >
    

    View Slide

18. https://googlewebcomponents.github.io/model-viewer/
    

    View Slide

19. src="./my-3d-model.glb"
    camera-controls
    ar
    >
    

    View Slide

20. src="./my-3d-model.glb"
    camera-controls
    ar
    >
    type="module"
    src="https://unpkg.com/@google/
    model-viewer/dist/model-viewer.js"
    >
    

    View Slide

21. USD.command
    

    View Slide

22. The tool for iOS AR
    

    View Slide

23. View Slide

24. https://developer.apple.com/augmented-reality/resources/
    

    View Slide

25. https://developer.apple.com/augmented-reality/resources/
    

    View Slide

26. How?
    

    View Slide

27. 1. Prepare a 3D model in Blender
    2. Export as .glb
    3. Convert to .usdz
    4. Load with
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. my-3d-model.glb
    

    View Slide

32. >
    src="./my-3d-model.glb"
    

    View Slide

33. >
    src="./my-3d-model.glb"
    camera-controls
    ar
    

    View Slide

34. >
    src="./my-3d-model.glb"
    camera-controls
    ar
    type="module"
    src="https://unpkg.com/@google/
    model-viewer/dist/model-viewer.js"
    >
    

    View Slide

35. View Slide

36. View Slide

37. Apple does not support GLB
    We need to prepare in another format.
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. Type “usdzconvert” and a space
    

    View Slide

42. Drag and drop the GLB file
    

    View Slide

43. Drag and drop the GLB file
    Then press Enter key
    

    View Slide

44. View Slide

45. my-3d-model.usdz
    

    View Slide

46. type="module"
    src="https://unpkg.com/@google/
    model-viewer/dist/model-viewer.js"
    >
    src="./my-3d-model.glb"
    >
    

    View Slide

47. type="module"
    src="https://unpkg.com/@google/
    model-viewer/dist/model-viewer.js"
    >
    ios-src="./my-3d-model.usdz"
    src="./my-3d-model.glb"
    >
    

    View Slide

48. View Slide

49. View Slide

50. FYI: URL must be HTTPS
    

    View Slide

51. Demo
    

    View Slide

52. Is tag valid?
    

    View Slide

53. Kind of.
    is a Custom Element.

    A.K.A. Web Component.
    

    View Slide

54. https://developer.mozilla.org/docs/Web/Web_Components
    

    View Slide

55. View Slide

56. View Slide

57. Not a web standard
    

    View Slide

58. Unstable
    Not a web standard
    

    View Slide

59. Unstable
    Not a web standard
    

    View Slide

60. View Slide

61. What you need to know is

    
    

    View Slide

62. Wanna try?
    

    View Slide

63. gl.finish();
    @yomotsu
    

    View Slide