探索 WebGL 的迷人世界：结合渲染管线学习基础 API

前端

2024-01-21 09:56:36

WebGL：踏上令人惊叹的 3D 网络图形之旅

在互联网时代，我们的数字体验日益逼真和沉浸式。WebGL，一种强大的网络图形库，开启了在网络浏览器中创建引人入胜的 3D 图形的新天地。

探索 WebGL 渲染管线

WebGL 渲染管线是一系列将 3D 模型转换为屏幕图像的处理步骤。它涉及以下关键阶段：

顶点着色器： 确定每个顶点在屏幕上的位置和大小。
片元着色器： 决定每个像素的颜色和纹理。
光栅化： 将 3D 模型转换为 2D 像素集合，称为片段。
混合： 将片段与现有图像融合，形成最终的图像。

掌握 WebGL API

WebGL API 提供了丰富的功能，可让您控制渲染管线的各个方面。您可以：

创建和编译着色器程序，定义顶点和片元的行为。
通过缓冲区直接传递数据给着色器，定义 3D 模型的几何形状和属性。
使用绘制调用（如 gl.drawArrays）将模型渲染到屏幕上。

实践：绘制一个简单的三角形

让我们通过绘制一个简单的红色三角形来体验 WebGL 的强大功能。以下 JavaScript 代码演示了这一过程：

// 顶点数据（左下角、右下角、顶点坐标）
const vertices = [-0.5, -0.5, 0, 0.5, -0.5, 0, 0, 0.5, 0];

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

// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
  attribute vec3 a_position;
  void main() {
    gl_Position = vec4(a_position, 1.0);
  }
`);
gl.compileShader(vertexShader);

// 创建片元着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`);
gl.compileShader(fragmentShader);

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

// 启用顶点着色器
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);

// 设置顶点数据
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

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