Zenn
Open20

GLSLやってみる

WebGL
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.);
}

つざきつざき
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![](https://storage.googleapis.com/zenn-user-upload/cebbe8cf718c-20221021.gif)

    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に手を出してしまったね

つざきつざき

https://wgld.org/d/glsl/g005.html
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で簡単にできたから、それを応用して画像もねじれないかな？と思ったけど
やっぱり回転行列じゃなくちゃだめだった
回転行列で何で回転するのかはいまいちわかってない

https://www.shadertoy.com/view/mdf3Dj