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

I forgot last time mention you need like that :Screen on, it 2D.
Also like save some times:
This how save it shader:

See!!

Now it appears in, file system:

Look

Then save whole scene too Scene→Save Scene or [Control+S] at keys:

Good

Now! Let see what we have done click play button on right-up corner.

press that

Then:

Now it play it, you see it too small we need make it bigger, use mouse make it bigger those blue edges are like edges of a game or like now that shader.

Save this again now Control+S and test to play it.
*************************************************************************

Ok. Then about exporting finally. Before  read any further, check this video about the subject
https://www.youtube.com...Godot Beginner Tutorial: Export Game EXE (Build Executable) by qubodupDev
There info on some changes you need made your Godot before exporting I already done those, now continue we don't export to window as in the video but to html 5.

Do as in the video except press that HTML5 instead anything 

This not yet done...

By the way: did you know, that you can spend up YouTube video, lay that in double speed if too long, it extra speed give them speakers also more enthusiastic tone to them voice, say 1.25 good for that, especially that many those tutorial makers seem as speak normal speed as they were soon to be bored out of them lives. You can also slow down a video if it too jumpy.

So yes, first we need Project→Export or not like first but like after done that, what was in the video.
Then

click that

Now that we save space pick some good url where to save or like export it project so that you can then find it later.

You can send it bunch of times

Lets look now files that got export.

There your wasm file it derivation from WebAssemby

It is js, that run that wasm file, they crazy long files, like that js file over hundred paces long, it not bad because it is wasm. wasm I tell you! They files no names because us no give them names that -bad idea.

Here some lecture video about it WebAssembly

If you still wonder why it your shader HTML not work, it probably that you try run it whit out web server. Web browsers have all kind of safety measures like pictures and some other files not download if they are not in the web. You need like internal home private web server to test these.

Try this:

Just go and find one of those WAMP, XAMPP... and jump all they hoops until you get yours private net server working.

Yes this is the way.

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.