透明(透過)マテリアル

マテリアルを透過するというと通常次のようなものをイメージするかもしれない

実際には次のように一部分だけ透明にすることも出来る

※逆に右側は完全に不透明

この記事ではこの使い方の基礎を解説する。

設定方法

マテリアルの結果ノードをクリックして選択しておく

左下にある詳細タブからBlend Mode > Translucentを選択

ちなみにデフォルトではOpaqueとなっているがこれは「不透明」という意味。

Translucentにすると透過用のオパシティというノード項目が有効になる。

オパシティを理解する

まずデフォルトで何もつなげていないと次のようなプレビュー

ただの黒い四角形。

オパシティに0.5を繋いでみよう

この定数が入っている緑ノードをConstant(定数)ノードと言う。

右クリックで現れる検索窓からConstantと入力して探しても良いし、キーボードの1キーを押しながらなにもないところクリックでこのノードが出る。

左下から数値を入れる。

これでオパシティに0.5が入力され全体が半透明になる。

つまり1で不透明、0で完全に透明

ここに入れる数値は1を入れると不透明、0を入れると完全に透明(見えなくなる)

画像を入力する

さて、次のような画像を入力したらどうなるだろうか。

※テクスチャノードのショートカットはTキーを押しながらクリック

白い四角形と黒い四角形が交互にならんでいる。

結果は次のようになる。

右上と左下だけ切り抜かれて残っている(左上、右下が透過された)

若干ここで理解ができなくなるかもしれない。

オパシティに画像が入力された場合、画像の黒い部分は完全に透過され、白い部分は透過されない。

分かりにくいのでもう一度

元画像が黒なのでわかりにくくなっているのでちょっとカラーを入れてみよう。

※カラーを扱うノードは3キーを押しながらクリックで出せる。

何度も言うが、オパシティの「白」になっている部分だけ残り「黒」の部分は透明になってしまう。

更にもう一例

まだわからないかもしれないのでもう一例。

こんどはオパシティを星の白黒画像にした。

星型に切り抜かれているのがわかるとおもう。

グレーを入れるとどうなる？

この中間のグレーを含む画像を入れるとどうなるだろうか。

なんとなく分かるかもしれないが結果は次のようになる。

グレーになっている部分(円のフチ)が半透明になっている。

完全に黒になっている四角形の隅は透明になるという結果だ。

オパシティに色を入れると？

このオパシティにはグレースケールの画像を使うようにしよう。

次のようにカラーを入れてもその濃淡によってオパシティは機能するが、色そのもの(赤や青の区別)には意味がない。

作る側が混乱するので基本は使わない。

Maskedというのもある

Translucentの他にもMaskedというのもよく使う。

オパシティマスク

Translucentの場合はオパシティだったが、Maskedの場合ノードの接続先はオパシティマスクへ名前が変わるので注意しよう。

TranslucentとMaskedの違い

基本的にTranslucentと同じで黒が透明、白が不透明。

ただMaskedは中間のグレーが使用できないという違いがある。

例えば次のノードだと

グレーは無視され白か黒かで透明/不透明が決まる。

したがって完全にフチがはっきりした状態で切り抜かれる。

Maskedのメリット

MaskedはTranslucentより処理が軽いという大きなメリットがある。

TranslucentではなくMaskedで十分な場合はこちらを使おう。

※Opaqueが最も軽いので透過しない場合はMaskedもTranslucentも使わないようにする。

※Translucentと比べると結果ノードのNormalや屈折などの接続できる項目が変化するがこれは記事の目的とちがうので解説しない。

基本は以上

基本の基本は以上。

では次は応用として、超簡単なディゾルブエフェクトを作ってみる。

応用：ディゾルブするマテリアル

ここからは応用の作例。

覚える必要はないが興味ある人は読んでほしい。

CGだと次のような溶けていくようなエフェクトをディゾルブと呼んでいる事が多いと思う。

ゲームなどではもっと複雑な溶け方をするが、これが最もシンプルな例かと思う。

使用ノード

簡単に解説する。

BoundingBoxBased_0-1_UVW

これは単体のノードではなくマテリアルファンクションノードといって、更にこのノードの中に別のノード郡が入っているモノ。

※UE側がこういうまとまりをいくつも用意してくれているので利用することは多い。

このノード単体で見てみると次のような効果。

Rの値から引っ張っると右が黒、左に行くにつれて白になるというカラーを出している。

Gだと前後、Bだと上下で変化する。

ということでこのノードをオパシティに使えば「右から左」「上から下」というように順番に登場エフェクトを作ることが出来る。

Addで境界線をコントロール

上のノードはアニメーションしていないので、そのままオパシティに繋ぐと一部分が透明になって静止しているだけだ。

消えていく「アニメーション」はどうすればよいか。

その処理が次。

まずTime > Sineの繋がりは-1 ~ 1 の数値を行き来するノードの組み合わせ。よく使う。

これを先程のBoundingBoxBased_0-1_UVWにAdd(加算)するとどうなるだろうか。

-1 ~ 1の値変化させて加算すると黒の境界線が行き来するアニメーションが完成する。

初心者にはこの理解が難しいが、こういう加算(Add)は次で解説しているので参考にしてもらえたらと思う。

【マテリアル基礎】Addノードとは【Unreal Engine】 | 謎の技術研究部

境界線をコントロールする手法の一つ

このようにAddを使うのは境界線をコントロールする手法の一つだ。更に複雑にして使うこともある。

完全に理解できなくても良いので白と黒の境界線をコントロールすることでディゾルブが生まれているということは頭の片隅に置いてもらえたらと思う。

CheapContrast

CheapContrastというノードもマテリアルファンクションだが、よく使うもの。

これは非常にシンプルでコントラストをはっきりさせるノード。

つまり白と黒の境界線をよりクッキリさせる効果がある。

下側にコントラストの強さを入れる。

白と黒の境界線(グレー)がなめらかなグラデーションとなっている場合は非常に輪郭がぼやけたディゾルブになってしまうため、このノードを使って輪郭をはっきりしている。

※Contrastにより大きい数値を入れるとよりハッキリする。

注意点としては、どんな色のテクスチャをいれてもすべてグレースケールに変換されるという点だけ気をつけたい。

以上

今回はマテリアルの透過の基礎を解説した。

エフェクトを作る場合はかなりの頻度でこの概念を使うので絶対に覚えておきたい。