The online demo is available here.

Additionally, first . . . → Read More: OpenStreetMap 3D Viewer and tools]]> As Interactive 3D City Models become more and more popular on the web in general, and in particular also for OpenStreetMap, we created a simple viewer for OpenStreetMap using the OSM-W3DS  provided by GIScience, Department of Geography, University of Heidelberg. Sources can be found on github.

The online demo is available here.

Additionally, first versions of a VRML/X3D to XML3D and a CityGML to XML3D converter have been released. For more information on OpenStreetMap in 3D see also:

• http://forum.openstreetmap.org/viewtopic.php?id=18326
• http://wiki.openstreetmap.org/wiki/3D_Development

Video:

 

Screenshots:

In the WebGL version, one can use the framedrawn event to update the counter, e.g:

In the native version, one . . . → Read More: How can I monitor the performance of my XML3D application?]]> A nice way is to use the stats counter from: http://github.com/mrdoob/stats.js/

In the WebGL version, one can use the framedrawn event to update the counter, e.g:

var stats = new Stats(); 

stats.domElement.style.position='absolute';
stats.domElement.style.left='0px';
stats.domElement.style.top='0px'; 

var targetElement = ...
targetElement.style.position='realtive';
targetElement.appendChild(stats.domElement); 

var myxml3d = document.getElementById("myxml3d");
myxml3d.addEventListener("framedrawn", function(e) { stats.update(); }, false);

In the native version, one could use the “onframe” attribute to trigger the update, I didn’t test is yet. Both callbacks are in-official as they could be used to do timing attacks.

In Google Chrome you can also activate a FPS-Counter in chrome://flags/

Please be aware that this measures not just the rendering, but the overall performance of the webpage.

Requirements: Firefox with WebGL

This should be the first script reference in the header section. If you want to be able to run the . . . → Read More: WebGL Best Practice]]> If you intend to create XML3D scenes that also run with WebGL, it’s necessary to follow some basic rules:

1. Add the necessary JS scripts in the header section of the XHTML document:

   <script src="/xml3d/script/xml3d.js" type="text/javascript"/>

   This should be the first script reference in the header section. If you want to be able to run the scene without internet connection, just copy the script to your local drive. There is a version number in the header section, thus you can update the file regularly. The script will also add a default scene controller. If you want to use your own camera controller, you can disable this by adding:

   <navigation mode="none"/>

   to your scene.

2. Add the default CSS style to the document:

   <link href="/xml3d/script/xml3d.css" media="all" rel="stylesheet" type="text/css"/>

   This will prevent all the numbers to be displayed before the initialization of the scene.

Something you have to consider, if you want to use XML3D interaction elements  (onmouseover etc.) with WebGL:

If you use an image from outside the HTML page’s origin as a texture (e.g. image from a different website), the canvas is flagged as confidential and the scripts can’t use readPixels anymore. It’s using the SOP (http://en.wikipedia.org/wiki/Same_origin_policy). But readPixels is needed to get the necessary information.

Local access to files (file:// protocol) fail the same-origin check and thus it’s not possible to test XML3D/WebGL interaction locally.

To do so, you can either modify your browsers security behaviour (not recommended) or install a local web server and access your local files via http://localhost/… We can recommend Tomcat server, as it is case-sensitive even on Windows and thus you don’t face this issue when you upload your scene to a Linux server.
That’s all, have fun with WebGL!