2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
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
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには