Best Practices

Note: This documentation is for the old 0.4.0 version of A-Frame. Check out the documentation for the current 1.5.0 version

VR Design

Designing for VR is different than designing for flat experiences. As a new medium, there are new sets of best practices to follow, especially to maintain user comfort and presence. This has been thoroughly written about so we defer to these comprehensive guides:

• Oculus Best Practices (for VR)
• Leap Motion VR Best Practices Guidelines

Some things to note:

• The common golden rule is to never unexpectedly take control of the camera away from users.
• Units (such as for position) should be considered meters. This is because the WebVR API returns pose in meters which is fed into most camera controls. By considering units as meters, we achieve expected scale.

Performance

Performance is critical in VR. A high framerate must be maintained in order for users to be comfortable. Here are some ways to help improve performance of an A-Frame scene:

• Use recommended hardware specifications.
• Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities. We want to maximize FPS and minimize everything else.
• Make use of the asset management system to benefit from browser caching and preloading. Trying to fetch assets while rendering is slower than fetching all assets before rendering.
• Look to make use of geometry merging to limit draw calls when multiple geometries are sharing the same material.
• If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
• Generally, the fewer number of entities and lights in the scene, the better.
• Make sure your textures’ resolutions are sized to powers of two (e.g., 256x256, 512x1024) in order to avoid the renderer having to resize the texture during runtime.

A-Frame

Some best practices for the framework:

• Don’t repeat yourself (DRY). Make use of mixins and templating to reduce the amount of copy-and-pasting and reduce the amount of HTML in your scene.
• Try to make use of the entity-component-system framework. Develop within components to encourage declarativeness and reusability.