CODEWITHSUNDEEP
three.jsrenderingframe-rate
roob
roob

Reputation: 2529

Why does fps drop when increasing the scale of objects in three js

I have a scene with a single camera and one PlaneBufferGeometry

If I make this plane size 1x1 I get 60fps

If I make this plane size 1000x1000 I get <20fps

Why does this happen? I am drawing the same number of vertices to the screen.

Here is a fiddle showing the problem

Just change the definition of size between 1 and 1000 to observe the problem.

var size = 10000;
//size = 1;
var geometry = new THREE.PlaneBufferGeometry(size, size);

I am adding 50 identical planes in this example. There isn't a significant fps hit with only one plane.

Upvotes: 2

Views: 1488

Answers (2)

Martin Schuhfu&#223;
Martin Schuhfu&#223;

Reputation: 6986

@pleup has a good point there, to extend on that a little bit: Even a low-end GPU will have absolutely no problem overdrawing (painting the same pixel multiple times) several times (i'd say something like 4 to 8 times) at fullscreen and still keep it up at 60 FPS. This number is likely a bit lower for webgl due to the compositing with the DOM and browser-UI, but it's still multiple times for sure.

Now what is happening is this: you are in fact creating 50 planes, and not only one. All of them with the same size in the same place. No idea why, but thats irrelevant here. As all of them are in the same place, every single pixel needs to be drawn 50 times, and worst case that is 50 times the full screen-area.

Upvotes: 2

pleup
pleup

Reputation: 917

It's definitely normal. A larger plane cover more surface on the screen, thus more pixels. More fragments are emitted by the rasterisation process. For each one, the GPU will check if it pass the depth test and/or the stencil test. If so, it will invoke the fragment shader for each pixels.

Try to zoom in your 1x1 plane, until it cover the whole screen. Your FPS will drop as well.

Upvotes: 5

Related Questions