着色器语言 GLSL ES

优质

小牛编辑

131浏览

2023-12-01

下面代码中的两个字符串 vertexShaderSource和fragShaderSource 是 WebGL 的着色器代码，着色器代码通过着色器语言GLSL ES编写，对于前端工程来说学习 WebGL，还需要学习一门新的语言着色器语言GLSL ES。关于着色器语言的学习，可以跟着课程一边写案例，一边去学习，这样更容易理解。

着色器语言用于计算机图形编程，运行在GPU中，平时所说的大多数语言编写的程序都是运行在CPU中。与OpenGL API相配合的是着色器语言GLSL，与OpenGL ES API、WebGL API相互配合的是着色器语言GLSL ES。OpenGL标准应用的是客户端 OpenGL ES应用的是移动端，WebGL标准应用的是浏览器平台。

顶点着色器和片元着色器经过WebGL编译处理后，会在GPU的顶点着色器单元和片元着色器单元上执行。

顶点着色器定义了顶点的渲染位置和点的渲染像素大小

//顶点着色器源码
var vertexShaderSource = '' +
    'void main(){' +
    //给内置变量gl_PointSize赋值像素大小
    '   gl_PointSize=20.0;' +
    //顶点位置，位于坐标原点
    '   gl_Position =vec4(0.0,0.0,0.0,1.0);' +
    '}';

片元着色器定义了点的渲染结果像素的颜色值

//片元着色器源码
var fragShaderSource = '' +
    'void main(){' +
    //定义片元颜色
    '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
    '}';

gl_PointSize、gl_Position、gl_FragColor都是内置变量，也就是说不需要声明，这一点与多数编程语言不同，这主要是由GPU的特殊性决定，感兴趣的话可以研究显卡的硬件结构，渲染管线等概念。

通过程序可以看出来顶点着色器源码vertexShaderSource、片元着色器源码fragShaderSource，都是只有一个主函数main，也就是入口函数。

给内置变量gl_Position赋值vec4(0.0,0.0,0.0,1.0)，也就是设置顶点位置坐标，vec4代表的是一种数据类型，在这里可以理解为vec4()是一个可以构造出vec4类型数据的构造函数，前三个参数表示顶点坐标值xyz。

给内置变量gl_FragColor赋值vec4(1.0,0.0,0.0,1.0)，也就是设置会在屏幕上显示的像素的颜色，vec4()构造函数前三个参数，表示颜色RGB值，最后一个参数是透明度A。在WebGL着色器中颜色值使用[0,1]区间表示。

你可以通过改变WebGL着色器代码内置变量gl_PointSize、gl_Position、gl_FragColor测试WebGL渲染效果的变化。

gl_PointSize=20.0改为gl_PointSize=10.0，观察屏幕点的大小变化
gl_Position =vec4(0.5,0.5,0.0,1.0)改为gl_Position =vec4(0.5,0.5,0.0,1.0)，观察屏幕点的位置变化

gl_FragColor=vec4(0.0,0.0,1.0,1.0)更改为gl_FragColor = vec4(0.0,0.0,1.0,1.0)，观察屏幕点的颜色变化