WebGL二十四周：渲染多边形，绘制绝美的几何图形

2024-02-05 02:06:58

铺垫：WebGL简介

WebGL（Web Graphics Library）是一种3D图形库，它允许您在网页中创建和渲染交互式3D图形。WebGL基于OpenGL ES（嵌入式系统图形库）构建，它是一个针对移动设备和嵌入式系统的开放图形标准。WebGL允许您在网页中创建逼真的3D场景、模型和动画，而无需安装任何插件。

第一笔触：绘制三角形

我们从最简单的多边形——三角形开始。三角形由三个顶点组成，每个顶点都有一个位置和一个颜色。首先，我们使用顶点着色器来定义三角形的顶点位置和颜色。然后，我们使用片段着色器来定义三角形的填充颜色。最后，我们使用WebGL的drawArrays()方法来绘制三角形。

// 顶点着色器
const vertexShaderSource = `
  attribute vec3 position;
  attribute vec3 color;
  varying vec3 vColor;

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

// 片段着色器
const fragmentShaderSource = `
  varying vec3 vColor;

  void main() {
    gl_FragColor = vec4(vColor, 1.0);
  }
`;

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

// 创建缓冲区
const positionBuffer = gl.createBuffer();
const colorBuffer = gl.createBuffer();

// 绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

// 设置缓冲区数据
const positions = [
  0.0, 0.5, 0.0,
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0
];
const colors = [
  1.0, 0.0, 0.0,
  0.0, 1.0, 0.0,
  0.0, 0.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

// 启用顶点属性
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);

// 设置顶点属性指针
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);

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

纵横扩展：绘制其他多边形

掌握了绘制三角形的方法后，我们就可以轻松扩展到其他多边形。矩形是由四个顶点组成的多边形，我们可以通过添加一个顶点来将三角形扩展成矩形。五边形是由五个顶点组成的多边形，我们可以通过添加两个顶点来将三角形扩展成五边形。六边形是由六个顶点组成的多边形，我们可以通过添加三个顶点来将三角形扩展成六边形。

// 顶点着色器
const vertexShaderSource = `
  attribute vec3 position;
  attribute vec3 color;
  varying vec3 vColor;

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

// 片段着色器
const fragmentShaderSource = `
  varying vec3 vColor;

  void main() {
    gl_FragColor = vec4(vColor, 1.0);
  }
`;

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

// 创建缓冲区
const positionBuffer = gl.createBuffer();
const colorBuffer = gl.createBuffer();

// 绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

// 设置缓冲区数据
const positions = [
  0.0, 0.5, 0.0,
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.5, 0.5, 0.0
];
const colors = [
  1.0, 0.0, 0.0,
  0.0, 1.0, 0.0,
  0.0, 0.0, 1.0,
  1.0, 1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

// 启用顶点属性
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);

// 设置顶点属性指针
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);

// 绘制矩形
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);