一起学 WebGL：改变点的颜色-51CTO.COM

大家好，我是前端西瓜哥，上一章我们用 attribute 变量，从外部设置顶点着色器中点的位置信息。

《一起学 WebGL：动态绘制点》

这次我们把目光投向片元着色器，通过片元着色器修改点的颜色。

片元着色器

片元着色器的代码改一下：

const fragmentShaderSrc = `
precision mediump float;
uniform vec4 u_FragColor;
void main() {
  gl_FragColor = u_FragColor;
}
`;

类似顶点着色器的 attribute，我们在这里声明了一个 uniform 变量 u_FragColor，同样我们使用过的是 vec4 类型，4 个浮点数组成的结构体。

片元着色器中不能设置 attribute 类型的变量，只能用 uniform，或者也能用 varing 变量，支持从顶点着色器传递数据到片元着色器，这个以后西瓜哥会专门讲解。

我们会将这个变量赋值给 WebGL 片元着色器的内置属性 gl_FragColor，确定图形的颜色。

此外，因为使用了变量，所以顶部要加一个 precision highp float; 的玩意。

这是设置片元着色器的 float 精度为高精度。因为现在桌面端浏览器性能都很好，我们直接设置高精度即可。此外还有 mediump 中等精度，和 lowp 低精度，适合用在一些性能羸弱的设备上。精度越低，渲染的效果越差。

然后就是给我们声明的 u_FragColor 传值了，在 JavaScript 里。

修改颜色

/** 修改片元着色器的 uniform **/
const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
gl.uniform4f(u_FragColor, 1, 1, 0, 1); // 绿色

西瓜哥这里通过 gl.getUniformLocation 方法获取对应程序对象中片元着色器的名为 u_FragColor 的 uniform 变量的地址。

然后通过 gl.uniform4f 给这个 uniform 类型赋值。

WebGL 中的颜色分量取值范围是 0 到 1，对应的是一个比值，比如 vec4(1.0, 0.5, 0, 0.5)，其实就等价于 rbga(255, 255*0.5, 0, 0.5) 。

渲染结果：

代码实现：

/**
 * wegbl 绘制一个点
 */

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

const vertexShaderSrc = `
attribute vec4 a_Position;
void main() {
 gl_Position = a_Position;
 gl_PointSize = 30.0;
}
`;

const fragmentShaderSrc = `
precision highp float;
uniform vec4 u_FragColor;
void main() {
  gl_FragColor = u_FragColor;
}
`;

/**** 渲染器生成处理 ****/
// 创建顶点渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 创建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;

/** 修改顶点着色器的 attribute */
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
gl.vertexAttrib3f(a_Position, 0, 0, 0);

/** 【本章新增的代码】修改片元着色器的 uniform **/
const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
gl.uniform4f(u_FragColor, 0, 1, 0, 1);

/** 画布绘制 **/
// 清空画布，并指定颜色
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制点
gl.drawArrays(gl.POINTS, 0, 1);

Demo 地址：

https://codesandbox.io/s/xp81lh?file=/index.js。

这个 demo 加了点料，写了个定时器不断修改颜色的函数，将底部的 // changeColor(); 的注释取消掉即可看到颜色变化的效果。

结尾

下一节我们就真正来绘制三角形了。复杂的三维物体，都可以通过一个个很小的三角形组成，三角形越多，三维物体就越精细。