Adding Ghost Images

Trial one clearly didn't work:

Working!

So I finally got my project working :) The key to the rotation problem I had was to use quaternions. I'm thrilled I finally figured it out. Here is a video of it in the browser. I will post the live code when i stop tinkering with it.

Now the next steps I have are to put in lighting, ghost images, optimization, and run a user study! The project is moving forward.

Angles will be the death of me

So I had to basically rework my project when I found out that everything had to be generalized for any skeleton that UPenn will upload to the database server. As a result, I rewrote everything so it would follow this; however, my 'hack' from the previous post to fix the angles no longer holds valid :( 


I tried figuring out angles using only Math.atan2 and failed. Then I tried to use rotation matrices, and I still failed. Now I am trying to figure out the math using quaternions. The results I am getting from using quaternions is so close to being correct. My program feels bad for me, it really WANTS to work, but it knows it can't flat out lie to me and work when it is not supposed to :( I really hope I can figure out what is wrong by the end of today...

It really wants to work...

So Close...

I don't understand what is wrong now. The man I built is complete except for the shins... This frustrates me because it really *should* work.. It's no different that the rest of the code and yet these are the only two areas that are not lining up.. hmm.. 

Edit: 

So I still don't exactly understand everything that is going on here. But if you take out the Y rotation for the shins it seems to work perfectly... Should it? No. But it does...

This is a hack - I hope to eventually fix it. 

After dealing with the locations of the joints, I moved on to trying to get the skeleton to move. Here is a video with the skeleton moving via the root positions and rotations: 

http://www.youtube.com/watch?v=WN01W7jR7ng

I've been working on getting each joint to move, but so far the result is dreadful... 

I hate angles

Well after two days straight working on this issue I can safely say... I HATE dealing with angles. I'm getting really close to getting this correct, but I'm worried my way is sorta... hackish and won't work when I need to actually start moving my man :( 


Here is the 80% built man I have.. hopefully I can get him 100% completed by today. 

I'm not sure why his shins are wrong..

Working Through Problems

 So the BVH file gives us information as such: 



HIERARCHY
ROOT Hips
{
OFFSET 0.00 0.00 0.00
CHANNELS 6 Xposition Yposition Zposition Xrotation Yrotation Zrotation
JOINT LeftUpLeg
{
OFFSET 4.29448 0.00000 0.00000
CHANNELS 3 Xrotation Yrotation Zrotation
JOINT LeftLeg
{
OFFSET 0.00000 -19.20276 0.00000
CHANNELS 3 Xrotation Yrotation Zrotation
JOINT LeftFoot
{
OFFSET -0.02174 -15.68217 -0.01872
CHANNELS 3 Xrotation Yrotation Zrotation


                                                      etc...


Now, I have all of the joints nicely placed, as seen in the previous post; however, trying to connect the joints with cylinders is proving to be more difficult. Everything in this file is in a hierarchy. So the leftLeg is -19.2 in the Y direction from the LeftLegUp, so it's Y direction is technically '-19.2 while it's child has a Y direction of -15. This is a problem. Because with the normal distance formula it is saying that the position isn't actually about 15 units apart, but more like 4-5 units apart. 


What would fix the problem: Using global variables. 


Problem: Actually getting the global variables...


Without the global variables, this is what my wonderful skeleton looks like.. 

I'm so excited

So after about a 2 week hiatus because of my illness, I am back in the lab and getting a lot done! I'm super excited that things seem to be working. 


For my WebGL / Three.js BVH Player I have: 

• Made a Grid
• Working Rotations, Pan, and Zoom mouse events
• Successfully read a BVH file into my program using PHP
• This way I have all of the information I need to create the movements of the skeleton. And I have it reading only the numbers that I will use
• Begun to build the skeleton in the T Pose

While this is still in the beginning stages, everything is coming along nicely. Using Three.js made this project so much easier and I can't wait to get more completed!

TPose
Stage 1: 

Here are the Leg Joints!

Stage 2:

Joints of the full body!

So... Hey there Javascript

Programming in Javascript.. is a pain. As a crippled version of Java that tries to do 3D work, it took me a lot of time to get the hang of it. Have I fully grasped the beauty of the language? No. But that's ok. I'm really looking for ways to implement WebGL, a mix of Javascript and OpenGL ES 2.0. That brings us to another problem. OpenGL ES 2.0 is NOT the OpenGL that you would use with say, C++. It only has a quarter of the functions.


After playing around with WebGL for a few days, I realized that its almost.. silly to not use a framework. There are about 15 different ones out right now and implementing one makes coding for WebGL just so much easier. No longer do you have to worry about the silly setups and 200 lines of code to just make three squares spin (like they did in my last post). The trick is, picking the framework that will work best for your project.


At first I started with Processing.js. I figured it was popular, had a lot of documentation, and had examples as well. Their website was laid out nicely and has a fully documented API with examples (see http://processingjs.org/ for more on projecssing.js)


However, after I fiddled with it for about a week, I still could not grasp simple things. I was confused with the combination of the processing script and the javascript and how it truly interacted. Finally I got frustrated and decided to switch to a different framework: three.js.  It seems to be the most popular framwork out right now but has one huge flaw : there is very little, if any, documentation. Three.js is an extremely powerful framework, even better than processing.js (for my project at least), but one must learn by example. It is still a work in progress and keeps getting updated constantly, so hopefully there will be more documentation in the future. Three.js is a javascript file, and is easily combined with Javascript. The OpenGL ES 2.0 functions that were a hassle to deal with are implemented within Three.js and the developer no longer needs to constantly worry about the bufferset up that straight WebGL required.


After doing some research and learning more about Three.js I was able to get a working trackball camera example. Finally completing step one of my project. And it didn't even take that long.

You can rotate, pan, and zoom in the fully functional demo.

I do have to make some changes still - for one I want to zoom by spinning the scroll wheel opposed to pressing it. Also add code so this only works when pressing the "alt" key, so it is more like Maya. But I do not think these will take long. Also I want to eventually get some lighting in, because (quite contrary to what that image looks like) the circle in the middle is actually a sphere. But that is for later.


Next is to get the sphere (which I will actually make a cylinder) to move around the gird with some data points. Once that works I will work on reading in from a file - which unfortunately might be more difficult than I would have liked.