为什么在三个js中增加对象的比例时fps会下降
Why does fps drop when increasing the scale of objects in three js
我有一个场景只有一个相机和一个 PlaneBufferGeometry
如果我将这个平面大小设置为 1x1，我将得到 60fps
如果我将这个平面尺寸设置为 1000x1000，我得到 <20fps
为什么会这样？我在屏幕上绘制了相同数量的顶点。
Here is a fiddle showing the problem
把size的定义改在1到1000之间就可以观察到问题了
var size = 10000;
//size = 1;
var geometry = new THREE.PlaneBufferGeometry(size, size);
我在这个例子中添加了 50 个相同的平面。只有一架飞机没有显着的 fps 命中率。
绝对正常。更大的平面覆盖屏幕上的更多表面，因此像素更多。
光栅化过程发出更多片段。对于每一个，GPU 都会检查它是否通过了深度测试 and/or 模板测试。如果是这样，它将为每个像素调用片段着色器。
尝试放大您的 1x1 平面，直到它覆盖整个屏幕。您的 FPS 也会下降。
有一个很好的观点，稍微扩展一下：即使是低端 GPU 也绝对没有问题多次透支（多次绘制相同的像素）（我会在全屏时说 4 到 8 次之类的话）并仍然保持在 60 FPS。由于与 DOM 和浏览器-UI 的合成，这个数字对于 webgl 可能有点低，但肯定仍然是多次。
现在发生的事情是这样的：您实际上正在创建 50 个平面，而不是一个。所有这些都在同一个地方具有相同的大小。不知道为什么，但这与这里无关。由于它们都在同一个地方，每个像素需要绘制 50 次，最坏的情况是整个屏幕区域的 50 倍。
我有一个场景只有一个相机和一个 PlaneBufferGeometry
如果我将这个平面大小设置为 1x1，我将得到 60fps
如果我将这个平面尺寸设置为 1000x1000，我得到 <20fps
为什么会这样？我在屏幕上绘制了相同数量的顶点。
Here is a fiddle showing the problem
把size的定义改在1到1000之间就可以观察到问题了
var size = 10000;
//size = 1;
var geometry = new THREE.PlaneBufferGeometry(size, size);
我在这个例子中添加了 50 个相同的平面。只有一架飞机没有显着的 fps 命中率。
绝对正常。更大的平面覆盖屏幕上的更多表面，因此像素更多。 光栅化过程发出更多片段。对于每一个，GPU 都会检查它是否通过了深度测试 and/or 模板测试。如果是这样，它将为每个像素调用片段着色器。
尝试放大您的 1x1 平面，直到它覆盖整个屏幕。您的 FPS 也会下降。
现在发生的事情是这样的：您实际上正在创建 50 个平面，而不是一个。所有这些都在同一个地方具有相同的大小。不知道为什么，但这与这里无关。由于它们都在同一个地方，每个像素需要绘制 50 次，最坏的情况是整个屏幕区域的 50 倍。