ソースに絡まるエスカルゴ

貧弱プログラマの外部記憶装置です。

【Blender】Blender2.8でグリーンバックの合成

 今回はタイトルにある通りBlender2.8でグリーンバックの合成のやり方です。

 グリーンバックの合成と書いてありますが、指定する色を変更すればどんな色でも抜くことができます。

 では始めます。


0:素材を準備する
 なんでも良いのでグリーンバックの動画と合成する動画を準備します。

 面倒な場合は今回の記事で使用した素材を以下にまとめていますので、ダウンロードして解凍して使ってください。


1:Compositing画面を開く
 Blenderを起動してCompositingタブを選択します。
f:id:rikoubou:20190910171913p:plain

 Compositing画面に切り替えたら「Use Nodes」にチェックを入れてノードを表示させます。
f:id:rikoubou:20190910172133p:plain

 ノードを表示させたら「Render Layers」のノードをクリックで選択した状態で右クリックをし、出てきたメニューから「Delete」を選択してノードを消します。
f:id:rikoubou:20190910172446p:plain
f:id:rikoubou:20190910172618p:plain

 下の画面のEditor Typeのプルダウンから「Image Editor」を選択します。
f:id:rikoubou:20190910172834p:plain

 Image Editor画面に切り替えたら中央上にあるプルダウンから「Render Result」を選択します。これで下画面にレンダリングした結果が表示されます。
f:id:rikoubou:20190910173055p:plain

 以下のような状態にしてからノードを繋いでグリーンバックの合成をやっていきます。
f:id:rikoubou:20190910173227p:plain


2:グリーンバックを合成するノードを作成する
 1の準備ができたら「Shift + Aキー」を押して出てきたメニューから「Input」→「Movie Clip」を選択してノードを追加します。
f:id:rikoubou:20190910173443p:plain

 Movie Clipノードが追加されるので「Open」のボタンをクリックして動画ファイルを開きます(グリーンバックではない方の動画を指定)。
f:id:rikoubou:20190910173755p:plain
f:id:rikoubou:20190910173804p:plain

 続いて同じようにMovie Clipノードをもう一つ追加し、グリーンバックの動画を指定します。
f:id:rikoubou:20190910173957p:plain

「Shift + Aキー」を押して出てきたメニューから「Matte」→「Keying」を選択してノードを追加します。
f:id:rikoubou:20190910174212p:plain

 Keyingノードが追加されるので、以下のようにそれぞれImageの部分にノードを繋ぎます。
f:id:rikoubou:20190910174507p:plain

 ノードを繋いだら一度「Render Image」をしてレンダリングします。するとレンダリングした結果(Compositeノードの結果)が下画面に表示されます。
f:id:rikoubou:20190910174829p:plain

 ここまで出来たらKeyingの「Key Color」をクリックして緑色に変更します。
f:id:rikoubou:20190910175144p:plain

 するとレンダリング結果が緑色が抜かれた状態になります。
f:id:rikoubou:20190910175328p:plain

 あとはこれを別の動画に合成していきます。

「Shift + Aキー」を押して出てきたメニューから「Color」→「Alpha Over」を選択してノードを追加します。
f:id:rikoubou:20190910175540p:plain

 追加したAlpha Overノードの上のImageに元となる動画を、下のImageに合成したい動画を繋げます。するとレンダリング結果として合成された画面になります。
f:id:rikoubou:20190910180022p:plain

 この状態でアニメーションの書き出しを行います。
f:id:rikoubou:20190910180801p:plain

 すると以下のようにちゃんと合成された状態で出力されます。

 今度はKeyingの「Key Color」をクリックして赤色に変更してみます。
f:id:rikoubou:20190910181147p:plain

 すると以下のように赤色部分だけが抜かれた状態で出力されます。

 つまりKeyingの「Key Color」の色を調節すればどんな色でもその部分を抜いて合成することができます。


おまけ:不透明度などの調整
 Alpha Overのノードで合成した結果、グリーンバックで合成する方の動画が微妙に透けてる場合があります。

 その場合は以下のようにKeyingノードの「Screen Balance」、「Despill Factor」、「Dispill Balance」の値をすべて1にすると元の動画通りの不透明な状態での合成になります。
f:id:rikoubou:20190910181624p:plain

 また不透明度を調節したい場合はAlpha Overの「Fac」の値で調節できます。
f:id:rikoubou:20190910182155p:plain


 以上がBlender2.8でのグリーンバック合成の方法です。

 背景が単一の色であれば抜いて合成することができるので、色々と役に立ちそうです。


・参考資料

【Blender】Blender2.8で動画にテキストを表示させる

rikoubou.hatenablog.com

 以前の記事でBlender2.8で簡単な動画編集の方法を紹介しましたが、今回はそれにテキストを表示させる方法です。

 では始めます。


1:テキストを表示させる
 Video Editing画面を開いて動画を読み込んだ状態から始めます。
f:id:rikoubou:20190906170113p:plain

「Add」をクリックして「Text」を選択します(Shift+Aキーでも同じメニューが出てきます)。
f:id:rikoubou:20190906170259p:plain

 すると「Text」というバーが追加されます。
f:id:rikoubou:20190906170544p:plain

 Textバーを選択すると右側の「Strip」タブに詳細な設定項目がでてきますが、基本的には以下の部分がわかっていれば良いかと思います。
f:id:rikoubou:20190906171200p:plain

 表示する文字は日本語も設定できます。日本語が入力できない場合は別のテキストエディタに文章を書いてからコピペしてください。

 ちなみに以下のように設定すると画面の真ん中に「Blenderはいいぞ!」の文字が表示されます。
f:id:rikoubou:20190906171612p:plain

 もちろん「Opacity」の値や「Location X, Y」の値をキーフレームに登録したりして効果を付けることも可能です。

 また「Shadow」のところにチェックを入れると文字に影をつけることもできます。

 実際に処理を付けてみた結果が以下になります。
f:id:rikoubou:20190906172431g:plain


 以上が動画にテキストを表示させる方法です。

 フォントの項目もあるのでフォントファイルを指定すればおそらくフォントも変更できます。
 その他にも色々と機能はあるようなので、触っていきたいです。

【Blender】Blender2.8で動画編集

 動画編集ソフトはフリーのものも色々ありますが、Blender2.8でも動画編集ができるのでやってみた備忘録になります。

 では始めます。


0:素材を準備する
 なんでも良いので動画や画像、音源などを準備します。

 面倒な場合は以下のファイルをダウンロードして解凍してください。本記事で使った素材がすべて入っています。


1:Video Editing画面を表示させる
・起動直後の画面から表示させる方法
 Blender2.8を立ち上げたときに出てくる中にあるVideo Editingをクリックします。
f:id:rikoubou:20190903155340p:plain

 以下のようにVideo Editing画面が表示されます。
f:id:rikoubou:20190903155648p:plain

ワークスペースタブを追加して表示させる方法
 Video Editingではなく別のものを選んで起動させてしまった場合です。

 画面上部にあるタブの「+」をクリックします。
f:id:rikoubou:20190903160218p:plain

 追加する項目が出てくるので「Video Editing」→「Video Editing」を選択します。
f:id:rikoubou:20190903160409p:plain

 Video Editingタブが追加されるので、そこを選択すると以下のようにVideo Editing画面が表示されます。
f:id:rikoubou:20190903161054p:plain


 ちなみにちょっとした効果を入れる時にDope Sheetも使うので、左上の画面はプルダウンから「Dope Sheet」を選択しておくと良いです。
f:id:rikoubou:20190903162111p:plain

 以降はこのVideo Editing画面で動画編集をしていきます。


2:ファイルを読み込みとちょっとした説明
 画像、音声、動画のすべてにおいて以下の赤枠部分にファイルをドラッグ&ドロップすればファイルが読み込まれます。
f:id:rikoubou:20190903162459p:plain

 実際にやると以下のようになります。
f:id:rikoubou:20190903162749g:plain

 また画像(紫)、音声(緑)、動画(青)というファイルの種類ごとに追加されるファイルのバーの色が違います(動画に音声が含まれている場合は青と緑の2つのバーが同時に追加されます)。
f:id:rikoubou:20190903163434p:plain

 左側にある数字はいわゆるレイヤーで、1にあるものが一番下に表示され、数字が上がるにつれて前に表示されます。
f:id:rikoubou:20190903163835p:plain

 実際にバーをドラッグしてレイヤーを変更すると表示の順番が変更されます(音声は画像などがないのでどのレイヤーでも基本的に問題はないです)。
f:id:rikoubou:20190903163924g:plain

 各バーの左右の矢印部分をクリックした後に延長するようにドラッグすると以下のように最後の1コマの部分のみが表示されるようになります。
f:id:rikoubou:20190903164513g:plain

 またドラッグによってバーを縮めることにより、表示を短くすることもできます。

 再生ボタンをクリックしてみると、音楽付きで動画がレイヤーの順番で重なって再生されます。
f:id:rikoubou:20190903165050p:plain


3:効果を加える
 ファイルの読み込みやレイヤーのことがなんとなくわかったところで、とりあえず以下のように適当に素材を並べた状態にします。
f:id:rikoubou:20190903170709p:plain

 この状態で再生すると以下のようになります(gifなので音はありませんが実際には流れています)。
f:id:rikoubou:20190903170844g:plain

 このままだとただレイヤーの順番で表示させているだけなので、フェードインなどの効果を加えていきます。

・フェードイン/フェードアウト
 画像のlogoが表示される最初のフレームまで移動させた後、logoのバーをクリックして選択して右側の「Opacity」の値を0にして「i」キーでフレーム登録します。
f:id:rikoubou:20190903171652p:plain

 続いてフレームを適当に先に進め、右側の「Opacity」の値を1にして「i」キーでフレーム登録します。
f:id:rikoubou:20190903171935p:plain

 この状態で再生すると以下のように画像のlogoがフェードインで表示されるようになります。
f:id:rikoubou:20190903172200g:plain

 逆に「Opacity」の値を1から0に変化させるようにするとフェードアウトするような表示になります。

・スライドイン/スライドアウト
 logoの終りの方にスライドアウトっぽい処理を入れていきます。

 登録したいフレームまで移動させて右側の「Crop」にチェックを入れ「Bottom」のところで「i」キーを押してキーフレーム登録します。
f:id:rikoubou:20190903172744p:plain

 続いてlogoの最後のフレームまで移動させて「Bottom」の値を画面からロゴが消えるまでの値に変更し「i」キーを押してキーフレーム登録します。
f:id:rikoubou:20190903173224p:plain

 この状態で再生すると以下のように下にスライドアウトするような形になります。
f:id:rikoubou:20190903173524g:plain

 値を逆にすればスライドインになりますし、方向もTopやleftなどの値を設定することで変更できます。

 これらの効果は動画のバーに対してももちろん設定可能です。

 とりあえず適当に以下のように光の輪の動画の方にも処理を入れてみました。
f:id:rikoubou:20190903174520g:plain


4:音付きでアニメーション出力する
 動画ができたら音付きでアニメーション出力します。

 いつものアニメーションの出力の設定に「Audio Codec」のプルダウンから「AAC」を選択します。
f:id:rikoubou:20190903174932p:plain

 あとはいつものようにRender Animationをクリックすれば音付きで出力されます。
f:id:rikoubou:20190903175052p:plain

 実際に出力した結果は以下のようになります。


 以上がBlender2.8で動画編集をする方法です。

 この他にも色々機能はあると思いますが、簡単な動画編集ならBlender2.8だけでも完結できそうですね。


・参考資料

【Blender】Blender2.8で光るエフェクトっぽいものを作ってみる

www.youtube.com

 今回はこの動画の通りにやっていった備忘録です。詳しい手順は動画を参照してください。

 では始めます。


1:Planeを作成してEeveeの設定をする
 Blender2.8を起動させていつものようにデフォルトキューブを削除します。

「Shift + Aキー」を押して「Mesh」→「Plane」でPlaneを追加します。
f:id:rikoubou:20190816145802p:plain

 Cameraを選択した状態で「Object」タブを開いて「Location」のX,Yを両方0、Zのみを5にし、「Rotation」の値をすべて0に設定します。
f:id:rikoubou:20190816150106p:plain

 この状態でテンキーの「0」を押すとPlaneを真上からみた状態になります。
f:id:rikoubou:20190816150334p:plain

 Planeを選択し、「Object」タブを開いて「Scale」のXとYの値を調節してカメラの範囲全体にPlaneが映るように調節します。
f:id:rikoubou:20190816150714p:plain

 そこまでできたら「Light」を選択してから右クリックをし「Delete」を選択してLightを削除します。
f:id:rikoubou:20190816150928p:plain

 次にEeveeの設定をしていきます。

「Render」タブを開きRender Engineを「Eevee」にして「Ambient Occlusion」、「Bloom」、「Screen Space Reflections」にチェックを入れます。
f:id:rikoubou:20190816151509p:plain

 続いて「World」タブを開いて「Color」のところをクリックして色を黒に変更します。
f:id:rikoubou:20190816152008p:plain

 これですべての準備ができたので、Planeに設定するマテリアルのノードを作成していきます。


2:Planeに設定するマテリアルをノードで作成する
 1までできたら「Shading」タブを選択します。
f:id:rikoubou:20190816154426p:plain

「Shading」画面に切り替わります。
f:id:rikoubou:20190816154603p:plain

 Planeを選択し、Viexport Shadingを「Rendered」にしてテンキーの「0」を押します。これでレンダリング後のカメラから見た状態を確認できるようになります。
f:id:rikoubou:20190816154819p:plain

 Planeを選択した状態で「New」ボタンをクリックします。
f:id:rikoubou:20190816155128p:plain

 ノードが追加されます。
f:id:rikoubou:20190816155219p:plain

 Shader Editor上で「Shift + Aキー」を押して「Shader」→「Mix Shader」を選択して追加します。
f:id:rikoubou:20190816155427p:plain

 続いて「Shift + Aキー」を押して「Shader」→「Emission」を選択して追加します。
f:id:rikoubou:20190816155620p:plain

 以下のようにノードを繋ぎます。
f:id:rikoubou:20190816155733p:plain

 EmissionのColorを青っぽい色に、Strengthの値を3に設定します。
f:id:rikoubou:20190816155901p:plain

 これでPlaneが青色っぽく光る感じになります。
f:id:rikoubou:20190816155942p:plain

「Shift + Aキー」を押して「Converter」→「ColorRamp」を選択して追加します。
f:id:rikoubou:20190816160152p:plain

 ColorRampのColorとMix ShaderのFacを繋ぎます。
f:id:rikoubou:20190816160348p:plain

「Shift + Aキー」を押して「Texture」→「Noise Texture」を選択して追加します。
f:id:rikoubou:20190816160539p:plain

「Shift + Aキー」を押して「Texture」→「Voronoi Texture」を選択して追加します。
f:id:rikoubou:20190816160812p:plain

 以下のようにノードを繋ぎます。
f:id:rikoubou:20190816161012p:plain

 これで波紋のような模様が表示されるようになります。
f:id:rikoubou:20190816161119p:plain

「Shift + Aキー」を押して「Vector」→「Mapping」を選択して追加します。
f:id:rikoubou:20190816161300p:plain

「Shift + Aキー」を押して「Input」→「Texture Coordinate」を選択して追加します。
f:id:rikoubou:20190816161620p:plain

 以下のようにノードを繋ぎます。
f:id:rikoubou:20190816161820p:plain

 この状態でColorRampの閾値とVoronoi TextureのScaleの値を変更すると、以下のように円をはっきりさせたり表示する範囲を設定したりできます。
f:id:rikoubou:20190816162216g:plain

 ColorRampの「Linear」のプルダウンから「Constant」を選択します。
f:id:rikoubou:20190816162740p:plain

 見栄えが良くなるよう、以下のように調節します。
f:id:rikoubou:20190816163427p:plain

「Shift + Aキー」を押して「Texture」→「Noise Texture」を選択して追加します。
f:id:rikoubou:20190816163906p:plain

「Shift + Aキー」を押して「Color」→「MixRGB」を選択して追加します。
f:id:rikoubou:20190816164034p:plain

 以下のようにノードを繋ぎ、MixノードのFacの値を「0.7」に設定します。
f:id:rikoubou:20190816164534p:plain

 するとはっきりとしていた線が波打つような感じになります。
f:id:rikoubou:20190816164620p:plain

 MappingのLocationの値を設定して画面の中心に円の中心が来るように調節します。
f:id:rikoubou:20190816164815p:plain

 この状態でNoise Textureの「Distortion」の値を変更させると、以下のように波打つ感じになります。
f:id:rikoubou:20190816165055g:plain

 あとはこのNoise Textureの「Distortion」の値をキーフレーム登録してアニメーションさせれば完成です。

 ちなみに変形させたPlaneに合わせた図形のかたちになっている(歪んでいる)のが気になる場合は、以下のようにPlaneを選択した状態で「Object」→「Apply」→「Scale」とすることで変形させたPlaneの形を基準とすることで解決できます。
f:id:rikoubou:20190816170929p:plain
f:id:rikoubou:20190816171058p:plain


 以上がBlender2.8で光るエフェクトっぽいものの作り方です。

 もっとShading Editorを勉強して色々作れるようになりたいです…


・参考資料

【Blender】Blender2.8でセルシェーディングのコンポジットをやってみる

www.youtube.com

 今回はこの動画を見つつコンポジットをやってみました。基本的には動画の通りに進めていけば大丈夫です。

 ただしBlender2.8だと少し追加の手順が必要だったりしたのでその点も踏まえての備忘録になります。

 では始めます。


0:オブジェクトとマテリアルの準備をする
 動画にある通りにオブジェクトを並べてマテリアルで色の設定をして以下のようにします。
f:id:rikoubou:20190801163129p:plain

 面倒な場合はここまでできたファイルを以下に公開しておくのでダウンロードしてください。

 以降はこのファイルを使っていく前提で進めていきます。


1:Compositing画面を開いてノードを使えるようにする
 オブジェクトの準備ができたらCompositing画面を開きます。

「Compositing」のタブを選択します。
f:id:rikoubou:20190801165137p:plain

 コンポジット用の画面になるので下画面の「Editor Type」のプルダウンから「Image Editor」を選択します。
f:id:rikoubou:20190801165331p:plain

 下画面が「Image Editor」に切り替わったらプルダウンから「Render Result」を選択します。
f:id:rikoubou:20190801165542p:plain

 こうしておくことで下画面でコンポジットした結果を確認できるようになります。

 次にCompositor画面の上の方にある「Use Nodes」にチェックを入れます。
f:id:rikoubou:20190801165910p:plain

 すると以下のようにノードが表示されて使えるようになります。
f:id:rikoubou:20190801170014p:plain

 この状態で「Render Layers」の「Render」ボタンを押すとノードを使ってコンポジットした結果が得られます。
f:id:rikoubou:20190801170237p:plain
f:id:rikoubou:20190801170435p:plain

※注意:「Render」ボタンでの出力結果についてノードの処理が行われるので、オブジェクト、マテリアル、カメラ位置などの変更やレンダーエンジンを変更した際などは毎回「Render」ボタンを押してレンダリング結果を得る必要があります。


2:Cyclesレンダーに切り替える
 Eeveeレンダーだと動画通りに設定できない項目があったのでCyclesレンダーに切り替える必要があります。

「Render」アイコンをクリックして「Render Engine」のプルダウンから「Cycles」を選択して切り替えます。
f:id:rikoubou:20190801171057p:plain
f:id:rikoubou:20190801171149p:plain

 Cyclesレンダーに切り替えたら「View Layer」アイコンを選択してDateの「Normal」にチェックを入れ、Lightの「DiffuseのColor」を選択し、「Shadow」にチェックを入れます。
f:id:rikoubou:20190801172008p:plain

 するとRender Layersにチェックを入れた項目が追加されます。
f:id:rikoubou:20190801172305p:plain

 Cyclesレンダーに切り替え、項目も追加したので「Render」ボタンを押して再度レンダリング結果を得ておきます(Cyclesレンダーになっているのでレンダリングに時間がかかる場合があります)。
f:id:rikoubou:20190801172732p:plain

 これでようやく準備は終わりで実際にノードを作成していきます。


3:輪郭線を抽出する
※輪郭線を出すためには「Depth(深度)」と「Normal(法線)」があればできるので「Eeveeレンダー」のままでも可能です。

 Compositor画面上で「Shift + Aキー」を押して「Vector」→「Normalize」を選択します。
f:id:rikoubou:20190801173109p:plain

「Normalize(正規化)」のノードが追加されます。
f:id:rikoubou:20190801173251p:plain

 次に「Shift + Aキー」を押して「Filter」→「Filter」を選択します。
f:id:rikoubou:20190801173457p:plain

「Soften」というノードが追加されますが、これはプルダウンによって名前が変更される「Filter」ノードです。
f:id:rikoubou:20190801173621p:plain

 プルダウンから「Prewitt」を選択します。
f:id:rikoubou:20190801173938p:plain

「Shift + Aキー」を押して「Converter」→「ColorRamp」を選択します。
f:id:rikoubou:20190801174607p:plain

「ColorRamp」を追加したら動画と同じようにノードを繋ぎ、その結果が下画面に表示されます。
f:id:rikoubou:20190801174802p:plain

 輪郭線だけ抽出したいので以下のようにColorRampの範囲を調節します。
f:id:rikoubou:20190801175300g:plain

 スザンヌや球体の線が途切れたりしてますが、とりあえず以下のようになりました。
f:id:rikoubou:20190801175506p:plain

 次に「Shift+左クリック」で「Prewitt」と「ColorRamp」の両方を選択した状態で「Ctrl+C」、「Ctrl+V」でノードをコピペします。
f:id:rikoubou:20190801175925p:plain

 コピペしたら同じ場所にノードが重なった状態になるので、左クリックでドラッグして位置を移動させます。
f:id:rikoubou:20190801180042g:plain

 以下のようにノードを繋いで「ColorRamp」の値を調節します。
f:id:rikoubou:20190801180455p:plain

 動画にもあるようにこの「Depth(深度)」と「Normal(法線)」片方ずつでは抽出できない輪郭線を両方出して合わせることによって、全体の輪郭線を出すようにしています。

 ここまで出来たら「Shift+Aキー」から「Converter」→「Math」を選択して追加します。
f:id:rikoubou:20190801180810p:plain

 これもプルダウンによってノードの名前が変更されますが「Math」のノードです。
f:id:rikoubou:20190801181001p:plain

「Add」ノードの「Clamp」にチェックを入れて以下のようにノードを繋ぐと両方の輪郭線が合わさった状態になります。
f:id:rikoubou:20190801181319p:plain

 これで輪郭線の抽出ができました。


4:テクスチャ素材を作成する
 続いてテクスチャ素材を作成していきます。

 Editor Typeのプルダウンから「Texture Node Editor」を選択して画面を切り替えます。
f:id:rikoubou:20190802145104p:plain

 Texture Node Editor画面に切り替わったら「Texture Type」プルダウンから「Brush」を選択します。
f:id:rikoubou:20190802145306p:plain

 Brushを選択したら「New」ボタンをクリックして新規Textureを作成します。
f:id:rikoubou:20190802145510p:plain

 Texture名を「Cloud_Soft」に変更し「Use Nodes」にチェックを入れてノードを表示させます。
f:id:rikoubou:20190802145851p:plain

「Checker」ノードをクリックで選択して「X」キーで削除します。
f:id:rikoubou:20190802150109p:plain

「Shift + Aキー」で「Texture」→「Clouds」を選択して「Clouds」ノードを追加します。
f:id:rikoubou:20190802150404p:plain

 追加した「Clouds」ノードを赤枠の「Color」に切り替え、Outputと繋ぎます。バグなのか結果画像が表示されませんが、実際にはちゃんとテクスチャが作られています。
f:id:rikoubou:20190802150937p:plain

 次のテクスチャ素材を作るために「New Texture」ボタンをクリックします。
f:id:rikoubou:20190802151250p:plain

 先ほどと同様に「Cloud_Hard」に名前を変更してCloudsノードを追加して赤枠の「Hard」に切り替え、Outputに繋ぎます。
f:id:rikoubou:20190802151515p:plain

 最後に影部分の線のテクスチャ素材を作ります。

「New Texture」ボタンをクリックします。
f:id:rikoubou:20190802151250p:plain

「Line」に名前を変更し、Checkerノードを削除します。
f:id:rikoubou:20190802151901p:plain

「Shift + Aキー」で「Texture」→「Wood」を選択して「Wood」ノードを追加します。
f:id:rikoubou:20190802152111p:plain
 
「Wood」ノードの赤枠の「Tri」に切り替え「Turblenc」の値を0.5に変更してOutputに繋ぎます。
f:id:rikoubou:20190802152415p:plain

 すべてのテクスチャ素材ができたら、それぞれもテクスチャで「Fake User」ボタンを押してテクスチャ素材をblendファイル内に保存します。
f:id:rikoubou:20190806143032p:plain

 これでテクスチャ素材は完成したので「Editor Type」プルダウンから元の画面に戻します。
f:id:rikoubou:20190802152650p:plain


5:影にLineテクスチャを適応させ輪郭線を合成する
 Compositor画面に戻って「Shift + Aキー」から「Input」→「Texture」を選択してTextureノードを追加します。
f:id:rikoubou:20190802153155p:plain

 追加したTextureノードのテクスチャを「Line」に設定します。
f:id:rikoubou:20190802153410p:plain

 TextureノードのColorをCompositeに繋ぐと以下のような結果になります。
f:id:rikoubou:20190802153618p:plain

「ColorRamp」を間に追加して線の調節をします。
f:id:rikoubou:20190802153910p:plain

 このままだと線が太すぎるので「Shift + Aキー」から「Input」→「Value」を選択してValueノードを追加します。
f:id:rikoubou:20190802154102p:plain

 Valueノードの値を10に変更し、TextureノードのScaleに繋いで線を細くします。
f:id:rikoubou:20190802154335p:plain

 可読性を上げるために「Shift + Aキー」から「Layout」→「Frame」を選択してFrameノードを追加します。
f:id:rikoubou:20190802154655p:plain

 Frameノードを追加したらまとめたいノードを「Shift+クリック」で複数選択してFrameの中にドラッグすることでまとめられます。
f:id:rikoubou:20190802154844g:plain

 Compositor画面のItemタブの「Label」の項目を入力するとFrame名を変更できます。
f:id:rikoubou:20190802155217p:plain

 影部分のテクスチャ設定ができたので実際の影部分に適応させます。

「Shift + Aキー」から「Converter」→「Math」を選択してノードを追加します。
f:id:rikoubou:20190802155632p:plain

 追加したAddノードの「Clamp」にチェックを入れてShadowの出力と「Render Layers」の「Shadow」の出力を合わせると以下のように影部分が斜線になります。
f:id:rikoubou:20190802155820p:plain

 次にこの影と輪郭線を合わせていきます。

「Shift + Aキー」から「Converter」→「Math」を選択してノードを追加します。
f:id:rikoubou:20190802161641p:plain

 追加したMathノードをプルダウンから「Subtract」(減算)に変更します。
f:id:rikoubou:20190802161843p:plain

 影の出力を上側、輪郭線の出力を下側に繋ぐと以下のように輪郭線と影の斜線が合成された状態になります。
f:id:rikoubou:20190802162157p:plain


6:線をボカす
「Shift + Aキー」から「Input」→「Texture」を選択してノードを追加します。
f:id:rikoubou:20190802163644p:plain

 追加したTextureノードに「Cloud_Hard」を設定します。
f:id:rikoubou:20190802163845p:plain

 続いて「Shift + Aキー」から「Filter」→「Bokeh Blur」を選択してノードを追加します。
f:id:rikoubou:20190802163957p:plain

 追加したBokeh Blurノードの「Variable Size」にチェックを入れて以下のように繋ぐと線がボケていることがわかります。
f:id:rikoubou:20190802164241p:plain

 ボケを調節するために「Shift + Aキー」から「Converter」→「Math」を選択してノードを追加します。
f:id:rikoubou:20190802164447p:plain

 追加したノードを「Multiply」(乗算)に変更し「Clamp」にチェックを入れて以下のように繋ぎ、Bokeh BlurのMax Blurを8にします。
f:id:rikoubou:20190802164834p:plain

「ColorRamp」を追加して調節して線の幅を調節します。
f:id:rikoubou:20190802165136p:plain

「Frame」を追加して「Bokeh Blur」としてまとめます。
f:id:rikoubou:20190802165437p:plain


7:線を歪める
 次に線を歪める処理を入れていきます。

「Shift + Aキー」で「Input」→「Texture」を選択してノードを追加します。
f:id:rikoubou:20190806143253p:plain

 追加した「Texture」ノードのテクスチャを「Cloud_Soft」に設定します。
f:id:rikoubou:20190806143515p:plain

「Shift + Aキー」で「Distort」→「Displace」を選択してノードを追加します。
f:id:rikoubou:20190806143657p:plain

 続いて「Shift + Aキー」で「Color」→「Mix」を選択してノードを追加します。
f:id:rikoubou:20190806143946p:plain

 追加したノードのプルダウンから「Subtract」(減算)を選択します。
f:id:rikoubou:20190806144209p:plain

 次に「Shift + Aキー」で「Input」→「Value」を選択してノードを追加します。
f:id:rikoubou:20190806144413p:plain

 これらのノードを以下のように繋ぐと、色がまだらな感じの画像になります。
f:id:rikoubou:20190806144629p:plain

 Displaceノードに6の結果をImageに、まだらな画像の結果をVectorに繋いで、XScale、YScale共に10に設定すると以下のように線が少し歪みます。
f:id:rikoubou:20190806145150p:plain

 ノードを選択した状態で「M」キーを押すことで選択ノードの影響あり/なしを切り替えて確認することもできます。
f:id:rikoubou:20190806145419p:plain

「Frame」を追加して「Displace」としてまとめます。
f:id:rikoubou:20190806145711p:plain


8:色をつける
「Shift + Aキー」で「Color」→「Mix」を選択してノードを追加します。
f:id:rikoubou:20190806150149p:plain

 追加したMixノードの「Fac」にDisplaceの結果を、Mixノードの下の「Image」に「Render LayersのDiffCol」を繋ぎます。
f:id:rikoubou:20190806150706p:plain

 以下のように色がつき、線が白くなります。線が白いのは上の「Image」に設定されている色が白色になっているためです。
f:id:rikoubou:20190806150934p:plain

 線の色を変更するために上のImageにあるキャンバスをクリックし、Hexを選んで「2F2F2F」と入力します。
f:id:rikoubou:20190806151253p:plain

 線の色が変更されました。
f:id:rikoubou:20190806151404p:plain


9:ボカす
 線がはっきりしすぎているのでさらにぼかします。

「Shift + Aキー」で「Filter」→「Blur」を選択してノードを追加します。
f:id:rikoubou:20190806151823p:plain

 追加したノードのプルダウンで「Fast Gaussian」を選択し、X、Yの値を両方1に設定、Sizeを2に設定します。
f:id:rikoubou:20190806152021p:plain

 以下のように線が少しぼけた感じになります。
f:id:rikoubou:20190806152214p:plain


10:ノイズをつける
 最後にノイズをつけます。

「Shift + Aキー」で「Color」→「Mix」を選択してノードを追加します。
f:id:rikoubou:20190806152938p:plain

 追加したノードのプルダウンから「Soft Light」を選択します。
f:id:rikoubou:20190806153129p:plain

「Shift + Aキー」で「Input」→「Texture」を選択してノードを追加します。
f:id:rikoubou:20190806153237p:plain

 追加した「Texture」ノードのテクスチャを「Cloud_Soft」に設定します。
f:id:rikoubou:20190806153414p:plain

 ノードを以下のように繋いで「Soft Light」のFacを0.7に設定します。
f:id:rikoubou:20190806153701p:plain

 すると以下のようにCloud_Softの画像が反映された画面になります。
f:id:rikoubou:20190806153800p:plain


11:完成
 実際にレンダリングした結果画像は以下のようになります。
f:id:rikoubou:20190806154219p:plain


 以上がセルシェーディングでのコンポジットをやってみた結果です。

 紹介した動画にはより詳しく説明されているので、より知りたい場合はそちらをご覧ください。

 一応今回作成したblendファイルを公開しておきます。


・参考資料

【Blender】Blender2.8のシェーダーエディタ(旧ノードエディタ)で画像を合成する

 最近Blender2.8のシェーダーエディタ(旧ノードエディタ)を触ってみています。

 今回はタイトルにある通りシェーダーエディタで画像を合成する方法です。

 では始めます。


1:合成する画像を用意する
 今回は以下の3つの画像を合成していきます。画像それぞれをダウンロードして名前を付けて保存してください。

・logo.png
f:id:rikoubou:20190723142321p:plain

・grid.png
f:id:rikoubou:20190729172211p:plain

・map.png
f:id:rikoubou:20190729172201p:plain


2:Blender2.8でシェーダーエディタに画像を読み込む
 画像の準備ができたのでBlenderでノードを組んでいきます。

 Blenderを起動させて出てくるデフォルトキューブを削除し、Planeを追加します。
f:id:rikoubou:20190729175232p:plain

 追加したPlaneを選択した状態で「Shading」タブを選択します。
f:id:rikoubou:20190729175423p:plain

 Shading画面になるので「New」ボタンをクリックしてPlaneにMaterialを追加します。
f:id:rikoubou:20190729175544p:plain

 ノードが追加されるので「Principled BSDF」をクリックで選択して「X」キーを押して削除します。

f:id:rikoubou:20190729175912p:plainf:id:rikoubou:20190729180030p:plain

 シェーダーエディタ上で「Shift + Aキー」から「Texture」→「Image Texture」を選択して追加します。
f:id:rikoubou:20190729180234p:plain

「Image Texture」のノードが追加されるので「Open」ボタンをクリックして画像を読み込みます。
f:id:rikoubou:20190729180519p:plain

 画像を読み込むと以下のようになります。
f:id:rikoubou:20190729180610p:plain
 
 同様にして他の画像についても「Image Texture」を追加して「Open」ボタンから画像を読み込みます。
f:id:rikoubou:20190729180902p:plain

 ちなみにこの状態で「Material Output」の「Surface」にそれぞれのノードの「Color」を繋げてやるとPlaneに画像が表示されます。
f:id:rikoubou:20190729181319g:plain

 これで画像の準備ができました。


3:Blender2.8のシェーダーエディタで画像を合成する
 ではこれらの画像をノードを使って合成していきます。

 シェーダーエディタ上で「Shift+Aキー」を押して「Color」→「MixRGB」を選択して追加します。
f:id:rikoubou:20190729181539p:plain

「Mix」のノードが追加されます。
f:id:rikoubou:20190729181749p:plain

「map.pngのColorをMixのColor1」に「grid.pngのColorをMixのColor2」に「grid.pngのAlphaをMixのFac」にそれぞれ繋ぎます。
f:id:rikoubou:20190729182012p:plain

 この状態で「Material Output」の「Surface」にMixの出力を繋ぐと以下のようにmap.pngの上にgrid.pngが合成された画像になります。
f:id:rikoubou:20190729182314p:plain

 さらにこの結果にlogo.pngも合成する場合も「MixRGB」ノードを追加して「Mixの結果を新たなMixのColor1」に「logo.pngのColorをMixのColor2」に「logo.pngのAlphaをMixのFac」に繋げばOKです。
f:id:rikoubou:20190729182831p:plain

 ちなみにすべてのノードの「AlphaとFac」を繋がない場合だと、以下のようにそれぞれの画像を不透明にした状態で混ざったような形になります。
f:id:rikoubou:20190729183105p:plain


 以上がシェーダーエディタで画像を合成する方法です。

 ノードをどう繋いだらどうなるというのが中々想像できないので難しい印象はありますが、ちょっとずつノードを理解できるようになりたいです。


・参考資料

【映画鑑賞】天気の子の感想(ネタバレあり)

www.youtube.com

君の名は。」で一躍有名になった新海誠監督最新作の「天気の子」を鑑賞しました(記事執筆時点で2回鑑賞しています)。様々なところですでに色々と語れてている本作ですが、自分なりの感想もまとめておこうと思った次第です。

 基本的に「ネタバレを気にしない」方向でいくので注意してください。

 では始めていきます。



1:初鑑賞の衝撃と戸惑い
 初鑑賞時は初日の初回でした。映画館への道のりは小雨だったのに、鑑賞後に映画館を出ると青空が見えるほど晴れていて「これが100%の晴れ女か」などと思ったことを覚えています。

 蒸し暑い帰り道の中で天気の子の感想を考えていて、まず率直に浮かんだのが「道徳的、倫理的にこの作品はどうなの?」という疑問でした。
 主人公である帆高が拳銃という暴力を使ったり、線路を走ったり、廃墟への無断立ち入り等々、違法行為を重ねていくことに対し、個人的にあまり気分の良いものではありませんでした。やっていること全てが自分勝手のように見えてしまっていました。そして最後には「天気なんか狂ったままでいい」という選択をして東京を水没させます。帆高がそこまでの惨事になると想像した上での選択かどうかはわかりませんが、結果としてヒロインの陽菜一人を救うために東京を水没させたというのが作品内での事実です。私は「できる限り最大多数の最大幸福を目指すべき」という考え方をしているため、このラストが衝撃的であると共になかなか受け入れ難いものでした。「一人の青年がセカイに対して想いを貫き通した」という物語はとても好きなのですが、違法行為の数々や東京を犠牲にしてでも一人を守るということに対して正当化するような印象を受けてしまい、好きなのか嫌いなのかよくわからないという状態になっていました。

 しかし、この作品が伝えたかったことを考えていくうちに「自分の見方が一方的なものに過ぎない」ことに気づいてからは一気に好きな作品になりました。


2:常識(マジョリティ)と非常識(マイノリティ)
 この作品のメインとなるキャラクターは家出少年、親のいない子供達、オカルト記事のライターなど特殊な環境、まさにマイノリティ側の人たちばかりです。物語の後半はそんな彼らに警察という常識がどんどん介入していきます。帆高を逮捕してパトカーで輸送している時に警察側がイライラして舌打ちをする描写もありました。
 初回の鑑賞時に感じたモヤモヤは、まさにこの「警察側、常識(マジョリティ)側の見方をしていた」ことによるものだったと思います。警察側は法に則って行動しているだけであり、帆高たちの言動は理解できるものではありません。「最大多数の最大幸福」を考えるのであれば、警察側と同じように受け入れ難く感じると思います。私もそのように感じていました。

 しかし視点をメインのキャラクター、マイノリティ側に移してみると帆高は拳銃をたまたま手に入れてしまったために、陽菜は親が亡くなってしまったのとたまたま天気の巫女になってしまったために、須賀は事故で妻を亡くしてしまったために、それぞれマイノリティ側にならざるをえなかったという背景もあります。「世界なんて元々狂ってるんだからさ」という須賀のセリフにあるように、外的要因によって狂わされた人たちがメインのキャラクターになっているということです。
 そんな彼らの背景を知らないマジョリティ側からすればどうしても苛立ちや拒否感を持ってしまうのだと思います。マイノリティ側とマジョリティ側が対峙する時の溝の表現として拳銃を向けあったり押さえつけたりなど、暴力でしか繋がりを持てないという悲しさも描かれています。これをより拡大して解釈すると、この作品は「マジョリティである大人」と「マイノリティである若者」の対立の話も描いているのではないかと思っています。

 少子高齢化と呼ばれて久しく現代の日本は人口比で見ても若者がマイノリティになっています。その若者が「マジョリティであるセカイを敵に回しても、たった一つの想いを貫き通す」という内容は、マイノリティ側にとってとても力強いエールになっているのではないかと思います。


3:ラストシーンで描かれる希望
 何より救われたと感じたのは、東京が沈んだ後に須賀が言った「お前のせいじゃない。自惚れるな」というセリフです。須賀が天気の巫女の話を信じていてもいなくても、その一言で帆高の気持ちは多少なり楽になったと思います。そしてそれを言える「大人の立場」の須賀という存在自体がマジョリティとマイノリティを繋ぐ希望の象徴のようにも感じられました。

 世界が変わってしまった後の帆高と陽菜が再会してからの最後の言葉「大丈夫だ」というのも非常に力強く勇気を与えてくれます。というのも、帆高は陽菜と再会したことで「世界を変えてしまった」ことを確信しその上で「大丈夫」と言ってる、つまりは「変えてしまった世界」に対する責任を意識しているからこそ出た言葉だと思います。今のセカイを受け入れて「大丈夫」だと、明るい未来へと進んでいこうとしている希望のある終わり方だと思います。


4:まとめ
 ある程度の年齢を重ねてしまっているために、最初の感想として「受け入れ難い」という大人な視点で鑑賞してしまっていました。それ自体が色眼鏡であり、若者の言葉に耳を傾けない古く凝り固まった考え方であったように思います。

 古いしがらみに対して「ぶっ壊してもいい、若者に未来を切り開いてほしい」という純粋な想いが込められている作品だとそう感じました。それに気づいた時、途端に好きな作品になりました。

 若者に対する希望とエールを伝えてくれるこの作品は、ずっと心に残るものになるという予感がしています。
 好きだと言える、そんな「天気の子」という作品に出会えて本当によかったです。
 

・参考資料