「这是我参与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
计算出数字信号。 这就是着色器的作用。
这个构造函数接收三个参数。
gl
,WebGLRenderingContext
,渲染上下文,提供了一系列操纵gpu
的api
。type
,着色器类型,通常webgl
中,我们将着色器分为顶点着色器(gl.VERTEX_SHADER
)和片元着色器(gl.FRAGMENT_SHADER
),这个着色器分类其实是代码抽象的产物,其实gpu只存在一些列底层指令。string
,着色器代码字符串,将会被编译为gpu
指令。
这样一层封装,将程式化代码去掉,不必反复写程式化代码。
const shader = gl.createShader( type );
gl.shaderSource( shader, string );
gl.compileShader( shader );
复制代码
这也是为什么明明有WebGLShader这个类,three.js还要再封装一个WebGLShader类。这也是一种代码抽象。
读到这里,相信读者已经对着色器是干什么有了一些具象的概念。感谢阅读,跟随我进入奇幻多彩的3d世界。