一起学 WebGL：改变点的颜色变点我们直接设置高精度即可

2024-06-30 22:08:43 [百科] 来源：避面尹邢网

一起学 WebGL：改变点的起学颜色

作者：前端西瓜哥 2023-04-13 07:45:15开发前端这是设置片元着色器的 Float 精度为高精度。因为现在桌面端浏览器性能都很好，变点我们直接设置高精度即可。起学此外还有 Mediump 中等精度，变点和 Lowp 低精度，起学适合用在一些性能羸弱的变点设备上。精度越低，起学渲染的变点效果越差。

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

一起学 WebGL：改变点的颜色变点我们直接设置高精度即可

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

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

一起学 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);