Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web世界で君の3Dモデルに生を吹き込む方法

 Web世界で君の3Dモデルに生を吹き込む方法

VRoid Hub ( https://hub.vroid.com ) 上で、ユーザからアップロードされたキャラクターがWeb上で生き生きと動き出すまでに、どのような技術的チャレンジがあったかを話します。

Unityをはじめとしたネイティブのグラフィクス環境とWebGLとの差異を例に挙げ、3Dキャラクターの共通フォーマットが今後様々な場面で活用されるための、現状の3Dキャラクターフォーマットの課題を紹介できればと思います。

---

FMS_Cat (OBUCHI Yutaka)
pixiv TECH SALON
2019.3.5

https://techsalon.pixiv.co.jp/

Yutaka Obuchi

March 05, 2019
Tweet

More Decks by Yutaka Obuchi

Other Decks in Technology

Transcript

  1. WebੈքͰ܅ͷ3DϞσϧʹ ੜΛਧ͖ࠐΉํ๏  pixiv.inc FMS_Cat

  2. Ϣʔβ͕Ξοϓϩʔυͨ͠3DϞσϧ͕ ϒϥ΢β্Ͱੜ͖ੜ͖ͱಈ͖ग़͢·Ͱͷ ٕज़తνϟϨϯδΛ࿩͠·͢ Outline ಛʹϚςϦΞϧʹ͍ͭͯ࿩͠·͢

  3. • എܠ ‣ VRoid HubͰ΍Δ΂͖ͩͬͨ͜ͱ ‣ VRMʢ3DϞσϧϑΥʔϚοτʣͷݱঢ় • ࣮૷ ‣

    VRM͕WebͰಈ͖ग़͢·ͰʢϚςϦΞϧʣ • VRM͕͋ΒΏΔ؀ڥͰ׆༂͢ΔͨΊʹ Outline
  4. FMS_Cat (OBUCHI Yutaka) 3DCGΤϯδχΞ - 2018೥11݄ೖࣾ ۀ຿ɾझຯͰWebGLΛ৮͍ͬͯ·͢ ࣗݾ঺հ

  5. ΠϥετϨʔλΛ͸͡Ί୭΋͕ ΦϦδφϧͷ3DΩϟϥΫλʔΛ࡞ΕΔΑ͏ʹͳͬͨ എܠ

  6. ΩϟϥΫλʔ͕ੜ·Εͨͱ͜ΖͰ ͦΕΛڞ༗͢ΔͨΊͷ࢓૊Έ͕·ͩͳ͔ͬͨ എܠ Author Consumer

  7. എܠ Author ౤ߘ ήʔϜ ഑৴ϓϥοτϑΥʔϜ ϝλόʔε ར༻ User 3DΩϟϥΫλʔͷ ϋϒγεςϜΛ࡞Γ͍ͨʂ

  8. എܠ Hub্ͰΩϟϥΫλʔΛ ͍͔ʹັྗతʹදࣔͰ͖Δ͔ʁ

  9. എܠ ۙ೥ɺWebGLٕज़͸෼໺Λ໰Θͣ ༷ʑͳ৔໘Ͱ׆༻͞Ε͍ͯΔ https://theta360.com http://taotajima.jp/ http://www.adultswim.com

  10. ಈ͔͔͢͠ͳ͍

  11. എܠ ໨ඪ: 3DΩϟϥΫλʔڞ༗ϖʔδΛӾཡ͢Δࡍʹ ΩϟϥΛ͔Θ͍͔ͬ͘͜Α͘ಈ͔͍ͨ͠ ͕͜͜ϦΞϧλΠϜͰ ΠϯλϥΫςΟϒ

  12. എܠ

  13. എܠ - ٕज़എܠ VRoid Studio / VRoid HubͰ͸ݱࡏɺVRMͱݺ͹ΕΔ 3DΩϟϥΫλʔʹಛԽͨ͠ϑΥʔϚοτΛར༻͍ͯ͠Δ https://dwango.github.io/vrm/

  14. എܠ - ٕज़എܠ VRM͸glTFͱ͍͏൚༻3DϞσϧϑΥʔϚοτΛ ϕʔεͱͯ͠ఆٛ͞Ε͍ͯΔ https://github.com/KhronosGroup/glTF • JSONɾόΠφϦͷ2νϟϯΫͰߏ੒͞ΕΔʢglbʣ • ௖఺Ґஔɾ๏ઢͳͲʹΑΓఆٛ͞ΕΔϝογϡ

    • εΩχϯάɾϞʔϑλʔήοτ • ςΫενϟɾPBRϚςϦΞϧʢUnlit֦ுʣ
  15. എܠ - ٕज़എܠ VRM͸ώτܕʹڧ͍ʂ Humanoid ΠϯλϑΣʔε ද৘੍ޚͷͨΊͷ ϒϨϯυγΣΠϓ τΡʔϯ ϚςϦΞϧ

    ʢࡐ࣭ʣ Ұਓশࢹ఺༻ͷ ϑΟʔϧυ ༳Ε΋ͷ ϑΟʔϧυɾ࣮૷ ϝλ৘ใ ϥΠηϯεͳͲ
  16. എܠ - ٕज़എܠ https://github.com/dwango/UniVRM UnityʹΑΔඪ४࣮૷͕υϫϯΰʹΑΓఏڙ͞Ε͍ͯΔ͕ ݱ࣌఺ͰΦʔϓϯͳ࣮૷͸͜ΕҎ֎ʹଘࡏ͠ͳ͍

  17. ࣮૷ ࠓճ͸ϝϯςφϯεੑΛॏࢹ͠Three.jsΛ࠾༻ ͢ͰʹglTF࣮૷͸ଘࡏͨ͠ https://threejs.org/ https://threejs.org/examples/?q=gltf#webgl_loader_gltf

  18. ࣮૷ ϑϩϯτΤϯυνʔϜͱͷ࿈ܞ͓Αͼ ։ൃޮ཰޲্ͷҝTypeScriptΛ࠾༻

  19. Humanoid ΠϯλϑΣʔε ද৘੍ޚͷͨΊͷ ϒϨϯυγΣΠϓ τΡʔϯ ϚςϦΞϧ ʢࡐ࣭ʣ Ұਓশࢹ఺༻ͷ ϑΟʔϧυ ༳Ε΋ͷ

    ϑΟʔϧυɾ࣮૷ ϝλ৘ใ ϥΠηϯεͳͲ ࣮૷
  20. Humanoid ΠϯλϑΣʔε ද৘੍ޚͷͨΊͷ ϒϨϯυγΣΠϓ τΡʔϯ ϚςϦΞϧ ʢࡐ࣭ʣ Ұਓশࢹ఺༻ͷ ϑΟʔϧυ ༳Ε΋ͷ

    ϑΟʔϧυɾ࣮૷ ϝλ৘ใ ϥΠηϯεͳͲ ࣮૷
  21. ࣮૷ ͞ΒʹɺϞʔγϣϯͷ࣮૷ ݱ࣌఺ͰVRM޲͚ͷϞʔγϣϯϑΥʔϚοτ͕ଘࡏ͠ͳ͍ͨΊɺ ༗໊ιϑτ΢ΣΞ͔Βग़ྗ͞ΕΔϑΝΠϧΛಡΈࠐΈ VRM޲͚ʹม׵Λߦ͏

  22. ࣮૷ ࣮૷্ͷνϟϨϯδΛ঺հ ಛʹɺVRMΛಛ௃͚ͮΔτΡʔϯϚςϦΞϧ MToonͷ࣮૷ʹয఺Λ౰ͯ·͢

  23. MToonͷ֓ཁ ࣮૷ - ϚςϦΞϧ • VRM͕ඪ४Ͱαϙʔτ͢ΔτΡʔϯϚςϦΞϧ • ࠷௿ݶͰޮՌతͳϥΠςΟϯάදݱ ‣ ηϧௐɾΠϥετௐͳͲ෯޿͍τΡʔϯදݱ

    • MatCapʹΑΔٖࣅతͳεϖΩϡϥɾϦϜϥΠτදݱ • Ξ΢τϥΠϯʹΑΔઢը෩දݱ
  24. ࣮૷ - ϚςϦΞϧ UnlitʢϥΠςΟϯάͳ͠ʣ MToon

  25. ࣮૷ - ϚςϦΞϧ UnlitʢϥΠςΟϯάͳ͠ʣ MToon

  26. ࣮૷ - ϚςϦΞϧ UnlitʢϥΠςΟϯάͳ͠ʣ MToon

  27. ࣮૷ - ϚςϦΞϧ MToonͷ࢓༷͸ެ։͞Ε͍ͯͳ͍ͨΊ UnityʹΑΔඪ४࣮૷Λࢀߟʹ࡞ۀΛਐΊͨ https://github.com/Santarh/MToon

  28. ࣮૷ - ϚςϦΞϧ ϚςϦΞϧ࣮૷ on Three.js

  29. ࣮૷ - ϚςϦΞϧ Three.jsͰγΣʔμΛ࣮૷͢Δࡍ ShaderChunkͱ͍͏ʮγΣʔμͷஅยʯΛ༻͍Δ https://github.com/mrdoob/three.js/blob/master/src/
 renderers/shaders/ShaderLib/meshphong_frag.glsl.js https://github.com/mrdoob/three.js/blob/master/src/
 renderers/shaders/ShaderChunk/uv_pars_fragment.glsl.js

  30. ࣮૷ - ϚςϦΞϧ https://github.com/mrdoob/three.js/blob/master/src/
 renderers/shaders/ShaderLib/meshphong_frag.glsl.js

  31. ࣮૷ - ϚςϦΞϧ https://github.com/mrdoob/three.js/blob/master/src/
 renderers/shaders/ShaderLib/meshphong_frag.glsl.js #include ͕ల։͞ΕΔͱ τʔλϧ854ߦ + ϥϯλΠϜ࣌஫ೖ113ߦ

  32. ࣮૷ - ϚςϦΞϧ https://github.com/mrdoob/three.js/blob/master/src/
 renderers/shaders/ShaderLib/meshphong_frag.glsl.js MeshPhongMaterialϕʔεͰ࣮૷ ͜ͷ͏ͪɺMToonʹద༻Ͱ͖ΔՕॴ ʢ= Three.jsʹґଘ͢ΔՕॴʣͱ ಠ࣮ࣗ૷Λ͠ͳ͚Ε͹ͳΒͳ͍Օॴ͕

    ଘࡏͨ͠
  33. ࣮૷ - ϚςϦΞϧ ϥΠςΟϯάॲཧͷҰ෦

  34. ࣮૷ - ϚςϦΞϧ Ξ΢τϥΠϯͷ࣮૷ʹ࠷΋࣌ؒΛཁͨ͠

  35. ࣮૷ - ϚςϦΞϧ Outline͸ɺδΦϝτϦΛ๏ઢํ޲ʹ๲Β·ͤ ΧϦϯάΛཪฦ͠ʹ͢Δʢཪ͚ͩඳըʣ͜ͱͰ࣮ݱՄೳ

  36. ࣮૷ - ϚςϦΞϧ Unity͸1γΣʔμ಺Ͱ ෳ਺ύεΛఆٛՄೳ͕ͩɺ Three.jsͰ͸ෆՄೳ ʢ= 1γΣʔμ1ύεʣ ௨ৗͷγΣʔσΟϯά Ξ΢τϥΠϯ

  37. ࣮૷ - ϚςϦΞϧ Three.jsͰͲ͏΍ͬͯ Ξ΢τϥΠϯΛ࣮ݱ͢Δ͔ʁ

  38. ࣮૷ - ϚςϦΞϧ ϚϧνϚςϦΞϧͷ࢓૊ΈΛϋοΫͨ͠ https://threejs.org/docs/#api/en/core/BufferGeometry

  39. ࣮૷ - ϚςϦΞϧ mesh.geometry.groups mesh.materials ഽͷ෦෼ ্ணͷ෦෼ Լணͷ෦෼ ഽͷϚςϦΞϧ ্ணͷϚςϦΞϧ

    ԼணͷϚςϦΞϧ ഽͷ෦෼ ഽͷΞ΢τϥΠϯϚςϦΞϧ
  40. ࣮૷ - ϚςϦΞϧ

  41. ࣮૷ - ඳըॱ ͳΜ͔͓͔͍͠

  42. ࣮૷ - ඳըॱ

  43. ࣮૷ - ඳըॱ

  44. ࣮૷ - ඳըॱ ΦϒδΣΫτΛZιʔτͯ͠ Ԟ͔Βॱ൪ʹඳը͠Α͏

  45. ࣮૷ - ඳըॱ

  46. ࣮૷ - ඳըॱ

  47. ࣮૷ - ඳըॱ material.renderQueue

  48. ࣮૷ - ඳըॱ Three.js͸ϚςϦΞϧ୯ҐͰͷඳըॱ੍ޚ͕Ͱ͖ͳ͍

  49. ࣮૷ - ඳըॱ ඳըॱΛܾఆ͢Δ಺෦ؔ਺Λஔ͖׵͑ͨ

  50. ࣮૷ ׬੒

  51. VRM͕͋ΒΏΔ؀ڥͰ׆༂͢ΔͨΊʹ VRMͰ࡞ΒΕͨΩϟϥΫλʔ͕ ͍Ζ͍Ζͳ؀ڥͰ׆༂ͯ͠΄͍͠

  52. VRM͕͋ΒΏΔ؀ڥͰ׆༂͢ΔͨΊʹ VRMͷݱঢ়ͷ໰୊఺ •ந৅తͳ࢓༷͕ৄࡉʹެ։͞Ε͍ͯͳ͍ •࣮૷͕1͔ͭ͠ଘࡏ͠ͳ͍ʢUniVRMʣ •Khronos (glTFνʔϜ) ͱͷ࿈ܞ͕ෆे෼

  53. VRM͕͋ΒΏΔ؀ڥͰ׆༂͢ΔͨΊʹ ந৅తͳ࢓༷ͷެ։ https://github.com/KhronosGroup/glTF/tree/master/specification/2.0

  54. VRM͕͋ΒΏΔ؀ڥͰ׆༂͢ΔͨΊʹ ϐΫγϒגࣜձࣾ͸ VRMίϯιʔγΞϜઃཱ४උձʹࢀՃ͍ͯ͠·͢ https://vrm-c.github.io/

  55. Thanks!