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 程式碼設定,並且對頂點著色器和片段著色器都可用。它們用於提供在幀中繪製的所有內容都相同的常量值,例如光照位置和強度、全域性變換和透視細節等。

<<新增詳細資訊>>

緩衝區

<<新增資訊>>

紋理

<<新增資訊>>