WebGL 中的数据

着色器程序可以访问三种数据存储，每种都有特定的用例。每种变量都可被一种或两种类型的着色器程序访问（取决于数据存储类型），并且可能根据变量的特定类型被站点的 JavaScript 代码访问。

GLSL 数据类型

请参阅 GLSL 文档中的数据类型。

GLSL 变量

GLSL 中有三种“变量”或数据存储可用，每种都有其自身的用途和用例：属性、变量和统一变量。

属性

属性是仅对顶点着色器（作为变量）和 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);
cpp
//glsl
attribute  vec4 vColor;

void main()
{
  fColor = vColor;
}

变量

变量是由顶点着色器声明并用于将数据从顶点着色器传递到片段着色器的变量。这通常用于在顶点着色器计算顶点的法向量后共享它。

<<如何使用>>

统一变量

统一变量由 JavaScript 代码设置，并且对顶点和片段着色器都可用。它们用于提供对帧中绘制的所有内容都相同的值，例如光源位置和强度、全局变换和透视细节等。

<<添加详细信息>>

缓冲区

<<添加信息>>

纹理

<<添加信息>>