顶点颜色varying插值计算

本节课结合顶点着色器、片元着色器代码，给家讲解下顶点颜色的插值计算。

知识回顾：几何体顶点颜色geometry.attributes.color

知识回顾：9.18 顶点颜色插值 (opens new window)

比如一条直线，你把直线几何体两个端点，分别设置一个颜色，threejs会根据两端的颜色，在两点之间，按照距离远近插入不同颜色，就是所谓的颜色插值计算，距离某个点越近受某个点颜色影响越大。

对于网格的三角形也是类似，三角形内部一个点的颜色，同时收到三个点的颜色影响，距离某个点越近，受影响越大。

设置顶点颜色

课件演示文件，ShaderMaterial对应的几何体已经提前给大家设置了一个三角形对应的三个顶点数据。

const geometry = new THREE.BufferGeometry(); //创建一个几何体对象
const vertices = new Float32Array([//类型数组创建顶点数据
  0, 0, 0, //顶点1坐标
  50, 0, 0, //顶点2坐标
  0, 25, 0, //顶点3坐标
]);
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);

ShaderMaterial对应的几何体设置顶点颜色数据。

const colors = new Float32Array([
  1, 0, 0, //顶点1颜色 
  0, 0, 1, //顶点2颜色
  0, 1, 0, //顶点3颜色
]);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3); 

允许用顶点颜色渲染vertexColors:true,

ShaderMaterial和原来的网格材质一样，设置vertexColors:true,，允许设置使用顶点颜色渲染

const material = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  vertexColors:true,//允许设置使用顶点颜色渲染
});

内置变量

前面给大家讲过，ShaderMaterial默认提供了一个内置变量position,表示顶点的位置坐标，数据来自几何体顶点位置数据geometry.attributes.position。

除此外，ShaderMaterial还有一个内置变量color,表示顶点的颜色数据，数据来自你定义的几何体顶点颜色属性geometry.attributes.color

// 顶点着色器代码
const vertexShader = `
// attribute vec3 color;//ShaderMaterial默认提供不用手写
void main(){
  // 投影矩阵 * 模型视图矩阵 * 模型顶点坐标
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`

顶点颜色插值计算

color变量表示插值之前的顶点颜色数据，varying关键字声明一个插值计算后的顶点颜色变量vColor。

// 顶点着色器代码
const vertexShader = `
// attribute vec3 color;//默认提供不用手写
varying vec3 vColor;// varying关键字声明一个变量表示顶点颜色插值后的结果
void main(){
  // 投影矩阵 * 模型视图矩阵 * 模型顶点坐标
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`

顶点数据插值计算语法：在顶点着色器主函数main里面，把顶点数据赋值给另一个varying声明的变量即可。

// 顶点着色器代码
const vertexShader = `
// attribute vec3 color;//默认提供不用手写
varying vec3 vColor;// varying关键字声明一个变量表示顶点颜色插值后的结果
void main(){
  vColor = color;// 顶点颜色数据进行插值计算
  // 投影矩阵 * 模型视图矩阵 * 模型顶点坐标
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`

如果你想在片元着色器中获取顶点着色器中顶点颜色数据插值计算的结果vColor,非常简单，用关键字varying声明一个与同名变量vColor就行。

这里注意，你可能会好奇，通过color的顶点会插值得到多少个新的颜色vColor,很简单，与片元的数量一样。

换句话说就是每个片元都有一个对应的vColor颜色数据，你可以把vColor赋值给gl_FragColor。

// 片元着色器代码
const fragmentShader = `
varying vec3 vColor;// 顶点片元化后有多少个片元,顶点颜色插值后就有多少个颜色数据
void main() {
    gl_FragColor = vec4(vColor,1.0);
}
`