
2025.02.18
「売上をスケールする」AIの使い道とは アルペンが挑む、kintone×生成AIの接客データ活用法
RenderTextureの正しいアルファ値は?(全1記事)
提供:株式会社KLab
リンクをコピー
記事をブックマーク
中島将浩氏(以下、中島):では、よろしくお願いします。KLab株式会社のクライアントエンジニア、中島が発表いたします。
(会場拍手)
ありがとうございます。自己紹介させていただきます。
(会場笑)
この写真の元ネタが実はあるんですけど、元ネタがわかる人は私と仲良くなれるはずです。
もともと大学で数学を専攻していて、専門学校に入ってコンピュータグラフィックスとかゲームのプログラムを勉強して、この会社にクライアントエンジニアとして入社しました。2016年入社なので、さっきの鈴木くんと同期です。
得意分野はグラフィック周辺や、設計・ロジックで、主にクライアントサイドです。C++やC#などを書いてます。好きなゲームはアクション、音ゲー、JPRGと、古き良きRPGが大好きです。
突然ですがみなさん、RenderTextureに書き込まれているα値を気にしたことはありますか?
(会場挙手)
お、けっこう何人か! でも意外と気にしてる人は多くなくて。とりあえずRenderTextureとは何ぞや? という話をします。先ほどの鈴木くんの発表で、「カメラで写したものをテクスチャにして」と言ってたあれのことです。
普通はカメラを置いて画面に物を描きますが、代わりにテクスチャに描く技術のことです。これは当然テクスチャでもあるので、ポリゴンに貼り付けることができます。すると、テレビモニタのような演出ができたりとか。先ほど鈴木くんがやったようなピクセル単位の処理をするために描いたり、ということができます。
私がいた案件ではこんな使い方をしました。よくこういうパーツごとのアニメーション、キャラクターを使ったアニメーションをするじゃないですか。これをαでフェードアウトすると、重なり部分がこのように汚くなってしまいます。
これ許容しているアプリも多いですが、Live2Dだとちょっと悲惨なことになるはずです。
これを避けるためにどうしたらいいかと言うと、RenderTextureに1回描いて、RenderTextureのα値で調整します。すると重なった部分はただのピクセルでしかないので、きれいにαが抜けるということです。
お~すごいじゃん。やったぁと思ったら……ところが、問題が起きたわけです。
今から見せるものは私が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上での手順をちょっと紹介しますね。まずインターフェースでカメラのここをポチとやって出てくるやつでRGBをこういうふうにしちゃえばいいです。1段階目はこれ。
2段階目、3段階目はシェーダーを実装します。シェーダーにはこんな感じでブレンドって書くと、ブレンドルールを設定できるんですね。
これ、私も知らなかったんですけれども、カンマ区切りにすると前半がRGBの話で、後半がα値の話になります。
参加者:へ~!
中島:私も思ったんですよ! まず別々に設定できるというところ自体がけっこう新しくて。それを知った瞬間に「勝った!」って思いました。
(会場笑)
下も側もまったく一緒で、RenderTextureを画面に描画する際のシェーダーを独自に書いてブレンド設定をこういうふうにしてあげます。これらを同時に使うべきです。
そして、実際にやってみました。
同じになりました。色味変じゃないですよね。ちゃんと赤ですよね。目力に自信のあるみなさん、これはちゃんと赤ですよね? 実際に動かしてみたところ、プロダクトに乗せた結果もちゃんとうまくいってるのでわりと結果は保証済みです。
実はこれには短所がいくつかありまして。1個の実装なのに複数箇所に実装がばらけているのが非常によろしくない。なぜなら1つでも欠けたら死ぬからです。
しかもさっきのコード差分を見ていただけると、なにがなんだかわからないですよね。しかもとくにこのファイル単品で見たとき、「なんでこんなふうになってるんだ!?」ってなるじゃないですか。これが非常によろしくない。
コメント書こうにも上のほうに書いたとしたら下のほう見たときに事故るし、下のほうに書いたら上のほう見たときに事故るしで。かと言って分散して書くのは多重管理でよろしくないし、「う~ん」っていう悩みがあったりします。
あと、今私が10分くらい話したこの理屈、コメントだけで説明しきれますかね? 私は無理です。っていうあたりがちょっとこいつのイケてないところです。
ただ、1つ欠けたらコケるというこの部分は意外とどうにでもなります。コケたときの見た目がわりとわかりやすいので、「あ、これいつものだ」ってなって修正ききます。実際2、3回くらいコケました(笑)。
ちょっと強引な解法なんですけど、今回そもそもα値というのがあるから起こるので、α値を使わなければいいじゃないかと。ということでみなさんも大好きなディザ合成、パンチ抜きによる合成っていうのも方法の1つとして提案させていただきます。
あと実は実装方法ぜんぜん記事がなかったので、自分で考えたんですけど。さっきググってみたら2日前にQiitaに記事がありました(笑)。
ここにはさっきのブレンドルールとまったく同じものが書かれていて、「お~すげ~な~!」と思いました。同じ結果に至るのかなと思って。実装方法自体はこちらのサイトにちゃんと載っていたので、参考にしていただければと思います。
ご清聴ありがとうございました。
(会場拍手)
株式会社KLab
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.13
上司からは丸投げ、部下からはハラスメント扱い、業務は増加…プレイングマネジャーを苦しめる「6つの圧力」とは
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.13
上司からは丸投げ、部下からはハラスメント扱い、業務は増加…プレイングマネジャーを苦しめる「6つの圧力」とは
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
第20回エクゼクティブメンターイベント「今、「ひと」と組織が共創する〜働き方の未来へ」
2024.12.07 - 2024.12.07