WebGL 中的数据
着色器程序可以访问三种数据存储,每种都有特定的用例。每种变量都可以被一种或两种类型的着色器程序访问(取决于数据存储类型),并且可能被网站的 JavaScript 代码访问,具体取决于变量的特定类型。
GLSL 数据类型
请参阅 GLSL 文档中的 数据类型。
GLSL 变量
GLSL 中有三种“变量”或数据存储可用,每种都有其自己的目的和用例:属性(attributes)、可变变量(varyings) 和 统一变量(uniforms)。
属性
属性(Attributes) 是仅对顶点着色器(作为变量)和 JavaScript 代码可用的 GLSL 变量。属性通常用于存储颜色信息、纹理坐标以及任何需要与 JavaScript 代码和顶点着色器共享的已计算或已检索数据。
js
// init colors
const vertexColors = [
vec4(0.0, 0.0, 0.0, 1.0), // black
vec4(1.0, 0.0, 0.0, 1.0), // red
vec4(1.0, 1.0, 0.0, 1.0), // yellow
vec4(0.0, 1.0, 0.0, 1.0), // green
vec4(0.0, 0.0, 0.0, 1.0), // black
vec4(1.0, 0.0, 0.0, 1.0), // red
vec4(1.0, 1.0, 0.0, 1.0), // yellow
vec4(0.0, 1.0, 0.0, 1.0), // green
];
const cBuffer = gl.createBuffer();
js
// continued
// create buffer to store colors and reference it to "vColor" which is in GLSL
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW);
const vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);
glsl
attribute vec4 vColor;
void main()
{
fColor = vColor;
}
可变变量(Varyings)
可变变量(Varyings) 是由顶点着色器声明并用于将数据从顶点着色器传递到片段着色器的变量。这通常用于共享顶点着色器计算后的顶点 法向量。
<<如何使用>>
统一变量(Uniforms)
统一变量(Uniforms) 由 JavaScript 代码设置,并且对顶点着色器和片段着色器都可用。它们用于提供在帧中绘制的所有内容都相同的常量值,例如光照位置和强度、全局变换和透视细节等。
<<添加详细信息>>
缓冲区
<<添加信息>>
纹理
<<添加信息>>