Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à [8thWall ＋ three.js] #stayhomeを楽しくするWebARを一から作る
Similaire à [8thWall ＋ three.js] #stayhomeを楽しくするWebARを一から作る (7)
Dernier
Dernier (10)
[8thWall ＋ three.js] #stayhomeを楽しくするWebARを一から作る
- 2. 自己紹介 ● 班長 @a_hancho ● カヤック → フリーランス(MESON.inc) ● ハマっているもの ○ Nreal ○ SparkAR ○ FF7 REMAKE ○ 釣り(自粛中)
- 3. 過去の 8thWall ＋ three.js 制作 ● NIGHT SYNC YOKOHAMA(2019/11/1 - 2019/12/27) ○ プロジェクションマッピング × WebAR なぜ「8thWall＋three.js」？ ○ 8thWall : 空間認識が使えて操作が自由にできるWebARライブラリはこれ一択 ○ three.js : 8thWallがサポートしているAFrame, Babylon.js, three.jsの中から選択
- 4. #うちで踊ろう
- 5. Phase.1 8thWall動かしてみる Phase.2 8thWall基盤実装 Phase.3 three.js実装
- 6. 8thWallを動かしてみる ● 8thWallアカウント&プロジェクト作成 ○ Keyが発行される ● 公式のExampleリポジトリをgit clone ○ https://github.com/8thwall/web/tree/master/examples ○ 「/examples/threejs/placeground」を参考にする(右画像) ● htmlにあるappKeyを作成したKeyに変更 <script async src="//apps.8thwall.com/xrweb?appKey=XXXXXXXX"></script> ※注意点 ○ PCは空間認識が働かない ➡ スマホでローカルサーバー接続推奨 ○ ｈｔｔｐだとカメラが起動できない ➡ httpsで立ち上げる
- 7. 8thWall動かしてみる - 補足 ● オンラインエディターが便利 ○ 課金アカウント限定 ○ 前頁で紹介したplacegroundのサンプル が初期状態で入っている ○ デプロイやローカル環境構築の手間が ゼロ (月99ドル～なので推奨はしない)
- 8. Phase.1 8thWall動かしてみる Phase.2 8thWall基盤実装 Phase.3 three.js実装
- 9. HTML ② <script> three.js 必ず外部ファイルを読み込む ③ <script> 8thWall関連 ⑤ <body> canvas要素だけでOK ① <meta>,<link> お好みで ④ <script> 各々作成するscript APIキー以外は一旦コピペでOKです この順序は厳守 APIキー ② ③ ④ ⑤ ① placegroundを参考にしてみましょう
- 10. js - 基盤 こちらも一旦コピペでOKです ① 8thWallの処理を入れていく場所 ● XR8, XRExtras ○ 用意済みのPipeline ○ 必要に応じてカスタマイズ ● customPipelineModule() ➡ ここが自作する部分 ② 実行 ● 引数のパラメーターで前後カメラを切り 替えたり、webgl1を使用したりできる placegroundのindex.js最後あたり参考
- 11. js - customPipelineModule XR8.Threejs.xrScene() ➡ onStart時に8thWallがthree.jsの Renderer、Scene、Cameraを用意する (次ページに図あり) onStart、ouUpdate、onCanvasSizeChange ● 実行タイミングが違う関数たち ● https://www.8thwall.com/docs/web/#xr8addcamerapipelinemodule ● Unityで言うと、MonoBehaviorのStartやUpdateみた いなもの メインで作業する部分です
- 12. 8thWall基盤完成 ● Sceneの原点 ○ 起動時のスマホの真下 ○ z軸はスマホ正面方向 = 人の後ろ方向(右手系)
- 13. Phase.1 8thWall動かしてみる Phase.2 8thWall基盤実装 Phase.3 three.js実装
- 14. 映像を置く ● Geometry : THREE.PlaneGeometry() ● Material ○ THREE.VideoTexture()でビデオ要素からtexture取得 ○ 緑背景をクロマキーシェーダーで消した タップした位置に配置 ○ THREE.Raycaster()を使用 ○ 地面(position.y = 0)に衝突用の透明な板を置いている XR8.Threejs.xrScene().sceneに追加 three.js - 映像
- 15. three.js - Particle ● 以下three.js公式サンプルを改造 ○ サイズや範囲を小さく調整 ○ textureを「♪」に変更 ● XR8.Threejs.xrScene().sceneに追加 https://threejs.org/examples/?q=particle#webgl_buffergeometry_custom_attributes_particles
- 16. three.js - Bloom(PostProcessing) ● 以下three.js公式サンプルを改造 ○ Strength等の値を調整 ○ 実装内のRenderer, Camera, Sceneに XR8.Threejs.xrScene()を使用 https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom
- 18. 注意点 ● パフォーマンス問題 ○ そもそも30fps割ってる端末が多数 ○ ポスプロをいれるとがっつり下がる ● ローディング、エラー画面の改造が結構厄介 ○ z-index上げて下に隠す的な工夫が多数必要 ● iOS13問題 ○ ユーザーがタップしてカメラの許可をする必要がある ○ 画像長押し保存の挙動がiOS12以前と違う => こちらも参考にしてみてください WebAR TOKYO #1 登壇資料 : ここがつらいよ8thWall https://www.slideshare.net/ssuseree9db3/8thwall-232682753
- 19. まとめ ● 8thWallの基盤はすぐ整う ● あとは一般的なthree.js開発とほぼ一緒 ● 深掘りすると大変な部分はある => 困ったことがあったらいつでもお声かけください