<p>この記事は、神戸電子専門学校 ゲーム技研部 Advent Calendar 2023の2日目の記事です。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a20fbb8508486" src="https://embed.zenn.studio/card#zenn-embedded__a20fbb8508486" data-content="https%3A%2F%2Fqiita.com%2Fadvent-calendar%2F2023%2Fkdgamegiken" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/advent-calendar/2023/kdgamegiken" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/advent-calendar/2023/kdgamegiken</a></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1cf062e9c24c-20231201.png" loading="lazy" class="md-img"></p>
<h1 id="%E5%85%89%E5%AD%A6%E8%BF%B7%E5%BD%A9">
<a class="header-anchor-link" href="#%E5%85%89%E5%AD%A6%E8%BF%B7%E5%BD%A9" aria-hidden="true"></a> 光学迷彩</h1>
<p>メ〇ルギアのステルス迷彩、攻殻〇動隊の光学迷彩（熱光学式迷彩）みたいなやつです。</p>
<p>Unityで、URPとShaderGraphで作ります。</p>
<p>なお、光学迷彩シェーダのアルゴリズムは、こちらの記事のBRPによる実装を参考にしています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ed45e947fe07e" src="https://embed.zenn.studio/card#zenn-embedded__ed45e947fe07e" data-content="https%3A%2F%2F3dcg-school.pro%2Funity-shader-stealth%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://3dcg-school.pro/unity-shader-stealth/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://3dcg-school.pro/unity-shader-stealth/</a></p>
<h1 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3" aria-hidden="true"></a> 動作確認バージョン</h1>
<ul>
<li>Unity 2022.3.12f1</li>
<li>Universal RP 14.0.9</li>
</ul>
<h1 id="shadergraph%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#shadergraph%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> ShaderGraphを作成する</h1>
<p>URPの<code>Unlit Shader Graph</code>を作成します。<br>
名前は<code>OpticalCamouflageShader</code>とでもしておきます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/88c43406a1ec-20231201.png" loading="lazy" class="md-img"></p>
<h1 id="%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%81%9A%E3%82%89%E3%81%99">
<a class="header-anchor-link" href="#%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%81%9A%E3%82%89%E3%81%99" aria-hidden="true"></a> 画面のテクスチャを取得してずらす</h1>
<p>光学迷彩特有の透明で歪んだ見た目は、画面レンダリング結果のテクスチャを歪ませることで擬似的に表現します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f3e9ab724cfa-20231201.png" loading="lazy" class="md-img"></p>
<p>BRPでは<code>GrabPass</code>を使うだけで、簡単にレンダリング結果をテクスチャとしてシェーダー内で使うことができました。<br>
しかし、URPにはこの機能がありません。</p>
<p>そこで、代替機能として<code>_CameraOpaqueTexture</code>を使います。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p><code>_CameraOpaqueTexture</code>は、その名の通り不透明物(Opaque)を描画した結果のテクスチャです。<br>
透明物(<code>Transparent</code>)の描画結果は含まれていません。<br>
透明物も含めた描画結果が欲しい場合は、以下の記事のような方法で頑張って取ってくる必要があるようです。<br>
<a href="https://zenn.dev/fuqunaga/articles/005cb0380d495e" target="_blank">URPでも任意のタイミングでGrabPassする(https://zenn.dev/fuqunaga/articles/005cb0380d495e)</a></p>
</div></aside>
<h2 id="%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%82%92%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%82%92%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> 画面のテクスチャを取得できるようにする</h2>
<p>さっそく<code>_CameraOpaqueTexture</code>を使いたいところなのですが、その前に適切に設定をしておく必要があります。</p>
<p>まずは、使用しているURPの設定でCameraOpaqueTextureを有効化しておきます。<br>
(ここではテンプレートそのままを使っているので、<code>Assets/Settings/URP-HighFidelity.asset</code>を編集しました。)</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/e734275a7945-20231201.png" loading="lazy" class="md-img"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>Cameraコンポーネントではこの設定をオーバーライドすることが出来ます。<br>
もし、MainCameraの<code>OpaqueTexture</code>が<code>Off</code>になっている場合、CameraOpaqueTextureが取得できません。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/a9eb7012f4c6-20231201.png" loading="lazy" class="md-img"></p>
</div></aside>
<p>つづいて、作成したShader Graphを開いて、<br>
<strong>必ず、<code>Graph Settings</code>の<code>Surface Type</code>を<code>Transparent</code>に設定しておきます。</strong><br>
(このあと画面レンダリング結果のテクスチャを取得するために必要です)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/b2aa5c50db5e-20231201.png" loading="lazy" class="md-img"></p>
<p>これで準備完了です！！</p>
<h2 id="shadergraph%E4%B8%8A%E3%81%A7%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#shadergraph%E4%B8%8A%E3%81%A7%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> ShaderGraph上で取得してみる</h2>
<p><code>_CameraOpaqueTexture</code>を取得するには、本来なら<code>_CameraOpaqueTexture</code>と紐づけたテクスチャのプロパティを作ったりと色々やる必要があります。</p>
<p>ですが、なんと１つのノードで全部済ませてくれる<code>Scene Color Node</code>が用意されています！<br>
(私は一通り頑張って実装してから、これの存在を知りました。。。orz)</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__05b73895fa9b9" src="https://embed.zenn.studio/card#zenn-embedded__05b73895fa9b9" data-content="https%3A%2F%2Fdocs.unity3d.com%2Fja%2FPackages%2Fcom.unity.shadergraph%4010.0%2Fmanual%2FScene-Color-Node.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.unity3d.com/ja/Packages/com.unity.shadergraph@10.0/manual/Scene-Color-Node.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.unity3d.com/ja/Packages/com.unity.shadergraph@10.0/manual/Scene-Color-Node.html</a></p>
<p>とりあえず、<code>Scene Color</code>ノードを作って、FragmentのBaseColorに接続してみます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/7328e8c82335-20231201.png" loading="lazy" class="md-img"></p>
<p>それでは、早速使ってみます。<br>
いったんSaveAssetしてから、<br>
新しいマテリアルを作成して、マテリアルが作ったシェーダーを使用するように設定します。<br>
(ここでは特にカテゴリ設定していないので、<code>Shader Graphs/OpticalCamouflageShader</code>にありました)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/748be1cdc0a2-20231201.png" loading="lazy" class="md-img"></p>
<p>そして、早速マテリアルを適用してみます…<strong>消えた？！</strong></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/36a3a40b4480-20231201.gif" loading="lazy" class="md-img"></p>
<p>まぁ当然といえば当然です。<br>
シーンの描画結果をそのまま取ってきて描画したので、<strong>背景に完全に溶け込んだ、カンペキな光学迷彩の状態ということになります</strong>。</p>
<h2 id="uv%E3%82%92%E3%81%9A%E3%82%89%E3%81%99">
<a class="header-anchor-link" href="#uv%E3%82%92%E3%81%9A%E3%82%89%E3%81%99" aria-hidden="true"></a> UVをずらす</h2>
<p>これではキャラクターがどこにいるか分からないので、とりあえずUVをずらしてみます。</p>
<p>ずらし度合いの値を設定するため、Vector2のプロパティ<code>UVScale</code>を追加します。<br>
<strong>デフォルト値は、(1,1)に設定しておきます。</strong></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/73b622ae824d-20231201.png" loading="lazy" class="md-img"></p>
<p>あとは、<code>Screen Position</code>ノードで取得した画面のUV座標と、さっき作成した<code>UVScale</code>を掛け合わせて、ずらし度合いを計算し、<code>Scene Color</code>ノードの入力<code>UV</code>に接続します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b5a83372bd04-20231201.png" loading="lazy" class="md-img"></p>
<p>とりあえずここでSavaAssetして、マテリアルの<code>UVScale</code>を弄ってみると…</p>
<p>ずれてる！！！良い感じ！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f58040e02ddd-20231201.png" loading="lazy" class="md-img"></p>
<h2 id="%E8%89%B2%E5%91%B3%E3%82%92%E5%BC%84%E3%82%8B">
<a class="header-anchor-link" href="#%E8%89%B2%E5%91%B3%E3%82%92%E5%BC%84%E3%82%8B" aria-hidden="true"></a> 色味を弄る</h2>
<p>〇タルギアのステルス迷彩は特に、ゲーム的に見やすくするために色味が調整されています。<br>
というわけでやってみます。</p>
<p>Vector2のプロパティ<code>MixColor</code>を追加します。<br>
<strong>デフォルト値は、完全な白(255,255,255,255)にしておきます。</strong><br>
<img src="https://storage.googleapis.com/zenn-user-upload/93bfb4bc0dc6-20231201.png" loading="lazy" class="md-img"></p>
<p>あとは、<code>Scene Color</code>で取得している色と掛け合わせて、Fragmentの<code>BaseColor</code>に接続します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/eaf6f29c8544-20231201.png" loading="lazy" class="md-img"></p>
<p>ここで再び、SaveAssetして、マテリアルの<code>MixColor</code>を弄ってみると…<br>
めっちゃメタ〇ギア！！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/5f750d346ddb-20231201.png" loading="lazy" class="md-img"></p>
<hr>
<h1 id="%E6%AD%AA%E3%81%BF%E3%82%92%E4%BB%98%E3%81%91%E3%82%8B">
<a class="header-anchor-link" href="#%E6%AD%AA%E3%81%BF%E3%82%92%E4%BB%98%E3%81%91%E3%82%8B" aria-hidden="true"></a> 歪みを付ける</h1>
<p>既にここまでだけでも充分にそれっぽいですが、まだ形状を把握しづらいですし、歪みを付けていきます。</p>
<h2 id="%E6%AD%AA%E3%81%BF%E5%BA%A6%E5%90%88%E3%81%84%E3%82%92%E8%A8%88%E7%AE%97">
<a class="header-anchor-link" href="#%E6%AD%AA%E3%81%BF%E5%BA%A6%E5%90%88%E3%81%84%E3%82%92%E8%A8%88%E7%AE%97" aria-hidden="true"></a> 歪み度合いを計算</h2>
<p>カメラに対して面が斜めであるほど、歪みを強くしてみるといい感じになりそうです。<br>
「面の法線」と「面からカメラに向かうベクトル」の内積を求めることで、斜め度合いを計算します。</p>
<p>まずは、カメラに向かうベクトルを求めます。<br>
カメラ位置から、ワールド座標を引いて、それを正規化するだけです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/80f8bbc98552-20231201.png" loading="lazy" class="md-img"></p>
<p>つづいて、「法線」と「面からカメラに向かうベクトル」の内積を求めます。<br>
この値のままでは、カメラに対して面が斜めであるほど0に近づく(歪みが小さくなる)ので、これを<code>One Minus</code>ノードで逆にしてあげます。<br>
これで歪み度合いが算出できたので、Screen Positionで取得してきた座標に加算します。</p>
<p>(下図で青い枠になってる箇所が、ここでの追記箇所です。)</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/2cf8109361c1-20231201.png" loading="lazy" class="md-img"></p>
<p>ここで、SaveAssetして仕上がりを確認してみます。</p>
<p>とりあえず歪みました！<br>
面の向きを使って算出したので、凹凸感もちゃんと分かるようになりました。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/ccbce253f4ab-20231201.png" loading="lazy" class="md-img"></p>
<h2 id="%E3%81%AA%E3%82%93%E3%81%8B%E3%82%AC%E3%83%A9%E3%82%B9%E3%81%A3%E3%81%BD%E3%81%84%E3%81%AE%E3%81%A7%E6%AD%AA%E3%81%BF%E6%96%B9%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B">
<a class="header-anchor-link" href="#%E3%81%AA%E3%82%93%E3%81%8B%E3%82%AC%E3%83%A9%E3%82%B9%E3%81%A3%E3%81%BD%E3%81%84%E3%81%AE%E3%81%A7%E6%AD%AA%E3%81%BF%E6%96%B9%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B" aria-hidden="true"></a> なんかガラスっぽいので歪み方を変える</h2>
<p>確かに歪んではいますが、どこかガラスっぽくなってしまいました。<br>
（凹レンズとか凸レンズの違いっぽい感じ…）</p>
<p>内積して求めた歪み具合いの値に、<code>-1</code>を掛けて正負反転してみます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1794bdf22982-20231201.png" loading="lazy" class="md-img"></p>
<p>良い感じの歪み方になりました。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/93142ed21120-20231201.png" loading="lazy" class="md-img"></p>
<h2 id="%E6%AD%AA%E3%81%BF%E6%96%B9%E3%82%92%E8%AA%BF%E6%95%B4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E6%AD%AA%E3%81%BF%E6%96%B9%E3%82%92%E8%AA%BF%E6%95%B4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> 歪み方を調整できるようにする</h2>
<p>歪みすぎなので、歪み方をマテリアルで調整できるようにします。</p>
<p>Floatのプロパティ<code>RimLevel</code>を追加します</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/cf170e274de7-20231201.png" loading="lazy" class="md-img"></p>
<p><code>RimLevel</code>の分だけべき乗してあげます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/55bbb1a75cef-20231201.png" loading="lazy" class="md-img"></p>
<p>良い感じに弄れるようになりました！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/11204edf4778-20231201.gif" loading="lazy" class="md-img"></p>
<h1 id="%E6%9C%80%E7%B5%82%E7%9A%84%E3%81%AAshadergraph%E3%81%AE%E5%85%A8%E4%BD%93%E5%83%8F">
<a class="header-anchor-link" href="#%E6%9C%80%E7%B5%82%E7%9A%84%E3%81%AAshadergraph%E3%81%AE%E5%85%A8%E4%BD%93%E5%83%8F" aria-hidden="true"></a> 最終的なShaderGraphの全体像</h1>
<p>これで完成です！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/e3a13b6f5886-20231201.png" loading="lazy" class="md-img"></p>
<p>（見やすいように、前半と後半に分割したスクショも）<br>
<img src="https://storage.googleapis.com/zenn-user-upload/4223c5c08794-20231201.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/fbe4cbb35dfc-20231201.png" loading="lazy" class="md-img"></p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p>今回はただテクスチャを取得して歪ませるまででしたが、歪み方にノイズを加えてみたり、僅かにぼかしてみたりすると、もっと良い見た目になりそうな予感がします。</p>
<p>よき光学迷彩ライフを！！</p>
<h1 id="%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 参考記事</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ef0fa60ffa074" src="https://embed.zenn.studio/card#zenn-embedded__ef0fa60ffa074" data-content="https%3A%2F%2F3dcg-school.pro%2Funity-shader-stealth%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://3dcg-school.pro/unity-shader-stealth/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://3dcg-school.pro/unity-shader-stealth/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f41e2e3d4d8b8" src="https://embed.zenn.studio/card#zenn-embedded__f41e2e3d4d8b8" data-content="https%3A%2F%2Fmatcha-choco010.net%2F2018%2F11%2F06%2Funity-lwrp-cameraopaquegexture-grabpass%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://matcha-choco010.net/2018/11/06/unity-lwrp-cameraopaquegexture-grabpass/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://matcha-choco010.net/2018/11/06/unity-lwrp-cameraopaquegexture-grabpass/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e7b9e7f950c4f" src="https://embed.zenn.studio/card#zenn-embedded__e7b9e7f950c4f" data-content="https%3A%2F%2Fzenn.dev%2Ffuqunaga%2Farticles%2F005cb0380d495e" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/fuqunaga/articles/005cb0380d495e" style="display:none" target="_blank">https://zenn.dev/fuqunaga/articles/005cb0380d495e</a></p>


[Unity]URPとShaderGraphで光学迷彩シェーダーを作る

画面のテクスチャを取得できるようにする

画面のテクスチャを取得してずらす

なんかガラスっぽいので歪み方を変える

歪み方を調整できるようにする

Discussion