如何使用Three.js InstancedBufferGeometry和InstancedBufferAttribute？

Question

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

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

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

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

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

Answer 1

我自己在寻找这个答案时偶然发现了你的问题.以下是两个使用实例化的示例(直接来自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%;
}

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<div id="host"></div>

<script>
  var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    FOV = 35,
    NEAR = 1,
    FAR = 1000;

  var renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(WIDTH, HEIGHT);
  document.getElementById('host').appendChild(renderer.domElement);

  var stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0';
  document.body.appendChild(stats.domElement);


  var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
  camera.position.z = 250;

  var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
  trackballControl.rotateSpeed = 5.0; // need to speed it up a little

  var scene = new THREE.Scene();

  var light = new THREE.PointLight(0xffffff, 1, Infinity);
  camera.add(light);

  scene.add(light);

  function render() {
    if (typeof updateVertices !== "undefined") {
      updateVertices();
    }
    renderer.render(scene, camera);
    stats.update();
  }

  function animate() {
    requestAnimationFrame(animate);
    trackballControl.update();
    render();
  }

  animate();
</script>

Answer 2

这个问题有点令人困惑，但我会尽力而为。

我认为您混淆了一些事情，我在three.js 用户中看到了很多。首先，我认为属性术语是错误的。你不是在创造几千上万的属性，而不是如网状的实体，可以有一个属性-position或多个uv，normal，aMyAttribute等。

事实上，webgl 可以处理的最大属性数是不同的，但球场是 16 个，而不是数千个。

一个属性可以包含定义 200 个“顶点”的数据，但这也是相对的，它们可以有 2 个组件，也可以有 4 个组件。

当您从“200 个顶点模型”中制作多个“对象”时，您不会乘以几何体。属性计数没有增加，我实际上不确定制服会发生什么，但就 GPU 而言，它仍然保持 200 个顶点。Javascript 仍然包含一些属性和统一位置，以及某个Geometry类的一个实例。

你要做的是“节点/对象”，在javascript中你会有多个sayMesh对象。这将包含各种其他类型、矩阵、向量、四元数等。

当您调用渲染函数时，渲染器将为这些节点中的每一个发出绘制调用。每次这样做时，它都需要设置 webgl 的状态来处理该特定的绘制调用。如果这是散布在场景周围的同一个对象，唯一不同的是位置/旋转/缩放的统一。如果他们有材料，那么它可能是一种颜色的制服，或不同的质地。无论哪种方式，这都会产生开销，并减慢速度。

假设您的模型是一棵树。从中创建一个森林并进行渲染a forest，而不是many trees消除这种开销，仍然进行相同数量的着色器处理。每棵树的每个顶点都需要运行一个着色器。

这当然会增加您的属性持有的数据。现在，在一些方便的对象空间（最好称其为“树空间”）中，不是保存 200 个顶点，而是需要在“森林空间”中保存 200 x N 个顶点。IE。的顶点tree 0存在于森林中的某处，并且相同的顶点tree N存在于森林中的其他地方。如果您要为每棵树创建一个新几何体，将变换烘焙到其顶点，然后与另一棵树合并等等，就会发生这种情况。

实例化可以让您更聪明地处理这种情况。您可以保存原始树的 200 个顶点，以及描述它们将被绘制 N 次的位置的属性，而不是保存所有共享一个共同属性（它是同一棵树）的单个顶点。因此，与其合并几何图形并单独对它们进行变换，您还可以构造一个仅包含变换的属性。

您很可能无法将其与普通材料一起使用，因为它们不知道如何处理您的自定义属性。但是，通过three.js 处理着色器的方式，注入一些逻辑并扩展现有材料并不太难。