爲什麼FPS下降三個JS

Question

我有一個攝像頭和一個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命中。

Answer 1

這絕對是正常的。一個更大的平面覆蓋更多的屏幕表面，因此更多的像素。 柵格化過程發出更多片段。對於每一個，GPU都會檢查它是否通過了深度測試和/或模板測試。如果是這樣，它將調用每個像素的片段着色器。

嘗試放大您的1x1平面，直到它覆蓋整個屏幕。你的FPS也會下降。

Answer 2

@pleup在那裏有一個很好的觀點，有一點點延伸：即使是低端的GPU也不會出現透視（多次繪製相同像素）的問題（我會說4到8倍），並保持在60 FPS。由於與DOM和瀏覽器UI的合成，這個數字對於webgl來說可能要低一些，但它肯定是多次。

現在發生的事情是：您實際上創造了50架飛機，而不僅僅是一架飛機。他們都在同一個地方的大小相同。不知道爲什麼，但那不重要。由於它們都在同一個地方，每個像素需要繪製50次，最壞的情況是全屏區域的50倍。