WebGL 画布上绘制渐变色矩形：从入门到精通

2023-09-17 19:48:29

WEBGL专栏：绘制渐变颜色的矩形

序言

WebGL 是一种强大的 JavaScript API，可让您使用 WebGL 着色语言在 Web 浏览器中创建交互式 3D 图形。结合 Canvas 元素，它提供了一种在 HTML 中绘制复杂图形的有效方法。在本教程中，我们将重点介绍如何使用 WebGL 和 Canvas 绘制渐变色矩形。我们将从基本概念开始，逐步深入探讨更高级的技术。

绘制渐变色矩形

要绘制渐变色矩形，我们需要执行以下步骤：

创建 WebGL 上下文： 首先，我们需要创建一个 WebGL 上下文。这将为我们提供一个与 WebGL 进行交互的接口。
创建着色器程序： 接下来，我们需要创建两个着色器程序，一个用于顶点着色器，另一个用于片段着色器。顶点着色器负责处理顶点数据，而片段着色器负责处理每个片段的颜色。
创建缓冲区： 我们需要创建两个缓冲区，一个用于顶点位置数据，另一个用于颜色数据。
设置缓冲区数据： 我们将顶点位置数据和颜色数据上传到创建的缓冲区。
绘制矩形： 最后，我们可以使用 drawArrays() 函数绘制矩形。

渐变色的原理

渐变色是由两种或更多种颜色平滑过渡而成的。为了在 WebGL 中创建渐变色，我们需要使用片段着色器。片段着色器是一个程序，它将每个片段（像素）的颜色计算为输入变量的函数。

在我们的例子中，我们使用 mix() 函数来混合两种颜色。mix() 函数接受三个参数：

color1：第一个颜色
color2：第二个颜色
t：混合因子，它控制着两个颜色的混合程度。

通过改变混合因子 t 的值，我们可以创建不同的渐变效果。

示例代码

下面是绘制渐变色矩形的示例代码：

// 创建 WebGL 上下文
const gl = canvas.getContext("webgl");

// 创建着色器程序
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 设置顶点着色器和片段着色器的源代码
const vertexShaderSource = `
  attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;
const fragmentShaderSource = `
  precision mediump float;
  uniform vec4 u_color1;
  uniform vec4 u_color2;
  uniform float u_t;
  void main() {
    gl_FragColor = mix(u_color1, u_color2, u_t);
  }
`;

// 编译顶点着色器和片段着色器
gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 创建着色器程序并链接着色器
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();

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

// 查找着色器程序中的属性和 uniforms
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
const color1UniformLocation = gl.getUniformLocation(program, "u_color1");
const color2UniformLocation = gl.getUniformLocation(program, "u_color2");
const tUniformLocation = gl.getUniformLocation(program, "u_t");

// 设置 uniforms
gl.uniform4f(color1UniformLocation, 1.0, 0.0, 0.0, 1.0); // 红色
gl.uniform4f(color2UniformLocation, 0.0, 1.0, 0.0, 1.0); // 绿色
gl.uniform1f(tUniformLocation, 0.5); // 混合因子（50%）

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

// 绑定缓冲区到顶点属性
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

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

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