20191120_ThreeJSTokyo - Speaker Deck

20191120_ThreeJSTokyo

by Yutaka Obuchi

Slide 1

Slide 1 text

pixiv Inc. OBUCHI Yutaka 2019.11.20

Slide 2

Slide 2 text

2 FMS_Catです

Slide 3

Slide 3 text

3 Yutaka “FMS_Cat” Obuchi 趣味 WebGLやさんです

Slide 4

Slide 4 text

OBUCHI Yutaka (FMS_Cat) ピクシブ株式会社でやってます Three.js Unity

Slide 5

Slide 5 text

OBUCHI Yutaka (FMS_Cat) さんとやってます

Slide 6

Slide 6 text

のはなし

Slide 7

Slide 7 text

VRMっていう3Dアバターフォーマットを Three.jsで使えるようにしました @pixiv/three-vrm

Slide 8

Slide 8 text

VRoid Hubという3Dアバター共有ハブのプロダクトで必要だった

Slide 9

Slide 9 text

技術背景 VRM: 3Dキャラクター表現に特化した 3Dモデルフォーマット https://vrm.dev/

Slide 10

Slide 10 text

技術背景 VRMはglTFの拡張機能として定義されている https://raw.githubusercontent.com/KhronosGroup/glTF /master/speciﬁcation/2.0/ﬁgures/gltfOverview-2.0.0b.png

Slide 11

Slide 11 text

技術背景 Humanoid インタフェース表情制御のためのブレンドシェイプトゥーンマテリアル一人称視点用のフィールド揺れものフィールド・実装メタ情報ライセンスなど

Slide 12

Slide 12 text

技術背景 - glTFの実装 - VRM拡張の実装全部イチからやるのは工数デカすぎ……

Slide 13

Slide 13 text

技術背景 WebGLライブラリ有名・簡単・アクティブ https://threejs.org/

Slide 14

Slide 14 text

技術背景 GLTFLoaderもある https://threejs.org/examples/?q=gltf#webgl_loader_gltf

Slide 15

Slide 15 text

技術背景 GLTFLoaderでVRMを見てみる https://gltf-viewer.donmccurdy.com/ 魅力がぜんぜん違う！

Slide 16

Slide 16 text

アーティストが表現したいものを確実にユーザーに届けるには VRMの漏れない実装は不可欠技術背景

Slide 17

Slide 17 text

なかでもマテリアルの実装技術背景 Unlit（ライティングなし） MToon

Slide 18

Slide 18 text

Materials (MToon) MToonマテリアル - VRMが標準でサポートするトゥーンマテリアル - 最低限で効果的なライティング表現 - セル調・イラスト調など幅広いトゥーン表現 - MatCapによる擬似的なスペキュラ表現 - アウトラインによる線画風表現

Slide 19

Slide 19 text

Materials (MToon) Unlit（ライティングなし） MToon

Slide 20

Slide 20 text

Materials (MToon) Unlit（ライティングなし） MToon

Slide 21

Slide 21 text

Materials (MToon) Unlit（ライティングなし） MToon

Slide 22

Slide 22 text

Materials (MToon) How to make your own material on Three.js

Slide 23

Slide 23 text

Materials (MToon) How to make your own material on Three.js 1, /src/renderers/shaders/ShaderLibからテンプレートとなるマテリアルを探す https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderLib

Slide 24

Slide 24 text

Materials (MToon) How to make your own material on Three.js 2, シェーダ完全理解する https://github.com/mrdoob/three.js /blob/dev/src/renderers/shaders/ShaderLib/meshphong_frag.glsl.js #include !!? https://github.com/mrdoob/three.js /blob/dev/src/renderers/webgl/WebGLProgram.js

Slide 25

Slide 25 text

Materials (MToon) How to make your own material on Three.js 2, シェーダ完全理解する #include !!? https://github.com/mrdoob/three.js /blob/dev/src/renderers/webgl/WebGLProgram.js https://github.com/mrdoob/three.js /blob/dev/src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Materials (MToon) How to make your own material on Three.js 3, 実装していく

Slide 28

Slide 28 text

https://github.com/mrdoob/three.js /blob/dev/src/renderers/shaders/ShaderLib/meshphong_frag.glsl.js Materials (MToon) ライティング

Slide 29

Slide 29 text

Materials (MToon) https://github.com/mrdoob/three.js /blob/dev/src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js ライトごと RE = レンダリング方程式

Slide 30

Slide 30 text

Materials (MToon) https://github.com/mrdoob/three.js /blob/dev/src/renderers/shaders/ShaderChunk/lights_phong_pars_fragment.glsl.js dot!!

Slide 31

Slide 31 text

Materials (MToon) アウトラインの実装に最も時間を要した

Slide 32

Slide 32 text

Materials (MToon) ジオメトリを法線方向に膨らませカリングを裏返しにする（裏だけ描画）二度の描画が必要

Slide 33

Slide 33 text

Materials (MToon) Unityは1シェーダ内で複数パスを定義可能だが、 Three.jsでは不可能（= 1シェーダ1パス）通常のシェーディングアウトライン

Slide 34

Slide 34 text

Materials (MToon) マルチマテリアルの仕組みをハックした https://threejs.org/docs/#api/en/core/BuﬀerGeometry

Slide 35

Slide 35 text

Materials (MToon) Three.jsのデータ構造（ざっくり） Mesh (Object3D) Material 0 Material 1 Material 2 Geometry VBO/IBO Group 0 Group 2 Group 1

Slide 36

Slide 36 text

Materials (MToon) Mesh (Object3D) Material: 肌 Material: 上着 Material: スカート Geometry VBO/IBO Group: 肌 Group: スカート Group: 上着 Material: 肌Outline Group: 肌Outline

Slide 37

Slide 37 text

Materials (MToon)

Slide 38

Slide 38 text

MToonMaterial そんな@pixiv/three-vrmの MToonマテリアルですが Three.jsはカスタムマテリアルをクラスにするのがチョー面倒本題

Slide 39

Slide 39 text

MToonMaterial THREE.ShaderMaterialを継承して MToonMaterialを定義します

Slide 40

Slide 40 text

MToonMaterial fogとかlightsとかを有効化するコード忘れると ”なんか動かない……” になりがち

Slide 41

Slide 41 text

MToonMaterial Uniformをいろいろ生み出すコード

Slide 42

Slide 42 text

MToonMaterial テクスチャごとのフォーマットを定義するコードをGLSLに入れる

Slide 43

Slide 43 text

MToonMaterial いくつかの map などのメンバは Three.jsのパイプラインにより利用される

Slide 44

Slide 44 text

MToonMaterial いくつかの map などのメンバは Three.jsのパイプラインにより利用される https://github.com/mrdoob/three.js/blob/master /src/renderers/WebGLRenderer.js https://github.com/mrdoob/three.js/blob/master /src/renderers/shaders/ShaderChunk/map_fragment.glsl.js

Slide 45

Slide 45 text

MToonMaterial でも結局MToonのあらゆる機能を Three.jsにあてがおうとするとシェーダで再定義が必要 uvスクロールをしたいのでvUvでは不十分

Slide 46

Slide 46 text

MToonMaterial ここまでやっても VRMからMToonのパラメタをデシリアライズするのはまだ面倒く（MToonMaterialを独立したマテリアルとして使えるようVRM仕様とガチガチにはしていない）

Slide 47

Slide 47 text

MToonMaterial MToonのプロパティ名から命名フォーマットを変えるコード (e.g. _SphereAdd → sphereAdd )

Slide 48

Slide 48 text

MToonMaterial 前述したとおりアウトライン向けに2つ目のMToonMaterialを生成

Slide 49

Slide 49 text

MToonMaterial そしてグループにする

Slide 50

Slide 50 text

MToonMaterial 感情苦しいですあまりマテリアルをモジュールとすることが Three.jsでは考えられていなさそう

Slide 51

Slide 51 text

MToonMaterial 期待: NodeMaterial NodeMaterial https://twitter.com/mrdoob/status/667765526131826688

Slide 52

Slide 52 text

MToonMaterial マテリアルが可搬な世界観に到達できるのはいつになるのだろうか……

Slide 53

Slide 53 text

MToonMaterial より良い実装のイメージがある方他のマテリアルモジュールの実装を知っている方その他、VRM・MToonに興味がある方助けて https://github.com/pixiv/three-vrm/

Slide 54

Slide 54 text

そんなですが

Slide 55

Slide 55 text

メンテナンスできる人がぜんぜんいない（社内ではほぼ　　　のみ）

Slide 56

Slide 56 text

採用してます - WebGLやUnityでキャラクターをめっちゃ魅力的に見せたい方 - VRMの仕様まで踏み込んで3Dキャラクターの世界をもっと明るくしたい方ピクシブです

Slide 57

Slide 57 text

No content