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.

. . . → Read More: OpenStreetMap 3D Viewer and tools

How can I monitor the performance of my XML3D application?

A nice way is to use the stats counter from: https://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 . . . → Read More: How can I monitor the performance of my XML3D application?

Interactive 3D chess game

Combine our chess example from the iX-Demos with an existing JavaScript chess engine and you easily get an interactive 3D chess game in the browser. Enjoy your game of chess against the computer.

. . . → Read More: Interactive 3D chess game

MarsCity demo

MarsCity01

MarsCity illustrates an online browser game where you can build your own colony on Mars. The demo shows the capabilities of geometry instances.

. . . → Read More: MarsCity demo

Shader configurator demo

A little tool to interactively try the different shader parameters.

Rubiks Cube Demo

This WebGL demo shows the XML3D rotation types and demonstrates some 3D interaction methods.

Tetris Demo

Another simple XML3D demo.

. . . → Read More: Tetris Demo

Solar System Demo

This demo is specifically optimized for WebGL. For “Learning the basics of XML3D” it demonstrates scene graph basics such as the workings of hierarchical transformations, or first steps with JavaScript based interactions and animations.

. . . → Read More: Solar System Demo

WebGL Best Practice

If you intend to create XML3D scenes that also run with WebGL, it’s necessary to follow some basic rules:

Add the necessary JS scripts in the header section of the XHTML document: <script src=”http://www.xml3d.org/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 . . . → Read More: WebGL Best Practice

XML3D in iX article about 3D-Internet

The November issue of the German journal iX for IT professionals contains a collection of articles dealing with 3D capabilities in the browser. In collaboration with the X3DOM Team, we contributed an article about our approaches to add interactive 3D graphics into HTML. The article explains advantages of declarative 3D in the DOM compared to . . . → Read More: XML3D in iX article about 3D-Internet