<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p><a href="https://github.com/CyberAgentGameEntertainment/NovaShader/blob/main/README_JA.md" target="_blank" rel="nofollow noopener noreferrer">NOVA Shader</a> を利用して、インクが飛び散るエフェクトを作ってみました。<br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/O10lgc5i8DA" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=O10lgc5i8DA" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=O10lgc5i8DA</a></p>
<h2 id="%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%87%E3%83%BC%E3%82%BF">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%87%E3%83%BC%E3%82%BF" aria-hidden="true"></a> サンプルデータ</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9f349d2149a54" src="https://embed.zenn.studio/card#zenn-embedded__9f349d2149a54" data-content="https%3A%2F%2Fgithub.com%2Frngtm%2FNoveShaderSandbox" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/rngtm/NoveShaderSandbox" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/rngtm/NoveShaderSandbox</a></p>
<table>
<thead>
<tr>
<th style="text-align:left">名前</th>
<th style="text-align:left">ファイルパス</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">サンプルシーン</td>
<td style="text-align:left">Assets/_NOVAShaderSandbox/01_InkSplatters/01_InkSplatters.unity</td>
</tr>
<tr>
<td style="text-align:left">SubstanceDesignerデータ</td>
<td style="text-align:left">Data/SubstanceDesigner/Ink.sbs</td>
</tr>
</tbody>
</table>
<h2 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h2>
<ul>
<li>Unity 2020.3.33f1</li>
<li>Universal RP 10.8.1</li>
</ul>
<h2 id="%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> 実装について</h2>
<p>以下のインクのグラデーションテクスチャを用います。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--2SzrsE4g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c28c99518a7f29e7cc090904.png%3Fsha%3Dfc68b7a0085dac0a07039bc5bb704c7ada48439e" alt width="240" loading="lazy" class="md-img"></p>
<p>NOVA Shader の Dissolve機能を使用することで、インクが広がるような表現を作ることができます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/72739977362cc7b660b0f7be.gif?sha=5fbb4afbad783d833afcdcba8089c1d58a34eb88" alt loading="lazy" class="md-img"></p>
<p>ディゾルブのTransition ProgressをParticleSystem上で動かすことで、<br>
インクが広がるような表現になります。</p>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/zo4AosV3wDU" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=zo4AosV3wDU" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=zo4AosV3wDU</a></p>
<h2 id="step1.-%E5%BD%A2%E7%8A%B6%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%81%AE%E7%94%A8%E6%84%8F">
<a class="header-anchor-link" href="#step1.-%E5%BD%A2%E7%8A%B6%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%81%AE%E7%94%A8%E6%84%8F" aria-hidden="true"></a> STEP1. 形状テクスチャの用意</h2>
<p>インク形状のテクスチャを用意します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--pOo48sDy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/0e8d71e9f7c92519605de02b.png%3Fsha%3Dd36a2f4d9ca579eb2c12529e6866fcfebd277686" alt width="320" loading="lazy" class="md-img"><br>
<em>Clip Studio で作画したインクテクスチャ</em></p>
<h2 id="step2.-substance-designer%E3%81%A7%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B">
<a class="header-anchor-link" href="#step2.-substance-designer%E3%81%A7%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B" aria-hidden="true"></a> STEP2. Substance Designerでグラデーションをつける</h2>
<p>Substance Designerにて、インクの形状に放射状のグラデーションを付けます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--2SzrsE4g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c28c99518a7f29e7cc090904.png%3Fsha%3Dfc68b7a0085dac0a07039bc5bb704c7ada48439e" alt width="320" loading="lazy" class="md-img"></p>
<p>作成したノード (Substance Designer)<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--DxinrcOm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/7704e3cd3f100a7c198ec9d3.png%3Fsha%3Dfb2a3e9abdc5f6e92d5c4aa66adbc5f5081178fe" alt loading="lazy" class="md-img"></p>
<p>使用したノードは以下になります。</p>
<ul>
<li>RGBA Split (Rチャンネルの抽出)</li>
<li>Invert Grayscale (テクスチャの0-1反転)</li>
<li>Flood Fill + Flood Fill to Position (インクの各形状に座標を割り当てる)</li>
<li>Pixel Processor (座標から、放射状に広がるグラデーションを計算)</li>
<li>Auto Levels (グラデーションを0-1に正規化)</li>
<li>Levels (レベル補正)</li>
</ul>
<details><summary>Pixel Processor の中身の実装</summary><div class="details-content">
<h3 id="pixel-processor-%E3%81%AE%E4%B8%AD%E8%BA%AB%E3%81%AE%E5%AE%9F%E8%A3%85">
<a class="header-anchor-link" href="#pixel-processor-%E3%81%AE%E4%B8%AD%E8%BA%AB%E3%81%AE%E5%AE%9F%E8%A3%85" aria-hidden="true"></a> Pixel Processor の中身の実装</h3>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--8U-adGoz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d241a54656fd858f1e10833f.png%3Fsha%3D3ef30bb2f3e97c3b4b2f31e472909de28d257ab3" alt width="500" loading="lazy" class="md-img"></p>
<p>Pixel Processor の中身の実装は以下のようになっています。</p>
<ol>
<li>GetFloat2 ノード : テクスチャ座標 $pos を取得</li>
<li>Sample Color ノード ：  $pos でのテクスチャの値をサンプリング</li>
<li>Swizzle Vector2 ノード : XY成分(RG成分)を抽出</li>
<li>Distance ノードで : 座標(0.5, 0.5)からの距離を計算<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--uGv3JmQG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/cf71bfde0f889c5325f221b3.png%3Fsha%3D577ed71c8b7315124c1cec6a67dee63b02c4564e" alt width="500" loading="lazy" class="md-img">
</li>
</ol>
<p>座標(0.5, 0.5)を中心とした放射状のグラデーションになります。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--8U-adGoz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d241a54656fd858f1e10833f.png%3Fsha%3D3ef30bb2f3e97c3b4b2f31e472909de28d257ab3" alt width="500" loading="lazy" class="md-img"></p>
</div></details>
<h2 id="step03.-nova-shader%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%99">
<a class="header-anchor-link" href="#step03.-nova-shader%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%99" aria-hidden="true"></a> STEP03. Nova Shaderで動かす</h2>
<p>Nove Shader の Alpha Transition に インクのグラデーションテクスチャを登録します。<br>
Transition Progress 1から0へ向かって変化させると、インクが広がるような動きが生まれます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/72739977362cc7b660b0f7be.gif?sha=5fbb4afbad783d833afcdcba8089c1d58a34eb88" alt width="500" loading="lazy" class="md-img"></p>
<h2 id="step04.-particlesystem%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%99">
<a class="header-anchor-link" href="#step04.-particlesystem%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%99" aria-hidden="true"></a> STEP04. ParticleSystemで動かす</h2>
<p>このTransition ProgressをParticle Systemから動かせるようにします。</p>
<p>まず、Transition Progress を Coord 1X に設定します。<br>
マテリアル上のTransitionProgressの値は0に設定しておきます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--tYT1WnWQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/cd8e50ce01d3f2832bb6eab0.png%3Fsha%3Daf57c40e823cfb469e95c26f9968ba6ece435301" alt loading="lazy" class="md-img"></p>
<p>ParticleSystemのCustomVertexStreamsを以下のように設定します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--Uc4dLfuW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/438c021f129f82b4d8304828.png%3Fsha%3D4c82076e8b23d55975f8f45ba689635983c0f945" alt loading="lazy" class="md-img"></p>
<p>ParticleSystemのCustom Dataを以下のように設定します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--7pEhl_TG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/2f709d3d4a08254a1d899aae.png%3Fsha%3D7a548aca738fe1c831354eff24bb0ea91cd28d06" alt loading="lazy" class="md-img"></p>
<p>以上で、ParticleSystem側でインクを制御できるようになります。</p>
<h2 id="%E6%9C%80%E7%B5%82%E7%B5%90%E6%9E%9C">
<a class="header-anchor-link" href="#%E6%9C%80%E7%B5%82%E7%B5%90%E6%9E%9C" aria-hidden="true"></a> 最終結果</h2>
<p>インクがバシャっと平がるような動きになります。<br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/Zw6UirKp9eQ" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=Zw6UirKp9eQ" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=Zw6UirKp9eQ</a></p>
<h2 id="%E3%80%90%E8%AA%BF%E6%95%B4%E3%80%91%E3%82%A4%E3%83%B3%E3%82%AF%E3%81%AE%E5%87%BA%E7%8F%BE%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%92%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E3%81%AB%E3%81%9A%E3%82%89%E3%81%99-(substance-designer)">
<a class="header-anchor-link" href="#%E3%80%90%E8%AA%BF%E6%95%B4%E3%80%91%E3%82%A4%E3%83%B3%E3%82%AF%E3%81%AE%E5%87%BA%E7%8F%BE%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%92%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E3%81%AB%E3%81%9A%E3%82%89%E3%81%99-(substance-designer)" aria-hidden="true"></a> 【調整】インクの出現タイミングをランダムにずらす (Substance Designer)</h2>
<p>先ほどのエフェクトは、インクが地面の上で円状に広がるような動きになっています。<br>
飛び散ったインクが、少し間をあけて地面にびちゃびちゃ落下するような動きを作ります。</p>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/zo4AosV3wDU" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=zo4AosV3wDU" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=zo4AosV3wDU</a></p>
<h3 id="%E3%82%A4%E3%83%B3%E3%82%AF%E3%81%AE%E3%81%97%E3%81%B6%E3%81%8D%E3%81%AB%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E3%81%AA%E6%99%82%E9%96%93%E5%B7%AE%E3%82%92%E6%8C%81%E3%81%9F%E3%81%9B%E3%82%8B">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%AF%E3%81%AE%E3%81%97%E3%81%B6%E3%81%8D%E3%81%AB%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E3%81%AA%E6%99%82%E9%96%93%E5%B7%AE%E3%82%92%E6%8C%81%E3%81%9F%E3%81%9B%E3%82%8B" aria-hidden="true"></a> インクのしぶきにランダムな時間差を持たせる</h3>
<p>Flood Fill to Random Grayscale ノードを用いることで、要素ごとにランダムな色を割り当てることができます。<br>
これを元のグラデーションとブレンドすることで、インクしぶきの出現タイミングをランダムに揺らすことができます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--nd1KfgyS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1ce9bf1b0d3704d34414b355.png%3Fsha%3Dac1f6fb5335af57bf46593ae0fe1323e0593f850" alt loading="lazy" class="md-img"></p>
<h3 id="%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E5%80%A4%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%E5%89%8D%E3%81%A8%E5%BE%8C%E3%81%AE%E6%AF%94%E8%BC%83">
<a class="header-anchor-link" href="#%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E5%80%A4%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%E5%89%8D%E3%81%A8%E5%BE%8C%E3%81%AE%E6%AF%94%E8%BC%83" aria-hidden="true"></a> ランダム値を入れる前と後の比較</h3>
<p>左 : 放射状グラデーションのみ<br>
右 : 放射状グラデーション + ノイズ</p>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/jhBFRqbY_kQ" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=jhBFRqbY_kQ" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=jhBFRqbY_kQ</a></p>
<h3 id="%E5%8F%82%E8%80%83%E6%9B%B8%E7%B1%8D">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E6%9B%B8%E7%B1%8D" aria-hidden="true"></a> 参考書籍</h3>
<p><a href="https://booth.pm/ja/items/1417234" target="_blank" rel="nofollow noopener noreferrer">Substance Designer Node Notes vol.1</a></p>


【Unity / NovaShader】インクが飛び散るエフェクトを作る

STEP2. Substance Designerでグラデーションをつける

インクのしぶきにランダムな時間差を持たせる

ランダム値を入れる前と後の比較

【調整】インクの出現タイミングをランダムにずらす (Substance Designer)

Discussion