7

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:

enter image description here

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?

Alex B.
  • 647
  • 7
  • 21
  • 1
    If you're going to use sprites then it would be best to get an *actual* 3D modeling software and learn to use it. Then you can create an image for each hand symbol and put it into one big sprite (perhaps using [SpritePad](http://spritepad.wearekiss.com/)?) – Zach Saucier Oct 14 '13 at 22:16

3 Answers3

4

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

Quicker
  • 1,247
  • 8
  • 16
3

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/

Chico3001
  • 1,853
  • 1
  • 22
  • 43
  • Thank you, Chico3001, that's a very helpful answer. What you said is what I was thinking of doing and since I'm pretty good at Javascript and jQuery, the programming part won't be a problem. My real problem is creating the sprites, that you mentioned. Any idea of how to do that? – Alex B. Oct 13 '13 at 16:30
  • 1
    There is no easy way to create sprites... there are some tools that will help you, but mostly are image and vector graphics editos like: http://www.softonic.com/s/sprite-editor-0.8.2, http://www.gimp.org/, http://inkscape.org/ – Chico3001 Oct 21 '13 at 19:36
0

TensorFlow.js user launched a general purpose gesture recognition library in JavaScript here: https://youtu.be/uU-u-5Eo65g?t=243 named Project Shuwa.

Jason Mayes
  • 301
  • 2
  • 8