Synamon’s Engineer blog

Synamonはリアルとデジタルの融合を加速させるため、メタバース領域で法人向けにサービス提供を行うテックカンパニーです。現在開発を進めている「メタバース総合プラットフォーム」をはじめ、メタバース市場の発展に向けた事業展開を行っています。このブログでは、メタバース技術とその周辺の技術、開発全般に関してエンジニアがお話しします。

3Dモデリング未経験のエンジニアがBlender入門してみた

3Dモデリングについて最低限の知識を得る

こんにちは!エンジニアリングマネージャーの佐藤(@unsoluble_sugar)です!

この記事はSynamon Advent Calendar 2021、19日目の記事です。

qiita.com

弊社SynamonではVR/ARのプロダクト開発を行なっており、基本的にどのプロジェクトでもBizDev、エンジニア、デザイナーがタッグを組んで仕事をしています。企画提案や工数見積もり、開発においても、チームメンバーで議論を重ねながらプロジェクトを進行していきます。

note.synamon.jp

各作業分野でそれぞれの領域のプロが力を発揮してくれるものの、自分のバックグラウンド的にどうしてもエンジニア寄りの視点に偏りがちなことに課題を感じていました。デザイナーさんたちが使う用語やツール、3D空間への実装時におけるパフォーマンスに対する懸念点など、まだまだキャッチアップしきれていない要素が多いのが事実です。

f:id:unsoluble_sugar:20211219173708j:plain

自分なりに少しずつ勉強は進めていますが、やはり3Dモデリング経験の有無による共通認識の溝は深いことでしょう。

そこで今回のアドベントカレンダーをきっかけに、これまで足踏みしていた3Dモデリング領域への門を叩くことにしたという次第です。

Blenderを選択

3Dモデリングツールは様々なものがありますが、今回は身の回りに愛用者の多い「Blender」を選択することにしました。書籍やネット上の情報量も多く、何かしら困った際にも知人に助けを求められるなどのメリットが大きいだろうとの判断です。

www.blender.org

ちょうど本記事を書き始める少し前、2021年12月3日にBlender 3.0がリリースした模様。実に21年ぶりのメジャーアップデートだとか。

www.itmedia.co.jp

巷の書籍やネット上の情報では、Blender 2.82.9台が主流でしたが、未経験者の僕からすれば画面の見た目は大きく変わっていないように見受けられたため、最新版の3.0を使ってみることにしました。

Blenderの歴史的背景や基本機能を把握するには、公式マニュアルを参照すると良いでしょう。

docs.blender.org

自分は「Blenderについて」項目をザッと読んでから、実際にインストールして触ることにしました。

インストール

今回はWindows版を使用したキャプチャを載せていきます。

Blender公式のダウンロードページから、インストーラをダウンロードして実行。ウィザードに従ってインストールしましょう。

f:id:unsoluble_sugar:20211219133042j:plain

インストールが完了したらBlenderを起動します。

f:id:unsoluble_sugar:20211219133129j:plain

とりあえずインターフェースを日本語にします。

f:id:unsoluble_sugar:20211219133150j:plain

チュートリアル動画見ながら完全に理解する

まずは公式のチュートリアル動画を見ながら基本操作を学んでいきます。

youtu.be

デフォルトの3D Viewportを見てみると、Cubeオブジェクト、Camera、Lightが配置されていることがわかります。Unityエンジニアにとっては、実家のような安心感ですね。

f:id:unsoluble_sugar:20211219142223j:plain

Viewport Gizmosのアイコンをぽちぽちクリックするか、マウスのホイール中央ボタンを押し込みながらのドラッグで視点をぐるぐる動かせます。ホイールをグリグリ転がすとズームイン/ズームアウトですね。Unityを触っていれば、大体の操作感が同じなのですぐに馴染めるでしょう。

f:id:unsoluble_sugar:20211219134641g:plain

ハンドアイコンをクリックしてドラッグ、もしくはShiftキー押しながらマウスのホイール中央ボタン押し込みで画面の平行移動ができます。

f:id:unsoluble_sugar:20211219135025g:plain

オブジェクトを左クリックで選択状態に。その状態でビューメニューから「選択を表示」をクリックすると、対象オブジェクトを中心とした視点に移動します。

f:id:unsoluble_sugar:20211219135226g:plain

Shiftキー押しながらオブジェクトをクリック、または3Dビュー内で左クリックしながらのドラッグで複数オブジェクトを選択できます。オブジェクトを選択した状態でdeleteキー、またはXキーを押して削除ができます。

f:id:unsoluble_sugar:20211219143409j:plain

オブジェクト選択状態でGキー(Grab)を押すと自由に移動。オブジェクトを選択しで移動アイコンクリックで表示されるギズモの矢印ドラッグでXYZ方向への平行移動ができます。

f:id:unsoluble_sugar:20211219144927g:plain

オブジェクトを選択してSキー(Scale)を押すと、拡大・縮小ができます。

f:id:unsoluble_sugar:20211219145034g:plain

オブジェクトを選択してRキー(Rotate)を押すと、回転ができます。

f:id:unsoluble_sugar:20211219145652g:plain

Shfit + Aキー で表示されるメニューの「メッシュ」からオブジェクトを追加。

f:id:unsoluble_sugar:20211219150330g:plain

オブジェクトを選択してtabキーで編集モードに切り替え。頂点を選択してGキーを押すと、頂点を軸としてオブジェクトを変形できます。

f:id:unsoluble_sugar:20211219151643g:plain

辺選択、面選択アイコンをクリックすると、辺・面を変形させることができます。オブジェクトに対する基本操作はこんなところでしょうか。

f:id:unsoluble_sugar:20211219151852g:plain

その他の画面操作については、カメラビューや

f:id:unsoluble_sugar:20211219135340g:plain

ワークスペース切り替え

f:id:unsoluble_sugar:20211219135505g:plain

シーンの新規作成&切り替え

f:id:unsoluble_sugar:20211219135806g:plain

シェーディング切り替え

f:id:unsoluble_sugar:20211219140400j:plain

アウトライナー

f:id:unsoluble_sugar:20211219140438j:plain

モディファイアー

f:id:unsoluble_sugar:20211219140450j:plain

f:id:unsoluble_sugar:20211219140811j:plain

物理演算プロパティ

f:id:unsoluble_sugar:20211219140911j:plain

マテリアルなどの設定が紹介されていました。

f:id:unsoluble_sugar:20211219140933j:plain

軽く2時間ほど触ってみて、大まかな画面構成と基本操作については何となく把握できました。

簡単な3Dモデリングに挑戦してみた

基本操作がわかったので、さっそく簡単な3Dモデル作成にも挑戦してみることにしました。

YouTubeで見かけた、初心者向けの「世界一やさしいBlender入門!」を謳った動画を見ながらのチャレンジです。Blender 2.9を使った解説動画でしたが、3.0でも大きな差異はなく非常にわかりやすかったです。

youtu.be

以下、実際に動画を見ながら手順を真似してみた様子の抜粋です。簡単な机と椅子の3Dモデルを作っていきます。

まずはCubeを縮小・拡大、メッシュの追加や複製を駆使して机の基礎部分を用意していきます。

f:id:unsoluble_sugar:20211219165013j:plain

シェーディング切り替えでワイヤーフレーム表示すると、オブジェクトの位置関係が確認しやすいです。

f:id:unsoluble_sugar:20211219175317j:plain

オブジェクトを選択して編集モードにし、ctrl + B で「ベベル(面取り)」を設定していきます。角をなめらかにする加工処理ですね。

f:id:unsoluble_sugar:20211219165035j:plain

机と同じ要領で椅子を作ります。

f:id:unsoluble_sugar:20211219165114j:plain

平面メッシュを追加して床を設置。

f:id:unsoluble_sugar:20211219165137j:plain

机と椅子の位置(Z軸)を床に合わせます。

f:id:unsoluble_sugar:20211219165147j:plain

コレクションで各オブジェクトのグルーピングを行います。机、椅子、床の調整が管理しやすくなります。

f:id:unsoluble_sugar:20211219180003j:plain

オブジェクトにマテリアルを追加して色をつけていきます。

f:id:unsoluble_sugar:20211219165228j:plain

マテリアルに名前をつけると、別のオブジェクトにも同じものを適用できます。マテリアルでは表面をメタリックにしたり粗さなど質感調整ができるので、表現したい素材の再現を行いたい場合は、細かいパラメータ調整をする必要がありそうです。

f:id:unsoluble_sugar:20211219165246j:plain

ライトは「ポイント」「サン」「スポット」「エリア」毎の調整が可能です。照明の強さや角度、範囲など陰影を考慮した配置はセンスが問われますね。

f:id:unsoluble_sugar:20211219165312j:plain

カメラも透視投影と平行投影、視点の角度や位置調整、被写界深度など様々なパラメータがあります。これもこだわりだすと時間がかかりそうなポイントです。

f:id:unsoluble_sugar:20211219165346j:plain

こんな感じでしょうか。

f:id:unsoluble_sugar:20211219230443g:plain

画像レンダリングしてみる

ライトやカメラの調整が済んだら画像のレンダリングを行います。Blenderには3つのレンダリングエンジンが用意されており、それぞれ以下のような特徴があります。

レンダリングエンジン 特徴
Eevee(標準) 高速、高品質
Workbench 超高速、低品質
Cycles 低速、超高品質

メニューの [レンダー] - [画像をレンダリング] を選択。

f:id:unsoluble_sugar:20211219165355j:plain

レンダーウインドウにて [画像] - [名前を付けて保存] でレンダリングした画像が出力されます。

f:id:unsoluble_sugar:20211219165414j:plain

以下画像が、今回作成した3DモデルをCyclesでレンダリングしたものになります。

f:id:unsoluble_sugar:20211219165433p:plain

綺麗に出力されていますね!

fbxファイルのエクスポート&Unityへインポート

画像レンダリングしただけではエンジニアとしての名がすたるので、fbx形式でエクスポートしてUnityへのインポートを試みます。

対象オブジェクトを選択した状態で [ファイル] - [エクスポート] - [FBX(.fbx)] をクリック。

f:id:unsoluble_sugar:20211219190321j:plain

「選択したオブジェクト」「トランスフォームを適用」にチェックを付けてエクスポートします。

f:id:unsoluble_sugar:20211219190514j:plain

これで先ほど作成した椅子のオブジェクトがfbxファイルとして出力されました!

f:id:unsoluble_sugar:20211219190606j:plain

喜び勇んでUnityプロジェクトに持っていくと…なぜかオブジェクトの一部がスケスケに/(^o^)\

f:id:unsoluble_sugar:20211219190650j:plain

Blenderのビューポートオーバーレイで確認すると、どうやらオブジェクトの面の向きが内側に向いていたようです。青色はメッシュの向きが外側、赤色は内側に向いている状態を表しています。

f:id:unsoluble_sugar:20211219190751j:plain

スケスケになってしまっていたオブジェクトを選択し、編集モードで [メッシュ] - [ノーマル] - [面の向きを外側に揃える] をクリックします。

f:id:unsoluble_sugar:20211219190917j:plain

ビューポートオーバーレイでオブジェクト表面がすべて青色になったことを確認し、再びfbxファイルをエクスポート。Unityへ持っていきます。

f:id:unsoluble_sugar:20211219191141j:plain

無事にUnity上に椅子が召喚できました!

f:id:unsoluble_sugar:20211219191236j:plain

3Dモデリングの知識が皆無だったため、トラブル対応も一苦労でした。

See the Pen blender-model-viewer by unsoluble_sugar (@unsolublesugar) on CodePen.

Blender完全に理解した

というわけで…

  • Blenderに入門
  • 簡単な3Dモデルを作成
  • 画像のレンダリング
  • fbxファイルへエクスポート
  • Unityプロジェクトへインポート

という一連の流れを経験いたしました。

たかが数時間触った程度の初心者ではありますが、3DモデリングにおけるHello worldは学べたのではないでしょうか。実際に弊社デザイナーさんが担っている業務には程遠いものの、Blenderをきっかけに3Dモデリングの知見をより一層深めていきたいところです。

何より動画を見ながら手順をなぞっただけでも、3Dモデリングの楽しさを実感できたのは大きな収穫でした。自分の手で何かを生み出す感覚というのは、プログラミングとも近しい印象を受けました。

そのうち自分のオリジナルアバターも作れるくらいになりたいので、今後も趣味の一環としてBlenderを触っていこうと思います。

f:id:unsoluble_sugar:20211219195357p:plain

最後に

本テックブログやnote記事のお知らせは、Synamon公式Twitterで発信しています。弊社の取り組みに興味を持っていただけましたらぜひフォローお願いします!

twitter.com

カジュアル面談も実施中ですので「詳しく話を聞いてみたい!」という方はチェックいただけると嬉しいです。

▼カジュアル面談はMeetyから   meety.net  

▼エントリーはこちら   herp.careers

Synamonアドベントカレンダーの他の記事もぜひご覧ください!

qiita.com

現場からは以上です。