GLSL shader learning series 1-Hello World

This is the first article in the GLSL shader series. The learning objectives of this article are:

1. Install editing tools
2. Write hello world program

install plugin

I use VSCode to write shader code. There are two useful plug-ins on VSCode that need to be installed first:

1. Shader languages support for VS Code
   
2. glsl-canvas: mainly used to preview the effect of the shader in VSCode
   

2 Hello World!

Create a new helloworld.fragfile and write the following code in it:

#ifdef GL_ES
precision mediump float;
#endif

void main() {
    gl_FragColor=vec4(1.,0.,0.,1.0);
}

Then press it in VSCode , and you can see the preview effect on the screen after Ctrl+Shift+Pinputting , a full red picture. Show glslCanvasSo far, congratulations, you have completed the writing of the Hello world program, is it very simple? The following is an introduction to the code.

#ifdef GL_ES
precision mediump float;
#endif

In the first 3 lines, it is checked whether GL_ES is defined, which is usually defined under the mobile terminal or browser. The second line specifies that the precision of the floating-point number float is medium, and can also be specified as low precision or high precision. The lower the precision, lowpthe highpexecution The faster the speed, the lower the quality. You can even delete this code directly, and the program will still run normally.

void main() {
    gl_FragColor=vec4(1.,0.,0.,1.0);
}

This is the main code of the shader. main()You should know it when you see the function. This is also the entry point of the program. gl_FragColorAssign a value to the variable inside the function , gl_FragColorwhich is a built-in variable of GLSL, and use it to output the final color. vec4It is a data type, which stores RGB and transparency data respectively, and the value range is between 0 and 1. Note that the values ​​in vec4 are all floating point types .

3 further

The previous sample program is too simple, this time we make it more difficult, see the following code:

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    gl_FragColor=vec4(st.x,st.y,0.,1.0);
}

The execution result of this code is interesting, and this image appears on the screen:

What's going on here?

First, let’s look at uniform vec2 u_resolution;the input parameters that specify the shader’s acceptance: the type is vec2, u_resolutionwhich stores the width and height of the canvas.
Let me introduce again gl_FragCoord, this is the value defined in the fragment shader, which stores the coordinate sum of the fragment (pixel) point x, yso using these two values, you can know which position on the canvas the current shader is calculating.

Therefore st, the value stored in is equivalent to normalizing the abscissa and ordinate of the pixel point. The lower left corner is the origin of the Cartesian coordinate system, the coordinate of the lower right corner is , and the coordinate of the upper left corner is , so these three points (0, 0)are (1,0)related 0,1to The corresponding rgba values ​​are respectively rbga(0,0,0,0), (1,0,0,0)and (0,1,0,0), that is, corresponding to black, red and green, and the values ​​of the remaining pixels are intermediate values. At this point, do you understand the principle?

4 Take it to the next level

Next, play something more interesting:

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    gl_FragColor=vec4(st.x,st.y,sin(u_time),1.0);
}

uniform float u_timeIt is the incoming time, which can be continuously increased. This time we gl_FragColorchange the value of the blue channel in sin(u_time), so that as time changes, the value of the blue channel of each pixel will be between 0-1 Transform and animate the picture.