$30 off During Our Annual Pro Sale. View Details »

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

yomotsu
October 26, 2019

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!

yomotsu

October 26, 2019
Tweet

More Decks by yomotsu

Other Decks in Programming

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