2019年5月に作ったシェーダーを紹介する
はじめに
毎月やっている月毎に制作したシェーダーの紹介第4回目です。
腰を据えてがっつりシェーダーを書いていた前月までと異なって、今月は1シェーダーにつき60分以内で作ったものばかりになりました。
このように短時間でシェーダーを作成するのは、シェーダーライブコーディングというジャンルで、それに挑戦しました。
4/25
現時点では何も見ずに30分でこれが限界だった(軽率なIFS)
— かねた (@kanetaaaaa) 2019年4月25日
(法線計算できなかった...https://t.co/7AlXMBLHA3 pic.twitter.com/uiaYPOwUvH
世界最大規模のデモパーティであるRevision 2019が4/19 ~ 22に開催されて、そこで行われたシェーダーライブコーディングに影響されて、現時点の実力でどんなものを30分で作れるか挑戦してみたものです。
競技中は事前に用意したコードを持ち込んだり、ググったりできないため、前月までのシェーダーを作っていた時のようにスムーズにやりたいことを実現できませんでした。
このシェーダーを作るうえで以下の詰まりポイントがありました。
- カメラ行列の計算(crossの順番等..)
- カメラ行列とレイの掛け順
- IFSするたびにスケールを変えようと思ってできなかった
- 法線計算しようとしたけどできなかった
- 全部mainに書くんじゃなくて距離関数は分けた方が整理しやすい...(IFSするあたりで結構混乱した)
4/26
その１
新幹線で30分
— かねた (@kanetaaaaa) 2019年4月26日
まだ時間があるのでもう一度やるかもhttps://t.co/1YNlsb4JQ9 pic.twitter.com/ZXXn1Ovb4Q
実家に帰る新幹線内で30分で作ったものです。
前回の反省のうちカメラに関する処理と、法線に関する処理を習得してから取り掛かりました。そのため時間にもある程度余裕ができたので、マテリアル分けに挑戦しました。
実際に動くものはこちらから見れます
https://glslfan.com/?channel=-LdJnYWiIXubgZJAMZJq&viewer=true
その２
二回目
— かねた (@kanetaaaaa) 2019年4月26日
プリミティブ感が拭えない
既に自分のできることに限界を感じているので、テクを覚えるターンが必要なのかもしれない..https://t.co/7Ni3YUJHYM pic.twitter.com/QcjXihaNKh
実家に帰る新幹線内で30分で作ったものその２です。
glslfanで作っているときに@gam0022氏が見に来てちょっかいを入れられながら作っていました。(意見をもらいながら作れるのはライブコーディングならではです！)
今回はIFSのイテレーションごとにマテリアルを変えるものに挑戦してました。
4/27
実家で30分https://t.co/tM1jGppAkT pic.twitter.com/XcnwIJ1i1x
— かねた (@kanetaaaaa) 2019年4月27日
実家で30分かけて作ったものです。
相変わらずIFSでめちゃくちゃな形状を作成しています。
先月も利用した、常に視線の反対側にライトを配置するものでライティングをしてみました。
このような角ばった形状では鉱石のような見た目になって綺麗です。
(RevisionのShader ShowDownでも同じようなライティングをしているものがあったので影響されました）
5/4
実家から東京へ帰る新幹線でおそらく60分ぐらいで作りました。
今まで着手開始から行き当たりばったりの、その場の思い付きでシェーダーを書いていましたが、この辺りから事前にどういったルックにしようか考えてから作るようになりました。また30分で完成させるのは、まだ自分にとってハードルが高いと感じたので制限時間を60分にしました。
今回はビートを刻むポストエフェクト（今回は色収差もどき）と実家で習得したPolar Foldingと鏡面反射を絶対に使用すると決めていました。
くるくる回っている球が鏡面反射をしているのですが、かなりわかりずらいですね...
5/5
少し前にtwitterで見かけたトーラストンネルをライブコーディングで作りました🤔
— かねた (@kanetaaaaa) 2019年5月4日
トーラスのuvで詰まって合計60分ぐらいかかりましたhttps://t.co/4ts64uErcZ pic.twitter.com/QNYSmrq4z3
Twitterで見かけたイケてるシェーダーに似たものを60分で作りました。
元ネタはこちらです
Raytracing a torus with polygonal cross-section by forming it out of clipped cones: https://t.co/hmshTUgD8M pic.twitter.com/eaubJFBBfq
— Edd Biddulph🐚 (@eddbiddulph) 2019年5月3日
無限に見えるトンネルは、実はトーラスの内部をぐるぐる回っているだけです。
トーラスのUV計算に時間がかかった上に、もう一度作れと言われてもとっさに出てこないので復習しておきます...
またこのシェーダーは今まで書いたシェーダーの中で一番短いものでした！
985文字でこのルック！
5/7
就業時間後の帰る前の15分で作りました。
Shader ShowDownで登場したシェーダーに若干インスピレーションを貰っています。
Modで増やした形状にオフセットをつけたかったんですが、疑似乱数がうまくいかずに時間切れになってしまいました...
5/15
久しぶりにライブコーディングをしたhttps://t.co/iVkKO04GoO pic.twitter.com/CtRg9FFbgB
— かねた (@kanetaaaaa) 2019年5月15日
しばらくゲームにはまっており、なかなかシェーダーを書けなかったので、ボリュームライトを絶対に使うぞという気持ちでリハビリも兼ねて60分制限で作りました。
形状を予め決めていなかったので、ボリュームライトがあまり目立たないシェーダーになってしまいました。
5/17
移動の新幹線で60分コーディングhttps://t.co/eufDMfRFKc pic.twitter.com/XdfFdSt4Pw
— かねた (@kanetaaaaa) 2019年5月17日
前回のリベンジで、今度はどんな形状にするか決めてから、今月二度目の実家に帰る新幹線内で作りました。こちらも60分です。
ソフトシャドウだけ自力で書けなかったのでカンニングをしてしまいましたが、ステージとボリュームライトの雰囲気がマッチしていてそれなりのルックになったと思います。
また、今月意図的に学んだテクニックをたくさん使ったので集大成のようなものになりました。
- 法線とポイントライト
- 距離関数の引き延ばし
- Polar Folding
- ボリュームライト
反省点として単色のシェーダーを作ってしまいがちなので、もっといろいろな作品を見て色使いを真似したいなと考えています。
さいごに
今月はライブコーディング月間でした。
今後の課題として以下のものがあるので、来月はこれらを消化していきたいです。
- ノイズ系の習得
- Value Noise
- FBM
- SmoothMin等の特殊な距離感数の合成
- ライブコーディングにおけるマテリアル分け手法の確立
- 未だに右往左往している..
- ライティングの習得
- AO
- ソフトシャドウ
- スペキュラ反射
- ポストエフェクト
- トーンマッピング
来月も、もし何か作ったら紹介します。
2019年4月に作ったシェーダーを紹介する
はじめに
毎月やっている月毎に制作したシェーダーの紹介第3回目です。
軽く解説やバックボーンを交えて紹介しようと思います。
3/28
thinkoin🤔https://t.co/Wy8a501pEh#glsl #raymarching pic.twitter.com/SyIKwVvv22
— かねた (@kanetaaaaa) 2019年3月27日
紹介するのをすっかり忘れていたのですが、2月にthinking_faceの2D距離関数を作っていて、それをHeight Mapにしてシリンダーを描画しています。
夢にこのイメージが出てきたので起きてすぐ作りました。
4/1
"The cake is a lie" on Shadertoy
— かねた (@kanetaaaaa) 2019年3月31日
Portalというゲームのワンシーンをシェーダーで再現してみました。
ジョークではないですがエイプリルフールネタです🤔https://t.co/EWi1oKRU6d #shadertoy #glsl #raymarching #Portal #AprilFoolsDay #エイプリルフール pic.twitter.com/wzh0AtfHYX
エイプリルフールネタのつもりで作ったものです。
3/22ぐらいから作り始めたように記憶しています。
ここからは製作途中のスクリーンショットが残っているので何枚か紹介します。
制作過程で生まれたいくつかのシェーダです。
実際に動作するものはこちらから見れます(激重注意)
4/12
ひび割れたコンクリートに水たまりが出来たり出来なかったりするシェーダーを作りました🤔https://t.co/Cup75bu41z#shadertoy #GLSL pic.twitter.com/Sm0slK1Nfe
— かねた (@kanetaaaaa) 2019年4月12日
アンチャーテッド4の資料を見てさくっとできて見た目のインパクトがありそうなwetシェーダーを作ってみました。
以前から水たまりのシェーダーを作ってみたいと思っていたので良い経験になったと思います。
複雑に見える亀裂はボロノイをいくつかのレイヤーで合成したものを、fbmノイズでブラすことで実現しています。
また地面のxz座標でfbmノイズを作って亀裂をフェードアウトさせることで、配置をランダムのように見せました。（フェードしないと全ての亀裂が繋がってしまう）
見にくいですが、こちらは3Dで作る前に2Dでコンクリートテクスチャを作った時のものです。
本当は道路が作りたかったというのは内緒です。
実際に動くものはこちらから見れます。
4/20
ホログラムっぽいシェーダーを作りました🤔https://t.co/GeSyCv3YyC#shadertoy #raymarching #glsl pic.twitter.com/7Kyc77Z7ki
— かねた (@kanetaaaaa) 2019年4月20日
これは自分でもかなりお気に入りです。
19日の帰宅中にTLを眺めているとrevison2019関連の話題がもちきりで、かなりシェーダー欲をそそられたので、家に帰った後すぐに最近気になっていたホログラム演出を作りました。
この動画を観察していると以下の二点が特徴的だったので、それらを実現するシェーダーを作りました。
- 投影されている物体（テライン）は高さが高いほど明るい色
- 同じようにホログラムの光量は投影先の高さが高いほど多い
レイマーチングではボリュームレンダリングを簡単に実現できますが、ボリュームステップの度に、いちいち光源から投影先のテラインとの衝突判定をして高さを検出していたら計算能力がいくらあっても足りないので、今回は変位前の単純な平面にレイを飛ばした先のheightを密度として、ボリュームレンダリングをしました。
厳密にはテラインとライトシャフトが一致していませんが、いい感じにライトシャフトの先をフェードアウトさせることで目立たせなくしてます。
かなりいい加減な方法ですが結構それっぽく見えて良かったです。
実際に動作するものはこちらから見れます。
4/20
Variation🤔 pic.twitter.com/9svBsPgj0Z
— かねた (@kanetaaaaa) 2019年4月20日
先ほどのホログラムシェーダーが完成してしばらくしてから、ホログラムの投影先が円なので、ここでthinking_faceを出しておけばよかったなぁと思って映像だけ作りました。
publicにはしていませんがこちらからシェーダーが見れます。（動画用に作ったので重いです）
4/21
うねうねしてるシェーダーを作りました🤔🤔🤔🤔🤔https://t.co/LKavo2gByn#shadertoy #glsl #raymarching #しなもく pic.twitter.com/wv28Eerwsd
— かねた (@kanetaaaaa) 2019年4月21日
4/21に日本橋でしなもく会というもくもく会が開催されて、そちらに行ってきたのでもくもくシェーダーを作りました。
IFSでフラクタルなシェーダーを全然書いていなかったので、こちらのツイートの動画を参考に動きやライティングをしてみました。
here's how i make my gifs :D pic.twitter.com/m1VFwolZ96
— connor bell (@connrbell) 2019年3月23日
元ネタのシェーダーを見たときはライティングが特殊すぎてどうやってるんだろうと不思議だったんですが、実はとても単純でした。
サーフェースの色は法線を使います。そして視線方向と常に逆の方向にライトが存在していて、そいつでライティングするんですが、その時にランバート拡散反射に少し下駄をはかせてライトが後ろに回り込むようにしているようです。
この方法でライティングされたものは、ウイルスを可視化した時のような見た目でとても面白いです。
実際に動作するものはこちらから見れます。
4/24
最近プレイし始めたゲームのロード画面に似ているシェーダーを作りました🤔https://t.co/G3RxsjJpBn#NEORT #glsl #禍つヴァールハイト #まがつファンアート pic.twitter.com/nrdZ1A8UVU
— かねた (@kanetaaaaa) April 24, 2019
4/23にリリースされた禍つヴァールハイトというゲームを初めたんですが、シェーダーでロード画面に似たものを作れそうだったので寝る前に挑戦してみたものです。
右下にあるギアが自信作です。
実際に動くものはこちらから見れます。
さいごに
今月は豊作でした！
なんと前回の紹介から7つもシェーダーを作っています！
12月のTDF以降毎月何かしらのシェーダーを書いて、ある程度思い通りの絵を作れるようになってきました。
なのでそろそろ別のことに挑戦したいです、たとえば↓のようなもの
- 4k制作に向けてシェーダー音楽
- ライブコーディングの練習のためにglslfanでコーディングを見てもらう
- ある程度空でコードを書けるようになってきたら、動画配信などでチートなしのライブコーディング
出来るかわかりませんが、近いうちにやってみたい。
来月も、もし何か作ったら紹介します。
Shader Graphのremapノードが便利だった
最近Shader Graphを触る機会があるので、いろいろお試しで作っていたんですが、remapノードというのが便利だったのでShaderToyとかでも今後使っていこうと思ってます。
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ノードは出力値をクランプしてくれないが、してくれた方が使い勝手が良いので変更した。
地味に使いどころがある気がする。
2019年3月に作ったシェーダーを紹介する
はじめに
先月からやっている月毎に制作したシェーダーの紹介第二回目です。
軽く解説やバックボーンを交えて紹介しようと思います。
2/27
箱#glsl pic.twitter.com/mXEnxLIpVH
— かねた (@kanetaaaaa) February 26, 2019
レイマーチングでは、座標に対して繰り返し操作を行うことで似たような動きの大量のオブジェクトを描画するのが得意ですが、それぞれ独立した動きのオブジェクトを描画するのはそれほど得意ではありません。（レイのオーバーシュートやグリッド内の制限など）
今回はそのうちのオーバーシュートの問題をこちらの記事の手法で解決して、複雑な動きをする大量のオブジェクト描画をやりました。
動くものはこちらから見れます
3/18
～～#neorthttps://t.co/AHZajlmc7c pic.twitter.com/ON0OxuOkQw
— かねた (@kanetaaaaa) March 17, 2019
私はいつもShaderToyという海外のシェーダー勢が集まるサイトでシェーダーを公開していますが、これはNEORTという最近リリースされた、日本生まれのデジタルアート全般の共有サイトで公開しました。
今後は2000文字程度のシェーダーや、軽量なシェーダーはこちらで公開しようと考えています。
動くものはこちらから見れます
https://neort.io/art/bi75kac3p9f8qviu3g00
3/19
土と泥のようなもの🤔#shadertoy #glsl #raymarching pic.twitter.com/xvTzZJoXcY
— かねた (@kanetaaaaa) March 19, 2019
こちらは3月中旬ごろにTwitterでバズっていたツイートを見て似たようなことをやりたくて試しに土と泥を雑に作ったものです。
しばしこの映像を最後まで見て欲しい。
— 山田氏 (@protoMST) March 11, 2019
1.75倍速でForza Horizon 4の雨が降って止んで晴れてきた時の土の地面の様子。
改めて見ても、やはりプレイグラウンドゲームズは頭おかしい…思いつくのは分かるが、それを当たり前の様に実装するの、訳がわからない…(めっちゃ褒めてる)#ForzaHorizon4 pic.twitter.com/BQhcWAthUK
またノイズ構成等一部をこちらのチュートリアルを参考にして実装しています
今は別のことをやっていますが、この表現もいずれブラッシュアップして一つの作品にしてみたいです。
このシェーダーは最適化不足(地形との衝突判定)でなかなか重いものになっているため、一般公開していませんが興味があればご覧ください。
動くものはこちらから見れます
3/20
結構難しそうな形状だと思っていたんですが、八面体を各軸に引き延ばすという単純な操作で実現することが出来ました。
これを使って何か作ろうと思います。
公開していませんが動くものはこちらから見れます
さいごに
3月に作った4つのシェーダーを紹介しました。
来月も、もし何か作ったら紹介します。
2019年2月に作ったシェーダーを紹介する
はじめに
去年の12月頃から、個人的にシェーダーのみで短い映像や画像を作ってtwitterで公開するという事をやっています。
今月から、シェーダーを作成した月の月末に公開しなかったシェーダーも含めて、軽く解説やバックボーンを交えて紹介しようと思います。
2/4（公開してない）
直接光のBRDFモデルは、拡散反射に正規化ランバートモデル、鏡面反射にCook-Torranceマイクロファセットモデルを使用しています。
両者ともに実装した経験があることや、モデル自体がよく知られているので文献や参考実装が豊富にあり、困ることはなかったです。（正しく実装できているかはあまり自信がない...）
間接光のBRDFモデルは、Unreal Engineで使用されているPre-filtered environment mapと言うIBL手法の、Environment BRDF（Ambient BRDFと呼ばれていたりもするもの）の近似を使用しています（プロシージャルに毎フレーム生成した環境マップをフィルタするのは困難なため）
また今回は、間接光のオクル―ジョンとしてよく知られるAmbient Occlusion（AO）のみでなく、EA のFrostbiteエンジンで使用されている、AO項からSpecular Occlusionを計算する処理も追加しました。（参照75ページあたりから）
そしてHDRで使用されるトーンマッピングですが、これは@gam0022氏のhanamaru-rendererの実装をGLSLにそのまま実装し直しました。
PBRや簡単な物だけですが、ハイエンドエンジンの技術を取り込んだのでそこそこよい見た目になった気がします。
これは公開していませんが、動くものはこちらから見れます。
2/10（公開した）
3次元的に幾何学な形状のトンネルを進んでいきますが、実はこれは3Dではなく2Dの作品です。
幾何学模様を複数のレイヤーで作成して、サイズを変えたり、奥のレイヤーほど黒くすることで、疑似的に3次元的な表現をしています。
この手法は、当時TLで流行っていたので乗っかりました。
我ながら、うろ覚えのため20%程の再現度でほとんど原型をとどめませんでした...（おそらく色は白色一色だったし、もっと密度も少なかった気がする...）
ですがわかる人にはわかるようで、一人気づいてくれた方がいました！（うれしい！！）
とあるアニメのライブでみたやつだ
— くしー (@xisai) 2019年2月10日
これはこちらのツイートで公開しました
今日チケットを取ってくれた友人について行って、とあるアニメのライブを見てきたんですが、そのバックで流れてる映像が完全にIFSだったので似たようなものを作った（うろ覚え）https://t.co/ogtM7nTu9d pic.twitter.com/10qhvxA2Gi
— かねた (@kanetaaaaa) 2019年2月10日
実際に動くものはこちらから見れます
2/19（公開した）
そこで、最初に紹介したPBRをそのまま活用して、一つのシェーダーに仕上げました。
空や環境光はかなり力技+二度と読まない気で作っているのでやばいコードになってます...
この映像をループ動画にして、twitterで公開したところ、シュールな映像もあいまってそこそこ受けました。
悩んだ時に無限に眺めることができるシェーダーを作りました🤔https://t.co/crqojtpwAq#shadertoy #glsl #raymarching pic.twitter.com/KHUb44OjBB
— かねた (@kanetaaaaa) 2019年2月18日
実際に動くものはこちらから見れます
また面白いことに、派生作品もいくつか出現しました。
こういったフィードバックがあるのが、twitterの面白いところだと思います。
派生作品1
This is so cool! I have shader support in my small zx spectrum emulator. So finally it looks COMPLETE pic.twitter.com/2QVrsTY5wA
— ФОП Рой Спутников (@bookazo1d) 2019年2月20日
こちらは、自作のシェーダーをサポートしているという、zx spectrumエミュレーターに私のシェーダーをポートして前面に表示した物のようです。
派生作品2
— kaiware style🌱 (@kaiware007) 2019年2月20日
thinkingFaceの距離関数を、自作の距離関数に変更した物のようです。
PBRで描画されているので、色や形状や材質が変わっても説得力のある映像になっていますね！
派生作品3
私も無限に悩んでいます🤔https://t.co/PQVfDikll7#shadertoy #glsl #raymarching pic.twitter.com/L5sOktM0jM
— がむ@GDC登壇した (@gam0022) 2019年2月20日
こちらも公開していたコードを独自の距離関数に変更したものです。
メタリックな表現もかっこいいですね！
実はこの文字にも私が過去に作ったシェーダーが使われていたりします！（重いためブラクラ注意！）
派生作品4
悩んだ時に無限に眺めることができるコインプッシャーを作りました🤔
— KeiChan (@KeiChannel_tw) 2019年2月21日
(稀に泣きます😂) pic.twitter.com/AMsbZ5IsCq
こちらは変化球できましたね🤔
爆ぜるコインがシュールです😂
さいごに
2月に作った3作品を紹介しました。
来月も、もし何か作ったら紹介します。（三日坊主なので不安しかない）
二次元ベクトルに垂直なベクトル
必要だったのでメモ
二次元ベクトルであれば、90度回転させると垂直なベクトルになります(当たり前)
90度の回転であれば、行列計算の結果がコンポーネントと符号の入れ替えになるため、わざわざ回転行列を用意する必要はなく
vertical = vec2(-vec.y, vec.x);
とするだけで良いです
なんとあのShadertoyのShader Of the Weekに作品が掲載された！！
憧れのサイトのトップページを飾れて嬉しさしかないです！！
学生時代は「Shadertoy = 神が集まるサイト」で平民の自分は全く理解できなかったので、神シェーダーを眺めているだけでした
まさか自分が作品を投稿するようになって、ましてやトップページの一番大きいところに載せて頂けるとは当時は想像すらしていなかったです...
The Shader of the Week is "traveler" by kaneta: https://t.co/NvZJNGO1a8 pic.twitter.com/dUfrO82tz1
— Shadertoy (@Shadertoy) 2018年12月27日
記念撮影
