Babylon.js meets Google Maps and Mapbox!

Demos and projects
1

Hey everyone!

I’ve been experimenting with Google Maps’ WebGLOverlayView and managed to get babylon.js rendering directly inside the map’s WebGL context. The babylon.js scene stays perfectly synchronized with the map’s tilt, zoom, and heading, so you can render 3D content that feels truly “anchored” to the real world.

EDIT: Now support Mapbox as well!

It’s not just a simple overlay! Your babylon.js scene is rendered directly into the GL context of the map. As you can see our cube is part of the google maps 3d layer

image
image1920×1478 167 KB

This is an early version, but it already does what I need for my project. If there’s interest from others, I’d be happy to polish it further, improve the API, add docs and maybe even turn it into a reusable npm package (maybe an addon? @Deltakosh)

Help from the community would be very appreciated as well!

I’d love to hear your thoughts, ideas, or use cases for this kind of integration!

image
image1920×1114 289 KB

image
image1920×1088 159 KB

EDIT: New repo!

Thanks goes to @Evgeni_Popov for helping me to solve the rendering issues and to @tibotiber for the idea/sample project to implement the Mapbox custom layer.

23 Likes
2

Is it google only, or a general propose tile renderer for any WMTS maps

3

Google Maps only. Potentially could be used after some tweaks if the map exposes it’s gl context and some parameters required to build the camera’s projection matrix.

4

This is absolutely amazing. Very good work as always @roland! :clap:

For @kzhsw’s question, I know mapbox exposes the gl context as well, so likely a good candidate, and they’re pushing their 3D base maps so it would be an interesting fit. I don’t have time to lead something like this but feel free to ping me if anyone starts something on the mapbox side :wink:

2 Likes
5

Thanks a lot for the encouragement and for offering your help with the Mapbox part to the community!

That’s awesome of you! :raising_hands:

Anyway, long time no see @tibotiber … :wink:

1 Like
6

If you could set up a small private Mapbox starter repo for me on GitHub (so I don’t have to dig through the docs), I’d be happy to give it a spin and try to add support for Mapbox with the overlay too.

7

Sure! Give me a few days and I’ll try to get that going.

Would be cool to have a mini collab finally :stuck_out_tongue: .

8

Can’t agree more :clinking_glasses: :handshake:

9

I have an open source project with BabylonJS and Mapbox, I’d love to add maps to my 3D scene editor

1 Like
10

So, so, so many integrations for this it’s hard to even start. Seriously.

There’s a massive potential there:
user customization of the map to find the intended place they’re going.
Customization of business address and advertisement on the map itself from the businesses standpoint.. it could be built as a map service to add reviews, etc, or interact with the business via the customization in certain ways.

So many more too that’s just a start. I’m probably not being clear enough here so I’ll msg when my mind is a little clearer.

1 Like
11

@roland the starter repo is up! I’ve added you as collaborator.

I went with vanilla TS to avoid any framework related issues and make it easy for anyone to pick it up. I don’t think we’ll have a lot of UI (if any) anyway.

I’ve written a super quick README to make things easy to start. I’ll DM you my Mapbox token, so you don’t need to create an account if you want. Then just pop it into the .env.

Let’s play! :mushroom:

1 Like
12

:rofl: That’s witchcraft! Admit it—there’s a trick behind it somewhere!

If your backdoor into WebGL is real, then Three.js and Babylon.js are just a merge request away. :star_struck:

1 Like
14

Thanks a lot!
Seems to use the same principles as the google maps overlay. Let me play with this a bit :wink:

15

@tibotiber

MapBox overlay added :wink: It’s a draft version (some stuff like handling context lost is missing, etc.) but you can already try it out. I kept the options for both gmaps and mapbox the same so:

MapBox:

  const overlay = new MapBoxWebGLCustomLayer({
    map,
    anchor,
    antialias: true,
    adaptToDeviceRatio: true,
    addDefaultLighting: true,
    upAxis: "Z",
  });

  await overlay.waitForSceneInit();
  const scene = overlay.scene;

Google Maps:

  const overlay = new BabylonJSWebGLOverlayView({
    map,
    anchor,
    antialias: true,
    adaptToDeviceRatio: true,
    addDefaultLighting: true,
    upAxis: "Z",
  });

  await overlay.waitForSceneInit();
  const scene = overlay.scene;

Check the examples folder.

YouTube video of the overlay in action:

1 Like
16

So cool @roland!

Did you get it working in the starter repo I sent? If yes, could you push your changes? You have collab right on it ;).

Love this

17

Has the conversion between latitude and longitude and Cartesian coordinates been achieved?

18

It’s here :smiling_face_with_sunglasses:

I’ll rename the repo and update the readme later.

1 Like
19

What exactly do you mean?

20

For example, if I need to render a model using babylonjs at a certain latitude and longitude, how can I find the corresponding position in babylonjs based on latitude and longitude

21

You can use this function. It is located under google-maps/utils but will be moved to common/utils becuase it can be used with any map which uses spherical mercator projection.

1 Like