Use Godot to make cool WebAssembly shader banner at your's website, impress your future boss ie. GET THE JOB!!! Part1

OH Hey there. Consider this cool shader by Airvikar
 landscape sunset:
Now wan't that your's website, follow around and see some hints:
Consider this enchanted shader code version from that Airvikars work, this go easy with godot3's shader language:

shader_type canvas_item;


uniform float one = 1.0;

void vertex(){}

void fragment(){
 float time = TIME; vec2 p= (UV*vec2(2.0,1.5)-vec2(1));
 p+=vec2(1.4*cos(time/-4.0),sin(time/-4.0)-0.1);
 float l=0.05/length(p); vec3 sun=vec3(1.0,0.5,1.0);
 vec3 sky =mix(vec3(0.03,0.2,0.4),vec3(0.3,0.6,1.0),(p.y));
 //===================
 vec2 pos = vec2(UV.x,one-UV.y)+vec2(0.05);//vec2 ? one
 float top= 0.27; top+=sin(pos.x * 1.25 * pow(2.0,0.0));
 top += sin(pos.x * 1.25 *pow(2.0,1.00))/pow(2.0,1.0);
 top += sin(pos.x * 1.25 *pow(2.0,2.0))/pow(2.0,2.0);
 top += sin(pos.x * 1.25 *pow(2.0,3.0))/pow(2.0,3.0);
 top += sin(pos.x * 1.25 *pow(2.0,4.0))/pow(2.0,4.0);
 top += sin(pos.x * 1.25 *pow(2.0,5.0))/pow(2.0,5.0);
 top += sin(pos.x * 1.25 *pow(2.0,6.0))/pow(2.0,6.0);
 top += sin(pos.x * 1.25 *pow(2.0,7.0))/pow(2.0,7.0);
 top = pow(abs(top-0.25)*0.4,3.333);
 top+=0.08;
 float skyline=step(pos.y-top,0.2)*step(0.05,pos.y);
vec3 mount=vec3(0.4, 0.25,0.2);
vec3 col=-skyline*mount; col +=mix(sky,sun,l);
//==
vec2 res = vec2(UV.x,one-UV.y)*10.0;
vec4 wcol= vec4(0.04,0.08,0.12,1.0); vec4 water=vec4(0.2,0.4,0.6, 1.0);
if(res.y*8.5 * 0.3*sin(4.8*time-res.x*8.0+3.0*sin(time))+14.0+sin(time)){water-=wcol;}
if(res.y*6.0 * 0.3*sin(3.8*time+res.x*6.0+2.8*sin(time))+9.5+sin(time)){water-=wcol;}
if(res.y*4.0 * 0.3*sin(2.8*time-res.x*4.0+2.2*sin(time))+5.5+sin(time)){water-=wcol;}
if(res.y*2.0 * 0.3*sin(1.8*time+res.x*2.0+1.8*sin(time))+2.0+sin(time)){water-=wcol;}
if(res.y * 0.3*sin(0.8*time-res.x+1.2*sin(time))+0.5+sin(time)){water-=wcol;}
 COLOR=vec4((col+water.rgb),1.0);
}

Now open a godot and make new project. Then.. follow this diagram:

It code is there down as copypaste format ↴ just drop that in

shader_type canvas_item; uniform float one = 1.0; void vertex(){} void fragment(){ float time = TIME; vec2 p= (UV*vec2(2.0,1.5)-vec2(1)); p+=vec2(1.4*cos(time/-4.0),sin(time/-4.0)-0.1); float l=0.05/length(p); vec3 sun=vec3(1.0,0.5,1.0); vec3 sky =mix(vec3(0.03,0.2,0.4),vec3(0.3,0.6,1.0),(p.y)); vec2 pos = vec2(UV.x,one-UV.y)+vec2(0.05); float top= 0.27; top+=sin(pos.x * 1.25 * pow(2.0,0.0)); top += sin(pos.x * 1.25 *pow(2.0,1.00))/pow(2.0,1.0); top += sin(pos.x * 1.25 *pow(2.0,2.0))/pow(2.0,2.0); top += sin(pos.x * 1.25 *pow(2.0,3.0))/pow(2.0,3.0); top += sin(pos.x * 1.25 *pow(2.0,4.0))/pow(2.0,4.0); top += sin(pos.x * 1.25 *pow(2.0,5.0))/pow(2.0,5.0); top += sin(pos.x * 1.25 *pow(2.0,6.0))/pow(2.0,6.0); top += sin(pos.x * 1.25 *pow(2.0,7.0))/pow(2.0,7.0); top = pow(abs(top-0.25)*0.4,3.333); top+=0.08; float skyline=step(pos.y-top,0.2)*step(0.05,pos.y); vec3 mount=vec3(0.4, 0.25,0.2); vec3 col=-skyline*mount; col +=mix(sky,sun,l); vec2 res = vec2(UV.x,one-UV.y)*10.0; vec4 wcol= vec4(0.04,0.08,0.12,1.0); vec4 water=vec4(0.2,0.4,0.6, 1.0); if(res.y*8.5 < 0.3*sin(4.8*time-res.x*8.0+3.0*sin(time))+14.0+sin(time)){water-=wcol;} if(res.y*6.0 < 0.3*sin(3.8*time+res.x*6.0+2.8*sin(time))+9.5+sin(time)){water-=wcol;} if(res.y*4.0 < 0.3*sin(2.8*time-res.x*4.0+2.2*sin(time))+5.5+sin(time)){water-=wcol;} if(res.y*2.0 < 0.3*sin(1.8*time+res.x*2.0+1.8*sin(time))+2.0+sin(time)){water-=wcol;} if(res.y < 0.3*sin(0.8*time-res.x+1.2*sin(time))+0.5+sin(time)){water-=wcol;} COLOR=vec4((col+water.rgb),1.0); }

Now it is important use float when float is needed 1 is int but, 1.0 is float. This might cause a problems.Now when the code is right, landscape should magically appear. It should look like this:

Next time about exporting.