接webGL入门-绘制一个点 juejin.cn/post/706527… 来分析其中的着色器语法

  // 顶点着色器程序
  const VSHADER_SOURCE = 
  `void main() {
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // 设置坐标
    gl_PointSize = 10.0; // 设置尺寸
  }`

  // 片元着色器程序
  const FSHADER_SOURCE = 
  `void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置颜色
  }`

着色器基本语法

• 1.着色器语法从void main()开始，和C语言程序一样，必须包含一个main()函数。
• 2.main()前面的关键字 void 表示这个函数不会有返回值。
• 3.main()不能指定参数
• 4.着色器程序使用 '='操作符 为变量赋值

顶点着色器内置变量

类型和变量名	描述
vec4 gl_Position	表示顶点的位置 ----- gl_Position变量必须被赋值，否则着色器无法正常工作
float gl_PointSize	表示点的尺寸(像素数) ----- 不赋值默认取1.0

片元着色器内置变量

类型和变量名	描述
vec4 gl_FragColor	指定片元颜色（RGBA格式）

GLSL中的数据类型

GLSL是一种强类型的编程语言，必须为变量指定类型，这样系统就能轻易理解变量中存储的是何种数据，进而优化处理这些数据

类型	描述
float	表示浮点数
vec4	表示由四个浮点数组成的矢量

vec4()

着色器提供的内置函数vec4()，帮助你创建vec4类型的变量

/**
 * 根据 v0, v1, v2, v3 创建 vec4 对象
 * @param (v0, v1, v2, v3) 指定4个浮点型分量
 * @return 返回v0, v1, v2, v3 组成的 vec4 对象
 */
vec4 vec4(v0, v1, v2, v3)

齐次坐标

由于齐次坐标能够提高处理三维数据的的效率（矩阵运算），所以在三维图形中被大量使用

齐次坐标使用如下符号描述：(x, y, z, w)

齐次坐标(x, y, z, w) 等价于(x / w, y / w, z / w)，所以如果齐次坐标的第4个分量是1，那么就可以将它当做三维坐标来使用

顶点着色器语法分析

gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // 设置坐标

- 1.给定一个坐标位置(0.0, 0.0, 0.0)，即XYZ坐标值，webGL坐标系统请看这篇文章 https://juejin.cn/post/7066968450169569288
- 2.gl_Position是 vec4 类型，所以使用vec4(0.0, 0.0, 0.0, 1.0)来设置坐标
- 3.由齐次坐标概念可知，vec4中前三个代表XYZ坐标值，最后一个赋值1.0，这样vec4(0.0, 0.0, 0.0, 1.0)就能设置顶点位置在(0.0, 0.0, 0.0)处

gl_PointSize = 10.0; // 设置尺寸

- 1.设置点的大小10.0

片元着色器语法分析

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置颜色

- 1.vec4中前三个值代表rgba的值，最后一个1.0是齐次坐标
- 2.rgba范围是0-255，在webGL中对应0-1，即rgb(255, 100, 0) 对应vec4(255/255.0, 100/255.0, 0/255.0, 1.0)