Jump to content

Integrating WebGL Earth in Babylon.JS?


Recommended Posts

This is something I've been giving some thought since trying the Pokemon Go game.

Is there any way of integrating the WebGL Earth in a Babylon.js scene?

Taking a look at the Hello World example of the WebGL Earth: http://examples.webglearth.com/#helloworld

This would be a decent suit for an augmented reality type game like Go. Try zooming in on the map, the tiles are perfect for this type of game.

It's just a matter of getting the GPS coordinates at a fixed interval(Using the geolocation API), and have an animated player model. That would be the basics, and leaving all the real game designing and server handling to the individual coders.


I couldn't get them to merge, as it seems the globe project creates a scene and camera itself, and therefore can't easily be part of a Babylon scene. At least as far as I can tell.

Does anyone know if there is any existing example of anything similar for Babylon or maybe Three.js?


I'm fairly certain this could spawn a new wave of interesting 'low-budget' augmented reality games.


Link to comment
Share on other sites

Hiya @Raggar, welcome to the forum.  Good to have you with us.

No replies yet, huh?  Sorry.  About the closest we've seen... is http://makina-corpus.com/blog/metier/2014/how-to-use-multimaterials-with-a-tiled-ground-in-babylonjs .  Interesting topic/ideas, for sure.  Sorry I don't have more "goods".

Maybe use THIS playground as a starter.  It is ALMOST the same as the playground demo from the above webpage, except I remarked-out line 83, an unnecessary line.  (bloat prevention). 

Perhaps use our LOD system or shoot a distance-checking ray at the map plane... determine when it's time to re-tile/re-draw the map? (zoom in/out feature) 

Open Street Map tiles... yum!  I like 'em.  Got more thoughts?  Let's hear 'em.  We love mad scientist experiments like these.  :)

Link to comment
Share on other sites

  • 2 weeks later...

Hi @Wingnut

Thank you for your reply, as well as your welcome.

This was mostly to get an idea of whther or not it is actually possible, as I have 2 other projects eating up my focus right now.

I looked at both links, and it certainly looks like it might be possible with a little hacking around.

I did this very quick and (ugly) test of the playground scene from your first link. I simply added a call to the geo API:



It requires Firefox, though, as Chrome won't access location data without the connection enforcing security by TLS/SSL.


When I get more time, I'll look ways of getting location data into actual points on the tiles.

Link to comment
Share on other sites

What I have been looking for is an implementation of Virtual Textures. The code is above my head as it requires some shader coding to make it happen. 

It would allow a google earth kind of zoom in to the world ability. Would be great for Geo as well as games with endless worlds. 

I am attaching the pdf. 



Link to comment
Share on other sites

I've already researched this, you just need to get the hightmaps and then grab the satellite layer as the texture.  It's pretty simple once you get your data converted.

you can also access topology layers that have height information.  The problem I ran into though was resolution, and had to start going with LAR GS data.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...