attribute自定义顶点变量

下面给大家讲解，怎么给threejs几何体BufferGeometry自定义任意类型的顶点数据,同时顶点着色器代码里面声明一个同名的attribute顶点变量。

顶点.size属性

const geometry = new THREE.BufferGeometry();
geometry.attributes.size = new THREE.BufferAttribute(sizes, 1);

着色器顶点size变量

// 顶点着色器代码
const vertexShader = `
attribute float size;//着色器size变量
void main(){
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`

知识回顾：顶点数据

前面基础课程 (opens new window)关于BufferGeometry，介绍过顶点位置、颜色、UV、法向量等数据。

geometry.attributes.position
geometry.attributes.color
geometry.attributes.uv
geometry.attributes.normal

通过本章节前面学习，大家知道，ShaderMaterial默认会提供几个顶点数据的内置变量，比如顶点位置position、顶点颜色color、顶点UV坐标uv。

attribute vec3 position;// 默认提供,不用自己写
attribute vec3 color;// 默认提供,不用自己写
attribute vec2 uv;// 默认提供,不用自己写

// 顶点着色器代码
const vertexShader = `
void main(){
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`

上面两个知识点，确保你都非常熟悉以后，你可以跟着视频学习进行下面内容，也就是自定义几何体任意类型的顶点数据。

问题思考

大家思考一个问题，使用Points渲染几何体顶点数据的时候，怎么能让每一个顶点对应的方形点尺寸不同，你可以打开课件案例源码，预览下效果，然后自己尝试修改上节课的代码，实现下图的效果。

1. 自定义顶点数据geometry.attributes.size

模仿顶点位置坐标geometry.attributes.position的自定义，给几何体BufferGeometry自定义一个顶点size数据geometry.attributes.size。

size里面的每个顶点数据表示对应Points方形点尺寸gl_PointSize的缩放倍数。

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    25, 0, 0, //顶点2坐标
    50, 0, 0, //顶点3坐标
    75, 0, 0, //顶点4坐标
    100, 0, 0, //顶点5坐标
]);
//3个为一组，表示一个顶点的xyz坐标
geometry.attributes.position = new THREE.BufferAttribute(vertices, 3); 
const sizes = new Float32Array([
    1.0, //顶点1对应方形点尺寸缩放倍数
    0.8, //顶点2
    0.6, //顶点3
    0.4, //顶点4
    0.2, //顶点5
]);
// 1个数为一组表示对应顶点gl_PointSize的缩放倍数
geometry.attributes.size = new THREE.BufferAttribute(sizes, 1);

声明顶点尺寸size变量

attribute float size;声明顶点尺寸变量size，因为只有一个分量，数据类型不需要用向量，用浮点数float即可。

注意这里的着色器里面size变量和几何体的顶点尺寸属性geometry.attributes.sizesize名字保持一致，这样threejs才能从geometry获取geometry.attributes.size数据，传递给着色器变量size。

// 几何体自定的size属性
geometry.attributes.size = new THREE.BufferAttribute(sizes, 1);
// 顶点着色器代码
const vertexShader = `
attribute float size;//着色器size变量
void main(){
  ...
}
`

每个方形点尺寸单独控制

gl_PointSize = 20.0 * size;分别控制每个方形点的尺寸大小。

// 顶点着色器代码
const vertexShader = `
attribute float size;
void main(){
  gl_PointSize = 20.0 * size;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`