2018年12月14日
デザイン
これから始める!3Dモデル制作
![3d_modeling](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2018/12/3d_modeling.jpg)
![3d_modeling](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2018/12/3d_modeling.jpg)
はじめに
新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay14です!
昨日は管理画面用 gem yukiusagi の作り方についての記事でした。
今回は3D初心者の方に向けて、3Dモデル作成からアニメーションまでの流れをざっくりと説明します。
ベーグリーの母体であるeishisではWebVR/ARのための3D制作を行なっているため、これまでの制作実績はこちらからご覧いただけます。
【WebVR/ARの魅力をお届けする「eishis WebXR Lab」】
https://webvr-lab.eishis.com/
【そもそもWebVR/ARってなに?】
3D制作ツールやサービス
- Blender
無料で使える3DCG制作ソフト。Win, Mac両方対応。
モデリング〜アニメーション、エフェクト作りや動画制作まで出来る3D何でも屋。 -
Photoshop (テクスチャを作るときに使用)
-
Mixamo
人物用の多様なモーションをつけられるサイト。3Dモデルも選べるみたいです。
https://www.mixamo.com/#/ -
Poly
Googleが提供する3Dモデル配布サイト。モデルによって著作権や配布データは異なる。全てが配布されているわけではないので悪しからず。
https://poly.google.com/
WebAR/VRで使える3Dファイル形式
現在使っているのは主に2種類の3DCG形式です。
- obj (mtl) : アニメーションのない静止したモデルに使用
- gltf (bin) : アニメーション付きのモデルに使用
また、テクスチャを使用した3Dモデルの場合、jpg(png)画像も3Dデータと同じディレクトリ内に入れる必要があります。
Blenderの初期設定ではgltf形式への書き出しはできないため、アドオン(プラグイン)を入れる必要があります。
詳しい方法はこちらの記事で紹介されています↓
【BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる】
3D制作の流れ (ドラゴン例)
モデリング
モデリングは模型(体)作りのことです。
体は「ポリゴン」と呼ばれる面で作られています。
ポリゴンが多いとクオリティの高いものが作りやすいですが、その分容量も大きくなります。
基本的にポリゴンは四角形(または三角形)で構成されますが、四角形で体を作るのか、三角形で作るのかは統一しないといけないみたいです。
(WebAR/VRの場合、モデルがブラウザで映らなくなります)
色つけ
色つけに関しては、2パターンの使い分けをしています。
テクスチャなし
1つのポリゴンに1色、Blender上で色をつけることができます。簡単ですが、模様を作るためにはその分のポリゴンが必要です。
また、ポリゴンの形が直接模様になるため、調整が大変になります。
テクスチャあり
ポリゴンの形に関係なく色をつけることができます。
メリットは少ないポリゴンでリアルな模様を作れることです。
(ドラゴンはPhotoshopで色を塗っています)
デメリットはUV展開(模型の面をアジの開きのように平らにする作業)が面倒です。
注意点は、追加でパーツを作ったり「あ、このパーツ展開してなかった!」というときに再び展開する手間が発生するため、出来るだけモデルを完成させた状態でテクスチャを載せた方が良いです。
リギング
この手順からは、アニメーションを入れたい時のみの工程です。
リギングとは「ボーン」と呼ばれる骨を入れる作業です。
リギングの仕組み(余談)
骨とポリゴンを連動させる作業(ウェイトペイント)についてです。
同時にどのくらいポリゴンに影響の強弱をつけるかも定めていきます。
ポリゴンの色によって、骨との連動度合いが決まります。
赤いほど連動する度合いが大きくなります。
骨を1つ選択したら、ポリゴンにブラシで色を塗って影響の強弱をつけます。
ですのでポリゴン数が多いとそのぶん色分けが大変になります。
アニメーション
最後の手順は、動きやサイズに変化をつけるキーフレームの作業です。
アニメーション前と後の場所をキーフレームで記憶させると、あとは勝手にその間を補完して動いてくれます。
WebAR/VR時の注意点
ノードについて
Blenderには「ノード」という機能があり、モデルの質感を変えることができます。ただしWebAR/VRの場合はまだ対応されていないためか、ノードを使った表現はできないみたいです。
レンダリングについて
ブラウザで表示させるモデルを作る場合、「Blenderレンダー」を使用した方がうまくいく可能性が高いと思います。
「Cyclesレンダー」を使った場合、金属系のノード表現はできるようですがまだ検証中です。
まとめ
3Dモデル制作の基本的な流れを説明してきました。
WebAR/VRでの3Dモデルは、まだブラウザの対応が進んでいないこともあり、ノードを使った質感やエフェクトなどのリアルな表現の追求はこれからになりそうです。
3Dの動画を作りたい場合や、ゲーム内などで使用する3D制作の場合は、より多様な表現が可能だと思うので、色々な3Dモデルを作って楽しんでみてくださいね。
3DCGのお仕事に関するご相談
Bageleeの運営会社、palanでは3DCGに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
3
1
関連記事
![OGP](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/OGP-300x169.png)
2021年12月6日
Reality Composerのオブジェクトトラッキングで、スノードームを作ってみる!
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/ad0c9dd45ef7bca1a71d8b43f9be0d1c-300x179.png)
2020年12月19日
Blenderで作ったモデルをARKitで見る方法
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/09/eyecatch-300x179.jpg)
2019年9月19日
Blender2.8で360度画像を作成する
![3d_modeling](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2018/12/3d_modeling-300x179.jpg)
2018年12月14日
これから始める!3Dモデル制作
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ![palanar](https://bagelee.com/wp-content/themes/bagelee/img/palanar/palanar_img.png)
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
![eishis](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2017/06/bagel-150x150.png)
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
![yamakawa](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/01/icon-150x150.png)
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
![はらた](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2018/12/f1efe970cfdfeb37a1e64ccc1ae16ede-120x120.png)
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
![kobori](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/09/1.png)
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
![sasai](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/11/panda-rect-s-150x150.jpg)
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
![damien](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/12/mone_svg-150x150.png)
Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。
![ゲスト bagelee](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/01/normal-copy-5-150x150.png)
ゲスト bagelee
![かっきー](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/kaki-150x150.png)
かっきー
![まりな](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/02/nyan-e1612854591162-150x150.jpg)
まりな
![suzuki](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/icon_yoko-150x150.png)
suzuki
miyagi
![ogawa](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/moldiv-150x150.jpg)
ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
![いわもと](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/0b2bc228d70e0486ad56488e01f5d92e-150x150.jpg)
いわもと
デザイナーをしています。 好きな食べ物はラーメンです。
![kobari](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/06/IMG_20191105_135518_713-150x150.jpg)
taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。
![shogokubota](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/08/image0-9-150x150.jpeg)
kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya
![aihara](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/10/symbol-150x150.png)
aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。
![kainuma](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/11/IMG_1659-150x150.jpg)
Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
![sugimoto](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/Untitled-150x150.jpg)
sugimoto
asama
ando
iwasawa ayane
![oshimo](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/06/tulips-g3b120453e_640-150x150.jpg)
oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!