今、GLSLを毎日書いてNEORTにアップするという事を続けているのですが、何がどうしてそういう事になっているのか、またどうやって書いているのかということを書きたいと思います。
Vedaとの出会い
確か、2019年の2月頃だったと思います。
UnityでVJ出来ないかなあとぼんやり思っていたのですが、とりあえずシェーダーを書けるようにならねばと情報収集しているときに、VedaというATOMのプラグインの存在を知りました。
（ついでに地元で開催している「ゆるい勉強会」のネタにしました）
ソースコードを書いて、そのエディターの背景に結果が表示される、その衝撃たるや。。。一瞬で虜になりました。
とりあえず毎日書いてみようとする
いかんせんアウトプットの量の少なさを感じていた身でありましたのと、年齢もハンデだなあと思っておりましたので、とりあえず毎日何かしら書いて覚えようと、それが始まりです。
NEORTの存在を知る
最初、twitterに上げていたのですが、そこでNEORTというサービスが開始された事を知ります。
試しにVedaで書いて、アップしてみましたが、コピペで投稿出来るのでほぼ労力がかかりません。（ちなみに当時はtwitter投稿機能が無かったので、Vedaで書く→NEORTにコピペして投稿→twitterにURLを貼るという流れでした）
それまでは出来た絵を録画してtwitterに載せていたので、少し面倒だったのですが、これはすごく良いと思い、今現在も活用させていただいております。
GLSLを書く
ようやく本題です。
エディターのソフトウェアはATOMで、Vedaを使います。
いつもは、前の日書いたGLSLをコピーペーストして複製し、そこから派生させたり、全く新しく書いたりしています。
新しく書く場合は、以下のテンプレートを使っています。
precision mediump float;
uniform float time;
uniform vec2 resolution;
void main() {
vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
vec3 color = vec3(1.0);
gl_FragColor = vec4(color, 1.0);
}
この部分で座標を中心に書きやすくしています。
vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
とにかく書き始める
ここからは、とにかく形を作っていきます。
形は色々なサイトに転がっています。有名なIq氏のサイトや、The Book Of Shaders、wgld.orgなどなど。。。
今回はShadershopで得た式を使いました。
float p = sin(st.x + 1.5) + sin(st.x / 0.2);
これを、The Book Of Shadersで得たPlot関数で描画します。
precision mediump float;
uniform float time;
uniform vec2 resolution;
float plot(vec2 p, float v){
return smoothstep( v - 0.1, v, p.y) - smoothstep( v + 0.1, v, p.y);
}
void main() {
vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
float p = sin(st.x + 1.5) + sin(st.x/0.2);
vec3 color = vec3(1.0);
color *= vec3(plot(st,p));
gl_FragColor = vec4(color, 1.0);
}
これで以下のような絵が出ます。
なんか大きすぎてよくわからない。。。そんなときは、こうします。
vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
st *= 10.0;
すると
こうなります。
ここからは、手の赴くままに書きます。
このタイミングでは、なんかグチャグチャした感じのが良いなあと、ぼんやり思っています。
とりあえず、もう一個式を作って重ねてみます。
float p = sin(st.x + 1.5) + sin(st.x/0.2);
float p2 = sin(st.x + 1.6) + sin(st.x/0.5) + sin(st.y + 0.5);
vec3 color = vec3(1.0);
color *= vec3(plot(st,p));
color *= vec3(plot(st,p2));
gl_FragColor = vec4(color, 1.0);
なるほど。
とりあえず色つけてみるか、ということで、さらに増やします。
float p = sin(st.x + 1.5) + sin(st.x/0.2);
float p2 = sin(st.x + 1.6) + sin(st.x/0.5) + sin(st.y + 0.5);
float p3 = sin(st.x + 2.0) + sin(st.x/0.5) + sin(st.y + 2.5);
float p4 = sin(st.x + 3.0) + sin(st.x/0.5);
float p5 = sin(st.x + 0.2) + sin(st.x/0.3);
vec3 color = vec3(1.0);
color *= vec3(plot(st,p));
color *= vec3(plot(st,p2));
color *= vec3(plot(st,p3),plot(st,p4),plot(st,p4));
color *= vec3(plot(st,p),plot(st,p2),plot(st,p5));
gl_FragColor = vec4(color, 1.0);
カラフルでグチャッとしたのが出来ました。
同じ形の式を並べてしまっているので、本来ならばリファクタリングすべきですが、もう勢いで作ってしまいます。
ここから、timeを使って動きを出したり、座標をいじったり、色々して、今日出来たものがコレです。
動いているのでNEORTで観てください。
毎日書くために
こんな事を毎日続けているのですが、毎日続けるために決めている事があります。
- 作業時間は30分前後
- 投稿時間は固定しないで出来る時に投稿する
とにかく無理はしない。でも毎日続ける。それに尽きます。
30分でとても面白い絵が出せるのがGLSLのすごいところ。だと思っています。
今の悩みと今後の展望
最後に、今抱えている悩みと今後の展望です。
- 進歩がほぼ無くなっている
- 数学力が足りない
- 作品の明確なテーマがない
- VJやりたいなという気持ちからスタートしているので、VJやりたい
- 他のツールに持っていく
現状素振りを延々と続けている状態でして、
特に、テーマが無い事に関しては大きな問題だなあと思っており、来年はその辺りをどうにかするつもりです。。。
デイリーコーディングおすすめです
とはいえ、これのおかげで色々な経験が出来たのも事実としてあります。
デイリーコーディングがどのように良いのかは、こちらの方のエントリーにきちんと書かれておりますので、こちらを読んでいただければと思います。
以上となります。今後とも宜しくお願いいたします。
（できればガンガン指摘いただけると嬉しいですが、なかなかそうもいかないものですね。。。）