Unity HDRPのコードを弄れる環境を整える

HDRP メモ unity

カスタマイズするか不明ですが、UPMでインストールしたパッケージはカスタマイズしずらいので、公式リポジトリをforkした物を使うプロジェクトを準備しておく。

フォークする

後で使うのでHDRPが含まれているこちらのSRP公式リポジトリをforkする。 github.com

f:id:kaneta1011:20190803161910p:plain

HDRPプロジェクト作る

今回は最近正式リリースされたUnity2019.2.0f1を使用してHDRPプロジェクトを作る。（Unity Hub等でインストールしておく）

この後forkしたSRPをサブモジュール設定するために、作ったプロジェクトは適当にgit管理しておく。

f:id:kaneta1011:20190803162557p:plain

ついでに Packages/manifest.json を覗いて使用しているHDRPのバージョンを確認しておく。

f:id:kaneta1011:20190803163126p:plain

このUnityバージョンで使用するHDRPは 6.9.0-preview らしい

プロジェクトでforkしたSRPを使用するためにサブモジュール設定をする。

プロジェクトのディレクトリに移動して以下のコマンドで設定（kaneta1992の部分はそれぞれのユーザー名に合わせる。）

kanet@DESKTOP-82NLVQ1 MINGW64 ~/HDRPExperiments (master)
$ git submodule add git@github.com:kaneta1992/ScriptableRenderPipeline.git ScriptableRenderPipeline

設定したら ScriptableRenderPipeline ディレクトリにリポジトリがクローンされるので、中に入って使用するバージョンをチェックアウトする

kanet@DESKTOP-82NLVQ1 MINGW64 ~/HDRPExperiments/ScriptableRenderPipeline (master)
$ git checkout 6.9.0-preview

manifest.jsonを書き換えて認識させる

プロジェクトはまだ公式パッケージを使用しているので、 manifest.json にサブモジュール設定したディレクトリを設定する。

    "com.unity.render-pipelines.high-definition": "file:../ScriptableRenderPipeline/com.unity.render-pipelines.high-definition",

パッケージのインポートが走って特にエラーが発生していなければ準備完了。 f:id:kaneta1011:20190803165006p:plain

今回準備したリポジトリ github.com

2019年7月に作ったシェーダーを紹介する（VRChatライブコーディングもやったぞ！）

CG関連 シェーダー プログラミング シェーダーライブコーディング

f:id:kaneta1011:20190719164311p:plain
サムネ用

はじめに

毎月やっている月毎に制作したシェーダーの紹介第6回目です。

今月は先月までと比べて忙しい時期だった（後先月頑張りすぎて燃え尽きていた...）ので、あまり活動できませんでしたがいくつかシェーダーを作ったので紹介します。

7/3

f:id:kaneta1011:20190719164250p:plain

仕事から帰ってきて友人と通話している間にのんびりシェーダーライブコーディングの練習をしていてできたものです。

Travelerに登場した物体と似たようなものを出そうという意思と、bloom表現をボリューメトリックにしようと考えてできました。

一度のマーチングループで衝突判定とボリューム累積を行っているので、結構いい加減な見た目になっていますが、これはこれでありだと思ってます。

動くものはこちらから glslfan.com

7/16

会社の同僚にこちらのページを教えてもらい、インスパイアされて作り始めました。 www.reddit.com

Glow表現

レイマーチングでGlow表現をする時はボリューム累積を行うのが一般的なので、今回も例に漏れずそのようにしています。

自分が今までやっていたボリューム累積と異なるところとして

  • マーチ数は変更せずにシーンの深度を見てマーチ距離を決定する
  • ディザパターンを使用して見た目の情報量を増やす

を取り入れてみました。

f:id:kaneta1011:20190720230436p:plain
ピクセル毎にマーチ距離が一定の特に工夫なしのボリューム累積

f:id:kaneta1011:20190720230627p:plain
ディザパターンあり

f:id:kaneta1011:20190720230716p:plain
深度からマーチ距離を決定する

深度を見てマーチ距離を決定することで、距離が近い箇所のボリューム累積が正確になり何もしないよりかは良い見た目になったと思います。

ディザパターンはこちらのShadertoyで実装されていたベイヤー配列というパターンを使わせていただきました。

www.shadertoy.com

ja.wikipedia.org

特殊な距離関数合成

距離関数に関する情報はiq氏のページがとても有名ですが、MERCURYというデモグループのこちらのページにもとても有益な距離関数の情報が載っています（こちらは主に距離関数同士の合成に関するメソッドが多数あります）

mercury.sexy

f:id:kaneta1011:20190720233227p:plain
minによる合成

f:id:kaneta1011:20190720233310p:plain
fOpUnionStairsによる合成

スパイクブラー

f:id:kaneta1011:20190720233614p:plain
ブラー

このブラーをスパイクブラーと呼ぶか知りませんが、トゲトゲになるので僕はそのように読んでいます。

実は全然特殊なことをしていなくて、スクリーン中央から放射状にノイズを作成してアニメーション変数iTimeのオフセットとして利用しています。

iTimeにオフセットしてモーションブラーは過去にTraveler 2で利用したテクニックですが、これを放射状なノイズに変更するだけで全然違った印象になりました！

f:id:kaneta1011:20190720234038p:plain
放射状ノイズ

7/17

帰宅直前、玄関の前あたりでブタジエン氏に誘われて2度目のVRChatライブコーディングをやりました！

今回はなんと坪倉氏制作の4人ライブコーディングバトル特化の闘技場風のワールドで、私含めて4名のライブコーダーで二時間弱で同時にコーディングを実現できました！！

当日の様子はこちらにアーカイブされています。

www.youtube.com

私はアイデアが思いつかないときは過去に見た映像などを再現しようと頑張る傾向にあります。

コーディングが終わった後に、「元ネタを忘れてしまったがTwitterで見た映像を再現しようとした」という話をしたら、観覧者の一人だったfotfla氏が元ネタを知っていて、まさかの裏ライブコーディングで同じネタで作っていました...!

こんなこともあるのかと盛り上がっていました。

さいごに

7月も何とかシェーダーを作ることができました。

3日坊主で有名な僕が、7ヵ月も続けられていることが今でも驚きです...（それだけシェーダーで遊ぶのは楽しい）

最近はGLSLやシェーダーライブコーディングを始める人が多くて、TLを眺めるだけでもとても楽しいですし、VRChatというプラットフォームでみんなでワイワイシェーダーを書いてボイチャするという空間が楽しすぎました！

8月は何を作るかまだ未定ですが、もし何か作ったら紹介します。

LWRP学習　レンダリングパスを追加する

メモ プログラミング unity LWRP

そろそろUnityも触らないとなぁと思ったので、LWRPを少しずつ学習していこうと思います。

手始めに、目標を達成するためにレンダリングパスを追加してみます。

今回はいずれシャドウマップを使ってエフェクトを作成したかったので、Screen Space Shadowパスをコピーして追加したパスでもう一度シャドウを生成するということをやったので雑なメモを残します。

大体こちらの記事の通りに進めればできました！

connect.unity.com

ScriptableRenderPassを作る

Scriptable Render Pipelineのリポジトリから該当の処理を探してほぼ丸コピしました。

github.com

using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.Rendering.LWRP;


public sealed class MyShadowPass : ScriptableRenderPass
{
    Material m_ScreenSpaceShadowsMaterial;
    RenderTargetHandle m_ScreenSpaceShadowmap;
    RenderTextureDescriptor m_RenderTextureDescriptor;
    const string m_ProfilerTag = "Kaneta Shadows";

    public MyShadowPass(RenderPassEvent evt, Material screenspaceShadowsMaterial)
    {
        m_ScreenSpaceShadowsMaterial = screenspaceShadowsMaterial;
        m_ScreenSpaceShadowmap.Init("_ScreenSpaceShadowmapTexture");
        renderPassEvent = evt;
    }

    public void Setup(RenderTextureDescriptor baseDescriptor)
    {
        m_RenderTextureDescriptor = baseDescriptor;
        m_RenderTextureDescriptor.depthBufferBits = 0;
        m_RenderTextureDescriptor.msaaSamples = 1;
        m_RenderTextureDescriptor.colorFormat = true
            ? RenderTextureFormat.R8
            : RenderTextureFormat.ARGB32;
    }

    public override void Configure(CommandBuffer cmd, RenderTextureDescriptor cameraTextureDescriptor)
    {
        cmd.GetTemporaryRT(m_ScreenSpaceShadowmap.id, m_RenderTextureDescriptor, FilterMode.Bilinear);

        RenderTargetIdentifier screenSpaceOcclusionTexture = m_ScreenSpaceShadowmap.Identifier();
        ConfigureTarget(screenSpaceOcclusionTexture);
        ConfigureClear(ClearFlag.All, Color.white);
    }

    /// <inheritdoc/>
    public override void Execute(ScriptableRenderContext context, ref RenderingData renderingData)
    {
        if (m_ScreenSpaceShadowsMaterial == null)
        {
            Debug.LogErrorFormat("Missing {0}. {1} render pass will not execute. Check for missing reference in the renderer resources.", m_ScreenSpaceShadowsMaterial, GetType().Name);
            return;
        }

        if (renderingData.lightData.mainLightIndex == -1)
            return;

        Camera camera = renderingData.cameraData.camera;
        bool stereo = renderingData.cameraData.isStereoEnabled;

        CommandBuffer cmd = CommandBufferPool.Get(m_ProfilerTag);
        if (!stereo)
        {
            cmd.SetViewProjectionMatrices(Matrix4x4.identity, Matrix4x4.identity);
            cmd.DrawMesh(RenderingUtils.fullscreenMesh, Matrix4x4.identity, m_ScreenSpaceShadowsMaterial);
            cmd.SetViewProjectionMatrices(camera.worldToCameraMatrix, camera.projectionMatrix);
        }
        else
        {
            // Avoid setting and restoring camera view and projection matrices when in stereo.
            RenderTargetIdentifier screenSpaceOcclusionTexture = m_ScreenSpaceShadowmap.Identifier();
            Blit(cmd, screenSpaceOcclusionTexture, screenSpaceOcclusionTexture, m_ScreenSpaceShadowsMaterial);
        }

        context.ExecuteCommandBuffer(cmd);
        CommandBufferPool.Release(cmd);
    }

    /// <inheritdoc/>
    public override void FrameCleanup(CommandBuffer cmd)
    {

        cmd.ReleaseTemporaryRT(m_ScreenSpaceShadowmap.id);
    }
}

ScriptableRendererFeatureを作る

元のシャドウパス生成処理を真似てScriptableRendererFeatureを作ります。

github.com

using UnityEngine;
using UnityEngine.Rendering.LWRP;

[CreateAssetMenu(fileName = "MyShadowPassFeature",
    menuName = "Sample/MyShadowPassFeature", order = 1)]
public sealed class MyShadowPassFeature : ScriptableRendererFeature
{
    private MyShadowPass currentPass;

    public override void Create()
    {
        var screenspaceShadowsMaterial = new Material(Shader.Find("Hidden/Lightweight Render Pipeline/ScreenSpaceShadows"));
        if (currentPass == null)
            currentPass = new MyShadowPass(RenderPassEvent.BeforeRenderingPrepasses, screenspaceShadowsMaterial);
    }

    public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
    {
        RenderTextureDescriptor cameraTargetDescriptor = renderingData.cameraData.cameraTargetDescriptor;
        currentPass.Setup(cameraTargetDescriptor);
        renderer.EnqueuePass(currentPass);
    }
}

多分動いてるはず... f:id:kaneta1011:20190630234549p:plain

2019年6月の成果物を紹介する（シェーダーライブコーディングをやったぞ！）

CG関連 登壇 シェーダーライブコーディング シェーダー

f:id:kaneta1011:20190624175400p:plain
サムネ用

はじめに

毎月やっている月毎に制作したシェーダーの紹介第5回目です。

今月はこちらの勉強会に登壇したこともあって、シェーダー以外にも成果物がありました！！

techplay.jp

そちらも合わせて紹介します。今回は月末に成果物が偏ってしまったので、日付毎の紹介はしません。

KLab TECH Meetup #4で登壇した！

「シェーダーライブコーディングのすすめ」という題で、いかに面白くワクワクするものかという事を熱く語ってきました。

さらに、登壇後の懇親会で先月から練習していたシェーダーライブコーディングを実演することもできました！！

動画を見てもらえばわかるように大盛況で、この実演で見に来てくださった方々に確実にシェーダーライブコーディングの楽しさを伝えることができたと確信できました！

突発ながら実況解説で盛り上げてくださった我無氏とさやちゃんぐbot氏に感謝です！！

野次が飛んで来たり、煽られながらするライブコーディングは最高に面白かったです！

当日に行ったライブコーディングは実は完全即興ではなく、2日程前に試作品を作ってから数回通しで練習しています。

私自身ライブコーディングを始めてまだまだ日が浅いので完全即興となるとどんなルックにしようと考えたり、技量的な制約であまりかっこよくならないので、楽しんでもらうという意味では練習してきてよかったと思います。（当日は思わぬ不具合でライブ感を演出することもできました？）

が、いつかは完全即興で盛り上げてみたいです！

今回のパフォーマンスが少しでも楽しいと感じた人は、Tokyo Demo Festに参加しましょう、100倍楽しめることを保証します。

今回の発表内容を記事向けにしてこちらに投稿しているのでご興味がある方は是非初めて見てください。

qiita.com

レイマーチングを完全に理解できるかもしれないシェーダー

先ほどの登壇資料の途中に登場した解説図を作るために、シェーダーで作ったアニメーションです。

もともとはシェーダーで作る予定はなくて、良い作図ソフトが無いか、同じく登壇者の我無氏に聞いたところ

「かねたさんならGLSLで作図すると思った...:(」と煽られてしまったので泣きながら作りました。

結果的に掛かった時間は半日程で、発表後の受けも良かったためシェーダーで作ってよかったです！

発表中にも言いましたが、シェーダーライブコーディングはお勧めしますが、作図をシェーダーオンリーでやるのはお勧めしません！！

ちなみにアニメーションの情報はすべて timeLine という関数に集約されています。

float sum = 0.0;
float tl(float val, float offset, float range)
{
    float im = sum + offset;
    float ix = im + range;
    sum += offset + range;
    return clamp((val - im) / (ix - im), 0.0, 1.0);
}

void timeLine(float time)
{
    float t = tl(time, 1.0, 0.5);
    uvToP = mix(0.0, 1.0, eio(t));
    
    t = tl(time, 1.0, 1.0);
    cameraPos = mix(vec3(0.0), vec3(5., 5., -2.), eio(t));
    cameraTarget = vec3(0.0, 0.0, 5.);
    
    
    t = tl(time, 0.5, 1.0);
    raySphereAlpha = mix(0., 1., t);
    cornersAlpha = mix(0., 1., t);
    .......

tl という関数は、4月に投稿したRemapという関数を変形したものです。

nanka.hateblo.jp

第一引数は現在時刻

第二引数は最後に定義したアニメーション終了から再生開始までの待ち時間

第三引数はアニメーションの幅（長さ）です

戻り値はそのアニメーションが再生開始（0.0）～再生終了（1.0）までの状態をfloatで返します。

tl 関数を使うたびに、そのアニメーションの終了時刻がグローバル変数の sum に記録されていくので、それを使って関数内で良しなにアニメーションを制御しています。

tl でどんどんアニメーションを定義していって、戻り値を使って位置情報等を合成すると今回のような複雑なアニメーションを簡単に定義できます。（読めるとは言っていない..）

VRChatで即興ライブコーディング

ブタジエン氏にお誘いをいただいて、VRChat内でシェーダーライブコーディングができるのかテストという名目で完全即興で行いました！

時間は正確に測っていませんが20分～30分ぐらいだった気がします。

（ﾎﾟｷｬﾌﾞﾗﾘｰ→ﾎﾞｷｬﾌﾞﾗﾘｰ）

地面と空がさみしいですね... 地面はチェッカーボードぐらい入れても良かったかなぁと今なら思います。

完全即興だとまだまだなのでこれからも精進します！

この会で普段twitterで私が眺めている強い人達と初めて会話ができてとても刺激になりました！

次の機会もあるかも？とのことなのでかっこいいシェーダーをライブコーディングできるように練習しておきます！！

さいごに

6月後半は激動の週でした。

登壇でいろいろな方とも交流が生まれて今後がとても楽しみです！

そしていろいろな方がレイマーチングやシェーダーライブコーディングに興味を持ってくれて楽しいです！

映像も良いですが、そろそろ音楽シェーダーに手を付けないといけないなとも感じています。（Houdiniもやりたい...）

7月は何を作るかまだ未定ですが、もし何か作ったら紹介します。

2019年5月に作ったシェーダーを紹介する

CG関連 シェーダー

f:id:kaneta1011:20190522175714p:plain
サムネ用

はじめに

毎月やっている月毎に制作したシェーダーの紹介第4回目です。

腰を据えてがっつりシェーダーを書いていた前月までと異なって、今月は1シェーダーにつき60分以内で作ったものばかりになりました。

このように短時間でシェーダーを作成するのは、シェーダーライブコーディングというジャンルで、それに挑戦しました。

4/25

世界最大規模のデモパーティであるRevision 2019が4/19 ~ 22に開催されて、そこで行われたシェーダーライブコーディングに影響されて、現時点の実力でどんなものを30分で作れるか挑戦してみたものです。

競技中は事前に用意したコードを持ち込んだり、ググったりできないため、前月までのシェーダーを作っていた時のようにスムーズにやりたいことを実現できませんでした。

このシェーダーを作るうえで以下の詰まりポイントがありました。

  • カメラ行列の計算(crossの順番等..)
  • カメラ行列とレイの掛け順
  • IFSするたびにスケールを変えようと思ってできなかった
  • 法線計算しようとしたけどできなかった
  • 全部mainに書くんじゃなくて距離関数は分けた方が整理しやすい...(IFSするあたりで結構混乱した)

4/26

その１

実家に帰る新幹線内で30分で作ったものです。

前回の反省のうちカメラに関する処理と、法線に関する処理を習得してから取り掛かりました。そのため時間にもある程度余裕ができたので、マテリアル分けに挑戦しました。

実際に動くものはこちらから見れます

https://glslfan.com/?channel=-LdJnYWiIXubgZJAMZJq&viewer=true

その２

実家に帰る新幹線内で30分で作ったものその２です。

glslfanで作っているときに@gam0022氏が見に来てちょっかいを入れられながら作っていました。(意見をもらいながら作れるのはライブコーディングならではです！)

今回はIFSのイテレーションごとにマテリアルを変えるものに挑戦してました。

4/27

実家で30分かけて作ったものです。

相変わらずIFSでめちゃくちゃな形状を作成しています。

先月も利用した、常に視線の反対側にライトを配置するものでライティングをしてみました。

このような角ばった形状では鉱石のような見た目になって綺麗です。

(RevisionのShader ShowDownでも同じようなライティングをしているものがあったので影響されました）

5/4

f:id:kaneta1011:20190522175745p:plain 実家から東京へ帰る新幹線でおそらく60分ぐらいで作りました。

今まで着手開始から行き当たりばったりの、その場の思い付きでシェーダーを書いていましたが、この辺りから事前にどういったルックにしようか考えてから作るようになりました。また30分で完成させるのは、まだ自分にとってハードルが高いと感じたので制限時間を60分にしました。

今回はビートを刻むポストエフェクト（今回は色収差もどき）と実家で習得したPolar Foldingと鏡面反射を絶対に使用すると決めていました。

くるくる回っている球が鏡面反射をしているのですが、かなりわかりずらいですね...

実際に動くものはこちらから見れます

5/5

Twitterで見かけたイケてるシェーダーに似たものを60分で作りました。

元ネタはこちらです

無限に見えるトンネルは、実はトーラスの内部をぐるぐる回っているだけです。

トーラスのUV計算に時間がかかった上に、もう一度作れと言われてもとっさに出てこないので復習しておきます...

またこのシェーダーは今まで書いたシェーダーの中で一番短いものでした！

f:id:kaneta1011:20190522175755p:plain

985文字でこのルック！

5/7

f:id:kaneta1011:20190522175737p:plain

就業時間後の帰る前の15分で作りました。

Shader ShowDownで登場したシェーダーに若干インスピレーションを貰っています。

Modで増やした形状にオフセットをつけたかったんですが、疑似乱数がうまくいかずに時間切れになってしまいました...

実際に動くものはこちらから見れます

5/15

しばらくゲームにはまっており、なかなかシェーダーを書けなかったので、ボリュームライトを絶対に使うぞという気持ちでリハビリも兼ねて60分制限で作りました。

形状を予め決めていなかったので、ボリュームライトがあまり目立たないシェーダーになってしまいました。

5/17

前回のリベンジで、今度はどんな形状にするか決めてから、今月二度目の実家に帰る新幹線内で作りました。こちらも60分です。

ソフトシャドウだけ自力で書けなかったのでカンニングをしてしまいましたが、ステージとボリュームライトの雰囲気がマッチしていてそれなりのルックになったと思います。

また、今月意図的に学んだテクニックをたくさん使ったので集大成のようなものになりました。

  • 法線とポイントライト
  • 距離関数の引き延ばし
  • Polar Folding
  • ボリュームライト

反省点として単色のシェーダーを作ってしまいがちなので、もっといろいろな作品を見て色使いを真似したいなと考えています。

さいごに

今月はライブコーディング月間でした。

今後の課題として以下のものがあるので、来月はこれらを消化していきたいです。

  • ノイズ系の習得
  • SmoothMin等の特殊な距離感数の合成
  • ライブコーディングにおけるマテリアル分け手法の確立
    • 未だに右往左往している..
  • ライティングの習得
    • AO
    • ソフトシャドウ
    • スペキュラ反射
  • ポストエフェクト

来月も、もし何か作ったら紹介します。

2019年4月に作ったシェーダーを紹介する

CG関連 シェーダー

f:id:kaneta1011:20190423003323p:plain
サムネ用

はじめに

毎月やっている月毎に制作したシェーダーの紹介第3回目です。

軽く解説やバックボーンを交えて紹介しようと思います。

3/28

紹介するのをすっかり忘れていたのですが、2月にthinking_faceの2D距離関数を作っていて、それをHeight Mapにしてシリンダーを描画しています。

夢にこのイメージが出てきたので起きてすぐ作りました。

www.shadertoy.com

4/1

エイプリルフールネタのつもりで作ったものです。

3/22ぐらいから作り始めたように記憶しています。

f:id:kaneta1011:20190423003302p:plain
こちらのスクリーンショットをリファレンスとして利用しました。

ここからは製作途中のスクリーンショットが残っているので何枚か紹介します。

f:id:kaneta1011:20190423003231p:plain
先月作って紹介した切稜立方体？の距離関数を活用してコンパニオンキューブをモデリング、Foldや折り返しを使って可能な限り距離関数を評価する回数を抑えています。

f:id:kaneta1011:20190423003336p:plain
ケーキのモデリング、クリームはトーラスを二つ重ねてknot状にしたものをsmoothminで合成してそれっぽくしています。

f:id:kaneta1011:20190423003234p:plain
コンパニオンキューブとケーキをマージ

f:id:kaneta1011:20190423003239p:plain
棚を作ってfogやライティングを調整した。

f:id:kaneta1011:20190423003345p:plain
棚をpMod(Fold Rotate)で複製して周囲に配置、地面に模様と凹凸をつける。

f:id:kaneta1011:20190423003221p:plain
天井の梁と柱を作成、フォグの強度を変更

f:id:kaneta1011:20190423003245p:plain
ろうそくの火とそれに伴う高さベースの簡単な表面化散乱ぽい効果、球体コアを棚に配置

f:id:kaneta1011:20190423003255p:plain
カメラワークをつけて完成！

制作過程で生まれたいくつかのシェーダです。

www.shadertoy.com

www.shadertoy.com

実際に動作するものはこちらから見れます(激重注意)

www.shadertoy.com

4/12

アンチャーテッド4の資料を見てさくっとできて見た目のインパクトがありそうなwetシェーダーを作ってみました。

以前から水たまりのシェーダーを作ってみたいと思っていたので良い経験になったと思います。

複雑に見える亀裂はボロノイをいくつかのレイヤーで合成したものを、fbmノイズでブラすことで実現しています。

また地面のxz座標でfbmノイズを作って亀裂をフェードアウトさせることで、配置をランダムのように見せました。（フェードしないと全ての亀裂が繋がってしまう）

見にくいですが、こちらは3Dで作る前に2Dでコンクリートテクスチャを作った時のものです。

f:id:kaneta1011:20190423003331p:plain

本当は道路が作りたかったというのは内緒です。

実際に動くものはこちらから見れます。

www.shadertoy.com

4/20

これは自分でもかなりお気に入りです。

19日の帰宅中にTLを眺めているとrevison2019関連の話題がもちきりで、かなりシェーダー欲をそそられたので、家に帰った後すぐに最近気になっていたホログラム演出を作りました。

f:id:kaneta1011:20190423003211p:plain
元ネタはUnityのVFX Graphの技術デモのワンシーンです。

youtu.be

この動画を観察していると以下の二点が特徴的だったので、それらを実現するシェーダーを作りました。

  • 投影されている物体（テライン）は高さが高いほど明るい色
  • 同じようにホログラムの光量は投影先の高さが高いほど多い

レイマーチングではボリュームレンダリングを簡単に実現できますが、ボリュームステップの度に、いちいち光源から投影先のテラインとの衝突判定をして高さを検出していたら計算能力がいくらあっても足りないので、今回は変位前の単純な平面にレイを飛ばした先のheightを密度として、ボリュームレンダリングをしました。

厳密にはテラインとライトシャフトが一致していませんが、いい感じにライトシャフトの先をフェードアウトさせることで目立たせなくしてます。

かなりいい加減な方法ですが結構それっぽく見えて良かったです。

実際に動作するものはこちらから見れます。

www.shadertoy.com

4/20

先ほどのホログラムシェーダーが完成してしばらくしてから、ホログラムの投影先が円なので、ここでthinking_faceを出しておけばよかったなぁと思って映像だけ作りました。

publicにはしていませんがこちらからシェーダーが見れます。（動画用に作ったので重いです）

www.shadertoy.com

4/21

4/21に日本橋でしなもく会というもくもく会が開催されて、そちらに行ってきたのでもくもくシェーダーを作りました。

IFSでフラクタルなシェーダーを全然書いていなかったので、こちらのツイートの動画を参考に動きやライティングをしてみました。

元ネタのシェーダーを見たときはライティングが特殊すぎてどうやってるんだろうと不思議だったんですが、実はとても単純でした。

サーフェースの色は法線を使います。そして視線方向と常に逆の方向にライトが存在していて、そいつでライティングするんですが、その時にランバート拡散反射に少し下駄をはかせてライトが後ろに回り込むようにしているようです。

この方法でライティングされたものは、ウイルスを可視化した時のような見た目でとても面白いです。

実際に動作するものはこちらから見れます。

www.shadertoy.com

4/24

4/23にリリースされた禍つヴァールハイトというゲームを初めたんですが、シェーダーでロード画面に似たものを作れそうだったので寝る前に挑戦してみたものです。

右下にあるギアが自信作です。

実際に動くものはこちらから見れます。

neort.io

さいごに

今月は豊作でした！

なんと前回の紹介から7つもシェーダーを作っています！

12月のTDF以降毎月何かしらのシェーダーを書いて、ある程度思い通りの絵を作れるようになってきました。

なのでそろそろ別のことに挑戦したいです、たとえば↓のようなもの

  • 4k制作に向けてシェーダー音楽
  • ライブコーディングの練習のためにglslfanでコーディングを見てもらう
    • ある程度空でコードを書けるようになってきたら、動画配信などでチートなしのライブコーディング

出来るかわかりませんが、近いうちにやってみたい。

来月も、もし何か作ったら紹介します。

Shader Graphのremapノードが便利だった

シェーダー メモ

最近Shader Graphを触る機会があるので、いろいろお試しで作っていたんですが、remapノードというのが便利だったのでShaderToyとかでも今後使っていこうと思ってます。

github.com

float remap(float val, float inMin, float inMax, float outMin, float outMax)
{
    return clamp(outMin + (val - inMin) * (outMax - outMin) / (inMax - inMin), outMin, outMax);
}

inMin ~ inMaxの入力値valをoutMin ~ outMaxにマッピングしてくれる。

Shader GraphのRemapノードは出力値をクランプしてくれないが、してくれた方が使い勝手が良いので変更した。

地味に使いどころがある気がする。