如何使用Three.js InstancedBufferGeometry和InstancedBufferAttribute？

我相信这里描述的"实例化"提供了一种方法,可以为一个例如200个顶点模型的所有顶点/指标赋予一个属性:

http://blog.tojicode.com/2013/07/webgl-instancing-with.html

换句话说,这提供了一种方法,只有一个平移或方向属性数组,它将应用于模型的所有200个顶点.因此,"实例化"10K这些模型的场景只需要10K属性,而不是2000K.

显然三个InstancedBufferGeometry和InstancedBufferAttribute对象提供了这个,但我没有找到文档,除了对象的稀疏描述.我相信他们使用的是ShaderMaterial,这很好,尽管除了在"vanilla"Three.js中使用GLSL之外还有其他方法.

有人可以解释他们如何工作以及如何在Three.js中使用它们？

我自己在寻找这个答案时偶然发现了你的问题.以下是两个使用实例化的示例(直接来自threejs.org/examples):

https://threejs.org/examples/?q=instanc#webgl_buffergeometry_instancing

https://threejs.org/examples/?q=instanc#webgl_buffergeometry_instancing_dynamic

简要说明:

THREE.InstancedBufferGeometry和之间的主要区别在于THREE.BufferGeometry前者可以使用THREE.InstancedBufferAttributes将用于每个实例的特殊属性().

想象一下,你正在创建一个盒子,你想要有几个实例.顶点,法线和UV缓冲区都是标准THREE.BufferAttribute对象,因为它们描述了基本形状.但是为了将每个实例移动到自己的位置,您需要定义一个THREE.InstancedBufferAttribute来保存位置(示例通常将此属性命名为" offset").

您的顶点引用数量THREE.InstancedBufferAttributes描述了您将拥有多少个实例.例如,将9个值放入offset表示将有3个实例(这包括原始形状).您还可以通过设置THREE.InstancedBuferGeometry.maxInstancedCount值来控制绘制的数量.

最后,您将需要一个着色器,以帮助控制实例化的属性.

小例子:

var cubeGeo = new THREE.InstancedBufferGeometry().copy(new THREE.BoxBufferGeometry(10, 10, 10));
//cubeGeo.maxInstancedCount = 8;

cubeGeo.addAttribute("cubePos", new THREE.InstancedBufferAttribute(new Float32Array([
  25, 25, 25,
  25, 25, -25, -25, 25, 25, -25, 25, -25,
  25, -25, 25,
  25, -25, -25, -25, -25, 25, -25, -25, -25
]), 3, 1));

var vertexShader = [
  "precision highp float;",
  "",
  "uniform mat4 modelViewMatrix;",
  "uniform mat4 projectionMatrix;",
  "",
  "attribute vec3 position;",
  "attribute vec3 cubePos;",
  "",
  "void main() {",
  "",
  "	gl_Position = projectionMatrix * modelViewMatrix * vec4( cubePos + position, 1.0 );",
  "",
  "}"
].join("\n");
var fragmentShader = [
  "precision highp float;",
  "",
  "void main() {",
  "",
  "	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);",
  "",
  "}"
].join("\n");

var mat = new THREE.RawShaderMaterial({
  uniforms: {},
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  side: THREE.DoubleSide,
  transparent: false
});

var mesh = new THREE.Mesh(cubeGeo, mat);

scene.add(mesh);

html * {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
}

#host {
  width: 100%;
  height: 100%;
}