GLES 2.0 2D Fragment Shader Tutorial Series in a Single Godot Project from Beginner to Advanced

Fragment Shader Tutorial Series (2D) in a Single Godot Project (GLES 2.0) based on GLSL 2D Tutorials Code by Ugur Guney in Shadertoy. 

Hi Every One,

This is a converted and interpreted set of shaders compatible Godot Shader Language (GLES 2.0) in One Godot Project. Thanks to Uğur Güney’s efforts from 2014 to 2020 (https://www.shadertoy.com/view/Md23DV). It is said it was popular in GLSL Sandbox for while.

It is a template for an organised study medium as my own self-tutorial and for the next ones.

Note: “Book of Shaders in One Godot Project” is in preparatory stage. Website sections completed. Image Processing” section in PDF remainded only.

Link to Full Project in Github: https://github.com/Volkovina/GLES-2.0-2D-Fragment-Shader-Tutorial-Series-in-Godot-Beginner-to-Advanced

Godot Version: 3.4.4 Standard (not tested older ones. there is no specific implementation to create problem.)

Shader: GLES 2.0 (Working in GLES 3.0 too)

What has been done and not done

• a Pure Black 200 x 113 pixels PNG created as a texture base for shaded sprites not to use scaling in Godot.
• textures in sprites flipped vertically, because y axis positive direction from top to bottom in Godot, unlike in Shadertoy except “27 MOUSE INPUT”.
• one Shadertoy file divided into 29 shader resources file in one folder, because “option structure” such as below cannot be trackable for a long text in Godot Shader easily.
  • #define TUTORIAL 0
  • #if TUTORIAL == 0
  • ………
  • #endif
• all #define terms converted into const …
• uniform vec2 iResolution = vec2(200.0, 113.0); defined and declared in each shader resource
• fragCoord converted into UV equivalent.
• iTime converted into TIME.
• nested ternaries changed if / else if structure, because Godot GLES 2.0 does not support nested one.
• mat2(x ,y ,z ,w ) structure changed to mat2(vec2(x , y), vec2(z ,w )) structure, otherwise Godot GLES 2.0 does not support.
• in GLES 2.0, both global and local variables definition with same name is not supported. So, they all changed accordingly.
• fragColor converted into COLOR.
• similar 3 Textures found and implemented instead of 3 iChannel Textures.
• different mouse interaction structure organised within GdScript (imouse.gd) to compare iMouse(vec4) in Shadertoy. It can be examined.
• some lines from Shadertoy kept as commented for logic comparison.
• System structured as shown pictures below.
• “esc”, “Q” keys, “mouse left click” and “mouse move” intervene in run window.
• main imperfection is not to transport shader codes into run screen as a pair with the result shaded tile. You can check that easily in editor via folders.

TUTORIAL LIST

• 0 COVER – GLSL
• 1 VOID. BLANK SCREEN.
• 2 SOLID COLOR
• 3 GLSL VECTORS
• 4 RGB COLOR MODEL AND COMPONENTS OF VECTORS
• 5 THE COORDINATE SYSTEM
• 6 RESOLUTION, THE FRAME SIZE
• 7 COORDINATE TRANSFORMATION
• 8 HORIZONTAL AND VERTICAL LINES
• 9 VISUALISING THE COORDINATE SYSTEM
• 10 MOVING THE COORDINATE CENTER TO THE CENTER OF THE FRAME
• 11 MAKING THE ASPECT RATIO OF THE COORDINATE SYSTEM 1.0
• 12 DISK
• 13 FUNCTIONS
• 14 BUILT-IN FUNCTIONS: STEP
• 15 BUILT-IN FUNCTIONS: CLAMP
• 16 BUILT-IN FUNCTIONS: SMOOTHSTEP
• 17 BUILT-IN FUNCTIONS: MIX
• 18 ANTI-ALIASING WITH SMOOTHSTEP
• 19 FUNCTION PLOTTING
• 20 COLOR ADDITION AND SUBSTRACTION
• 21 COORDINATE TRANSFORMATIONS: ROTATION
• 22 COORDINATE TRANSFORMATIONS: SCALING
• 23 SUCCESSIVE COORDINATE TRANSFORMATIONS
• 24 TIME, MOTION AND ANIMATION
• 25 PLASMA EFFECT
• 26 TEXTURES
• 27 MOUSE INPUT
• 28 RANDOMNESS

You can left click on the tile or on the MENU to expand the Tile on Screen and then press “esc” to back to Main Screen

License: not specified in shadertoy link. items are not suitable for commercial but mostly a path to learn and inspirable.

Shader code

/*
converted to Godot Project: https://github.com/Volkovina/GLES-2.0-2D-Fragment-Shader-Tutorial-Series-in-Godot-Beginner-to-Advanced
All usage explained in above github link.

original: https://www.shadertoy.com/view/Md23DV

Text below is in the Original Link.

by Uğur Güney. March 8, 2014 <----> June 10, 2020

Hi! I started learning GLSL a month ago. The speedup gained by using
GPU to draw real-time graphics amazed me. If you want to learn
how to write shaders, this tutorial written by a beginner can be
a starting place for you.

TUTORIAL LIST
 0 COVER - GLSL
 1 VOID. BLANK SCREEN.
 2 SOLID COLOR
 3 GLSL VECTORS
 4 RGB COLOR MODEL AND COMPONENTS OF VECTORS
 5 THE COORDINATE SYSTEM
 6 RESOLUTION, THE FRAME SIZE
 7 COORDINATE TRANSFORMATION
 8 HORIZONTAL AND VERTICAL LINES
 9 VISUALISING THE COORDINATE SYSTEM
10 MOVING THE COORDINATE CENTER TO THE CENTER OF THE FRAME
11 MAKING THE ASPECT RATIO OF THE COORDINATE SYSTEM 1.0
12 DISK
13 FUNCTIONS
14 BUILT-IN FUNCTIONS: STEP
15 BUILT-IN FUNCTIONS: CLAMP
16 BUILT-IN FUNCTIONS: SMOOTHSTEP
17 BUILT-IN FUNCTIONS: MIX
18 ANTI-ALIASING WITH SMOOTHSTEP
19 FUNCTION PLOTTING
20 COLOR ADDITION AND SUBSTRACTION
21 COORDINATE TRANSFORMATIONS: ROTATION
22 COORDINATE TRANSFORMATIONS: SCALING
23 SUCCESSIVE COORDINATE TRANSFORMATIONS
24 TIME, MOTION AND ANIMATION
25 PLASMA EFFECT
26 TEXTURES
27 MOUSE INPUT
28 RANDOMNESS
*/
shader_type canvas_item;

Tags