CODEWITHSUNDEEP
htmlanimationaframeframe-ratevirtual-reality
Siddharth Gupta
Siddharth Gupta

Reputation: 251

How to increase FPS of A-Frame(HTML)

I am making a VR animation using A-Frame (HTML). My animation has many 3D models. But problem is that when I run the animation it gives low fps (15-20) and high draw calls (230-240). Due to this both animation and camera control are lagging. So, how to increase fps and reduce draw calls?

Upvotes: 2

Views: 729

Answers (1)

Diarmid Mackenzie
Diarmid Mackenzie

Reputation: 826

The number of draw calls sounds high, but not so high as to cause a frame rate drop as low as 15-20 FPS (though it depends a bit what spec system you are running on).

As well as looking at ways to reduce draw calls, you might also want to reduce the complexity of the models you are using, or the resolution of the textures, and look into other possible causes of performance problems.

Some options:

  • reducing texture resolutions - just open in a picture editor like Paint or GIMP and reduce the resolution. Keep textures to power of two resolutions where possible, e.g. 512 x 512 or 1024 x 1024.

  • reducing model complexity. Look at decimation. Best done outside the browser as a pre-processing step, with a 3D modelling tool such a blender. Also, worth checking how many meshes are in each model, and whether those can be combined in a single mesh.

  • reducing calls. You need to either merge geometries or (if you are using the same model multiple times) use instancing. Some suggestions for instancing here: Is there an instancing component available for A-Frame to optimize my scene with many repeated objects?. Merging geometries will involve writing some Javascript code yourself, but might be a better option if you don't have repeated geometries.

If you haven't already done this, also worth reviewing this list of performance tips here: https://aframe.io/docs/1.2.0/introduction/best-practices.html#performance

It could be something else on that list, e.g. raycasting, garbage collection issues etc. that's causing the problem.

Using the browser debuger to profile your code may give some further clues as to what's going on with performance.

Upvotes: 1

Related Questions