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
3Dモデリングをして WEBGLで遊んでみた
Search
kamabokochan
March 13, 2023
0
28
3Dモデリングをして WEBGLで遊んでみた
2020年11月にこちらのLT枠で発表させていただいた資料です。
https://connehito.connpass.com/event/193896/
kamabokochan
March 13, 2023
Tweet
Share
More Decks by kamabokochan
See All by kamabokochan
フロントエンド採用における面接の課題について
kamabokochan
0
63
Featured
See All Featured
Faster Mobile Websites
deanohume
304
30k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Documentation Writing (for coders)
carmenintech
65
4.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Teambox: Starting and Learning
jrom
131
8.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Code Reviewing Like a Champion
maltzj
517
39k
Debugging Ruby Performance
tmm1
72
12k
Writing Fast Ruby
sferik
623
60k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
A Philosophy of Restraint
colly
202
16k
Transcript
3Dモデリングをして WEBGLで遊んでみた auサービス開発部 佐々⽊耀
⾃⼰紹介 • 佐々⽊耀 (sasaki hikaru) • かまぼこちゃん (kamabokochan) • auサービス開発部
auスマートパス フロントエンドエンジニア
3Dモデリング
3Dモデリング ‒ 3次元グラフィックス いろんなソフト 3Dモデリングのイメージ
作ってみたい
モデリングしてみた
モデリング • メタセコイヤ(30分くらい)
WEB使って何かできないかな
WEB × 3D
WEBGL • WebGL (Web Graphics Library) は、互換性があるウェブブラウザーでプラグイ ンを使⽤せずにインタラクティブな 3D グラフィックスや
2D グラフィックスを レンダリングするための JavaScript API です。HTML5 <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導⼊することにより、WebGL を実現しま す。 • → Webページ上で2D/3Dグラフィックスを表⽰するAPI • GLSL(シェーダープログラム)など、javascript以外の知識も必要になる
Three.js • 3DコンテンツをJavaScriptのみで制作できるJavaScriptライブラリ • → WebGLをより簡単に扱えるようになる • サンプルコードや無料プラグインなども豊富
None
WEB GLを利⽤しているサイト
None
MMDモデルを作って Three.jsを使って踊らせてみよう
MMDとは
MMD - MikuMikuDance(ミクミクダンス) • キャラクターの3Dモデルを操作しアニメーションを作成する3DCGソフトウェア • キャラクターがダンスモーションする動画 • 初⾳ミクなどボーカロイドプロジェクトによる開発 •
ボーカロイド以外のアニメキャラなどの動画も多数作成されている
今のモデルのままだと動かない
None
ボーンとウェイト ‒ Pmx Editor • 動く仕組みを作る • ボーンの動きに対しての”動く”⽐重の設定
Three.jsで読み込んでみる
new MMDLoader(); new THREE.PerspectiveCamera(); canvas new THREE.WebGLRenderer(); Scene new THREE.Scene();
できたもの
None
まとめ • モデリングしてみた結果、簡単なものは簡単に作れた • ボーンとウェイトの設定は少し難しい • 頭⾝が違うとうまく設定できない • ちゃんとベースの知識が必要 •
Three.jsを使って、MMDを作ることができた • 公式にはMMDモデルを使⽤したサンプルがいっぱいある • Web × 3Dの今後 • VR/ARなどがより定着する社会になってきている • 発想の転換で表現の幅が広がっていくと⾯⽩そう
終わり • お借りしたモデル • kazii式煉獄杏寿郎ver2.0 • kazii(梶井)様 • https://3d.nicovideo.jp/works/td65301 •
円窓ステージVer.1.0 • まきがね様 • https://bowlroll.net/file/151623
余談① Vroid studio ‒ pixiv社 • お絵かき感覚で3Dキャラを作れる
余談② ボクセルアート • volume(体積)とpixelを掛け合わせた3DCGアート