So i would like to do things like what is possible with a HW accelerated HTML5 canvas for animated 2D vector graphics drawing, but on top of my OpenGL (4.x) rendered 3D scene (for complex HUD and GUI displays). I need this to be able to work on Win7+, MacOs, and Linux, mobile platform support is not needed.
BTW I am working with C++.
I was wondering if anyone knew what for example Chrome uses for accelerated 2D vector graphics in its HTML5 canvas draw functions? I was under the impression it was accelerated using ANGLE (which wraps OpenGL or DX9). Or am I wrong and its only SVG rendering that is accelerated, not the javascript canvas draw functions.
Doing HTML5 canvas style animated 2D vector graphics with OpenGL is highly non-trivial, is Google using an available library for that or is it just in-house code?
I have been looking into OpenVG and have had a hard time finding the right implementation to use for that, so far the only thing i can actually get examples compiled for is ShivaVG (but there seems to be shimmering artifacts for the tiger demo and other issues for the latest release 7 years ago). Also i think ShivaVG is using fixed function and my team decide to lock down our OpenGL usage to 4.x core profile, so that won't work. I would love to use NV_Path_Rendering but its not portable (to anything other than a nvidia accelerated device).
I also thought using OpenVG would be useful since I might be able to hide NV_Path underneath, or a new OpenVG library that might come out in the future. But I am wondering if OpenVG's future might be in peril.
They apparently use the Skia library for all 2D rendering.
Related
I'm making a flash app for AIR. The app is mostly made, but I'm not happy with rendering speed on mobile (render mode - gpu).
I know there is a framework that allows user-friendly way to work with Stage3d called Starling, but I've never used it.
After looking into it and following through some tutorials I've noticed that I need to rename all package flash default classes, e.g flash.display.DisplayObject -> starling.display.DisplayObject.
But such action might be destructive to my code base, plus, I have other frameworks attached that work with some flash package classes.
Is there a way to attach Starling to a complete project without re-naming all the package names, changing assets and re-factoring all frameworks that work with default AIR API?
If you're thinking of switching to Starling, you'll have to redesign your whole rendering code. Starling is no drop-in solution. Just renaming classes in your existing code will not do because it completely replaces flash display list for Direct3D, which does all it's rendering with GPU, with all the differences it brings: bitmapped graphics, texture atlases, careful draw ordering. Learning curve can be a bit steep in the beginning but once you get familiar with basic concepts it's a breeze to work with.
IMHO, it's well worth the effort, especially on mobile. Code that ran in low 10s of FPS in classic display list can easily be made to run at solid 60fps with Starling. Basically, for flash on mobile, Stage3D is the only game in town. And Starling is the best supported and widely accepted framework for 2D stuff on Stage3D, with lots of supporting libraries and a very helpful community of developers.
Go on, take the plunge, you won't regret it.
You can run Starling and a native flash application layer at the same time but it wouldn't give you an optimum experience.
If you want to take full advantage of the gpu acceleration of Stage3d and Starling though it would be preferable to refactor your existing code to use Starling display objects rather than Flash display objects.
You might want to post this question on the Starling forum, they are very helpful guys and it's a thriving developer community! - http://forum.starling-framework.org
What would you say, using canvas or webGL?
I have read somewhere that canvas isn't very performant, because currently it's based on the DOM, or something like that. On the other side webGL isn't well supported yet. And it's also more difficult to learn I guess.
The game is "2.5"D - it doesn't need 3D. But wegGL could make sense for good effects and because it's processed in the graphics card. The fact that it is not well supported across browsers is something I could live with, if I see it really offers advantages (performance, effects, etc.) which I couldn't get using canvas.
I don't mind about steeper learning curve. What is important is that the game is well scalable, performs well at the end, and that most features are potentially possible.
Hope to get some good opinions, thanks in advance!
2D Canvas will do you well here.
The math will be far easier than using WebGL and 2D Canvas is now hardware accelerated on every major desktop browser and enjoys wider support on mobile devices than WebGL.
Canvas is not slow because its a DOM element, ideally the only time you touch the DOM is when you get the context. Touching the DOM, for the record, is always slow but you only have to do it that one time.
There are a few tutorials about isometric canvas games as well as some good questions here on StackOverflow asked by Neurofluxation, but he deleted most of the relevant code from his questions for some reason, which is a bit of a shame.
I'm starting a new project using HTML5. Two of the most popular graphical toolkits are KineticJS and RaphaelJS. If you have experience of using these, do you have any advice? Which features do they offer, and is there an advantage in using one over the other?
E.g. only RaphaelJS works on legacy browsers (but this in not a feature I require).
The biggest difference between RaphaelJS and KineticJS is that RaphaelJS uses SVG and KineticJS uses HTML5 Canvas for visualization.
So it really depends on what kind of project you are doing.
Here are some useful links which you should check out regarding SVG vs Canvas:
Thoughts on when to use Canvas and SVG (also describes a hybrid approach)
Simon Sarris excellent reply in this stackoverflow thread (I also posted some benchmarks between SVG and canvas in the same thread)
To summarize:
If you want to create some interactive charts I would go with RaphaelJS because it's easier to do that with SVG (KineticJS does provide some abstract API which should make it fairly easy to do that too).
If you want to visualize huge numbers of shapes/objects I would recommend to use KineticJS as canvas scales usually better with huge numbers of shapes/objects to be drawn and KineticJS uses multiple layers to improve rendering performance.
What I need to do is create a simple preview of a minecraft "dude" with the correct texture applied.
I'm not concerned with complex animations (yet) or detailed lighting (yet) but I'd like to make it using canvas and not rely on WebGL(not really that widely supported yet).
What technologies would you recommend for this set of limitations?
Ah, also, I don't need to edit or save the skin or whatever, just a simple display.
THREE.js is a popular javascript 3D library, it supports both canvas and WebGL
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.