Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20191120_ThreeJSTokyo
Search
Yutaka Obuchi
November 20, 2019
Programming
0
680
20191120_ThreeJSTokyo
Yutaka Obuchi
November 20, 2019
Tweet
Share
More Decks by Yutaka Obuchi
See All by Yutaka Obuchi
Web世界で君の3Dモデルに生を吹き込む方法
fms_cat
0
4.1k
NotITG now supports shaders!
fms_cat
1
430
Other Decks in Programming
See All in Programming
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
360
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
Code Reviews
bkuhlmann
4
890
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
210
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
800
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
42
18k
Anthropic Cookbook のおすすめレシピ
schroneko
6
530
코틀린으로 멀티플랫폼 만들기
pangmoo
0
130
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
Goのmultiple errorsについて (2024年4月版)
syumai
1
250
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
Documentation Writing (for coders)
carmenintech
59
3.9k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Navigating Team Friction
lara
177
13k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Building Adaptive Systems
keathley
30
1.9k
Transcript
pixiv Inc. OBUCHI Yutaka 2019.11.20
2 FMS_Catです
3 Yutaka “FMS_Cat” Obuchi 趣味 WebGLやさんです
OBUCHI Yutaka (FMS_Cat) ピクシブ株式会社で やってます Three.js Unity
OBUCHI Yutaka (FMS_Cat) さんと やってます
のはなし
VRMっていう3Dアバターフォーマットを Three.jsで使えるようにしました @pixiv/three-vrm
VRoid Hubという3Dアバター共有ハブの プロダクトで必要だった
技術背景 VRM: 3Dキャラクター表現に特化した 3Dモデルフォーマット https://vrm.dev/
技術背景 VRMはglTFの拡張機能として定義されている https://raw.githubusercontent.com/KhronosGroup/glTF /master/specification/2.0/figures/gltfOverview-2.0.0b.png
技術背景 Humanoid インタフェース 表情制御のための ブレンドシェイプ トゥーン マテリアル 一人称視点用の フィールド 揺れもの
フィールド・実装 メタ情報 ライセンスなど
技術背景 - glTFの実装 - VRM拡張の実装 全部イチからやるのは工数デカすぎ……
技術背景 WebGLライブラリ 有名・簡単・アクティブ https://threejs.org/
技術背景 GLTFLoaderもある https://threejs.org/examples/?q=gltf#webgl_loader_gltf
技術背景 GLTFLoaderでVRMを見てみる https://gltf-viewer.donmccurdy.com/ 魅力が ぜんぜん 違う!
アーティストが表現したいものを 確実にユーザーに届けるには VRMの漏れない実装は不可欠 技術背景
なかでもマテリアルの実装 技術背景 Unlit(ライティングなし) MToon
Materials (MToon) MToonマテリアル - VRMが標準でサポートするトゥーンマテリアル - 最低限で効果的なライティング表現 - セル調・イラスト調など幅広いトゥーン表現 -
MatCapによる擬似的なスペキュラ表現 - アウトラインによる線画風表現
Materials (MToon) Unlit(ライティングなし) MToon
Materials (MToon) Unlit(ライティングなし) MToon
Materials (MToon) Unlit(ライティングなし) MToon
Materials (MToon) How to make your own material on Three.js
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
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
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
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 #include が展開されると トータル854行 + ランタイム時注入113行
Materials (MToon) How to make your own material on Three.js
3, 実装していく
https://github.com/mrdoob/three.js /blob/dev/src/renderers/shaders/ShaderLib/meshphong_frag.glsl.js Materials (MToon) ライティング
Materials (MToon) https://github.com/mrdoob/three.js /blob/dev/src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js ライトごと RE = レンダリング方程式
Materials (MToon) https://github.com/mrdoob/three.js /blob/dev/src/renderers/shaders/ShaderChunk/lights_phong_pars_fragment.glsl.js dot!!
Materials (MToon) アウトラインの実装に最も時間を要した
Materials (MToon) ジオメトリを法線方向に膨らませ カリングを裏返しにする(裏だけ描画) 二度の描画が必要
Materials (MToon) Unityは1シェーダ内で 複数パスを定義可能だが、 Three.jsでは不可能 (= 1シェーダ1パス) 通常のシェーディング アウトライン
Materials (MToon) マルチマテリアルの仕組みをハックした https://threejs.org/docs/#api/en/core/BufferGeometry
Materials (MToon) Three.jsのデータ構造(ざっくり) Mesh (Object3D) Material 0 Material 1 Material
2 Geometry VBO/IBO Group 0 Group 2 Group 1
Materials (MToon) Mesh (Object3D) Material: 肌 Material: 上着 Material: スカート
Geometry VBO/IBO Group: 肌 Group: スカート Group: 上着 Material: 肌Outline Group: 肌Outline
Materials (MToon)
MToonMaterial そんな@pixiv/three-vrmの MToonマテリアルですが Three.jsはカスタムマテリアルを クラスにするのがチョー面倒 本題
MToonMaterial THREE.ShaderMaterialを継承して MToonMaterialを定義します
MToonMaterial fogとかlightsとかを有効化するコード 忘れると ”なんか動かない……” になりがち
MToonMaterial Uniformをいろいろ 生み出すコード
MToonMaterial テクスチャごとのフォーマットを 定義するコードをGLSLに入れる
MToonMaterial いくつかの map などのメンバは Three.jsのパイプラインにより利用される
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
MToonMaterial でも結局MToonのあらゆる機能を Three.jsにあてがおうとすると シェーダで再定義が必要 uvスクロールをしたいのでvUvでは不十分
MToonMaterial ここまでやっても VRMからMToonのパラメタを デシリアライズするのはまだ面倒く (MToonMaterialを独立したマテリアルとして 使えるようVRM仕様とガチガチにはしていない)
MToonMaterial MToonのプロパティ名から 命名フォーマットを変えるコード (e.g. _SphereAdd → sphereAdd )
MToonMaterial 前述したとおり アウトライン向けに2つ目のMToonMaterialを生成
MToonMaterial そしてグループにする
MToonMaterial 感情 苦しいです あまりマテリアルをモジュールとすることが Three.jsでは考えられていなさそう
MToonMaterial 期待: NodeMaterial NodeMaterial https://twitter.com/mrdoob/status/667765526131826688
MToonMaterial マテリアルが可搬な世界観に到達できるのは いつになるのだろうか……
MToonMaterial より良い実装のイメージがある方 他のマテリアルモジュールの実装を知っている方 その他、VRM・MToonに興味がある方 助けて https://github.com/pixiv/three-vrm/
そんな ですが
メンテナンスできる人が ぜんぜんいない (社内ではほぼ のみ)
採用してます - WebGLやUnityで キャラクターをめっちゃ魅力的に見せたい方 - VRMの仕様まで踏み込んで3Dキャラクターの 世界をもっと明るくしたい方 ピクシブです
None