WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

BufferGeometry

缓冲区类型几何体BufferGeometry是Three.js的核心类之一,立方体BoxBufferGeometry、圆柱体CylinderBufferGeometry、球体SphereBufferGeometry等几何体类的基类都是BufferGeometry

BufferGeometry对原生WebGL中的顶点位置、顶点纹理坐标UV、顶点颜色、顶点法向量、顶点索引等顶点数据进行了封装,如果你有原生WebGL基础,你看下文档,阅读下Three.js源码其实很容易理解,如果没有原生WebGL基础建立学习下本站的WebGL视频教程,关于BufferGeometry的内容可以本站发布的Three.js视频教程第二章。

BufferGeometry自定义一个几何体

立方体BoxBufferGeometry、圆柱体CylinderBufferGeometry、球体SphereBufferGeometry等几何体类都包含了特定的生成该几何体形状所有顶点数据的算法,有兴趣可以去阅读相关的源码,这里简单展示下如果通过基类BufferGeometry自定义一个几何体。

//创建一个缓冲类型的几何体对象
var geo = new THREE.BufferGeometry();
//类型数组创建顶点数据  数组中包含6个顶点的xyz坐标数据
var verArr = new Float32Array([
  1, 2, 3,
  49, 2, 4,
  -1, 99, -1,
  1, 1, 9,
  6, 5, 108,
  48, 1, 3,
]);
//三个为一组,表示一个顶点坐标
var BufferAttribute = new THREE.BufferAttribute(verArr, 3);
// 设置几何体的顶点位置数据
geo.attributes.position = BufferAttribute;

上面同样一个几何体,如果你创建不同的模型,可以渲染出来不同的效果,这里之所以说着一点,也是为了让你理解顶点指的是什么。

网格模型:三角形渲染模式,没有顶点索引数据复用顶点的情况下,每个三角形包含三个顶点,上面6个顶点可以渲染两个三角形。

// 三角面(网格)渲染模式
var material = new THREE.MeshPhongMaterial({
  color: 0x1111ff, //三角面颜色
  side: THREE.DoubleSide //两面可见
});
var mesh = new THREE.Mesh(geometry, material);

线模型:线渲染模式,两点确定一条直线

// 线条渲染模式
var material=new THREE.LineBasicMaterial({color:0xff0000});
//线条模型对象
var line=new THREE.Line(geo,material);

点模型:点渲染模式,6个顶点渲染出来6个方形点

var material = new THREE.PointsMaterial({
  color: 0xff1133,
  size: 6.0 //点对象像素尺寸
});
 //点模型对象
var points = new THREE.Points(geo, material);

.attributes属性

three.js提供的BufferAttribute类用于创建一个表示一组同类顶点数据的对象,可以用BufferAttribute

几何体的.attributes属性是除了顶点索引数据以外所有顶点数据的集合,比如.attributes.position 表示顶点位置坐标数据,.attributes.uv表示顶点纹理坐标UV数据,.attributes.normal表示顶点法向量数据,所有的类型的顶点数据都是一一对应的。.attributes.position.attributes.uv.attributes.normal的属性值都是BufferAttribute对象。

.index属性

.index属性的值是顶点索引数据构成的BufferAttribute对象,如果你有一定的原生WebGL基础,应该知道顶点索引的功能是复用顶点数据,比如一定矩形有一个顶点,如果不设置顶点索引,需要至少6个顶点才能绘制两个三角形组合出来一个矩形,如果定义顶点索引数据,重合的两个顶点可以复用顶点数据,只需要顶点4个顶点坐标即可。

6个顶点定义一个矩形

//类型数组创建顶点位置position数据
var vertices = new Float32Array([
  10, 10, 10,   //顶点1位置
  90, 10, 10,  //顶点2位置
  90, 90, 10, //顶点3位置

  10, 10, 10,   //顶点4位置   和顶点1位置相同
  90, 90, 10, //顶点5位置  和顶点3位置相同
  10, 90, 10,  //顶点6位置
]);
var attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue

4个顶点定义一个矩形

var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array([
  10, 10, 10, //顶点1位置
  90, 10, 10, //顶点2位置
  90, 90, 10, //顶点3位置
  10, 90, 10, //顶点4位置
]);
var attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue

// Uint16Array类型数组创建顶点索引数据,如果顶点数量更多可以使用Uint32Array来创建顶点索引数据的类型数组对象
var indexes = new Uint16Array([
  0, 1, 2, 0, 2, 3,
])
// 索引数据赋值给几何体的index属性
geometry.index = new THREE.BufferAttribute(indexes, 1);

.addAttribute()方法

.addAttribute()方法执行的时候,本质上是改变的.attributes属性,.attributes属性可以直接设置.attributes.position.attributes.uv等属性,也可以通过.addAttribute()方法设置。

直接设置.attributes.position

geometry.attributes.position = new THREE.BufferAttribute(vertices, 3)

通过.addAttribute()方法设置.attributes.position等顶点属性值

geometry.addAttribute('position',new THREE.BufferAttribute(vertices,3));
geometry.addAttribute('normal',new THREE.BufferAttribute(normals,3));
geometry.addAttribute('uv',new THREE.BufferAttribute(uvs,2));

方法.fromGeometry()

通过.fromGeometry()方法可以把一个几何体Geometry转化为一个缓冲类型几何体BufferGeometry

var box = new THREE.BoxGeometry()
var BufferBox = new THREE.BufferGeometry()
BufferBox.fromGeometry(box)

Three.js渲染器解析BufferGeometry

Three.js渲染器在渲染场景的时候,会从缓冲类型几何体对象BufferGeometry中提取顶点位置、法向量、颜色、索引等数据,然后调用WebGL相关原生API创建顶点缓冲区,这样GUP可以读取顶点数据在顶点着色器中进行逐顶点计算处理。关于WebGL渲染器WebGLRenderer如何解析BufferGeometry对象的,可以查看/src/renderers/webgl目录下的WebGLAttributes.jsWebGLGeometries.js等文件。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com