Emerald Geography

Demos and projects
1

Hey, I made a game called Emerald Geography using Babylon.js, and it is available on Steam. It’s a game that helps you learn the countries and capitals of the world on a cool, interactive globe. There are three game modes: find, type, and explore. You can focus on specific regions, such as Europe or Africa, and choose multiple themes for the globe.

7 Likes
2

Looking good! Can you tell us a little bit on how you compute the ray/country intersection? Is each country a separate mesh :thinking: ?

1 Like
3

GoOOoOod job!!

1 Like
4

Yes, each country is a separate mesh, and Babylon handles the raycast for the intersections via action managers. For example:

mesh.renderOverlay = true;

let pointerOverColorAction = new BABYLON.InterpolateValueAction(
    BABYLON.ActionManager.OnPointerOverTrigger,
    mesh,
    "overlayColor",
    BABYLON.Color3.White(),
    100,
    condition
);

actionManager.registerAction(pointerOverColorAction);

I have others that control alpha, pointer out, and pick actions. The condition involves what game mode it is. So if you’re finding capitals, then countries won’t highlight.

In an earlier version of the game, when I was just using a single sphere, I would determine which country you were over by converting a lat/long coordinate to 0-1 UV space and then looking up the unique color of the country in a texture. While it wasn’t as accurate as raycasting, it did allow me to color in large swaths of territory to make things easier to pick, such as the small islands of Micronesia or Kiribati. But I think the raycast approach is better.

There are about 200k triangles in the scene, so I’m impressed that Babylon can handle all the action managers at 60 fps. Kudos to whoever wrote it!

1 Like
5

I did :slight_smile: thanks for the compliment

1 Like