WebGL中uv等内置变量的定义、文档及相关问题咨询

嘿，我来帮你把这两个问题理清楚～

WebGL的权威官方文档就是Khronos Group发布的WebGL规范：

• WebGL 1.0基于OpenGL ES 2.0规范，所有内置变量（包括顶点着色器、片段着色器的内置输入输出）都在规范的GLSL ES着色器语言章节里有详细定义；
• WebGL 2.0对应OpenGL ES 3.0规范，内容逻辑类似，只是增加了更多特性。
  另外MDN也有整理后的WebGL开发文档，里面会把内置变量的用法、含义梳理得更易懂，适合快速查阅。

先纠正一个小误解：这个uv不是WebGL的内置变量，而是three.js框架自动帮你注入的attribute变量！背后的逻辑是这样的：

1. 当你用three.js创建常规几何体（比如PlaneGeometry、BoxGeometry）时，框架默认会生成UV纹理坐标数据，并存在几何体的attributes.uv属性里；
2. 当你使用three.js的ShaderMaterial（或者基于它的着色器方案）时，如果你在顶点着色器里直接引用了uv，three.js会自动帮你补全attribute vec2 uv;的声明，并且把几何体中对应的uv属性数据绑定到这个attribute上；
3. 你示例里的代码直接把uv赋值给varying vec2 vUv，本质是把顶点的UV坐标传递给片段着色器，用来采样纹理。

这个变量的相关说明可以在three.js官方文档的BufferGeometry章节（查看attributes部分），以及ShaderMaterial的文档里找到，里面会列出框架自动注入的默认attribute和uniform变量。

纯WebGL自身的内置变量 #

顶点着色器：

• gl_Position：必须赋值的变量，用来输出顶点的裁剪空间位置
• gl_PointSize：可选变量，用来设置点图元的大小

片段着色器：

• gl_FragColor：WebGL 1.0中用来输出片段最终颜色的变量（WebGL 2.0推荐用布局限定符声明输出变量）
• gl_FragDepth：可选变量，用来手动设置片段的深度值

three.js自动注入的常用attribute变量（无需手动声明即可使用） #

• position：顶点的局部空间位置
• uv：顶点的UV纹理坐标（对应几何体的attributes.uv）
• normal：顶点的法向量
• color：顶点颜色（仅当几何体包含颜色属性时可用）
• tangent：顶点的切线向量（仅当几何体包含切线属性时可用）

另外three.js还会自动注入常用的uniform变量，比如你示例里的projectionMatrix、modelViewMatrix，这些是用来做矩阵变换的全局变量，也不用手动声明。

内容的提问来源于stack exchange，提问作者user5515