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?

  • 2
    OpenGL ES for browsers is called WebGL, you can use libraries like three.js today. The IE / mobile support for webgl is weak though – Raynos Apr 11 '12 at 5:51

As Raynos has mentioned, WebGL is one way to provide 3D functionality in a browser. The downsides seem to be that there's very little to no IE support, and I've also heard of people having difficulties with different implementations across browsers. I also am not sure if WebGL would "provide speed in development", but I guess that depends on how familiar you are with 3D concepts and OpenGL.

I found this article at Opera's dev site to be one of the better introductions to WebGL, although it might be a bit outdated by now.

Another alternative might be Unity 3D, which has a web player supported on the major desktop OSes and browsers (edit: Linux excluded, AFAIK), but needs to be installed as a plugin. This would prohibit its use as the technology on public-facing sites, since you would lose most of your users right there. Also, I don't think they have support for the smart phone browsers, but the do have iOS and Android native app export facilities (so, you code once, and compile for the different platforms). If your users are going to be primarily paying customers, I think there's a chance they would be willing to install the web player or native apps, but you'll have to make that call. You can't get a much more rapid 3D development environment however, Unity 3D is an extremely slick game engine with many things done for you, out of the box.

| improve this answer | |
  • Also, at the time of writing, iOS has very limited support for WebGL (adverts only). – FinnNk Apr 11 '12 at 8:40

If you're willing to dabble in Flash, there is open-source Papervision3d. It would likely speed up development, but again, this means problems with mobile devices (iOS at least). There is something called Flash Media Server to counter that, but I can't vouch whether it would work nicely in an interactive application.

In terms of support on multiple platforms, HTML5 canvas is likely your best bet. There are 3d libraries for it available, but I'm not familiar with them enough to offer a suggestion.

| improve this answer | |

Your best bet is probably a Java applet (or possibly Java Webstart). Java has Java3D for rendering 3D, and it can even use HW acceleration. Disadvantage is that you need a (current) Java plugin, but there are currently no solutions without a plugin.

Longer term, HTML5 + WebGL is probably your best bet, but especially WebGL is still in Alpha and not really ready for production.

| improve this answer | |
  • a java applet sounds cool, will most smart phone browsers continue to support applets in the future though? – sazr Apr 11 '12 at 11:13
  • @JakeM: Good question. No one really knows. Java is there to stay, and there are still many applet deployments, but in the long run, HTML5 etc. will probably replace applets. Just my guess... – sleske Apr 13 '12 at 7:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.