「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

上一篇有人问我什么是着色器，其实我自己也是一个小白，不过还是有一点见解的。跟随我的脚步，探究什么是着色器吧！

function WebGLShader( gl, type, string ) {

	const shader = gl.createShader( type );

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

	return shader;

}

export { WebGLShader };

这就是WebGLShader.js的全部代码了。

什么是着色器

shade的英文意思为给…遮挡(光线);加灯罩;把…涂暗。 下图是lcd显示屏的结构示意图:

可以看到总共分为四个部分:

• 光源，背光，你可以把它想象成一个白色灯光。
• 后板模块(偏光片)
• 液晶层,过滤颜色。
• 前板模块(偏光片)

其中液晶层为最重要的部分，每个像素由三个液晶格组成，分别代表红绿蓝。 液晶受到电压影响，会有规律地影响液晶分子的排列，从而在一个像素上表示出颜色值。

显卡通过将数字信号传递给显示屏，通过电压控制液晶的分子排列，从而在显示屏上成像。

因此WebGLShader其实也可以译为色彩过滤器，译为着色器的意思是我们通过画笔，使用不同颜料，来显示一个色彩丰富的图像。

普通的投影仪色彩不够丰富也是这个原因，它没有‘颜料’的概念，没有类似液晶层的结构。

WebGLShader是干什么的

WebGLShader的着色器代码在gpu中执行，gpu负责将绘图数据转化为数字信号，用来控制每个像素，液晶格所接收到的电压，从而在屏幕上成像。

着色器代码提供了一些计算数据给gpu，gpu计算出数字信号。 这就是着色器的作用。

这个构造函数接收三个参数。

1. gl,WebGLRenderingContext,渲染上下文，提供了一系列操纵gpu的api。
2. type,着色器类型，通常webgl中，我们将着色器分为顶点着色器(gl.VERTEX_SHADER)和片元着色器(gl.FRAGMENT_SHADER)，这个着色器分类其实是代码抽象的产物，其实gpu只存在一些列底层指令。
3. string,着色器代码字符串，将会被编译为gpu指令。

这样一层封装，将程式化代码去掉，不必反复写程式化代码。

const shader = gl.createShader( type );

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

这也是为什么明明有WebGLShader这个类，three.js还要再封装一个WebGLShader类。这也是一种代码抽象。

读到这里，相信读者已经对着色器是干什么有了一些具象的概念。感谢阅读，跟随我进入奇幻多彩的3d世界。