Making the Mini-Map

While the bulk of the next chapter will focus on the Babylon.js GUI, we’ll dip our feet into the waters of the topic of User Interfaces (UIs) as we take a moment to discuss coordinate systems and polar coordinates. First, though, let’s look at how we get to the point where talk of coordinate systems becomes necessary by examining the initializeGui method of our Playground.

Note

In the application, this logic is contained in the driving-gui.js module in /src/driving/. Aside from moving the code to load the Node Material into it, the code is identical to the Playground.

At the beginning of this chapter, we talked about Viewports in the Initializing the Driving Phase Scene section, and we described two main characteristics – the viewport’s size and position. For the main Scene camera, the Viewport stretches the full size of the screen, but for our GUI system, the Viewport is defined differently.

The GUI Camera

The initializeGui...