3Dモデリングをして WEBGLで遊んでみた

2020年11月にこちらのLT枠で発表させていただいた資料です。
https://connehito.connpass.com/event/193896/

Transcript

1. 3Dモデリングをして WEBGLで遊んでみた auサービス開発部 佐々⽊耀
2. ⾃⼰紹介 • 佐々⽊耀 (sasaki hikaru) • かまぼこちゃん (kamabokochan) • auサービス開発部 auスマートパス フロントエンドエンジニア
3. 3Dモデリング
4. 3Dモデリング ‒ 3次元グラフィックス いろんなソフト 3Dモデリングのイメージ
5. 作ってみたい
6. モデリングしてみた
7. モデリング • メタセコイヤ(30分くらい)
8. WEB使って何かできないかな
9. WEB × 3D
10. WEBGL • WebGL (Web Graphics Library) は、互換性があるウェブブラウザーでプラグイ ンを使⽤せずにインタラクティブな 3D グラフィックスや 2D グラフィックスを レンダリングするための JavaScript API です。HTML5 <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導⼊することにより、WebGL を実現しま す。 • → Webページ上で2D/3Dグラフィックスを表⽰するAPI • GLSL(シェーダープログラム)など、javascript以外の知識も必要になる
11. Three.js • 3DコンテンツをJavaScriptのみで制作できるJavaScriptライブラリ • → WebGLをより簡単に扱えるようになる • サンプルコードや無料プラグインなども豊富
13. WEB GLを利⽤しているサイト
15. MMDモデルを作って Three.jsを使って踊らせてみよう
16. MMDとは
17. MMD - MikuMikuDance（ミクミクダンス） • キャラクターの3Dモデルを操作しアニメーションを作成する3DCGソフトウェア • キャラクターがダンスモーションする動画 • 初⾳ミクなどボーカロイドプロジェクトによる開発 • ボーカロイド以外のアニメキャラなどの動画も多数作成されている
18. 今のモデルのままだと動かない
20. ボーンとウェイト ‒ Pmx Editor • 動く仕組みを作る • ボーンの動きに対しての”動く”⽐重の設定
21. Three.jsで読み込んでみる
22. new MMDLoader(); new THREE.PerspectiveCamera(); canvas new THREE.WebGLRenderer(); Scene new THREE.Scene();
23. できたもの
25. まとめ • モデリングしてみた結果、簡単なものは簡単に作れた • ボーンとウェイトの設定は少し難しい • 頭⾝が違うとうまく設定できない • ちゃんとベースの知識が必要 • Three.jsを使って、MMDを作ることができた • 公式にはMMDモデルを使⽤したサンプルがいっぱいある • Web × 3Dの今後 • VR/ARなどがより定着する社会になってきている • 発想の転換で表現の幅が広がっていくと⾯⽩そう
26. 終わり • お借りしたモデル • kazii式煉獄杏寿郎ver2.0 • kazii(梶井)様 • https://3d.nicovideo.jp/works/td65301 • 円窓ステージVer.1.0 • まきがね様 • https://bowlroll.net/file/151623
27. 余談① Vroid studio ‒ pixiv社 • お絵かき感覚で3Dキャラを作れる
28. 余談② ボクセルアート • volume(体積)とpixelを掛け合わせた3DCGアート