3D Javascript Map (Lanyard)

General talk
1

I’ve been working on a 3D, hardware accelerated map written entirely in Javascript. I’ve codenamed it “lanyard”.

The tiled blue marble layer just rendered for the first time a few minutes ago, , so I think it’s time to post this here.

You can view the source code at: http://github.com/fintler/lanyard

You need a WebGL enabled browser, but a live demo is up at:

http://github.bringhurst.org/lanyard-pre-demo-2/

Keep in mind that I broke the mouse-drag-to-rotate feature in this version, but you can use the mouse-scroll-wheel-zoom to see the tiles disappearing as you zoom in and reappearing as you zoom out.

Also, there’s a bug with flipping textures. I’m working on it. :slight_smile:

Enjoy!

2

Is it something like: http://wiki.openstreetmap.org/wiki/Neat_Stuff#Tiles%20in%203D%20%28in%20vrml%29 ?

3

Not at all. :slight_smile:

VRML was a language used for designing scenes. WebGL is an API for Javascript to render frames.

It’s quite a bit more flexible.

4

Nice start. :slight_smile: Had to search for a WebGL compatible browser version first - I finally found a list on http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation -, so I’d suggest that you post screenshots for the less patient folks when presenting future improvements.

May I ask what content you are planning to display in closer zoom levels? 2d tiles mapped on a sphere or 3d models? Also, will you focus on “realistic” rendering or abstraction (e.g. with regard to road widths, map colors based on feature categories vs. surface texturing, …)?

5

Well, the globe isn’t a sphere. The tessellator accounts for the eccentricity of the earth. So, you’re looking at an ellipsoid. Having said that, the tiles should be whatever you want. I’m currently working on support for WMS servers so a political boundaries layer will work. The design also allows for an elevation model with however much detail you want. So, it should have the potential to render very detailed terrain with accurate surface normals.

I plan to support 3D models through an implementation of collada in a KML parser, but you shouldn’t expect to see that anytime soon. It’ll be some time before an implementation of KML even supports simple polylines.

In summary, I want this to be more of a framework rather than a program for end users. It should support abstract, cartoony maps, as well as photorealistic ones. Im aiming to be as flexible as possible. It should be rather simple for a developer to override the default behavior of almost anything.

Having said that, the default behavior will probably lean towards the photorealistic side of things.

I typed this post on my phone, so please ignore any of my bad spelling, grammar, or lack of organization. :slight_smile:

6

Here’s a blog post with a screenshot btw…

http://bringhurst.org/post/1604688707/introducing-a-completely-javascript-3d-map-lanyard

7

Just to give an example of flexibility, I just added support for the Moon and Mars in like 10 minutes. Enjoy!

:smiley: