返回

WebGL 绘制三维立方体：手把手入门指南

前端

从像素到场景：WebGL 的世界

WebGL (Web Graphics Library) 是一种基于 OpenGL ES 2.0 的 JavaScript API，它赋予浏览器渲染交互式 2D 和 3D 图形的能力。WebGL 弥合了浏览器和图形处理单元 (GPU) 之间的差距，使我们能够在 Web 上创建令人惊叹的视觉体验。

绘制三维立方体：一个循序渐进的指南

绘制三维立方体是学习 WebGL 的理想起点，它展示了 WebGL 的核心概念，包括顶点着色器、片元着色器、缓冲区和绘图调用。

顶点着色器：定义立方体的形状

顶点着色器是 WebGL 程序的第一阶段，负责定义立方体的顶点位置。顶点着色器接收一个包含顶点坐标和法线的输入顶点，并输出一个包含转换后的位置和法线的输出顶点。

// 顶点着色器代码
attribute vec3 aPosition;
attribute vec3 aNormal;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

varying vec3 vPosition;
varying vec3 vNormal;

void main() {
  vPosition = (uModelViewMatrix * vec4(aPosition, 1.0)).xyz;
  vNormal = (uModelViewMatrix * vec4(aNormal, 0.0)).xyz;
  gl_Position = uProjectionMatrix * vec4(vPosition, 1.0);
}

片元着色器：为立方体着色

片元着色器是 WebGL 程序的第二阶段，负责为每个像素着色。它接收从顶点着色器输出的插值顶点数据，并生成片段（像素）的颜色。

// 片元着色器代码
precision mediump float;

varying vec3 vPosition;
varying vec3 vNormal;

uniform vec3 uLightDirection;
uniform vec3 uLightColor;

void main() {
  float diffuse = max(dot(vNormal, uLightDirection), 0.0);
  vec3 color = uLightColor * diffuse;
  gl_FragColor = vec4(color, 1.0);
}

缓冲区：存储顶点和索引

缓冲区是 WebGL 中用于存储顶点数据（例如位置和法线）和索引（用于定义面）的特殊内存区域。缓冲区可以分为顶点缓冲区和索引缓冲区。

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

// 创建并填充索引缓冲区
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STATIC_DRAW);

绘图调用：绘制立方体

绘图调用是 WebGL 中用于实际绘制几何体（例如立方体）的命令。它指定要绘制的顶点数据、绘制的图元类型（例如三角形）以及要使用的着色器程序。

// 绘制立方体
gl.drawElements(gl.TRIANGLES, indexData.length, gl.UNSIGNED_SHORT, 0);

总结：WebGL 的基石

通过绘制三维立方体，我们揭开了 WebGL 的核心概念：

  • 顶点着色器 定义了对象的空间位置和法线。
  • 片元着色器 为每个像素确定颜色。
  • 缓冲区 存储顶点数据和索引。
  • 绘图调用 指示 WebGL 实际绘制几何体。

掌握这些概念对于构建更复杂的 3D 场景至关重要。

延伸阅读