初めてのVR開発

ABC2017 SpringのBeginnerトラックのセッション。スマートフォン用のVRアプリ開発を始めてみたい、または興味を持っているという方に何からどう始めれば良いのか解説します。Unityで3Dグラフィクスを使用する方法だけでなく、Google VR SDKのVR Viewと写真や動画を使って簡単に自分のアプリにVRの要素を追加する方法も紹介しています。

Transcript

1. ॳΊͯͷVR։ൃ 2017/5/28 ABC2017 Spring - ߴڮݑҰ
2. ߴڮݑҰ (@ken1_taka) • Android, iOS, 3DάϥϑΟΫε • ܞଳ޲͚3DάϥϑΟΫεΤϯδϯ΍ɺੲ͋ͬͨ๭AR ΞϓϦͷ։ൃʹܞΘΔ • גࣜձࣾΧϒΫ ιϑτ΢ΣΞΤϯδχΞ • 3DϓϦϯλΛ׆༻ͨ͠΋ͷͮ͘ΓϓϥοτϑΥʔϜ
3. 2016೥8݄25೔ൃച
4. ͜ͷϝϯόʔͰ຋༁͠·ͨ͠ ߐ઒ਸ ҆౻ ޾ԝ ͋ΜͲ͏΍͢͠ ߴڮݑҰ adamrocker ϨϏϡΞʔ
5. ઌ೔ɺୈ2࡮͕ൃߦ͞Ε·ͨ͠ʂ ʢத਎͸ॳ൛ʴਖ਼ޡදͷ಺༰Λ൓өʣ
6. جຊతʹ͸͜Ε͔ΒVR։ൃΛ ࢝ΊΔͱ͍͏ਓ޲͚ 1ষ ͢΂ͯͷਓʹόʔνϟϧͳ͢΂ͯͷ΋ͷ Λ 2ষ ΦϒδΣΫτͱεέʔϧ 3ষ VRͷϏϧυͱ࣮ߦ 4ষ ஫ࢹ఺ϕʔεͷίϯτϩʔϧ 5ষ ϫʔϧυۭؒͷUI 6ষ ҰਓশͷΩϟϥΫλʔ 7ষ ෺ཧͱ؀ڥ 8ষ ΢ΥʔΫεϧʔͱϨϯμϦϯά 9ষ 360౓શํҐͷ׆༻ 10ষ VRۭؒͰͷࣾձੑ 11ষ ࣍ʹԿ͕ى͜Δͷ͔ ෇࿥A GearVR༻ͷϏϧυͱλονύου͔Β ͷೖྗ ෇࿥B DaydreamίϯτϩʔϥʔΛ࢖ͬͯΈΔ
7. ͦͯ͠VRͱ͍͏ΑΓࣥචܥͷ ࿩Ͱ͸͋Γ·͕͢…
8. ࡢ೥ɺ DTPલͷߍਖ਼Λ࢓্͛ͨே… • Google VR SDK for Untiy͕ 0.8.5ʹΞοϓσʔτ • ಥવLegacyͱ͍͏ϑΥϧμ ͕ݱΕ… • GvrMain͸deprectedʹ(;_;) • ୅ΘΓʹGvrViewerMainΛ࢖ ͑ͱ…
9. Կͱ͔मਖ਼ΛೖΕͯࣄͳ͖Λಘ·ͨ͠ ΦϥΠϦʔɾδϟύϯͷٶ઒͞Μͷ͓͔͛Ͱ͢ɻ
10. –Jonathan Linowes “How does one write a book that does not have obsolete content the day it's published?” ʮൃച೔ʹݹ͘ͳͬͨ಺༰ͷͳ͍ຊͳͲ͔͚Δ ͷͩΖ͏͔…ʯ
11. ͦͯ͠ࠓ೥… ୈ2࡮ͷमਖ਼Λऴ͑ͨޙʹ Google VR SDK for Unity v1.50͕ϦϦʔε
12. GvrViewerMain will be replaced by GvrEditorEmulator.
13. GvrViewerMain Λ GvrEditorEmulator ʹஔ͖׵͔͑ͨΒͦͬͪΛ࢖ͬͯͶ
14. ͗Όʔ
15. ݴ͍͍ͨ͜ͱ͸… • ͜͏͍͏͜ͱ͸Α͋͘Δ • ಛʹGoogle VR SDKͰ͸… • SDKͷߋ৽ͷνΣοΫΛଵΒͳ͍ • ୯ʹ໊લ͕มΘΔΑ͏ͳ͜ͱͰ͸ͳ͘ɺΑΓศརͩͬ ͨΓɺߴػೳͳ΋ͷ͕௥Ճ͞Ε͍ͯͨΓ͢Δ͜ͱ΋͋ Δ
16. GvrEditorEmulator • Unity͕CardboardͱDaydreamʹωΠςΟϒରԠͨ͠ ࠓͱͳͬͯ͸ଥ౰ͳ໊લ • UnityͷEditorͰVR༻දࣔͷΤϛϡϨʔγϣϯΛ͢ ΔͨΊͷ΋ͷ • Ҏલ͸Google VR SDK͕༻ҙͨ͠GvrViewerMain͕ ແ͍ͱVRͷཱମࢹද͕ࣔͰ͖ͳ͔ͬͨ
17. લஔ͖͕௕͘ͳΓ·ͨ͠ m(_ _)m
18. ࠓ೔ͷ͓࿩ • VRͷۙگ • VR։ൃͰॏཁͳཁૉ • 3DάϥϑΟΫεΛ࢖͏Ξϓϩʔν • UnityͰ։ൃ • ύϊϥϚը૾΍ಈըΛ࢖͏Ξϓϩʔν • VRViewͰΞϓϦʹ૊ΈࠐΉ
19. VRͷۙگ
20. VRϓϥοτϑΥʔϜ Oculus Rift, HTC Vive, PSVR౳ͷਾஔ͖ܕ Cardboard, ϋίεί, Daydream, Gear VR౳ͷϞόΠϧܕ
21. ਾஔ͖ܕ • ߴੑೳPCͱ઀ଓͯ͠ߴ͍ΫΦϦςΟͷඳը • ϙδγϣϯτϥοΩϯάʢ6DoFʣ • ϙδγϣϯऔಘՄೳͳίϯτϩʔϥʔʢ྆खʣ • ηοτΞοϓ͕େม • අ༻΋ͦΕͳΓʹ
22. ϞόΠϧܕ • εϚʔτϑΥϯͱ૊߹ͤΔHMD • ඳըੑೳ͸εϚʔτϑΥϯ࣍ୈ • खܰ • ҆Ձ • ϙδγϣϯτϥοΩϯά͕ແ͍ʢ3DoFʣ • ίϯτϩʔϥʔ͕ແ͍ • Cardboard͸ԡ͠Ϙλϯ̍ͭ
23. 6DoF • 6 Degrees of Freedomͷུ • ্ԼɺࠨӈɺલޙͷҠಈ • ϩʔϧɺϐονɺϤʔͷ ̏࣠Ͱͷճస • ̏࣠ͷճసͷΈͷ৔߹ Λ3DoFͱ͍͏ https://ja.wikipedia.org/wiki/6DoF
24. ϞόΠϧܕͷܽ఺ͷվળ܏޲ • Daydream΍Gear VR • 3DoFͰยख༻ͷΈͳ͕Βίϯτϩʔϥ͕͋Δ • ੑೳ΋ߴ͘ͳ͖͍ͬͯͯΔʢϨΠςϯγ 20msʣ • 2017೥຤ʹ͸DaydreamͰεϚʔτϑΥϯແ͠Ͱ୯ମͰಈ ࡞ɺ׌ͭϙδγϣϯτϥοΩϯά(6DoF)ػೳ͕͋ΔHMD ͕ొ৔༧ఆ
25. ࠓ೔͸ɺखܰʹࢼͤΔ ϓϥοτϑΥʔϜͱͯ͠ͷ ϞόΠϧܕVRͷ࿩
26. VR։ൃͰॏཁͳཁૉ • 3DάϥϑΟΫε • ύϊϥϚը૾ɺಈը • εΫϦʔϯ෼ׂʹΑΔཱମࢹ
27. 3DάϥϑΟΫε • VRۭؒΛ࡞੒͢Δͷ͸ശఉΛ࡞੒͢ΔΑ͏ͳ΋ͷ
28. ύϊϥϚը૾ɺಈը • 360°શपΛࡱӨͨ͠1ຕʹͨ͠΋ͷΛٿ΍ശ ͷ಺ଆʹషΓ෇͚Δɻ • ਫ਼ີͳ3DάϥϑΟΫεΛඳը͠ͳͯ͘΋຅ ೖײ͕ಘΒΕΔ
29. εΫϦʔϯ෼ׂʹΑΔཱମࢹ • ࠨɺӈͰಏ޸ؒڑ཭ͷ෼ͣΒͯ͠ࢹࠩޮՌΛੜΈग़͢ • ϔουηοτͷϨϯζ࿪Έิਖ਼ • ήʔϜΤϯδϯ΍VR SDK͕΍ͬͯ͘ΕΔ
30. 3DάϥϑΟΫεΛ࢖͏ Ξϓϩʔν
31. 3DάϥϑΟΫεΛ׆༻ͨ͠ ։ൃͷखஈ • ήʔϜΤϯδϯΛ࢖͏ • Unity, Unreal Engine • ήʔϜΤϯδϯΛ࢖Θͳ͍ • Java, C++ ʢՃ͑ͯOpenGL౳ͷ3D CG APIΛ࢖͏ʣ • Web • WebVR
32. UnityΛ࢖͏ͱ3DΦϒδΣΫτ Λ഑ஔͯ͠ശఉ͸؆୯ʹ࡞ΕΔ
33. ശఉΛ೷͚ͩ͘ͳΒ Ϗϧυ͢Δ͚ͩ • Virtual Reality Supportedʹ νΣοΫΛೖΕΔ • Virtual Reality SDKsʹ CardboardΛ௥Ճ͢Δ • ύέʔδ໊ɺMinimum API Level౳AndroidΞϓϦ ͷઃఆΛߦ͏
34. [Build And Run]Ͱ ୺຤ʹసૹ࣮ͯ͠ߦ
35. ͨͩோΊΔ͚ͩͰ͸ ͭ·Βͳ͍ͷͰ…
36. VRۭؒͷதʹ࡞༻͢Δʹ͸ • εΫϦϓςΟϯάͱଟগ ͷ਺ֶͱ෺ཧ͕ඞཁ • ஫ࢹ͍ͯ͠Δ΋ͷʹӨ ڹΛٴ΅͢ࡍ • ճసҎ֎ͷΧϝϥͷಈ ͖Λ͢Δࡍ
37. ஫ࢹ͍ͯ͠Δ΋ͷʹӨڹΛٴ΅͢ ʢݟΔํ޲ʹϨΠΛඈ͹ͯ͠িಥ൑ఆʣ Χϝϥ(HMD) ϨΠ ݟ͍͑ͯΔө૾
38. ϨΠͷিಥ൑ఆͷεΫϦϓτ • Camera.main.transform.forward … ݟ͍ͯΔํ޲ͷϕΫτϧ • Ray(camera.position, Camera.main.transform.forward) … ΧϝϥͷҐஔ͔Βݟ͍ͯΔํ޲ ΁৳͹͢ϨΠ • Physics.Raycast(ray, out hit) … ϨΠͱଞͷΦϒδΣΫτͱͷিಥ൑ఆΛߦ͏ɻhitʹ͸౰ ͨͬͨΦϒδΣΫτ΍ͦͷҐஔ͕ೖΔɻ Ray ray = new Ray (camera.position, Camera.main.transform.forward);
 RaycastHit hit;
 if (Physics.Raycast (ray, out hit) && (hit.collider.gameObject == gameObject)) {
 // ౰ͨͬͨ࣌ͷॲཧ
 }
39. ஫ࢹ఺ͷԠ༻ • Ұఆ࣌ؒ஫ࢹ͢Δͱ൓Ԡ͢ΔϘ λϯ • ౰ͨͬͨ࣌ͷॲཧͰ࣌ؒΛΧ ΢ϯτμ΢ϯ • ઃఆ͕ͨ࣌ؒ͠ܦͬͨΒॲཧ Λىಈ • ֎෦ίϯτϩʔϥ΍Ϙλϯͷ༗ ແͳͲɺϓϥοτϑΥʔϜʹґ ଘ͠ͳ͍ϘλϯͱͳΔ
40. ճసҎ֎ͷΧϝϥͷಈ͖ͷྫ • ԁபͷதͰ • ্ํ޲ΛݟΔͱ্ঢ • Լํ޲ΛݟΔͱԼ߱
41. ্ԼҠಈͷεΫϦϓτ float moveY = Camera.main.transform.forward.y * velocity * Time.deltaTime;
 float newY = transform.position.y + moveY;
 transform.position = new Vector3 (transform.position.x, newY, transform.position.z);
 • Camera.main.transform.forwad.y … ݟ͍ͯΔํ޲ͷϕΫτϧͷY࣠੒෼ʢਫฏͰ0ʣ • velocity … ઃఆͨ͠଎౓ • Time.deltaTime … લϑϨʔϜ͔Βͷܦա࣌ؒ • Y࣠੒෼ x ଎౓ x ܦա࣌ؒ ʹ Y࣠ʢ্Լํ޲ʣͷҠಈڑ཭
42. ࢀߟࢿྉ • ABC2016 AutumnͰͷVRϋϯζΦϯࢿྉ • https://goo.gl/5J508U • ABC2017 SpringͰͷVRϋϯζΦϯࢿྉͱ׬੒ ൛ϓϩδΣΫτ • https://github.com/ktaka/VR_Infographics
43. ύϊϥϚը૾΍ಈըΛ࢖͏ Ξϓϩʔν
44. VRView • AndroidͷViewͷҰͭͱͯ͠ ػೳ͢Δ • CardboardΞΠίϯΛԡ͢ͱ VRϞʔυʹͳΔ https://developers.google.com/vr/android/samples/vrview
45. GitHubʹαϯϓϧ͕͋Γ·͢ https://github.com/googlevr/gvr-android-sdk/tree/master/samples
46. ͜͜Ͱ͸ඞཁ࠷খݶͷखॱΛ ௥ͬͯΈ·͢ɻ
47. VRViewΛ૊ΈࠐΉखॱ 1. build.gradleʹඞཁͳdependencesΛ௥Ճ 2. ϨΠΞ΢τʹ VrPanoramaView Λ௥Ճ 3. assetsͱͯ͠ύϊϥϚը૾ϑΝΠϧΛ௥Ճ 4. javaͷίʔυΛগʑ A. assetsͷը૾ϑΝΠϧͷಡΈࠐΜͰBitmapԽ B. VrPanoramaViewʹBitmapΛϩʔυ
48. 1. build.gradleʹඞཁͳdependencesΛ௥Ճ • VrPanoramaViewΛ࢖͏ͨΊʹඞཁͳ΋ͷΛ௥Ճ͢Δ dependencies {
 compile 'com.google.vr:sdk-panowidget:1.60.0'
 }
49. 2. ϨΠΞ΢τʹ VrPanoramaView Λ௥Ճ <com.google.vr.sdk.widgets.pano.VrPanoramaView
 android:id="@+id/pano_view"
 android:layout_width="367dp"
 android:scrollbars="@null"
 android:layout_height="237dp"
 tools:layout_editor_absoluteY="0dp"
 tools:layout_editor_absoluteX="8dp" />
50. 3. assetsͱͯ͠ύϊϥϚը૾ϑΝΠϧΛ௥Ճ • ύϊϥϚը૾ϑΝΠϧΛ༻ҙ͢Δ • RICHO THETA΍ΞϓϦʮCardboard Χϝϥʯ౳ͰࡱӨͨ͠ը૾ • ը૾ΛassetsϑΥϧμʢແ͚Ε͹࡞੒ʣʹ௥Ճ͢Δ
51. 4. javaͷίʔυΛগʑʢͦͷ̍ʣ • assetsͷը૾ϑΝΠϧΛಡΈࠐΉ • BitmapԽ͢Δ InputStream istr = assetManager.open("panorama.vr.jpg");
 Bitmap bmp = BitmapFactory.decodeStream(istr);

52. 4. javaͷίʔυΛগʑʢͦͷ̎ʣ • VrPanoramaView.OptionsΛઃఆ • MONO or STEREO • VrPanoramaViewʹBitmapΛϩʔυ VrPanoramaView.Options panoOptions = new VrPanoramaView.Options();
 panoOptions.inputType = VrPanoramaView.Options.TYPE_MONO;
 VrPanoramaView vrView = (VrPanoramaView)findViewById(R.id.pano_view); vrView.loadImageFromBitmap(bmp, panoOptions);
53. Android Studioͷը໘Ͱ ௥ͬͯΈ·͠ΐ͏
54. build.gradle
55. activity_main.xml
56. MainActivity.java
57. VRViewͷͦͷଞͷಛ௃ • ෳ਺ͷ؀ڥ޲͚ʹ༻ҙ͞Ε͍ͯΔ • Android • iOS • Web
58. PCͱεϚʔτϑΥϯɺͦͯ͠ Cardboard͕͋Ε͹ ։ൃΛ࢝ΊΒΕ·͢
59. օ͞Μ΋ͥͻ ࢝ΊͯΈ͍ͯͩ͘͞ʂ