How hard is it to make a shader like this ?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By rpggeek

http://glslsandbox.com/e#62499.0

// Necip's experiments to simulate waves like in this video: https://www.youtube.com/watch?v=WDxMas784iY


#ifdef GL_ES
precision mediump float;
#endif

//#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

#define PI 3.14159265

void main( void ) {
	vec3 Bcol = vec3(0.4, 0.7, 0.9);
    
    vec2 uv = gl_FragCoord.xy/resolution.xy - 0.5;
	//vec2 coord = uv;//vec2(fragCoord/iResolution.xx) - vec2(0.5, 0.5 * iResolution.y / iResolution.x);
    
    vec3 col =vec3(0.1,0.1,0.1);//0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

    float color = 1.0; // length(coord) / 16. - 0.3 + (sin(iTime) / 4.0) ;
    //col += color;
    float off;
    for(float i=0.0; i < 1.0;i++) {
        off = i * 3.14 / 1.0 + 0.03 * i;
    	col+= Bcol *  0.1/((uv.x +0.1)-0.5 * abs(uv.y * 10.0 + sin(uv.x *10.0 + time + off) * 1.0));
    }    
    gl_FragColor = vec4(vec3(col.x),1.0);

}

It has a tons of math and its hard to understand when u look at the code.
İ’m wondering should I be a mathematician to make this kind of shaders ? Or is there a hidden magic behind it ?

Hi.
It’s a lot of time since your question was made. Years ago I pass the ame quetion and get the answer studying Godot docs about shades and parsing, transmuting and cloning shader from the same source you use. Now I’m returning and trying to make a parsing that automatice that job, parsing shades from GLS Sandbox to Godot by automation. It’s true that who make that shader have to learn and know about math, but if you wanna just parse to make that works in Godot, it’s just adaptaion from both shader languages from GLS to Godot Shader Languade, that is very near the original GLS. As the following codes:

GLSL: Just look to your original code

GODOT parsing:

    // Necip's experiments to simulate waves like in this video: https://www.youtube.com/watch?v=WDxMas784iY
//Aways in shader 2D we have to put next line
shader_type canvas_item;
//here I change unifor to varying type.
varying float time;
uniform vec2 mouse;
uniform vec2 resolution;

//#define PI 3.14159265
uniform float PI = 3.14159265;

//The main function is our fragment function
void fragment() {
	
	time = TIME;
	
    vec3 Bcol = vec3(0.4, 0.7, 0.9);

	//gl_fragcoord is FRAGCOORD in GODOT
	//Take off resolution.xy
    vec2 uv = UV.xy * 1.6;
    //vec2 coord = uv;//vec2(fragCoord/iResolution.xx) - vec2(0.5, 0.5 * iResolution.y / iResolution.x);

    vec3 col =vec3(0.1,0.1,0.1);//0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

    float color = 1.0; // length(coord) / 16. - 0.3 + (sin(iTime) / 4.0) ;
    //col += color;
    float off;
    for(float i=0.0; i < 1.0;i++) {
        off = i * 3.14 / 1.0 + 0.03 * i;
        col+= Bcol *  0.1/((uv.x +0.1)-0.5 * abs(uv.y * 10.0 + sin(uv.x *10.0 + time + off) * 1.0));
    }
	//gl_FragColor -> COLOR in GODOT    
    COLOR = vec4(vec3(col.x),1.0);

}

After that it just need some adjustments…:wink:
I hope I have helped.

Marcio Antonio Moare | 2023-02-17 03:33

:bust_in_silhouette: Reply From: omggomb

Disclaimer: I am a beginner at shader programming.

A nice resource to get started is The book of shaders (free).

Your example is probably by someone who is already experienced and hacked this together quickly. Notice how there is no reference to any formula or really anything. There are also no explanatory comments, and by the fact that a lot is commeted out you can tell that there probably was some trial and error involved.
Wavelike things start usually with cos or sin functions and build up on that.

What I learned is that there is no magic behind shader programming, but it is indeed much more maths than regular programming. The most difficult thing is switching your mind from the more intuitive “This pixel should have this color” to the “What color should the pixel at this postion have?” mindset. In the first statement you decide what goes where, but in shader programming this is already decided for you.

A final word on having to be a mathematician: Don’t buy into the myth that maths professors look at a formula and just “get it”. The key to understanding any sort of mathematical formula is knowing what each (greek) letter or symbol stands for and which numbers they usually could take. If the resource doesn’t explain that then you should look for another (better) one. The rest is just banging your head against the wall, meaning practice practice practice (a thing I wish I would have learned sooner).