一起学WebGL：改变点的颜色

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

我们提供的服务有：网站设计制作、成都网站建设、微信公众号开发、网站优化、网站认证、沙坪坝ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的沙坪坝网站制作公司

《​​一起学 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 地址：

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

结尾

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

分享名称：一起学WebGL：改变点的颜色
网页路径：http://www.36103.cn/qtweb/news42/33042.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联