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月は何を作るかまだ未定ですが、もし何か作ったら紹介します。