mrdoob/three.js — Issue #636: Morphtargets causing geometry to invert / break
Author: collinhover
Created: 2011-10-10 01:08:21+00:00
State: open

Hi guys,

For my graduate thesis I've been working on a browser based game that uses WebGL, and have been recently creating a series of classes / modules to handle models and animation. I don't often post questions when I can find someone who has already asked it, but I cannot find anything like this. I've also read through the source code for just about every example you have, which have been very helpful throughout my project. Apologies ahead of time for how long this post will be, but I want to make sure I include enough information so you guys don't waste your time.

Links

For the source code, see: https://github.com/collinhover/kaiopua/tree/gh-pages
- models in BLEND, OBJ, and JS formats are in https://github.com/collinhover/kaiopua/tree/gh-pages/assets/models

For a visual of the issue, please see: http://collinhover.github.com/kaiopua/
- when the page is done loading, hit start and you'll see a series of 4 models < this is where the issue is
- the two most relevant game script files are the following:
1) IntroSection (where all the models are initialized) at https://github.com/collinhover/kaiopua/blob/gh-pages/js/game/sections/IntroSection.js ,
2) ObjectMaker (handles models) at https://github.com/collinhover/kaiopua/blob/gh-pages/js/game/workers/ObjectMaker.js

Please note for this I've been using Blender v2.59 and the most up to date importers/exporters for both BLENDER > THREE and OBJ > THREE. I also have Python 2.7 installed for the OBJ > THREE converter, and Python 3.2 installed for Blender (but I read recently that you don't need Python installed for Blender to work).

Explanation

After you've hit "Start" you'll see 4 models like I mentioned. Only 1 of the 4 models is showing and acting correctly, and that is the one furthest to the left, called "rome_tree_anim".
- This correct model is based on "evergreen_low.js" from ROME
- I imported the original script from ROME into Blender, then added a shape key of it growing taller and some vertices spiking out
- from this I exported BLENDER > THREE and included a short test animation of 10 frames ( 10 morphtargets )
- on the site, you should see it looping between those 10 morph targets

Now the issues are the other 3 models (+ many more I've used to try to figure this out). They are in order from the tree as:
- character
- kaiopua_head_uvmapped_blend
- kaiopua_head_uvmapped_obj

The "character" and "kaiopua_head_uvmapped_blend" are exported directly from Blender, while the "kaiopua_head_uvmapped_obj" is exported from Blender as OBJ then converted to THREE using your OBJ > THREE script. You can see the "character" model's head is twisted and inside his body, while the "kaiopua_head_uvmapped_*" both have a simple morphtarget for a horn growing out between the eyes (instead it is growing backwards into the head). I've tried recalculating the normals and making them visible to see if there are any issues there, but all seems fine.

The main issue is that the geometry goes crazy (inverts, expands beyond what it should, etc) with these three models but not the ROME tree and I'm totally confused as to why (they've all been exported on the same computer with no software changes). I noticed originally that the only difference between these three models and the ROME tree was that the ROME tree had uvmapping, so I added that to the models but it changed nothing.

I should note that all models I've tried work perfect when there are no morphtargets, but break immediately when morphtargets are added. I've tried other very simple models like a plain sphere with a very simple shape key (its also in the models directory), and the geometry breaks just the same.

You should be able to test everything out yourself, but if you need anymore files or info let me know.

Thanks for the help!