Interactive 3d Web Technology - opengl-es

I would like to use interactive 3D models in a web page. The required functionality is:
Import dxf file which defines & displays a room.
Add/move prebuilt objects from javascript
Add/move lamp which cast shadows from javascript
Return room dimensions to javascript
Return object positions to javascript
Can I import dxf files into any WebGL engine?
I have a small repeat user base so a browser installation is no problem at all. Is there any plugin technology I could use? Java applets? Unity? Can I use an OpenGL engine as a plugin? How about a java3d applet?
I will start with desktop but would need to be targeting tablets soon and mobiles in two years or so.
I am becoming convinced I will need to hire an expert to write this but I want to understand the options. Can you recommend a suitable technology?

I think WebGL is an excellent choice for this application; the graphics functions you describe are well within its capabilities. I can't comment on model loading, though, as I'm not familiar with WebGL engines.
However, mobile is a big wrinkle. Regarding the techniques you mention:
WebGL is supported in Chrome and Firefox for Android. On iOS, Mobile Safari does not enable WebGL, but an implementation exists (used strictly for in-app ads), so it is likely that there may be broader WebGL support in the future (possibly requiring a custom web view wrapper to enable it).
Java applets are not supported by any browser on either Android or iOS.
Unity is a viable choice; the Unity Web Player browser plugin allows embedding Unity content in a web page. However, there is no such plugin for mobile-OS devices; Unity content may be compiled into a application for iOS or Android but it cannot be viewed within a web page.
News as of August 2014: Unity has announced that the upcoming Unity 5 will include publishing to JavaScript + WebGL (no plugin required). Assuming this works as promised, you can use Unity if your target platform has a browser with WebGL support.
So, if you absolutely need cross-platform 3D including iOS right now, Unity is where it's at, but WebGL is a good choice for desktop and Android now and likely to improve on mobile in the future, and is the only way to embed 3D in a web page, not an app across desktop and Android.

WebGL is not the only way to embed 3D in a web page - see phoria.js:
http://www.kevs3d.co.uk/dev/phoria/
https://github.com/kevinroast/phoria.js
Also three.js has a canvas rendering for without web-gl.
Phoria.js and others like it will work on iPhone/iPad and Android phones that don't support web-gl. Of course, the performance is MUCH lower but if you don't have complex models and want it to work everywhere...

Related

Custom Color action buttons, transparent card background,full screen custom layout notifications.Changing card color

Custom Color action buttons, transparent card background,full screen custom layout notifications.Changing card color,ttf fonts for texts. changing text color . placing on different areas.
are these things possible ??
if its , why we cant use .
if its not how these peoples used these things
I really wanted to develop apps with these features. but current public api is really bad.
it provides nothing at all.but when we see screenshots new beautiful features exists.
I liked google wear and i see future about it . but when we compare with samsung galaxy gear or sony smartwatch, development in public goes slow.Maybe google devs doing things at the background,but if we don't have resources,how can developers can build apps for it.
I shared a basic app with my wishes and ideas.nobody answered about 2 days on google+ no one cares about posts on google+.public support of google wear for developers is sucks at the moment.
I need more customizable things for android wear to build apps.
but in current stage,i can't do much things with it.
i wish we had these features in screenshots below..
Those things are still not possible with the current preview release of AndroidWear.
If you look closely, you'll see that they've been using photoshop (or some other photo editing software)
Using these templates to design an app for Android Wear.
And for testing the design on the watch they used Android Design Preview which is a tool that lets you mirror a portion of your desktop to your device:

Creating Universal UI files

Is there any tutorial available for creating Universal UI which can run on iPad as well as iPhone on different resolution. I tried looking in the official documentation, but couldn't find anything about UI files.
I notice you've tagged this question with Marmalade, so I'm assuming you are talking about how to write a Universal app in Marmalade? If so then creating a Universal UI is pretty much up to you to implement in the best way you see fit.
By default all Marmalade apps are Universal apps, though you can limit to iPad only with the MKB setting iphone-ipad-only.
Marmalade does come with the iwui module that allows you to lay out user interfaces with buttons and text boxes etc. but ultimately unless you have a very simple UI you'll need to either provide different UI layouts for each screen resolution/orientation you wish to support, or do some fancy laying out in code.
Apple wisely chose to persuade developers into creating separate UIs for iPhone and iPad since the one-layout-fits-all approach generally looks bad at any screen size.

Will asp.net mvc web site created using HTML5 work "out of the box" on mobile devices

i am building a new web site using asp.net mvc3 web application ,, and i found some free HTML5 templates in the web which i can add to my _layout view in my mvc3 web application. i read that HTML5 is able to automatically adapt to the screen size of any devices .
So does this mean that incase i use HTML5 inside my layout view , then my web site can be accessed using different mobile devices and the layout of my web site will automatically adapt to the screen size of the mobile devices?
BR
Not so simple. You need to contend with
Big variety of mobile devices. Some support HTML5, some partially support it and some don't support it at all.
Even if a mobile device does support HTML5, a mobile screen is a lot smaller than a desktop so it may not be able to rearrange the view properly.
How a user interacts with a mobile web app is quite different to a desktop web app, so even if it did rearrange the view properly the user experience could be crap.
A mobile user may be connecting over a low bandwidth connection. What size are your web pages, and are they suitable for distribution over 2g, 2.5g or 3g ?
Well, no, not always. HTML 5 is a very broad term and there are many devices. There is no real guarantee that something you write in any version of HTML 5 will show up as you want it in every browser except via testing it and experience from testing.
That said, I think you are referring to CSS media queries, which are not really related to ASP.NET MVC 3 or HTML 5. From the caniuse site here, you can get an idea of which browsers support media queries.
If you use CSS 3 media queries properly, and the browsers which you are targeting support the feature, then the answer to your question will be yes.
Nothing works automatically but I'd give it a guarded "maybe". The MVC3 sites I've developed work well on iPhone, iPad, Android and Windows Phone. For example link
Still needs to be valid HTML5, so I'd suggest using a validator though.
Screen size adaptation isn't a particular feature of HTML5 per se, it's a feature of a competent fluid design with HTML and CSS.
They should work out of the box on mobile devices (in the original iPhone demo, Steve Jobs showed how the iPhone did a good job of rendering existing websites), but there won’t be any automatic adaptation to screen size beyond what HTML already provides.
As far as HTML goes, <meta name="viewport"> can go a long way towards helping your site’s layout on Mobile WebKit-based devices (which is all iPhones, and I believe all Android devices). See e.g.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html.

JQuery mobile vs Phone Gap

I want to convert an existing website for mobile version, what will be the best choice for me.
Using JQuery Mobile on asp.net webform or asp.net mvc
Create application on phonegap for the targeted mobiles
Any Other ?
You would need to provide a lot more information about your goals and your background to answer the best solution for you.
However, I can clarify your title: PhoneGap is a complementary solution to jQuery Mobile. They provide different capabilities and work together. You can use one or both of them. Here's a picture.
PhoneGap does two major functions:
Converts JavaScript/HTML/CSS assets to a native app
Provides a set of JavaScript APIs that map to device capabilities, not otherwise accessible to a web app, like Contacts, Accelerometer, Telephony, GPS, etc
jQuery Mobile is a cross-platform user interface system. It is an extension to jQuery that provides a set of UI libraries specialized for mobile device programming including small screens and touch and swipe events.

Titanium native UI on desktop

I would lie to build a desktop app with Titanium and i thought that the API would give me access to a native ui for desktop. But reading the documentation it seems like the native ui api is directed only to mobile development, while for desktop you have to build the UI yourself in html and js and it will not be native code (with the risk of low performance animation and graphic).
Am i right?
Thanks
Yes you are right. Titanium Desktop only WebKit UI is possible: HTML5+js and/or PHP/Ruby/Python. You can see Tweetanium on git to see how Desktop/Mobile application can be designed. But simply also in mobile you can use a webkit view... It'sn't fast as native UI on mobile but it makes your UI code reusable in both world.
This is exactly what happens on PhoneGap project.

Resources