An articulated 3D human in HTML5

Question

I am developing an open sign language gesture builder, in some ways very similar to Vcom3D's Gesture Builder - see product demo on bottom of this page.

The main goal is to make this app work in all major browsers without any need to install a plugin or browser add-ons.

I am having problems finding the simplest way to create an articulated human character, that would have controllable arms and fingers, just as the avatar from Vcom3D's Gesture Builder:

I googled alot and checked many 3D human model creators/manipulators, like MakeHuman and Blender, which could be helpful developing a 3D model, but i have no idea how I could use it inside an HTML5 environment.

Do you have any ideas? I would be very thankful!

Edit: Chico3001 gave a really good answer explaining how to implement animation using Javascript and HTML5 elements. However, my real problem is how to create relatively good looking sprites that I could use to create such animations?

Answer 1

I like the comment: "You mean, you want to build a spaceship, but don't know how to build a bike?"

I do not think the sprites will help you very far. Your example screenshot indicates you want to rotate objects and also you want to give it a notion of 3D, which involves shading and other nice extras.

If somebody would buy me time (lots of time) and I had the task to build a 3D gesture builder, I would base all my work on things like that:

http://de.wikipedia.org/wiki/Scalable_Vector_Graphics

http://www.lutanho.net/svgvml3d/

http://www.svgopen.org/2010/papers/58-WebGL__SVG/

http://javascript.open-libraries.com/multimedia/3d/svg-vml-3d-javscript-libraries/

http://debeissat.nicolas.free.fr/svg3d.php

Answer 2

You need to use canvas elements and javascript to create the animations, then change the images when detecting some actions

html:

<canvas id="#test" data-url="...url..."></canvas>

jquery:

$(document).ready(function(){
$('#test').each(function(index, element){
    var obj = $(this);
    var canvas = $(this)[0];
    var context = element.getContext('2d');

    var img = new Image();
    img.src = $(this).data('url');
    img.onload = function () {
        context.drawImage(img, 0, 0);
    };

    $(this).on({
        "mouseover" : function() {
            canvas.width = canvas.width;
            context.drawImage(img, img.width / 2,0,img.width / 2,img.height,0,0,img.width / 2,img.height);
        },
         "mouseout" : function() {
            canvas.width = canvas.width;
            context.drawImage(img, 0, 0);
        }
    });
});

This example loads a 2 image horizontal sprite and when you move over the image it changes from first half to second half, for your application you need to load many sprites and then change them

you can also use jquery plugins to make animations like http://spritely.net/