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モデルを作って楽しんでみてくださいね。

0

0

AUTHOR

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

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

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

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

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

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP