WebGL系列教程四（绘制彩色三角形）

1 前言

  上一篇中我们介绍了如何使用缓冲区来绘制三角形，这一篇我们来讲讲如何给三角形着色，绘制一个彩色的三角形。

2 varying变量介绍

  WebGL中的varying变量负责将值从顶点着色器传递到片元着色器中。假设我们有个三角形，没错，还是前两篇使用的那个三角形，它的颜色如下图所示：

  现在我们要给这个三角形着色，我们只需要把这个顶点的颜色从顶点着色器中传递到片元着色器中，WebGL就会自动帮我们把三角形中间的颜色给插值出来。

3 开始绘制

  通过前几篇我们已经熟悉了WebGL基本的使用方式，只需要将上一篇中的代码稍加改动，就可以达成我们这篇的要求了。现在还是让我们来回顾一下上一篇中WebGL中的绘制流程并稍作改动，增加第8步给三角形着色：

1. 创建着色器对象
2. 获取着色器对象的源代码
3. 绑定着色器的源
4. 编译着色器
5. 创建并关联项目
6. 创建并绑定缓冲区
7. 读取缓冲区数据并绘制三角形
8. 三角形着色

3.1 声明顶点着色器

  前面的6步我们已经很熟悉了，我们先来看顶点着色器的声明，新增了一个aColor和一个vColor，aColor用来存储我们指定的颜色，vColor用来存储要从顶点着色器传递到片元着色器的颜色。

<script id="vertex-shader" type="x-shader/x-vertex">attribute vec2 aPos;//顶点坐标attribute vec4 aColor;//颜色varying vec4 vColor;//要向片元着色器传递的颜色void main(){gl_Position = vec4(aPos,0.0,1.0);//补齐坐标为4维向量vColor = aColor;//把我们的颜色直接赋值给要向片元着色器传递的颜色}
</script>

3.2 声明片元着色器

  片元着色中也声明了一个vColor，注意： 一定要和顶点着色器中的声明方式一模一样，这样才能自动接收从顶点着色器传递到片元着色器的颜色。

<script id="fragment-shader" type="x-shader/x-fragment">precision highp float;varying vec4 vColor;void main(){gl_FragColor = vColor;}
</script>

3.3 创建顶点和颜色的缓冲区

  先回顾上一篇中我们是怎么声明顶点的坐标的，我们用了一个数组来存储顶点的坐标

const vertices = new Float32Array([0.0,1.0,    -0.5,0.0,0.5,0.0,]);

  那么现在我们只需要在顶点坐标的后面加上对应的颜色，RGBA形式的表示即可。如：

const vertices = new Float32Array([-0.5,0.0,   1.0,0.0,0.0,1.0,//第一个点坐标 红色0.0,1.0,    0.0,1.0,0.0,1.0,//第二个点坐标 绿色0.5,0.0,    0.0,0.0,1.0,1.0//第三个点坐标 蓝色
]);

  绑定还是老样子：

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

3.4 指定变量从缓冲区获取值

  因为我们在顶点着色器中声明了两个变量，aPos和aColor，那么我们获取的时候，也要获取两次

let aPos = gl.getAttribLocation(program,"aPos");
let aColor = gl.getAttribLocation(program,"aColor");

  然后分别指定取值的方式

let length = Float32Array.BYTES_PER_ELEMENT;//数组中单个元素的字节长度
//指定aPos如何读取缓冲区   前 2 个值表示坐标，float类型，不使用归一化，6个值表示一个点的信息，从偏移0倍字节开始读
gl.vertexAttribPointer(aPos,2,gl.FLOAT,false,6*length,0);
gl.enableVertexAttribArray(aPos);
//指定aColor如何读取缓冲区  后 4 个值表示颜色，float类型，不使用归一化，6个值表示一个点的信息，从偏移2倍字节开始读
gl.vertexAttribPointer(aColor,4,gl.FLOAT,false,6*length,2*length);
gl.enableVertexAttribArray(aColor);
//绘制三角形，从零号索引开始，绘制三个点
gl.drawArrays(gl.TRIANGLES,0,3);

3.5 效果

3.6 varying的内涵

  如上图所示，三角形的三个顶点就是我们指定的颜色，中间的颜色是WebGL自动帮我们插值出来的。还记得片元着色器中的颜色值是怎么声明的吗？没错varying vec4 vColor;,varying翻译过来的意思是可变化的，所以这个量就叫做可变量。而它真正表示的意思是：这个片元着色器/片段着色器，它本质上是逐像素绘制的，而每一个像素的颜色都是可变化的，不是固定值，虽然从顶点传递时，传了一个固定值，但实际使用时，用的是WebGL帮我们自动插值出来的值，是一个变化了的值，所以叫它做可变量。

3.7 完整代码

const vertices = new Float32Array([-0.5,0.0,1.0,0.0,0.0,1.0,//第一个点坐标 颜色0.0,1.0,0.0,1.0,0.0,1.0,//第二个点坐标 颜色0.5,0.0,0.0,0.0,1.0,1.0//第三个点坐标 颜色
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
let aPos = gl.getAttribLocation(program,"aPos");
let aColor = gl.getAttribLocation(program,"aColor");
//绑定坐标
//指定aPos如何读取缓冲区   前 2 个值表示坐标，float类型，不使用归一化，6个值表示一个点的信息，从偏移0倍字节开始读
gl.vertexAttribPointer(aPos,2,gl.FLOAT,false,6*Float32Array.BYTES_PER_ELEMENT,0);
gl.enableVertexAttribArray(aPos);
//绑定颜色
//指定aColor如何读取缓冲区  后 4 个值表示颜色，float类型，不使用归一化，6个值表示一个点的信息，从偏移2倍字节开始读
gl.vertexAttribPointer(aColor,4,gl.FLOAT,false,6*Float32Array.BYTES_PER_ELEMENT,2*Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribArray(aColor);
//绘制三角形，从零开始，绘制三个点
gl.drawArrays(gl.TRIANGLES,0,3);

4 总结

  本篇我们通过指定三角形的三个顶点的颜色，绘制出了一个彩色的三角形，并梳理了整个程序的流程，了解了varying变量的内涵，这对我们理解后续的知识很重要，希望读者仔细揣摩，下期见。