Open20
GLSLやってみる
つざきとりあえずsinだけで遊ぶ
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Output to screen
fragColor = vec4(vec3(sin(uv.x*30. + iTime)),1.0);
}
つざきなんかsinで-1 ~ 1の範囲の色になっちゃったので正規化？する
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Output to screen
fragColor = vec4(vec3(sin(uv.x*30. + iTime)/2. + 0.5),1.0);
}
つざき縦方向にもにも同じことをやってみる
なんか思ってたんと違うのができたなんだこれ
重なった部分が光が強くなりすぎて白飛びしてるんだ
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Output to screen
fragColor = vec4(
vec3(sin(uv.x*30. + iTime)/2. + 0.5+ sin(uv.y * 30. + iTime)/2. + 0.5),1.0);
}
つざき一旦縦だけ
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Output to screen
fragColor = vec4(
vec3( sin(uv.y * 30. + iTime)/2. + 0.5),1.0);
}
つざき弱めたらドットっぽくなったヨシ
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float aspect = uv.x/ uv.y;
// Output to screen
fragColor =
vec4(
vec3(
sin(uv.x*100.+ iTime)*0.5 + 0.2
+
sin(uv.y*100.+ iTime)*0.5 + 0.2)
,1.);
}
つざき１週間ぶりにやろうと思ったらどうやってやってたか完全に忘れた
shadertoyを使っていた模様
1日1glslしていくぞ
つざきvoid mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
vec2 center = uv /2. + vec2(0.5, 0.5);
fragColor = vec4(vec3(length(center - uv) * 2.),1.0);
}
ただ真ん中に物を表示したいだけなのに15分くらい悩んでる
つざき
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float aspect = float(iResolution.x) / iResolution.y;
vec2 center = vec2(0.5);
vec2 uvCenterised = (center - uv) * 2.;
uvCenterised = uvCenterised * vec2(aspect, 1.);
fragColor = vec4(vec3(1. - length(uvCenterised)),1.0);
}
やっと真ん中に丸をかけた
つざきWebGL総本山でチラ見した光の球ができたぞ
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float aspect = float(iResolution.x) / iResolution.y;
vec2 center = vec2(0.5);
vec2 uvCenterised = (center - uv) * 2.;
uvCenterised = uvCenterised * vec2(aspect, 1.);
float len = length(uvCenterised);
float brightness = 0.1 / len ;
fragColor = vec4(vec3(brightness),1.0);
}
つざき
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float aspect = float(iResolution.x) / iResolution.y;
vec2 point = vec2(0.5 + (sin(iTime* 3.14)/3.) / aspect, 0.5 + cos(iTime * 3.14)/3.);
vec2 uvCenterised = (point - uv) * 2.;
uvCenterised = uvCenterised * vec2(aspect, 1.);
float len = length(uvCenterised);
float brightness = 0.1 / len ;
fragColor = vec4(vec3(brightness),1.0);
}
sin,cos完全理解（うそ）
つざき
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float aspect = float(iResolution.x) / iResolution.y;
float centerY =0.5;
float temp = centerY - uv.y - sin((uv.x *10.) * 3.14 + (iTime * 10.))/10. * 2. / aspect;
temp = abs(temp);
float brightness = 0.02 / temp ;
fragColor = vec4(vec3(brightness),1.0);
}
まじで雰囲気でやってるので変数名をつけられくてtempとか書いてる
つざき
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float aspect = float(iResolution.x) / iResolution.y;
float centerY =0.5;
float tempR = abs(centerY - uv.y - sin((uv.x *10.) * 3.14)/10. * sin(iTime * 10.) * 2. / aspect);
float tempG = abs(centerY - uv.y - sin((uv.x *10.) * 3.14 )/10. * sin(iTime * 10.+0.5) * 2. / aspect);
float tempB = abs(centerY - uv.y - sin((uv.x *10.) * 3.14)/10. * sin(iTime * 10. + 0.9) * 2. / aspect);
vec3 color = 0.05/ vec3(tempR,tempG,tempB);
fragColor = vec4(color,1.0);
}
1日1GLSL
しばらく白黒で基礎をやろうと思ってたけど出来心で色に手を出してしまった
sin, cosってベクトルのまま一気に計算できるんだな〜
sin(vec3(.1, .3, .5))`
みたいな感じで
あと四足演算もベクトルのまま一気に計算できるんだな〜と思った
vec3 a = vec3(.1, .2, .3) + 0.5;
三角形を表示したい気分になったのでやってみる
if文は遅くなりそうだから使いたくないけど簡単のために一旦使ってやってみるか
つざき
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float aspect = float(iResolution.x) / iResolution.y;
float pi = 3.141592653589793;
// Time varying pixel color
vec3 col = vec3(0.);
vec2 centeriseUv = uv.xy - 0.5;
centeriseUv= centeriseUv * vec2(aspect, 1.);
float baseSpeed = 1.;
for (int i =0 ; i< 3; i ++) {
float speed = baseSpeed * float(i+1) * 0.5 ;
float timeDiff = 0.;
//回転行列とかいうらしい
vec2 rotatedUv =vec2(
centeriseUv.x * cos(pi * (iTime + timeDiff) * speed) - centeriseUv.y * sin(pi * (iTime + timeDiff) * speed),
centeriseUv.x * sin(pi * (iTime + timeDiff) * speed) + centeriseUv.y * cos(pi * (iTime + timeDiff) * speed));
if ( tan(3.14 * 60./360. ) * rotatedUv.y -0.1< (rotatedUv.x)
&& tan(3.14 * -60./360. ) * rotatedUv.y +0.1> (rotatedUv.x)
&& rotatedUv.y > -0.1 ) {
if (i ==0 ) {
col.r += 1.;
}
if (i ==1 ) {
col.g += 1.;
}
if (i ==2 ) {
col.b += 1.;
}
}
}
// Output to screen
fragColor = vec4(col,1.0);
}
欲張って回転行列とforに手を出してしまったね
つざき
wgldを参考にマンデルブロ集合にチャレンジ
forの回数を時間で制御したらいい感じになった
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Time varying pixel color
vec3 col = vec3(1.0);
// フラグメント座標の正規化
vec2 p = (fragCoord.xy * 2.0 - float(iResolution)) / min(iResolution.x, iResolution.y);
// マンデルブロ集合
int j = 0; // カウンタ
vec2 x = p + vec2(-0.5, 0.4); // 原点を少しずらす
float y = 1. ; // マウス座標を使って拡大度を変更
vec2 z = vec2(0.0, 0.0); // 漸化式 Z の初期値
// 漸化式の繰り返し処理(今回は max360 回ループ)
int maxLoop = min( int(iTime * 10.) - 10 , 360);
for(int i = 0; i < maxLoop; i++){
j++;
if(length(z) > 2.0){break;}
z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + x * y;
}
float t = float(j) / float(maxLoop);
// Output to screen
fragColor = vec4(col * t,1.0);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Time varying pixel color
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
vec4 temp = texture(iChannel0, uv);
col = temp.rgb * .2
+ vec3( tan((temp.rgb * vec3(3. ,1. ,0) +(( iTime ) / 135.) * 100.) * 3.1415) )
* vec3(10. , 0.0 , .0) ;
// Output to screen
fragColor = vec4(col,1.0);
}
つざきvoid mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Time varying pixel color
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
vec4 temp = texture(iChannel0, uv);
col = temp.rgb * .2
+ vec3( tan((temp.rgb * vec3(3. ,5.,50.) +(( iTime ) / 135.) * 100.) * 3.1415) )
* vec3(1. , 0.1 , 1.);
// Output to screen
fragColor = vec4(col,1.0);
}
つざき
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float waveStrength = (sin(iTime) ) + 1.0;
float waveSpeed= 0.2 + sin(iTime) * .1;
vec2 uvR = uv;
vec2 uvG = uv;
vec2 uvB = uv;
float waveStrengthX = 0.04;
float waveStrengthY = 0.008;
for (int i=5; i<16; i++) {
// uv = vec2(
// uv.x + sin(uv.y * float(i * i) * 0.2 + iTime) * 0.02 * waveTime ,
// uv.y + sin(uv.x * float(i* i) * 0.2 + iTime) * 0.01 * waveTime);
uvR = vec2(
uvR.x + sin(uvR.y * float(i * i) * waveSpeed + iTime + .0) * waveStrengthX * waveStrength ,
uvR.y + sin(uvR.x * float(i* i) * waveSpeed+ iTime+ .0) * waveStrengthY * waveStrength);
uvG = vec2(
uvG.x + sin(uvG.y * float(i * i) * waveSpeed + iTime+ .2) * waveStrengthX * waveStrength ,
uvG.y + sin(uvG.x * float(i* i) * waveSpeed+ iTime+ .2) *waveStrengthY* waveStrength);
uvB = vec2(
uvB.x + sin(uvB.y * float(i * i) * waveSpeed+ iTime+ 0.3) * waveStrengthX * waveStrength ,
uvB.y + sin(uvB.x * float(i* i) * waveSpeed+ iTime+ 0.3) * waveStrengthY * waveStrength);
}
// sample texture and output to screen
vec4 fragColorR = texture(iChannel0, uvR);
vec4 fragColorG = texture(iChannel0, uvG);
vec4 fragColorB = texture(iChannel0, uvB);
fragColor = vec4(vec3(fragColorR.r, fragColorG.g, fragColorR.b), 1.);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
float aspect = float(iResolution.x) / iResolution.y;
float brightness = 0.;
int ballCount = int(cos(iTime * 3.14 ) * 12. + 12.) + 3;
float brightnessAmp = 0.1;
for (int i = 0; i < ballCount; i++) {
vec2 point = vec2(
0.5 + (sin((iTime + float(i)/float(ballCount)*2. )* 3.14 )/3.) / aspect,
0.5 + cos((iTime + float(i)/float(ballCount)*2.) * 3.14)/3.);
vec2 uvCenterised = (point - uv) * 2.;
uvCenterised = uvCenterised * vec2(aspect, 1.);
float len = length(uvCenterised);
brightness += 0.05 / (len * float(ballCount) * 0.2) ;
}
fragColor = vec4(vec3(brightness),1.0);
}
ほんとはノイズやりたかったけどむずくて一旦やめた
GLSLはコピペは簡単だけど、真に理解するのはとても難しい
つざきちょっとしたのを作ろうと思ったけど1時間半くらいとけたな
球の回転がsinとcosで簡単にできたから、それを応用して画像もねじれないかな？と思ったけど
やっぱり回転行列じゃなくちゃだめだった
回転行列で何で回転するのかはいまいちわかってない
