3D 网站对性能要求很高。重要的是要记住，并不是所有用户都有相同的设备。

有些用户的设备是高端的，拥有强大的 GPU和高分辨率屏幕，而另一些则是低端设备，配备较弱的 GPU和低分辨率屏幕。

为了确保尽可能多的用户能够在他们的设备上以最佳效果体验你的3D 网络应用，你需要优化这些应用并避免不必要的计算。

在本课程中，我们将看到不同的技术来优化我们的React Three Fiber项目以及一些常见的陷阱。

Draw calls（绘制调用）

在3D 图形中，draw call（绘制调用）是发送到GPU的命令，告知图形 API需要绘制什么以及如何绘制。

draw call越多，GPU的工作量就越大。

要监控你的React Three Fiber项目中的draw call数量，可以使用 Chrome 的 SpectorJS 扩展。

安装扩展后，可以通过点击Chrome 工具栏中的 Spector.js 图标打开 SpectorJS 面板。

点击红色圆圈按钮开始记录draw call。等待几秒钟，SpectorJS 面板将会打开。

默认情况下，它打开在commands 选项卡。它展示了所有发送到GPU的命令。在左侧列中，你可以查看每个 draw call的缩略图。

最初的draw call是为阴影准备的。然后你可以看到为角色的draw call，以及为每个立方体的 draw call（后者应优化）。

信息选项卡还提供一些有用的信息，如顶点数量和draw call 数量。

现在我们将看看如何优化我们的React Three Fiber项目以减少 draw call的数量。

实例化

实例化的概念在3D图形中广泛使用。它允许对多个对象重用相同的几何体和材质。

当您想用不同的 position、scale、rotation 或 color 多次渲染相同对象时，这是一种很好的解决方案。

它将所有的绘制调用合并为一个，并大幅提升性能。

Drei library 提供了 Instances 组件来帮助我们简单地实现它。

我们需要用 Instances 组件包装我们想要实例化的几何体和材质。