Animation using HTML5 CSS3 Javascript with text to speech audio? - animation

I'm looking for HTML5, CSS3 & Javascript framework to create small animated videos with capability of text to speech for audio which will be played in background. Framework should support cross browser support, video, audio, and canvas elements for animation.
Is any such framework available? If yes, kindly advise suggested URLs to learn?

Is any such framework available?
Currently there isn't any single framework that support all these features in one package (at least not readily available).
You will have to combine various frameworks which on their own provide cross-browser support (to variable degree).
Here are some examples of frameworks you can combine - there are plenty of other frameworks, but these seem to be widely used and should be stable enough for production:
Text-to-speech
http://responsivevoice.org/ (dual licenses)
http://www.masswerk.at/mespeak/ (GPL)
Video player
http://videojs.com/ (Apache 2.0)
Audio player
https://kolber.github.io/audiojs/
Animation
http://createjs.com/easeljs (MIT)
https://github.com/greensock/GreenSock-JS (different licenses, mostly for DOM)
Video syncing
https://github.com/mozilla/popcorn-js (MIT)
Canvas element polyfill (with some limitations*)
https://github.com/arv/ExplorerCanvas
*) In IE8 and below the canvas element isn't supported. ExCanvas allow for basic operations but cannot do things like getImageData() etc. There is also performance restrictions. There exists Flash based (see licenses) solutions as well.

Related

3D engine collision detection modelimport

I am about to find a 3d engine which is capable of importing 3d models, detect their collisions and support joints. It's needed for an interactive animation and no platform is specified jet. I would prefer to code Javascript or AS3, but I think to be able to handle this with Java too.
Does Away3d support this? Is their a plain 3D collision detection framework I could use additionally to it? Which is the easiest Java Framework and which creates best Quality?
BTW.:
Proprietary Frameworks might also be an possibility, but I just do not any.
Greetings philipp
Away3D has Awayphysics library that is alchemy port of C++ engine and show very good performance. Away3D has clean readable source code and documentation + good set of example projects. It has 3ds max plugin that can export scene and generate code to render it. Support popular formats like 3ds, obj... and You can write importer plugin for own format. All so developers are pretty cool guys that answer questions on forum :)
For JavaScript the most popular engine is three.js Look what it can do.
General thoughts:
WebGL support isn't good at this time(sometimes it depends not only on user browser but all so on drivers) and You will need to deal with cross browser headache. Flash isn't supported on IOS and get kicked more and more from device browsers. But there is cross-platform adobe air for standalone apps.
Javascript, in my opinion, isn't good for writing such projects and its debugging can cause permanent brain damage. WebGL shader language is GLSL that has nice C-like syntax. Ordinary Flash shaders are written on assembler but You may try pixelbender3d. At this time Flash shaders more limited than WebGL(for example you can't fetch texture in vertex shader) but it's done to make Flash more compatible and it's not a problem for most cases. WebGL is tightly integrated with page.
If you want java WebGL and like pain try GWT 3D engines or gwt-elemental and there is tree-js port at early stage.
x3dom is declarative WebGL 3D engine with fallback to Flash it is ez but pretty limited and unstable.

ISampleGrabber deprecated?

I have an old computer vision experiment that uses Video for Windows to grab frames from a camera connected to the PC. It's a hack, it uses VfW to create a preview window, then it does a GetDIBits from the window DC.
I'm finally ready to port this to DirectShow. My understanding was that I could grab frames from a video capture graph by using ISampleGrabber, but now I read that ISampleGrabber is deprecated.
What's the non-deprecated way to grab frames from a video feed? Do I have to implement my own DirectShow filter that does essentially what ISampleGrabber does?
DirectShow is not deprecated; just the DirectShow Editing Services. I would strongly recommend using DirectShow because of the much wider level of support, unless there are specific features of MF that are needed.
There's been no development of DES for some years, but the sample grabber is a widely-used filter that is somewhat independent of DES. I would be happy to recommend that you use it. If there is an issue in future versions of windows, it would not be more than a day or two's work to replace the filter.
G
I think Windows Media Foundation would be your best bet if you are only targeting Vista/Win7, otherwise you can still use DirectShow/SampleGrabber approach, I doubt it will be removed any time soon. Related question here.

Animated PNG Status

Is animated PNG, whether APNG or MNG about to get cross browser soon? Does anyone know their status? Is Webkit or IE considering supporting them?
Thanks.
MNG is a lost cause. Forget it.
You can use APNG on browsers that support it, and use workarounds for other browsers: http://ajaxian.com/archives/apng-class-get-apng-going-on-all-browsers
On APNG in Webkit:
------ Comment #1 From Mark Rowe (bdash) 2008-01-26 11:09:57 PST -------
WebKit uses the platform's underlying image libraries for format support, so
APNG would need to be implemented there for WebKit to decode it. This would
require ImageIO on Mac/Windows to support it (), and
QImage for Qt. Only the Gtk and wx ports make use of the bare basic image
decoders in the WebKit source tree.
The Chromium issue doesn't have a comment to a similar effect, it appears they use their own decoder, so getting them to support APNG should be easier.
Can't say anything about IE, since they're not commenting much on their plans, but I can imagine they have more important things to fix/implement first...
Some good APNG info can be found at the wikipedia page for APNG
Neither of them unlikely to become cross-browser any time soon, or at all.
http://en.wikipedia.org/wiki/Multiple-image_Network_Graphics
The complexity of MNG led to the
proposal of APNG by developers of the
Mozilla Foundation. It is based on
PNG, supports animation and is simpler
than MNG. APNG offers fallback to
single-image display for PNG decoders
that do not support APNG. However,
neither of these formats is currently
widely supported. APNG is supported in
Firefox 3.0 and Opera 9.5.[14] The PNG
Group decided in April 2007 not to
embrace APNG
source
I wouldn't trust in a format not compatible with today browsers.
I would use gif or some Javascript using jQuery for animations instead of a not implemented solution.

hardware acceleration / performance and linkage of different macosx graphics apis, frameworks and layers

the more i read about the different type of views/context/rendering backends, the more i get confused.
regarding to http://en.wikipedia.org/wiki/Quartz_%28graphics_layer%29
MacOSX offers Quartz (Extreme) as a render-backend which itself is part of Core Graphics.
in the Apple docs and in some books too they say that in any case somehow you use OpenGL (obviously since this operating system uses OpenGL to render all its UI).
i currently have an application that should capture real-time video from a camera (via QTKit which is based on Quicktime but is Cocoa) and i would like to further process the frames (via Core Image, GLSL shaders, etc.).
so far so good. now my question is - does it matter performancewise if you
a) draw the captured frame via Quartz and implicitely via OpenGL or
b) if you setup an OpenGL context and a DisplayLink and draw the buffered image explicitely via OpenGL?
what would be the advantages or disadvantages of going either way?
i've looked at the different examples (especially CoreImage101 and CoreVideo101) and documents from apple's developer pages but i can't see why they go (or have to go) that way?!?
and i really don't get where Core Video and Core Animation come into play?
does going way b) automatically mean i use Core Video? and with which way can i use Core Animation?
additional info:
http://developer.apple.com/leopard/overview/graphicsandmedia.html
http://theocacao.com/document.page/306
http://lists.apple.com/archives/quartz-dev/2007/Jun/msg00059.html
p.s.: btw, i am on Leopard, so no QuicktimeX confusion yet :)
Generally speaking OpenGL just gives you more flexibility than the higher level APIs. If the higher level APIs do not offer a feature you need then it is very likely that you will need to drop down to the OpenGL layer.
If they do offer everything you need then you should comparable speed. Perhaps a small (almost negligible) degradation given the Objective-C overhead.

Suitable technologies for a Windows video tool

A few years ago, DirectShow was around and let you manage video on DirectDraw surfaces. But since then I think both technologies have been replaced. What's currently the best solution to let you make a Windows app which can let you composite/blend/mix videos/music together? Does one still need to go the DirectX route with surfaces/textures, or is functionality found in the core Windows APIs?
Examples might be to overlay an image on a playing video, overlay two videos on top of each other with a transition effect, etc.
Apart from core technologies to handle video/audio, are their good 3rd-party libraries? Or maybe the core APIs have enough functionality on their own?
If you're talking managed code?
Microsoft.DirectX.AudioVideoPlayback
Short tutorial here:
http://forum.codecall.net/csharp-tutorials/20436-tutorial-playing-video-files-managed-directx.html

Resources