大家好，我是前端西瓜哥，上一章我们用 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 里。
修改颜色
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) 。
渲染结果：
代码实现：
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;
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
gl.vertexAttrib3f(a_Position, 0, 0, 0);
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(); 的注释取消掉即可看到颜色变化的效果。
结尾
下一节我们就真正来绘制三角形了。复杂的三维物体，都可以通过一个个很小的三角形组成，三角形越多，三维物体就越精细。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
