android - What Technology can Render Medium Scale 3d Environments in a Web-Browser

Question

I intend to make a web application that displays 3d environments that can be navigated by dragging(with a finger or mouse depending on the platform). The web app will render 3d environments of development sites including contours, water pipeline locations, buildings etc.

I am trying to decide what technology/libraries to use that will create a web-app that will work on Android-Web-Browser, iOS-Safari, IE9, Safari, Firefox and Chrome. And also what technology will provide speed in development. I understand that this is 'asking for my cake and eating it too'/'asking for the moon' but I don't know all the technologies out there - so there may be advanced libraries that can render 3d environments across many web-browsers including the main smart phone ones and I dont know of them.

The 3d rendering would not be highly detailed buildings or water with effects, but rather simple 3d representations of these objects. The environment would be navigable by dragging around and you could view the landscape in layers(view only contour lines, view only underground pipelines, view only sewerage pipes, etc.).

Are there any 3d libraries for web-browsers out there? Is there a way to run OpenGL(or OpenGL ES) through a webbrowser?

What technology would you use if you were making this kind of app/web app that should work on desktop Windows, Android, iOS and WindowsPhone?

Is there any technology I have failed to mention that would be good for this kind of project?

I am tending towards a Browser Driven Web App because I get that cross platform ability(where it even works on linux and MacOS by using compatible web-browsers). Also I know of CSS3 transforms that can create cubes that can rotate in 3d space(NOTE only works for WebKit browsers - so no IE :( ). But I don't know if CSS3 is robust enough to render whole 3d environments? Do you think it could? Maybe I could use HTML5 canvas's for this? Can Google maps create custom 3d maps?

Answer 1

Technically, this is possible in either flash or webgl, but neither of those technologies are deployed across all the devices you want to address (no WebGL anywhere, flash is only on very recent Androids, and Adobe is no longer developing it). If you want to be on mobile, then you will have to go native on all platforms you care about.

While CSS3D transforms allow you to arrange things in 3D space, you can only arrange 2D elements (images, HTML elements) in the 3D space, so it's very difficult to model volumes with any degree of verisimilitude, although it's possible in a limited way to use gradients or SVG filters to do a not-so-convincing job of this.