Whats the best way to write a 3D rendering/visualization control that can meet the following requirements:
Can be embedded in an HTML page.
Cross-browser: works in as many browsers as possible with minimal porting overhead.
Hardware based rendering using OpenGL.
WebGL using canvas, no special plugin required: http://www.khronos.org/webgl/
Some examples from Mr Doob: http://mrdoob.com/
Supported Browser: Opera new rel, IE9, Chrome, Firefox and all browser that support html5 and canvas.
Another solution is in simple flash, using some rendering engine like papervision, http://away3d.com/ or the impressive http://alternativaplatform.com/.
And a last one solution can be Java using OpenGL wrapper like http://lwjgl.org/ or 3d engine like: http://jmonkeyengine.com/, both usable as applet or webstart
Related
I am using Mac OSX and want to save some web pages as photos. I found that webkit2png is a nice tool but it seems it's relying on the webkit from Safari. But I just figure out that almost all the cases that I work with, Chrome renders better, particularly with shadow or stroke effects.
So I am wondering, is it possible to turn a HTML page into a picture by just using Chrome's rendering engine?
Thanks for any kind of tips,
You could use the Chromium Embedded Framework. It can be integrated in C#, C++, Java, Python and various others. There are several examples of people using CEF to render html to textures (for 3D engines), so rendering to a png device should by all means be possible.
Is there any single framework with which I can build a css3, html5 website that is compatible for all browsers including IE7 and later? Can http://html5boilerplate.com/ boilerplate help me in this?
You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.
However there are some hacks, tools and plugins which can get you part of the way.
Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.
jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.
Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)
CSS3Pie is a hack for IE that adds support for CSS border-radius, gradients and box-shadow.
There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.
There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.
This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.
Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.
HTML 5 is more an umbrella term for a variety of technologies than any one thing or framework. Really, any implementation you do should degrade gracefully-- and that is what makes the site browser compatible. Detect what the browser supports, and then have alternatives that are legacy friendly.
Check out: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
And: http://diveintohtml5.ep.io/detect.html
Good luck.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
MS is including it in the ASP.net MVC template projects
html5boilerplate won't help you.
As others have said html5 and css3 are very broad terms, there's no framework that implements all of the features provided by both of these. In fact they are not equally supported in browsers that say that they support them. And more, even W3C guys (who write the specs for html5 and css3) are not yet established on what features they will include or what steps will be required to implement them. You get the idea...
But.. if you narrow your requirements to some specific features, like video, audio tags, canvas drawing, nifty css effects, File API, or others, you CAN find frameworks that implement (or try to mimic) them with available technologies in cross-browser manner (more or less).
It seems that w3c supports the svg file format, however not all browsers support it yet. Are there currently any viable options to include vectorized graphics on a website?
SVG is the way to go, but you may need to use some additional plugins to ensure wider compatibility. To be clear, all modern browsers support it, but there are notable 'previous-gen' browsers that don't (ok, just IE & early Android).
Consider SVGWeb, which will allow you to create a cross-platform SVG embed. I don't totally agree with their methodology (falling back to a Flash renderer if no native support is detected), but it allows you to embed SVG files, unlike RaphaelJS.
The alternative is to user a server-based renderer like Batik, but my experience with Batik is that it is slow as a dog... fine if you have everything cached, but if you need dynamic scaling or things of that nature, you're better off with SVG proper.
SVG is really the only widely supported vector format, but you're right that it's not ubiquitous. The most popular option is to use a layer on top of SVG like Raphaël. It's compatible with any browser you're likely to encounter nowadays.
If you had to choose a browser (just one) to be the primarily supported browser for a company jumping into HTML5 (CSS3).. Which one would be your safest bet on the middle-long term?
Chrome, FireFox, Safari, IE?
I'm looking for an objective recommendation based on standards driven/compliant, developer tools, fast & correct feature implementations, memory footprint, etc.
UserBase/MarketShare would not be an issue because it would be on a closed environment in which we control the clients (which are basically big machines with a Web interface).
Thanks!
I would say a webkit based browser. That would be the best balance of speed/stability and HTML5/CSS3 features.
However I believe that Opera has the most implemented features.
Opera has always been in the lead, but they've also always had weird bugs. Right now, Chrome is in an interesting position: Google just bought an internet video protocol company (On2), and so they have the power to end the H.264 vs. Ogg Theora battle by releasing this great new codec they've bought as open source.
HTML5 itself isn't anything new: it's just new elements that display differently. Think of it like this: if HTML5 was the first to introduce the <blink> tag, developers would be a little iffy about it because you can just use CSS to set text-decoration:blink or use some Javascript to make the blinking happen.
With HTML5, things aren't that different. Most of the new elements are just extensions of <div>. For the ones that aren't (<video>, <audio>, <canvas>, etc.), there are either already strong implementations (pretty much across the board) or the implementations as complete as the HTML5 spec is.
Will there be a best browser for HTML5? Probably not. It's all just a matter of how the browsers position themselves (like I mentioned with Chrome above).
If you control the environment I would say pick one based on that has features your app can exploit to make your job easier. Otherwise, lower-common-denominator is a widely used approach for a small team.
I would say Gecko (firefox and friends) or webkit (safari, chrome and friends). I wouldn't go with IE nor Opera. Here is a HTML5/CSS3 comparison table that pretty much supports my views.
Safari’s pushing CSS animations and transitions, if they’re a big draw for you.
If you want to make a HTML5 app/site that focuses on one browser, then you might as well use HTML 4 and JavaScript. For the next many many years most HTML5 sites will have to function in non-HTML5 mode.
See HTML5 features as glacing on the cake, to add benefits to the browsers that can take advantage of it.
All the modern versions of browser support HTML 5. But recently launched internet explorer 9 specifically designed by keeping in mind future web technology needs and incorporated latest features that give rich and interactive web experience. Latest browser Internet explorer 9 has more support for Cascading Style Sheet than previous versions of Microsoft browser. It supports CSS3 and more emerging SVG2 markup standards. IE 9 includes new java script engine that designed to take advantage of multi core processor and give maximum performance.
I need to display some interactive (attaching with DOM listeners etc. and event handling) vector graphics in web site I am working on. There is a W3C recommendation for SVG though this format is still not recognized by Internet Explorer support of which is a must (for a public website). IE handles VML though and there are even javascript libraries that do some canvas-like drawing depending on a browser (SVG vs. VML) - excanvas, GFX of Dojo Toolkit and more. That would be nice and acceptable though none of them can display an SVG image from the given markup.
So the question actually consists of several parts:
Are there any cross-browser Javascript libraries that display vector graphics from given markup (not obligatory SVG) and offer availability to attach to DOM events?
If there are not, which of the most pupular browser-embedded technologies would be most suitable for doing such a task? I can choose from Flex/Flash, Java applet. Silverlight is not an option because of Windows lock-in.
[EDIT] Thank you all for your comments/suggestions. Below are just some my random notes/conclusions on this matter:
The level of interactivity I need is ability to detect DOM events on the vector image being displayed - mouseover, mouseout, click etc. - and ability to react on them like changing background color, displaying dialog etc.
The idea of sticking with SVG format is quite well as it is native on many browsers except the most popular one - IE. After some experimenting with displaying dynamic SVG I realized that IE version 7 the most problematic. There's too much hassle because of browser incompatibilities.
Cake seems a great Javascript framework, though I could not get the examples working on IE7.
Java Applets - I liked that idea the most as I though I could use the Apache Batik library, a quality SVG renderer. However, Batik is very big library and I cannot afford deploying an applet that weights few megabytes.
I decided to stick with the Flex option. I found a nice vector graphics library Degrafa. It uses its own markup format however it recognizes SVG path notation, so in my case it is going to be quite easy to transform my SVGs using XSLT or just parsing them.
[EDIT 2] Some more comments appeared. I'd like to clarify that by "Windows lock-in" I mean the situation that Silverlight would normally run on Windows, more specifically, IE. I doubt it is an accepted solution (like Flash or Java Applet, for instance) on other systems. Yes, I have no doubt that one is able to launch Silverlight app on any system though I fear it would be too much effort for an average user.
#Akira: Have you had any problems with those "SVG renderers" on IE7? I get thrown Javascript errors all the time.
Safari, Opera and Firefox all support SVG natively (eg. without plugins) to varying degrees of completeness and correctness, including the ability to script the svg from javascript.
There's also the canvas element which is now being standardised in html5, and is already supported in the above browsers as well (with various quirks in certain edge cases due to relatively recent changes in the html5 draft).
Unfortunately any standards based approach is kind of destroyed by IE's willful disregard of what is happening outside its own ecosystem, however there are a number of libraries that try to convert canvas/svg into VML (IE's proprietary vector language) such as iecanvas.
[Edit: whoops, i forgot my favourite js library -- Cake! which can parse and display svg in canvas, and believe supports IE as well]
[Yet another edit: Cake actually has a demo doing what i think you want to do]
Take a look at the Raphael Javascript library. It's early days but it looks very promising.
I remember the IE roadmap that had SVG support listed in IE7.2.
Depends on how interactive you want it?
Can you clarify what you mean by the "Windows lock-in" thing with Silverlight? It runs on Windows and MacIntel, and the vector portions run just fine on Linux with the Moonlight plugin.
Were you thrown off by the lack of Amiga support?
Have a look at the new Canvas element which has been implemented in many browsers. I heard also that there is an ActiveX control for IE that implements the Canvas element too.
Update: Wait, you already said that. I should read the whole question next time! :)
Walter Zorn has a JavaScript library for arbitrary vector graphics. It looks decent.
IE supports VML, but nothing else does and it's ugly. Microsoft claimed that they'd dropped it (with new XAML and all) but it's still part of their Office XML format (it's how Excel .xlsx supports comments, weirdly enough).
FX and loads more support the new Canvas element. Many support SVG, but given the work MS are doing on Silverlight I can't see IE supporting SVG any time soon.
Microsoft are supposed to be providing Silverlight plug ins for no MS operating systems.
I've been using Flex - it's pretty good despite using Eclipse. You don't need to buy the hugely expensive Adobe server components to use Flex - it can consume SOAP services.
The dev tools for Flex are quite affordable, and nearly everyone has Flash.
I don't think SVG is a good choice for the future. From Wikipedia:
"The most common IE plugin was produced by Adobe. Adobe, however, are planning to withdraw this product at the beginning of 2009"
"... Internet Explorer which will also not support SVG in the upcoming version IE8"
"...all have incomplete support for the SVG 1.1..."
"The Corel SVG Viewer plugin was once offered from Corel. Its development has stopped."
Of all the possibilities you list, the only one that's not a horrible abuse of an existing technology (Javascript), barely supported (SVG, Canvas element) or a lot of work (Java) is Flash. It was designed as a vector graphics package and is compatible with more browsers than SVG and the canvas tag.
The only reason I wouldn't choose Flash over all other options is if you're aiming at mobile browsers or don't have the budget for the Flash package.
Go for SVG - and just tell the users to get the ADOBE SVG plug in for IE.
See this excellent site - which is a UK Government Site (public service)
ELGIN