Babylon 3D Geography

Demos and projects
1

Hello ,

Announcing the preview of the very first “stable” version (still some bug but usable) of the Babylon.js Map Engine!
image

This tool allows users to navigate through the entire world, and even planets, with different perspectives such as a holographic view or a more immersive spatial view (currently under testing).

Key Features:

  • High Performance: The online demo operates with only 2 draw calls and boasts a theoretical frame rate exceeding 3000.
  • Mobile Optimization: The engine runs smoothly on mobile devices, although improvements for touch screen interactions are ongoing.
  • 3D Elevation Data: The elevation data is sourced from various layers, with the current demo utilizing MapZen.
  • Dynamic Texture Resolutions: Textures are sourced from multiple providers and their resolutions are not tied to DEM resolution. Dynamic resolution adapts based on the camera’s distance.
  • Vectorial Drawing Support: The surface supports vectorial drawing to display information effectively.
  • Upcoming 3D Tiles Support: Plans are underway to introduce 3D Tiles with GLTF support, building on my experience with the Autodesk to Babylon exporter.
  • Leaflet support: Plans to support Leaflet API.
  • …

I’m exploring the possibility of open-sourcing this project to enable the community to create 3D maps with the full power of Babylon.js.

Thank you all for your support, and stay tuned for more updates!

Best regards,

22 Likes
2

This rocks!!

3 Likes
3

It’s time to abandon cesium

1 Like
4

I love this so much! :heart_eyes:

Maybe I can use this technique to get real terrains and make the antigravity game a ‘Anti-Gravity World Tour’ :thinking: :crazy_face:

1 Like
5

Lol, not yet, Cesium is a world class software, where this is a demo compiled over my weekends :slight_smile:

6

Can you update the link please @Guillaume_Pelletier as it appears to have rotted. Thank you! :grin:

2 Likes
7

@Guillaume_Pelletier please, I’d like to have a look at it too!

1 Like
8

Updated, but please note that this is now an outdated demo. The next version will be the first usable release, featuring significant quality improvements. Thank you for your interest.

2 Likes
9

Looks very nice!! :ok_hand:t3:

10

Wonder how I missed it :face_with_hand_over_mouth: Looks real cool. :smiling_face_with_three_hearts: Do you think you could make it full screen. Also enable the movement of the cam :video_camera: on the beta using the mouse/pad (instead of just arrows/keypress)? Whilst you are there, also add some user setting for horizontal and vertical mouse/pad ‘sensitivity’. From a CX perspective, you could may be make the UI a bit more ‘user oriented’. Like IE. instead of the long drop-down list, have some icons for each that unfolds the list. Also remove the puple bg that’s not very sexy :grin: In short, put a bit of efforts to ‘sublime’ the work you’ve done (my opinion only, of course)

2 Likes
11

Hello, you’re 1000% right… but I’m struggling with my day-to-day development and haven’t had the chance to touch this code for a while. However, it already supports mouse/pad input with different behavior when hovering over the terrain: zooming on the level of detail with the wheel, rotating with right-button drag, and moving with left-button drag. Outside the terrain, the operations revert to the Babylon.js camera. As for the CX… it’s definitely poor…

3 Likes
12

I bet it wouldn’t take hours of efforts to change this situation. I’m sure you’ll find some time for it someday (eventually) :sweat_smile:… Meanwhile, have a great sunday :sunglasses:

2 Likes
13

Amazing! cant wait to try this out!

1 Like
14

Hey, I hear you and am following your advice (it makes sense). This is far from being beautiful, but it’s much better than the previous one. Thanks for reminding me that a lot of technical effort also needs good presentation…

1 Like
15

Indeed. It is much better already. If you like my suggestions, here are couple more for you (effortless).
If you don’t want/cannot make it full screen, I would suggest to make the clear color just plain black (to keep focus on the display). Eventually just top it with a ‘black fade’ (like a ‘fog of war’). You could simply do it with post or NME. Takes seconds to do.

Despite from the icons, I would actually still keep the title of category on top of each list.

Not sure if you are planning to extend this but in case… I would likely have categories of ‘waterfalls’ (you already have some) and add a category of ‘world wonders’. That is, if you plan to extend this of course.

Edit: Apologies. You already have a number of ‘world wonders’. I just remembered the category was (I think) ‘National Parks’. May be split them? May be :thinking:

16

Changed the color and the list header. No more time to introduce a post-process effect or use the NME for this demo. Regarding the categories, here’s what I have so far. If you provide me with new lists and icons, I will be happy to introduce or split the new items.

    public static Mountains = {
        Everest: new Geo2(27.9881, 86.925), // Mount Everest, Himalayas
        K2: new Geo2(35.8808, 76.5155), // K2, Karakoram
        Kangchenjunga: new Geo2(27.7025, 88.1475), // Kangchenjunga, Himalayas
        Lhotse: new Geo2(27.9617, 86.9333), // Lhotse, Himalayas
        Makalu: new Geo2(27.8897, 87.0889), // Makalu, Himalayas
        ChoOyu: new Geo2(28.0942, 86.6608), // Cho Oyu, Himalayas
        Dhaulagiri: new Geo2(28.6967, 83.4872), // Dhaulagiri, Himalayas
        Manaslu: new Geo2(28.5494, 84.5599), // Manaslu, Himalayas
        NangaParbat: new Geo2(35.237, 74.5892), // Nanga Parbat, Himalayas
        Annapurna: new Geo2(28.5961, 83.8203), // Annapurna, Himalayas
        Matterhorn: new Geo2(45.9763, 7.6586), // Matterhorn, Alps
        MontBlanc: new Geo2(45.8326, 6.8652), // Mont Blanc, Alps
        Denali: new Geo2(63.0695, -151.0074), // Denali, Alaska
        Aconcagua: new Geo2(-32.6532, -70.0109), // Aconcagua, Andes
        Kilimanjaro: new Geo2(-3.0674, 37.3556), // Kilimanjaro, Africa
        Elbrus: new Geo2(43.3499, 42.4375), // Mount Elbrus, Caucasus
        PuncakJaya: new Geo2(-4.0751, 137.1889), // Puncak Jaya, Indonesia
        Roraima: new Geo2(5.125, -60.75), // Mount Roraima, Guiana Highlands
    };

    public static Volcanoes = {
        Krakatoa: new Geo2(-6.102, 105.423), // Krakatoa, Indonesia
        Vesuvius: new Geo2(40.821, 14.426), // Mount Vesuvius, Italy
        Etna: new Geo2(37.751, 14.993), // Mount Etna, Italy
        MaunaLoa: new Geo2(19.475, -155.608), // Mauna Loa, Hawaii
        Kilauea: new Geo2(19.421, -155.287), // Kilauea, Hawaii
        Fuji: new Geo2(35.3606, 138.7274), // Mount Fuji, Japan
        StHelens: new Geo2(46.1912, -122.1944), // Mount St. Helens, USA
        Pinatubo: new Geo2(15.142, 120.35), // Mount Pinatubo, Philippines
        Rainier: new Geo2(46.853, -121.76), // Mount Rainier, USA
        Cotopaxi: new Geo2(-0.679, -78.438), // Cotopaxi, Ecuador
        Popocatepetl: new Geo2(19.023, -98.622), // Popocatépetl, Mexico
        Eyjafjallajokull: new Geo2(63.633, -19.621), // Eyjafjallajökull, Iceland
        Santorini: new Geo2(36.404, 25.396), // Santorini, Greece
        Kilimanjaro: new Geo2(-3.067, 37.355), // Mount Kilimanjaro, Tanzania
        Arenal: new Geo2(10.463, -84.703), // Arenal Volcano, Costa Rica
        Yellowstone: new Geo2(44.428, -110.588), // Yellowstone Caldera, USA
        Tambora: new Geo2(-8.25, 118.0), // Mount Tambora, Indonesia
        Sakurajima: new Geo2(31.593, 130.657), // Sakurajima, Japan
    };

    public static SightsAndParks = {
        GrandCanyon: new Geo2(36.1069, -112.1129), // Grand Canyon, USA
        Yellowstone: new Geo2(44.428, -110.5885), // Yellowstone National Park, USA
        GreatBarrierReef: new Geo2(-18.2871, 147.6992), // Great Barrier Reef, Australia
        Yosemite: new Geo2(37.8651, -119.5383), // Yosemite National Park, USA
        Serengeti: new Geo2(-2.3333, 34.8333), // Serengeti National Park, Tanzania
        MachuPicchu: new Geo2(-13.1631, -72.545), // Machu Picchu, Peru
        Banff: new Geo2(51.1784, -115.5708), // Banff National Park, Canada
        Galapagos: new Geo2(-0.9538, -90.9656), // Galapagos Islands, Ecuador
        TorresDelPaine: new Geo2(-51.1667, -73.2425), // Torres del Paine National Park, Chile
        PlitviceLakes: new Geo2(44.8803, 15.6161), // Plitvice Lakes National Park, Croatia
        VictoriaFalls: new Geo2(-17.9243, 25.8573), // Victoria Falls, Zimbabwe/Zambia
        Santorini: new Geo2(36.3932, 25.4615), // Santorini, Greece
        Petra: new Geo2(30.3285, 35.4444), // Petra, Jordan
        IguazuFalls: new Geo2(-25.6953, -54.4367), // Iguazu Falls, Argentina/Brazil
        Kruger: new Geo2(-23.9884, 31.5547), // Kruger National Park, South Africa
        BryceCanyon: new Geo2(37.593, -112.1871), // Bryce Canyon National Park, USA
        CliffsOfMoher: new Geo2(52.9715, -9.4265), // Cliffs of Moher, Ireland
        AngkorWat: new Geo2(13.4125, 103.8669), // Angkor Wat, Cambodia
        HaLongBay: new Geo2(20.9101, 107.1839), // Ha Long Bay, Vietnam
    };
1 Like
17

Incidentally, I could give you the list (because I have it from some other project). There’s still a ‘subjective’ part to categorizing this (between ‘National Parks’ and ‘World Wonders’ or even ‘Waterfalls’) as, indeed, some national parks include (or have been created around) a world wonder.

They could still be in both categories (or priorize one).

EDIT: I can see you used the #222 clear color. Looks great (even better than black). Luv it :heart_eyes: But now the menu sticks out a little. What if you would just use the color theme from ‘the Inspector’ for it? I recently used this (because I didn’t want to bother) for a small project.
You could just quickly pick the colors from the Inspector or from my GUI in the Editor:
https://gui.babylonjs.com/#TZR6F8#79.

I think it would make for a great integration with very little additional efforts :sweat_smile:

1 Like
18

How to convert between plane coordinates, screen coordinates, and geographic coordinates

19

To summarize, converting between screen coordinates, plane coordinates, and geographic coordinates involves a few transformations:

  1. Screen to Plane Coordinates:
    Use the inverse transformation matrix of the plane. This takes the screen coordinates (typically in pixels) and maps them onto the plane’s coordinate system.
  2. Plane to Geographic Coordinates:
    Once in plane coordinates (2D XY), you have a couple of options based on your needs:
  • Tile Coordinates: If working within a Web Map framework, you can transform plane coordinates to tile coordinates. This allows you to utilize the Web Map tile logic and scales directly with zoom levels.
  • Ellipsoidal Geographic Coordinates: For more precise geospatial work, apply a tangent plane transformation using geodesic formulas. This involves projecting from Earth-centered, Earth-fixed (ECEF) coordinates onto the tangent plane’s East-North-Up (ENU) system, centered at a reference point on the Earth’s ellipsoid.

Each of these transformations can be applied in both directions, allowing for conversions from geographic to screen coordinates and vice versa.

1 Like