How to import Blender 3D animation to iPhone OpenGL ES? - animation

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.

Related

Modification 3D file to the website

I use WebGL.
Is there a way to modify a .obj file (or another 3D file) for example on photoshop? When I do some change on such a file, I would like it to keep the changes I made when I load it on a website.
I know it is not possible with .obj, so is there another format to do this?
I think you can load some 3d files into photoshop these days, but I'm pretty sure you will not be able to modify them.
To modify .obj files you can use 3d software such as 3DS Max or Maya, or you could use an online tools such as the three.js editor or claria.io
There are probably various ways to achieve what you want.
If I understood you correctly, you actually have multiple questions, here are some answers:
Which 3D editing software could I use?
If you want to perform some modification with a powerful 3D modeling tool, I would recommend to download and try blender. It is completely free, but in fact a very advanced 3D modeling software.
In case you just want to smooth your mesh, simplify it, or apply some other generic operation like this, then MeshLab might be sufficient (also available for free).
Which 3D model format should I use for delivering my 3D asset on the Web?
If you use X3DOM for displaying your 3D file, you can use the standardized X3D format (like OBJ, X3D content can be imported / exported in both, blender and meshlab). This has the advantage that you can use X3DOM's inline tag and directly import an X3D file, which means you can edit the 3D content without needing to re-convert your data for the Web.
However, using OBJ, X3D or whatever text-based delivery format might not be the wisest choice if your 3D asset is large, since this will introduce long download times. Therefore, if you have complex assets / scenes, you should also consider to convert your 3D assets to a compact, optimized delivery format for the Web, such as glTF or SRC.

Blender MakeHuman to Three.js

I'm trying to integrate a animated 3D character in a Web navigator.
I use MakeHuman 1.02 to create a character which I import in Blender 2.74 in .mhx format.
I retarget to a BVH using the MakeWalk plugin for Blender. It's for the motion.
When I try to export the character in .json format (three.js), the following error appears :
MakeHuman is not a valid mesh object.
A mesh object is an object that we can modify properties or vertices, isn't it ?
I try others format like .dae format (collada) but it seems that the navigators doesn't find the skeleton and the textures of the character (even if they are in the same directory) necessary for the character's motion.
How to get the character like a mesh object ? Or somebody knows another process to success ?
Like Erica pointed out, you need to have a mesh selected to export it. The problem with this is it doesn't seem to work if you have multiple meshes. Only one will export. This is a problem when using MakeHuman because their clothes are separate meshes.
One way to fix this is to select all meshes and combine them into one (I believe that's CTRL + J). However, you'd have to somehow merge all your texture files into one big one and I have no idea how to do that.
What I do is to export the entire scene. Then it doesn't matter what is selected. All meshes get exported. You can load it using either the ColladaLoader, which I would recommend since you're retargeting to a BVH (worked great for me), or the new ObjectLoader.
If you have your own Scene object on the page that you want to use, you can still load the scene created by the exporter, traverse it to get the items you care about, and add those items to your scene that will display on the page.

Exporting Maya Animation and Bones to .Json

Iv'e tried every setting of so many exporters to get this to work, the blacktowers modified exporter for three.js, Inka3d, clara.io and online converters, and trying opening the FBX with animation into blender to no avil.
The FBX has animation and plays on websites such as clara.io and inside of Maya / 3DS Max, however when exporting the .json or .js it doesn't work inside the online editor or offline editors.
Is there any other way to get Animations with skinned bones / joints from Maya to .js / .json that will work inside of Three.Js?
The other answer is inaccurate. It is possible (and, indeed, common) to export animations and bones to three.js-friendly JSON files, from all the major 3d formats (FBX, DAE, etc.). The most robust and foolproof way seems to be through the JSON exporter in Blender - sometimes it still requires some fidgeting with, but the pipeline is mostly functional in 99% percent of the cases I've seen.
Currently (Jan '16) there is no need to use the blacktower exporter; the standard JSON exporter for Blender works just fine.
This is a good tutorial, although current practices (at least my own) differ slightly and you may have to play with various exporter options to make it work for you. If you're still running into problems, please post a clearer description of your specific issue and I'll try to help you get it working.
None of the JSON formats for ThreeJS support keyframe or bone data I understand. Right now I believe on Collada and possibly the MD* file types can be imported into ThreeJS directly with bone and keyframe data.

How do I convert a ms3d model to three.js?

I'm trying to convert this model to the three.js model format:
http://tf3dm.com/3d-model/ninja-48864.html
Here's what i've tried so far:
I've imported the ms3d file in blender using the default addon. In blender, animations and mesh look correct; however, bones are only rendered as lines. Then I exported it to js using the three.js exporter. This results in a correct mesh, but the animation is not correctly exported. Only bone positions are exported (which are only rarely used in this specific model), NO rotations at all (except for a few identity quaternions).
It seems I have to modify the model in blender somehow, but since I'm a complete novice in 3d modelling, I'm kind of lost. I've also looked at other questions regarding blender+three.js but none of the tips (apply location/rotation/scale etc.) made a difference. It might also be a bug in the three.js exporter.
Can anybody help me do the conversion, one way or the other?
A nice Python utility is available for converting ms3d format to JSON format.
The link is: https://github.com/pyalot/parse-3d-files/blob/master/ms3d/convert.py
You can easily render this JSON model using THREE.JSONLoader() in three.js
Thanks.

Model with bones animation (blender export) animating incorrectly in three.js

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

Resources