Blender Web HTML5 Canvas how to

I can’t seem to find any discussion on using blender with the web.
Has anyone been successful in using Blender to make interactive flashlike vector animation?

My first thoughts were , “maybe the game engine would be useful for this”

Can I export my animations in a way where they can be viewed on a webpage as vectors and not as bitmaps?

using the html canvas tag or javascript in some way?

It would be great if there were a web version of blender. It has everything you need to make interactive web presentations except the ability to export as javascript/canvas-html and the ability to attach clickable links to 3d objects and call mouse-over functions etc…

Can anyone point me in a good direction.

I really want to get away from using Flash and find an alternative.

To answer your question, now I would rely mostly on “custom implementations”, make simple stuff from scratch. I am sure that HTML5 can display Vector graphics then you only need to translate/rotate/scale them accordingly to animation.

  1. Make a python script that exports pure text for an object’s Position-Rotation-Scale (based on the timeline).

  2. Load that data into javascript and have an object be displayed based on the previous data.

Note: You can find resources everywhere for HTML5 canvas, but I think that this is a great way to start tutoring.
http://sebleedelisle.com/2010/03/3d-engine-in-10-lines/

HTML5 is in baby stage so far, I hope that it’s a matter of time that within the next years there could be an enterprise open source project for canvas graphics (and I am anxious also to see how the WebGL will envolve).

Some other cool resources:
http://hakim.se/experiments/

Another option: http://blenderartists.org/forum/showthread.php?t=163965

If found this Canvas animation engine.
http://burst.bocoup.com/

Your main problem is that blender renders to raster, not vector. Even then, most animation done with canvas uses raster images anyway.

If you use Illustrator, you can try out the new (and free) ai->canvas plugin released just a few days ago.

http://visitmix.com/labs/ai2canvas/

Unless you use the freestyle svg script (which outputs the results of freestyle’s calcs to SVG.) However, caveat is that the script was written for freestyle before it made the jump to 2.5x, and so it awaits updating by the author. I believe its on his to-do list, but it may be a while.

not blender but processing.js is freakin cool :

http://processingjs.org/exhibition

Try www.blend4web.com it us used by NASA for their virtual rover demo.

1 Like