如何使用代码更新事物

默认情况下,所有对象都会自动更新它们的矩阵(如果它们已添加到场景中)

const object = new v3d.Object3D(); scene.add(object); 或者它们是已添加到场景中的另一个对象的子节点: const object1 = new v3d.Object3D(); const object2 = new v3d.Object3D(); object1.add(object2); scene.add(object1); //object1 and object2 will automatically update their matrices

但如果您知道对象将是静态的,可以禁用更新,并在需要时手动更新变换矩阵。

object.matrixAutoUpdate = false; object.updateMatrix();

BufferGeometry

BufferGeometries 将(顶点位置、面的索引、法线、颜色、UV和任何自定义属性)信息存储在 buffers 中——也就是 类型化的数组 。 这使得它们通常比标准的几何体更快,缺点是更难用。

关于更新 BufferGeometries , 最重要的事情是您不能调整缓冲区的大小(这种操作开销很大,相当于创建了个新的几何体)。 但您可以更新缓存区的内容。

这意味着如果您知道 BufferGeometry 的一个属性会增长,比如顶点的数量, 您必须预先分配足够大的 buffer 来容纳可能创建的任何新顶点。 当然,这也意味着 BufferGeometry 将有一个最大大小 —— 无法创建一个可以高效地无限扩展的BufferGeometry。

我们以在渲染时扩展的line来示例。我们将分配可容纳500个顶点的空间但起初仅绘制2个, 使用 在500个顶点的缓冲区中,但首先只使用 BufferGeometry.drawRange

const MAX_POINTS = 500; // geometry const geometry = new v3d.BufferGeometry(); // attributes const positions = new Float32Array(MAX_POINTS * 3); // 3 vertices per point geometry.setAttribute('position', new v3d.BufferAttribute(positions, 3)); // draw range const drawCount = 2; // draw the first 2 points, only geometry.setDrawRange(0, drawCount); // material const material = new v3d.LineBasicMaterial({ color: 0xff0000 }); // line const line = new v3d.Line(geometry, material); scene.add(line);

然后我们随机增加顶点到line中,以这样的一种方式:

const positions = line.geometry.attributes.position.array; let x, y, z, index; x = y = z = index = 0; for (let i = 0, l = MAX_POINTS; i < l; i++) { positions[index ++] = x; positions[index ++] = y; positions[index ++] = z; x += (Math.random() - 0.5) * 30; y += (Math.random() - 0.5) * 30; z += (Math.random() - 0.5) * 30; }

如果要更改第一次渲染后渲染的 点数 ,执行以下操作:

line.geometry.setDrawRange(0, newValue);

如果要在第一次渲染后更改position数值, 则需要像这样设置needsUpdate标志:

line.geometry.attributes.position.needsUpdate = true; // required after the first render

如果您在初始渲染后改变了位置数据值, 您可能需要调用 '.computeBoundingSphere()' ,以便重新计算几何体的边界球。

line.geometry.computeBoundingBox(); line.geometry.computeBoundingSphere();

此fiddle案例 展示了一个可参考的动态线条。

示例:

WebGL / custom / attributes
WebGL / buffergeometry / custom / attributes / particles

材质 | Materials

所有uniforms值都可以自由改变(比如 colors, textures, opacity 等等),这些数值在每帧都发给shader。

GL状态相关参数也可以随时改变(depthTest, blending, polygonOffset 等)。

在运行时无法轻松更改以下属性(一旦material被渲染了一次):

这些变化需要建立新的shader程序。您需要设置

material.needsUpdate = true

请记住,这可能是相当慢的,而且会引起帧率的紊乱(特别是在Windows上,因为在DirectX中着色器的编译比OpenGL慢)。

为了获得更流畅的体验,您可以通过零强度的灯光、白色的纹理或零密度的雾等 "dummy" 值在一定程度上模拟这些特征的变化。

您可以自由地改变几何体块的材质,但是您不能改变一个物体如何被分割成块(根据面的材质)。

如果您需要在运行时使用不同的材质配置:

如果材质/块的数量很少,您可以事先预先划分物体(例如,人的头发/脸部/身体/上衣/裤子,汽车的前部/侧面/顶部/玻璃/轮胎/内部)。

如果数量很大(例如,每个面可能有所不同),请考虑不同的解决方案,例如使用属性/纹理来驱动不同的每个面部外观。

示例:

WebGL / materials / car
WebGL / webgl_postprocessing / dof

纹理

图像、画布、视频和数据纹理如果被改变,需要设置以下标记(flag):

texture.needsUpdate = true;

渲染目标自动更新。

示例:

WebGL / materials / video
WebGL / rtt

摄影机

摄影机的位置和目标将会自动更新。如果您需要改变:

那么您需要重新计算投影矩阵:

camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();