Some remarks about transferring the shaders from The Book of Shaders to Godot

Question

Perhaps this is a very naive view and quite obvious things for gurus in programming. But for a beginner it may cause difficulties.

Let's take the "Rotations" code from The Book of Shaders and try to put it into Godot 3.5.

// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;
uniform float u_time;

mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}

float box(in vec2 _st, in vec2 _size){
    _size = vec2(0.5) - _size*0.5;
    vec2 uv = smoothstep(_size,
                        _size+vec2(0.001),
                        _st);
    uv *= smoothstep(_size,
                    _size+vec2(0.001),
                    vec2(1.0)-_st);
    return uv.x*uv.y;
}

float cross(in vec2 _st, float _size){
    return  box(_st, vec2(_size,_size/4.)) +
            box(_st, vec2(_size/4.,_size));
}

void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);

    // move space from the center to the vec2(0.0)
    st -= vec2(0.5);
    // rotate the space
    st = rotate2d( sin(u_time)*PI ) * st;
    // move it back to the original place
    st += vec2(0.5);

    // Show the coordinates of the space on the background
    // color = vec3(st.x,st.y,0.0);

    // Add the shape on the foreground
    color += vec3(cross(st,0.4));

    gl_FragColor = vec4(color,1.0);
}

Of course, using the hints from the official documentation.

Oops… code doesn't work.

What's the problem? There are a few of them.

0. The line is needed:

   #define PI 3.14159265359

   convert to

   uniform float PI = 3.14159265359;

   but this is simple enough.

1. matrix representation

   return mat2(cos(_angle),-sin(_angle),
   		sin(_angle),cos(_angle));

   should be changed according to the rules of matrix representation in Godot:

   return mat2(vec2(cos(_angle),-sin(_angle)),
   		vec2(sin(_angle),cos(_angle)));

2. "cross" - must be renamed.

Here is a working shader:

shader_type canvas_item;


uniform float PI = 3.14159265359;


mat2 rotate2d(float _angle){
	return mat2(vec2(cos(_angle),-sin(_angle)),
				vec2(sin(_angle),cos(_angle)));
}

float box(in vec2 _st, in vec2 _size){
	_size = vec2(0.5) - _size*0.5;
	vec2 uv = smoothstep(_size,
						_size+vec2(0.001),
						_st);
	uv *= smoothstep(_size,
					_size+vec2(0.001),
					vec2(1.0)-_st);
	return uv.x*uv.y;
}

float crosst(in vec2 _st, float _size){
	return  box(_st, vec2(_size,_size/4.)) +
			box(_st, vec2(_size/4.,_size));
}

void fragment(){
	vec2 st = FRAGCOORD.xy/(1.0 / SCREEN_PIXEL_SIZE).xy;
	vec3 color = vec3(0.0);

	// move space from the center to the vec2(0.0)
	st -= vec2(0.5);
	// rotate the space
	st = rotate2d( sin(TIME)*PI ) * st;
	// move it back to the original place
	st += vec2(0.5);

    // Show the coordinates of the space on the background
// 	color = vec3(st.x,st.y,0.0);

	// Add the shape on the foreground
	color += vec3(crosst(st,0.4));

	COLOR = vec4(color,1.0);
}

And in the example next "Other uses for matrices: YUV color", by analogy should be replaced:

// YUV to RGB matrix
mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
                    1.0, -0.39465, -0.58060,
                    1.0, 2.03211, 0.0);

at:

// YUV to RGB matrix
uniform mat3 yuv2rgb = mat3(vec3(1.0, 0.0, 1.13983),
							vec3(1.0, -0.39465, -0.58060),
							vec3(1.0, 2.03211, 0.0));

Ambiguous