Workshop: GLSL (ES) Shaders

I have no clue about the paradigm and the math behind it. I am only able to play trial and error.

Can somebody show me the trick to understand it?

Especially I am interested to get something out of low-cost second-hand hardware that is considered obsolete, but can still be of use. I host a couple of Rasperry Pi 1 in the shelve to drive TVs with a selfmade Clinet/Server based Videoplayersystem directly. Even if the CPU is weak, they are well suited with their sensor inputs and with HDMI video too for creating an interactive visual instrument . And for exqample usually the unused smartphones in the drawer too have a capable GPU to run OpenGL ES shaders. Not everythig must go to the E-waste processing after a relatively short-life.

There is the https://thebookofshaders.com as a beginning and continuing. Even with an embedded online editor.

Wikipedia: https://en.wikipedia.org/wiki/OpenGL_Shading_Language

Khronos beholder of the standard: https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language

Things can be converted (sometimes) from https://www.shadertoy.com, if special variables aren’t used and if it’s not to far divided into levels. It has it’s own variable name standard, but available variable names can be “emulated” – substituted.

I found the following in an old project’s folder so don’t know if it is production and working or just is just looking imptressive. Let’s get on a level with chat GPT here. 😉

// Here the software GLSL-Viewer is used to play the GPU shader on a Raspberry PI directly on KMS level, so without desktop.

#extension GL_OES_standard_derivatives : enable
precision highp float;
 
uniform float u_time;
uniform vec2 u_mouse;
uniform vec2 u_resolution;
// This variable is fed into GLSL-Viewer through OSC. A python wrapper translates sensor inputs into OSC control messages.
uniform float touchdata5;

// this acts an emulation
#define time u_time
#define resolution u_resolution
#define touchdata touchdata5
 
 
void main( void ) {

	vec2 position = ( gl_FragCoord.xy / resolution.xy ) + sin(touchdata) / 4.0;

	float color = 0.0;
	color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );
	color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );
	color += sin( position.x * sin( time / 5.0 ) * 10.0 ) + sin( position.y * sin( time / 35.0 ) * 80.0 );
	color *= sin( time / 10.0 ) * touchdata;

	gl_FragColor = vec4( vec3( color, color * 0.9*touchdata, sin( color + time / 3.0 ) * 0.75 ), 1.0 );

}