Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

3c557c6103a4addc52f7b76ffd0a0f27?s=47 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!

3c557c6103a4addc52f7b76ffd0a0f27?s=128

yomotsu

October 26, 2019
Tweet

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

  4. None
  5. None
  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

  10. None
  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

  23. None
  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>
  28. None
  29. None
  30. None
  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>

  35. None
  36. None
  37. Apple does not support GLB We need to prepare in

    another format.
  38. None
  39. None
  40. None
  41. Type “usdzconvert” and a space

  42. Drag and drop the GLB file

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

  44. None
  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>

  48. None
  49. None
  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

  55. None
  56. None
  57. Not a web standard

  58. Unstable Not a web standard

  59. Unstable Not a web standard

  60. None
  61. What you need to know is
 <model-viewer>

  62. Wanna try?

  63. gl.finish(); @yomotsu