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!
Let’s try AR on mobile Webwith @yomotsu 2019-10-26
View Slide
FrontEnd devat PixelGrid, Inc.Akihiro Oyamada@yomotsu
Google provides AR for your search result
Let’s make it!
• Blender 2.8• • USD.command (USDPython)What you need
Blender 2.8
The 3D modeling tool
https://fund.blender.org
https://www.blender.org/user-stories/japanese-anime-studio-khara-moving-to-blender/
https://www.blender.org
https://www.blender.orgFor FREE
A custom element
src="./my-3d-model.glb"camera-controlsar>
https://googlewebcomponents.github.io/model-viewer/
src="./my-3d-model.glb"camera-controlsar>type="module"src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
USD.command
The tool for iOS AR
https://developer.apple.com/augmented-reality/resources/
How?
1. Prepare a 3D model in Blender2. Export as .glb3. Convert to .usdz4. Load with
my-3d-model.glb
>src="./my-3d-model.glb"
>src="./my-3d-model.glb"camera-controlsar
>src="./my-3d-model.glb"camera-controlsartype="module"src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
Apple does not support GLBWe need to prepare in another format.
Type “usdzconvert” and a space
Drag and drop the GLB file
Drag and drop the GLB fileThen press Enter key
my-3d-model.usdz
type="module"src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">src="./my-3d-model.glb">
type="module"src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">ios-src="./my-3d-model.usdz"src="./my-3d-model.glb">
FYI: URL must be HTTPS
Demo
Is tag valid?
Kind of. is a Custom Element. A.K.A. Web Component.
https://developer.mozilla.org/docs/Web/Web_Components
Not a web standard
UnstableNot a web standard
What you need to know is
Wanna try?
gl.finish();@yomotsu