Can you suggest a canvas library capable of SIMPLE 3d - html

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

Related

What does Chrome use for accelerated 2D vector graphics in its HTML5 canvas draw functions?

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.

Interactive visualization in 3D using non-flash technologies?

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/)

3d objects in actionscript 3 without plugins

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.

Emulating Photoshop color levels in AS3

I'm making an app in which I need to make some photo effects similar to Instagram's effects. I was wondering if it's possible to somehow emulate the work of Photoshop's color levels in AS3.
I've tried using AdjustColor, ColorMatrixFilter and ColorTransform classes but desired image is very hard to achieve using those.
So does anyone have a solution easier than that? or maybe someone knows a library that I couldn't find on Google?
You should have a look at Joa's image processing library.
Have a look on this library:
http://peternitsch.net/bitmapdata.js/
This is actually implemented in Javascript, but it's based on the Flash API. All You need is there. Or i can recommend Foundation ActionScript 3.0 Image Effects by Todd Yard.
Flash API reference is another good resource for inspiration.
There is another good resource for pixel manipulation found here: http://evanw.github.com/webgl-filter/. This is done in WebGL but if your target API is still Flash, then you can easily transposed the GLSL language into Pixelbender and inject the shader
into the Flash by making reference to the pbj file.
Check Grant Skinner's TweenMax plugins, especially ColorMatrixFilter.

Kineticjs vs Raphaeljs

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.