Importing Models and Performance

You can import many different 3D file types into A-Frame such as OBJ, JSON, Collada, and glTF. We found the least friction with the Collada format, so that’s what we went with. If we were to do it again, we’d use a more performant file type such as glTF.

When using WebVR frameworks, having a low polygon count is critical for achieving a consistent framerate. Our scene consists of about 50,000 faces, which is on the upper end of what’s recommended for today’s smartphones. Half way through our modeling process we had to go back and reduce detail because of these limitations.

Lighting

Lighting is a key aspect to the aesthetic of a scene. For our snow globe, we used three lights. The sun and moon have tinted lights that are positioned inside their models, and there is an ambient light that acts as a neutral fill light for the rest of the scene.

To make the scene more dynamic, we wrote a component to rotate the lights based on what time it is. At noon the sun is at its highest, and at midnight the moon is at its highest.

Cameras

Utilizing different perspectives is what makes the experience special, and that is done with cameras. There are two cameras: a wide angle orbital camera and a first-person camera positioned in the blimp. We switch to the first-person camera when the user clicks on the “Enter VR” button or “return” key on the keyboard and vice versa.