Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
For basic 3d web application i.e. a few cubes, rotation and translation in 3d space - which is better to choose?
CSS 3d seems the easiest, but is not supported on IE9 or on the roadmap for IE10, and offers less control than the other options.
Canvas & WebGL seems way more complicated, but I don't know if they are future proof.
Why are there so many different techniques for 3D? which is better? which is future proof?
The reason there are so many different options for 3D is because the whole thing is still in a state of flux -- 3D in the browser isn't a finished standard, and of the options you listed, the only one that works in all currently available browsers is Canvas.
IE in particular is unlikely to give you much joy -- as you say, 3D isn't even slated for IE10 at this point. Having said that, SVG was added to IE9 quite late in the day, so there's always hope. But the reason it's unlikely is that Microsoft have made a point of only supporting features which have been formally ratified as standards.
Of the technologies you listed, Canvas is by far the best supported, but Canvas isn't a 3D technology; it's a 2D canvas, and if you want to have 3D effects in it, you need to write them yourself, and they won't be hardware accelerated.
I guess the real answer to your question depends on how important the feature is for your site. If it's just eye candy, which users of unsupported browsers could live without, then by all means do it with some 3D CSS. But if you need to make it consistent in all current browsers, then do it with Canvas.
I'd tend to recommend not using WebGL for your case, because it sounds like it would be overkill for what you're doing.
3D CSS is probably the right answer, but use Canvas for now, until the rest of the browsers add support for 3D CSS.
I know this is 2 years old but I figure I'd post this here for future readers.
What to choose depends on what you need.
Do you need a simple 3d shape with no or little animations? Try if you can do it with CSS3, that's the easiest by far. For IE you can probably get a library that offers support.
Do you need some sweet 3d models with nice graphics and that can do all kinds of stuff? Go WebGL, you can't ask for more control AND performance for 3d in browsers.
Do you need 3d shapes that can do all kinds of stuff, but don't need textures and will work everywhere and won't require much performance? Go Canvas.
CSS3 is just for the eye-candy. You can make it rather easily, style it any way you want and is very easily maintainable. Once you want to do more than just eye-candy, put on your gloves because that is gonna reuire some work.
With 2d Canvas you can make 3d stuff. If you're new to it, it will be very annoying and complicated (to name one example; you need to know of matrices), You can pretty much do anything with 2d canvas that you can do with WebGL but some thing will be easier in WebGL (seriously, if going 2d Canvas, don't try to use textures, it's a nightmare). WebGL uses OpenGL which, in a nutshell, means it will always outperform 2d Canvas.
However, WebGL requires the user to have a compatible video card.
I really depends on what you are trying to do. How simple is simple?
3D CSS is far from usable. It's only just made it into firefox. It's buggy in both firefox and chrome. It's not working in FF9 beta on OSX. It's also got issues in Chrome up through at least 16. See http://greggman.com/downloads/examples/intersecting-elements-3d-css.html and compare Safari on OSX to pretty much any other browser.
three.js (https://github.com/mrdoob/three.js/) used to (and maybe still does) provide some simple 3d using canvas.
Otherwise if you want anything interesting go WebGL and pick a library (three.js, SceneJS, etc..)
You've got to make a choice. Use WebGL and give up IE, Use Flash 11, Use Unity3D, use Canvas and get very limited 3d, or don't do 3d.
WebGL is already being used by major sites. CNN is now using WebGL http://www.stinkdigital.com/en/work/ecosphere
Everyone is probably tired of hearing 'it depends', but...it depends!
There's a little "war" going on as to whether it's better to use Canvas or HTML/CSS3, and namely because Canvas is slower than DOM on older machines/devices. Yeap, DOM is way faster in some cases, while canvas is faster on most modern browsers/devices.
WebGL - Best option for both 2D and 3D, but since it is not well enough supported across browsers and devices, you'll have to offer fallback to canvas or DOM whenever necessary.
Canvas - Less suitable for 3D comparing to WebGL, but more suitable for compatibility, community, tools etc
DOM - Faster than most think, if used right, highest support around, but you cannot go too fancy animation/gaming-wise.
Hope this helps
Related
I wonder, if it is more beneficial to use the abilities of QML for animations, or prefer to use animation files (such as GIF oder MNG) for simple, small-scale animations.
Examples for what I call "simple, small-scale animations" are:
turning Hourglasses
those rotating dots, known from video platforms, while loading
flashing alert symbols
those "recharging buttons" known from many RPGs used for special attacks
I don't know much about the internals of Qt, so I am unsure, whether I benefit from hardware acceleration, when programming the animations (e.g. image rotation) or not. And if so, whether this hardware acceleration outperforms the display of pre-calculated animations from GIF and MNG.
Greetings and thanks,
-m-
I wouldn't worry about things like this unless they visibly slow the performance of your application. Some points to consider:
The use cases you mentioned almost always involve only one "busy indicator" being visible at a time.
Both Image and AnimatedImage have the high DPI #*x file look-up.
Both Image and AnimatedImage support caching.
Both Image and AnimatedImage will use the Qt Quick scene graph to display the images (OpenGL textures, which should result in hardware acceleration).
AnimatedImage has to read several images, but won't require rotation.
Rotation of images is pretty cheap, as far as I know.
It's trivial to swap out one with the other, or with something else.
If you're looking for good general performance advice, read the Performance Considerations And Suggestions documentation.
I've often been told that CSS 3D transforms are hardware accelerated in Mobile Safari which makes me wonder if the implication is that 2D transforms are not? I can think of no reason why they wouldn't be, since they can basically all be implemented as 3D transforms, but I would like to know for sure.
If it turns out that 2D transforms are not hardware accelerated, any insight as to why would be much appreciated.
You're right, CSS 2D transforms aren't hardware accelerated in Mobile Safari, but 3D transforms are. I'm not sure why it's that way, but perhaps they decided it was overkill for most 2D transforms. Using the GPU unnecessarily could adversely affect battery life.
It's very easy to convert a 2D transform to a 3D transform so it isn't much of a problem. One trick is to use translateZ(0) as described here: http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/
EDIT
Apple doesn't say anything about it in their documentation, so it is difficult to get an authoritative source. Here is what Dean Jackson from Apple had to say about it (from http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/):
In essence, any transform that has a 3D operation as one of its functions will trigger hardware compositing, even when the actual transform is 2D, or not doing anything at all (such as translate3d(0,0,0)). Note this is just current behaviour, and could change in the future (which is why we don’t document or encourage it). But it is very helpful in some situations and can significantly improve redraw performance.
Ariya Hidayat from Sencha wrote a post explaining hardware acceleration on mobile browsers: http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/. Here's a snippet from the post:
The best practice of setting the CSS transformation matrix to translate3d or scale3d (even though there is no 3-D involved) comes from the fact that those types of matrix will switch the animated element to have its own layer which will then be composited together with the rest of the web page and other layers. But you should note that creating and compositing layers come with a price, namely memory allocation. It is not wise to blindly composite every little element in the web page for the sake of hardware acceleration, you’ll eat memory.
Here is an article from html5rocks.com that discusses hardware acceleration: http://www.html5rocks.com/en/tutorials/speed/html5/. Here's a snippet from it:
Currently most browsers only use GPU acceleration when they have a strong indication that an HTML element would benefit from it. The strongest indication is that a 3D transformation was applied to it. Now you might not really want to apply a 3D transformation, but still gain the benefits from GPU acceleration - no problem. Simply apply the identity transformation:-webkit-transform: translateZ(0);
Firefox and Internet Explorer already use hardware acceleration for 2D transforms, so I wouldn't be surprised if the WebKit browsers (Chrome, Safari) include it in the near future.
I have to create a pretty complex map which is divided in pieces, which themselves are each pretty complex polygonal structures. These are given to me as transparent PNGs. Obviously i can't just use the rectangular PNG itself to define each mouse-sensitive area.
First and last thing that came to my mind was using Image-Maps.
But before i go down that road, i wanted to ask whether anyone could think of a more modern solution to this?
Browser support requirements are IE >= 7, FF >= 3, newer Chrome & Opera. So usage of CANVAS might not be an option.
When designing web documents, you should always choose the thing which come closes to expressing your intent, so that your documents are most adaptable to use-cases you didn't think of.
An image map is entirely appropriate for placing links on map images. <canvas> makes your document less interpretable. SVG would be a reasonable choice if it fits your data well, but is less widely implemented than image maps.
SVG would be a good choice, there are plugins to add compatibility for ancient IE versions. There's nothing really wrong with maps, just make sure it's really clear where the links go as the status bar doesn't have the info like a normal link.
IE7 won't do SVG or Canvas (unless you like plugins as Mr. Bradshaw points out), and while VML might work there, it is a quagmire. You could use some javascript to compute point-in-polygon on mousemove. But really, image-maps (either client-side or server-side) will probably be the simplest approach.
I've been reading a lot of ways recently of how to avoid having to use Photoshop for things like gradients and shadows on buttons, when you can use CSS3 Box Shadow for such features. Now this is great, but obviously legacy browsers and most IE browsers don't yet implement CSS3 features, so my question is, why save yourself extra work in Photoshop when you can use CSS3 but then HAVE to use Photoshop for other browsers to see the desired effects? Isn't that just extra work?
you can use CSS3 but then HAVE to use Photoshop for other browsers to see the desired effects?
Often you don't really care whether the other browsers see the desired effects. If it's just a subtle background gradient effect, the site's going to work fine and still look reasonable with a flat background in downlevel browsers.
Compatibility was more of a problem when CSS 2 Positioning was at this stage: an unsupported positioning feature could lead to an unusable layout. But for essentially frivolous effects like backgrounds, borders and shadows, it's not critical if the effect goes missing.
There are a few reasons. From a developer/designers perspective, using CSS3 can be more flexible. An image is more or less just a static image. With CSS you can use script or CSS to animate or adjust the styling, and have advanced integration between the various technologies. This allows you to be able to do some things that are not possible or difficult just using images.
The page weight is also lower usually when using CSS, which allows the page to load faster, especially on slow connections or mobile devices. It also reduces HTTP requests (although you can use data uris too) which reduces latency and thus speeds up page loading.
Using CSS is often more maintainable and quicker, as you can adjust say a background colour or a shadow quickly just by changing the CSS, while with images you have to open up photoshop, edit the file, resave, etc. This is fantastic for quick tweaks.
There are also some people (myself included) that are much more comfortable in code than they are using graphics packages. For me it is easier to use CSS, but your milage may vary.
Also from the browser perspective we want to move the web platform forward and increase the capabilities. SVG is an example of another technology that doesn't work across all browser versions yet, but adds a lot of power. Although it may not be possible to deploy sites using certain CSS3 properties or SVG without fallbacks right now (depending on your audience or client) there will be a time in the future when old browsers are dead and what we are adding today works for all users. There was a time when most of CSS2.1 wasn't supported for example, while now you can rely on most of it if you don't need to design for IE6.
There are some parts of CSS3 that you can happily use without fallbacks, if you have a client that doesn't require all browsers to look the same. border-radius is an example, or giving a solid colour fallback to old browsers and applying transparency for newer browsers.
The world is moving forward, you can't ignore it. as long as old browser will show a button and new browser will show a more nice one, you are ok.
Otherwise, we were still be working on VT100... as why using "Windows" if most monitors doesn't support more than 4 color graphics and has 80X22 resolution....
If your bosses accepts the idea of having two versions of looks and feel and a warning. CSS3 is a good idea.
So, you use CSS3 features in your code and forget about the browsers that are not compatible -- they will see the "low-graphics version", you might want to issue a non-intrusive warning (like the one we get as alerts in StackOverflow), saying, "Your browser is not compatible with CSS3. To see this website in high graphics please upgrade your browser. Click the link here to update now."
But, depends on where you work. Big companies with lot of resources may like to stick with Photoshop and smaller once may like a light-weight CSS3 code that degrades silently in non-compatible browser.
Well you can always use ChromeFrame, to impose nice behavior on IE. Assuming that a lot of products will insist for it the near future (yeah we can argue against this), chances are that most IE users will have chromeFrame even before your application would insist for it. Once you take a decision on this, decision on using CSS3 properties or HTML5 elements is - well - hell yeah!!
Marvin
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am looking to build a 2d game using WebGL. I want the hardware acceleration that WebGL provides and I cannot get this from the 2D canvas context in the canvas tag.
With that said, is there a tutorial on creating 2D sprites using webGL? Or, better yet, is there a 2D sprite library for WebGL? Ideally, I'm looking for something like cocos2d ported to WebGL.
Not surprisingly, all of the demos, tutorials and libraries I have found for WebGL focus on 3D manipulation. Are there any WebGL libraries that support 2D sprites?
I may be mistaken, but I thought that the 2D canvas API was designed in such a way that browsers can make use of hardware acceleration, but they have chosen not to yet. I expect the implementations of canvas 2D to improve dramatically as WebGL progresses.
You can find the canvas 2D API in webGL here
I recently pushed to github a simple 2d library written on webgl with a naive (but functional) canvas fallback. It uses the same scene graph than cocos2d, you can check it on http://github.com/funkaster/ChesterGL - note that its not 100% functional, but you can use it as a starting point to write a simple 2d game
2D in 3D is extremely easy to do. You just have to place all your objects in a plane and scale your viewport to draw the desired portion of that plane.
In any case, there is approx 10 years 'till you can expect to find WebGL capability in most peoples browsers. With the right methods you can get a long way without using canvas, the trick of using prerendered rotations of your graphics is a must know to any JavaScript game developer, along with "sprite" animations.
The important question is, are you just playing with the tools, or are you making a game that people should be able to play and enjoy?
Keep in mind, that you can use the gl.POINTS draw mode and draw a texture ( sprite ) at each point instead of a point. You simply have to use a sampler. It is really powerful.
Pixi.js is currently the most stable and active:
https://github.com/GoodBoyDigital/pixi.js/
This might be a bit extemporaneous, but I think it's worth the effort in case anyone is trying to find a good WebGL wrapper for 2D object manipulation. I strongly recommend fabric.js, which provides interactive object model on top of canvas element. It also has SVG-to-canvas (and canvas-to-SVG) parsers. The demos section of the official web site clearly shows the potential of this javascript library.