初心者プログラマのBlender勉強部屋

Blenderについて勉強したことや、その他プログラミング技術についてまとめています

このブログについて

私がBlenderの存在を知ってはじめてPCにソフトを入れたのがちょうど一年前(2016/12)でした。
やっとこさ、キャラクターのモデリングが出来るくらいには操作に慣れてきたので、自分が役に立ったと思う動画やらなんやらをまとめておこうと思いこのブログをはじめました。
一度調べたこともスグに忘れてしまう鳥頭な自分のための備忘録という意味合いが強いですけれど、どこかの誰かさんのちょっとした役にでも立てればそれはとても嬉しいことだなーって思います。

はじめに書いた通りBlender初心者ですので、間違っている点やこうしたらもっと良くなる等のアドバイスがありましたら、コメントいただけると幸いです!

それでは、Let's enjoy Blender

 

2020/09追記

本職のプログラマ業が忙しく、なかなかBlenderを触る時間が取れずにいます。

また、時間がたち自分の興味の範囲が、Blenderモデリングすることから、モデリングしたものを利用して何かを作ることに変わってしまいました。

タイトルであるBlender勉強部屋とは関係のない内容については別のブログを作成して記載することも考えましたが、複数のブログを管理する能力がブログ主にはないため、こちらにまとめて記録していきたいと思います。

内容はWebプログラマの技術寄りに変わってしまうかと思いますが、これからもこのブログのスタンスとしては、「自分のための備忘録がどこかの誰かにも役に立てばいいな」です。

 

お金をかけずにVTuberになりたい~概要~

今更ながら、Vroid studioを触ってみようと思い立ち、アバターを完成させたので、せっかくだからVtuberみたいなことができないかと模索した備忘録です。実際に動かしてみた感じはこちらです↓↓

以下各工程で使用したツールです。すべて無料で使うことができます。

時間ができたら、それぞれの詳細な操作について書いていきたい。

モデル作成

  • Vroid studio
    この記事を書くきっかけになったキャラメイカーソフト。ゲームのキャラクリ感覚でアニメライクな3Dモデルが作れる。髪型制作は少しコツがいる印象。

フェイストラッキング

  • 3teneFree
    こちらは有料版もあるアプリケーションの無料版です。個人であれば、商用・非商用問わず制限なく利用できます。Webカメラを用いたフェーストラッキングリップシンクが簡単にできます。プリセットに表情・モーションがいくつかあるので、モデルの動作確認がすぐできるのも良いところ。背景が変更できるので、グリーンバック撮影にして、その後の合成作業も楽に行えます。

仮想カメラ

  • OBS studio
    Wikiによると『Open Broadcaster Software(OBS studioの過去の正式名称)はレコーディングとライブストリーミングに特化したフリー・オープンソースソフトウェア』だそう。各種配信サイトと連携しこのアプリケーションだけでライブ配信ができるみたい。名前は忘れましたが、youtubeのゲーム実況動画配信者さんが利用しているというのを聞いたことがあります。

テクスチャ作成

  • Krita
    オープンソースのペイントソフトです。普段別の有料ペイントソフトを利用している人には少し不便に感じるかもしれませんが、慣れてしまえば全く無料であることを感じさせません。BlenderのようにPythonスクリプティング機能があるようなので時間がある時に調べたい。

モデル修正

  • Blender
    ご存じオープンソースの3DCGソフトウエアのBlenderです。ついこの間ver.2.8が正式リリースされたような気がしたのに、もう2.9がリリースされていて、そのスピード感に驚きます。注意点ですが、Blender上にVroid studioで作成したモデル(VRM形式のモデル)をインポートするには、アドオンVRM_IMPORTER(Blender2.8用)を読み込む必要があります。

動かす

  • Unity
    ユニティ・テクノロジーズが開発している、ゲームエンジンです。Unity上で、VRM形式のモデルを扱うためにUniVRMを利用します。Unity上で、表情の変更や瞬きなどは上記のパッケージに含まれているのがありがたいです。

【Blender】ワイヤーフレームを表示させてレンダリングする方法

簡単なモデルでも、メッシュをワイヤーフレームで表示させるとなんかオシャレになる気がしませんか。私はします。ということで、今回はワイヤーフレームを表示させてレンダリングする方法をご紹介します。

Blenderのバージョンは2.79bです。

実際にワイヤーフレームを表示した画像は、こんな感じです。私の技量不足であまりオシャレに見えないのは大目に見てください。

ワイヤーフレーム画像

 

方法はいたって簡単で、ワイヤーフレームモディファイアを追加するだけなのですが、まずは、ワイヤーフレームを表示させたい3Dモデルを用意します。

モデルは何でもいいですがあまりポリゴン数の多くないモデルのほうが、キレイに仕上がると思います。今回はスザンヌを使ってみましょう。

次に、モディファイアを追加します。

[Add Modifier]ボタンから「Wireframeモディファイア」を選択します。

下記のようにワイヤーフレームのみが表示されたかと思います。

ワイヤーフレームモディファイアの設定、「Replace Original」からチェックを外すと、元のモデルが表示されます。

レンダリングの状態を見ながら線の太さを調整していきます。

まず、光源を作るためにワールドタブから、ワールドの設定を行います。

この時レンダラーは、Cyclesを選択してください。

Surface」の「color」を「Sky Texture」に変更します。

マテリアルを追加していきます。

マテリアルタブを開き、[New]ボタンをクリックしてモデルの色を指定します。今回は白(Hex:FFFFFF)にしました。

ワイヤーフレーム用のマテリアルを追加します。

マテリアル名の横の+ボタンをクリックし、新規マテリアルを追加します。

ワイヤーフレームの色は黒(Hex:000000)にしました。

ワイヤーフレームモディファイアの設定に戻ります。

その前に[Shift]+[z]で表示を「Rendered」に変更します。

まだすべて真っ白に表示されているかと思いますが、「Material Offset」を1に変更してください。
ワイヤーフレーム部分が黒く表示されます。

 「thickness」でワイヤーフレームの線の太さを変更できます。

「offset」でワイヤーフレームの線の位置を変更できます。

線がモデルの外に出すぎているので、「offset」の値を小さくします。

今回は下記のように設定しました。

 

カメラの位置を変更しレンダリングをした結果です。

きちんとワイヤーフレームを表示させてレンダリングすることができました。

 

【Blender】ミニキャラ(デフォルメキャラ)作成方法 ~リギング編~(Mixamoの使い方)

Mixamo(フリーWEBアプリ)の機能である自動リギングツールが非常に便利ですごいので、今回はMixamoのauto-rigger機能を紹介してみようと思います。本当は5月の時点で書きはじめた記事なので、少し今更感がなくもないですが…簡単な設定であっという間に人型ボーンを作成してくれて、尚且つプリセットのアニメーションがあるので、自作キャラを簡単に動かすことができるとか、最高に楽しすぎますよね!!

 

ちなみに、自分でもボーンを作成してちまちまリギングしてみたのですが、如何せん、まだ人様に説明できるほどの技量をもっていないので、今回は、こちらの機能をミニキャラ作成リギング編としてしまいます。

ミニキャラ(デフォルメキャラ)作成方法の目次は下記の通りです。

  1. モデリング編
  2. テクスチャ編
  3. リギング編
  4. アニメーション編

Mixamoにログインする

Mixamo公式サイトはこちら。

https://www.mixamo.com/

Mixamoを使用するにはAdobeアカウントでログインすることが必要です。

アカウントをお持ちでない場合は、[SIGN UP FOR FREE]ボタンから、アカウントの作成を行ってください(お金はかかりません)。

すでにアカウントをお持ちの方は、画面の[LOG IN]ボタンからログインしてください。

f:id:xolokix:20180524012636p:plain

ログインすると下記の画面が開きます。

もし開かない場合は、左上のmixamoロゴ横の[Animations]ボタンをクリックしてください。

f:id:xolokix:20180801142250p:plain

自作モデルのfbxファイルを準備する

 ログインができたら、さっそく自作モデルをアップロードしたいところですが、Mixamoはblenderファイル形式に対応していないためfbxファイルを準備する必要があります。

Blenderでfbxファイルを出力するには、情報バーのFile>Export>FBX(.fbx)をクリックします。保存画面が表示されるので、任意のフォルダとファイル名を指定して[Export FBX]ボタンをクリックしてください。これでfbxファイルの準備が完了しました。

f:id:xolokix:20180816193032p:plain

自作モデルをアップロードする

fbxファイルの準備ができたので、早速モデルをMixamoにアップロードしてみましょう。画面右上の[UPLOAD CHARACTER]ボタンをクリックしてください。すると下記のようなモーダルウィンドウが表示されるので、[Select character file]からファイルを選択するか、点線で囲まれたエリアに、直接ファイルをドラッグアンドドロップしてください。すぐにアップロードが開始されます。

f:id:xolokix:20180816193343p:plain

アップロードしたモデルの設定

モデルのアップロードが完了すると下記のような画面が表示されます。

テクスチャやマテリアルが表示されないことがありますが、今回はリギングが目的のため気にせず設定を進めましょう。

もし、アップロードしたモデルが正面を向いていない場合は、画面左にあるボタンで調節していきます。ボタンは上から、X軸で回転、Y軸で回転、X軸で回転します。

モデルの向きを修正したら[NEXT]ボタンをクリックしてください。

 

f:id:xolokix:20180816193700p:plain

自動リギングのための設定

自動リギングのための設定を行います。

下記の画像のように丸を移動させて、あご、手首、ひじ、ひざ、またの位置を指定します。このとき、[Use Symmetry]にチェックが入っていると自動で左右同じ位置に丸を移動してくれるので、設定が楽になります。設定ができたら[NEXT]ボタンをクリックしてください。そうすると自動リギングが開始されます。こちらには、2分ほど時間がかかるようです。

f:id:xolokix:20180816194243p:plain

自動リギング完成

自動リギングが成功すると下記の画像のように、アップロードしたモデルが動く姿が確認できます。問題がなければ[NEXT]ボタンを押して自動リギングを完了してください。

f:id:xolokix:20180816194958p:plain

モデルを動かす

 リギングができたモデルをMixamo上で動かしてみましょう。Mixamoにはプリセットで様々なモーションが登録されているので簡単にアニメーションの確認をすることができます。試しに左画面の「Jumping」をクリックしてみましょう。そうすると右画面の自作モデルも同じように動き始めます。

右画面の調節バーを動かすことで、モーションの設定を変更することができますので、自由に調節してみてください。

f:id:xolokix:20180816195904p:plain

モデルをダウンロードする

Mixamoで自動リギングしたモデルは、上記で選択したモーション付きでダウンロードすることも可能です。

画面右上の[DOWNLOAD]ボタンをクリックすると、下記のようなモーダル画面が表示されます。とくにこだわりがないようでしたら、設定は変更せず、そのまま[DOWNLOAD]ボタンをクリックしてください。しばらくすると、ダウンロードが開始されます。

f:id:xolokix:20180816200800p:plain

Mixamoの使い方は以上です。

ちょっと気になったこと

自動リギングが終わった後、下記の画像のようにモデルが地面にめり込んでいることがありますが、モーションを選択すると問題なく動きます。原因はわからないのですが、Blenderでモデルを表示した際も、きちんと動いているので、とりあえずはそのまま使えるようです。

f:id:xolokix:20180816195106p:plain

【Blender】Blenderアーティストがブックマークすべきウェブサイト20+選

自分の備忘録用に、こちらの動画で紹介されているWEBサイトをリスト化しました。


20+ websites every blender artist should bookmark

 

  1. Blender Cloud

    Blender財団のサービス。フリーコンテンツもありますが、その他すべてのコンテンツ(動画、テクスチャ、チュートリアルetc.)は月$10で利用することができます。ここで使ったお金は、Blenderの開発費に使われるので、開発のサポートをするために月額利用するのもいいですね。

  2. Blender Network

    プロのBlenderユーザーやプロを目指している人のためのサイトです。このサイト上で仕事探しができるそうです。ワークショップやコアなユーザー向けの情報もあります。

  3. BlenderNation

    DailyNewsやチュートリアルなどを見ることができます。Blenderに関することが知りたい初心者の方には、是非ともチェックしてもらいたいサイトです。英文ライティングが得意な方は記事を自分で書いて投稿するのもいいかもしれません。

  4. Blender.Today

    BlenderNewsがベースのコミュニティサイトです。

  5. blenderartists.org

    世界一大きなBlenderフォーラムです。知りたい情報のトピックは、ほぼすべて存在しているはずです。素早く情報を得たい場合に役立つサイトです。また、いつでも誰かがサイト上にいるので、必要な情報がない場合でも質問をすればすぐに返信が返ってくるはずです。

  6. discord.gg/blender

    DiscordのBlenderサーバーで、英語でチャットができます。私はあまり詳しくないですが、新しい友達が欲しかったり、助言が欲しい場合に使うといいと思います。アプリをダウンロードして使うこともできます。利用前にアカウント作成が必要です。

  7. HDRI Haven

    Greg Zaal氏が作ったHDRI画像の素材サイトです。とても高品質な素材がすべて無料(CC0)で使えます。Patreonで支援することができますので余裕のある方は是非支援をお願いします。

  8. Sketchfab

    3DコンテンツをWEB上で簡単に共有できるサイトです。

  9. Blender Swap

    BlenderファイルをCC(クリエイティブコモンズ)ライセンスで使用することができます。商用利用可能なファイルもあるようです。利用する際はそれぞれのファイルのCCライセンスを確認してください。

  10. Right-Click Select

    Blenderユーザーのコミュニティ。Blenderをもっとうまく使うためのアイディアを探すことができます。もちろん自分のアイディアを投稿することもできます。

  11. Blender Market

    Blenderコンテンツの販売サイト。フリーのアドオンやマテリアルもあります。

  12. ArtStation

    完成した作品を投稿して、ポートフォリオサイトを作成できます。投稿された作品を見て創作意欲を高めるのもいいと思います。作品のクオリティが高いので見ているだけで楽しいです。

  13. Poliigon

    YoutubeBlenderチュートリアル動画でおなじみのBlender Guruの投稿者さんが運営しているテクスチャ販売サイト。フォトリアルな作品を作る際に役立つテクスチャが数多く販売されています。無料サンプルも利用できます。

  14. textures.com

    テクスチャ画像を無料で入手できますが、高解像度の画像は有料になります。利用する前にはアカウントの作成が必要です。

  15. Wolf

    PBR Materialsという有名なアドオンの開発者さんのサイトです。無料のアドオン、テクスチャーなどをダウンロードすることができます。

  16. Sheepit Render Farm

    Render Farmのコミュニティサイトです。コンピュータをつないでレンダリング作業を助け合うことができます。利用するためには、ソフトをインストールする必要があります。商業作品のためにこのサービスが利用できない場合は、かわりにrender.stかblendergrid.comなどを利用してください。

  17. Pixabay

    無料で使える画像や動画を探すことができます。リファレンスや背景画像として使う事ができます。

  18. 500px

    写真投稿サイトです。コンポジションの勉強やアイディアを得るために使えます。写真の販売も行われているようです。

  19. アーティストのサイト
    1. Creative shrimp

      Gleb Alexandrov氏のサイトで、高度なBlenderの技術を学ぶことができます。

    2. Blender Guru

      Youtubeで一番有名なチュートリアル動画作成者のAndrew Price氏のサイトです。私もよくYoutubeの動画で勉強しています。

    3. ZachariasReinhardt

      ZachariasReinhardt氏のサイトです。

    4. ManuJarvinen's Portfolio

      Manu Jarvinen氏のサイトです。

  20. あなたのお気に入りのサイトはありましたでしょうか?

    もしなかった場合はコメントで教えてください!

 

今回紹介した動画の投稿者のMrSorbiasは他にも、とても役立つチュートリアル動画をあげてくれています。興味のある方は是非チェックしてみてください。

【Blender】ツールシェルフを透過する方法

画面を分割して使っていると、作業スペースが狭くなって使いづらくなったりしませんか?そんなときは、ツールシェルフを透過して画面を広く使えるように設定しましょう。

 Blenderのバージョンは2.79です。

f:id:xolokix:20180121162655p:plain

 

ツールシェルフを透過する

[Ctrl]+[Alt]+[U]キーで「User Preferences」を表示し、「System」タブの「Region Overlap」にチェックを入れます。これで、ツールシェルフが透過されます。

f:id:xolokix:20180121164506p:plain

透明度の変更

「User Preferences」>「Themes」タブの「3D View」を表示します。

f:id:xolokix:20180121165531p:plain

一番下までスクロールしたところに「Region Background」の設定があります。色が表示されている部分をクリックして、設定値を変更します。
アルファ値が0に近づくほど、ツールシェルフは透明になります。

f:id:xolokix:20180121170129p:plain

設定の保存

 設定の変更は即時反映されますが、Blenderを閉じてしまうと初期化されてしまいます。設定が完了したら、「User Preferences」の左下にある「Save User Settings」を押して設定を保存することを忘れないようにしてください。

 

【Blender】Photoshop(ペイントツール)を使ってテクスチャを作成する

前回の記事では、テクスチャペイント機能を使ったテクスチャの作成を行いましたが、実際には、既存の素材を切り貼りしてテクスチャを作成したいという場面はよくあることと思います。そこで今回は、UVの展開図を画像保存して、外部のペイントツールで編集する方法をお伝えします。


~UVの展開図を保存する~

UV展開については前回の記事に記載したので、今回は展開図を保存するところから説明していきたいと思います。

UV展開の時と同様、画面は2分割にした状態で、片方の画面に「UV/Image Editor」を表示します。

f:id:xolokix:20180108010343p:plain  f:id:xolokix:20180108011059p:plain

[Tab]キーでEdit(編集)モードにし、[A]キーでメッシュをすべて選択します。それから、右ウィンドウのヘッダーの「UVs」を押します。このとき、モードが「Paint」になっていると、 ヘッダーに「UVs」が表示されないので気をつけてください。

f:id:xolokix:20180114000851p:plain

f:id:xolokix:20180114000940p:plain

「Export UV Layout」を選択すると、保存画面が表示されます。

保存場所と名前を指定して、「Export UV Layout」を押せば完了です。

f:id:xolokix:20180114001139p:plain  f:id:xolokix:20180114001433p:plain

「Export UV Layout」の設定値の「Fill Opacity」を変更することで展開図の枠内の白色の透明度を変えることができます。 

また、「All UVs」にチェックがない場合は選択したUVのみを出力することができるので、必要なUVのみを選択して出力することも可能です。

f:id:xolokix:20180114002359p:plain  f:id:xolokix:20180114003327p:plain

~UVの展開図をPhotoshopで開く~

保存した展開図をPhotoshopで開きます。

[Ctrl]+[O]で、開くダイアログを表示して、保存したUVの展開図を開きます。

あとは、新規レイヤーを作成して、テクスチャを作成してください。

f:id:xolokix:20180114004101p:plain

さきに、テクスチャペイントで下書きをした画像を間に挟むとわかりやすいのでおすすめです。

f:id:xolokix:20180114004448p:plain


~おまけのTip~

試行錯誤してモデリングをしていると、UVの展開図によくわからないメッシュができることはありませんか?

f:id:xolokix:20180114005508p:plain

そんなときは、ヘッダーの↓のボタンを押してください。

f:id:xolokix:20180114005919p:plain

「UV/Image Editor」画面で選択したメッシュが「Edit Mode」の画面でも選択されます。消しても問題ないメッシュならさくっと削除してしまいましょう。

f:id:xolokix:20180114010407p:plain

【Blender】ミニキャラ(デフォルメキャラ)作成方法 ~テクスチャ編~

ミニキャラ作成について、昨年末に書いたモデリング編の記事から少し時間がたってしまいましたが、今回はテクスチャ編です。

全4回の更新内容の予定は、下記の通りです。

  1. モデリング編
  2. テクスチャ編
  3. リギング編
  4. アニメーション編

UVマッピング

テクスチャの作成はテクスチャペイントモードを使いますが、その前にUVマッピングをしていきます。

UVマッピングとは、3次元のメッシュを2次元に展開することで、平面のテクスチャを立体面に貼る際もゆがみがなく綺麗に貼り付けられるようにすることです(大体のニュアンスなので、詳しくは公式WIKIへ)。

 

メッシュを展開するために、シーム(切れ目)を付けていきます。

シームにしたい辺を選択して、[Ctrl+E]キーを押し、「Mark Seam」を選択します。

f:id:xolokix:20180107230906p:plain  f:id:xolokix:20180107231423p:plain

シームを付けた辺は赤く表示されます。シームを削除したい場合は、辺を再度選択して、[Ctrl+E]キーを押し、「Clear Seam」を選択してください。

f:id:xolokix:20180107231218p:plain

 画面を2分割にし、片方の画面に「UV/Image Editor」を表示します。

f:id:xolokix:20180108010343p:plain  f:id:xolokix:20180108011059p:plain

[Tab]キーで編集モードにし、UV展開していきます。下の図ではわかりやすいように顔のメッシュのみ選択して展開していますが、[A]キーでひとつのオブジェクトのメッシュをすべて選択してからまとめてUV展開しても大丈夫です。

展開をするには、[U]キーで「UV Mapping」ウィンドウを表示し、「Unwrap」を選択します。

f:id:xolokix:20180108012405p:plain  f:id:xolokix:20180108014129p:plain

展開した後は、それぞれの展開図が重ならないように並べていきます。顔などは解像度が必要な部分なのでできるだけ大きめにしておきます(小さいとテクスチャの線が引き伸ばされてがたがたになってしまいます)。

f:id:xolokix:20180108015701p:plain

かなり雑ですがこんな感じに配置しました(ちいさな点のようなメッシュができてしまいましたが、削除するとカタチが崩れてしまうのでそのまま続行してます…モデリング修行中なのでお許しください)。

テクスチャペイント

テクスチャペイントモードに移行して、テクスチャを作成します。テクスチャペイントに関しては、前回のブログでも触れましたので、そちらもご覧ください。

xolokix.hatenablog.com

ブラシは主にTexDrawを使い、Softenでぼかしたり、Smearで色を混ぜたりします。ブラシの画像クリックでブラシの変更ができます。

f:id:xolokix:20180108022642p:plain

テクスチャペイントでよく使うショートカットキーも載せておきますので参考にしてみてください。

[S]キー:スポイト

[F]キー:ブラシのサイズ変更

 

今回のキャラクターはチェック柄の服をているので(下のデザイン画参照)、テクスチャペイントでチェック柄を描いていこうと思います。

f:id:xolokix:20171217032059j:plain

〇テクスチャペイントでチェック模様を描く

TexDrawブラシで下地の色を塗ります。

f:id:xolokix:20180108043900p:plain

「Tools」の「Blend」をMixからMultiplyに変更します。

f:id:xolokix:20180108044058p:plain

「Tools」の「Stroke」にある「Stroke Method」をLineに変更し、直線が引けるように設定します。

f:id:xolokix:20180108044530p:plain

あとはひたすら線を引くだけです。

完成画像はこのようになりました。テクスチャの画像はあまりキレイにできなかったので、ブログに載せるか悩みましたが、イメージを伝えるために一応公開しておきました。参考になるといいのですが…

f:id:xolokix:20180108040406p:plain  f:id:xolokix:20180108040640p:plain

 

 テクスチャまで作成したことで、だいぶ完成像が見えてきました。

次回以降は、リギングの作成工程をお伝えします。

それでは、また!