VR空間で画像をS3から取得して表示する

cluster.unity #2 での登壇内容です。
https://speakerdeck.com/kawashi/vrkong-jian-dexie-zhen-woqu-tutes3nibao-cun-suru の続きです。

https://cluster.mu/events/5de138bd-200b-4c15-aa74-03b9e332c93b

Transcript

1. VR空間で画像をS3から 取得して表示する 焼きそばメロンパン
2. 自己紹介
3. 自己紹介 • 焼きそばメロンパンです • clusterでGo書いてました • VR系の会社立ち上げました
4. 今日話すこと
5. 今日話すこと • 目的 • 手順・構成 • APIサーバの実装 (ざっくり) • OculusGoの実装 • 問題点 • さいごに
6. 目的
7. 前回のLTで写真撮影が出来るようになった！
8. 今度は撮影した写真を眺めたい！
9. OculusGoで実装してみた
10. 手順・構成
11. 全体の流れ 1. 写真を表示するUIを作成 2. APIサーバから写真URL一覧を取得 3. 写真URLから写真データをダウンロード
12. UI には UGUI SUper ScrollView を使用
13. 全体アーキテクチャ (概念的)
14. S3からの写真取得は UnityWebRequestTexture
15. 実装してみよう！
16. APIサーバの実装
17. Unityの勉強会なのでざっくりと
18. APIサーバの実装 • Go + gin • GET /v1/pictures で写真URLの一覧をJSONで受け取る • リクエスト時に送った Token から UserID を取得 • 該当ユーザの撮影した写真のみを返す • 実際の写真データはS3に保存済み
19. Advanced REST client で検証 (Chrome拡張)
20. 完成！
21. OculusGoの実装
22. OculusGoの実装手順 1. 写真一覧ページ作成 (uGUI)
23. OculusGoの実装手順 1. 写真一覧ページ作成 (uGUI) 2. 写真クラス作成: Picture
24. OculusGoの実装手順 1. 写真一覧ページ作成 (uGUI) 2. 写真クラス作成: Picture 3. 写真UI操作クラス作成: PictureScrollItem
25. OculusGoの実装手順 1. 写真一覧ページ作成 (uGUI) 2. 写真クラス作成: Picture 3. 写真UI操作クラス作成: PictureScrollItem 4. ページ管理クラス作成: PictureListPage
26. OculusGoの実装手順 1. 写真一覧ページ作成 (uGUI) 2. 写真クラス作成: Picture 3. 写真UI操作クラス作成: PictureScrollItem 4. ページ管理クラス作成: PictureListPage 5. スクロールビュー管理クラス作成: PictureListViewController
27. 1. 写真一覧ページ作成
28. Qiitaを参考に構築 ※ https://qiita.com/ayumegu/items/0362508ddb7d9cc89e93
29. 2. 写真クラス作成
30. 写真クラス作成 (Picture) • 写真URLとTextureを持つ • APIサーバから受け取ったJSONを このクラスに変換 • ScrollViewController 内で List<Picture> として利用する (書き方が悪いかも???)
31. 3. 写真UI操作クラス作成
32. 写真UI操作クラス作成 (PictureScrollItem) • uGUI の RawImage を持つ • PictureListViewController で写真 を UI に反映させる際に利用 • SetData 呼び出し時にまだ Texture が存在しない場合は読 み込み中画像を表示 (クラスの命名が悪い)
33. UnityWebRequestTexture の結果を そのまま使いたいので Image じゃなくて RawImage
34. 4. ページ管理クラス作成
35. ページ管理クラス作成 (PictureListPage) • ページを開いた時にAPIサーバから写真URL一覧を取得 • 取得が完了したら Picture に変換して PictureListViewController へ • 結果取得やエラーハンドリングに UniRx を利用 • ページUIの全体管理はちょっと複雑なので今回は省略
36. ページ管理クラス作成 (PictureListPage)
37. 5. スクロールビュー管理クラス作成
38. スクロールビュー管理クラス作成 (PictureListViewController) • LoopListView2 が UGUI Super ScrollView のクラス • LoopListView2 にメッセージを送って ScrollView を管理 • 更新時の CallBack 登録は InitListView(_list.Count, callback) • コンテンツの数が変わった時は SetListItemCount() • コンテンツを更新する時は RefreshAllShownItem()
39. スクロールビュー管理クラス作成 (PictureListViewController)
40. 完成！
41. 検証
42. 撮影したものが...
43. サーバから取得して確認出来た！
44. さいごに
45. ざっくりまとめ • 画像 URL を返す API サーバを用意 • UnityWebRequestTexture で画像を取得 • 画像は Image でなく RawImage で表示 • UGUI Super ScrollView を利用
46. Thank you for listening!