Shader Editor Kode lifeを試す。 - 夜風のMixedReality

本日はShader調査枠です。

先日（といっても数か月前ですが…）Unityの公式Youtubeチャンネルより[Shaderライブコーディング]という動画が公開されました。

ここでShaderのエディタとして[Kode Life]が紹介されており、今回はこちらを導入してみます。

〇なぜShaderEditorが必要か？

Unityではデフォルトのスクリプトエディタとして[VisualStudio]が使用されます。（もちろんユーザーによってRiderなどに変えることができます。）

別のShaderEditorを導入する理由は大きく二つあります。

　VisualStudioではC#のスクリプトはもちろんですが、一応UnityShaderlabを使用してShaderを書くことはできますが、デフォルトではC#を書くときと同じように構文チェックなどを行うことはできず、とても不便です。

二つ目の理由は、Unityでは実行時にShaderコードをコンパイルしており、既述したShaderコードの結果を得るためにはEditorを保存して、Unity画面に戻りコンパイルを行う必要があります。

　そのためUnityでShaderライブコーディングを行うためには別の仕組みが必要となります。

　ライブコーディングはパフォーマンスとしての側面が大きい言葉ではありますが、上記二つの理由によりリアルタイムで結果を確認でき、かつ構文チェックを行ってくれるライブコーディングで使用できるエディタは非常に便利なツールなのです。

〇Kode life

動画内ではKode lifeというエディタが紹介されていました。

使用するためにはライセンスが必要ですが、上記公式サイトによると2020年10月現在５０パーセントオフの割引で3199円の価格になっています。

hexler.net

上記公式サイトからダウンロードおよびライセンスを取得することができます。

f:id:Holomoto-Sumire:20201011133124j:plain

ダウンロードは最下部にあり使用しているデバイスの環境に合わせてダウンロードします。

f:id:Holomoto-Sumire:20201011133616j:plain

〇Kode lifeを使ってみる。

Kode Lifeをダウンロードするとセットアップが開始され、生成されたファイルに[.exe]ファイルが入っています。これがアプリケーションになります。

f:id:Holomoto-Sumire:20201011175351j:plain

[Kode life]を起動するとすでにサンプルコードが書かれており背景に反映されています。

f:id:Holomoto-Sumire:20201011175638j:plain

#version 150

uniform float time;
uniform vec2 resolution;
uniform vec2 mouse;
uniform vec3 spectrum;

uniform sampler2D texture0;
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D texture3;
uniform sampler2D prevFrame;
uniform sampler2D prevPass;

in VertexData
{
    vec4 v_position;
    vec3 v_normal;
    vec2 v_texcoord;
} inData;

out vec4 fragColor;

void main(void)
{
    vec2 uv = -1. + 2. * inData.v_texcoord;
    fragColor = vec4(
        abs(sin(cos(time+3.*uv.y)*2.*uv.x+time)),
        abs(cos(sin(time+2.*uv.x)*3.*uv.y+time)),
        spectrum.x * 100.,
        1.0);
}

上部タグを見てわかる通りこれはフラグメントShaderです。

 fragColor = vec4(
        abs(sin(cos(time+3.*uv.y)*2.*uv.x+time)),
        abs(cos(sin(time+2.*uv.x)*3.*uv.y+time)),
        spectrum.x * 100.,
        1.0);

最下部のfragColorでvec4()型(float4型)でRGBaが返されます。

RGのadb()は絶対値を返す関数でcos,sin関数とtime(時間)により複雑な模様を生み出しています。

例えば以下のように書き換えると

void main(void)
{
    vec2 uv = -1. + 2. * inData.v_texcoord;
    fragColor = vec4(
        1,
        1,
        0,
        1.0);
}

リアルタイムでバックグラウンドが黄色(1,1,0,1)に変わりました。

f:id:Holomoto-Sumire:20201011180646j:plain

次にTimeを使用してみます。

codeを次のように書き返した。

void main(void)
{
    vec2 uv = -1. + 2. * inData.v_texcoord;
    fragColor = vec4(
        1,
        abs(sin(time+2.*uv.x)),
        1,
        1.0);
}

次のように周期的に赤が走るようになりました。

f:id:Holomoto-Sumire:20201011181701g:plain