Make writing a habit together! This is the 12th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

GLSL (Open Graphics Library Shading Language)

Short custom programs written by developers that are executed on the graphics card’s GPU (Graphics Processor Unit) instead of part of a fixed rendering pipeline

GLSL language hardware execution environment – graphics card

Here directly apply the encyclopedia for video card explanation.

Video card (Video card, Display card, Graphics card, Video Adapter) is one of the basic components of the personal computer, the computer system needs to convert the Display information to drive the Display, and to provide the Display line by line or interline scanning signal

GPU is the core of a graphics card.

The core technologies used by GPU include hardware T&L (geometry conversion and illumination processing), cubic environment material mapping and vertex mixing, texture compression and bump mapping, dual texture four-pixel 256-bit rendering engine, etc., while hardware T&L technology can be said to be the logo of GPU

Display memory is referred to as video memory, also known as frame cache, as the name implies, its main function is to temporarily store display chip processed or about to extract rendering data, similar to the motherboard’s memory, is one of the main performance indicators to measure the display card

Graphics cards provide apis for OpengL to call, and OpengL shields the API differences of different graphics cards. We only need to understand the OPengL API to develop 3D games.

Opengl encapsulates a rendering pipeline for us, while GLSL gives us control over the graphics card in the rendering pipeline process.

Here is the complete flow of the render pipeline:

Normally we only deal with the Vertex Shader part and FragmentShader part.

GLSL overview

The OpenGL Shading Language is actually two closely related languages. These languages are used to create shaders for the programmable processors contained in the OpenGL processing pipeline.

OpenGL shader languages are actually two closely related languages. These languages are used to create shaders for programmable processors in the OpenGL process pipeline.

GPU, graphics processing unit, which is subdivided into various sub-processing units, such as vertex processing unit, slice processing unit, texture mapping unit and so on. GLSL code strings are compiled by OpengL into bytecode (assembly language) instructions that can be executed by vertex processing units and chip processing units.

The pixel processing unit colors the rasterized data at the pixel level and can no longer manipulate vertex data.

That’s what the GLSL language does.

GLSL precompilation instructions

GLSL’s shader code is compiled dynamically at run time.

Here are all the pre-compiled instructions for the GLSL language:

• #define, define a variable
• #undef, undefine a variable
• #if, judgment statement
• #ifdef, if defined, executes
• #ifndef, execute if not defined.
• #else, conditional branch
• #elif, conditional branch
• #endif, endif statement
• #error, trigger compilation error

Here is an example of the error precompiled instruction:

  #define num 2
  #if num == 3
  #error 3vertex shader error
  #else
  #error vertex shader error
  #endif
Copy the code

The execution results of the above code are as follows:

If num is defined as 3, a 3Vertex shader error is printed

GLSL’s keyword language type

As a language, there must be many keywords with specific functions. Here are the keywords that GLSL currently uses:

attribute const uniform varying // Variable modifiers
centroid break continue do for while if else  // Control statement
in out inout 
float int void bool true false invariant // Basic type
discard return / / operators
mat2 mat3 mat4 mat2x2 mat2x3 mat2x4 mat3x2 mat3x3 mat3x4 mat4x2 mat4x3 mat4x4 // N-dimensional matrix type
vec2 vec3 vec4 ivec2 ivec3 ivec4 bvec2 bvec3 bvec4 // N vector type
sampler1D sampler2D sampler3D samplerCube sampler1DShadow sampler2DShadow // Sample type
struct / / structure
Copy the code

Variable modifier

Variable modifier keywords are a must to master and are used frequently in 3D graphics programming.

Attribute is used to modify vertex data, vertex normals, texture data, and so on. Uniform is typically used to store infrequently changing data such as transformation matrices. The VARYING modifier is used to pass data from the vertex shader to the chip shader.

Struct structure

Custom data structure types provided by GLSL.

struct light {
  vec3 color;
  vec3 position;
}
light l = light(vec3(1.0.0.0.0.0), vec3(1.0.0.0.0.0));
Copy the code

discard

Discard the current slice. The pixel will not be colored and can only be used with the slice shader

sampler2D

In a chip shader, samples color data from a texture and assigns values to the chip shader.

varying vec2 texCoord;
uniform sampler2D uSampler;
void main() {
	gl_FragColor = texture2D(uSampler, texCoord);
}
Copy the code

Other keywords are basically universal in the language, so I won’t go into them too much.

Like operators, method calls are basically the same as in other languages.

Note that GLSL does not have the === operators and! == operator.

These use examples can be directly viewed on the MDN code examples, try to change their own practice, experience is deeper. GLSL is a strongly typed language with the following basic data types:

GLSL built-in variable

• Gl_Position, high precision floating point four – dimensional vector vertex coordinates.
• Gl_FragColor, the pixel value of a high precision floating point four-dimensional vector.

GLSL language common functions

• Clamp, pins a vector in a range between a minimum and a maximum. Anything beyond this range will be the corresponding minimum or maximum.
• Texture2D, texture sampling.
• Mix, a linear mixture of two values.
• Max, take the maximum.

More built-in function can refer to the document: www.khronos.org/registry/Op…

Of course, these built-in functions are also context-exposed in the WebGL API.

That’s all for the GLSL language.