This is an example of what I am trying to achieve: http://threejs.org/examples/#webgl_animation_skinning_morph
I am exporting a 3D model from Blender (v 2.73) to Three.js (r70), using the exporter from Three.js r69.
The model has a skeletal animation, and a number of Shape keys with different facial expressions (eyes open/closed, etc.).
Exporting the skeletal animation to Three.js works fine, but I'm at a loss as to how to export the morph targets correctly.
The exporter has a check box for 'Morph animation', but enabling it results in a very large file, where each frame of the timeline produces a morph target. (The timeline has the skeletal animation).
The json file for the knight model (http://threejs.org/examples/models/skinned/knight.js) has 4 morph targets, one for each facial expression. This is pretty much exactly what I want, but I have not been able to reproduce it.
Any tips on how to setup the blender file / blender to three.js workflow would be greatly appreciated.
Just to close this topic:
After some trial and error, we ended up using one keyframe in Blender for each morph target (shape key) we wanted to export. The influence of the morph target was 1 (maximum) on that frame. So for 3 morph targets we had 4 frames (3 + default).
The skeletal animation did not have to be on the timeline for it be exported correctly.
This works with the r69 exporter, and we didn't try any of the newer versions.
The COLLADA file format has a support for Shape-Keys (called morph keys there).
If you have a full featured COLLADA-importer for your platform you should be able to import and use them without additional work.
You can proof this yourself by exporting you blender model with Shape-Keys to COLLADA-file and import that COLLADA-file back into blender. All Shape-Keys and weights are still there :)
Related
I have been experimenting with different 3D model file formats in Xcode, primarily .obj and .dae.
However, after I export these files from Blender, they either don't have any lighting associated with them or all of the values (especially their metalness and roughness) are not what they were initially setup to be.
.obj export,
.dae export,
then the blender version.
Is the issue how I'm exporting the models from Blender, the models themselves, or something else?
obj
If you create a model in Blender (or in Maya), remember, every app has its own internal shaders that may differ from SceneKit's shaders. When you export any model as .obj you also get a corresponding uv-mapped .mtl texture file. There are no lights inside .obj, because this format does support only geometry (with smoothness, normals and UV IDs). And one more thing – .obj doesn't support animation.
dae
.dae format allows you export not only 3D geometry with animations but also its corresponding shaders (like Phong, Blinn or Lambert) with colours and textures (however, Blender or Maya's procedural textures are not supported). And all the lights that were in 3D scene will be also exported.
usdz
The best candidate for export is .usdz file. Not all 3D authoring tools have export usdz option, but Autodesk Maya 2022, thanks to USD plugin, has.
.usdz format has all the features that .dae format has, but in addition to that I can say it's native to RealityKit, SceneKit, Reality Composer and QuickLook, its hierarchical system was adapted for larger scenes and it supports Python USDZ schemas.
I have a rigged (skeleton and soft bind) model in Maya. The model is all one seamless low poly with a single jpeg texture mapped. There is simple animation of the skeleton. (joint rotation). I need to get it to work with ThreeJs (webGL).
Do I try to export an OBJ with Morph Targets some how? I can do OBJ but how do I get the morph targets? Can the developer that I am working with read Maya's baked animation file (.MC or .XML) in webGL. Do I export a Collada DAE?
Any help that can steer us in the right direction would be greatly appreciated.
Thanks
THREE.js comes with an exporter for Maya, but it only works for static models. I have created an updated version that also supports exporting rigged and animated models. It doesn't require any intermediate steps: it just outputs straight to a .JS file. We have a pull request to integrate the updated exporter with the THREE trunk, but if you want to get the new and improved exporter immediately you can get it from this repository: https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter. The exporter files are in utils/exporters/maya.
Hope this helps.
It is best to export a Collada DAE file from Maya in order to get your data into ThreeJS. You can preview and share your data via http://Clara.io (an online 3D editor, modeler, animation) which imports Collada DAEs and uses ThreeJS for display.
You should have read the FAQ as there is plenty of info there. https://github.com/mrdoob/three.js/wiki. Most probably you need to export to Collada as Wavefront obj's do not support animation.
I am currently working on skeletal animation tests in three.js. I have a simple model which animates just fine in blender. Basically it consists of three stacked, bending cubes.
When I export the blender file to the three.js using the blender export plugin with Blender V2.64, the animation in the webGl context appears different as if the skinweighting is wrong.
WebGL-Demo:
http://rainbowrangers.de/threejs/animation_test01/
Blender-File:
http://rainbowrangers.de/threejs/animation_test01/model/animation_test01.blend
What do I have to do to get the correct result in three.js?
I am the person you quoted from the github discussion. I have recently been experimenting with this pipeline, ( ie Blender bone animations into threejs,) and have found that it is very very difficulty to find a reliable process that will work every time.
On my blog, I have compiled a list of 'tips' that allowed me to achieve success on some occasions:
http://dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
To summarise, the most important things I found were:
Delete the Armature Modifier before exporting, or the animation will be all messed up.
Check that your Vertex Groups are properly assigned to the bones. ( In Blender, you can use automatic bone weights. )
Key all bones in the first and last frames of your animation. ( As you discovered, if you only have keys for the bones you have changed, ThreeJS won't infer anything about the other ones, and things will be broken. )
Even following these guidelines, I can't get things to work consistently, and have been considering using morph targets until the library matures a bit more. The file sizes for morph targets are much larger but they seem to be a more reliable option at this point, in my experience.
After a lot of digging I finally found the answer in one of the three.js github discussions:
"Insert a full keyframe for all of the bones at the beginning and end of the animation. I found that without the first keyframe the animation would be subtly distorted, and without the one at the end I would lose parts of the animation toward the end."
Source: https://github.com/mrdoob/three.js/issues/2106
That was exactly what happened to our render. We only hat keyframes set for the bones that were changing and not for the static ones.
I've also found that to get the exported model working right the export should be done at frame 0 in Blender.
Another thing that solved a problem I've encountered was not to scale model after exporting it. This means that the model can't be scaled in the JSON file and probably in the code directly.
Using three.js r56
I'm trying to get my Maya animated walk cycle into three.js. I have exported the animation with the model into the .dae format, changed the path to my model in the example. My model is being loaded, but it doesn't do any animation. What could be the problem? My main goal is to create a character who walks with WASD as his walk cycle is being played.
Any suggestions where should I start?
If you are using collada loader, the animation should work without any problem. I have used the collada loader to animate one of my models using three.js, and it works like charm.
A better example to take a cue on how to make it work is webgl_loader_collada_keyframe.html .
Converting to the DAE format and then to JS is rife with problems, and it rarely works for animations. THREE.js comes with an exporter for Maya, but it only works for static models.
I have created an updated version that also supports exporting rigged and animated models. It doesn't require any intermediate steps: it just outputs straight to a .JS file. We have a pull request to integrate the updated exporter with the THREE trunk, but if you want to get the new and improved exporter immediately you can get it from this repository: https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter. The exporter files are in utils/exporters/maya.
Hope this helps.
I am trying to do animations on iPhone using OpenGL ES. I am able to do the animation in Blender 3D software. I can export as a .obj file from Blender to OpenGL and it works on iPhone.
But I am not able to export my animation work from Blender 3D to OpenGL. Can anyone please help me to solve this?
If you have a look at this article by Jeff LaMarche, you'll find a blender script that will output a 3D model to a C header file. There's also a followup article that improves upon the aforementioned script.
After you've run the script, it's as simple as including the header in your source, and passing the array of vertices through your drawing function. Ideally you'd want a method of loading arbitrary model files at runtime, but for prototyping this method is the simplest to implement.
Seeing as you already have a method of importing models (obj) then the above may not apply. However, the advantage of using a blender script is that you can then modify the script to suit your own needs, perhaps also exporting bone information or model keyframes.
Well first off, I wouldn't recommend .obj for this purpose since the obj file format doesn't support animation, only static 3D models. So you'll need to export the animation data as a separate file that you load at the same time as the obj.
Which file format I would recommend depends on what exactly your animations are. I don't remember off the top of my head what file formats Blender supports, but as I recall it does not export Collada files with animation, which would be the most general recommendation. Other options would be md2 for character animations, or 3ds for simple "rigid objects moving around" animations. I think Blender's FBX exporter will work, although that file format may be too complicated for your needs.
That said, and assuming you only need simple rigid object movements, you could use .obj for the 3D model shapes and then write a simple Python script to export a file from Blender that has at the keyframes listed, with the frame, position, and rotation for each keyframe. Then load that data in your code and play back those keyframes on the 3D model.
This is an old question and since then some new iOS frameworks have been released such as GLKit. I recommend relying on them as much as possible when you can, since they take care of many inherent conversions like this, though I haven't researched the specifics. Also, while not on iOS, the new Scene Graph technology for OS X (which will likely arrive on iOS) in the future, take all this quite a bit further and a crafty individual could do some conversions with that tool and then take the output to iOS.
Also have a look at SIO2.
I haven't used recent versions of Blender, but my understanding is that it supports exporting mesh animation as a sequence of .obj files. If you can already display a single .obj in your app, then displaying several of them one after another will achieve what you want.
Now, note that this is not the most efficient form to export this type of animation, since each .obj file will have a lot of duplicated info. If your mesh stays fixed over time (i.e. only the vertices move with the polygon structure, uv coords, etc. all fixed) then you can just import the entire first .obj and from the rest just read the vertex array.
If you wanted to optimize this even more, you could compress the vertex arrays so that you only store the differences from the previous frame of the animation.
Edit: I see that Blender 2.59 has export to COLLADA. According to the Blender manual, you can export object transformations, and you can also export baked animation for rigged objects. The benefit for you in supporting the COLLADA format in your iPhone app is that you are free to switch between animation tools, since most of them export this format.