Question

我的任务是为项目演示重新设计这个Three.js示例的核心。 http://threejs.org/examples/#webgl_gpgpu_birds问题是我还被要求将由3个三角形组成的鸟类中的元素更改为不同的形状。为了形成新的形状，我需要3-4倍的许多三角形/顶点。

由于示例设置的性质以及通过缓冲区几何体和着色器创建，组织和动画化鸟类及其顶点的数量，这样做很困难（至少对我来说是这样的））。我已经完成了演示，尝试改变我所能做的一切，将循环点更改为着色器看到的单个鸟。

有谁比我更聪明有任何洞察力（或经验）调整此演示来修改形状？通过向我需要的形状添加更多三角形/顶点，我已经成功地将三角形和顶点更新为新形状。

示例:(再添加3个以形成新的三角形。）

verts_push(
    2, 0, 0,
    1, 1, 0,
    0, 0, 0
);
verts_push(
    -2, 0, 0,
    -1, 1, 0,
    0, 0, 0
);
verts_push(
    0, 0, -15,
    20, 0, 0,
    0, 0, 0
);

示例：将三角形/顶点的数量加倍。

var triangles = BIRDS * 6;
var points = triangles * 3;
var vertices = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );

但是代码中的某处我无法找到我需要修改/乘法的内容，以便着色器正确计算顶点并知道这些鸟不再是3个具有9个顶点的三角形，而是现在6个三角形18个顶点（或更多）。我要么得到错误，要么得到带有顶点的奇怪形状，我不想移动，移动，因为无论我添加的是不是正确大小的顶点到着色器正在寻找的东西。到目前为止，我没有运气能够让它正常工作。任何帮助，将不胜感激！

Answer 1

经过大量的反复试验后，我想出了我需要修改的内容，以便添加更多三角形并编辑示例中的单个鸟。为了我的目的，我每三倍的三角形数量增加了三倍。通过进行以下更改。

编辑1：将三角形的数量乘以3

var triangles = BIRDS * 3 * 3;

编辑2：增加从3推送到9的顶点集数

verts_push(0, 0, 0, 0, 0, 0, 0, 0, 0 );
verts_push(0, 0, 0, 0, 0, 0, 0, 0, 0 );
verts_push(0, 0, 0, 0, 0, 0, 0, 0, 0 );
verts_push(0, 0, 0, 0, 0, 0, 0, 0, 0 );
verts_push(0, 0, 0, 0, 0, 0, 0, 0, 0 );
verts_push(0, 0, 0, 0, 0, 0, 0, 0, 0 );
verts_push(0, 0, 0, 0, 0, 0, 0, 0, 0 );
verts_push(0, 0, 0, 0, 0, 0, 0, 0, 0 );

编辑3：在for循环中，对birdVertex属性进行以下更改

birdVertex.array[ v         ] = v % (9 * 3);

这成功地为我提供了足够的顶点，以便开始创建新的形状以及在birdVS着色器中控制我想要的点。

这甚至适用于旧版本的Three.js（我用r.76测试过）

Three.js WebGL GPGU Birds示例修改形状＆amp;顶点数

1 个答案: