Mouse Position Tracking

The program actively tracks mouse movement tied to different deformers. The program translates the current mouse position to normalised device coordinates which act as parameter inputs to the different position deformers.

Custom file format

To make things easier to debug, JSON was used for storing model information. While it isn't the most efficient space-wise, it made debugging the project a lot easier.

Position based dynamics

To simulate hair physics, this uses position based dynamics (PBD) with various vertices. Different spring constraints are specified between dynamic vertices to give a "jelly-like" appearance to the hair. This can also be added to clothes and other things that deform.

One important thing to note is that the physics are simulated on the CPU. While this doesn't necessarily pose a problem on a surface level, it means that a high amout of vertices may see a performance impact.

Texture based expressions and animations

Expressions are created by setting different texture offsets in the JSON config file. In addition to this, animations can be added by setting different texture offsets at certain timestamps.

Multiple model and background color support

The application supports multiple models and background colors to support characters that may have green on them.

Directory Format

/deformers
/meshes
/textures
config.json

Most of the directories and files are pretty self-explanatory, but just in case here's the

• /deformers
  • Contains any information that might change the model. This includes things layer positioning, physics, etc...
• /meshes
  • This is where the triangulation information for models go.
• /textures
  • This is where images used by the model go.
• config.json
  • Contains metadata about the model as well as the layer inforamation and transformation hierarchy.
  • This is really the only required file for the model. Every other directory is more for organization.

If you're lazy, the program can create a default model for you. Simply run it and select "Create a new model from scratch"

Configuring the model

{
  "triangles": [ 0, 1, 3, 0, 3, 2],
  "vertices": [
    {
      "pos": [ -1.0, -1.0 ],
      "texPos": [ 0.0, 0.0 ]
    },
    {
      "pos": [ 1.0, -1.0 ],
      "texPos": [ 1.0, 0.0 ]
    },
    {
      "pos": [ -1.0, 1.0 ],
      "texPos": [ 0.0, 1.0 ]
    },
    {
      "pos": [ 1.0, 1.0 ],
      "texPos": [ 1.0, 1.0 ]
    },
    {
      "pos": [ 0.5, 0.0 ],
      "texPos": [ 0.0, 0.0 ]
    }
  ]
}

{
    "name": "Default Configuration",
    "expressions": [],
    "parts": [
        {
            "name": "Body",
            "texture": "textures/Body.png",
            "mesh": "meshes/bodyMesh.json",
            "deformers": [
                "deformers/bodyPosition.json"
            ]
        }
    ],
    "hierarchy": {
        "root": "Body",
        "relations": {
            "Body": []
        }
    }
}

Editing meshes

To edit a mesh, use the mesh editor when starting the app instead of the runtime. Click anywhere to add a vertex and the triangulation will be done automatically.

WARNING: Saving a mesh will override the currently loaded mesh. Make sure different layers have different meshes loaded.

{
    "type": "position",
    "bind": "mouse",
    "xLowerBound": -0.006,
    "xUpperBound": 0.006,
    "yLowerBound": -0.012,
    "yUpperBound": 0.025,
    "xMin": -0.012,
    "xMax": 0.012,
    "yMin": -0.03,
    "yMax": 0.03
}

{
    "type": "cloth",
    "dynamicVertices": [0, 1, 2, 3, 4, 5, 7, 8, 9, 10],
    "alpha": 6e-4,
    "damping": 5,
    "gravity": 0.3,
    "mass": 10.0,
    "timeModifier": 0.5
}

{
    "type": "textureAnimation",
    "keyframes": [
        [0.0, 0.0],
        [0.0, -0.142],
        [0.0, -0.284],
        [0.0, -0.142]
    ],
    "timing": [
        0.0,
        5.7,
        5.8,
        5.9
    ],
    "durationSeconds": 6.0
}