Benchmark results for Chrome, Firefox, IE show massive difference. Why?

Questions
1

The three,js benchmark I wrote displays 40K squares. ( they remain motionless ) The squares were created with:
THREE.PlaneGeometry(6, 6, 4, 4)
THREE.MeshBasicMaterial
The camera is perspective.
OrbitControls was used.
Stats.js was used

Results: Chrome 13 FPS, Firefox 5 FPS, IE 1 FPS ( running a windows desktop intel 3.4 GHZ and a mid to lower end Nvidia graphics card )

Q1) Can someone explain why the performance varies so greatly across the browsers? The performance difference is so large it makes me think I am totally missing something.

I have a question about, renderer.render(scene, camera);

Q2) Is the entire scene sent to the graphics card each time that renderer is called and if yes, could that be part of the explanation for the performance difference between browsers? And if the entire scene is sent to the graphics card with each renderer call is there a technique by which only the frustum data can be sent to the graphics card? ( assuming objects and lights… do not change from frame to frame )
Thank you

2

All three browsers have different WebGL implementations (although Chrome and FF both use ANGLE) and JavaScript engines. Since they differ in quality, you see a different app performance depending on which browser you use.

Yes. However, three.js (like any other 3D engine) tries to produce a frame in the most optimized way. View frustum culling (which is performed by default) is one such optimization.

1 Like
3

Thank you.
Good to know.

4

Try using PlaneBufferGeometry instead, you should see a performance increase.

In general, to show that many objects you would use either geometry batching (merging everything to a single geometry) or instancing (using one geometry and rendering it 40k times).

5

Great tip.
Thanks

6

Minor clarification: Using the BufferGeometry version will only improve the creation time of the geometry. The actual frametime will not be permanently improved.

1 Like