2018年12月14日

デザイン

これから始める!3Dモデル制作

3d_modeling3d_modeling

目次

  1. はじめに
  2. 3Dコンテンツを作るときに使っているツールやサービス
  3. WebAR/VRで使える3Dファイル形式
  4. 3D制作の流れ
  5. WebAR/VR時の注意点
  6. まとめ

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay14です!

昨日は管理画面用 gem yukiusagi の作り方についての記事でした。

管理画面用 gem yukiusagi の作り方

今回は3D初心者の方に向けて、3Dモデル作成からアニメーションまでの流れをざっくりと説明します。

3d_modeling

ベーグリーの母体であるeishisではWebVR/ARのための3D制作を行なっているため、これまでの制作実績はこちらからご覧いただけます。

【WebVR/ARの魅力をお届けする「eishis WebXR Lab」】
https://webvr-lab.eishis.com/

【そもそもWebVR/ARってなに?】

WebARとは

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データと同じディレクトリ内に入れる必要があります。

ファイル形式について.jpg (59.9 kB)

Blenderの初期設定ではgltf形式への書き出しはできないため、アドオン(プラグイン)を入れる必要があります。

詳しい方法はこちらの記事で紹介されています↓
【BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる】

BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる (1/2)

3D制作の流れ (ドラゴン例)

モデリング

モデリングは模型(体)作りのことです。

体は「ポリゴン」と呼ばれる面で作られています。
ポリゴンが多いとクオリティの高いものが作りやすいですが、その分容量も大きくなります。
2.jpg (27.5 kB)

基本的にポリゴンは四角形(または三角形)で構成されますが、四角形で体を作るのか、三角形で作るのかは統一しないといけないみたいです。
(WebAR/VRの場合、モデルがブラウザで映らなくなります)

色つけ

色つけに関しては、2パターンの使い分けをしています。

テクスチャなし

1つのポリゴンに1色、Blender上で色をつけることができます。簡単ですが、模様を作るためにはその分のポリゴンが必要です。

また、ポリゴンの形が直接模様になるため、調整が大変になります。
3.jpg (21.5 kB)

テクスチャあり

ポリゴンの形に関係なく色をつけることができます。
メリットは少ないポリゴンでリアルな模様を作れることです。
(ドラゴンはPhotoshopで色を塗っています)

デメリットはUV展開(模型の面をアジの開きのように平らにする作業)が面倒です。
注意点は、追加でパーツを作ったり「あ、このパーツ展開してなかった!」というときに再び展開する手間が発生するため、出来るだけモデルを完成させた状態でテクスチャを載せた方が良いです。
4.jpg (30.4 kB)

リギング

この手順からは、アニメーションを入れたい時のみの工程です。
リギングとは「ボーン」と呼ばれる骨を入れる作業です。

5.jpg (51.0 kB)

リギングの仕組み(余談)

骨とポリゴンを連動させる作業(ウェイトペイント)についてです。
同時にどのくらいポリゴンに影響の強弱をつけるかも定めていきます。
6.jpg (15.8 kB)

ポリゴンの色によって、骨との連動度合いが決まります。

赤いほど連動する度合いが大きくなります。
6_2.jpg (32.2 kB)

骨を1つ選択したら、ポリゴンにブラシで色を塗って影響の強弱をつけます。
ですのでポリゴン数が多いとそのぶん色分けが大変になります。

アニメーション

最後の手順は、動きやサイズに変化をつけるキーフレームの作業です。
7.jpg (51.6 kB)

アニメーション前と後の場所をキーフレームで記憶させると、あとは勝手にその間を補完して動いてくれます。
8.jpg (118.6 kB)

WebAR/VR時の注意点

ノードについて
Blenderには「ノード」という機能があり、モデルの質感を変えることができます。ただしWebAR/VRの場合はまだ対応されていないためか、ノードを使った表現はできないみたいです。

レンダリングについて
ブラウザで表示させるモデルを作る場合、「Blenderレンダー」を使用した方がうまくいく可能性が高いと思います。
「Cyclesレンダー」を使った場合、金属系のノード表現はできるようですがまだ検証中です。

まとめ

3Dモデル制作の基本的な流れを説明してきました。
WebAR/VRでの3Dモデルは、まだブラウザの対応が進んでいないこともあり、ノードを使った質感やエフェクトなどのリアルな表現の追求はこれからになりそうです。

3Dの動画を作りたい場合や、ゲーム内などで使用する3D制作の場合は、より多様な表現が可能だと思うので、色々な3Dモデルを作って楽しんでみてくださいね。

3DCGのお仕事に関するご相談

Bageleeの運営会社、palanでは3DCGに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

3

1

AUTHOR

ゲスト bagelee

ゲスト bagelee

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

asama

ando

CONTACT PAGE TOP