How can one recreate the 3D feeling of this interactive visualization (done in Flash) in HTML5/SVG/Canvas or similar? Are there any JS libraries you can recommend?
http://www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
This is not actually 3D, just 2D with perspective.
Many libraries such as D3js (http://d3js.org) aid in making such visualizations, using either Canvas or SVG.
Even for true 3D there are several canvas libraries, the most popular of which is Three.js (http://threejs.org/)
Related
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.
I am fairly new to actionscript and was wondering is it possible to create 3d shapes (cones, spheres, cubes) using actionscript.
I would like not to have to use a plugin.
The shapes must be 3d as I need to rotate them.
Here you will find Adobes documentation for what you are looking for:
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS7D38179D-58B9-409c-9E5C-257DDECB1A02.html
Is there any specific reason that you don't want to use 3D libraries like away3D?
I think Matej's answer does not fully cover the topic as the link he gave only describes a classic display list approach to drawing 3D objects. Depending on your needs, drawing things using classic display list can be slow, as it is not GPU accelerated. If you want to utilize your GPU you can use Stage3D APIs - that does not require any external frameworks. Here's an excellent article for starters.
And even though you can render 3D content using 'raw' Context3D, I`d recommend using a framework like Away3D or Alternativa3D. Both are open source, by the way.
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.
While a concept of quadratic and bézier curves is quite simple, visual drawing is much more simpler. I wonder if there's an online tool for drawing paths visually and then just grabbing the code? For example recently I've stumbled upon this one: Canvas Bézier Curve Example, pretty cool, but as it states - it's just an example, not a tool.
Maybe there is more versatile thing on the web somewhere (there should be), based on same concepts?
I think your best shot would be draw using SVG vector art software like Inkscape, then export this SVG file. Modern browsers can read SVG and paint it on the canvas.
SVG is open, XML, based format and quite human readable.
There are many great tools such as Inkscape that will output SVG paths.
Then there are many SVG-to-canvas libraries (here's one) that you can use to turn the resulting SVG into canvas paths.
Of course its worth asking yourself if you can just use SVG and save yourself the trouble of one step!
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