20200916_XRMTG_LT資料

Transcript

1. Webアプリ開発やった事ない おじさんエンジニアがWebARやってみた話 さって〜(たいちょ〜) @s_haya_0820
2. プロフィール という会社で開発エンジニアやってます 肩書きは『隊長』です（ガチの役職名ですw） 弊社のHP見るとテスト屋さんな感じですがシステム開発やってます！ SE歴は20年くらいで主に組み込み系、アプリ開発などなどやってました さって〜(たいちょ〜) キャンプ大好きオジサンです
3. #DoMCN の会場貸し出し担当 せっかくだから自分でもXRの開発したい！
5. これ作ってみたい！ Unityワカラン… アプリにしたら インストール面倒… どうすればいいんだ…
7. コレだ！ 札幌にいると なかなか巡り会えなかったハンズオンに オンラインなら参加できる！ WEBアプリなら インストール不要
9. うぉぉぉぉ！できた！
10. がっ！ ここから発展させるためには いろんな知識がそもそも必要だった！ SE歴は20年くらいで主に組み込み系、アプリ開発などなどやってました… JavaScriptﾁｮｯﾄﾀﾞｹﾃﾞｷﾙ... A-Frameの扱い方イマイチ分かってない... マーカーの検出はなんとかなるかな？ (ハンズオンのおかげ！) HTMLﾁｮｯﾄﾀﾞｹﾃﾞｷﾙ...
11. A-Frameとの戦い… 最新Verの1.0.4を使ったが地味に情報が少ない Animationはググると古いVerの情報で 実は使えない構文があったり…と翻弄される… Three.jsのことも勉強しておけばよかった
12. やってみたこと - 試行錯誤 -
13. ü <a-plane><a-image>の配置 ü <a-entity>と<a-plane>の組み合わせによる配置 ü 複数アニメーションの同時進行 (position、rotate、visible) ü PNGの透明部分が重なることで裏側の<a-image>が 消えちゃう問題の解消
14. <a-plane color="#6846A5" width="1" height="1" depth="1" position="0 0 0" rotation="0 0 0"> ↓ <a-plane color="#6846A5" width="1" height="1" depth="1" position="0 0 0" rotation="-90 0 0"> <a-plane><a-image>の配置 ARマーカーに対して並行に表示したい →X軸に-90回転
15. <a-plane color="#6846A5" width="1" height="1" depth="1" position="0 0 0" rotation=”-90 0 0"> ↓ <a-plane color="#6846A5" width="1" height="1" depth="1" position="0 1 0" rotation="-90 0 0"> ↓ <a-plane color=“#6846A5” width=“1” height=“1” depth=“1” position=“0 0 1” rotation="-90 0 0"> <a-plane><a-image>の配置 ARマーカーの下側に移動したい →Y軸に”1”移動(浮き上がる…ｿｳｼﾞｬﾅｲ) →Z軸に”1”移動 Y X Z
16. <a-entity id="panel_1" width="1" height="1" depth="1" position="0 0 0" rotation="-90 0 0"> <a-plane color="#6846A5" width="1" height="1" depth="1" position="0 1 0" rotation="0 0 0"></a-plane> </a-entity> <a-entity>と<a-plane>の組み合わせによる配置 あまりX軸に-90していることを意識せずに<a-image>を配置できないものか… (x,yの配置で位置関係を把握したい…zとか出てくるとオジサンよくわからんw) →<a-entity>の子要素として<a-iamge>を置くことで <a-entity>を回転させつつ、<a-image>はx,y方向の位置指定で移動ができた Y X
17. <a-entity id="panel_1" width="1" height="1" depth="1" position="0 0 0" rotation="-90 -45 0"> <a-plane color="#d40010" width="0.5" height="0.5" position="-0.25 0.25 0" rotation="0 0 0"></a-plane> <a-plane color="#f2e500" width="0.5" height="0.5" position="-0.25 -0.25 0" rotation="0 0 0"></a-plane> <a-plane color="#744295" width="0.5" height="0.5" position="0.25 -0.25 0" rotation="0 0 0"></a-plane> <a-plane color="#e93587" width="0.5" height="0.5" position="0.25 0.25 0" rotation="0 0 0"></a-plane> </a-entity> <a-entity>と<a-image>の組み合わせによる配置
18. 複数アニメーションの同時進行(position、rotate、visible) <a-entity id="panel_1" width="1" height="1" depth="1" position="0 0 0" rotation="-90 -45 0" animation__1 = " property : object3D.position.x; from : -1; to : 1; dir : alternate; dur : 2000; loop : true; easing : easeInOutSine; delay : 0; startEvents : animation_start; " animation__2 = " property : rotation; dur : 2000; to : -90 314 0; loop : true; easing : linear; delay : 0; startEvents : animation_start; " >
19. PNGの透明部分が重なることで裏側の<a-image>が消えちゃう問題の解消 <a-entity id="panel_1" width="1" height="1" position="0 0 0" rotation="-90 0 0"> <a-image src="#image_2" width="1" height="1" position="0 0 0.5" rotation="0 0 0"></a-image> <a-image src="#image_3" width="1" height="1" position="0 0 0.25" rotation="0 0 0"></a-image> <a-image src="#image_4" width="2" height="1" position="0 0 0" rotation="0 0 0"></a-image> </a-entity> 上の層の透過部分が 下のimageを消しちゃってる
20. PNGの透明部分が重なることで裏側の<a-image>が消えちゃう問題の解消 <a-entity id="panel_1" width="1" height="1" position="0 0 0" rotation="-90 0 0"> <a-image src="#image_4" width="2" height="1" position="0 0 0" rotation="0 0 0"></a-image> <a-image src="#image_3" width="1" height="1" position="0 0 0.25" rotation="0 0 0"></a-image> <a-image src="#image_2" width="1" height="1" position="0 0 0.5" rotation="0 0 0"></a-image> </a-entity> 下の層になる要素から 順に定義することで解消！
21. というわけでできたものがこちら
23. まとめ WEBアプリヨクワカランおじさんでも A-FrameとAR.jsでいい感じに作れる とはいえまだやりたくてもできてないことが 結構あるのでまだまだ試行錯誤必要！
24. p ARでのClick(TAP)検知 →イマイチうまく検知できず… p 自前の3Dモデルの表示やアニメーション →3Dモデリングの知識が必要？ p 当たり判定使った表現 →やったことない p Image Tracking(NFT) →やったことある が、ブレる(揺れる)のでなんとかしたい
25. ありがとうございました！ さって〜(たいちょ〜)