<p data-line="0" class="code-line">【概要】<br>
下記動画を見て自分でもFullScreenShaderGraphを使ってみたいと思い<br>
「FullScreenShaderGraph」で画面転換表現用のMaterialを作成してみました。<br>
今回はその忘備録用のざっくりとした記事としていますので、ShaderGraph関連の説明は省いています<br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/7Cd7kQl6N50" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://youtu.be/7Cd7kQl6N50?si=ESCX8MxcUDm8NqFZ" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://youtu.be/7Cd7kQl6N50?si=ESCX8MxcUDm8NqFZ</a></p>
<p data-line="6" class="code-line">【 使用環境 】</p>
<ul data-line="7" class="code-line">
<li data-line="7" class="code-line">Unityバージョン：6000.0.31f1.7976.6018</li>
</ul>
<p data-line="9" class="code-line">【全体的な流れ】<br>
下記手順にそって、画面転換用のMaterialを作成し描画設定を変更します。<br>
その後Materialのインスペクタから画面転換用の表現が出来るようになります。</p>
<h1 id="%E7%A9%BA%E3%81%AEunity%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E6%BA%96%E5%82%99" data-line="13" class="code-line">
<a class="header-anchor-link" href="#%E7%A9%BA%E3%81%AEunity%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E6%BA%96%E5%82%99" aria-hidden="true"></a> 空のUnityプロジェクトを準備</h1>
<p data-line="14" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/8a946ff70141-20250111.png" loading="lazy" class="md-img"></p>
<h1 id="fullscreenshadergraph%E3%82%92%E4%BD%9C%E3%82%8B" data-line="16" class="code-line">
<a class="header-anchor-link" href="#fullscreenshadergraph%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> FullScreenShaderGraphを作る</h1>
<h2 id="fullscreenshadergraph-%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%82%92%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%E4%BD%9C%E6%88%90" data-line="17" class="code-line">
<a class="header-anchor-link" href="#fullscreenshadergraph-%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%82%92%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%E4%BD%9C%E6%88%90" aria-hidden="true"></a> FullScreenShaderGraph アセットをメニューから作成</h2>
<p data-line="18" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/fc9fee763503-20250111.png" loading="lazy" class="md-img"><br>
作成すると下記アセットが表示させます<br>
<img src="https://storage.googleapis.com/zenn-user-upload/0367331404b1-20250111.png" loading="lazy" class="md-img"></p>
<h1 id="%E7%94%BB%E9%9D%A2%E8%BB%A2%E6%8F%9B%E7%94%A8%E3%81%AB%E3%83%8E%E3%83%BC%E3%83%89%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E7%94%BB%E9%9D%A2%E8%BB%A2%E6%8F%9B%E7%94%A8%E3%81%AB%E3%83%8E%E3%83%BC%E3%83%89%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B" aria-hidden="true"></a> 画面転換用にノードを構築する</h1>
<h2 id="%E3%80%8Copen-shader-editor%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%8A%BC%E3%81%97%E3%81%A6shadergraph%E3%82%92%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B%E7%82%BA%E3%81%AE%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%82%92%E8%A1%A8%E7%A4%BA" data-line="23" class="code-line">
<a class="header-anchor-link" href="#%E3%80%8Copen-shader-editor%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%8A%BC%E3%81%97%E3%81%A6shadergraph%E3%82%92%E8%AA%BF%E6%95%B4%E3%81%99%E3%82%8B%E7%82%BA%E3%81%AE%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%82%92%E8%A1%A8%E7%A4%BA" aria-hidden="true"></a> 「Open Shader Editor」ボタンを押してShaderGraphを調整する為のウィンドウを表示</h2>
<p data-line="24" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/513785718342-20250111.png" loading="lazy" class="md-img"></p>
<h2 id="%E3%80%8C%E7%94%BB%E9%9D%A2%E8%BB%A2%E6%8F%9B%E7%94%A8%E3%80%8D%E3%81%AB%E3%83%8E%E3%83%BC%E3%83%89%E3%82%92%E7%B4%90%E3%81%A5%E3%81%91%E3%82%8B-(%E8%A9%B3%E7%B4%B0%E5%89%B2%E6%84%9B)" data-line="26" class="code-line">
<a class="header-anchor-link" href="#%E3%80%8C%E7%94%BB%E9%9D%A2%E8%BB%A2%E6%8F%9B%E7%94%A8%E3%80%8D%E3%81%AB%E3%83%8E%E3%83%BC%E3%83%89%E3%82%92%E7%B4%90%E3%81%A5%E3%81%91%E3%82%8B-(%E8%A9%B3%E7%B4%B0%E5%89%B2%E6%84%9B)" aria-hidden="true"></a> 「画面転換用」にノードを紐づける (詳細割愛)</h2>
<p data-line="27" class="code-line">下記のようにNodeの作成と紐づけを行います<br>
<img src="https://storage.googleapis.com/zenn-user-upload/2b379d42491b-20250111.png" loading="lazy" class="md-img"></p>
<h2 id="material%E5%81%B4%E3%81%A7%E8%AA%BF%E6%95%B4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%ABslider%E3%83%8E%E3%83%BC%E3%83%89%E3%82%92%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E5%8C%96" data-line="30" class="code-line">
<a class="header-anchor-link" href="#material%E5%81%B4%E3%81%A7%E8%AA%BF%E6%95%B4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%ABslider%E3%83%8E%E3%83%BC%E3%83%89%E3%82%92%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E5%8C%96" aria-hidden="true"></a> Material側で調整できるようにSliderノードをプロパティ化</h2>
<p data-line="31" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/f24f2b3a9875-20250111.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/5a53e892a440-20250111.png" loading="lazy" class="md-img"></p>
<h1 id="material%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" data-line="34" class="code-line">
<a class="header-anchor-link" href="#material%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> Materialを作成する</h1>
<h2 id="project%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%8B%E3%82%89material%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" data-line="35" class="code-line">
<a class="header-anchor-link" href="#project%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%8B%E3%82%89material%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> ProjectウィンドウからMaterialファイルを作成する</h2>
<p data-line="36" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/6d31eb6b08be-20250111.png" loading="lazy" class="md-img"></p>
<h2 id="material%E3%81%AE%E5%8F%82%E7%85%A7%E3%82%92%E5%85%88%E3%81%BB%E3%81%A9%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9Fshadergraph%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" data-line="38" class="code-line">
<a class="header-anchor-link" href="#material%E3%81%AE%E5%8F%82%E7%85%A7%E3%82%92%E5%85%88%E3%81%BB%E3%81%A9%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9Fshadergraph%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" aria-hidden="true"></a> Materialの参照を先ほど作成したShaderGraphに変更する</h2>
<p data-line="39" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/cdcab53de2a7-20250111.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/21ee410832f9-20250111.png" loading="lazy" class="md-img"></p>
<h1 id="%E7%94%BB%E9%9D%A2%E3%81%AB%E5%85%88%E3%81%BB%E3%81%A9%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9Fmaterial%E3%82%92%E5%8F%82%E7%85%A7%E3%81%95%E3%81%9B%E3%82%8B" data-line="42" class="code-line">
<a class="header-anchor-link" href="#%E7%94%BB%E9%9D%A2%E3%81%AB%E5%85%88%E3%81%BB%E3%81%A9%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9Fmaterial%E3%82%92%E5%8F%82%E7%85%A7%E3%81%95%E3%81%9B%E3%82%8B" aria-hidden="true"></a> 画面に先ほど作成したMaterialを参照させる</h1>
<h2 id="pc_renderer%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB(universalrendererdata)%E3%82%92%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%8B%E3%82%89%E6%8E%A2%E3%81%99" data-line="43" class="code-line">
<a class="header-anchor-link" href="#pc_renderer%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB(universalrendererdata)%E3%82%92%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%8B%E3%82%89%E6%8E%A2%E3%81%99" aria-hidden="true"></a> PC_Rendererファイル(UniversalRendererData)をプロジェクトから探す</h2>
<p data-line="44" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/0465856400f6-20250111.png" loading="lazy" class="md-img"></p>
<h2 id="%E3%80%8Cadd-renderer-future%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%8A%BC%E3%81%97%E3%81%A6%E3%80%8Cfull-screen-pass-renderer-future%E3%80%8D%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B" data-line="46" class="code-line">
<a class="header-anchor-link" href="#%E3%80%8Cadd-renderer-future%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%8A%BC%E3%81%97%E3%81%A6%E3%80%8Cfull-screen-pass-renderer-future%E3%80%8D%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B" aria-hidden="true"></a> 「Add Renderer Future」ボタンを押して「Full Screen Pass Renderer Future」を選択する</h2>
<p data-line="47" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/2251cd27da95-20250111.png" loading="lazy" class="md-img"></p>
<h2 id="pass-material%E3%81%AB%E5%85%88%E3%81%BB%E3%81%A9%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9Fmaterial%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E5%AE%8C%E4%BA%86" data-line="49" class="code-line">
<a class="header-anchor-link" href="#pass-material%E3%81%AB%E5%85%88%E3%81%BB%E3%81%A9%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9Fmaterial%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E5%AE%8C%E4%BA%86" aria-hidden="true"></a> Pass Materialに先ほど作成したMaterialを設定し完了</h2>
<p data-line="50" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/e7d3e8f25486-20250111.png" loading="lazy" class="md-img"></p>
<h1 id="%E7%94%BB%E9%9D%A2%E8%BB%A2%E6%8F%9B%E3%81%AE%E8%A1%A8%E7%8F%BE%E3%82%92material%E3%81%AE%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E8%AA%BF%E6%95%B4%E3%81%A7%E7%A2%BA%E8%AA%8D" data-line="52" class="code-line">
<a class="header-anchor-link" href="#%E7%94%BB%E9%9D%A2%E8%BB%A2%E6%8F%9B%E3%81%AE%E8%A1%A8%E7%8F%BE%E3%82%92material%E3%81%AE%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E8%AA%BF%E6%95%B4%E3%81%A7%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 画面転換の表現をMaterialのプロパティ調整で確認</h1>
<p data-line="53" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/02170859f348-20250111.gif" loading="lazy" class="md-img"></p>
<p data-line="55" class="code-line">【参考記事】<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fd008a09dddc9" src="https://embed.zenn.studio/card#zenn-embedded__fd008a09dddc9" data-content="https%3A%2F%2Fzenn.dev%2Fr_ngtm%2Fbooks%2Fshadergraph-cookbook" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/r_ngtm/books/shadergraph-cookbook" style="display:none" target="_blank">https://zenn.dev/r_ngtm/books/shadergraph-cookbook</a></p>


【Unity】FullScreen ShaderGraphで画面転換表現用Materialを作る

FullScreenShaderGraph アセットをメニューから作成

「Open Shader Editor」ボタンを押してShaderGraphを調整する為のウィンドウを表示

「画面転換用」にノードを紐づける (詳細割愛)

Material側で調整できるようにSliderノードをプロパティ化

画面転換用にノードを構築する

ProjectウィンドウからMaterialファイルを作成する

Materialの参照を先ほど作成したShaderGraphに変更する

PC_Rendererファイル(UniversalRendererData)をプロジェクトから探す

「Add Renderer Future」ボタンを押して「Full Screen Pass Renderer Future」を選択する

Pass Materialに先ほど作成したMaterialを設定し完了

画面に先ほど作成したMaterialを参照させる

画面転換の表現をMaterialのプロパティ調整で確認

Discussion