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/

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!