This is another step about learning shaders.
The old example can be updated with this source code.
I commented on the source code to see step by step how this working.
One way to understand how this working to the final result is to going back on the shader structures that generate output to the basic elements of the shader.
If we apply this case to solve the problem then from the display a color like a
vec4 color for
fragColor adding a
sin function to wave the result, and so on.
Right, this code can be optimized in many ways depending on the result.
// learning process area step by step
// the gl_FragColor is a vec4 type of float values in the range 0 to 1.
// because the values are from 0 to 1 this can used in many ways with for domain and range
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// define a vec2 and uv can be divide to create waves
// use this to see the difference
// vec2 valul = vec2(0.01,1.0);
vec2 valul = vec2(0.5,1.0);
// define a vec2 this vector will be the vector of shadow
vec2 unghi_valul = vec2(0.5,1.0);
// this float will speed the animation with iTime
float viteza = 3.0;
// with the dot we can calculate the dot product of two vectors and result can be a shadow
// the result of unghi can be changed when change the vectors and vectors math rules
float unghi = dot(uv/valul, unghi_valul) - iTime * viteza;
// the output can be used with sin to create a shadow wave
// fill the screen with red
fragColor = vec4(1,0,0,0) * sin(unghi);
// fill the 2/3 of size with yellow color
if(uv.x<(1.0/1.5))
fragColor = vec4(1,1,0,0) * sin(unghi);
// fill the last 1/3 with the blue color
if(uv.x<1.0/3.0)
fragColor = vec4(0,0,1,0) * sin(unghi);
}
The result of this source code:
Labels:
2020,
3D,
online,
online tool,
web,
web development,
website
