2021/03/27
於:エンジニアカフェ (AkarengaLT #8)
ハッシュタグ: AkarengaLT
完成図
想定しているレベル感の方
- html、聞いたことある
- AR、なにから始めようか迷ってる
- 静的コンテンツのホスティングに興味がある
事前準備
- Githubのアカウントを作る
- 任意のエディタを用意する(プレビュー機能があるVScodeなど便利)
- Netlifyのアカウントを作っておく
- ラクスルに登録(名刺の発行まで行う方のみ)
- 表示したい3Dモデルを用意する
他のパターン
任意のレンタルサーバーなどにSCPしたり、
手元で試したい場合はhttp-server
を導入したり、MAMP、XAMPPなどを利用してhtmlを公開できる状態にする
作成の流れ(1)
- HTMLソースを書く
- GitHubにpush (htmlとモデルファイルとARマーカーだけなのでブラウザ経由でも可)
- Netlifyとリポジトリを連携する (これはGithub pagesでも可)
作成の流れ(2)
- AFrame稼働用のURLをQRコードに格納
- 表示したいモデルを作る
- 表示したいものを呼び出しパターンに格納
- ARマーカーを作成(AR.ja marker generater )
- 実機でテスト
- ネットプリントサービスのテンプレートにARマーカーおよびQRを配置
- 名刺を注文(今回の例では
ラクスル
さんへの注文を最終目的地とする)
仕様編
ディレクトリの構造
my-repo
├── index.html
├── mystyle.glb
└── pattern-generate.patt
利用するフレームワーク
- AFrame
- AR.js
応答の仕組み
- スマートフォンのカメラでQRコードを読み込んでページにアクセス
- デバイスのカメラをブラウザから使う許可を求める
- ARマーカーのパターンを提示
- AFrameが格納されたパターンを構築
ソース
ソース
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intial-scale=1">
<title>ARcardAlt9800</title>
</head>
<body style="margin:0px; overflow:hidden;">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs="debugUIEnabled:false;" "sourceType: webcam;" renderer="gammaOutPut: true;" vr-mode-ui="enabled: false">
<a-assets>
<a-asset-item id="mystyle" src="mystyle.glb"></a-asset-item>
</a-assets>
<a-marker
markerhandler
emitevents="true"
cursor="fuse: false; rayOrigin: mouse"
preset="custom"
type='pattern'
url="./pattern-generate.patt">
<a-entity
gltf-model="#mystyle"
scale="2 2 2"
rotation="0 0 0"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
モデルの作成編
モデルの作成
専用のセンサーカメラを用いる
Get Started with the Structure Sensor (Occipital, Inc.)LiDER搭載スマホを使う
Apple社LiDAR搭載iPad Proによる3D点群スキャンアプリのリリースについて | PronoHearts,Inc (一例)
各社からいろんなアプリが出ている([iOS 点群メッシュ]などで検索)
モデルファイル色々
- glb
- gitf
- stl
- obj / mtl
田中の場合はobjとmtlからglbを作成してこれを読み込んでいる。
モデルの確認
- Blenderが便利 mtlとobjの統合なんかもできる
- VScodeの拡張でもできる
名刺作成
ラクスルにアクセスしマイページへ移動
デザインツールを使う
テンプレートを用いて名刺を仕上げる
- パワーポイントなどスライドツールを使うノリでパーツの配置ができる
- 画像素材のドラッグアンドドロップも簡単!
値段など
応用例
- 結婚式のカード
- 年賀状
先駆者
エンジニアの学生コミュニティは京都のCAMPHOR-さんや渋谷のスポンサーをして若手向けのカンファレンスを行うBit Valleyみたいなのもあるそうな。