WebGL 基础：着色器入门

2023-10-22 05:57:48

你好，我是 yancy，一个前端开发工程师。今天，我想和你分享一些关于 WebGL 的基础知识，特别是着色器。WebGL 是一种允许您在 Web 浏览器中渲染 3D 图形的 API。它使用着色器来定义顶点和片元的处理方式，从而实现图形的渲染。

什么是着色器？

着色器是一种程序，它可以在 GPU 上运行。在 WebGL 中，有两种类型的着色器：顶点着色器和片元着色器。顶点着色器处理顶点数据，片元着色器处理片元数据。

顶点着色器

顶点着色器是第一个被调用的着色器。它负责处理顶点数据，比如顶点的位置、颜色和法线。顶点着色器可以对这些数据进行变换，比如平移、旋转和缩放。

片元着色器

片元着色器是第二个被调用的着色器。它负责处理片元数据，比如片元的位置、颜色和法线。片元着色器可以对这些数据进行着色，比如改变它们的顏色，调整他们的紋理，从而实现图形的渲染。

着色器在 WebGL 渲染管线中的作用

着色器在 WebGL 渲染管线中起着非常重要的作用。它们是将顶点数据和片元数据转换为最终图像的关键。

WebGL 渲染管线是一个多阶段的过程。它包括以下几个步骤：

顶点着色器处理顶点数据。
光栅化器将顶点数据转换为片元数据。
片元着色器处理片元数据。
合成器将片元数据组合成最终图像。

如何使用着色器

要使用着色器，您需要创建一个着色器程序。着色器程序包含顶点着色器和片元着色器。您可以使用 WebGL API 来创建和编译着色器程序。

// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 创建片元着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 使用着色器程序
gl.useProgram(program);

示例

为了更好地理解着色器是如何工作的，我们来看一个简单的示例。在这个示例中，我们将创建一个 WebGL 程序来渲染一个三角形。

// 顶点着色器源代码
const vertexShaderSource = `
attribute vec3 position;

void main() {
  gl_Position = vec4(position, 1.0);
}
`;

// 片元着色器源代码
const fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// 创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 使用着色器程序
gl.useProgram(program);

// 创建顶点缓冲区
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0
]), gl.STATIC_DRAW);

// 启用顶点属性
const positionAttributeLocation = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 清除画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);