ツイッターで書いた以下の #つぶやきGLSL の作成ログ。
前回の斜め方向ドットが若干コレジャナイ感があったので焼き直し。
#つぶやきGLSL#define C(c,k)y=abs(.5-sin(t)*2.-(c));if(y<.5&&length(f-.1)<0.1-y*.2)gl_FragColor.rgb+=k;
void main(){
mat3 m=mat3(.9);float y;
vec2 p=(gl_FragCoord.xy*2.-r)/r,l=floor(p*5.)/5.,f=p-l;
C(l.x+l.y,m[0])
C(-l.x+l.y,m[1])
C(l.x-l.y,m[2])
C(-l.x-l.y,m[0]+m[1])
} pic.twitter.com/eh3n5ifwJU— Narumium (@Nr_Narumium) November 12, 2020
ツイッターで書いた以下の #つぶやきGLSL の作成ログ。
タイトルに迷ったので通し番号でナンバリング。
FMラジオ感(?)が足りない #つぶやきGLSL#define C(c,n,s)y=2.-abs(sin(t+s))*3.;if(y<c)if(length(f-.1)<.1*(-y+c))gl_FragColor.rgb+=m[n];
void main(){
mat3 m=mat3(.9);
vec2 p=(gl_FragCoord.xy*2.-r)/r,l=floor(p*5.)/5.,f=p-l;
float y;
C(l.x+l.y,2,0.)
C(l.y-l.x,0,.4)
C(-l.y,1,.8)
} pic.twitter.com/sGY0lD6sGm— Narumium (@Nr_Narumium) November 11, 2020
ツイッターで書いた以下の #つぶやきGLSL の作成ログです。
#つぶやきGLSL
void main(){mat3 m=mat3(.5);vec2 p=(gl_FragCoord.xy*2.-r)/r;float y=mod(t,6.),c=floor(y/2.);y-=c*2.;gl_FragColor.rgb=c<.1?m[2]:c<2.?m[0]:m[1];if(2.-y*4.<p.x+p.y)for(float i=-2.;i<2.;i+=.2)if(abs(p.x-p.y+i)<max(y-1.,.2)*.1)gl_FragColor.rgb=c<.1?m[0]:c<2.?m[1]:m[2];} pic.twitter.com/67saR3nF1d— Narumium (@Nr_Narumium) November 9, 2020
ちょっといつもと違う感じにお絵描きがしたくなったので、基本になる四角形を色々書いてみます。正方形、長方形、角丸、適当な4点などの基本形。
トゥーンシェーディング（セルシェーディング）はアニメ風の塗りを表現します。
今回は３Dを描画するときのトゥーンレンダリングではなくて、画像をそれっぽく変換してみたいと思います。
することを簡単に書くと、明るさを数段階に分けることとエッジ抽出です。
今回はやりたいことと考え方のまとめで、上手くは行きません。
これまで GLSL（とほんの少しのHLSL）を書いてましたが、フラグメントシェーダーしか書いていないことに気づいた。
もう一つの頂点シェーダー（バーテックスシェーダー）にも触れてみたい。
サンプルは全然見つからないし情報自体が少ないので gl-react のソースを見ながらバーテックスシェーダーの動作を確認します。
今回は基本的な確認までです。
前回 React + GLSL で音声波形の表示ができたので、どんなふうに描画するのがいいかいくつか試してみました。
今回は基本的に GLSL のコードサンプルになります。
