├── glsl
    ├── 4-uv-draw
    │   ├── uv.glsl
    │   ├── uv-blur.glsl
    │   ├── uv-glow.glsl
    │   ├── uv-circle.glsl
    │   ├── uv-sdf.glsl
    │   ├── uv-polar.glsl
    │   ├── uv-sdf-alteration.glsl
    │   ├── uv-repeat-pattern.glsl
    │   ├── uv-mix.glsl
    │   ├── uv-transform.glsl
    │   └── uv-sdf-bool.glsl
    ├── 5-texture
    │   ├── texture-load.glsl
    │   ├── texture-distort.glsl
    │   └── texture-transition.glsl
    ├── 7-postprocessing
    │   ├── tint.glsl
    │   ├── pixelate.glsl
    │   ├── vignette.glsl
    │   ├── bulge.glsl
    │   └── rgb-shift.glsl
    ├── 6-random
    │   ├── random.glsl
    │   ├── random-grain.glsl
    │   ├── noise.glsl
    │   ├── noise-transition.glsl
    │   ├── fbm.glsl
    │   └── fbm-dissolve.glsl
    └── 2-first-shader
    │   └── first-shader.glsl
├── html
    ├── 4-uv-draw
    │   ├── uv.html
    │   ├── uv-blur.html
    │   ├── uv-glow.html
    │   ├── uv-circle.html
    │   ├── uv-sdf.html
    │   ├── uv-polar.html
    │   ├── uv-sdf-alteration.html
    │   ├── uv-repeat-pattern.html
    │   ├── uv-mix.html
    │   ├── uv-transform.html
    │   └── uv-sdf-bool.html
    ├── 5-texture
    │   ├── texture-load.html
    │   ├── texture-distort.html
    │   └── texture-transition.html
    ├── 7-postprocessing
    │   ├── tint.html
    │   ├── pixelate.html
    │   ├── vignette.html
    │   ├── bulge.html
    │   └── rgb-shift.html
    ├── 6-random
    │   ├── random.html
    │   ├── random-grain.html
    │   ├── noise.html
    │   ├── noise-transition.html
    │   ├── fbm.html
    │   └── fbm-dissolve.html
    ├── 2-first-shader
    │   └── first-shader.html
    ├── 8-vertex
    │   ├── vertex-shader-object.html
    │   ├── vertex-shader-points.html
    │   ├── vertex-shader-distort.html
    │   └── vertex-shader-attribute.html
    └── 9-lighting
    │   ├── lighting-phong.html
    │   ├── lighting-blinn-phong.html
    │   ├── lighting-ibl-specular.html
    │   ├── lighting-fresnel.html
    │   └── lighting-fix-normal.html
└── bonus
    ├── shader-image-transition-ripple.glsl
    ├── shader-image-transition-mosaic.glsl
    ├── shader-simple-god-rays-effect.glsl
    ├── shader-image-transition-sdf-mask.glsl
    ├── shader-fbm-paper-texture.glsl
    └── shader-fbm-particle-transition.glsl


/glsl/4-uv-draw/uv.glsl:
--------------------------------------------------------------------------------
1 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
2 |     vec2 uv=fragCoord/iResolution.xy;
3 |     // fragColor=vec4(uv.x,0.,0.,1.);
4 |     // fragColor=vec4(0.,uv.y,0.,1.);
5 |     fragColor=vec4(uv,0.,1.);
6 | }
7 | 


--------------------------------------------------------------------------------
/glsl/5-texture/texture-load.glsl:
--------------------------------------------------------------------------------
1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
2 | 
3 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
4 |     vec2 uv=fragCoord/iResolution.xy;
5 |     vec3 tex=texture(iChannel0,uv).xyz;
6 |     fragColor=vec4(tex,1.);
7 | }
8 | 


--------------------------------------------------------------------------------
/glsl/7-postprocessing/tint.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
 2 | 
 3 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 4 |     vec2 uv=fragCoord/iResolution.xy;
 5 |     vec3 tex=texture(iChannel0,uv).xyz;
 6 |     
 7 |     vec3 col=tex;
 8 |     vec3 tintColor=vec3(.220,.380,.651);
 9 |     col*=tintColor;
10 |     fragColor=vec4(col,1.);
11 | }
12 | 


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-blur.glsl:
--------------------------------------------------------------------------------
 1 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 2 |     vec2 uv=fragCoord/iResolution.xy;
 3 |     uv=(uv-.5)*2.;
 4 |     uv.x*=iResolution.x/iResolution.y;
 5 |     
 6 |     float d=length(uv);
 7 |     d-=.5;
 8 |     // float c=step(0.,d);
 9 |     // float c=smoothstep(0.,.02,d);
10 |     float c=smoothstep(0.,.2,d);
11 |     fragColor=vec4(vec3(c),1.);
12 | }
13 | 


--------------------------------------------------------------------------------
/glsl/5-texture/texture-distort.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
 2 | 
 3 | vec2 distort(vec2 p){
 4 |     p.x+=sin(p.y*10.+iTime)/50.;
 5 |     return p;
 6 | }
 7 | 
 8 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 9 |     vec2 uv=fragCoord/iResolution.xy;
10 |     uv=distort(uv);
11 |     vec3 tex=texture(iChannel0,uv).xyz;
12 |     fragColor=vec4(tex,1.);
13 | }
14 | 


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-glow.glsl:
--------------------------------------------------------------------------------
 1 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 2 |     vec2 uv=fragCoord/iResolution.xy;
 3 |     uv=(uv-.5)*2.;
 4 |     uv.x*=iResolution.x/iResolution.y;
 5 |     
 6 |     float d=length(uv);
 7 |     // d-=.5;
 8 |     // float c=step(0.,d);
 9 |     // float c=smoothstep(0.,.02,d);
10 |     float c=.25/d;
11 |     c=pow(c,1.6);
12 |     fragColor=vec4(vec3(c),1.);
13 | }
14 | 


--------------------------------------------------------------------------------
/glsl/6-random/random.glsl:
--------------------------------------------------------------------------------
 1 | highp float random(vec2 co)
 2 | {
 3 |     highp float a=12.9898;
 4 |     highp float b=78.233;
 5 |     highp float c=43758.5453;
 6 |     highp float dt=dot(co.xy,vec2(a,b));
 7 |     highp float sn=mod(dt,3.14);
 8 |     return fract(sin(sn)*c);
 9 | }
10 | 
11 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
12 |     vec2 uv=fragCoord/iResolution.xy;
13 |     
14 |     float noise=random(uv);
15 |     // float noise=random(uv+iTime);
16 |     
17 |     vec3 col=vec3(noise);
18 |     fragColor=vec4(col,1.);
19 | }
20 | 


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-circle.glsl:
--------------------------------------------------------------------------------
 1 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 2 |     vec2 uv=fragCoord/iResolution.xy;
 3 |     uv=(uv-.5)*2.;
 4 |     uv.x*=iResolution.x/iResolution.y;
 5 |     float d=length(uv);
 6 |     d-=.5;
 7 |     // float c=0.;
 8 |     // if(d>0.){
 9 |         //     c=1.;
10 |     // }else{
11 |         //     c=0.;
12 |     // }
13 |     // float c=step(0.,d);
14 |     float c=smoothstep(0.,.02,d);
15 |     // fragColor=vec4(vec3(d),1.);
16 |     fragColor=vec4(vec3(c),1.);
17 |     // fragColor=vec4(uv,0.,1.);
18 | }
19 | 


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-sdf.glsl:
--------------------------------------------------------------------------------
 1 | float sdCircle(vec2 p,float r)
 2 | {
 3 |     return length(p)-r;
 4 | }
 5 | 
 6 | float sdBox(in vec2 p,in vec2 b)
 7 | {
 8 |     vec2 d=abs(p)-b;
 9 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
10 | }
11 | 
12 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
13 |     vec2 uv=fragCoord/iResolution.xy;
14 |     uv=(uv-.5)*2.;
15 |     uv.x*=iResolution.x/iResolution.y;
16 |     
17 |     // float d=sdCircle(uv,.5);
18 |     float d=sdBox(uv,vec2(.6,.3));
19 |     float c=smoothstep(0.,.02,d);
20 |     fragColor=vec4(vec3(c),1.);
21 | }
22 | 


--------------------------------------------------------------------------------
/glsl/7-postprocessing/pixelate.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
 2 | 
 3 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 4 |     vec2 uv=fragCoord/iResolution.xy;
 5 |     
 6 |     // uv
 7 |     // float c=uv.x;
 8 |     // c=floor(c*10.)/10.;
 9 |     // fragColor=vec4(vec3(c),1.);
10 |     
11 |     // pixelate
12 |     vec2 size=vec2(50.,50.);
13 |     // uv.x=floor(uv.x*size.x)/size.x;
14 |     // uv.y=floor(uv.y*size.y)/size.y;
15 |     uv=floor(uv*size)/size;
16 |     vec3 tex=texture(iChannel0,uv).xyz;
17 |     fragColor=vec4(tex,1.);
18 | }
19 | 


--------------------------------------------------------------------------------
/glsl/7-postprocessing/vignette.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
 2 | 
 3 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 4 |     vec2 uv=fragCoord/iResolution.xy;
 5 |     vec3 tex=texture(iChannel0,uv).xyz;
 6 |     
 7 |     // vec3 col=vec3(1.);
 8 |     vec3 col=tex;
 9 |     vec2 p=uv;
10 |     p-=.5;
11 |     float d=length(p);
12 |     // col=vec3(d);
13 |     // float c=smoothstep(.4,.8,d);
14 |     // float c=1.-smoothstep(.4,.8,d);
15 |     float c=smoothstep(.8,.4,d);
16 |     // col=vec3(c);
17 |     col*=c;
18 |     
19 |     fragColor=vec4(col,1.);
20 | }
21 | 


--------------------------------------------------------------------------------
/glsl/2-first-shader/first-shader.glsl:
--------------------------------------------------------------------------------
 1 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 2 |     vec3 color1=vec3(1.,0.,1.);
 3 |     vec3 color2=vec3(1.,1.,0.);
 4 |     vec3 color3=vec3(0.,0.,1.);
 5 |     vec3 color4=vec3(1.,0.,0.);
 6 |     if(fragCoord.x<iResolution.x*.25){
 7 |         fragColor=vec4(color1,1.);
 8 |     }else if(fragCoord.x>=iResolution.x*.25&&fragCoord.x<iResolution.x*.5){
 9 |         fragColor=vec4(color2,1.);
10 |     }else if(fragCoord.x>=iResolution.x*.5&&fragCoord.x<iResolution.x*.75){
11 |         fragColor=vec4(color3,1.);
12 |     }else{
13 |         fragColor=vec4(color4,1.);
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/html/4-uv-draw/uv.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
14 |     vec2 uv=fragCoord/iResolution.xy;
15 |     // fragColor=vec4(uv.x,0.,0.,1.);
16 |     // fragColor=vec4(0.,uv.y,0.,1.);
17 |     fragColor=vec4(uv,0.,1.);
18 | }
19 |     `;
20 |     kokomi.ShaderToyElement.register();
21 | </script>


--------------------------------------------------------------------------------
/glsl/6-random/random-grain.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
 2 | 
 3 | highp float random(vec2 co)
 4 | {
 5 |     highp float a=12.9898;
 6 |     highp float b=78.233;
 7 |     highp float c=43758.5453;
 8 |     highp float dt=dot(co.xy,vec2(a,b));
 9 |     highp float sn=mod(dt,3.14);
10 |     return fract(sin(sn)*c);
11 | }
12 | 
13 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
14 |     vec2 uv=fragCoord/iResolution.xy;
15 |     
16 |     float noise=random(uv);
17 |     // float noise=random(uv+iTime);
18 |     
19 |     vec3 col=texture(iChannel0,uv).xyz;
20 |     col+=(noise-.5)*.2;
21 |     fragColor=vec4(col,1.);
22 | }
23 | 


--------------------------------------------------------------------------------
/html/5-texture/texture-load.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
 9 |     <script type="frag"></script>
10 | </shader-toy>
11 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
12 | <script>
13 |     document.querySelector('[type=frag]').textContent = /* glsl */`
14 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
15 |     vec2 uv=fragCoord/iResolution.xy;
16 |     vec3 tex=texture(iChannel0,uv).xyz;
17 |     fragColor=vec4(tex,1.);
18 | }
19 |     `;
20 |     kokomi.ShaderToyElement.register();
21 | </script>


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-polar.glsl:
--------------------------------------------------------------------------------
 1 | vec2 cart2polar(vec2 uv){
 2 |     float phi=atan(uv.y,uv.x);
 3 |     float r=length(uv);
 4 |     return vec2(phi,r);
 5 | }
 6 | 
 7 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
 8 |     vec2 uv=fragCoord/iResolution.xy;
 9 |     uv=(uv-.5)*2.;
10 |     uv.x*=iResolution.x/iResolution.y;
11 |     
12 |     // float phi=atan(uv.y,uv.x);
13 |     // float r=length(uv);
14 |     // uv=vec2(phi,r);
15 |     uv=cart2polar(uv);
16 |     
17 |     // uv
18 |     // fragColor=vec4(uv,0.,1.);
19 |     
20 |     // radial
21 |     // float c=sin(uv.x*12.);
22 |     // fragColor=vec4(vec3(c),1.);
23 |     
24 |     // spiral
25 |     float c=sin(uv.y*20.+uv.x);
26 |     fragColor=vec4(vec3(c),1.);
27 | }
28 | 


--------------------------------------------------------------------------------
/glsl/7-postprocessing/bulge.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
 2 | 
 3 | vec2 bulge(vec2 p){
 4 |     // vec2 center=vec2(.5);
 5 |     vec2 center=iMouse.xy/iResolution.xy;
 6 |     
 7 |     float radius=.9;
 8 |     float strength=1.1;
 9 |     
10 |     p-=center;
11 |     
12 |     float d=length(p);
13 |     d/=radius;
14 |     float dPow=pow(d,2.);
15 |     float dRev=strength/(dPow+1.);
16 |     
17 |     // p*=d;
18 |     // p*=dPow;
19 |     p*=dRev;
20 |     
21 |     p+=center;
22 |     
23 |     return p;
24 | }
25 | 
26 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
27 |     vec2 uv=fragCoord/iResolution.xy;
28 |     uv=bulge(uv);
29 |     vec3 tex=texture(iChannel0,uv).xyz;
30 |     fragColor=vec4(tex,1.);
31 | }
32 | 


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-blur.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
14 |     vec2 uv=fragCoord/iResolution.xy;
15 |     uv=(uv-.5)*2.;
16 |     uv.x*=iResolution.x/iResolution.y;
17 |     
18 |     float d=length(uv);
19 |     d-=.5;
20 |     // float c=step(0.,d);
21 |     // float c=smoothstep(0.,.02,d);
22 |     float c=smoothstep(0.,.2,d);
23 |     fragColor=vec4(vec3(c),1.);
24 | }
25 |     `;
26 |     kokomi.ShaderToyElement.register();
27 | </script>


--------------------------------------------------------------------------------
/html/7-postprocessing/tint.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
 9 |     <script type="frag"></script>
10 | </shader-toy>
11 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
12 | <script>
13 |     document.querySelector('[type=frag]').textContent = /* glsl */`
14 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
15 |     vec2 uv=fragCoord/iResolution.xy;
16 |     vec3 tex=texture(iChannel0,uv).xyz;
17 |     
18 |     vec3 col=tex;
19 |     vec3 tintColor=vec3(.220,.380,.651);
20 |     col*=tintColor;
21 |     fragColor=vec4(col,1.);
22 | }
23 |     `;
24 |     kokomi.ShaderToyElement.register();
25 | </script>


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-glow.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
14 |     vec2 uv=fragCoord/iResolution.xy;
15 |     uv=(uv-.5)*2.;
16 |     uv.x*=iResolution.x/iResolution.y;
17 |     
18 |     float d=length(uv);
19 |     // d-=.5;
20 |     // float c=step(0.,d);
21 |     // float c=smoothstep(0.,.02,d);
22 |     float c=.25/d;
23 |     c=pow(c,1.6);
24 |     fragColor=vec4(vec3(c),1.);
25 | }
26 |     `;
27 |     kokomi.ShaderToyElement.register();
28 | </script>


--------------------------------------------------------------------------------
/html/5-texture/texture-distort.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
 9 |     <script type="frag"></script>
10 | </shader-toy>
11 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
12 | <script>
13 |     document.querySelector('[type=frag]').textContent = /* glsl */`
14 | vec2 distort(vec2 p){
15 |     p.x+=sin(p.y*10.+iTime)/50.;
16 |     return p;
17 | }
18 | 
19 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
20 |     vec2 uv=fragCoord/iResolution.xy;
21 |     uv=distort(uv);
22 |     vec3 tex=texture(iChannel0,uv).xyz;
23 |     fragColor=vec4(tex,1.);
24 | }
25 |     `;
26 |     kokomi.ShaderToyElement.register();
27 | </script>


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-sdf-alteration.glsl:
--------------------------------------------------------------------------------
 1 | float sdCircle(vec2 p,float r)
 2 | {
 3 |     return length(p)-r;
 4 | }
 5 | 
 6 | float sdBox(in vec2 p,in vec2 b)
 7 | {
 8 |     vec2 d=abs(p)-b;
 9 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
10 | }
11 | 
12 | float opRound(in float d,in float r)
13 | {
14 |     return d-r;
15 | }
16 | 
17 | float opOnion(in float d,in float r)
18 | {
19 |     return abs(d)-r;
20 | }
21 | 
22 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
23 |     vec2 uv=fragCoord/iResolution.xy;
24 |     uv=(uv-.5)*2.;
25 |     uv.x*=iResolution.x/iResolution.y;
26 |     
27 |     // float d=sdCircle(uv,.5);
28 |     float d=sdBox(uv,vec2(.6,.3));
29 |     
30 |     // round
31 |     // d=opRound(d,.1);
32 |     
33 |     // onion
34 |     d=opOnion(d,.1);
35 |     
36 |     float c=smoothstep(0.,.02,d);
37 |     fragColor=vec4(vec3(c),1.);
38 | }
39 | 


--------------------------------------------------------------------------------
/html/6-random/random.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | highp float random(vec2 co)
14 | {
15 |     highp float a=12.9898;
16 |     highp float b=78.233;
17 |     highp float c=43758.5453;
18 |     highp float dt=dot(co.xy,vec2(a,b));
19 |     highp float sn=mod(dt,3.14);
20 |     return fract(sin(sn)*c);
21 | }
22 | 
23 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
24 |     vec2 uv=fragCoord/iResolution.xy;
25 |     
26 |     float noise=random(uv);
27 |     // float noise=random(uv+iTime);
28 |     
29 |     vec3 col=vec3(noise);
30 |     fragColor=vec4(col,1.);
31 | }
32 |     `;
33 |     kokomi.ShaderToyElement.register();
34 | </script>


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-circle.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
14 |     vec2 uv=fragCoord/iResolution.xy;
15 |     uv=(uv-.5)*2.;
16 |     uv.x*=iResolution.x/iResolution.y;
17 |     float d=length(uv);
18 |     d-=.5;
19 |     // float c=0.;
20 |     // if(d>0.){
21 |         //     c=1.;
22 |     // }else{
23 |         //     c=0.;
24 |     // }
25 |     // float c=step(0.,d);
26 |     float c=smoothstep(0.,.02,d);
27 |     // fragColor=vec4(vec3(d),1.);
28 |     fragColor=vec4(vec3(c),1.);
29 |     // fragColor=vec4(uv,0.,1.);
30 | }
31 |     `;
32 |     kokomi.ShaderToyElement.register();
33 | </script>


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-repeat-pattern.glsl:
--------------------------------------------------------------------------------
 1 | float sdCircle(vec2 p,float r)
 2 | {
 3 |     return length(p)-r;
 4 | }
 5 | 
 6 | float opUnion(float d1,float d2)
 7 | {
 8 |     return min(d1,d2);
 9 | }
10 | 
11 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
12 |     vec2 uv=fragCoord/iResolution.xy;
13 |     
14 |     // stripe
15 |     // uv=fract(uv*16.);
16 |     // vec3 c=vec3(step(.5,uv.x));
17 |     
18 |     // wave
19 |     // uv.y+=sin(uv.x*6.)*.4;
20 |     // uv=fract(uv*16.);
21 |     // vec3 c=vec3(step(.5,uv.y));
22 |     
23 |     // grid
24 |     // uv.x*=iResolution.x/iResolution.y;
25 |     // uv=fract(uv*16.);
26 |     // vec3 c=vec3(opUnion(step(.25,uv.x),step(.25,uv.y)));
27 |     
28 |     // ripple
29 |     uv=(uv-.5)*2.;
30 |     uv.x*=iResolution.x/iResolution.y;
31 |     float d=sdCircle(uv,.5);
32 |     d=sin(d*40.);
33 |     float mask=smoothstep(0.,.02,d);
34 |     vec3 c=vec3(mask);
35 |     
36 |     fragColor=vec4(c,1.);
37 | }
38 | 


--------------------------------------------------------------------------------
/bonus/shader-image-transition-ripple.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/03/20/5jmPqdJW7EL2a4X.jpg"
 2 | #iChannel1"https://s2.loli.net/2023/03/20/AgKHd6cZkUE9rGO.jpg"
 3 | 
 4 | vec4 getFromColor(vec2 uv){
 5 |     return texture(iChannel0,uv);
 6 | }
 7 | 
 8 | vec4 getToColor(vec2 uv){
 9 |     return texture(iChannel1,uv);
10 | }
11 | 
12 | vec4 transition(vec2 uv){
13 |     float progress=iMouse.x/iResolution.x;
14 |     
15 |     float ratio=iResolution.x/iResolution.y;
16 |     
17 |     // ripple
18 |     vec2 p=uv;
19 |     float d=distance(vec2(.5),p);
20 |     d*=40.;
21 |     d=abs(sin(d));
22 |     d=step(smoothstep(.1,.9,1.-progress),d);
23 |     
24 |     return mix(
25 |         getFromColor(uv),
26 |         getToColor(uv),
27 |         d
28 |     );
29 | }
30 | 
31 | void mainImage(out vec4 fragColor,in vec2 fragCoord)
32 | {
33 |     vec2 uv=fragCoord/iResolution.xy;
34 |     
35 |     vec4 col=transition(uv);
36 |     
37 |     fragColor=col;
38 | }
39 | 


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-sdf.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | float sdCircle(vec2 p,float r)
14 | {
15 |     return length(p)-r;
16 | }
17 | 
18 | float sdBox(in vec2 p,in vec2 b)
19 | {
20 |     vec2 d=abs(p)-b;
21 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
22 | }
23 | 
24 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
25 |     vec2 uv=fragCoord/iResolution.xy;
26 |     uv=(uv-.5)*2.;
27 |     uv.x*=iResolution.x/iResolution.y;
28 |     
29 |     // float d=sdCircle(uv,.5);
30 |     float d=sdBox(uv,vec2(.6,.3));
31 |     float c=smoothstep(0.,.02,d);
32 |     fragColor=vec4(vec3(c),1.);
33 | }
34 |     `;
35 |     kokomi.ShaderToyElement.register();
36 | </script>


--------------------------------------------------------------------------------
/glsl/7-postprocessing/rgb-shift.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/09/10/63quVIA9xZLksDc.jpg"
 2 | 
 3 | highp float random(vec2 co)
 4 | {
 5 |     highp float a=12.9898;
 6 |     highp float b=78.233;
 7 |     highp float c=43758.5453;
 8 |     highp float dt=dot(co.xy,vec2(a,b));
 9 |     highp float sn=mod(dt,3.14);
10 |     return fract(sin(sn)*c);
11 | }
12 | 
13 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
14 |     vec2 uv=fragCoord/iResolution.xy;
15 |     vec2 rUv=uv;
16 |     vec2 gUv=uv;
17 |     vec2 bUv=uv;
18 |     // float offset=.0025;
19 |     float noise=random(uv)*.5+.5;
20 |     // float noise=random(uv+iTime)*.5+.5;
21 |     vec2 offset=.0025*vec2(cos(noise),sin(noise));
22 |     rUv+=offset;
23 |     bUv-=offset;
24 |     // vec3 tex=texture(iChannel0,uv).xyz;
25 |     vec4 rTex=texture(iChannel0,rUv);
26 |     vec4 gTex=texture(iChannel0,gUv);
27 |     vec4 bTex=texture(iChannel0,bUv);
28 |     vec4 col=vec4(rTex.r,gTex.g,bTex.b,gTex.a);
29 |     fragColor=col;
30 | }
31 | 


--------------------------------------------------------------------------------
/html/7-postprocessing/pixelate.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
 9 |     <script type="frag"></script>
10 | </shader-toy>
11 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
12 | <script>
13 |     document.querySelector('[type=frag]').textContent = /* glsl */`
14 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
15 |     vec2 uv=fragCoord/iResolution.xy;
16 |     
17 |     // uv
18 |     // float c=uv.x;
19 |     // c=floor(c*10.)/10.;
20 |     // fragColor=vec4(vec3(c),1.);
21 |     
22 |     // pixelate
23 |     vec2 size=vec2(50.,50.);
24 |     // uv.x=floor(uv.x*size.x)/size.x;
25 |     // uv.y=floor(uv.y*size.y)/size.y;
26 |     uv=floor(uv*size)/size;
27 |     vec3 tex=texture(iChannel0,uv).xyz;
28 |     fragColor=vec4(tex,1.);
29 | }
30 |     `;
31 |     kokomi.ShaderToyElement.register();
32 | </script>


--------------------------------------------------------------------------------
/html/2-first-shader/first-shader.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
14 |     vec3 color1=vec3(1.,0.,1.);
15 |     vec3 color2=vec3(1.,1.,0.);
16 |     vec3 color3=vec3(0.,0.,1.);
17 |     vec3 color4=vec3(1.,0.,0.);
18 |     if(fragCoord.x<iResolution.x*.25){
19 |         fragColor=vec4(color1,1.);
20 |     }else if(fragCoord.x>=iResolution.x*.25&&fragCoord.x<iResolution.x*.5){
21 |         fragColor=vec4(color2,1.);
22 |     }else if(fragCoord.x>=iResolution.x*.5&&fragCoord.x<iResolution.x*.75){
23 |         fragColor=vec4(color3,1.);
24 |     }else{
25 |         fragColor=vec4(color4,1.);
26 |     }
27 | }
28 |     `;
29 |     kokomi.ShaderToyElement.register();
30 | </script>


--------------------------------------------------------------------------------
/html/7-postprocessing/vignette.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
 9 |     <script type="frag"></script>
10 | </shader-toy>
11 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
12 | <script>
13 |     document.querySelector('[type=frag]').textContent = /* glsl */`
14 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
15 |     vec2 uv=fragCoord/iResolution.xy;
16 |     vec3 tex=texture(iChannel0,uv).xyz;
17 |     
18 |     // vec3 col=vec3(1.);
19 |     vec3 col=tex;
20 |     vec2 p=uv;
21 |     p-=.5;
22 |     float d=length(p);
23 |     // col=vec3(d);
24 |     // float c=smoothstep(.4,.8,d);
25 |     // float c=1.-smoothstep(.4,.8,d);
26 |     float c=smoothstep(.8,.4,d);
27 |     // col=vec3(c);
28 |     col*=c;
29 |     
30 |     fragColor=vec4(col,1.);
31 | }
32 |     `;
33 |     kokomi.ShaderToyElement.register();
34 | </script>


--------------------------------------------------------------------------------
/bonus/shader-image-transition-mosaic.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/03/20/5jmPqdJW7EL2a4X.jpg"
 2 | #iChannel1"https://s2.loli.net/2023/03/20/AgKHd6cZkUE9rGO.jpg"
 3 | 
 4 | vec4 getFromColor(vec2 uv){
 5 |     return texture(iChannel0,uv);
 6 | }
 7 | 
 8 | vec4 getToColor(vec2 uv){
 9 |     return texture(iChannel1,uv);
10 | }
11 | 
12 | float random(vec2 uv)
13 | {
14 |     return fract(sin(dot(uv,vec2(12.9898,78.233)))*43758.5453);
15 | }
16 | 
17 | vec4 transition(vec2 uv){
18 |     float progress=iMouse.x/iResolution.x;
19 |     
20 |     float ratio=iResolution.x/iResolution.y;
21 |     
22 |     vec2 p=uv;
23 |     p.x*=ratio;
24 |     
25 |     float d=random(floor(p*vec2(20.,20.)));
26 |     
27 |     float s=.5;
28 |     
29 |     return mix(
30 |         getFromColor(uv),
31 |         getToColor(uv),
32 |         smoothstep(0.,-s,d-progress*(1.+s))
33 |     );
34 | }
35 | 
36 | void mainImage(out vec4 fragColor,in vec2 fragCoord)
37 | {
38 |     vec2 uv=fragCoord/iResolution.xy;
39 |     
40 |     vec4 col=transition(uv);
41 |     
42 |     fragColor=col;
43 | }
44 | 


--------------------------------------------------------------------------------
/html/6-random/random-grain.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
 9 |     <script type="frag"></script>
10 | </shader-toy>
11 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
12 | <script>
13 |     document.querySelector('[type=frag]').textContent = /* glsl */`
14 | highp float random(vec2 co)
15 | {
16 |     highp float a=12.9898;
17 |     highp float b=78.233;
18 |     highp float c=43758.5453;
19 |     highp float dt=dot(co.xy,vec2(a,b));
20 |     highp float sn=mod(dt,3.14);
21 |     return fract(sin(sn)*c);
22 | }
23 | 
24 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
25 |     vec2 uv=fragCoord/iResolution.xy;
26 |     
27 |     float noise=random(uv);
28 |     // float noise=random(uv+iTime);
29 |     
30 |     vec3 col=texture(iChannel0,uv).xyz;
31 |     col+=(noise-.5)*.2;
32 |     fragColor=vec4(col,1.);
33 | }
34 |     `;
35 |     kokomi.ShaderToyElement.register();
36 | </script>


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-polar.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | vec2 cart2polar(vec2 uv){
14 |     float phi=atan(uv.y,uv.x);
15 |     float r=length(uv);
16 |     return vec2(phi,r);
17 | }
18 | 
19 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
20 |     vec2 uv=fragCoord/iResolution.xy;
21 |     uv=(uv-.5)*2.;
22 |     uv.x*=iResolution.x/iResolution.y;
23 |     
24 |     // float phi=atan(uv.y,uv.x);
25 |     // float r=length(uv);
26 |     // uv=vec2(phi,r);
27 |     uv=cart2polar(uv);
28 |     
29 |     // uv
30 |     // fragColor=vec4(uv,0.,1.);
31 |     
32 |     // radial
33 |     // float c=sin(uv.x*12.);
34 |     // fragColor=vec4(vec3(c),1.);
35 |     
36 |     // spiral
37 |     float c=sin(uv.y*20.+uv.x);
38 |     fragColor=vec4(vec3(c),1.);
39 | }
40 |     `;
41 |     kokomi.ShaderToyElement.register();
42 | </script>


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-mix.glsl:
--------------------------------------------------------------------------------
 1 | float sdCircle(vec2 p,float r)
 2 | {
 3 |     return length(p)-r;
 4 | }
 5 | 
 6 | float sdBox(in vec2 p,in vec2 b)
 7 | {
 8 |     vec2 d=abs(p)-b;
 9 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
10 | }
11 | 
12 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
13 |     vec2 uv=fragCoord/iResolution.xy;
14 |     
15 |     // gradient
16 |     // vec3 col1=vec3(1.,0.,0.);
17 |     // vec3 col2=vec3(0.,1.,0.);
18 |     // vec3 col=mix(col1,col2,uv.x);
19 |     // fragColor=vec4(col,1.);
20 |     
21 |     // tint shape
22 |     // uv=(uv-.5)*2.;
23 |     // uv.x*=iResolution.x/iResolution.y;
24 |     
25 |     // float d=sdBox(uv,vec2(.6,.3));
26 |     // float c=smoothstep(0.,.02,d);
27 |     // vec3 colInner=vec3(1.,0.,0.);
28 |     // vec3 colOuter=vec3(1.);
29 |     // vec3 col=mix(colInner,colOuter,c);
30 |     // fragColor=vec4(col,1.);
31 |     
32 |     // shape transition
33 |     uv=(uv-.5)*2.;
34 |     uv.x*=iResolution.x/iResolution.y;
35 |     
36 |     float d1=sdCircle(uv,.5);
37 |     float d2=sdBox(uv,vec2(.6,.3));
38 |     float d=mix(d1,d2,abs(sin(iTime)));
39 |     float c=smoothstep(0.,.02,d);
40 |     fragColor=vec4(vec3(c),1.);
41 | }
42 | 


--------------------------------------------------------------------------------
/html/7-postprocessing/bulge.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
 9 |     <script type="frag"></script>
10 | </shader-toy>
11 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
12 | <script>
13 |     document.querySelector('[type=frag]').textContent = /* glsl */`
14 | vec2 bulge(vec2 p){
15 |     // vec2 center=vec2(.5);
16 |     vec2 center=iMouse.xy/iResolution.xy;
17 |     
18 |     float radius=.9;
19 |     float strength=1.1;
20 |     
21 |     p-=center;
22 |     
23 |     float d=length(p);
24 |     d/=radius;
25 |     float dPow=pow(d,2.);
26 |     float dRev=strength/(dPow+1.);
27 |     
28 |     // p*=d;
29 |     // p*=dPow;
30 |     p*=dRev;
31 |     
32 |     p+=center;
33 |     
34 |     return p;
35 | }
36 | 
37 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
38 |     vec2 uv=fragCoord/iResolution.xy;
39 |     uv=bulge(uv);
40 |     vec3 tex=texture(iChannel0,uv).xyz;
41 |     fragColor=vec4(tex,1.);
42 | }
43 |     `;
44 |     kokomi.ShaderToyElement.register();
45 | </script>


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-sdf-alteration.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | float sdCircle(vec2 p,float r)
14 | {
15 |     return length(p)-r;
16 | }
17 | 
18 | float sdBox(in vec2 p,in vec2 b)
19 | {
20 |     vec2 d=abs(p)-b;
21 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
22 | }
23 | 
24 | float opRound(in float d,in float r)
25 | {
26 |     return d-r;
27 | }
28 | 
29 | float opOnion(in float d,in float r)
30 | {
31 |     return abs(d)-r;
32 | }
33 | 
34 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
35 |     vec2 uv=fragCoord/iResolution.xy;
36 |     uv=(uv-.5)*2.;
37 |     uv.x*=iResolution.x/iResolution.y;
38 |     
39 |     // float d=sdCircle(uv,.5);
40 |     float d=sdBox(uv,vec2(.6,.3));
41 |     
42 |     // round
43 |     // d=opRound(d,.1);
44 |     
45 |     // onion
46 |     d=opOnion(d,.1);
47 |     
48 |     float c=smoothstep(0.,.02,d);
49 |     fragColor=vec4(vec3(c),1.);
50 | }
51 |     `;
52 |     kokomi.ShaderToyElement.register();
53 | </script>


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-repeat-pattern.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | float sdCircle(vec2 p,float r)
14 | {
15 |     return length(p)-r;
16 | }
17 | 
18 | float opUnion(float d1,float d2)
19 | {
20 |     return min(d1,d2);
21 | }
22 | 
23 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
24 |     vec2 uv=fragCoord/iResolution.xy;
25 |     
26 |     // stripe
27 |     // uv=fract(uv*16.);
28 |     // vec3 c=vec3(step(.5,uv.x));
29 |     
30 |     // wave
31 |     // uv.y+=sin(uv.x*6.)*.4;
32 |     // uv=fract(uv*16.);
33 |     // vec3 c=vec3(step(.5,uv.y));
34 |     
35 |     // grid
36 |     // uv.x*=iResolution.x/iResolution.y;
37 |     // uv=fract(uv*16.);
38 |     // vec3 c=vec3(opUnion(step(.25,uv.x),step(.25,uv.y)));
39 |     
40 |     // ripple
41 |     uv=(uv-.5)*2.;
42 |     uv.x*=iResolution.x/iResolution.y;
43 |     float d=sdCircle(uv,.5);
44 |     d=sin(d*40.);
45 |     float mask=smoothstep(0.,.02,d);
46 |     vec3 c=vec3(mask);
47 |     
48 |     fragColor=vec4(c,1.);
49 | }
50 |     `;
51 |     kokomi.ShaderToyElement.register();
52 | </script>


--------------------------------------------------------------------------------
/html/7-postprocessing/rgb-shift.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/63quVIA9xZLksDc.jpg" name="iChannel0" hidden />
 9 |     <script type="frag"></script>
10 | </shader-toy>
11 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
12 | <script>
13 |     document.querySelector('[type=frag]').textContent = /* glsl */`
14 | highp float random(vec2 co)
15 | {
16 |     highp float a=12.9898;
17 |     highp float b=78.233;
18 |     highp float c=43758.5453;
19 |     highp float dt=dot(co.xy,vec2(a,b));
20 |     highp float sn=mod(dt,3.14);
21 |     return fract(sin(sn)*c);
22 | }
23 | 
24 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
25 |     vec2 uv=fragCoord/iResolution.xy;
26 |     vec2 rUv=uv;
27 |     vec2 gUv=uv;
28 |     vec2 bUv=uv;
29 |     // float offset=.0025;
30 |     float noise=random(uv)*.5+.5;
31 |     // float noise=random(uv+iTime)*.5+.5;
32 |     vec2 offset=.0025*vec2(cos(noise),sin(noise));
33 |     rUv+=offset;
34 |     bUv-=offset;
35 |     // vec3 tex=texture(iChannel0,uv).xyz;
36 |     vec4 rTex=texture(iChannel0,rUv);
37 |     vec4 gTex=texture(iChannel0,gUv);
38 |     vec4 bTex=texture(iChannel0,bUv);
39 |     vec4 col=vec4(rTex.r,gTex.g,bTex.b,gTex.a);
40 |     fragColor=col;
41 | }
42 |     `;
43 |     kokomi.ShaderToyElement.register();
44 | </script>


--------------------------------------------------------------------------------
/glsl/5-texture/texture-transition.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
 2 | #iChannel1"https://s2.loli.net/2023/09/10/Jb8mIhZMBElPiuC.jpg"
 3 | #iChannel2"https://s2.loli.net/2023/07/17/3GDlwcvehqQjTPH.jpg"
 4 | 
 5 | vec4 getFromColor(vec2 uv){
 6 |     return texture(iChannel0,uv);
 7 | }
 8 | 
 9 | vec4 getToColor(vec2 uv){
10 |     return texture(iChannel1,uv);
11 | }
12 | 
13 | float sdCircle(vec2 p,float r)
14 | {
15 |     return length(p)-r;
16 | }
17 | 
18 | vec4 transition(vec2 uv){
19 |     float progress=iMouse.x/iResolution.x;
20 |     float ratio=iResolution.x/iResolution.y;
21 |     
22 |     // fade
23 |     // return mix(getFromColor(uv),getToColor(uv),progress);
24 |     
25 |     // slide
26 |     // return mix(getFromColor(uv),getToColor(uv),1.-step(progress,uv.x));
27 |     
28 |     // circle
29 |     // vec2 p=uv;
30 |     // p-=.5;
31 |     // p.x*=ratio;
32 |     // float d=sdCircle(p,progress*sqrt(2.));
33 |     // float c=smoothstep(-.2,0.,d);
34 |     // return mix(getFromColor(uv),getToColor(uv),1.-c);
35 |     
36 |     // displacement
37 |     vec2 dispVec=texture(iChannel2,uv).xy;
38 |     float strength=.6;
39 |     vec2 uv1=vec2(uv.x-dispVec.x*progress*strength,uv.y);
40 |     vec2 uv2=vec2(uv.x+dispVec.x*(1.-progress)*strength,uv.y);
41 |     return mix(getFromColor(uv1),getToColor(uv2),progress);
42 | }
43 | 
44 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
45 |     vec2 uv=fragCoord/iResolution.xy;
46 |     vec4 col=transition(uv);
47 |     fragColor=col;
48 | }
49 | 


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-transform.glsl:
--------------------------------------------------------------------------------
 1 | float sdBox(in vec2 p,in vec2 b)
 2 | {
 3 |     vec2 d=abs(p)-b;
 4 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
 5 | }
 6 | 
 7 | float sdEquilateralTriangle(in vec2 p,in float r)
 8 | {
 9 |     const float k=sqrt(3.);
10 |     p.x=abs(p.x)-r;
11 |     p.y=p.y+r/k;
12 |     if(p.x+k*p.y>0.)p=vec2(p.x-k*p.y,-k*p.x-p.y)/2.;
13 |     p.x-=clamp(p.x,-2.*r,0.);
14 |     return-length(p)*sign(p.y);
15 | }
16 | 
17 | mat2 rotation2d(float angle){
18 |     float s=sin(angle);
19 |     float c=cos(angle);
20 |     
21 |     return mat2(
22 |         c,-s,
23 |         s,c
24 |     );
25 | }
26 | 
27 | vec2 rotate(vec2 v,float angle){
28 |     return rotation2d(angle)*v;
29 | }
30 | 
31 | const float PI=3.14159265359;
32 | 
33 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
34 |     vec2 uv=fragCoord/iResolution.xy;
35 |     
36 |     // repeat
37 |     // uv=fract(uv*vec2(2.,2.));
38 |     
39 |     // center
40 |     uv=(uv-.5)*2.;
41 |     uv.x*=iResolution.x/iResolution.y;
42 |     
43 |     // translate
44 |     // uv-=vec2(.2,.4);
45 |     
46 |     // mirror
47 |     uv.y=abs(uv.y);
48 |     
49 |     // scale
50 |     // uv/=vec2(2.,2.);
51 |     
52 |     // flip
53 |     // uv.y*=-1.;
54 |     
55 |     // rotate
56 |     // uv=rotate(uv,PI/2.);
57 |     // uv=rotate(uv,iTime);
58 |     
59 |     // float d=sdBox(uv,vec2(.6,.3));
60 |     float d=sdEquilateralTriangle(uv,.5);
61 |     float c=smoothstep(0.,.02,d);
62 |     fragColor=vec4(vec3(c),1.);
63 |     // fragColor=vec4(uv,0.,1.);
64 | }
65 | 


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-mix.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | float sdCircle(vec2 p,float r)
14 | {
15 |     return length(p)-r;
16 | }
17 | 
18 | float sdBox(in vec2 p,in vec2 b)
19 | {
20 |     vec2 d=abs(p)-b;
21 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
22 | }
23 | 
24 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
25 |     vec2 uv=fragCoord/iResolution.xy;
26 |     
27 |     // gradient
28 |     // vec3 col1=vec3(1.,0.,0.);
29 |     // vec3 col2=vec3(0.,1.,0.);
30 |     // vec3 col=mix(col1,col2,uv.x);
31 |     // fragColor=vec4(col,1.);
32 |     
33 |     // tint shape
34 |     // uv=(uv-.5)*2.;
35 |     // uv.x*=iResolution.x/iResolution.y;
36 |     
37 |     // float d=sdBox(uv,vec2(.6,.3));
38 |     // float c=smoothstep(0.,.02,d);
39 |     // vec3 colInner=vec3(1.,0.,0.);
40 |     // vec3 colOuter=vec3(1.);
41 |     // vec3 col=mix(colInner,colOuter,c);
42 |     // fragColor=vec4(col,1.);
43 |     
44 |     // shape transition
45 |     uv=(uv-.5)*2.;
46 |     uv.x*=iResolution.x/iResolution.y;
47 |     
48 |     float d1=sdCircle(uv,.5);
49 |     float d2=sdBox(uv,vec2(.6,.3));
50 |     float d=mix(d1,d2,abs(sin(iTime)));
51 |     float c=smoothstep(0.,.02,d);
52 |     fragColor=vec4(vec3(c),1.);
53 | }
54 |     `;
55 |     kokomi.ShaderToyElement.register();
56 | </script>


--------------------------------------------------------------------------------
/bonus/shader-simple-god-rays-effect.glsl:
--------------------------------------------------------------------------------
 1 | // https://github.com/MaxBittker/glsl-voronoi-noise/blob/master/2d.glsl
 2 | const mat2 myt=mat2(.12121212,.13131313,-.13131313,.12121212);
 3 | const vec2 mys=vec2(1e4,1e6);
 4 | 
 5 | vec2 rhash(vec2 uv){
 6 |     uv*=myt;
 7 |     uv*=mys;
 8 |     return fract(fract(uv/mys)*uv);
 9 | }
10 | 
11 | vec3 hash(vec3 p){
12 |     return fract(sin(vec3(dot(p,vec3(1.,57.,113.)),
13 |     dot(p,vec3(57.,113.,1.)),
14 |     dot(p,vec3(113.,1.,57.))))*
15 | 43758.5453);
16 | }
17 | 
18 | float voronoi2d(const in vec2 point){
19 | vec2 p=floor(point);
20 | vec2 f=fract(point);
21 | float res=0.;
22 | for(int j=-1;j<=1;j++){
23 |     for(int i=-1;i<=1;i++){
24 |         vec2 b=vec2(i,j);
25 |         vec2 r=vec2(b)-f+rhash(p+b);
26 |         res+=1./pow(dot(r,r),8.);
27 |     }
28 | }
29 | return pow(1./res,.0625);
30 | }
31 | 
32 | vec2 cart2polar(vec2 uv){
33 | float phi=atan(uv.y,uv.x);
34 | float r=length(uv);
35 | return vec2(phi,r);
36 | }
37 | 
38 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
39 | vec2 uv=fragCoord/iResolution.xy;
40 | 
41 | vec2 p=uv;
42 | p.x*=iResolution.x/iResolution.y;
43 | 
44 | uv=(uv-.5)*2.;
45 | uv.x*=iResolution.x/iResolution.y;
46 | 
47 | vec3 col=vec3(0.);
48 | // float noise=voronoi2d(uv*3.);
49 | // col=vec3(noise);
50 | 
51 | uv.y-=2.;
52 | uv/=50.;
53 | uv=cart2polar(uv);
54 | col=vec3(uv.x);
55 | 
56 | float n1=voronoi2d((vec2(uv.x,0.)+.04*iTime)*10.);
57 | col=vec3(n1);
58 | float n2=voronoi2d((vec2(.1,uv.x)+.04*iTime*1.5)*10.);
59 | col=vec3(n2);
60 | float n3=min(n1,n2);
61 | col=vec3(n3);
62 | 
63 | // col=vec3(1.);
64 | float mask=smoothstep(.15,.86,p.y);
65 | float alpha=n3*mask*.8;
66 | 
67 | col=mix(vec3(0.,.412,.580),vec3(1.),alpha);
68 | 
69 | fragColor=vec4(col,1.);
70 | }


--------------------------------------------------------------------------------
/html/8-vertex/vertex-shader-object.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <div id="sketch"></div>
 8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
 9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
10 | <script>
11 |     class Sketch extends kokomi.Base {
12 |         create() {
13 |             this.camera.position.set(0, 0, 5);
14 |             new kokomi.OrbitControls(this);
15 | 
16 |             const geometry = new THREE.SphereGeometry(2, 64, 64);
17 |             // const geometry = new THREE.PlaneGeometry(4, 4);
18 |             const material = new THREE.ShaderMaterial({
19 |                 vertexShader: /* glsl */ `
20 | uniform float iTime;
21 | uniform vec3 iResolution;
22 | uniform vec4 iMouse;
23 | 
24 | varying vec2 vUv;
25 | 
26 | void main(){
27 |     vec3 p=position;
28 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
29 |     
30 |     vUv=uv;
31 | }
32 |   `,
33 |                 fragmentShader: /* glsl */ `
34 | uniform float iTime;
35 | uniform vec3 iResolution;
36 | uniform vec4 iMouse;
37 | 
38 | varying vec2 vUv;
39 | 
40 | void main(){
41 |     vec2 uv=vUv;
42 |     gl_FragColor=vec4(uv,0.,1.);
43 | }
44 |   `,
45 |             });
46 |             const mesh = new THREE.Mesh(geometry, material);
47 |             this.scene.add(mesh);
48 | 
49 |             const uj = new kokomi.UniformInjector(this);
50 |             material.uniforms = {
51 |                 ...material.uniforms,
52 |                 ...uj.shadertoyUniforms,
53 |             };
54 |             this.update(() => {
55 |                 uj.injectShadertoyUniforms(material.uniforms);
56 |             });
57 |         }
58 |     }
59 | 
60 |     const sketch = new Sketch("#sketch");
61 |     sketch.create();
62 | </script>


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-transform.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | float sdBox(in vec2 p,in vec2 b)
14 | {
15 |     vec2 d=abs(p)-b;
16 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
17 | }
18 | 
19 | float sdEquilateralTriangle(in vec2 p,in float r)
20 | {
21 |     const float k=sqrt(3.);
22 |     p.x=abs(p.x)-r;
23 |     p.y=p.y+r/k;
24 |     if(p.x+k*p.y>0.)p=vec2(p.x-k*p.y,-k*p.x-p.y)/2.;
25 |     p.x-=clamp(p.x,-2.*r,0.);
26 |     return-length(p)*sign(p.y);
27 | }
28 | 
29 | mat2 rotation2d(float angle){
30 |     float s=sin(angle);
31 |     float c=cos(angle);
32 |     
33 |     return mat2(
34 |         c,-s,
35 |         s,c
36 |     );
37 | }
38 | 
39 | vec2 rotate(vec2 v,float angle){
40 |     return rotation2d(angle)*v;
41 | }
42 | 
43 | const float PI=3.14159265359;
44 | 
45 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
46 |     vec2 uv=fragCoord/iResolution.xy;
47 |     
48 |     // repeat
49 |     // uv=fract(uv*vec2(2.,2.));
50 |     
51 |     // center
52 |     uv=(uv-.5)*2.;
53 |     uv.x*=iResolution.x/iResolution.y;
54 |     
55 |     // translate
56 |     // uv-=vec2(.2,.4);
57 |     
58 |     // mirror
59 |     uv.y=abs(uv.y);
60 |     
61 |     // scale
62 |     // uv/=vec2(2.,2.);
63 |     
64 |     // flip
65 |     // uv.y*=-1.;
66 |     
67 |     // rotate
68 |     // uv=rotate(uv,PI/2.);
69 |     // uv=rotate(uv,iTime);
70 |     
71 |     // float d=sdBox(uv,vec2(.6,.3));
72 |     float d=sdEquilateralTriangle(uv,.5);
73 |     float c=smoothstep(0.,.02,d);
74 |     fragColor=vec4(vec3(c),1.);
75 |     // fragColor=vec4(uv,0.,1.);
76 | }
77 |     `;
78 |     kokomi.ShaderToyElement.register();
79 | </script>


--------------------------------------------------------------------------------
/glsl/4-uv-draw/uv-sdf-bool.glsl:
--------------------------------------------------------------------------------
 1 | float sdCircle(vec2 p,float r)
 2 | {
 3 |     return length(p)-r;
 4 | }
 5 | 
 6 | float sdBox(in vec2 p,in vec2 b)
 7 | {
 8 |     vec2 d=abs(p)-b;
 9 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
10 | }
11 | 
12 | float opUnion(float d1,float d2)
13 | {
14 |     return min(d1,d2);
15 | }
16 | 
17 | float opIntersection(float d1,float d2)
18 | {
19 |     return max(d1,d2);
20 | }
21 | 
22 | float opSubtraction(float d1,float d2)
23 | {
24 |     return max(-d1,d2);
25 | }
26 | 
27 | float opSmoothUnion(float d1,float d2,float k){
28 |     float h=clamp(.5+.5*(d2-d1)/k,0.,1.);
29 |     return mix(d2,d1,h)-k*h*(1.-h);
30 | }
31 | 
32 | float opSmoothSubtraction(float d1,float d2,float k){
33 |     float h=clamp(.5-.5*(d2+d1)/k,0.,1.);
34 |     return mix(d2,-d1,h)+k*h*(1.-h);
35 | }
36 | 
37 | float opSmoothIntersection(float d1,float d2,float k){
38 |     float h=clamp(.5-.5*(d2-d1)/k,0.,1.);
39 |     return mix(d2,d1,h)+k*h*(1.-h);
40 | }
41 | 
42 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
43 |     vec2 uv=fragCoord/iResolution.xy;
44 |     uv=(uv-.5)*2.;
45 |     uv.x*=iResolution.x/iResolution.y;
46 |     
47 |     float d1=sdCircle(uv,.5);
48 |     float d2=sdBox(uv,vec2(.6,.3));
49 |     
50 |     float d=d1;
51 |     
52 |     // union
53 |     // d=opUnion(d1,d2);
54 |     
55 |     // intersection
56 |     // d=opIntersection(d1,d2);
57 |     
58 |     // subtraction
59 |     // box - circle
60 |     // d=opSubtraction(d1,d2);
61 |     // circle - box
62 |     // d=opSubtraction(d2,d1);
63 |     
64 |     // smooth union
65 |     // d=opSmoothUnion(d1,d2,.1);
66 |     
67 |     // smooth intersection
68 |     // d=opSmoothIntersection(d1,d2,.1);
69 |     
70 |     // smooth subtraction
71 |     // box - circle
72 |     // d=opSmoothSubtraction(d1,d2,.1);
73 |     // circle - box
74 |     d=opSmoothSubtraction(d2,d1,.1);
75 |     
76 |     float c=smoothstep(0.,.02,d);
77 |     fragColor=vec4(vec3(c),1.);
78 | }
79 | 


--------------------------------------------------------------------------------
/html/5-texture/texture-transition.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
 9 |     <img src="https://s2.loli.net/2023/09/10/Jb8mIhZMBElPiuC.jpg" name="iChannel1" hidden />
10 |     <img src="https://s2.loli.net/2023/07/17/3GDlwcvehqQjTPH.jpg" name="iChannel2" hidden />
11 |     <script type="frag"></script>
12 | </shader-toy>
13 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
14 | <script>
15 |     document.querySelector('[type=frag]').textContent = /* glsl */`
16 | vec4 getFromColor(vec2 uv){
17 |     return texture(iChannel0,uv);
18 | }
19 | 
20 | vec4 getToColor(vec2 uv){
21 |     return texture(iChannel1,uv);
22 | }
23 | 
24 | float sdCircle(vec2 p,float r)
25 | {
26 |     return length(p)-r;
27 | }
28 | 
29 | vec4 transition(vec2 uv){
30 |     float progress=iMouse.x/iResolution.x;
31 |     float ratio=iResolution.x/iResolution.y;
32 |     
33 |     // fade
34 |     // return mix(getFromColor(uv),getToColor(uv),progress);
35 |     
36 |     // slide
37 |     // return mix(getFromColor(uv),getToColor(uv),1.-step(progress,uv.x));
38 |     
39 |     // circle
40 |     // vec2 p=uv;
41 |     // p-=.5;
42 |     // p.x*=ratio;
43 |     // float d=sdCircle(p,progress*sqrt(2.));
44 |     // float c=smoothstep(-.2,0.,d);
45 |     // return mix(getFromColor(uv),getToColor(uv),1.-c);
46 |     
47 |     // displacement
48 |     vec2 dispVec=texture(iChannel2,uv).xy;
49 |     float strength=.6;
50 |     vec2 uv1=vec2(uv.x-dispVec.x*progress*strength,uv.y);
51 |     vec2 uv2=vec2(uv.x+dispVec.x*(1.-progress)*strength,uv.y);
52 |     return mix(getFromColor(uv1),getToColor(uv2),progress);
53 | }
54 | 
55 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
56 |     vec2 uv=fragCoord/iResolution.xy;
57 |     vec4 col=transition(uv);
58 |     fragColor=col;
59 | }
60 |     `;
61 |     kokomi.ShaderToyElement.register();
62 | </script>


--------------------------------------------------------------------------------
/bonus/shader-image-transition-sdf-mask.glsl:
--------------------------------------------------------------------------------
 1 | #iChannel0"https://s2.loli.net/2023/03/20/5jmPqdJW7EL2a4X.jpg"
 2 | #iChannel1"https://s2.loli.net/2023/03/20/AgKHd6cZkUE9rGO.jpg"
 3 | 
 4 | vec4 getFromColor(vec2 uv){
 5 |     return texture(iChannel0,uv);
 6 | }
 7 | 
 8 | vec4 getToColor(vec2 uv){
 9 |     return texture(iChannel1,uv);
10 | }
11 | 
12 | const float PI=3.14159265359;
13 | 
14 | // rotate
15 | mat2 rotation2d(float angle){
16 |     float s=sin(angle);
17 |     float c=cos(angle);
18 |     
19 |     return mat2(
20 |         c,-s,
21 |         s,c
22 |     );
23 | }
24 | 
25 | vec2 rotate(vec2 v,float angle){
26 |     return rotation2d(angle)*v;
27 | }
28 | 
29 | float sdBox(in vec2 p,in vec2 b)
30 | {
31 |     vec2 d=abs(p)-b;
32 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
33 | }
34 | 
35 | float opUnion(float d1,float d2)
36 | {
37 |     return min(d1,d2);
38 | }
39 | 
40 | float opIntersection(float d1,float d2)
41 | {
42 |     return max(d1,d2);
43 | }
44 | 
45 | float opSubtraction(float d1,float d2)
46 | {
47 |     return max(-d1,d2);
48 | }
49 | 
50 | vec4 transition(vec2 uv){
51 |     float progress=iMouse.x/iResolution.x;
52 |     
53 |     float ratio=iResolution.x/iResolution.y;
54 |     
55 |     // SDF mask
56 |     vec2 grid=vec2(4.,4.);
57 |     
58 |     float pr=-2.*pow((2.*progress-1.),2.)+1.;
59 |     float offset=mix(0.,-.25,pr);
60 |     
61 |     // float angle=PI*.25/3.;
62 |     float angle=mix(0.,PI*.5,progress);
63 |     vec2 p1=uv;
64 |     p1=fract(p1*grid);
65 |     p1-=vec2(.5);
66 |     p1=rotate(p1,angle);
67 |     float d1=sdBox(p1,vec2(.5+offset,.75));
68 |     
69 |     vec2 p2=uv;
70 |     p2=fract(p2*grid);
71 |     p2-=vec2(.5);
72 |     p2=rotate(p2,angle+PI*.5);
73 |     float d2=sdBox(p2,vec2(.5+offset,.75));
74 |     
75 |     float d=opIntersection(d1,d2);
76 |     
77 |     float mask=1.-smoothstep(0.,.02,d);
78 |     
79 |     return mix(
80 |         getFromColor(uv)*mask,
81 |         getToColor(uv)*mask,
82 |         progress
83 |     );
84 | }
85 | 
86 | void mainImage(out vec4 fragColor,in vec2 fragCoord)
87 | {
88 |     vec2 uv=fragCoord/iResolution.xy;
89 |     
90 |     vec4 col=transition(uv);
91 |     
92 |     fragColor=col;
93 | }
94 | 


--------------------------------------------------------------------------------
/html/4-uv-draw/uv-sdf-bool.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <shader-toy>
 8 |     <script type="frag"></script>
 9 | </shader-toy>
10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
11 | <script>
12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
13 | float sdCircle(vec2 p,float r)
14 | {
15 |     return length(p)-r;
16 | }
17 | 
18 | float sdBox(in vec2 p,in vec2 b)
19 | {
20 |     vec2 d=abs(p)-b;
21 |     return length(max(d,0.))+min(max(d.x,d.y),0.);
22 | }
23 | 
24 | float opUnion(float d1,float d2)
25 | {
26 |     return min(d1,d2);
27 | }
28 | 
29 | float opIntersection(float d1,float d2)
30 | {
31 |     return max(d1,d2);
32 | }
33 | 
34 | float opSubtraction(float d1,float d2)
35 | {
36 |     return max(-d1,d2);
37 | }
38 | 
39 | float opSmoothUnion(float d1,float d2,float k){
40 |     float h=clamp(.5+.5*(d2-d1)/k,0.,1.);
41 |     return mix(d2,d1,h)-k*h*(1.-h);
42 | }
43 | 
44 | float opSmoothSubtraction(float d1,float d2,float k){
45 |     float h=clamp(.5-.5*(d2+d1)/k,0.,1.);
46 |     return mix(d2,-d1,h)+k*h*(1.-h);
47 | }
48 | 
49 | float opSmoothIntersection(float d1,float d2,float k){
50 |     float h=clamp(.5-.5*(d2-d1)/k,0.,1.);
51 |     return mix(d2,d1,h)+k*h*(1.-h);
52 | }
53 | 
54 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
55 |     vec2 uv=fragCoord/iResolution.xy;
56 |     uv=(uv-.5)*2.;
57 |     uv.x*=iResolution.x/iResolution.y;
58 |     
59 |     float d1=sdCircle(uv,.5);
60 |     float d2=sdBox(uv,vec2(.6,.3));
61 |     
62 |     float d=d1;
63 |     
64 |     // union
65 |     // d=opUnion(d1,d2);
66 |     
67 |     // intersection
68 |     // d=opIntersection(d1,d2);
69 |     
70 |     // subtraction
71 |     // box - circle
72 |     // d=opSubtraction(d1,d2);
73 |     // circle - box
74 |     // d=opSubtraction(d2,d1);
75 |     
76 |     // smooth union
77 |     // d=opSmoothUnion(d1,d2,.1);
78 |     
79 |     // smooth intersection
80 |     // d=opSmoothIntersection(d1,d2,.1);
81 |     
82 |     // smooth subtraction
83 |     // box - circle
84 |     // d=opSmoothSubtraction(d1,d2,.1);
85 |     // circle - box
86 |     d=opSmoothSubtraction(d2,d1,.1);
87 |     
88 |     float c=smoothstep(0.,.02,d);
89 |     fragColor=vec4(vec3(c),1.);
90 | }
91 |     `;
92 |     kokomi.ShaderToyElement.register();
93 | </script>


--------------------------------------------------------------------------------
/html/8-vertex/vertex-shader-points.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <div id="sketch"></div>
 8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
 9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
10 | <script>
11 |     class Sketch extends kokomi.Base {
12 |         create() {
13 |             this.camera.position.set(0, 0, 5);
14 |             new kokomi.OrbitControls(this);
15 | 
16 |             const geometry = new THREE.SphereGeometry(2, 64, 64);
17 |             // const geometry = new THREE.PlaneGeometry(4, 4);
18 |             const material = new THREE.ShaderMaterial({
19 |                 vertexShader: /* glsl */ `
20 | uniform float iTime;
21 | uniform vec3 iResolution;
22 | uniform vec4 iMouse;
23 | 
24 | varying vec2 vUv;
25 | 
26 | uniform float uPixelRatio;
27 | 
28 | void main(){
29 |     vec3 p=position;
30 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
31 |     
32 |     gl_PointSize=50.*uPixelRatio;
33 |     vec4 mvPosition=modelViewMatrix*vec4(p,1.);
34 |     gl_PointSize*=(1./-mvPosition.z);
35 |     
36 |     vUv=uv;
37 | }
38 |   `,
39 |                 fragmentShader: /* glsl */ `
40 | uniform float iTime;
41 | uniform vec3 iResolution;
42 | uniform vec4 iMouse;
43 | 
44 | varying vec2 vUv;
45 | 
46 | void main(){
47 |     vec2 uv=gl_PointCoord;
48 |     uv=(uv-.5)*2.;
49 |     
50 |     float d=length(uv);
51 |     float c=.05/d;
52 |     c=pow(c,2.);
53 |     gl_FragColor=vec4(vec3(1.),c);
54 | }
55 |   `,
56 |                 transparent: true,
57 |                 blending: THREE.AdditiveBlending,
58 |                 depthWrite: false,
59 |                 uniforms: {
60 |                     uPixelRatio: {
61 |                         value: this.renderer.getPixelRatio()
62 |                     }
63 |                 }
64 |             });
65 |             const points = new THREE.Points(geometry, material);
66 |             this.scene.add(points);
67 | 
68 |             const uj = new kokomi.UniformInjector(this);
69 |             material.uniforms = {
70 |                 ...material.uniforms,
71 |                 ...uj.shadertoyUniforms,
72 |             };
73 |             this.update(() => {
74 |                 uj.injectShadertoyUniforms(material.uniforms);
75 |             });
76 |         }
77 |     }
78 | 
79 |     const sketch = new Sketch("#sketch");
80 |     sketch.create();
81 | </script>


--------------------------------------------------------------------------------
/html/9-lighting/lighting-phong.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <div id="sketch"></div>
 8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
 9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
10 | <script>
11 |     class Sketch extends kokomi.Base {
12 |         create() {
13 |             this.camera.position.set(0, 0, 5);
14 |             new kokomi.OrbitControls(this);
15 | 
16 |             const geometry = new THREE.SphereGeometry(2, 64, 64);
17 |             // const geometry = new THREE.PlaneGeometry(4, 4);
18 |             const material = new THREE.ShaderMaterial({
19 |                 vertexShader: /* glsl */ `
20 | uniform float iTime;
21 | uniform vec3 iResolution;
22 | uniform vec4 iMouse;
23 | 
24 | varying vec2 vUv;
25 | varying vec3 vNormal;
26 | varying vec3 vWorldPosition;
27 | 
28 | void main(){
29 |     vec3 p=position;
30 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
31 |     
32 |     vUv=uv;
33 |     vNormal=normal;
34 |     vWorldPosition=vec3(modelMatrix*vec4(p,1));
35 | }
36 |   `,
37 |                 fragmentShader: /* glsl */ `
38 | uniform float iTime;
39 | uniform vec3 iResolution;
40 | uniform vec4 iMouse;
41 | 
42 | varying vec2 vUv;
43 | varying vec3 vNormal;
44 | varying vec3 vWorldPosition;
45 | 
46 | void main(){
47 |     vec2 uv=vUv;
48 |     
49 |     vec3 col=vec3(0.);
50 |     vec3 objectColor=vec3(1.);
51 |     vec3 lightColor=vec3(.875,.286,.333);
52 |     
53 |     // ambient
54 |     float ambIntensity=.2;
55 |     vec3 ambient=lightColor*ambIntensity;
56 |     col+=ambient*objectColor;
57 |     
58 |     // diffuse
59 |     vec3 lightPos=vec3(10.,10.,10.);
60 |     vec3 lightDir=normalize(lightPos-vWorldPosition);
61 |     float diff=dot(vNormal,lightDir);
62 |     diff=max(diff,0.);
63 |     vec3 diffuse=lightColor*diff;
64 |     col+=diffuse*objectColor;
65 |     
66 |     // specular
67 |     vec3 reflectDir=reflect(-lightDir,vNormal);
68 |     vec3 viewDir=normalize(cameraPosition-vWorldPosition);
69 |     float spec=dot(viewDir,reflectDir);
70 |     spec=max(spec,0.);
71 |     float shininess=32.;
72 |     spec=pow(spec,shininess);
73 |     vec3 specular=lightColor*spec;
74 |     col+=specular*objectColor;
75 |     
76 |     gl_FragColor=vec4(col,1.);
77 | }
78 |   `,
79 |             });
80 |             const mesh = new THREE.Mesh(geometry, material);
81 |             this.scene.add(mesh);
82 | 
83 |             const uj = new kokomi.UniformInjector(this);
84 |             material.uniforms = {
85 |                 ...material.uniforms,
86 |                 ...uj.shadertoyUniforms,
87 |             };
88 |             this.update(() => {
89 |                 uj.injectShadertoyUniforms(material.uniforms);
90 |             });
91 |         }
92 |     }
93 | 
94 |     const sketch = new Sketch("#sketch");
95 |     sketch.create();
96 | </script>


--------------------------------------------------------------------------------
/html/9-lighting/lighting-blinn-phong.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     body {
 3 |         margin: 0;
 4 |         background: black;
 5 |     }
 6 | </style>
 7 | <div id="sketch"></div>
 8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
 9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
10 | <script>
11 |     class Sketch extends kokomi.Base {
12 |         create() {
13 |             this.camera.position.set(0, 0, 5);
14 |             new kokomi.OrbitControls(this);
15 | 
16 |             const geometry = new THREE.SphereGeometry(2, 64, 64);
17 |             // const geometry = new THREE.PlaneGeometry(4, 4);
18 |             const material = new THREE.ShaderMaterial({
19 |                 vertexShader: /* glsl */ `
20 | uniform float iTime;
21 | uniform vec3 iResolution;
22 | uniform vec4 iMouse;
23 | 
24 | varying vec2 vUv;
25 | varying vec3 vNormal;
26 | varying vec3 vWorldPosition;
27 | 
28 | void main(){
29 |     vec3 p=position;
30 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
31 |     
32 |     vUv=uv;
33 |     vNormal=normal;
34 |     vWorldPosition=vec3(modelMatrix*vec4(p,1));
35 | }
36 |   `,
37 |                 fragmentShader: /* glsl */ `
38 | uniform float iTime;
39 | uniform vec3 iResolution;
40 | uniform vec4 iMouse;
41 | 
42 | varying vec2 vUv;
43 | varying vec3 vNormal;
44 | varying vec3 vWorldPosition;
45 | 
46 | void main(){
47 |     vec2 uv=vUv;
48 |     
49 |     vec3 col=vec3(0.);
50 |     vec3 objectColor=vec3(1.);
51 |     vec3 lightColor=vec3(.875,.286,.333);
52 |     
53 |     // ambient
54 |     float ambIntensity=.2;
55 |     vec3 ambient=lightColor*ambIntensity;
56 |     col+=ambient*objectColor;
57 |     
58 |     // diffuse
59 |     vec3 lightPos=vec3(10.,10.,10.);
60 |     vec3 lightDir=normalize(lightPos-vWorldPosition);
61 |     float diff=dot(vNormal,lightDir);
62 |     diff=max(diff,0.);
63 |     vec3 diffuse=lightColor*diff;
64 |     col+=diffuse*objectColor;
65 |     
66 |     // specular
67 |     vec3 reflectDir=reflect(-lightDir,vNormal);
68 |     vec3 viewDir=normalize(cameraPosition-vWorldPosition);
69 |     // float spec=dot(viewDir,reflectDir);
70 |     vec3 halfVec=normalize(lightDir+viewDir);
71 |     float spec=dot(vNormal,halfVec);
72 |     spec=max(spec,0.);
73 |     float shininess=32.;
74 |     spec=pow(spec,shininess);
75 |     vec3 specular=lightColor*spec;
76 |     col+=specular*objectColor;
77 |     
78 |     gl_FragColor=vec4(col,1.);
79 | }
80 |   `,
81 |             });
82 |             const mesh = new THREE.Mesh(geometry, material);
83 |             this.scene.add(mesh);
84 | 
85 |             const uj = new kokomi.UniformInjector(this);
86 |             material.uniforms = {
87 |                 ...material.uniforms,
88 |                 ...uj.shadertoyUniforms,
89 |             };
90 |             this.update(() => {
91 |                 uj.injectShadertoyUniforms(material.uniforms);
92 |             });
93 |         }
94 |     }
95 | 
96 |     const sketch = new Sketch("#sketch");
97 |     sketch.create();
98 | </script>


--------------------------------------------------------------------------------
/glsl/6-random/noise.glsl:
--------------------------------------------------------------------------------
  1 | //
  2 | // GLSL textureless classic 3D noise "cnoise",
  3 | // with an RSL-style periodic variant "pnoise".
  4 | // Author:  Stefan Gustavson (stefan.gustavson@liu.se)
  5 | // Version: 2011-10-11
  6 | //
  7 | // Many thanks to Ian McEwan of Ashima Arts for the
  8 | // ideas for permutation and gradient selection.
  9 | //
 10 | // Copyright (c) 2011 Stefan Gustavson. All rights reserved.
 11 | // Distributed under the MIT license. See LICENSE file.
 12 | // https://github.com/ashima/webgl-noise
 13 | //
 14 | 
 15 | vec3 mod289(vec3 x)
 16 | {
 17 |     return x-floor(x*(1./289.))*289.;
 18 | }
 19 | 
 20 | vec4 mod289(vec4 x)
 21 | {
 22 |     return x-floor(x*(1./289.))*289.;
 23 | }
 24 | 
 25 | vec4 permute(vec4 x)
 26 | {
 27 |     return mod289(((x*34.)+1.)*x);
 28 | }
 29 | 
 30 | vec4 taylorInvSqrt(vec4 r)
 31 | {
 32 |     return 1.79284291400159-.85373472095314*r;
 33 | }
 34 | 
 35 | vec3 fade(vec3 t){
 36 |     return t*t*t*(t*(t*6.-15.)+10.);
 37 | }
 38 | 
 39 | // Classic Perlin noise
 40 | float cnoise(vec3 P)
 41 | {
 42 |     vec3 Pi0=floor(P);// Integer part for indexing
 43 |     vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
 44 |     Pi0=mod289(Pi0);
 45 |     Pi1=mod289(Pi1);
 46 |     vec3 Pf0=fract(P);// Fractional part for interpolation
 47 |     vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
 48 |     vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
 49 |     vec4 iy=vec4(Pi0.yy,Pi1.yy);
 50 |     vec4 iz0=Pi0.zzzz;
 51 |     vec4 iz1=Pi1.zzzz;
 52 |     
 53 |     vec4 ixy=permute(permute(ix)+iy);
 54 |     vec4 ixy0=permute(ixy+iz0);
 55 |     vec4 ixy1=permute(ixy+iz1);
 56 |     
 57 |     vec4 gx0=ixy0*(1./7.);
 58 |     vec4 gy0=fract(floor(gx0)*(1./7.))-.5;
 59 |     gx0=fract(gx0);
 60 |     vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
 61 |     vec4 sz0=step(gz0,vec4(0.));
 62 |     gx0-=sz0*(step(0.,gx0)-.5);
 63 |     gy0-=sz0*(step(0.,gy0)-.5);
 64 |     
 65 |     vec4 gx1=ixy1*(1./7.);
 66 |     vec4 gy1=fract(floor(gx1)*(1./7.))-.5;
 67 |     gx1=fract(gx1);
 68 |     vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
 69 |     vec4 sz1=step(gz1,vec4(0.));
 70 |     gx1-=sz1*(step(0.,gx1)-.5);
 71 |     gy1-=sz1*(step(0.,gy1)-.5);
 72 |     
 73 |     vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
 74 |     vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
 75 |     vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
 76 |     vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
 77 |     vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
 78 |     vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
 79 |     vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
 80 |     vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
 81 |     
 82 |     vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
 83 |     g000*=norm0.x;
 84 |     g010*=norm0.y;
 85 |     g100*=norm0.z;
 86 |     g110*=norm0.w;
 87 |     vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
 88 |     g001*=norm1.x;
 89 |     g011*=norm1.y;
 90 |     g101*=norm1.z;
 91 |     g111*=norm1.w;
 92 |     
 93 |     float n000=dot(g000,Pf0);
 94 |     float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
 95 |     float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
 96 |     float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
 97 |     float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
 98 |     float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
 99 |     float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
100 |     float n111=dot(g111,Pf1);
101 |     
102 |     vec3 fade_xyz=fade(Pf0);
103 |     vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
104 |     vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
105 |     float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
106 |     return 2.2*n_xyz;
107 | }
108 | 
109 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
110 |     vec2 uv=fragCoord/iResolution.xy;
111 |     
112 |     float noise=cnoise(vec3(uv*10.,0.));
113 |     // float noise=cnoise(vec3(uv*10.,iTime));
114 |     
115 |     vec3 col=vec3(noise);
116 |     fragColor=vec4(col,1.);
117 | }
118 | 


--------------------------------------------------------------------------------
/html/9-lighting/lighting-ibl-specular.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <div id="sketch"></div>
  8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
  9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
 10 | <script>
 11 |     class Sketch extends kokomi.Base {
 12 |         create() {
 13 |             this.camera.position.set(0, 0, 5);
 14 |             new kokomi.OrbitControls(this);
 15 | 
 16 |             const geometry = new THREE.SphereGeometry(2, 64, 64);
 17 |             // const geometry = new THREE.PlaneGeometry(4, 4);
 18 |             const envmap = new THREE.CubeTextureLoader().load([
 19 |                 "https://s2.loli.net/2022/09/29/X8TDZROlUo6uAyG.png",
 20 |                 "https://s2.loli.net/2022/09/29/KYEJ9ylQNIe6h4R.png",
 21 |                 "https://s2.loli.net/2022/09/29/GqseLg6tWoluDzV.png",
 22 |                 "https://s2.loli.net/2022/09/29/LUk8P21MJG6AtNF.png",
 23 |                 "https://s2.loli.net/2022/09/29/4BO1JHoM3phFCb7.png",
 24 |                 "https://s2.loli.net/2022/09/29/5NvAxfCVqlKFRZU.png",
 25 |             ]);
 26 |             const material = new THREE.ShaderMaterial({
 27 |                 vertexShader: /* glsl */ `
 28 | uniform float iTime;
 29 | uniform vec3 iResolution;
 30 | uniform vec4 iMouse;
 31 | 
 32 | varying vec2 vUv;
 33 | varying vec3 vNormal;
 34 | varying vec3 vWorldPosition;
 35 | 
 36 | void main(){
 37 |     vec3 p=position;
 38 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
 39 |     
 40 |     vUv=uv;
 41 |     vNormal=normal;
 42 |     vWorldPosition=vec3(modelMatrix*vec4(p,1));
 43 | }
 44 |   `,
 45 |                 fragmentShader: /* glsl */ `
 46 | uniform float iTime;
 47 | uniform vec3 iResolution;
 48 | uniform vec4 iMouse;
 49 | 
 50 | varying vec2 vUv;
 51 | varying vec3 vNormal;
 52 | varying vec3 vWorldPosition;
 53 | 
 54 | uniform samplerCube iChannel0;
 55 | 
 56 | void main(){
 57 |     vec2 uv=vUv;
 58 |     
 59 |     vec3 col=vec3(0.);
 60 |     vec3 objectColor=vec3(1.);
 61 |     vec3 lightColor=vec3(.875,.286,.333);
 62 |     
 63 |     // ambient
 64 |     float ambIntensity=.2;
 65 |     vec3 ambient=lightColor*ambIntensity;
 66 |     col+=ambient*objectColor;
 67 |     
 68 |     // diffuse
 69 |     vec3 lightPos=vec3(10.,10.,10.);
 70 |     vec3 lightDir=normalize(lightPos-vWorldPosition);
 71 |     float diff=dot(vNormal,lightDir);
 72 |     diff=max(diff,0.);
 73 |     vec3 diffuse=lightColor*diff;
 74 |     col+=diffuse*objectColor;
 75 |     
 76 |     // specular
 77 |     vec3 reflectDir=reflect(-lightDir,vNormal);
 78 |     vec3 viewDir=normalize(cameraPosition-vWorldPosition);
 79 |     // float spec=dot(viewDir,reflectDir);
 80 |     vec3 halfVec=normalize(lightDir+viewDir);
 81 |     float spec=dot(vNormal,halfVec);
 82 |     spec=max(spec,0.);
 83 |     float shininess=32.;
 84 |     spec=pow(spec,shininess);
 85 |     vec3 specular=lightColor*spec;
 86 |     col+=specular*objectColor;
 87 |     
 88 |     // IBL
 89 |     float iblIntensity=.2;
 90 |     vec3 iblCoord=normalize(reflect(-viewDir,vNormal));
 91 |     vec3 ibl=texture(iChannel0,iblCoord).xyz;
 92 |     vec3 iblLight=ibl*iblIntensity;
 93 |     col+=iblLight*objectColor;
 94 |     
 95 |     gl_FragColor=vec4(col,1.);
 96 | }
 97 |   `,
 98 |                 uniforms: {
 99 |                     iChannel0: {
100 |                         value: envmap,
101 |                     },
102 |                 },
103 |             });
104 |             const mesh = new THREE.Mesh(geometry, material);
105 |             this.scene.add(mesh);
106 | 
107 |             const uj = new kokomi.UniformInjector(this);
108 |             material.uniforms = {
109 |                 ...material.uniforms,
110 |                 ...uj.shadertoyUniforms,
111 |             };
112 |             this.update(() => {
113 |                 uj.injectShadertoyUniforms(material.uniforms);
114 |             });
115 |         }
116 |     }
117 | 
118 |     const sketch = new Sketch("#sketch");
119 |     sketch.create();
120 | </script>


--------------------------------------------------------------------------------
/html/6-random/noise.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <shader-toy>
  8 |     <script type="frag"></script>
  9 | </shader-toy>
 10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
 11 | <script>
 12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
 13 | //
 14 | // GLSL textureless classic 3D noise "cnoise",
 15 | // with an RSL-style periodic variant "pnoise".
 16 | // Author:  Stefan Gustavson (stefan.gustavson@liu.se)
 17 | // Version: 2011-10-11
 18 | //
 19 | // Many thanks to Ian McEwan of Ashima Arts for the
 20 | // ideas for permutation and gradient selection.
 21 | //
 22 | // Copyright (c) 2011 Stefan Gustavson. All rights reserved.
 23 | // Distributed under the MIT license. See LICENSE file.
 24 | // https://github.com/ashima/webgl-noise
 25 | //
 26 | 
 27 | vec3 mod289(vec3 x)
 28 | {
 29 |     return x-floor(x*(1./289.))*289.;
 30 | }
 31 | 
 32 | vec4 mod289(vec4 x)
 33 | {
 34 |     return x-floor(x*(1./289.))*289.;
 35 | }
 36 | 
 37 | vec4 permute(vec4 x)
 38 | {
 39 |     return mod289(((x*34.)+1.)*x);
 40 | }
 41 | 
 42 | vec4 taylorInvSqrt(vec4 r)
 43 | {
 44 |     return 1.79284291400159-.85373472095314*r;
 45 | }
 46 | 
 47 | vec3 fade(vec3 t){
 48 |     return t*t*t*(t*(t*6.-15.)+10.);
 49 | }
 50 | 
 51 | // Classic Perlin noise
 52 | float cnoise(vec3 P)
 53 | {
 54 |     vec3 Pi0=floor(P);// Integer part for indexing
 55 |     vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
 56 |     Pi0=mod289(Pi0);
 57 |     Pi1=mod289(Pi1);
 58 |     vec3 Pf0=fract(P);// Fractional part for interpolation
 59 |     vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
 60 |     vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
 61 |     vec4 iy=vec4(Pi0.yy,Pi1.yy);
 62 |     vec4 iz0=Pi0.zzzz;
 63 |     vec4 iz1=Pi1.zzzz;
 64 |     
 65 |     vec4 ixy=permute(permute(ix)+iy);
 66 |     vec4 ixy0=permute(ixy+iz0);
 67 |     vec4 ixy1=permute(ixy+iz1);
 68 |     
 69 |     vec4 gx0=ixy0*(1./7.);
 70 |     vec4 gy0=fract(floor(gx0)*(1./7.))-.5;
 71 |     gx0=fract(gx0);
 72 |     vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
 73 |     vec4 sz0=step(gz0,vec4(0.));
 74 |     gx0-=sz0*(step(0.,gx0)-.5);
 75 |     gy0-=sz0*(step(0.,gy0)-.5);
 76 |     
 77 |     vec4 gx1=ixy1*(1./7.);
 78 |     vec4 gy1=fract(floor(gx1)*(1./7.))-.5;
 79 |     gx1=fract(gx1);
 80 |     vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
 81 |     vec4 sz1=step(gz1,vec4(0.));
 82 |     gx1-=sz1*(step(0.,gx1)-.5);
 83 |     gy1-=sz1*(step(0.,gy1)-.5);
 84 |     
 85 |     vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
 86 |     vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
 87 |     vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
 88 |     vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
 89 |     vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
 90 |     vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
 91 |     vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
 92 |     vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
 93 |     
 94 |     vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
 95 |     g000*=norm0.x;
 96 |     g010*=norm0.y;
 97 |     g100*=norm0.z;
 98 |     g110*=norm0.w;
 99 |     vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
100 |     g001*=norm1.x;
101 |     g011*=norm1.y;
102 |     g101*=norm1.z;
103 |     g111*=norm1.w;
104 |     
105 |     float n000=dot(g000,Pf0);
106 |     float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
107 |     float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
108 |     float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
109 |     float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
110 |     float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
111 |     float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
112 |     float n111=dot(g111,Pf1);
113 |     
114 |     vec3 fade_xyz=fade(Pf0);
115 |     vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
116 |     vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
117 |     float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
118 |     return 2.2*n_xyz;
119 | }
120 | 
121 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
122 |     vec2 uv=fragCoord/iResolution.xy;
123 |     
124 |     float noise=cnoise(vec3(uv*10.,0.));
125 |     // float noise=cnoise(vec3(uv*10.,iTime));
126 |     
127 |     vec3 col=vec3(noise);
128 |     fragColor=vec4(col,1.);
129 | }
130 |     `;
131 |     kokomi.ShaderToyElement.register();
132 | </script>


--------------------------------------------------------------------------------
/html/9-lighting/lighting-fresnel.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <div id="sketch"></div>
  8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
  9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
 10 | <script>
 11 |     class Sketch extends kokomi.Base {
 12 |         create() {
 13 |             this.camera.position.set(0, 0, 5);
 14 |             new kokomi.OrbitControls(this);
 15 | 
 16 |             const geometry = new THREE.SphereGeometry(2, 64, 64);
 17 |             // const geometry = new THREE.PlaneGeometry(4, 4);
 18 |             const envmap = new THREE.CubeTextureLoader().load([
 19 |                 "https://s2.loli.net/2022/09/29/X8TDZROlUo6uAyG.png",
 20 |                 "https://s2.loli.net/2022/09/29/KYEJ9ylQNIe6h4R.png",
 21 |                 "https://s2.loli.net/2022/09/29/GqseLg6tWoluDzV.png",
 22 |                 "https://s2.loli.net/2022/09/29/LUk8P21MJG6AtNF.png",
 23 |                 "https://s2.loli.net/2022/09/29/4BO1JHoM3phFCb7.png",
 24 |                 "https://s2.loli.net/2022/09/29/5NvAxfCVqlKFRZU.png",
 25 |             ]);
 26 |             const material = new THREE.ShaderMaterial({
 27 |                 vertexShader: /* glsl */ `
 28 | uniform float iTime;
 29 | uniform vec3 iResolution;
 30 | uniform vec4 iMouse;
 31 | 
 32 | varying vec2 vUv;
 33 | varying vec3 vNormal;
 34 | varying vec3 vWorldPosition;
 35 | 
 36 | void main(){
 37 |     vec3 p=position;
 38 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
 39 |     
 40 |     vUv=uv;
 41 |     vNormal=normal;
 42 |     vWorldPosition=vec3(modelMatrix*vec4(p,1));
 43 | }
 44 |   `,
 45 |                 fragmentShader: /* glsl */ `
 46 | uniform float iTime;
 47 | uniform vec3 iResolution;
 48 | uniform vec4 iMouse;
 49 | 
 50 | varying vec2 vUv;
 51 | varying vec3 vNormal;
 52 | varying vec3 vWorldPosition;
 53 | 
 54 | uniform samplerCube iChannel0;
 55 | 
 56 | float fresnel(float bias,float scale,float power,vec3 I,vec3 N)
 57 | {
 58 |     return bias+scale*pow(1.-dot(I,N),power);
 59 | }
 60 | 
 61 | void main(){
 62 |     vec2 uv=vUv;
 63 |     
 64 |     vec3 col=vec3(0.);
 65 |     vec3 objectColor=vec3(1.);
 66 |     vec3 lightColor=vec3(.875,.286,.333);
 67 |     
 68 |     // ambient
 69 |     float ambIntensity=.2;
 70 |     vec3 ambient=lightColor*ambIntensity;
 71 |     col+=ambient*objectColor;
 72 |     
 73 |     // diffuse
 74 |     vec3 lightPos=vec3(10.,10.,10.);
 75 |     vec3 lightDir=normalize(lightPos-vWorldPosition);
 76 |     float diff=dot(vNormal,lightDir);
 77 |     diff=max(diff,0.);
 78 |     vec3 diffuse=lightColor*diff;
 79 |     col+=diffuse*objectColor;
 80 |     
 81 |     // specular
 82 |     vec3 reflectDir=reflect(-lightDir,vNormal);
 83 |     vec3 viewDir=normalize(cameraPosition-vWorldPosition);
 84 |     // float spec=dot(viewDir,reflectDir);
 85 |     vec3 halfVec=normalize(lightDir+viewDir);
 86 |     float spec=dot(vNormal,halfVec);
 87 |     spec=max(spec,0.);
 88 |     float shininess=32.;
 89 |     spec=pow(spec,shininess);
 90 |     vec3 specular=lightColor*spec;
 91 |     col+=specular*objectColor;
 92 |     
 93 |     // IBL
 94 |     float iblIntensity=.2;
 95 |     vec3 iblCoord=normalize(reflect(-viewDir,vNormal));
 96 |     vec3 ibl=texture(iChannel0,iblCoord).xyz;
 97 |     vec3 iblLight=ibl*iblIntensity;
 98 |     col+=iblLight*objectColor;
 99 |     
100 |     // fresnel
101 |     vec3 fresColor=vec3(1.);
102 |     float fresIntensity=.6;
103 |     float fres=fresnel(0.,1.,5.,viewDir,vNormal);
104 |     vec3 fresLight=fres*fresColor*fresIntensity;
105 |     col+=fresLight*objectColor;
106 |     
107 |     gl_FragColor=vec4(col,1.);
108 | }
109 |   `,
110 |                 uniforms: {
111 |                     iChannel0: {
112 |                         value: envmap,
113 |                     },
114 |                 },
115 |             });
116 |             const mesh = new THREE.Mesh(geometry, material);
117 |             this.scene.add(mesh);
118 | 
119 |             const uj = new kokomi.UniformInjector(this);
120 |             material.uniforms = {
121 |                 ...material.uniforms,
122 |                 ...uj.shadertoyUniforms,
123 |             };
124 |             this.update(() => {
125 |                 uj.injectShadertoyUniforms(material.uniforms);
126 |             });
127 |         }
128 |     }
129 | 
130 |     const sketch = new Sketch("#sketch");
131 |     sketch.create();
132 | </script>


--------------------------------------------------------------------------------
/glsl/6-random/noise-transition.glsl:
--------------------------------------------------------------------------------
  1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
  2 | #iChannel1"https://s2.loli.net/2023/09/10/Jb8mIhZMBElPiuC.jpg"
  3 | 
  4 | //
  5 | // GLSL textureless classic 3D noise "cnoise",
  6 | // with an RSL-style periodic variant "pnoise".
  7 | // Author:  Stefan Gustavson (stefan.gustavson@liu.se)
  8 | // Version: 2011-10-11
  9 | //
 10 | // Many thanks to Ian McEwan of Ashima Arts for the
 11 | // ideas for permutation and gradient selection.
 12 | //
 13 | // Copyright (c) 2011 Stefan Gustavson. All rights reserved.
 14 | // Distributed under the MIT license. See LICENSE file.
 15 | // https://github.com/ashima/webgl-noise
 16 | //
 17 | 
 18 | vec3 mod289(vec3 x)
 19 | {
 20 |     return x-floor(x*(1./289.))*289.;
 21 | }
 22 | 
 23 | vec4 mod289(vec4 x)
 24 | {
 25 |     return x-floor(x*(1./289.))*289.;
 26 | }
 27 | 
 28 | vec4 permute(vec4 x)
 29 | {
 30 |     return mod289(((x*34.)+1.)*x);
 31 | }
 32 | 
 33 | vec4 taylorInvSqrt(vec4 r)
 34 | {
 35 |     return 1.79284291400159-.85373472095314*r;
 36 | }
 37 | 
 38 | vec3 fade(vec3 t){
 39 |     return t*t*t*(t*(t*6.-15.)+10.);
 40 | }
 41 | 
 42 | // Classic Perlin noise
 43 | float cnoise(vec3 P)
 44 | {
 45 |     vec3 Pi0=floor(P);// Integer part for indexing
 46 |     vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
 47 |     Pi0=mod289(Pi0);
 48 |     Pi1=mod289(Pi1);
 49 |     vec3 Pf0=fract(P);// Fractional part for interpolation
 50 |     vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
 51 |     vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
 52 |     vec4 iy=vec4(Pi0.yy,Pi1.yy);
 53 |     vec4 iz0=Pi0.zzzz;
 54 |     vec4 iz1=Pi1.zzzz;
 55 |     
 56 |     vec4 ixy=permute(permute(ix)+iy);
 57 |     vec4 ixy0=permute(ixy+iz0);
 58 |     vec4 ixy1=permute(ixy+iz1);
 59 |     
 60 |     vec4 gx0=ixy0*(1./7.);
 61 |     vec4 gy0=fract(floor(gx0)*(1./7.))-.5;
 62 |     gx0=fract(gx0);
 63 |     vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
 64 |     vec4 sz0=step(gz0,vec4(0.));
 65 |     gx0-=sz0*(step(0.,gx0)-.5);
 66 |     gy0-=sz0*(step(0.,gy0)-.5);
 67 |     
 68 |     vec4 gx1=ixy1*(1./7.);
 69 |     vec4 gy1=fract(floor(gx1)*(1./7.))-.5;
 70 |     gx1=fract(gx1);
 71 |     vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
 72 |     vec4 sz1=step(gz1,vec4(0.));
 73 |     gx1-=sz1*(step(0.,gx1)-.5);
 74 |     gy1-=sz1*(step(0.,gy1)-.5);
 75 |     
 76 |     vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
 77 |     vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
 78 |     vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
 79 |     vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
 80 |     vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
 81 |     vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
 82 |     vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
 83 |     vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
 84 |     
 85 |     vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
 86 |     g000*=norm0.x;
 87 |     g010*=norm0.y;
 88 |     g100*=norm0.z;
 89 |     g110*=norm0.w;
 90 |     vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
 91 |     g001*=norm1.x;
 92 |     g011*=norm1.y;
 93 |     g101*=norm1.z;
 94 |     g111*=norm1.w;
 95 |     
 96 |     float n000=dot(g000,Pf0);
 97 |     float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
 98 |     float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
 99 |     float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
100 |     float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
101 |     float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
102 |     float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
103 |     float n111=dot(g111,Pf1);
104 |     
105 |     vec3 fade_xyz=fade(Pf0);
106 |     vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
107 |     vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
108 |     float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
109 |     return 2.2*n_xyz;
110 | }
111 | 
112 | vec4 getFromColor(vec2 uv){
113 |     return texture(iChannel0,uv);
114 | }
115 | 
116 | vec4 getToColor(vec2 uv){
117 |     return texture(iChannel1,uv);
118 | }
119 | 
120 | float sdCircle(vec2 p,float r)
121 | {
122 |     return length(p)-r;
123 | }
124 | 
125 | vec4 transition(vec2 uv){
126 |     float progress=iMouse.x/iResolution.x;
127 |     float ratio=iResolution.x/iResolution.y;
128 |     
129 |     vec2 p=uv;
130 |     p-=.5;
131 |     p.x*=ratio;
132 |     
133 |     float noise=cnoise(vec3(p*10.,0.));
134 |     float pr=progress+noise*.1;
135 |     
136 |     float d=sdCircle(p,pr*sqrt(2.4));
137 |     float c=smoothstep(-.1,-.05,d);
138 |     
139 |     return mix(getFromColor(uv),getToColor(uv),1.-c);
140 | }
141 | 
142 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
143 |     vec2 uv=fragCoord/iResolution.xy;
144 |     
145 |     vec4 col=transition(uv);
146 |     
147 |     fragColor=col;
148 | }
149 | 


--------------------------------------------------------------------------------
/html/9-lighting/lighting-fix-normal.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <div id="sketch"></div>
  8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
  9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
 10 | <script>
 11 |     class Sketch extends kokomi.Base {
 12 |         create() {
 13 |             this.camera.position.set(0, 0, 5);
 14 |             new kokomi.OrbitControls(this);
 15 | 
 16 |             // const geometry = new THREE.SphereGeometry(2, 64, 64);
 17 |             const geometry = new THREE.TorusKnotGeometry(1.2, 0.4, 128, 32);
 18 |             // const geometry = new THREE.PlaneGeometry(4, 4);
 19 |             const envmap = new THREE.CubeTextureLoader().load([
 20 |                 "https://s2.loli.net/2022/09/29/X8TDZROlUo6uAyG.png",
 21 |                 "https://s2.loli.net/2022/09/29/KYEJ9ylQNIe6h4R.png",
 22 |                 "https://s2.loli.net/2022/09/29/GqseLg6tWoluDzV.png",
 23 |                 "https://s2.loli.net/2022/09/29/LUk8P21MJG6AtNF.png",
 24 |                 "https://s2.loli.net/2022/09/29/4BO1JHoM3phFCb7.png",
 25 |                 "https://s2.loli.net/2022/09/29/5NvAxfCVqlKFRZU.png",
 26 |             ]);
 27 |             const material = new THREE.ShaderMaterial({
 28 |                 vertexShader: /* glsl */ `
 29 | uniform float iTime;
 30 | uniform vec3 iResolution;
 31 | uniform vec4 iMouse;
 32 | 
 33 | varying vec2 vUv;
 34 | varying vec3 vNormal;
 35 | varying vec3 vWorldPosition;
 36 | 
 37 | void main(){
 38 |     vec3 p=position;
 39 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
 40 |     
 41 |     vUv=uv;
 42 |     // vNormal=normal;
 43 |     vNormal=(modelMatrix*vec4(normal,0.)).xyz;
 44 |     vWorldPosition=vec3(modelMatrix*vec4(p,1));
 45 | }
 46 |   `,
 47 |                 fragmentShader: /* glsl */ `
 48 | uniform float iTime;
 49 | uniform vec3 iResolution;
 50 | uniform vec4 iMouse;
 51 | 
 52 | varying vec2 vUv;
 53 | varying vec3 vNormal;
 54 | varying vec3 vWorldPosition;
 55 | 
 56 | uniform samplerCube iChannel0;
 57 | 
 58 | float fresnel(float bias,float scale,float power,vec3 I,vec3 N)
 59 | {
 60 |     return bias+scale*pow(1.-dot(I,N),power);
 61 | }
 62 | 
 63 | void main(){
 64 |     vec2 uv=vUv;
 65 |     
 66 |     vec3 normal=normalize(vNormal);
 67 |     
 68 |     vec3 col=vec3(0.);
 69 |     vec3 objectColor=vec3(1.);
 70 |     vec3 lightColor=vec3(.875,.286,.333);
 71 |     
 72 |     // ambient
 73 |     float ambIntensity=.2;
 74 |     vec3 ambient=lightColor*ambIntensity;
 75 |     col+=ambient*objectColor;
 76 |     
 77 |     // diffuse
 78 |     vec3 lightPos=vec3(10.,10.,10.);
 79 |     vec3 lightDir=normalize(lightPos-vWorldPosition);
 80 |     float diff=dot(normal,lightDir);
 81 |     diff=max(diff,0.);
 82 |     vec3 diffuse=lightColor*diff;
 83 |     col+=diffuse*objectColor;
 84 |     
 85 |     // specular
 86 |     vec3 reflectDir=reflect(-lightDir,normal);
 87 |     vec3 viewDir=normalize(cameraPosition-vWorldPosition);
 88 |     // float spec=dot(viewDir,reflectDir);
 89 |     vec3 halfVec=normalize(lightDir+viewDir);
 90 |     float spec=dot(normal,halfVec);
 91 |     spec=max(spec,0.);
 92 |     float shininess=32.;
 93 |     spec=pow(spec,shininess);
 94 |     vec3 specular=lightColor*spec;
 95 |     col+=specular*objectColor;
 96 |     
 97 |     // IBL
 98 |     float iblIntensity=.2;
 99 |     vec3 iblCoord=normalize(reflect(-viewDir,normal));
100 |     vec3 ibl=texture(iChannel0,iblCoord).xyz;
101 |     vec3 iblLight=ibl*iblIntensity;
102 |     col+=iblLight*objectColor;
103 |     
104 |     // fresnel
105 |     vec3 fresColor=vec3(1.);
106 |     float fresIntensity=.6;
107 |     float fres=fresnel(0.,1.,5.,viewDir,normal);
108 |     vec3 fresLight=fres*fresColor*fresIntensity;
109 |     col+=fresLight*objectColor;
110 |     
111 |     gl_FragColor=vec4(col,1.);
112 | }
113 |   `,
114 |                 uniforms: {
115 |                     iChannel0: {
116 |                         value: envmap,
117 |                     },
118 |                 },
119 |             });
120 |             const mesh = new THREE.Mesh(geometry, material);
121 |             this.scene.add(mesh);
122 | 
123 |             const uj = new kokomi.UniformInjector(this);
124 |             material.uniforms = {
125 |                 ...material.uniforms,
126 |                 ...uj.shadertoyUniforms,
127 |             };
128 |             this.update(() => {
129 |                 uj.injectShadertoyUniforms(material.uniforms);
130 | 
131 |                 const t = this.clock.elapsedTime;
132 |                 mesh.rotation.y = 0.2 * t;
133 |             });
134 |         }
135 |     }
136 | 
137 |     const sketch = new Sketch("#sketch");
138 |     sketch.create();
139 | </script>


--------------------------------------------------------------------------------
/glsl/6-random/fbm.glsl:
--------------------------------------------------------------------------------
  1 | //
  2 | // Description : Array and textureless GLSL 2D/3D/4D simplex
  3 | //               noise functions.
  4 | //      Author : Ian McEwan, Ashima Arts.
  5 | //  Maintainer : ijm
  6 | //     Lastmod : 20110822 (ijm)
  7 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
  8 | //               Distributed under the MIT License. See LICENSE file.
  9 | //               https://github.com/ashima/webgl-noise
 10 | //
 11 | 
 12 | vec3 mod289(vec3 x){
 13 |     return x-floor(x*(1./289.))*289.;
 14 | }
 15 | 
 16 | vec4 mod289(vec4 x){
 17 |     return x-floor(x*(1./289.))*289.;
 18 | }
 19 | 
 20 | vec4 permute(vec4 x){
 21 |     return mod289(((x*34.)+1.)*x);
 22 | }
 23 | 
 24 | vec4 taylorInvSqrt(vec4 r)
 25 | {
 26 |     return 1.79284291400159-.85373472095314*r;
 27 | }
 28 | 
 29 | float snoise(vec3 v)
 30 | {
 31 |     const vec2 C=vec2(1./6.,1./3.);
 32 |     const vec4 D=vec4(0.,.5,1.,2.);
 33 |     
 34 |     // First corner
 35 |     vec3 i=floor(v+dot(v,C.yyy));
 36 |     vec3 x0=v-i+dot(i,C.xxx);
 37 |     
 38 |     // Other corners
 39 |     vec3 g=step(x0.yzx,x0.xyz);
 40 |     vec3 l=1.-g;
 41 |     vec3 i1=min(g.xyz,l.zxy);
 42 |     vec3 i2=max(g.xyz,l.zxy);
 43 |     
 44 |     //   x0 = x0 - 0.0 + 0.0 * C.xxx;
 45 |     //   x1 = x0 - i1  + 1.0 * C.xxx;
 46 |     //   x2 = x0 - i2  + 2.0 * C.xxx;
 47 |     //   x3 = x0 - 1.0 + 3.0 * C.xxx;
 48 |     vec3 x1=x0-i1+C.xxx;
 49 |     vec3 x2=x0-i2+C.yyy;// 2.0*C.x = 1/3 = C.y
 50 |     vec3 x3=x0-D.yyy;// -1.0+3.0*C.x = -0.5 = -D.y
 51 |     
 52 |     // Permutations
 53 |     i=mod289(i);
 54 |     vec4 p=permute(permute(permute(
 55 |                 i.z+vec4(0.,i1.z,i2.z,1.))
 56 |                 +i.y+vec4(0.,i1.y,i2.y,1.))
 57 |                 +i.x+vec4(0.,i1.x,i2.x,1.));
 58 |                 
 59 |                 // Gradients: 7x7 points over a square, mapped onto an octahedron.
 60 |                 // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
 61 |                 float n_=.142857142857;// 1.0/7.0
 62 |                 vec3 ns=n_*D.wyz-D.xzx;
 63 |                 
 64 |                 vec4 j=p-49.*floor(p*ns.z*ns.z);//  mod(p,7*7)
 65 |                 
 66 |                 vec4 x_=floor(j*ns.z);
 67 |                 vec4 y_=floor(j-7.*x_);// mod(j,N)
 68 |                 
 69 |                 vec4 x=x_*ns.x+ns.yyyy;
 70 |                 vec4 y=y_*ns.x+ns.yyyy;
 71 |                 vec4 h=1.-abs(x)-abs(y);
 72 |                 
 73 |                 vec4 b0=vec4(x.xy,y.xy);
 74 |                 vec4 b1=vec4(x.zw,y.zw);
 75 |                 
 76 |                 //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
 77 |                 //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
 78 |                 vec4 s0=floor(b0)*2.+1.;
 79 |                 vec4 s1=floor(b1)*2.+1.;
 80 |                 vec4 sh=-step(h,vec4(0.));
 81 |                 
 82 |                 vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
 83 |                 vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
 84 |                 
 85 |                 vec3 p0=vec3(a0.xy,h.x);
 86 |                 vec3 p1=vec3(a0.zw,h.y);
 87 |                 vec3 p2=vec3(a1.xy,h.z);
 88 |                 vec3 p3=vec3(a1.zw,h.w);
 89 |                 
 90 |                 //Normalise gradients
 91 |                 vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
 92 |                 p0*=norm.x;
 93 |                 p1*=norm.y;
 94 |                 p2*=norm.z;
 95 |                 p3*=norm.w;
 96 |                 
 97 |                 // Mix final noise value
 98 |                 vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
 99 |                 m=m*m;
100 |                 return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),
101 |                 dot(p2,x2),dot(p3,x3)));
102 |             }
103 |             
104 |             float fbm(vec3 p){
105 |                 float value=0.;
106 |                 float amplitude=1.;
107 |                 float frequency=1.;
108 |                 float lacunarity=2.;
109 |                 float persistance=.5;
110 |                 float scale=1.;
111 |                 int octaves=8;
112 |                 
113 |                 for(int i=0;i<octaves;i++){
114 |                     float noiseVal=snoise(p*frequency*scale);
115 |                     
116 |                     value+=amplitude*noiseVal;
117 |                     frequency*=lacunarity;
118 |                     amplitude*=persistance;
119 |                 }
120 |                 
121 |                 return value;
122 |             }
123 |             
124 |             void mainImage(out vec4 fragColor,in vec2 fragCoord){
125 |                 vec2 uv=fragCoord/iResolution.xy;
126 |                 
127 |                 float noise=fbm(vec3(uv,0.));
128 |                 
129 |                 vec3 col=vec3(noise);
130 |                 fragColor=vec4(col,1.);
131 |             }
132 |             


--------------------------------------------------------------------------------
/html/6-random/noise-transition.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <shader-toy>
  8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
  9 |     <img src="https://s2.loli.net/2023/09/10/Jb8mIhZMBElPiuC.jpg" name="iChannel1" hidden />
 10 |     <script type="frag"></script>
 11 | </shader-toy>
 12 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
 13 | <script>
 14 |     document.querySelector('[type=frag]').textContent = /* glsl */`
 15 | //
 16 | // GLSL textureless classic 3D noise "cnoise",
 17 | // with an RSL-style periodic variant "pnoise".
 18 | // Author:  Stefan Gustavson (stefan.gustavson@liu.se)
 19 | // Version: 2011-10-11
 20 | //
 21 | // Many thanks to Ian McEwan of Ashima Arts for the
 22 | // ideas for permutation and gradient selection.
 23 | //
 24 | // Copyright (c) 2011 Stefan Gustavson. All rights reserved.
 25 | // Distributed under the MIT license. See LICENSE file.
 26 | // https://github.com/ashima/webgl-noise
 27 | //
 28 | 
 29 | vec3 mod289(vec3 x)
 30 | {
 31 |     return x-floor(x*(1./289.))*289.;
 32 | }
 33 | 
 34 | vec4 mod289(vec4 x)
 35 | {
 36 |     return x-floor(x*(1./289.))*289.;
 37 | }
 38 | 
 39 | vec4 permute(vec4 x)
 40 | {
 41 |     return mod289(((x*34.)+1.)*x);
 42 | }
 43 | 
 44 | vec4 taylorInvSqrt(vec4 r)
 45 | {
 46 |     return 1.79284291400159-.85373472095314*r;
 47 | }
 48 | 
 49 | vec3 fade(vec3 t){
 50 |     return t*t*t*(t*(t*6.-15.)+10.);
 51 | }
 52 | 
 53 | // Classic Perlin noise
 54 | float cnoise(vec3 P)
 55 | {
 56 |     vec3 Pi0=floor(P);// Integer part for indexing
 57 |     vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
 58 |     Pi0=mod289(Pi0);
 59 |     Pi1=mod289(Pi1);
 60 |     vec3 Pf0=fract(P);// Fractional part for interpolation
 61 |     vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
 62 |     vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
 63 |     vec4 iy=vec4(Pi0.yy,Pi1.yy);
 64 |     vec4 iz0=Pi0.zzzz;
 65 |     vec4 iz1=Pi1.zzzz;
 66 |     
 67 |     vec4 ixy=permute(permute(ix)+iy);
 68 |     vec4 ixy0=permute(ixy+iz0);
 69 |     vec4 ixy1=permute(ixy+iz1);
 70 |     
 71 |     vec4 gx0=ixy0*(1./7.);
 72 |     vec4 gy0=fract(floor(gx0)*(1./7.))-.5;
 73 |     gx0=fract(gx0);
 74 |     vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
 75 |     vec4 sz0=step(gz0,vec4(0.));
 76 |     gx0-=sz0*(step(0.,gx0)-.5);
 77 |     gy0-=sz0*(step(0.,gy0)-.5);
 78 |     
 79 |     vec4 gx1=ixy1*(1./7.);
 80 |     vec4 gy1=fract(floor(gx1)*(1./7.))-.5;
 81 |     gx1=fract(gx1);
 82 |     vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
 83 |     vec4 sz1=step(gz1,vec4(0.));
 84 |     gx1-=sz1*(step(0.,gx1)-.5);
 85 |     gy1-=sz1*(step(0.,gy1)-.5);
 86 |     
 87 |     vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
 88 |     vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
 89 |     vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
 90 |     vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
 91 |     vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
 92 |     vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
 93 |     vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
 94 |     vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
 95 |     
 96 |     vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
 97 |     g000*=norm0.x;
 98 |     g010*=norm0.y;
 99 |     g100*=norm0.z;
100 |     g110*=norm0.w;
101 |     vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
102 |     g001*=norm1.x;
103 |     g011*=norm1.y;
104 |     g101*=norm1.z;
105 |     g111*=norm1.w;
106 |     
107 |     float n000=dot(g000,Pf0);
108 |     float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
109 |     float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
110 |     float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
111 |     float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
112 |     float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
113 |     float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
114 |     float n111=dot(g111,Pf1);
115 |     
116 |     vec3 fade_xyz=fade(Pf0);
117 |     vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
118 |     vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
119 |     float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
120 |     return 2.2*n_xyz;
121 | }
122 | 
123 | vec4 getFromColor(vec2 uv){
124 |     return texture(iChannel0,uv);
125 | }
126 | 
127 | vec4 getToColor(vec2 uv){
128 |     return texture(iChannel1,uv);
129 | }
130 | 
131 | float sdCircle(vec2 p,float r)
132 | {
133 |     return length(p)-r;
134 | }
135 | 
136 | vec4 transition(vec2 uv){
137 |     float progress=iMouse.x/iResolution.x;
138 |     float ratio=iResolution.x/iResolution.y;
139 |     
140 |     vec2 p=uv;
141 |     p-=.5;
142 |     p.x*=ratio;
143 |     
144 |     float noise=cnoise(vec3(p*10.,0.));
145 |     float pr=progress+noise*.1;
146 |     
147 |     float d=sdCircle(p,pr*sqrt(2.4));
148 |     float c=smoothstep(-.1,-.05,d);
149 |     
150 |     return mix(getFromColor(uv),getToColor(uv),1.-c);
151 | }
152 | 
153 | void mainImage(out vec4 fragColor,in vec2 fragCoord){
154 |     vec2 uv=fragCoord/iResolution.xy;
155 |     
156 |     vec4 col=transition(uv);
157 |     
158 |     fragColor=col;
159 | }
160 |     `;
161 |     kokomi.ShaderToyElement.register();
162 | </script>


--------------------------------------------------------------------------------
/html/6-random/fbm.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <shader-toy>
  8 |     <script type="frag"></script>
  9 | </shader-toy>
 10 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
 11 | <script>
 12 |     document.querySelector('[type=frag]').textContent = /* glsl */`
 13 | //
 14 | // Description : Array and textureless GLSL 2D/3D/4D simplex
 15 | //               noise functions.
 16 | //      Author : Ian McEwan, Ashima Arts.
 17 | //  Maintainer : ijm
 18 | //     Lastmod : 20110822 (ijm)
 19 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
 20 | //               Distributed under the MIT License. See LICENSE file.
 21 | //               https://github.com/ashima/webgl-noise
 22 | //
 23 | 
 24 | vec3 mod289(vec3 x){
 25 |     return x-floor(x*(1./289.))*289.;
 26 | }
 27 | 
 28 | vec4 mod289(vec4 x){
 29 |     return x-floor(x*(1./289.))*289.;
 30 | }
 31 | 
 32 | vec4 permute(vec4 x){
 33 |     return mod289(((x*34.)+1.)*x);
 34 | }
 35 | 
 36 | vec4 taylorInvSqrt(vec4 r)
 37 | {
 38 |     return 1.79284291400159-.85373472095314*r;
 39 | }
 40 | 
 41 | float snoise(vec3 v)
 42 | {
 43 |     const vec2 C=vec2(1./6.,1./3.);
 44 |     const vec4 D=vec4(0.,.5,1.,2.);
 45 |     
 46 |     // First corner
 47 |     vec3 i=floor(v+dot(v,C.yyy));
 48 |     vec3 x0=v-i+dot(i,C.xxx);
 49 |     
 50 |     // Other corners
 51 |     vec3 g=step(x0.yzx,x0.xyz);
 52 |     vec3 l=1.-g;
 53 |     vec3 i1=min(g.xyz,l.zxy);
 54 |     vec3 i2=max(g.xyz,l.zxy);
 55 |     
 56 |     //   x0 = x0 - 0.0 + 0.0 * C.xxx;
 57 |     //   x1 = x0 - i1  + 1.0 * C.xxx;
 58 |     //   x2 = x0 - i2  + 2.0 * C.xxx;
 59 |     //   x3 = x0 - 1.0 + 3.0 * C.xxx;
 60 |     vec3 x1=x0-i1+C.xxx;
 61 |     vec3 x2=x0-i2+C.yyy;// 2.0*C.x = 1/3 = C.y
 62 |     vec3 x3=x0-D.yyy;// -1.0+3.0*C.x = -0.5 = -D.y
 63 |     
 64 |     // Permutations
 65 |     i=mod289(i);
 66 |     vec4 p=permute(permute(permute(
 67 |                 i.z+vec4(0.,i1.z,i2.z,1.))
 68 |                 +i.y+vec4(0.,i1.y,i2.y,1.))
 69 |                 +i.x+vec4(0.,i1.x,i2.x,1.));
 70 |                 
 71 |                 // Gradients: 7x7 points over a square, mapped onto an octahedron.
 72 |                 // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
 73 |                 float n_=.142857142857;// 1.0/7.0
 74 |                 vec3 ns=n_*D.wyz-D.xzx;
 75 |                 
 76 |                 vec4 j=p-49.*floor(p*ns.z*ns.z);//  mod(p,7*7)
 77 |                 
 78 |                 vec4 x_=floor(j*ns.z);
 79 |                 vec4 y_=floor(j-7.*x_);// mod(j,N)
 80 |                 
 81 |                 vec4 x=x_*ns.x+ns.yyyy;
 82 |                 vec4 y=y_*ns.x+ns.yyyy;
 83 |                 vec4 h=1.-abs(x)-abs(y);
 84 |                 
 85 |                 vec4 b0=vec4(x.xy,y.xy);
 86 |                 vec4 b1=vec4(x.zw,y.zw);
 87 |                 
 88 |                 //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
 89 |                 //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
 90 |                 vec4 s0=floor(b0)*2.+1.;
 91 |                 vec4 s1=floor(b1)*2.+1.;
 92 |                 vec4 sh=-step(h,vec4(0.));
 93 |                 
 94 |                 vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
 95 |                 vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
 96 |                 
 97 |                 vec3 p0=vec3(a0.xy,h.x);
 98 |                 vec3 p1=vec3(a0.zw,h.y);
 99 |                 vec3 p2=vec3(a1.xy,h.z);
100 |                 vec3 p3=vec3(a1.zw,h.w);
101 |                 
102 |                 //Normalise gradients
103 |                 vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
104 |                 p0*=norm.x;
105 |                 p1*=norm.y;
106 |                 p2*=norm.z;
107 |                 p3*=norm.w;
108 |                 
109 |                 // Mix final noise value
110 |                 vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
111 |                 m=m*m;
112 |                 return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),
113 |                 dot(p2,x2),dot(p3,x3)));
114 |             }
115 |             
116 |             float fbm(vec3 p){
117 |                 float value=0.;
118 |                 float amplitude=1.;
119 |                 float frequency=1.;
120 |                 float lacunarity=2.;
121 |                 float persistance=.5;
122 |                 float scale=1.;
123 |                 int octaves=8;
124 |                 
125 |                 for(int i=0;i<octaves;i++){
126 |                     float noiseVal=snoise(p*frequency*scale);
127 |                     
128 |                     value+=amplitude*noiseVal;
129 |                     frequency*=lacunarity;
130 |                     amplitude*=persistance;
131 |                 }
132 |                 
133 |                 return value;
134 |             }
135 |             
136 |             void mainImage(out vec4 fragColor,in vec2 fragCoord){
137 |                 vec2 uv=fragCoord/iResolution.xy;
138 |                 
139 |                 float noise=fbm(vec3(uv,0.));
140 |                 
141 |                 vec3 col=vec3(noise);
142 |                 fragColor=vec4(col,1.);
143 |             }
144 |     `;
145 |     kokomi.ShaderToyElement.register();
146 | </script>


--------------------------------------------------------------------------------
/bonus/shader-fbm-paper-texture.glsl:
--------------------------------------------------------------------------------
  1 | //
  2 | // Description : Array and textureless GLSL 2D/3D/4D simplex
  3 | //               noise functions.
  4 | //      Author : Ian McEwan, Ashima Arts.
  5 | //  Maintainer : ijm
  6 | //     Lastmod : 20110822 (ijm)
  7 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
  8 | //               Distributed under the MIT License. See LICENSE file.
  9 | //               https://github.com/ashima/webgl-noise
 10 | //
 11 | 
 12 | vec3 mod289(vec3 x){
 13 |     return x-floor(x*(1./289.))*289.;
 14 | }
 15 | 
 16 | vec4 mod289(vec4 x){
 17 |     return x-floor(x*(1./289.))*289.;
 18 | }
 19 | 
 20 | vec4 permute(vec4 x){
 21 |     return mod289(((x*34.)+1.)*x);
 22 | }
 23 | 
 24 | vec4 taylorInvSqrt(vec4 r)
 25 | {
 26 |     return 1.79284291400159-.85373472095314*r;
 27 | }
 28 | 
 29 | float snoise(vec3 v)
 30 | {
 31 |     const vec2 C=vec2(1./6.,1./3.);
 32 |     const vec4 D=vec4(0.,.5,1.,2.);
 33 |     
 34 |     // First corner
 35 |     vec3 i=floor(v+dot(v,C.yyy));
 36 |     vec3 x0=v-i+dot(i,C.xxx);
 37 |     
 38 |     // Other corners
 39 |     vec3 g=step(x0.yzx,x0.xyz);
 40 |     vec3 l=1.-g;
 41 |     vec3 i1=min(g.xyz,l.zxy);
 42 |     vec3 i2=max(g.xyz,l.zxy);
 43 |     
 44 |     //   x0 = x0 - 0.0 + 0.0 * C.xxx;
 45 |     //   x1 = x0 - i1  + 1.0 * C.xxx;
 46 |     //   x2 = x0 - i2  + 2.0 * C.xxx;
 47 |     //   x3 = x0 - 1.0 + 3.0 * C.xxx;
 48 |     vec3 x1=x0-i1+C.xxx;
 49 |     vec3 x2=x0-i2+C.yyy;// 2.0*C.x = 1/3 = C.y
 50 |     vec3 x3=x0-D.yyy;// -1.0+3.0*C.x = -0.5 = -D.y
 51 |     
 52 |     // Permutations
 53 |     i=mod289(i);
 54 |     vec4 p=permute(permute(permute(
 55 |                 i.z+vec4(0.,i1.z,i2.z,1.))
 56 |                 +i.y+vec4(0.,i1.y,i2.y,1.))
 57 |                 +i.x+vec4(0.,i1.x,i2.x,1.));
 58 |                 
 59 |                 // Gradients: 7x7 points over a square, mapped onto an octahedron.
 60 |                 // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
 61 |                 float n_=.142857142857;// 1.0/7.0
 62 |                 vec3 ns=n_*D.wyz-D.xzx;
 63 |                 
 64 |                 vec4 j=p-49.*floor(p*ns.z*ns.z);//  mod(p,7*7)
 65 |                 
 66 |                 vec4 x_=floor(j*ns.z);
 67 |                 vec4 y_=floor(j-7.*x_);// mod(j,N)
 68 |                 
 69 |                 vec4 x=x_*ns.x+ns.yyyy;
 70 |                 vec4 y=y_*ns.x+ns.yyyy;
 71 |                 vec4 h=1.-abs(x)-abs(y);
 72 |                 
 73 |                 vec4 b0=vec4(x.xy,y.xy);
 74 |                 vec4 b1=vec4(x.zw,y.zw);
 75 |                 
 76 |                 //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
 77 |                 //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
 78 |                 vec4 s0=floor(b0)*2.+1.;
 79 |                 vec4 s1=floor(b1)*2.+1.;
 80 |                 vec4 sh=-step(h,vec4(0.));
 81 |                 
 82 |                 vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
 83 |                 vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
 84 |                 
 85 |                 vec3 p0=vec3(a0.xy,h.x);
 86 |                 vec3 p1=vec3(a0.zw,h.y);
 87 |                 vec3 p2=vec3(a1.xy,h.z);
 88 |                 vec3 p3=vec3(a1.zw,h.w);
 89 |                 
 90 |                 //Normalise gradients
 91 |                 vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
 92 |                 p0*=norm.x;
 93 |                 p1*=norm.y;
 94 |                 p2*=norm.z;
 95 |                 p3*=norm.w;
 96 |                 
 97 |                 // Mix final noise value
 98 |                 vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
 99 |                 m=m*m;
100 |                 return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),
101 |                 dot(p2,x2),dot(p3,x3)));
102 |             }
103 |             
104 |             float fbm(vec3 p){
105 |                 float value=0.;
106 |                 float amplitude=1.;
107 |                 // float frequency=1.;
108 |                 float frequency=.025;
109 |                 float lacunarity=2.;
110 |                 float persistance=.5;
111 |                 // float scale=1.;
112 |                 float scale=.5;
113 |                 int octaves=8;
114 |                 
115 |                 for(int i=0;i<octaves;i++){
116 |                     float noiseVal=snoise(p*frequency*scale);
117 |                     
118 |                     value+=amplitude*noiseVal;
119 |                     frequency*=lacunarity;
120 |                     amplitude*=persistance;
121 |                 }
122 |                 
123 |                 return value;
124 |             }
125 |             
126 |             // inspired from: https://www.shadertoy.com/view/fsjyR3
127 |             float paperNoise(vec2 uv){
128 |                 float n1=fbm(vec3(uv.xy+vec2(1.,0.),0.));
129 |                 float n2=fbm(vec3(uv.xy-vec2(1.,0.),0.));
130 |                 float n=n1-n2;
131 |                 return n;
132 |             }
133 |             
134 |             void mainImage(out vec4 fragColor,in vec2 fragCoord){
135 |                 vec2 uv=fragCoord/iResolution.xy;
136 |                 vec3 col=vec3(.8);
137 |                 float noise=paperNoise(uv*iResolution.xy)*.3;
138 |                 col+=noise;
139 |                 fragColor=vec4(col,1.);
140 |             }
141 |             


--------------------------------------------------------------------------------
/html/8-vertex/vertex-shader-distort.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <div id="sketch"></div>
  8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
  9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
 10 | <script>
 11 |     class Sketch extends kokomi.Base {
 12 |         create() {
 13 |             this.camera.position.set(0, 0, 5);
 14 |             new kokomi.OrbitControls(this);
 15 | 
 16 |             const geometry = new THREE.SphereGeometry(2, 64, 64);
 17 |             // const geometry = new THREE.PlaneGeometry(4, 4);
 18 |             const material = new THREE.ShaderMaterial({
 19 |                 vertexShader: /* glsl */ `
 20 | uniform float iTime;
 21 | uniform vec3 iResolution;
 22 | uniform vec4 iMouse;
 23 | 
 24 | varying vec2 vUv;
 25 | 
 26 | //
 27 | // GLSL textureless classic 3D noise "cnoise",
 28 | // with an RSL-style periodic variant "pnoise".
 29 | // Author:  Stefan Gustavson (stefan.gustavson@liu.se)
 30 | // Version: 2011-10-11
 31 | //
 32 | // Many thanks to Ian McEwan of Ashima Arts for the
 33 | // ideas for permutation and gradient selection.
 34 | //
 35 | // Copyright (c) 2011 Stefan Gustavson. All rights reserved.
 36 | // Distributed under the MIT license. See LICENSE file.
 37 | // https://github.com/ashima/webgl-noise
 38 | //
 39 | 
 40 | vec3 mod289(vec3 x)
 41 | {
 42 |     return x-floor(x*(1./289.))*289.;
 43 | }
 44 | 
 45 | vec4 mod289(vec4 x)
 46 | {
 47 |     return x-floor(x*(1./289.))*289.;
 48 | }
 49 | 
 50 | vec4 permute(vec4 x)
 51 | {
 52 |     return mod289(((x*34.)+1.)*x);
 53 | }
 54 | 
 55 | vec4 taylorInvSqrt(vec4 r)
 56 | {
 57 |     return 1.79284291400159-.85373472095314*r;
 58 | }
 59 | 
 60 | vec3 fade(vec3 t){
 61 |     return t*t*t*(t*(t*6.-15.)+10.);
 62 | }
 63 | 
 64 | // Classic Perlin noise
 65 | float cnoise(vec3 P)
 66 | {
 67 |     vec3 Pi0=floor(P);// Integer part for indexing
 68 |     vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
 69 |     Pi0=mod289(Pi0);
 70 |     Pi1=mod289(Pi1);
 71 |     vec3 Pf0=fract(P);// Fractional part for interpolation
 72 |     vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
 73 |     vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
 74 |     vec4 iy=vec4(Pi0.yy,Pi1.yy);
 75 |     vec4 iz0=Pi0.zzzz;
 76 |     vec4 iz1=Pi1.zzzz;
 77 |     
 78 |     vec4 ixy=permute(permute(ix)+iy);
 79 |     vec4 ixy0=permute(ixy+iz0);
 80 |     vec4 ixy1=permute(ixy+iz1);
 81 |     
 82 |     vec4 gx0=ixy0*(1./7.);
 83 |     vec4 gy0=fract(floor(gx0)*(1./7.))-.5;
 84 |     gx0=fract(gx0);
 85 |     vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
 86 |     vec4 sz0=step(gz0,vec4(0.));
 87 |     gx0-=sz0*(step(0.,gx0)-.5);
 88 |     gy0-=sz0*(step(0.,gy0)-.5);
 89 |     
 90 |     vec4 gx1=ixy1*(1./7.);
 91 |     vec4 gy1=fract(floor(gx1)*(1./7.))-.5;
 92 |     gx1=fract(gx1);
 93 |     vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
 94 |     vec4 sz1=step(gz1,vec4(0.));
 95 |     gx1-=sz1*(step(0.,gx1)-.5);
 96 |     gy1-=sz1*(step(0.,gy1)-.5);
 97 |     
 98 |     vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
 99 |     vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
100 |     vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
101 |     vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
102 |     vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
103 |     vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
104 |     vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
105 |     vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
106 |     
107 |     vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
108 |     g000*=norm0.x;
109 |     g010*=norm0.y;
110 |     g100*=norm0.z;
111 |     g110*=norm0.w;
112 |     vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
113 |     g001*=norm1.x;
114 |     g011*=norm1.y;
115 |     g101*=norm1.z;
116 |     g111*=norm1.w;
117 |     
118 |     float n000=dot(g000,Pf0);
119 |     float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
120 |     float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
121 |     float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
122 |     float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
123 |     float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
124 |     float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
125 |     float n111=dot(g111,Pf1);
126 |     
127 |     vec3 fade_xyz=fade(Pf0);
128 |     vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
129 |     vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
130 |     float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
131 |     return 2.2*n_xyz;
132 | }
133 | 
134 | vec3 distort(vec3 p){
135 |     // function
136 |     // p.x+=sin(p.y*10.+iTime)*.25;
137 |     // return p;
138 |     
139 |     // noise
140 |     float noise=cnoise(p+iTime);
141 |     p+=noise*normal*.3;
142 |     return p;
143 | }
144 | 
145 | void main(){
146 |     vec3 p=position;
147 |     p=distort(p);
148 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
149 |     
150 |     vUv=uv;
151 | }
152 |   `,
153 |                 fragmentShader: /* glsl */ `
154 | uniform float iTime;
155 | uniform vec3 iResolution;
156 | uniform vec4 iMouse;
157 | 
158 | varying vec2 vUv;
159 | 
160 | void main(){
161 |     vec2 uv=vUv;
162 |     gl_FragColor=vec4(uv,0.,1.);
163 | }
164 |   `,
165 |             });
166 |             const mesh = new THREE.Mesh(geometry, material);
167 |             this.scene.add(mesh);
168 | 
169 |             const uj = new kokomi.UniformInjector(this);
170 |             material.uniforms = {
171 |                 ...material.uniforms,
172 |                 ...uj.shadertoyUniforms,
173 |             };
174 |             this.update(() => {
175 |                 uj.injectShadertoyUniforms(material.uniforms);
176 |             });
177 |         }
178 |     }
179 | 
180 |     const sketch = new Sketch("#sketch");
181 |     sketch.create();
182 | </script>


--------------------------------------------------------------------------------
/bonus/shader-fbm-particle-transition.glsl:
--------------------------------------------------------------------------------
  1 | #iChannel0"https://s2.loli.net/2023/03/20/5jmPqdJW7EL2a4X.jpg"
  2 | 
  3 | const float PI=3.14159265359;
  4 | 
  5 | //
  6 | // Description : Array and textureless GLSL 2D/3D/4D simplex
  7 | //               noise functions.
  8 | //      Author : Ian McEwan, Ashima Arts.
  9 | //  Maintainer : ijm
 10 | //     Lastmod : 20110822 (ijm)
 11 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
 12 | //               Distributed under the MIT License. See LICENSE file.
 13 | //               https://github.com/ashima/webgl-noise
 14 | //
 15 | 
 16 | vec3 mod289(vec3 x){
 17 |     return x-floor(x*(1./289.))*289.;
 18 | }
 19 | 
 20 | vec4 mod289(vec4 x){
 21 |     return x-floor(x*(1./289.))*289.;
 22 | }
 23 | 
 24 | vec4 permute(vec4 x){
 25 |     return mod289(((x*34.)+1.)*x);
 26 | }
 27 | 
 28 | vec4 taylorInvSqrt(vec4 r)
 29 | {
 30 |     return 1.79284291400159-.85373472095314*r;
 31 | }
 32 | 
 33 | float snoise(vec3 v)
 34 | {
 35 |     const vec2 C=vec2(1./6.,1./3.);
 36 |     const vec4 D=vec4(0.,.5,1.,2.);
 37 |     
 38 |     // First corner
 39 |     vec3 i=floor(v+dot(v,C.yyy));
 40 |     vec3 x0=v-i+dot(i,C.xxx);
 41 |     
 42 |     // Other corners
 43 |     vec3 g=step(x0.yzx,x0.xyz);
 44 |     vec3 l=1.-g;
 45 |     vec3 i1=min(g.xyz,l.zxy);
 46 |     vec3 i2=max(g.xyz,l.zxy);
 47 |     
 48 |     //   x0 = x0 - 0.0 + 0.0 * C.xxx;
 49 |     //   x1 = x0 - i1  + 1.0 * C.xxx;
 50 |     //   x2 = x0 - i2  + 2.0 * C.xxx;
 51 |     //   x3 = x0 - 1.0 + 3.0 * C.xxx;
 52 |     vec3 x1=x0-i1+C.xxx;
 53 |     vec3 x2=x0-i2+C.yyy;// 2.0*C.x = 1/3 = C.y
 54 |     vec3 x3=x0-D.yyy;// -1.0+3.0*C.x = -0.5 = -D.y
 55 |     
 56 |     // Permutations
 57 |     i=mod289(i);
 58 |     vec4 p=permute(permute(permute(
 59 |                 i.z+vec4(0.,i1.z,i2.z,1.))
 60 |                 +i.y+vec4(0.,i1.y,i2.y,1.))
 61 |                 +i.x+vec4(0.,i1.x,i2.x,1.));
 62 |                 
 63 |                 // Gradients: 7x7 points over a square, mapped onto an octahedron.
 64 |                 // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
 65 |                 float n_=.142857142857;// 1.0/7.0
 66 |                 vec3 ns=n_*D.wyz-D.xzx;
 67 |                 
 68 |                 vec4 j=p-49.*floor(p*ns.z*ns.z);//  mod(p,7*7)
 69 |                 
 70 |                 vec4 x_=floor(j*ns.z);
 71 |                 vec4 y_=floor(j-7.*x_);// mod(j,N)
 72 |                 
 73 |                 vec4 x=x_*ns.x+ns.yyyy;
 74 |                 vec4 y=y_*ns.x+ns.yyyy;
 75 |                 vec4 h=1.-abs(x)-abs(y);
 76 |                 
 77 |                 vec4 b0=vec4(x.xy,y.xy);
 78 |                 vec4 b1=vec4(x.zw,y.zw);
 79 |                 
 80 |                 //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
 81 |                 //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
 82 |                 vec4 s0=floor(b0)*2.+1.;
 83 |                 vec4 s1=floor(b1)*2.+1.;
 84 |                 vec4 sh=-step(h,vec4(0.));
 85 |                 
 86 |                 vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
 87 |                 vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
 88 |                 
 89 |                 vec3 p0=vec3(a0.xy,h.x);
 90 |                 vec3 p1=vec3(a0.zw,h.y);
 91 |                 vec3 p2=vec3(a1.xy,h.z);
 92 |                 vec3 p3=vec3(a1.zw,h.w);
 93 |                 
 94 |                 //Normalise gradients
 95 |                 vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
 96 |                 p0*=norm.x;
 97 |                 p1*=norm.y;
 98 |                 p2*=norm.z;
 99 |                 p3*=norm.w;
100 |                 
101 |                 // Mix final noise value
102 |                 vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
103 |                 m=m*m;
104 |                 return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),
105 |                 dot(p2,x2),dot(p3,x3)));
106 |             }
107 |             
108 |             float fbm(vec3 p,float progress){
109 |                 float value=0.;
110 |                 float amplitude=1.;
111 |                 float frequency=1.;
112 |                 float lacunarity=2.;
113 |                 float persistance=.5;
114 |                 // float scale=1.;
115 |                 // float scale=600.;
116 |                 float scale=mix(0.,600.,progress);
117 |                 int octaves=10;
118 |                 
119 |                 for(int i=0;i<octaves;i++){
120 |                     float noiseVal=snoise(p*frequency*scale);
121 |                     
122 |                     value+=amplitude*noiseVal;
123 |                     frequency*=lacunarity;
124 |                     amplitude*=persistance;
125 |                 }
126 |                 
127 |                 return value;
128 |             }
129 |             
130 |             vec4 getFromColor(vec2 uv){
131 |                 return texture(iChannel0,uv);
132 |             }
133 |             
134 |             float remap(float a,float b,float c,float d,float t)
135 |             {
136 |                 return clamp((t-a)/(b-a),0.,1.)*(d-c)+c;
137 |             }
138 |             
139 |             vec4 transition(vec2 uv){
140 |                 // float progress=iMouse.x/iResolution.x;
141 |                 float progress=abs(sin(iTime*.5));
142 |                 
143 |                 float ratio=iResolution.x/iResolution.y;
144 |                 
145 |                 vec2 p=uv;
146 |                 p-=.5;
147 |                 p.x*=ratio;
148 |                 float noise=fbm(vec3(p,0.),progress);
149 |                 noise=remap(-1.,1.,0.,1.,noise);
150 |                 float pr=smoothstep(progress-.01,progress,noise);
151 |                 pr*=step(.1,1.-progress);
152 |                 
153 |                 return mix(
154 |                     getFromColor(uv),
155 |                     vec4(0.),
156 |                     pr
157 |                 );
158 |             }
159 |             
160 |             void mainImage(out vec4 fragColor,in vec2 fragCoord){
161 |                 vec2 uv=fragCoord/iResolution.xy;
162 |                 
163 |                 vec4 col=transition(uv);
164 |                 
165 |                 fragColor=col;
166 |             }
167 |             


--------------------------------------------------------------------------------
/glsl/6-random/fbm-dissolve.glsl:
--------------------------------------------------------------------------------
  1 | #iChannel0"https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg"
  2 | #iChannel1"https://s2.loli.net/2023/09/10/Jb8mIhZMBElPiuC.jpg"
  3 | 
  4 | //
  5 | // Description : Array and textureless GLSL 2D/3D/4D simplex
  6 | //               noise functions.
  7 | //      Author : Ian McEwan, Ashima Arts.
  8 | //  Maintainer : ijm
  9 | //     Lastmod : 20110822 (ijm)
 10 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
 11 | //               Distributed under the MIT License. See LICENSE file.
 12 | //               https://github.com/ashima/webgl-noise
 13 | //
 14 | 
 15 | vec3 mod289(vec3 x){
 16 |     return x-floor(x*(1./289.))*289.;
 17 | }
 18 | 
 19 | vec4 mod289(vec4 x){
 20 |     return x-floor(x*(1./289.))*289.;
 21 | }
 22 | 
 23 | vec4 permute(vec4 x){
 24 |     return mod289(((x*34.)+1.)*x);
 25 | }
 26 | 
 27 | vec4 taylorInvSqrt(vec4 r)
 28 | {
 29 |     return 1.79284291400159-.85373472095314*r;
 30 | }
 31 | 
 32 | float snoise(vec3 v)
 33 | {
 34 |     const vec2 C=vec2(1./6.,1./3.);
 35 |     const vec4 D=vec4(0.,.5,1.,2.);
 36 |     
 37 |     // First corner
 38 |     vec3 i=floor(v+dot(v,C.yyy));
 39 |     vec3 x0=v-i+dot(i,C.xxx);
 40 |     
 41 |     // Other corners
 42 |     vec3 g=step(x0.yzx,x0.xyz);
 43 |     vec3 l=1.-g;
 44 |     vec3 i1=min(g.xyz,l.zxy);
 45 |     vec3 i2=max(g.xyz,l.zxy);
 46 |     
 47 |     //   x0 = x0 - 0.0 + 0.0 * C.xxx;
 48 |     //   x1 = x0 - i1  + 1.0 * C.xxx;
 49 |     //   x2 = x0 - i2  + 2.0 * C.xxx;
 50 |     //   x3 = x0 - 1.0 + 3.0 * C.xxx;
 51 |     vec3 x1=x0-i1+C.xxx;
 52 |     vec3 x2=x0-i2+C.yyy;// 2.0*C.x = 1/3 = C.y
 53 |     vec3 x3=x0-D.yyy;// -1.0+3.0*C.x = -0.5 = -D.y
 54 |     
 55 |     // Permutations
 56 |     i=mod289(i);
 57 |     vec4 p=permute(permute(permute(
 58 |                 i.z+vec4(0.,i1.z,i2.z,1.))
 59 |                 +i.y+vec4(0.,i1.y,i2.y,1.))
 60 |                 +i.x+vec4(0.,i1.x,i2.x,1.));
 61 |                 
 62 |                 // Gradients: 7x7 points over a square, mapped onto an octahedron.
 63 |                 // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
 64 |                 float n_=.142857142857;// 1.0/7.0
 65 |                 vec3 ns=n_*D.wyz-D.xzx;
 66 |                 
 67 |                 vec4 j=p-49.*floor(p*ns.z*ns.z);//  mod(p,7*7)
 68 |                 
 69 |                 vec4 x_=floor(j*ns.z);
 70 |                 vec4 y_=floor(j-7.*x_);// mod(j,N)
 71 |                 
 72 |                 vec4 x=x_*ns.x+ns.yyyy;
 73 |                 vec4 y=y_*ns.x+ns.yyyy;
 74 |                 vec4 h=1.-abs(x)-abs(y);
 75 |                 
 76 |                 vec4 b0=vec4(x.xy,y.xy);
 77 |                 vec4 b1=vec4(x.zw,y.zw);
 78 |                 
 79 |                 //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
 80 |                 //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
 81 |                 vec4 s0=floor(b0)*2.+1.;
 82 |                 vec4 s1=floor(b1)*2.+1.;
 83 |                 vec4 sh=-step(h,vec4(0.));
 84 |                 
 85 |                 vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
 86 |                 vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
 87 |                 
 88 |                 vec3 p0=vec3(a0.xy,h.x);
 89 |                 vec3 p1=vec3(a0.zw,h.y);
 90 |                 vec3 p2=vec3(a1.xy,h.z);
 91 |                 vec3 p3=vec3(a1.zw,h.w);
 92 |                 
 93 |                 //Normalise gradients
 94 |                 vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
 95 |                 p0*=norm.x;
 96 |                 p1*=norm.y;
 97 |                 p2*=norm.z;
 98 |                 p3*=norm.w;
 99 |                 
100 |                 // Mix final noise value
101 |                 vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
102 |                 m=m*m;
103 |                 return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),
104 |                 dot(p2,x2),dot(p3,x3)));
105 |             }
106 |             
107 |             float fbm(vec3 p){
108 |                 float value=0.;
109 |                 float amplitude=1.;
110 |                 float frequency=1.;
111 |                 float lacunarity=2.;
112 |                 float persistance=.5;
113 |                 float scale=1.;
114 |                 int octaves=2;
115 |                 
116 |                 for(int i=0;i<octaves;i++){
117 |                     float noiseVal=snoise(p*frequency*scale);
118 |                     
119 |                     value+=amplitude*noiseVal;
120 |                     frequency*=lacunarity;
121 |                     amplitude*=persistance;
122 |                 }
123 |                 
124 |                 return value;
125 |             }
126 |             
127 |             float remap(float a,float b,float c,float d,float t)
128 |             {
129 |                 return clamp((t-a)/(b-a),0.,1.)*(d-c)+c;
130 |             }
131 |             
132 |             vec4 getFromColor(vec2 uv){
133 |                 return texture(iChannel0,uv);
134 |             }
135 |             
136 |             vec4 getToColor(vec2 uv){
137 |                 return texture(iChannel1,uv);
138 |             }
139 |             
140 |             vec4 dissolve(vec2 uv){
141 |                 float progress=iMouse.x/iResolution.x;
142 |                 float ratio=iResolution.x/iResolution.y;
143 |                 
144 |                 vec4 col=getFromColor(uv);
145 |                 vec4 col1=getToColor(uv);
146 |                 
147 |                 vec2 p=uv;
148 |                 p-=.5;
149 |                 p.x*=ratio;
150 |                 float noise=fbm(vec3(p,0.));
151 |                 // noise=(noise*.5)+.5;
152 |                 noise=remap(-1.,1.,0.,1.,noise);
153 |                 
154 |                 float edgeWidth=.1;
155 |                 vec3 edgeColor=vec3(.835,.694,.051);
156 |                 float edge=1.-smoothstep(0.,edgeWidth,noise-progress);
157 |                 // col.rgb=vec3(edge);
158 |                 col.rgb=mix(col.rgb,edgeColor,edge*step(.0001,progress));
159 |                 
160 |                 float pr=smoothstep(progress-.01,progress,noise);
161 |                 col.rgb=mix(col.rgb,col1.rgb,1.-pr);
162 |                 
163 |                 return col;
164 |             }
165 |             
166 |             void mainImage(out vec4 fragColor,in vec2 fragCoord){
167 |                 vec2 uv=fragCoord/iResolution.xy;
168 |                 
169 |                 vec4 col=dissolve(uv);
170 |                 
171 |                 fragColor=col;
172 |             }
173 |             


--------------------------------------------------------------------------------
/html/8-vertex/vertex-shader-attribute.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <div id="sketch"></div>
  8 | <script src="https://unpkg.com/kokomi.js@1.9.78/build/kokomi.umd.js"></script>
  9 | <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>
 10 | <script>
 11 |     class Sketch extends kokomi.Base {
 12 |         create() {
 13 |             this.camera.position.set(0, 0, 1);
 14 |             new kokomi.OrbitControls(this);
 15 | 
 16 |             const geometry = new THREE.BufferGeometry();
 17 |             const count = 250;
 18 |             let positions = Array.from({ length: count }, () =>
 19 |                 [2, 2, 2].map(THREE.MathUtils.randFloatSpread)
 20 |             );
 21 |             positions = positions.flat();
 22 |             positions = Float32Array.from(positions);
 23 |             console.log(positions);
 24 |             geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
 25 | 
 26 |             // const geometry = new THREE.SphereGeometry(2, 64, 64);
 27 |             // const geometry = new THREE.PlaneGeometry(4, 4);
 28 |             const material = new THREE.ShaderMaterial({
 29 |                 vertexShader: /* glsl */ `
 30 | uniform float iTime;
 31 | uniform vec3 iResolution;
 32 | uniform vec4 iMouse;
 33 | 
 34 | varying vec2 vUv;
 35 | 
 36 | uniform float uPixelRatio;
 37 | 
 38 | //
 39 | // GLSL textureless classic 3D noise "cnoise",
 40 | // with an RSL-style periodic variant "pnoise".
 41 | // Author:  Stefan Gustavson (stefan.gustavson@liu.se)
 42 | // Version: 2011-10-11
 43 | //
 44 | // Many thanks to Ian McEwan of Ashima Arts for the
 45 | // ideas for permutation and gradient selection.
 46 | //
 47 | // Copyright (c) 2011 Stefan Gustavson. All rights reserved.
 48 | // Distributed under the MIT license. See LICENSE file.
 49 | // https://github.com/ashima/webgl-noise
 50 | //
 51 | 
 52 | vec3 mod289(vec3 x)
 53 | {
 54 |     return x-floor(x*(1./289.))*289.;
 55 | }
 56 | 
 57 | vec4 mod289(vec4 x)
 58 | {
 59 |     return x-floor(x*(1./289.))*289.;
 60 | }
 61 | 
 62 | vec4 permute(vec4 x)
 63 | {
 64 |     return mod289(((x*34.)+1.)*x);
 65 | }
 66 | 
 67 | vec4 taylorInvSqrt(vec4 r)
 68 | {
 69 |     return 1.79284291400159-.85373472095314*r;
 70 | }
 71 | 
 72 | vec3 fade(vec3 t){
 73 |     return t*t*t*(t*(t*6.-15.)+10.);
 74 | }
 75 | 
 76 | // Classic Perlin noise
 77 | float cnoise(vec3 P)
 78 | {
 79 |     vec3 Pi0=floor(P);// Integer part for indexing
 80 |     vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
 81 |     Pi0=mod289(Pi0);
 82 |     Pi1=mod289(Pi1);
 83 |     vec3 Pf0=fract(P);// Fractional part for interpolation
 84 |     vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
 85 |     vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
 86 |     vec4 iy=vec4(Pi0.yy,Pi1.yy);
 87 |     vec4 iz0=Pi0.zzzz;
 88 |     vec4 iz1=Pi1.zzzz;
 89 |     
 90 |     vec4 ixy=permute(permute(ix)+iy);
 91 |     vec4 ixy0=permute(ixy+iz0);
 92 |     vec4 ixy1=permute(ixy+iz1);
 93 |     
 94 |     vec4 gx0=ixy0*(1./7.);
 95 |     vec4 gy0=fract(floor(gx0)*(1./7.))-.5;
 96 |     gx0=fract(gx0);
 97 |     vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
 98 |     vec4 sz0=step(gz0,vec4(0.));
 99 |     gx0-=sz0*(step(0.,gx0)-.5);
100 |     gy0-=sz0*(step(0.,gy0)-.5);
101 |     
102 |     vec4 gx1=ixy1*(1./7.);
103 |     vec4 gy1=fract(floor(gx1)*(1./7.))-.5;
104 |     gx1=fract(gx1);
105 |     vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
106 |     vec4 sz1=step(gz1,vec4(0.));
107 |     gx1-=sz1*(step(0.,gx1)-.5);
108 |     gy1-=sz1*(step(0.,gy1)-.5);
109 |     
110 |     vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
111 |     vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
112 |     vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
113 |     vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
114 |     vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
115 |     vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
116 |     vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
117 |     vec3 g111=vec3(gx1.w,gy1.w,gz1.w);
118 |     
119 |     vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
120 |     g000*=norm0.x;
121 |     g010*=norm0.y;
122 |     g100*=norm0.z;
123 |     g110*=norm0.w;
124 |     vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
125 |     g001*=norm1.x;
126 |     g011*=norm1.y;
127 |     g101*=norm1.z;
128 |     g111*=norm1.w;
129 |     
130 |     float n000=dot(g000,Pf0);
131 |     float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
132 |     float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
133 |     float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
134 |     float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
135 |     float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
136 |     float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
137 |     float n111=dot(g111,Pf1);
138 |     
139 |     vec3 fade_xyz=fade(Pf0);
140 |     vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
141 |     vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
142 |     float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
143 |     return 2.2*n_xyz;
144 | }
145 | 
146 | vec3 distort(vec3 p){
147 |     float speed=.1;
148 |     float noise=cnoise(p)*.5;
149 |     p.x+=cos(iTime*speed+p.x*noise*100.)*.2;
150 |     p.y+=sin(iTime*speed+p.x*noise*100.)*.2;
151 |     p.z+=cos(iTime*speed+p.x*noise*100.)*.2;
152 |     return p;
153 | }
154 | 
155 | void main(){
156 |     vec3 p=position;
157 |     p=distort(p);
158 |     gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
159 |     
160 |     gl_PointSize=50.*uPixelRatio;
161 |     vec4 mvPosition=modelViewMatrix*vec4(p,1.);
162 |     gl_PointSize*=(1./-mvPosition.z);
163 |     
164 |     vUv=uv;
165 | }
166 |   `,
167 |                 fragmentShader: /* glsl */ `
168 | uniform float iTime;
169 | uniform vec3 iResolution;
170 | uniform vec4 iMouse;
171 | 
172 | varying vec2 vUv;
173 | 
174 | void main(){
175 |     vec2 uv=gl_PointCoord;
176 |     uv=(uv-.5)*2.;
177 |     
178 |     float d=length(uv);
179 |     float c=.05/d;
180 |     c=pow(c,2.);
181 |     gl_FragColor=vec4(vec3(1.),c);
182 | }
183 |   `,
184 |                 transparent: true,
185 |                 blending: THREE.AdditiveBlending,
186 |                 depthWrite: false,
187 |                 uniforms: {
188 |                     uPixelRatio: {
189 |                         value: this.renderer.getPixelRatio()
190 |                     }
191 |                 }
192 |             });
193 |             const points = new THREE.Points(geometry, material);
194 |             this.scene.add(points);
195 | 
196 |             const uj = new kokomi.UniformInjector(this);
197 |             material.uniforms = {
198 |                 ...material.uniforms,
199 |                 ...uj.shadertoyUniforms,
200 |             };
201 |             this.update(() => {
202 |                 uj.injectShadertoyUniforms(material.uniforms);
203 |             });
204 |         }
205 |     }
206 | 
207 |     const sketch = new Sketch("#sketch");
208 |     sketch.create();
209 | </script>


--------------------------------------------------------------------------------
/html/6-random/fbm-dissolve.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         margin: 0;
  4 |         background: black;
  5 |     }
  6 | </style>
  7 | <shader-toy>
  8 |     <img src="https://s2.loli.net/2023/09/10/QozT59R6KsYmb3q.jpg" name="iChannel0" hidden />
  9 |     <img src="https://s2.loli.net/2023/09/10/Jb8mIhZMBElPiuC.jpg" name="iChannel1" hidden />
 10 |     <script type="frag"></script>
 11 | </shader-toy>
 12 | <script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
 13 | <script>
 14 |     document.querySelector('[type=frag]').textContent = /* glsl */`
 15 | //
 16 | // Description : Array and textureless GLSL 2D/3D/4D simplex
 17 | //               noise functions.
 18 | //      Author : Ian McEwan, Ashima Arts.
 19 | //  Maintainer : ijm
 20 | //     Lastmod : 20110822 (ijm)
 21 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
 22 | //               Distributed under the MIT License. See LICENSE file.
 23 | //               https://github.com/ashima/webgl-noise
 24 | //
 25 | 
 26 | vec3 mod289(vec3 x){
 27 |     return x-floor(x*(1./289.))*289.;
 28 | }
 29 | 
 30 | vec4 mod289(vec4 x){
 31 |     return x-floor(x*(1./289.))*289.;
 32 | }
 33 | 
 34 | vec4 permute(vec4 x){
 35 |     return mod289(((x*34.)+1.)*x);
 36 | }
 37 | 
 38 | vec4 taylorInvSqrt(vec4 r)
 39 | {
 40 |     return 1.79284291400159-.85373472095314*r;
 41 | }
 42 | 
 43 | float snoise(vec3 v)
 44 | {
 45 |     const vec2 C=vec2(1./6.,1./3.);
 46 |     const vec4 D=vec4(0.,.5,1.,2.);
 47 |     
 48 |     // First corner
 49 |     vec3 i=floor(v+dot(v,C.yyy));
 50 |     vec3 x0=v-i+dot(i,C.xxx);
 51 |     
 52 |     // Other corners
 53 |     vec3 g=step(x0.yzx,x0.xyz);
 54 |     vec3 l=1.-g;
 55 |     vec3 i1=min(g.xyz,l.zxy);
 56 |     vec3 i2=max(g.xyz,l.zxy);
 57 |     
 58 |     //   x0 = x0 - 0.0 + 0.0 * C.xxx;
 59 |     //   x1 = x0 - i1  + 1.0 * C.xxx;
 60 |     //   x2 = x0 - i2  + 2.0 * C.xxx;
 61 |     //   x3 = x0 - 1.0 + 3.0 * C.xxx;
 62 |     vec3 x1=x0-i1+C.xxx;
 63 |     vec3 x2=x0-i2+C.yyy;// 2.0*C.x = 1/3 = C.y
 64 |     vec3 x3=x0-D.yyy;// -1.0+3.0*C.x = -0.5 = -D.y
 65 |     
 66 |     // Permutations
 67 |     i=mod289(i);
 68 |     vec4 p=permute(permute(permute(
 69 |                 i.z+vec4(0.,i1.z,i2.z,1.))
 70 |                 +i.y+vec4(0.,i1.y,i2.y,1.))
 71 |                 +i.x+vec4(0.,i1.x,i2.x,1.));
 72 |                 
 73 |                 // Gradients: 7x7 points over a square, mapped onto an octahedron.
 74 |                 // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
 75 |                 float n_=.142857142857;// 1.0/7.0
 76 |                 vec3 ns=n_*D.wyz-D.xzx;
 77 |                 
 78 |                 vec4 j=p-49.*floor(p*ns.z*ns.z);//  mod(p,7*7)
 79 |                 
 80 |                 vec4 x_=floor(j*ns.z);
 81 |                 vec4 y_=floor(j-7.*x_);// mod(j,N)
 82 |                 
 83 |                 vec4 x=x_*ns.x+ns.yyyy;
 84 |                 vec4 y=y_*ns.x+ns.yyyy;
 85 |                 vec4 h=1.-abs(x)-abs(y);
 86 |                 
 87 |                 vec4 b0=vec4(x.xy,y.xy);
 88 |                 vec4 b1=vec4(x.zw,y.zw);
 89 |                 
 90 |                 //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
 91 |                 //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
 92 |                 vec4 s0=floor(b0)*2.+1.;
 93 |                 vec4 s1=floor(b1)*2.+1.;
 94 |                 vec4 sh=-step(h,vec4(0.));
 95 |                 
 96 |                 vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
 97 |                 vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
 98 |                 
 99 |                 vec3 p0=vec3(a0.xy,h.x);
100 |                 vec3 p1=vec3(a0.zw,h.y);
101 |                 vec3 p2=vec3(a1.xy,h.z);
102 |                 vec3 p3=vec3(a1.zw,h.w);
103 |                 
104 |                 //Normalise gradients
105 |                 vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
106 |                 p0*=norm.x;
107 |                 p1*=norm.y;
108 |                 p2*=norm.z;
109 |                 p3*=norm.w;
110 |                 
111 |                 // Mix final noise value
112 |                 vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);
113 |                 m=m*m;
114 |                 return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),
115 |                 dot(p2,x2),dot(p3,x3)));
116 |             }
117 |             
118 |             float fbm(vec3 p){
119 |                 float value=0.;
120 |                 float amplitude=1.;
121 |                 float frequency=1.;
122 |                 float lacunarity=2.;
123 |                 float persistance=.5;
124 |                 float scale=1.;
125 |                 int octaves=2;
126 |                 
127 |                 for(int i=0;i<octaves;i++){
128 |                     float noiseVal=snoise(p*frequency*scale);
129 |                     
130 |                     value+=amplitude*noiseVal;
131 |                     frequency*=lacunarity;
132 |                     amplitude*=persistance;
133 |                 }
134 |                 
135 |                 return value;
136 |             }
137 |             
138 |             float remap(float a,float b,float c,float d,float t)
139 |             {
140 |                 return clamp((t-a)/(b-a),0.,1.)*(d-c)+c;
141 |             }
142 |             
143 |             vec4 getFromColor(vec2 uv){
144 |                 return texture(iChannel0,uv);
145 |             }
146 |             
147 |             vec4 getToColor(vec2 uv){
148 |                 return texture(iChannel1,uv);
149 |             }
150 |             
151 |             vec4 dissolve(vec2 uv){
152 |                 float progress=iMouse.x/iResolution.x;
153 |                 float ratio=iResolution.x/iResolution.y;
154 |                 
155 |                 vec4 col=getFromColor(uv);
156 |                 vec4 col1=getToColor(uv);
157 |                 
158 |                 vec2 p=uv;
159 |                 p-=.5;
160 |                 p.x*=ratio;
161 |                 float noise=fbm(vec3(p,0.));
162 |                 // noise=(noise*.5)+.5;
163 |                 noise=remap(-1.,1.,0.,1.,noise);
164 |                 
165 |                 float edgeWidth=.1;
166 |                 vec3 edgeColor=vec3(.835,.694,.051);
167 |                 float edge=1.-smoothstep(0.,edgeWidth,noise-progress);
168 |                 // col.rgb=vec3(edge);
169 |                 col.rgb=mix(col.rgb,edgeColor,edge*step(.0001,progress));
170 |                 
171 |                 float pr=smoothstep(progress-.01,progress,noise);
172 |                 col.rgb=mix(col.rgb,col1.rgb,1.-pr);
173 |                 
174 |                 return col;
175 |             }
176 |             
177 |             void mainImage(out vec4 fragColor,in vec2 fragCoord){
178 |                 vec2 uv=fragCoord/iResolution.xy;
179 |                 
180 |                 vec4 col=dissolve(uv);
181 |                 
182 |                 fragColor=col;
183 |             }
184 | 
185 |     `;
186 |     kokomi.ShaderToyElement.register();
187 | </script>


--------------------------------------------------------------------------------