Three.js Skeletal Animation Export Issue - animation

I've been working with an animator to help with my game. The animations all work fine using morph targets, but the file size just gets way too large. Skeletal animations are the answer. We've spent a week working to get the animations exported from blender correctly.
After reading many many articles we were able to get basic animations working correctly. I make sure to set the armature to rest pose and export on the first frame and all that, but the more complicated animations are off.
You can see in this example here (click to cycle animations):
http://www.titansoftime.com/beta/animation2.html
My animator said the problems are related to bone constraints using his controllers. He said his technique is called "Inverse Kinematics".
Anyone have any ideas?

I have found the answer. For one you can not scale the geometry in the json loader (however you can scale the mesh object once created).
The main thing is that my animator was using inverse kinematics, which apparently three.js does not play nice with.

Related

Why is blender rigged animation distorted when exported as GLTF?

I created an animation in Blender with armature rigging. When I test it in Blender by pressing Alt-A, it works perfectly fine. However, when I export it as a .glb using the KhronosGroup GLTF exporter, the resulting animation is distorted (e.g., limbs are disconnected and moving in a weird way).
Why is this happening (and how can I fix it)?
For the past two days, I have been trying solutions from similar questions (such as applying location/rotation/scale with Ctrl-A, or deleting the Armature modifier on the mesh) but none of them have worked for me.
Links:
Here is a link to a screen-recording of what the animation should look like (this is me playing it in Blender):
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/correct-animation.mov
Here is a link to a screen-recording of what the animation actually looks like (this is me testing the exported .glb in the browser with Three.js):
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/distorted-animation.mov
Here is the .blend file:
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/soldier.blend
Here is the exported .glb file:
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/soldier.glb
I looked at your setup a bit more.. I see you have a few IK bones that are partially driving the animation. Those won't translate correctly, and will have to have the IK baked into the animation. I also investigated the mirror modifier and realize the problem there.. to get the mirrored object to export, you have to click the "apply modifiers" checkbox, but that ALSO applies the Armature modifier, which distorts the mesh so you get the wrong mesh out. To fix that you have to apply the mirror modifier manually in blender, then export Without "apply modifiers" checked. Once you do that, and once you bake the IK into the animation, you might get it to work.
I've done the IK baking in the past but forget exactly how it works, but here's a starting point: https://blenderartists.org/t/bake-ik-to-fk/587226
fwiw Here is the .glb when I pre-applied the mirror modifier.. notice the arms animate correctly now, but the legs/feet are still screwy because of the IK. I didn't figure out how to bake that yet...
https://drive.google.com/open?id=1zeA-mMirOWYZHlzdURqNnykgh_g10kbr
Set Object's transformation values:0 before Rig.

Blender exports a three.js animation - bones rotate strangely

I'm currently trying to export an animated blender model to three.js using the exporter of three.js (github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/2.66/scripts/addons).
I've created a model including bones and weights and a tiny animation.
The problem I have: The model gets broken. Somehow the bones don't rotate around their origin but around the origin of the root bone. Moving the bones manually does not make a difference.
I followed these tutorials:
devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/
dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
I have:
Deleted the Armature
Checked the Vertex Groups
Keyed all bones in the first and last frame.
I've been to pretty much every thread I could find on github and stack overflow. These seem to be the main issues for these errors. But I guess I still miss any point. :(
I have uploaded all files including the blender files and exported animation.
http://www.file-upload.net/download-8068001/forum-files.rar.html
Any suggestions?
Thanks a lot in advance.
The problem was that the location/rotation/scale were not reset before exporting the model.
Before You export Your model, select the mesh and press CTRL+A and select location. Repeat for rotation and scale, then select the armature and do the same. Now it works.
I've downloaded both the tutorial package and your code. The code aspect looks fine. So looking over the model I see that your vertex groups are not well defined. When I select the Left_collarbone bone, left_upperarm, left_lowerarm I seem to be getting vertices from parts of the torso, head, etc... in the mix. I suspect that what your seeing with your funky shoulder stretch animation is that the collarbone is part of some other groupings and when exported the "weights" of the mesh are confused causing the bone to pull badly on the mesh. Try cleaning up the vertex groups and see if that helps. #lukasz1985 has the right idea, nice one! +1
P.S. Thanks for the link to the cool animation tutorials for Three.js :)
I had an issue where calling THREE.GeometryUtils.center(geometryWithBones) on a the newly imported geometry would make all the skinning look very strange. Getting rid of that fixed things.
Also make absolutely sure, that the three.js blender exporter is not set to to align your model in any way. (I had it set to "center" and it took me 4 hours to figure out why my bones rotate around some spot that was NOT the spot they rotate around in blender.)

Unity animation translation error

I am having an issue in unity. I have an animated model made in blender imported into unity. When the scene starts the model is the correct size and is at 0,0,0. When trying to use a java script to play an animation the model moves about a meter and scales by about half, the animation does play on the small model. The model was made in blender and is not anything out of the ordinary, the animations play in blender with out any issues. It was imported as a blender file not an fbx. Trying to import it as an fbx produced too many issues. The import did not cause any issues but two things of note: the rig was imported with -90x rotation and the animations can only be used as lagacy. The java script is not complicated it is only using "animation.CrossFade( "english_hook" );" or any of the other animations. I have tried to see if anyone else on the internet has seen this issue but either they ave not or I am not searching for the right problem. I am fairly new to unity and have moderate exprience in blender. Has anyone seen this kind of issue, know how to fix it or have any ideas?
Are you using Unity4? You might have to mark your animation as legacy, open your imported model in unity inspector, select "Rig" tab and set your animation to legacy.

animation not playing unity

This appears to be such a common problem, that finding answer to my specific case is near impossible, because of the amount of noise in google or forum searches.
I have imported object to unity from blender. This objects had smaller objects inside it. Those smaller objects have animation on them, which was created in unity. If I open the animation window (Window->Animation) and press play - I can see correct movement of an object. Animation is set to play automatically in inspector, culling type is always animate. If I play the game however, animation does not play. Why?
add the animation to the main object, then animate the smaller object...
you have to put animation component to main object, then animate the small part...
it is important...
it should work
I Could not find any unity inspector based answer. For now, the best option I have is to create new script, and in update() check if the animation is playing. If not, play it. Very inefficient, so to whoever might stumble upon this post in the future, I suggest you try to add this.animation.play() in setting up part of the script.
I know it's kinda late, but this is for others having this same issue.
Animations in Unity have types (2 of which I know).
Type 1 can be attached to an object using the Animation Component.
Type 2 can only be used in Animators (Mechanim).
Animations imported with FBX files are type 2 (and as far as I know, animation type in FBX files can NOT be changed), so they will usually not work when attached directly to an object with "Animation". They should be used with Animators and Animator Controllers. Just create a New Controller and add the animation. It will become the default animation state and play automatically.
If you want it to loop, click on the FBX asset, and in the Animation tab, choose Loop Time and click Apply.

Skeletal animation using parsed data from COLLADA file in Three.js

I have experimented with the example COLLADA parser colladaloader.js and imported a skeletal animated collada model "Seymour_anim2.dae" from http://collada.org/owl/browse.php?sess=0&parent=131&expand=0&order=name&curview=0 using mrdoob.github.com/three.js/examples/webgl_loader_collada.html and http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html as an example. The loader seems to parse and store the skeleton structure and some skeletal animation data either in collada.animations or collada.dae.animations. The problem is that I can't get the skeletal animation to work using the methods in the examples.
Now, I'm wondering is there something wrong with the COLLADA parser, or are there some other methods/tricks in Three.js that could be used to play the skeletal animation of my model? I'd love to hear if you have any ideas how this could be done neatly in Three.js or is this even possible yet.
Edit: I have now also tested the model with GLGE framework and it loads, renders and animates it correctly. However, it would be very good to have skeletal animation for COLLADA model in Three.js because developing with GLGE is too time consuming and troublesome and GLGE is quite inactive project compared to Three.js. Skeletal animations are important for increasing immersion in a virtual world.
I've myself given up on Collada and went on using the included OBJ loader.
But halfway through I've found one thing that might be worth testing out.
There seems to be an alternative Collada loader, here: github ColladaLoader2.coffee
Hopefully it works somewhat better. Please let me know :)

Resources