三角形能用上最最炫的渐变色，快跟我一起学三角形的另一个玩法！

2024-01-20 04:33:27

三角形，玩转渐变色

大家好，我是前端课代表。之前教大家绘制一个红色的三角形，这次我们来画个有渐变的三角形。

说人话版原理：

三角形的上一个版本颜色是固死的。这次，我们要像传顶点数据一样，声明颜色数据传递过去。颜色需要在片元着色器中取出来，这样我们就有渐变的三角形了。

和之前一样，我们先看看顶点坐标：

const vertexShaderSource = `
attribute vec4 a_position;
attribute vec4 a_color;

uniform vec4 u_color_multiplier;

void main() {
  gl_Position = a_position;

  gl_PointSize = 10.0;
  vec4 color = a_color * u_color_multiplier;
  gl_FragColor = color;
}
`;

接下来看看我们的片元着色器：

const fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(gl_FragCoord.x / 100.0, gl_FragCoord.y / 100.0, 1.0, 1.0);
}
`;

然后还有顶点数据：

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
  -1, 1,
  -1, -1,
  1, -1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.DYNAMIC_DRAW);

颜色数据：

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
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,
];
gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(colors), gl.DYNAMIC_DRAW);

三角形的位置属性和颜色属性:

const positionAttributeLocation = gl.getAttribLocation(gl.program, "a_position");
const colorAttributeLocation = gl.getAttribLocation(gl.program, "a_color");
const colorUniformLocation = gl.getUniformLocation(gl.program, "u_color_multiplier");
gl.useProgram(gl.program);

声明清楚了三角形的位置属性和颜色属性后，我们要告诉顶点着色器把顶点数据往哪传，颜色着色器把颜色数据往哪传：

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttributeLocation);

gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorAttributeLocation, 4, gl.UNSIGNED_8, true, 0, 0);
gl.enableVertexAttribArray(colorAttributeLocation);

再声明好uniform数据:

const uniformColor = 0.0;
gl.uniform4f(colorUniformLocation, uniformColor, uniformColor, uniformColor, 1.0);

现在，我们就可以绘制了：

gl.drawArrays(gl.TRIANGLES, 0, 3);

然后是绘制三角形的函数:

function drawShapes() {
  gl.lineWidth(1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  const offset = 100.0;
  const x = gl.canvas.width / 2.0;
  const y = gl.canvas.height / 2.0;
  gl.drawArrays(gl.TRIANGLES, 0, 3);
}

我们一步步来，先定义好一个canvas:

const canvas = document.createElement("canvas");
gl.canvas = canvas;
gl.canvas.width = document.body.clientWidth;
gl.canvas.height = document.body.clientHeight;
document.body.appendChild(gl.canvas);