欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

上章节回顾

1. 图形的平移，可以通过在CPU中处理好数据再提交给着色器，也可以在着色器中处理。
2. 立方体绘制的原理，绘制两个平面和四条线段将两个平面相连，形成立方体。
3. 立方体的旋转矩阵计算方法以及在着色器中的一些内置变量和方法的使用。

本章目标

webgl中颜色插值的运用

那么什么是颜色插值呢？

回想一下，我们在绘制三角形的时候，我们定义了三个顶点，然后将这三个顶点的数据传递到buffer缓冲区，然后由着色器程序去读取顶点数据然后由GPU完成渲染。

可以看到，在整个过程中，我们没有任何的颜色数据的相关操作，唯一的颜色只是我们在片元着色器中定义了一个红色。

我们定义了三个顶点最终绘制出来了三角面的红色区域。其实这个过程就是有颜色的插值计算。只不是是一个种单一的颜色。

那么接下来我们使用多种颜色来玩一玩这个插值到底是怎么一回事！！

先来看效果。

这很容易想到，我们定义了两个顶点，绘制了一条线段。然后同时传递了两个颜色（红包和蓝色）从最终的效果可以看出。插值效果其实就是我们所说的渐变！！！

技术分析：

1、顶点可以通过缓冲区将数据传递给着色器，那么颜色数据也可以~因此我们可以创建单独的颜色缓冲区，单独处理颜色相关的数据。

2、在着色器代码中定义用于接收颜色数据的变量。

attribute vec4 acolor;

因为接收过来的数据是多个单一的颜色，要进行插值计算，还需要我们在着色器中申明一个单独的变量去保存插值计算的结果。用到关键字：varying

varying vec4 v_color;//保存插值计算的结果

在main()入口 方法中，进行赋值操作

v_color = acolor;

完整的顶点着色器代码：

3、处理片元着色器。定义插值后的计算结果：

varying vec4 v_color;
//设置float类型数据的精度是lowp;（低精度）。 没有默认值，如果不设置，最终无法绘制。
 precision lowp float;

4、着色器代码处理好了以后，回过头来去撸我们的缓冲区的代码了。

定义颜色数据。

var colorData = [
 1,0,0,//#f00
 0,0,1//#00f
];//每三个元素为了组，形成RGB，这里在RGB取值范围是[0~1];前面的文章中介绍到。

5、通过程序对象找到我们在着点着色器中定义的变量acolor 的索引。

var aColorIndex = gl.getAttribLocation(shaderProgram,'acolor');

6、创建处理颜色数据对应的缓冲区，并激活它将数据按照3个元素为一个RGB传递到着色器。

//创建缓处理颜色的缓冲区
var colorBuffer = gl.createBuffer();
//绑定（激活）当前缓冲区。
gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
//将颜色数据传入缓冲区
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colorData),gl.STATIC_DRAW);
///将缓冲区的数据按照3个元素为一个RGB传递给我们的顶点着色器中定义的变量acolor
gl.vertexAttribPointer(aColorIndex,3,gl.FLOAT,false,0,0);
////允许数据传递。
gl.enableVertexAttribArray(aColorIndex);

7、通过线的模式去绘制。从第一个点开始绘制，绘制两个点。形成最终有渐变效果的线条。

gl.drawArrays(gl.LINES, 0, 2);

绘制复杂的几何图形的原理也是一样的。这里我举了一个最简单的示例。

总结

1. 颜色的数据也可以通过缓冲区传递给着色器去执行插值计算。
2. 在着色器中必须使用varying 关键字来申明用来保存插值计算的结果。
3. 在顶点着色器中接收缓冲区接收的数据，然后传递给片元着色器进行光栅化处理。
4. 在片元着色器中不要忘了设置颜色精度。没有默认值，必须设置。

以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散。。。

这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。

未完待续。。。