KLabエンジニアが解説　RenderTextureの正しいアルファ値を導く方法

RenderTextureとは何か？

中島将浩氏（以下、中島）：では、よろしくお願いします。KLab株式会社のクライアントエンジニア、中島が発表いたします。

（会場拍手）

ありがとうございます。自己紹介させていただきます。

（会場笑）

この写真の元ネタが実はあるんですけど、元ネタがわかる人は私と仲良くなれるはずです。

もともと大学で数学を専攻していて、専門学校に入ってコンピュータグラフィックスとかゲームのプログラムを勉強して、この会社にクライアントエンジニアとして入社しました。2016年入社なので、さっきの鈴木くんと同期です。

得意分野はグラフィック周辺や、設計・ロジックで、主にクライアントサイドです。C++やC#などを書いてます。好きなゲームはアクション、音ゲー、JPRGと、古き良きRPGが大好きです。

突然ですがみなさん、RenderTextureに書き込まれているα値を気にしたことはありますか？

（会場挙手）

お、けっこう何人か！　でも意外と気にしてる人は多くなくて。とりあえずRenderTextureとは何ぞや？　という話をします。先ほどの鈴木くんの発表で、「カメラで写したものをテクスチャにして」と言ってたあれのことです。

普通はカメラを置いて画面に物を描きますが、代わりにテクスチャに描く技術のことです。これは当然テクスチャでもあるので、ポリゴンに貼り付けることができます。すると、テレビモニタのような演出ができたりとか。先ほど鈴木くんがやったようなピクセル単位の処理をするために描いたり、ということができます。

私がいた案件ではこんな使い方をしました。よくこういうパーツごとのアニメーション、キャラクターを使ったアニメーションをするじゃないですか。これをαでフェードアウトすると、重なり部分がこのように汚くなってしまいます。

これ許容しているアプリも多いですが、Live2Dだとちょっと悲惨なことになるはずです。

これを避けるためにどうしたらいいかと言うと、RenderTextureに1回描いて、RenderTextureのα値で調整します。すると重なった部分はただのピクセルでしかないので、きれいにαが抜けるということです。

お～すごいじゃん。やったぁと思ったら……ところが、問題が起きたわけです。

ClearColorと混ざってしまう問題

今から見せるものは私がUnityのパッケージで雑に作ったスプライトなんですが、外周部分をよーく見てください。とくにデザイナーの方、その目を生かして。

色味が違いませんか？　微妙にこっち（右）青くないですか？　微妙に青いですよね。

これは何かと思っていろいろ調べてみたら、カメラのClearColorでした。RenderTextureに描くためのカメラのClearColorで、黄色っぽくすれば黄色くなるし、緑っぽくすれば緑っぽくなるし、青くすれば青くなります。

これは何かと言うと、αブレンドで描かれているので1回背景が混ざるんです。1回背景が混ざったものをRenderTextureで保存して、それを背景と合成してるからなんですね。

いつもは直接背景と合成しているのにゴミが混ざっているから、こんなふうになっちゃうんです。今ぐらいだったら大したことないんですけど、炎みたいなかっこいいやつの周辺が黒くくすむということが起こっています。背景が白いとなおさら目立ちます。ということで品質問題につながってしまうので、解決法を探しました。

αブレンドのおさらい

とりあえずαブレンドというロジックのおさらいをしておきましょう。

2つの色があったときに、足したら1になるような係数でもって掛けることを言います。このときのこの数値のことをα値と言います。この数値が足して1になるというのがαブレンドのポイントですね。

画面の上に描く場合は、すでに描かれている色と、これから描こうとする色をブレンドして描くことになります。先ほどの場合は、ClearColorとポリゴンの色ですね。

実はここの1-αとか、αとか描いてあるところはUnity側の設定でカスタムできるんですよ。好きな係数にカスタマイズできるんです。好きと言っても選択式で、0とか1とか1-αとか、実は書き込み先のαとかも参照できたりします。

大事なことなのでもう1回言います。好きな係数にカスタマイズ可能です。

例を挙げると、両方1にすれば単純な加算合成。出力色だけα付ければ、α付きの加算合成。向こうを0にして、自分を1にすると、一方的に上書きします。これはあんまり意味のない合成ですが、1-αを両方に掛けるという謎合成もできます。

話は戻りますが、ここにゴミが混ざってることが問題だったので、色が混ざっているということが1つ問題です。

ここで合成したよくわからないα値をこの背景合成とのαブレンドのときに、α値として使っていることも問題です。「そこのα値、正しく制御してないですよね。よく考えたら」っていうところも問題です。

図解しましょう。もともとはこのように背景とパーツで混ぜて、それをパーツBと混ぜたというαブレンドの順番だったのに、ClearColorとパーツAを混ぜて、それをパーツBと混ぜて、それを背景と混ぜちゃったのがよろしくない。

これをよく見ると、ClearColorのいる位置のところをそのまま背景で置き換えられたら解決しそうに見えますよね。

というところに目を付けました。ClearColorがさも当然のように背景のいるはずの場所に鎮座しているのがよくないと。じゃあこいつをいなかったことにしたらいいんじゃないかなと思って、方針を立てました。

正しいアルファ値を設定するロジック

まずClearColorをなかったことにします。ClearColorに本来かかっていたはずの0.25倍という係数を背景になんとかして掛けてあげます。そしてこっち側（右）に変な係数を掛けないように、背景とこのでっかい四角の合成のときに、係数を付けないようにするっていう3段階で考えました。ガッツリ数式っぽい感じになっちゃうのでエンジニア向けなんですけど（笑）。

3つ目の段階はP-MAPという技法がわりと近いです。気になった方はググっていただけると。

1個目、ClearColorをなかったことにする。これは簡単です。ClearColorのRGBを0にしちゃえばいいんです。そしたら0.25が掛かろうがここは0です。ここで、さっきのテクスチャにα反映済みの色をここに残すというのもこれで実現しています。

次に本来掛かるこの0.25倍を残すというものなんですけど、これはRenderTextureのαに残しちゃいましょうと考えました。

今0.25って書いてますけど数式的にどうなるかと言うと、αブレンドの式を思い出してほしいんですけど、ClearColorに掛かるものって1回目の合成ではパーツAのα値をαとしたとき、1-αが掛かってるはずじゃないですか。

さらにそのあとに、これ全体に1-αがまた掛かるわけですね。さらにもう1個パーツCが続いたら、でっかい四角に1-αがまた掛かっていくので、1-α掛ける1-α掛ける1-αってかたちがここに重なり続けるはずです。

ということは、このかたちのものがRenderTextureのαとして残したいもののはずです。実際今回の場合、0.5と0.5の合成にした場合、1-0.5掛ける1-0.5で0.25です。

Unity上で実装するときは、先ほどのブレンド係数を変えられるというのがここで効いてきます。

実はα値だけ別々にブレンドルールを設定できるんですよ。α値だけこういうルールにすることで、1-αをどんどん上に重ねていくことができます。

DstColorに1-αが重なって、今度はこれがまた新しいDstColorになるからここに別の1-αが重なってみたいなかたちです。最初だけ1にしておけば、すべてきれいにまとまります。ClearColorのα値を1にしておくことも大事です。

そして最後、これは最後に背景と描画するとき、合成するときにブレンド設定をこんなふうにすればいいですね。

SrcColorというのは今から出力する色なので、この四角い中の色。これはα反映済みなので係数を1とする。本来背景に掛けたかったαをRenderTextureに残しているはずなので、αはこっち（背景）に掛けてやる。ってやれば、うまくいくはずです。

そうすると、本来ここに掛かっていた0.25倍というのはきれいにここ（背景）に掛かって、ClearColorはいなくなるので、下の数値は理論上上と同じ数値になるはずっていうものです。

手順をまとめます。

まずRenderTextureに描画する際のClearColorを(0.0.0.1)にします。そしてRenderTextureにものを描くときのα値のブレンド設定をこう（(1-α) * DstColor + 0 * SrcColor）します。RGBのブレンドは普通のαブレンドでオッケーです。

最後にRenderTextureを画面に描画する際のRGBのブレンド設定をこの（α * DstColor + 1 * SrcColor）ブレンド設定にします。これで解決するはずだと思ってやってみました

Unity上で実装する手順

実際にUnity上での手順をちょっと紹介しますね。まずインターフェースでカメラのここをポチとやって出てくるやつでRGBをこういうふうにしちゃえばいいです。1段階目はこれ。

2段階目、3段階目はシェーダーを実装します。シェーダーにはこんな感じでブレンドって書くと、ブレンドルールを設定できるんですね。

これ、私も知らなかったんですけれども、カンマ区切りにすると前半がRGBの話で、後半がα値の話になります。

参加者：へ～！

中島：私も思ったんですよ！　まず別々に設定できるというところ自体がけっこう新しくて。それを知った瞬間に「勝った！」って思いました。

（会場笑）

下も側もまったく一緒で、RenderTextureを画面に描画する際のシェーダーを独自に書いてブレンド設定をこういうふうにしてあげます。これらを同時に使うべきです。

そして、実際にやってみました。

同じになりました。色味変じゃないですよね。ちゃんと赤ですよね。目力に自信のあるみなさん、これはちゃんと赤ですよね？　実際に動かしてみたところ、プロダクトに乗せた結果もちゃんとうまくいってるのでわりと結果は保証済みです。

短所と対処法

実はこれには短所がいくつかありまして。1個の実装なのに複数箇所に実装がばらけているのが非常によろしくない。なぜなら1つでも欠けたら死ぬからです。

しかもさっきのコード差分を見ていただけると、なにがなんだかわからないですよね。しかもとくにこのファイル単品で見たとき、「なんでこんなふうになってるんだ!?」ってなるじゃないですか。これが非常によろしくない。

コメント書こうにも上のほうに書いたとしたら下のほう見たときに事故るし、下のほうに書いたら上のほう見たときに事故るしで。かと言って分散して書くのは多重管理でよろしくないし、「う～ん」っていう悩みがあったりします。

あと、今私が10分くらい話したこの理屈、コメントだけで説明しきれますかね？　私は無理です。っていうあたりがちょっとこいつのイケてないところです。

ただ、1つ欠けたらコケるというこの部分は意外とどうにでもなります。コケたときの見た目がわりとわかりやすいので、「あ、これいつものだ」ってなって修正ききます。実際2、3回くらいコケました（笑）。

ちょっと強引な解法なんですけど、今回そもそもα値というのがあるから起こるので、α値を使わなければいいじゃないかと。ということでみなさんも大好きなディザ合成、パンチ抜きによる合成っていうのも方法の1つとして提案させていただきます。

あと実は実装方法ぜんぜん記事がなかったので、自分で考えたんですけど。さっきググってみたら2日前にQiitaに記事がありました（笑）。

ここにはさっきのブレンドルールとまったく同じものが書かれていて、「お～すげ～な～！」と思いました。同じ結果に至るのかなと思って。実装方法自体はこちらのサイトにちゃんと載っていたので、参考にしていただければと思います。

ご清聴ありがとうございました。

（会場拍手）