I would like to develop a bit of functionality for a web site that involves a bit of 3D – the user can move around objects, rotate them and texture them.
So far I’ve looked into:
-
WebGL (in particular three.js) and it looks great, but it’s not supported in IE nor IOS.
-
IOS supports the
<canvas>tag, but only 2d. It looks like three.js has an unsupported hack to make a 3d thing use the 2d canvas instead without textures, but this looks like a hack. -
I also considered resorting to Flash which works on most browsers, but that won’t work on IOS.
What’s my best option for doing 3d web graphics on the vast array of browsers and interfaces?
At the moment I’m thinking WebGL for web (and ask people to use chrome or firefox, and take the hit on IE) and then maybe write a native app for IOS, but I am not sure if there are better alternatives available that I don’t know of.
7
There is no, and likely never will be any approach that is cross browser and cross system when one considers multiple mobile (phone size and tablet size) operating systems and browsers out there for desktop systems.
To that extent, there is no answer that can be given that will be the right answer – there are pros and cons to each approach.
The best/most cross-browses metric is also one that is poorly defined. Is it raw page hits by browser type? Is it sheer number of browsers out there? or does it take into consideration the browsing habits of people on the different systems? Are certain geographies to be prioritized higher than others?
You mention WebGL – but thats not well supported on android either – does this mean an android version should be considered too? Flash is likewise an ‘interesting’ framework to target when looking at mobile devices.
A common approach undertaken by businesses is to make a spreadsheet – list the criteria and weight each criteria. If browsing numbers are key, weight that. If ease of use of the framework is key, weight it that way, if variety of current browsers, etc…
Once you identify the frameworks and weights, research each one and toss in a number (0 – 10) in each of the cells for that framework and see which one comes out to be the ‘best’.
Outside of that, business decisions are best made by the person responsible for them and taking the risks. Asking random people on the internet to make them for you can be problematic – we aren’t aware of all of the factors that are being considered for a particular solution set (the time, the resources).
I’ve had some luck in the past using this: https://code.google.com/p/jsc3d/ It worked on everything i tried on, i just had to change some javascript to make it interactive with mobile devices but i think now they took my changes and it should work for touch events.
That rendered with Chrome, Safari, Firefox, IE<9, IE>=9, Android Phone, Android Tablet, iPad, iPhone.
However performance is poor. But its cool i created a model in google sketchup, exported the obj file and then rendered it multiplatform with textures.
1
Unity has a huge array of platforms that it supports (browsers, flash, and iOS included). http://unity3d.com/unity/multiplatform/
1