“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

In the last post, someone asked me what a shader is. In fact, I am a white person myself, but I still have some opinions. Follow my steps to discover what a shader is!

function WebGLShader( gl, type, string ) {

	const shader = gl.createShader( type );

	gl.shaderSource( shader, string );
	gl.compileShader( shader );

	return shader;

}

export { WebGLShader };

Copy the code

That’s all the code for webglShader.js.

What is a shader

Shade means to give… Block (light); Add lamp shade; Put the… With dark. Below is a schematic diagram of the LCD display:

You can see that there are four parts:

  • The light source, the backlight, you can think of it as a white light.
  • Rear panel module (polarizer)
  • Liquid crystal layer, filter color.
  • Front panel module (polarizer)

The liquid crystal layer is the most important part, and each pixel is composed of three liquid crystal cells, representing red, green and blue respectively. Liquid crystals are subject to voltages that regularly affect the alignment of liquid crystal molecules to represent color values on a pixel.

The graphics card uses a voltage to control the molecular alignment of the liquid crystal by sending a digital signal to the display to create an image on the display.

So WebGLShader can also be translated as a color filter, translated as a shader means we use a brush, different pigments, to display a colorful image.

Ordinary projector color is not rich enough for this reason, it has no ‘pigment’ concept, no similar to the structure of the liquid crystal layer.

What does WebGLShader do

The Shader code for WebGLShader is executed on the GPU, which converts drawing data into digital signals that are used to control the voltage received by each pixel, the LCD cell, to image the image on the screen.

The shader code provides some computational data to the GPU, which computes the digital signal. That’s what shaders are for.

This constructor takes three arguments.

  1. gl.WebGLRenderingContextRender context provides a range of manipulationsgputheapi.
  2. type, shader type, usuallywebglWe divide shaders into vertex shaders (gl.VERTEX_SHADER) and slice shaders (gl.FRAGMENT_SHADER), this shader classification is actually the product of code abstraction, in fact, the GPU only has a series of low-level instructions.
  3. string, the shader code string, will be compiled togpuThe instructions.

Such a layer of encapsulation, the stylized code is removed, do not have to repeatedly write stylized code.

const shader = gl.createShader( type );

	gl.shaderSource( shader, string );
	gl.compileShader( shader );
Copy the code

This is why three. Js needs to wrap another WebGLShader class when there is one. This is also a code abstraction.

At this point, I believe the reader has some concrete idea of what shaders are for. Thanks for reading and follow me into the fantastic and colorful 3D world.