<p>URP(Universal Render Pipeline)前提のお話です。</p>
<p>Unity2023+Recorderを使用した際、アルファ付き動画の書き出し方法についてのメモです。</p>
<h1 id="recorder%E3%81%AE%E6%94%B9%E9%80%A0">
<a class="header-anchor-link" href="#recorder%E3%81%AE%E6%94%B9%E9%80%A0" aria-hidden="true"></a> Recorderの改造</h1>
<p>Unity2023をインストールすると自動的にRecorder5.0.0がインストールされていると思います。<br>
RecorderのPackageファイルをLibraryに移動してPackageを編集できるようにします。</p>
<h2 id="movierecordereditor.cs%E3%81%AE%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%81%88">
<a class="header-anchor-link" href="#movierecordereditor.cs%E3%81%AE%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%81%88" aria-hidden="true"></a> MovieRecorderEditor.csの書き換え</h2>
<p>Recorder5.0.0時点ではURPではアルファの書き出しの対応がされていないようです。<br>
この部分を以下のように編集して、まずはEditor上からアルファの書き出し設定が出来るようにします。<br>
Recorder/Editor/Sources/Recorders/MovieRecorder/MovieRecorderEditor.cs より</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">MovieRecorderEditor.cs</span></div>
<pre class="language-csharp"><code class="language-csharp"><span class="token comment">// Before</span>
<span class="token comment">//if(!UnityHelpers.UsingURP() &amp;&amp; mrs.ImageInputSettings.SupportsTransparent &amp;&amp; mrs.EncoderSettings.CanCaptureAlpha)</span>

<span class="token comment">// After</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>mrs<span class="token punctuation">.</span>ImageInputSettings<span class="token punctuation">.</span>SupportsTransparent <span class="token operator">&amp;&amp;</span> mrs<span class="token punctuation">.</span>EncoderSettings<span class="token punctuation">.</span>CanCaptureAlpha<span class="token punctuation">)</span>
</code></pre>
</div><p>これでRecorderのWindowにIgnore Alphaの項目が表示されたかと思います。</p>
<h1 id="uberpost%E3%81%AE%E6%94%B9%E9%80%A0">
<a class="header-anchor-link" href="#uberpost%E3%81%AE%E6%94%B9%E9%80%A0" aria-hidden="true"></a> UberPostの改造</h1>
<p>Unity既存のUberPost.shaderは透過情報を保持していないので、元のUberPost.shaderをプロジェクトにコピー(UberPostAlpha.shaderとしてます)して以下のように書き換えます。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">UberPostAlpha.shader</span></div>
<pre class="language-hlsl"><code class="language-hlsl"><span class="token keyword">half</span> alpha <span class="token operator">=</span> <span class="token function">SAMPLE_TEXTURE2D_X</span><span class="token punctuation">(</span>_BlitTexture<span class="token punctuation">,</span> sampler_LinearClamp<span class="token punctuation">,</span> uvDistorted<span class="token punctuation">)</span><span class="token punctuation">.</span>w<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">half4</span><span class="token punctuation">(</span>color<span class="token punctuation">,</span> alpha<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><p>これで透過情報が書き込まれるようになります。</p>
<h2 id="universalrendererdata%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#universalrendererdata%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> UniversalRendererDataの設定</h2>
<p>次に先ほど改造したUberPostをUniversalRendererDataのUberPostPSに設定をします。</p>
<p>UberPostPSを差し替えるには、以下のファイルをEditorに入れて使ってください。<br>
<a href="https://gist.github.com/tomkail/ba4136e6aa990f4dc94e0d39ec6a058c" target="_blank" rel="nofollow noopener noreferrer">ExtendedScriptableObjectDrawer.cs</a><br>
これにより、UberPostPSのShader差し替えが可能になります。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f03d95982110-20240215.png" alt="UniversalRendererData" loading="lazy" class="md-img"></p>
<h1 id="%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E7%94%A8%E3%81%AErendertexture%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E7%94%A8%E3%81%AErendertexture%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 書き出し用のRenderTextureの設定</h1>
<p>書き出し用のRenderTextureを作成して、透過情報を書き込めるようにFormatを調整してください。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/676ab3d12b0a-20240202.png#left" loading="lazy" class="md-img"></p>
<h1 id="camera%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#camera%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Cameraの設定</h1>
<p>レンダリングしたいCameraのComponentを選択して以下の設定を行ってください。</p>
<table>
<thead>
<tr>
<th>項目</th>
<th>設定</th>
</tr>
</thead>
<tbody>
<tr>
<td>Background Type</td>
<td>Solid Color</td>
</tr>
<tr>
<td>Background</td>
<td>R:0 G:0 B:0 A:0</td>
</tr>
</tbody>
</table>
<p><img src="https://storage.googleapis.com/zenn-user-upload/4aa6bfae76de-20240202.png#left" loading="lazy" class="md-img"></p>
<h2 id="rendertexture%E3%81%AE%E9%81%A9%E7%94%A8">
<a class="header-anchor-link" href="#rendertexture%E3%81%AE%E9%81%A9%E7%94%A8" aria-hidden="true"></a> RenderTextureの適用</h2>
<p>CameranoOutput Textureに先ほど設定した書き出し用のRenderTextureを設定します<br>
<img src="https://storage.googleapis.com/zenn-user-upload/cd4556ec80c6-20240215.png" loading="lazy" class="md-img"></p>
<h1 id="recorderwindow%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#recorderwindow%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> RecorderWindowの設定</h1>
<h2 id="input%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#input%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Inputの設定</h2>
<p>InputのSourceを「Render Texture Asset」に設定してください。<br>
Render Textureの項目が表示されると思いますので、書き出し用のRenderTextureを設定します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c93ecb054b81-20240215.png" loading="lazy" class="md-img"></p>
<h2 id="output-format%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#output-format%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Output Formatの設定</h2>
<p>こちらはCodec format的に透過情報が書き込めるフォーマットであれば大丈夫だと思います。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/5d21bf41494e-20240215.png" loading="lazy" class="md-img"></p>
<h1 id="%E5%AE%9F%E9%9A%9B%E3%81%AB%E5%8B%95%E7%94%BB%E3%82%92%E6%92%AE%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AB%E5%8B%95%E7%94%BB%E3%82%92%E6%92%AE%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 実際に動画を撮ってみる</h1>
<p>実装にUnityのRecorderを使用して動画を書き出してみました。</p>
<h2 id="%E6%92%AE%E3%81%A3%E3%81%9F%E6%99%82%E3%81%AE%E7%8A%B6%E6%B3%81">
<a class="header-anchor-link" href="#%E6%92%AE%E3%81%A3%E3%81%9F%E6%99%82%E3%81%AE%E7%8A%B6%E6%B3%81" aria-hidden="true"></a> 撮った時の状況</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/3173a38ffc59-20240215.png" loading="lazy" class="md-img"></p>
<h2 id="obs%E3%81%A7%E9%80%8F%E9%81%8E%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E6%99%82%E3%81%AE%E7%8A%B6%E6%B3%81">
<a class="header-anchor-link" href="#obs%E3%81%A7%E9%80%8F%E9%81%8E%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E6%99%82%E3%81%AE%E7%8A%B6%E6%B3%81" aria-hidden="true"></a> OBSで透過確認している時の状況</h2>
<p>背景に見やすいように赤一色にしています<br>
<img src="https://storage.googleapis.com/zenn-user-upload/93a93c2bb8fb-20240215.png" loading="lazy" class="md-img"></p>
<h1 id="%E5%BF%9C%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E5%BF%9C%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 応用してみる</h1>
<p>UberPostAlpha.shaderの透過情報を書き換えればBloomなどを透過情報に書き込むことが可能です。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/08f56e75c956-20240215.png" loading="lazy" class="md-img"></p>
<p>色々なやり方があると思いますので、試してみてください。</p>
<h1 id="%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88" aria-hidden="true"></a> 参考サイト</h1>
<ul>
<li><a href="https://forum.unity.com/threads/transparent-rendertexture-with-postprocessing.1265873/" target="_blank" rel="nofollow noopener noreferrer">https://forum.unity.com/threads/transparent-rendertexture-with-postprocessing.1265873/</a></li>
</ul>


Unity2023(URP)+Recorderを使用したアルファ付き動画の書き出し方法

OBSで透過確認している時の状況

Discussion