Thursday, March 12, 2015

openstreetmap osm roads data to html5 arrays 3D car sim

json_osm_chung is an open source realtime online converting openstreetmap servers osm real roads data to html5 arrays to use with a game or in this example to draw on a graphical canvas or 3D webgl. Use the arrow keys to move or select one of the presets locations. recreate any real roads + buildings places in the world . mixed with google static maps satellite ground images , water terrain detection , srtm terrain heightmaps, trees , lamps,  and webglcarsimheight  a small free 3D driving car simulation game. Can  run on a small netbook. works better with firefox .

how does it work ? In osm, you have ways and nodes. A way is a line of nodes, nodes composed by latitude and longitude . A way can discribe a road, a building contour, a forest contour, an airport ...  All this is available online in realtime via json javascript api .(nothing to install)

explore real 3D world in your car 

=> json_osm.html     (roads)

=> jsonosmall.html    (roads+buildings)

=> json_osm_webgl.html   (roads+3D webgl)

=> json_osmall_webgl.html   (roads+buildings+3D webgl+google static maps)

=> json_osmall_webglcar.html  (idem+car)

=> json_osmall_webglcarsim.html  (idem+car simulation+trees)

=> json_osmall_webglcarsimheight.html   (idem+car sim+trees+terrain height+lamps+forests)

=> json_osmall_webglcarsimheight_shadow.html   (idem with shadows shaders)

open source code =>

desktop enhanced version  in freebasic

 (15/04/2015) sea shader added
(04/06/2015) cars traffic added
(09/06/2015) mouse on screen control added
(30/06/2015) click on google maps to teleport
(03/07/2015) eiffeltower,libertystatue,christrio,domerock,gizah,capitol,tajmahal,buddah added
(12/07/2015) fog added
(15/07/2015) rocs added
(19/07/2015) draw far land added
(20/07/2015) mystreetview added (shif+M)
(21/07/2015) ascend mode (climb walls) added (A)
(23/07/2015) clouds shadow added

1 comment:

  1. Hi! This is my first visit to your blog! We are a team of volunteers and new initiatives in the same niche. Blog gave us useful information to work. You have done an amazing job! convert psd to wordpress