たつぷりの調査報告書

博士後期課程(理学)の学生が趣味でUnityやBlenderで遊ぶブログです。素人が独学で勉強した際の忘備録です。

Blenderのテクスチャペイントの使い方

こんには、たつぷりです。今回の投稿では以下のような絵をBlenderで作成します。 f:id:Tatsupuri:20201009183932p:plain これは一見網目のように見えますが、オブジェクトとしてはただの円柱(を少し変形させたもの)で全く複雑な形状はしていません。今回はこれをテクスチャペイントを用いて作成していきます。

他にもこのようなエフェクトを作るのにModifierを使って実際にこのようなメッシュのオブジェクトを効率よく作る方法も考えられますが本稿では取扱いません。

目標

今回の最初の目標は、下のようなテクスチャ(アップロードする際に詳細の情報が少し落ちてしまった)を作ることである。このテクスチャの模様はアルファ値で書かれている。つまりRGBとしては単色で白であるが、透過率を変えることでこのように見せているのである。黒く見える部分は完全に透過しており、白いところは全く透過していない。 f:id:Tatsupuri:20201009190901p:plain

このように透過率を変えたい理由はこれをBlenderでシンプルなメッシュのオブジェクトに張り付けて一見複雑な形状をしているように見せたいからである。つまりオブジェクトに実際に穴をあけるのではなく、透過するテクスチャを貼ることで「穴が開いているように見せる」のである。 実際にこれをレンダリングエンジンをCycleにした上で見ると、下のように一見すると複雑に穴が開いているような形状に見える。

f:id:Tatsupuri:20201009182806p:plain

ペイント入門

まずBlenderにおけるペイントの仕方をまとめておく。 まずは練習で平面オブジェクトに対してペイントを行う。

適当に平面を作成し、マテリアルを割り当てる。今回はマテリアル名をtestとしてある。その上でTexturePaintモードに入るとまだテクスチャが割り当てられていないので紫色になって表示される。Shdingで自らImageTextureを追加してもいいのだが、今回は次の手順を踏む。右側のパネルからActive Tool and Workspace Settingsを選び、そこで新規テクスチャを作成する。その際テクスチャの種類を選ぶことができ、今回はBase Colorを選択する。この他にもNormalマップやMetalマップなどを作成することもできる。 f:id:Tatsupuri:20201009182823p:plain

ここで追加したテクスチャはもちろんShadeingやMaterial プロパティからも確認できる。実際にテクスチャを割り当てた後の画面が下の画面でありテクスチャが割り当てられいないエラーを示す紫色ではなくなった。 f:id:Tatsupuri:20201009182828p:plain

この状態では実際に絵を描くことができる。デフォルトではBlendモードはMixになっており、そのままブラシで色を塗ることができる。Blendモードを変更することで色の混ぜ方などのオプションを設定することができる。後述のとおりアルファ値を変更するモードもある。 f:id:Tatsupuri:20201009182835p:plain

ショートカットキー「n」で下図のようにペイントに関してのパネルを出すことができる。ここでブラシのテクスチャやマスクのテクスチャなどを設定することができる。他にも塗る色や強さ、ブラシの大きさなども変更が可能である(いずれもここからしか変更できないわけではない)。

f:id:Tatsupuri:20201009182845p:plain

さて、α値を編集するには、ブラシのBlendモードをErase/Add Alpahに設定する。例えば、以下の図にあるようにEraseAlphaに設定しておくと、Strengthの分αを引き算することになる。 f:id:Tatsupuri:20201009182841p:plain

今回の目標は一番最初に添付したようなテクスチャを作成することであった。頑張って自分で絵を描かなきゃいけないかというとそうではなくて、このような図形を簡単に書く方法がある。そのために、ブラシにマスクを設定する。マスクを設定するとブラシで塗ったときに一様に塗られるのではなく、そのマスクに沿って重みをつけて塗られる。つまりマスクの濃淡に合わせて色を塗ることができるのである。

まずは以下の手順でマスクに使うためのテクスチャを作成する。ノイズのテクスBlenderで初めから導入されているテクスチャなどは、右側のテクスチャプロパティから編集することができる。今回は適当に以下の図のようにマスクに使うためのテクスチャを作成した。なお、作成したテクスチャをブラシマスクに設定するにはメニューのTexture Maskでチェス盤みたいな部分をテクスチャの一覧が表示されるのでそこから選択する。

f:id:Tatsupuri:20201009182933p:plain

実際マスクをした状態で塗ると上の図のようにアルファ値の分布を作ることができた。このままでは単調なのでマスクの種類を変えたりしながらより詳細を作りこんでいき、冒頭で示したようなテクスチャを得ることができた。

最終的な見た目

上のようにしてテクスチャを作成したら、これをオブジェクトに貼り付ければよい。例えば今回は下ようなオブジェクトにテクスチャを割り当てていく。 f:id:Tatsupuri:20201009182902p:plain

今回目標とする見た目は以下の通りである。

  • テクスチャのアルファ値の情報に従って透過させる
  • 透過しない部分は光らせる

このことからも分かるように今回目標とする見た目を表現するには、「Transparent BSDF」と「Emission」の二つのシェーダーを混ぜる必要がある。ただし、これらのシェーダーをテクスチャのアルファ値で重みをつけて混ぜるのである。つまり、テクスチャのアルファが小さいところは「Transparent BSDF」、アルファ値が大きいところは「Emission」を反映するように混ぜればよいのである。

Shaderを混ぜるのはMix Shaderを用いれば良く、その時にfactorにテクスチャからのアルファ値を代入すればよいのである。以上の思想の下でシェーダーを組んだものが以下の図である。

f:id:Tatsupuri:20201009200533p:plain

これで実際に得られたものが以下の図である(上のシェーダーとEmissionの色が違っているが。。。)。 f:id:Tatsupuri:20201009182909p:plain

上のままだと見た目がそんなにかっこよくないので、レンダリングした後でCompositingワークスペースでFog Glowなどを追加して見た目を調整して完成。 f:id:Tatsupuri:20201009182916p:plain

インタラクティブに背景を変えるInstagram向けのエフェクトを作成する

今回も引き続きSpark ARでインタラクティブInstagram向けエフェクトを作成する方法に関してです。 詳しくは以下のリンクを見てただきたいですが、 tatsupuri.hatenablog.com

今回もまずは本稿の位置づけを整理します。筆者が以前作成したエフェクトデモ画像)を構成する要素は以下からなっていました。

  • タップすると目の色が変わる
  • 口を開けると片目がとれて目がむき出しになる
  • 口を開けると背景が変わる

今回は最後の「口を開けると背景が変わる」方法についてまとめます。このエフェクトの本稿執筆時点のバージョンに関しての解説はこれで最終回になります。

目標

最終的に作成するエフェクトは以下のようなものである。 つまり、口を開いた時に画面に背景が変わるようなエフェクトである。 f:id:Tatsupuri:20201008231012p:plain

つまり今回目標になるのは画面全体にかけるエフェクトである。画面全体に対してのエフェクトの例として、カラーフィルターを作成する手順が公式のチュートリアルにあった。

このチュートリアルで紹介されていたのは以下のような手順である。まずCanvas上にRectangleを配置し、そこにカメラからのキャプチャー画像をテクスチャとして貼り付けて、そのマテリアルを編集することでカラーフィルターの効果を得る。

しかしこの方法だと、今回筆者が構成したようなエフェクトのように3Dモデルを用いている場合はRectangleはCanvas上に配置されるので3Dオブジェクトとぶつかってしまう場合がある。実際、この方法でエフェクトを作成しようとすると筆者のエフェクトでは3Dモデルが半分に切られたような感じになって立体感を失っていまった。

この問題を解決するために様々な方法を考えることができるが、今回は簡単に以下のような手順をとることにする。それは配置した3Dオブジェクトよりも後ろに平面を配置し、そこにテクスチャを貼る方法である。

つまり今回するべきことは、

  • 3Dオブジェクトよりも後ろに平面を配置する
  • 平面にテクスチャを張り付ける
  • 口の開閉に合わせて平面を消したり出現させるパッチを構成する

の手順である。

平面の追加

SceneパネルからPlaneを追加する。 f:id:Tatsupuri:20201008231041p:plain

この時、3DオブジェクトとPlaneが重ならないように3Dオブジェクトよりも後ろにPlaneを配置する。今回は以下のように配置した。 f:id:Tatsupuri:20201008231017p:plain

マテリアルの設定

今回用いる以下のテクスチャはBlenderのTextureペイントで作成した。Blenderでテクスチャを作成する方法はこちらのリンクを参照せよ。 f:id:Tatsupuri:20201008231029p:plain

この後の便宜上、このテクスチャをタイリングできるようにしておく。テクスチャをタイリングできるようにするには次のようにすれば良い。 該当のテクスチャをAssetから選択し、インスペクターでTiling ModeをRepeatに設定する。今回はU,Vどちらの方向にもタイリングすることを想定しどちらもRepeatにした。

f:id:Tatsupuri:20201008231036p:plain

このテクスチャをPlaneのマテリアルに割り当てる。まずPlaneにマテリアルを追加する。そのマテリアルのインスペクターでShader Properties>DiffuseにあるTextureプロパティに上のテクスチャを割り当てる。この上で同じところにあるColor プロパティを変更する。例えば今回は青に設定した。これは元のテクスチャは白黒の絵なのでこれに紫色の一様なテクスチャをブレンドさせて実際に出力されるテクスチャに色を付けるためである。

なお、この時テクスチャの位置やスケールの調整はインスペクターのTiling Optionで調整することができる。

f:id:Tatsupuri:20201008231021p:plain

パッチの構成

以上でマテリアルの設定は完了したので、口の開閉に応じてPlaneを消したり出現させたりするパッチを構成する。この方法は以前の投稿にまとめているので、必要があればそちらを参照してほしい。 Spark AR用いてタップで色を変えるエフェクトを作成する - たつぷりの調査報告書

今回もそれと同様で、PlaneのVisibleプロパティのパッチを作成し、これをMouse Openパッチとつなぐ。

f:id:Tatsupuri:20201008231025p:plain

これによって目標通り、口を開いたときに背景が変わるエフェクトを構成することができた。

まとめ

筆者が最近作成したインスタグラム向けのエフェクトをテーマにして、3回にわたってSpark ARの解説を行った。今回まででまとめたのは非常に簡単にできる入門的な部分だけである。レファレンスなどを見ていると、より高度なエフェクトを作ることは可能であると考えられる(実際存在している)。今後引き続きSpark ARについては勉強を続けまた知識がたまったら記事にして投稿する予定である。

Spark AR用いてタップで色を変えるエフェクトを作成する

今回も前回の投稿に引き続きSpark ARでインタラクティブInstagram向けエフェクトを作成する方法に関してです。 詳しくは以下のリンクを見てただきたいですが、 tatsupuri.hatenablog.com

筆者が以前作成したエフェクトデモ画像)を構成する要素は以下からなっていました。

  • タップすると目の色が変わる
  • 口を開けると片目がとれて目がむき出しになる
  • 口を開けると背景が変わる

今回は1番目の「タップすると目の色が変わる」方法についてまとめます。

目標

今回目標とする「タップすると目の色が変わる」を構成するのは、以下の2つである。

  • タップしたことを検出する
  • 目に割り当てられているマテリアルから「色」の情報を取得、変更する

なお、色を変更することに関して、公式のレファレンスを参照した。

タップの情報を取得する

上述のレファレンスに従って、まず2つの色を入れ替える方法、続いて3つ以上の色を巡回的に入れ替える方法についてまとめる。どちらの場合もタップに応じて異なる色を出力するパッチを構成する。

なお、2つの色を変える場合は3つ以上の場合の方法でも同様に実行できるが、パッチの使い方について個人的に勉強になったので異なった方法で実装する。

色が2つの時

まず、色が二つの時はIf Then Elseパッチを用いることで2つのデータの出力を制御することができる。ポイントは、If Then Elseパッチの返り値のデータ型を変更できるところである。これをするには、以下の図のようにパッチの下部の歯車のマークの左にあるプルダウンから選択すればよい。 f:id:Tatsupuri:20201007170117p:plainf:id:Tatsupuri:20201007170138p:plain

このようにして、If Then Elseパッチで二つの色を場合分けすることができるようになった。

次にタップで上のIf Then Elseパッチからの出力を切り替えるようにしたい。つまりタップに応じて、If Then Elseの「Condition」を反転させること実装する。まず、タップを検出するのは「Screen Tapパッチ」である。ここで、Screen TapパッチのGesture Stateからの出力をそのままIf Then ElseのConditionに入力できないことに注意する。これは、この間にSwitchパッチをはさむことでタップによってConditionを反転するのか、OnまたはOffの一方通行の操作なのかを制御することができる。今回はタップする度に色を変えたいので、Screen TapパッチをSwitchパッチのFlipにつなぎ、それをIf Then Elseにつなぐ。

色が3つ以上の時

上でやったようにIf Then Elseパッチを使うと、二つの選択肢しか選ぶことができないので複数の選択肢の間で切り替えるにはCounterパッチとOption Pickerパッチを用いる。Screen TapパッチからのノードをCounterパッチにつなぐ。CounterパッチもSwitchパッチと同様にTap操作による変数の挙動を指定するためのパッチである。例えば、CounterのIncreaseにつなぐとタップの度に整数を1ずつ増やしていく。初期値は0で、カウントの総数はMaxmumCountで指定することができる。つまり、MaxmumCountで3を選ぶと、0,1,2,0,1,2,...というように変数が動く。

このような3つ以上の整数でラベルされる要素を切り替えるのはOption Pickerパッチで実現できる。Option PickerもIf Then Elseと同様にして返り値の型を選択することができる。また歯車のマークからNumber Of Inputsを選択することができ、Optionの総数をこれで制御できる。 f:id:Tatsupuri:20201007162018p:plainf:id:Tatsupuri:20201007162022p:plain

マテリアルを制御する

最後に、これらをMaterialに出力する。以下では色が2つの場合を想定して書く。色を変えたいMaterialをAssetの一覧から選択した上でInspectorからTexture プロパティのパッチを作成する。If Then Elseからの出力をMaterialのパッチにつなげばタップによって色が変わることを確認できる。マテリアルにはBase Colorも選ぶことができる。つまりBase Colorの色とTextureをBlendしたものが出力されることに注意する。 f:id:Tatsupuri:20201007162013p:plain

シミュレーターを用いた動作確認の方法

シミュレーターから動作確認をしたいときは以下のようにすれば良い。シミュレーターの右上の三本線をクリックすると下図のような選択肢が出てくるのでSimilate Touchを選択する。するとシミュレーターの上でマウスをクリックすることで「タップ」を実行できるようになるので、これを用いて動作確認を行う。 f:id:Tatsupuri:20201007162009p:plain

まとめ

今回も前回に引き続きPatch Editorを用いることでインタラクティブなエフェクトを作成した。今回は特にマテリアルの値を制御する方法を紹介した。