初めてのVR開発 - Speaker Deck

初めてのVR開発

by Kenichi Takahashi

Slide 1

Slide 1 text

ॳΊͯͷVR։ൃ 2017/5/28 ABC2017 Spring - ߴڮݑҰ

Slide 2

Slide 2 text

ߴڮݑҰ (@ken1_taka) • Android, iOS, 3DάϥϑΟΫε • ܞଳ޲͚3DάϥϑΟΫεΤϯδϯ΍ɺੲ͋ͬͨ๭AR ΞϓϦͷ։ൃʹܞΘΔ • גࣜձࣾΧϒΫ ιϑτ΢ΣΞΤϯδχΞ • 3DϓϦϯλΛ׆༻ͨ͠΋ͷͮ͘ΓϓϥοτϑΥʔϜ

Slide 3

Slide 3 text

2016೥8݄25೔ൃച

Slide 4

Slide 4 text

͜ͷϝϯόʔͰ຋༁͠·ͨ͠ ߐ઒ਸ ҆౻ ޾ԝ ͋ΜͲ͏΍͢͠ ߴڮݑҰ adamrocker ϨϏϡΞʔ

Slide 5

Slide 5 text

ઌ೔ɺୈ2࡮͕ൃߦ͞Ε·ͨ͠ʂ ʢத਎͸ॳ൛ʴਖ਼ޡදͷ಺༰Λ൓өʣ

Slide 6

Slide 6 text

جຊతʹ͸͜Ε͔ΒVR։ൃΛ ࢝ΊΔͱ͍͏ਓ޲͚ 1ষ ͢΂ͯͷਓʹόʔνϟϧͳ͢΂ͯͷ΋ͷ Λ 2ষ ΦϒδΣΫτͱεέʔϧ 3ষ VRͷϏϧυͱ࣮ߦ 4ষ ஫ࢹ఺ϕʔεͷίϯτϩʔϧ 5ষ ϫʔϧυۭؒͷUI 6ষ ҰਓশͷΩϟϥΫλʔ 7ষ ෺ཧͱ؀ڥ 8ষ ΢ΥʔΫεϧʔͱϨϯμϦϯά 9ষ 360౓શํҐͷ׆༻ 10ষ VRۭؒͰͷࣾձੑ 11ষ ࣍ʹԿ͕ى͜Δͷ͔ ෇࿥A GearVR༻ͷϏϧυͱλονύου͔Β ͷೖྗ ෇࿥B DaydreamίϯτϩʔϥʔΛ࢖ͬͯΈΔ

Slide 7

Slide 7 text

ͦͯ͠VRͱ͍͏ΑΓࣥචܥͷ ࿩Ͱ͸͋Γ·͕͢…

Slide 8

Slide 8 text

ࡢ೥ɺ DTPલͷߍਖ਼Λ࢓্͛ͨே… • Google VR SDK for Untiy͕ 0.8.5ʹΞοϓσʔτ • ಥવLegacyͱ͍͏ϑΥϧμ ͕ݱΕ… • GvrMain͸deprectedʹ(;_;) • ୅ΘΓʹGvrViewerMainΛ࢖ ͑ͱ…

Slide 9

Slide 9 text

Կͱ͔मਖ਼ΛೖΕͯࣄͳ͖Λಘ·ͨ͠ ΦϥΠϦʔɾδϟύϯͷٶ઒͞Μͷ͓͔͛Ͱ͢ɻ

Slide 10

Slide 10 text

–Jonathan Linowes “How does one write a book that does not have obsolete content the day it's published?” ʮൃച೔ʹݹ͘ͳͬͨ಺༰ͷͳ͍ຊͳͲ͔͚Δ ͷͩΖ͏͔…ʯ

Slide 11

Slide 11 text

ͦͯ͠ࠓ೥… ୈ2࡮ͷमਖ਼Λऴ͑ͨޙʹ Google VR SDK for Unity v1.50͕ϦϦʔε

Slide 12

Slide 12 text

GvrViewerMain will be replaced by GvrEditorEmulator.

Slide 13

Slide 13 text

GvrViewerMain Λ GvrEditorEmulator ʹஔ͖׵͔͑ͨΒͦͬͪΛ࢖ͬͯͶ

Slide 14

Slide 14 text

͗Όʔ

Slide 15

Slide 15 text

ݴ͍͍ͨ͜ͱ͸… • ͜͏͍͏͜ͱ͸Α͋͘Δ • ಛʹGoogle VR SDKͰ͸… • SDKͷߋ৽ͷνΣοΫΛଵΒͳ͍ • ୯ʹ໊લ͕มΘΔΑ͏ͳ͜ͱͰ͸ͳ͘ɺΑΓศརͩͬ ͨΓɺߴػೳͳ΋ͷ͕௥Ճ͞Ε͍ͯͨΓ͢Δ͜ͱ΋͋ Δ

Slide 16

Slide 16 text

GvrEditorEmulator • Unity͕CardboardͱDaydreamʹωΠςΟϒରԠͨ͠ ࠓͱͳͬͯ͸ଥ౰ͳ໊લ • UnityͷEditorͰVR༻දࣔͷΤϛϡϨʔγϣϯΛ͢ ΔͨΊͷ΋ͷ • Ҏલ͸Google VR SDK͕༻ҙͨ͠GvrViewerMain͕ ແ͍ͱVRͷཱମࢹද͕ࣔͰ͖ͳ͔ͬͨ

Slide 17

Slide 17 text

લஔ͖͕௕͘ͳΓ·ͨ͠ m(_ _)m

Slide 18

Slide 18 text

ࠓ೔ͷ͓࿩ • VRͷۙگ • VR։ൃͰॏཁͳཁૉ • 3DάϥϑΟΫεΛ࢖͏Ξϓϩʔν • UnityͰ։ൃ • ύϊϥϚը૾΍ಈըΛ࢖͏Ξϓϩʔν • VRViewͰΞϓϦʹ૊ΈࠐΉ

Slide 19

Slide 19 text

VRͷۙگ

Slide 20

Slide 20 text

VRϓϥοτϑΥʔϜ Oculus Rift, HTC Vive, PSVR౳ͷਾஔ͖ܕ Cardboard, ϋίεί, Daydream, Gear VR౳ͷϞόΠϧܕ

Slide 21

Slide 21 text

ਾஔ͖ܕ • ߴੑೳPCͱ઀ଓͯ͠ߴ͍ΫΦϦςΟͷඳը • ϙδγϣϯτϥοΩϯάʢ6DoFʣ • ϙδγϣϯऔಘՄೳͳίϯτϩʔϥʔʢ྆खʣ • ηοτΞοϓ͕େม • අ༻΋ͦΕͳΓʹ

Slide 22

Slide 22 text

ϞόΠϧܕ • εϚʔτϑΥϯͱ૊߹ͤΔHMD • ඳըੑೳ͸εϚʔτϑΥϯ࣍ୈ • खܰ • ҆Ձ • ϙδγϣϯτϥοΩϯά͕ແ͍ʢ3DoFʣ • ίϯτϩʔϥʔ͕ແ͍ • Cardboard͸ԡ͠Ϙλϯ̍ͭ

Slide 23

Slide 23 text

6DoF • 6 Degrees of Freedomͷུ • ্ԼɺࠨӈɺલޙͷҠಈ • ϩʔϧɺϐονɺϤʔͷ ̏࣠Ͱͷճస • ̏࣠ͷճసͷΈͷ৔߹ Λ3DoFͱ͍͏ https://ja.wikipedia.org/wiki/6DoF

Slide 24

Slide 24 text

ϞόΠϧܕͷܽ఺ͷվળ܏޲ • Daydream΍Gear VR • 3DoFͰยख༻ͷΈͳ͕Βίϯτϩʔϥ͕͋Δ • ੑೳ΋ߴ͘ͳ͖͍ͬͯͯΔʢϨΠςϯγ 20msʣ • 2017೥຤ʹ͸DaydreamͰεϚʔτϑΥϯແ͠Ͱ୯ମͰಈ ࡞ɺ׌ͭϙδγϣϯτϥοΩϯά(6DoF)ػೳ͕͋ΔHMD ͕ొ৔༧ఆ

Slide 25

Slide 25 text

ࠓ೔͸ɺखܰʹࢼͤΔ ϓϥοτϑΥʔϜͱͯ͠ͷ ϞόΠϧܕVRͷ࿩

Slide 26

Slide 26 text

VR։ൃͰॏཁͳཁૉ • 3DάϥϑΟΫε • ύϊϥϚը૾ɺಈը • εΫϦʔϯ෼ׂʹΑΔཱମࢹ

Slide 27

Slide 27 text

3DάϥϑΟΫε • VRۭؒΛ࡞੒͢Δͷ͸ശఉΛ࡞੒͢ΔΑ͏ͳ΋ͷ

Slide 28

Slide 28 text

ύϊϥϚը૾ɺಈը • 360°શपΛࡱӨͨ͠1ຕʹͨ͠΋ͷΛٿ΍ശ ͷ಺ଆʹషΓ෇͚Δɻ • ਫ਼ີͳ3DάϥϑΟΫεΛඳը͠ͳͯ͘΋຅ ೖײ͕ಘΒΕΔ

Slide 29

Slide 29 text

εΫϦʔϯ෼ׂʹΑΔཱମࢹ • ࠨɺӈͰಏ޸ؒڑ཭ͷ෼ͣΒͯ͠ࢹࠩޮՌΛੜΈग़͢ • ϔουηοτͷϨϯζ࿪Έิਖ਼ • ήʔϜΤϯδϯ΍VR SDK͕΍ͬͯ͘ΕΔ

Slide 30

Slide 30 text

3DάϥϑΟΫεΛ࢖͏ Ξϓϩʔν

Slide 31

Slide 31 text

3DάϥϑΟΫεΛ׆༻ͨ͠ ։ൃͷखஈ • ήʔϜΤϯδϯΛ࢖͏ • Unity, Unreal Engine • ήʔϜΤϯδϯΛ࢖Θͳ͍ • Java, C++ ʢՃ͑ͯOpenGL౳ͷ3D CG APIΛ࢖͏ʣ • Web • WebVR

Slide 32

Slide 32 text

UnityΛ࢖͏ͱ3DΦϒδΣΫτ Λ഑ஔͯ͠ശఉ͸؆୯ʹ࡞ΕΔ

Slide 33

Slide 33 text

ശఉΛ೷͚ͩ͘ͳΒ Ϗϧυ͢Δ͚ͩ • Virtual Reality Supportedʹ νΣοΫΛೖΕΔ • Virtual Reality SDKsʹ CardboardΛ௥Ճ͢Δ • ύέʔδ໊ɺMinimum API Level౳AndroidΞϓϦ ͷઃఆΛߦ͏

Slide 34

Slide 34 text

[Build And Run]Ͱ ୺຤ʹసૹ࣮ͯ͠ߦ

Slide 35

Slide 35 text

ͨͩோΊΔ͚ͩͰ͸ ͭ·Βͳ͍ͷͰ…

Slide 36

Slide 36 text

VRۭؒͷதʹ࡞༻͢Δʹ͸ • εΫϦϓςΟϯάͱଟগ ͷ਺ֶͱ෺ཧ͕ඞཁ • ஫ࢹ͍ͯ͠Δ΋ͷʹӨ ڹΛٴ΅͢ࡍ • ճసҎ֎ͷΧϝϥͷಈ ͖Λ͢Δࡍ

Slide 37

Slide 37 text

஫ࢹ͍ͯ͠Δ΋ͷʹӨڹΛٴ΅͢ ʢݟΔํ޲ʹϨΠΛඈ͹ͯ͠িಥ൑ఆʣ Χϝϥ(HMD) ϨΠ ݟ͍͑ͯΔө૾

Slide 38

Slide 38 text

ϨΠͷিಥ൑ఆͷεΫϦϓτ • 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)) {  // ౰ͨͬͨ࣌ͷॲཧ  }

Slide 39

Slide 39 text

஫ࢹ఺ͷԠ༻ • Ұఆ࣌ؒ஫ࢹ͢Δͱ൓Ԡ͢ΔϘ λϯ • ౰ͨͬͨ࣌ͷॲཧͰ࣌ؒΛΧ ΢ϯτμ΢ϯ • ઃఆ͕ͨ࣌ؒ͠ܦͬͨΒॲཧ Λىಈ • ֎෦ίϯτϩʔϥ΍Ϙλϯͷ༗ ແͳͲɺϓϥοτϑΥʔϜʹґ ଘ͠ͳ͍ϘλϯͱͳΔ

Slide 40

Slide 40 text

ճసҎ֎ͷΧϝϥͷಈ͖ͷྫ • ԁபͷதͰ • ্ํ޲ΛݟΔͱ্ঢ • Լํ޲ΛݟΔͱԼ߱

Slide 41

Slide 41 text

্ԼҠಈͷεΫϦϓτ 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࣠ʢ্Լํ޲ʣͷҠಈڑ཭

Slide 42

Slide 42 text

ࢀߟࢿྉ • ABC2016 AutumnͰͷVRϋϯζΦϯࢿྉ • https://goo.gl/5J508U • ABC2017 SpringͰͷVRϋϯζΦϯࢿྉͱ׬੒ ൛ϓϩδΣΫτ • https://github.com/ktaka/VR_Infographics

Slide 43

Slide 43 text

ύϊϥϚը૾΍ಈըΛ࢖͏ Ξϓϩʔν

Slide 44

Slide 44 text

VRView • AndroidͷViewͷҰͭͱͯ͠ ػೳ͢Δ • CardboardΞΠίϯΛԡ͢ͱ VRϞʔυʹͳΔ https://developers.google.com/vr/android/samples/vrview

Slide 45

Slide 45 text

GitHubʹαϯϓϧ͕͋Γ·͢ https://github.com/googlevr/gvr-android-sdk/tree/master/samples

Slide 46

Slide 46 text

͜͜Ͱ͸ඞཁ࠷খݶͷखॱΛ ௥ͬͯΈ·͢ɻ

Slide 47

Slide 47 text

VRViewΛ૊ΈࠐΉखॱ 1. build.gradleʹඞཁͳdependencesΛ௥Ճ 2. ϨΠΞ΢τʹ VrPanoramaView Λ௥Ճ 3. assetsͱͯ͠ύϊϥϚը૾ϑΝΠϧΛ௥Ճ 4. javaͷίʔυΛগʑ A. assetsͷը૾ϑΝΠϧͷಡΈࠐΜͰBitmapԽ B. VrPanoramaViewʹBitmapΛϩʔυ

Slide 48

Slide 48 text

1. build.gradleʹඞཁͳdependencesΛ௥Ճ • VrPanoramaViewΛ࢖͏ͨΊʹඞཁͳ΋ͷΛ௥Ճ͢Δ dependencies {  compile 'com.google.vr:sdk-panowidget:1.60.0'  }

Slide 49

Slide 49 text

2. ϨΠΞ΢τʹ VrPanoramaView Λ௥Ճ

Slide 50

Slide 50 text

3. assetsͱͯ͠ύϊϥϚը૾ϑΝΠϧΛ௥Ճ • ύϊϥϚը૾ϑΝΠϧΛ༻ҙ͢Δ • RICHO THETA΍ΞϓϦʮCardboard Χϝϥʯ౳ͰࡱӨͨ͠ը૾ • ը૾ΛassetsϑΥϧμʢແ͚Ε͹࡞੒ʣʹ௥Ճ͢Δ

Slide 51

Slide 51 text

4. javaͷίʔυΛগʑʢͦͷ̍ʣ • assetsͷը૾ϑΝΠϧΛಡΈࠐΉ • BitmapԽ͢Δ InputStream istr = assetManager.open("panorama.vr.jpg");  Bitmap bmp = BitmapFactory.decodeStream(istr); 

Slide 52

Slide 52 text

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);

Slide 53

Slide 53 text

Android Studioͷը໘Ͱ ௥ͬͯΈ·͠ΐ͏

Slide 54

Slide 54 text

build.gradle

Slide 55

Slide 55 text

activity_main.xml

Slide 56

Slide 56 text

MainActivity.java

Slide 57

Slide 57 text

VRViewͷͦͷଞͷಛ௃ • ෳ਺ͷ؀ڥ޲͚ʹ༻ҙ͞Ε͍ͯΔ • Android • iOS • Web