Legendsにハマって毎日のように時間が吸われていってます。LegendsのUIで使われているような「背景がボケているUI」を作る方法を書いていきたいと思います。↓こんな感じで、背景が透過+ボケている「すりガラス」風のUIですね。背景がぼけているだけでなんか途端にオシャレ感でますよねw今回のサンプルはGithubにアップしてあります。今回の実装のフローは大まかに以下のような感じです。CommandBufferを使って画面をキャプチャするキャプチャした画像をブラー用のシェーダで加工する(※1)ブラーをかけた画像をuGUI用シェーダで合成する(※2)という流れになります。ブラー画像を生成する方法については以前の記事で書いたのでそちらを参照ください。edom18.hateblo.jpCommandBufferを使って画面をキャプチャしブラーをかけるまず最初に行うのはCommandBufferによる画面キャプチャです。CommandBuffer自体については以下のドキュメントか凹みさんの記事にさらに詳しく書いてあるのでそちらも参考にしてみてください。docs.unity3d.comtips.hecomi.comCommandBufferとはCommandBufferとは、ドキュメントから引用すると以下のように記述されています。拡張することができます。カメラがレンダリング中にさまざまなポイントで実行するように設定することができます。GPUは「コマンドバッファ」と呼ばれる、CPUからGPUに対して命令を送るためのバッファの仕組みがあります。いわゆると書いているのは、まさにこのことと同じことを指しているのだと思います。このあたりのGPUのコマンドバッファに関しては以下の記事が分かりやすいでしょう。興味がある人は読んでみてください。blogs.msdn.microsoft.comコマンドバッファとは、ざっくりと言うとCPUからGPUへ「こういう処理をしてから描画をこういうデータでやってね」という「コマンドを積み重ねたバッファ」、ということができます。余談ですが、なぜコマンドバッファという仕組みがあるのでしょうか。CPUとGPUではその処理速度や実行するタスクなどが違うため協調して動くことができません。そのため、CPU側で描画に必要なデータを準備し必要なタスクの順番などを定義したあと、それらをGPUに「依頼」する必要があります。実際の仕事に置き換えて考えてみると、専門的な仕事に関してはその専門家に依頼することが自然な流れでしょう。依頼したあとはその仕事が終わるまで待つことはせず、自分の仕事に戻るのが普通です。これと似たようなことがCPUとGPUとの間で行われているわけです。コマンドバッファにはGPUにやってほしいことを列挙し、それをGPUに渡して「レンダリング」という専門タスクを依頼するわけです。して仕事の例と同じように、GPUにタスクを依頼したあとはCPUは自分のタスクに戻ります。これが、「コマンドバッファ」と呼ばれるタスクのバッファを橋渡しとして利用する理由です。このあたりのハード面からの理屈やGPUの仕組みについては以下の書籍がとても参考になりました。興味がある方は読んでみると、GPU周りについて詳しくなるのでオススメです。単行本(ソフトカバー)この商品を含むブログを見る閑話休題。Unityの場合はCommandBufferはカメラに対して設定するようになっています。コードを見てみましょう。}}ちょっと長いので面食らってしまった方もいるかもしれませんが、大事な点は以下です。CommandBufferを生成し、必要な処理(コマンド)をバッファに設定するセットアップしたCommandBufferをカメラに設定するという2点のみです。画面のキャプチャとブラー処理これを行っているところを抜粋すると以下の部分になります。_blurredID1);}抜粋したコードにはなにを行っているかをコメントしてあります。処理の流れにの詳細についてはそちらをご覧ください。大雑把に流れを説明すると、コマンドバッファを生成してブラー処理のためのコマンドを構築し、それをカメラに登録する、という流れになります。現在レンダリング済みの内容をテンポラリなRenderTextureに等倍でコピーする(1)でコピーしたものをさらに半分のサイズにコピーする(2)の半分サイズのテクスチャに対し、横方向のブラーをかける(3)の横方向ブラーの画像に対し、さらに縦方向のブラーをかける(4)の最終結果を、グローバルなテクスチャとして登録するという手順で最終的なブラーがかかった画像を生成しています。Debuggerを使うとこの過程を見ることができます。BuildCommandBufferメソッドでこのあたりの処理を行っています。このセットアップ部分を理解する上で重要な点が「この構築を行っている時点では実際に描画処理は行われていない」という点です。前述のように、CPUからGPUへは「コマンドバッファ」と呼ばれるバッファに命令を積み込んで送る、と説明しました。ここではその「命令群」をバッファに積み込んでいるだけなので、これが実際にGPUに届いて処理されるのは設定したイベントのタイミングとなります。ちなみに「設定したイベントのタイミング」とは、カメラに設定するときに指定したイベントの種類のことです。buf);_cameraEventは(今回のサンプルでは)デフォルトでCameraEvent.AfterImageEffectsが設定されています。読んで分かる通り、イベントタイプはイメージエフェクトのあと、となります。イベントの種類は、ドキュメントから画像を引用させていただくと以下のようなタイミングに処理を差し込むことができるようになっています。緑の丸い点のところが差し込める位置ですね。今回はこのうち、イメージエフェクトのあと、というタイミングで処理を行っているわけです。ブラー処理用シェーダちなみに、コマンドバッファで使用しているブラーのためのシェーダも載せておきます。こちらのシェーダについては以前の記事(Unityでガウシアンブラーを実装する)を参照ください。}}uGUIをカスタムする最後に、上記までで得られたブラー画像を利用してuGUIの背景を作る過程を書いていきます。この「ブラーをかけた画像を利用する」ため、少しだけシェーダを書かないとなりません。通常のモデルとは異なり、uGUIのシェーダは専用の処理もあるため普通に生成したシェーダでそのまま書いてもうまく動きません。このあたりはテラシュールブログさんの以下の記事を参考にさせていただきました。tsubakit1.hateblo.jp要点だけ書いておくと、Unityの公式サイトからビルトインシェーダをDLしてきて、その中でUI用のシェーダをベースにカスタムしていく、という感じです。カスタム後のシェーダを見てみましょう。}}色々記載がありますが、修正した箇所はそれほど多くありません。(ほぼ、UnityのビルトインシェーダをDLしてきたコードそのままです)編集した部分だけを抜粋すると以下の箇所になります。color;}追記した部分だけを抜き出しました。見てもらうと分かる通り、それほど多くのコードは追加していないのが分かると思います。いう処理なのかはコメントとして追記したのでそちらをご覧ください。大まかに説明だけすると、CommandBufferによって得られたブラー画像がuGUIの位置から見てどの位置なのか、の計算を行い、そのUV値を元にブラー画像からテクセルをフェッチし、それを利用しています。Imageに設定されたテクスチャはマスク画像として利用するようにしているので特定の形にくり抜くことができます。ここで重要な点は、実際に「半透明になっているわけではなく」、あくまでキャプチャした画像の適切な位置を利用することで、あたかも透過しているように見える、というわけです。最後に今回のサンプルは自分のiPhoneXでも問題なく動きました。処理負荷的にもそこまで大きくはないかなと思います。iOSの表現でもブラー処理はよく見ますね。すりガラス風の表現はオシャレに見えるので、ワンポイントのアクセントなどに利用すると質感があがっていい感じです。今回はuGUIの背景として利用しましたが、すりガラス風の表現はこれ以外にも活用する部分はあると思います。試してみるといいかもしれません。使う&表現力の高いぼかし処理。(3)月別アーカイブはてなブログをはじめよう!edo_m18さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。