{"id":3961,"date":"2020-12-24T17:48:21","date_gmt":"2020-12-24T17:48:21","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=3961"},"modified":"2023-09-07T15:51:41","modified_gmt":"2023-09-07T14:51:41","slug":"avatar-morph-animation","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/","title":{"rendered":"Avatar Morph Animation in Blender"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69fa9c37a2a36\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69fa9c37a2a36\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/#shape-key-starter-file\" >Shape Key Starter File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/#shape-key-editor\" >Shape Key Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/#action-sequence-proxy\" >Action Sequence Proxy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/#shape-key-export\" >Shape Key Export<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/#morph-import-%e2%80%93-classic\" >Morph Import &#8211; Classic<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/#morph-import-%e2%80%93-studio\" >Morph Import &#8211; Studio<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/#morph-action-%e2%80%93-classic\" >Morph Action &#8211; Classic<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.katsbits.com\/codex\/avatar-morph-animation\/#morph-action-%e2%80%93-studio\" >Morph Action &#8211; Studio<\/a><\/li><\/ul><\/nav><\/div>\n<p><video poster=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/shapekeys_mp4.jpg\" controls=\"controls\" width=\"100%\" height=\"auto\"><source src=\"https:\/\/www.katsbits.com\/media\/shapekey animation.mp4\" type=\"video\/mp4\" \/><!--<source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/collections\/collection-shortcut.ogg\" type=\"video\/ogg\" \/>\n<source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/collections\/collection-shortcut.webm\" type=\"video\/webm\" \/>--><\/video><\/p>\n<p><b>Description<\/b>: in this avatar tutorial we take a look at making a simple custom avatar expression for the IMVU using head &#8216;<i>morphs<\/i>&#8216; that animates or change the avatars face that can be exported as an *.fbx from Blender, imported into IMVU Classic and IMVU Studio, then set up as a triggered action.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-starter-files\/\">Face Morph Starter File for Blender<\/a> | <a href=\"https:\/\/www.katsbits.com\/files\/imvu\/katsbits - shapekey goggly.zip\">Example File<\/a>.<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: in Blender <b>Morph Targets<\/b> are called <b>Shape Keys<\/b>. They allow for the creation of animation without using an underlying skeleton. They work by storing coordinates, one for a mesh in its default state, another after modification, the difference then being controllable using a property slider to shift between each to varying degrees.<\/p><\/blockquote>\n<p><center>&bull; &bull; &bull;<\/center><\/p>\n<h3><span class=\"ez-toc-section\" id=\"shape-key-starter-file\"><\/span>Shape Key Starter File<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create shape key\/morph animations the <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-starter-files\/\">Shape Keys Starter File<\/a> for Blender is needed. The file includes a standard version of the female or male avatar, without skeleton (armature), assigned a set of <b>Shape Keys<\/b> [2] (listed in <b>Object Data Properties<\/b> [1]) that can be used to modify the avatars face [1] creating custom expressions or animations (static poses or animated sequences).<\/p>\n<blockquote><p><b>Design note<\/b>: shape keys\/morphs differ from general avatar animation in that they don&#8217;t use a skeleton to deform the mesh. As a result sequences made for one avatar may not work correctly for the other due to differences in shape between the two.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-starter-file.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-starter-file.jpg\" alt=\"Shape Key (morph) Starter File\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The Shape Key Starter File includes an avatar, female or male, which is set up with a series of <b>Shape Keys<\/b> [2] (morph targets) &#8211; listed in Object Data Properties [1]. Each &#8216;key&#8217; stores a corresponding deformed mesh &#8216;shape&#8217; that can be blended from the unmodified default version to whatever is referenced by the shape key itself.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"shape-key-editor\"><\/span>Shape Key Editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To animate, switch the <b>Action Editor<\/b> (Dope Sheet) to the <b>Shape Key Editor<\/b> [3] and expand the <b>Summary<\/b> heading in the <b>Channel<\/b> [4] listing to display all the available Shape Keys. Move the timeline scrubber\/slider to a key frame and then change the <b>Value<\/b> input field for the appropriate key to &#8216;pose&#8217; a particular area of the avatars face. This drops a <b>Keyframe Marker<\/b> [5] into the timeline storing the pose data. Repeat as needed to create an overall expression.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-editor.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-editor.jpg\" alt=\"Using the Shape Key Editor to animate the face\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In the <b>Shape Key Editor<\/b> [3], the available shape key <b>Channels<\/b> [4] can be shown expanding <b>Summary<\/b>, after which a value can be set, with pose Marker automatically placed in the timeline, at the scrubbers location [5].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"action-sequence-proxy\"><\/span>Action Sequence Proxy<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before exporting ensure a &#8216;proxy&#8217; <b>Action<\/b> exists that <i>corresponds to the duration<\/i> of the Shape Key sequences i.e., if the facial expression is 20 frames long (frames 1 through 20), an Action must also match this, also being 20 frames. To do this switch the <b>Shape Key Editor<\/b> (back) to the <b>Action Editor<\/b> and click <b>+ New<\/b> to create a sequence. Make sure the avatar&#8217;s head is selected and position the timeline slider to correspond to the shape key animations start point. From the <b>Object<\/b> menu select <b>Animation<\/b>, <b>Insert Keyframe<\/b> &#8211; <b><i>Object \u00bb Animation \u00bb Insert Keyframe<\/i><\/b>. Repeat for the end frame to complete the action.<\/p>\n<blockquote><p><b>Design note<\/b>: Actions are necessary because IMVU pulls animation data from the tracks this generates in the FBX &#8211; in this context Actions don&#8217;t need to include any actual animation information as their purpose is to act as a proxy for the Shape Key sequences length or duration.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-new-action.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-new-action.jpg\" alt=\"An Action is needed to export a Shape Key sequence\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Switch (back) to the Action Editor [6] and create a new sequence [7] to act as a proxy so both Blender and IMVU know some animation data is included &#8211; resulting FBX files may be blank without this step.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"shape-key-export\"><\/span>Shape Key Export<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once a corresponding proxy Action is available export the Scene from <b>File<\/b>, <b>Export<\/b>, then select <b>FBX (.fbx)<\/b> &#8211; <b><i>File \u00bb Export \u00bb FBX (.fbx)<\/i><\/b>. In the File View that opens, on the right; under <i>Include<\/i> ensure <b>Selected Objects<\/b> [8] checkbox is cleared (setting disabled); under <i>Armature<\/i> the <b>Add Leaf Bones<\/b> [9] checkbox is cleared; under <i>Bake Animation<\/i> that both <b>NLA Strips<\/b> [10] and <b>Force Start\/End Keying<\/b> [11] checkboxes are cleared. Change the file name and save location as required and click <b>Export FBX<\/b>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-export.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-export.jpg\" alt=\"Export setting for Shape Keys\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Exporting a Shape Key animation to FBX is similar to other types of item with the exception that two <b>Bake Animation<\/b> settings must be disabled, <b>NLA Strips<\/b> [10] and <b>Force Start\/End Keying<\/b> [11].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"morph-import-%e2%80%93-classic\"><\/span>Morph Import &#8211; Classic<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Shape Key sequence import is similar to the more typical Action sequence based animations (XAF). To import the FBX, derive a new product clicking the <b>Derive New Product<\/b> button in Create mode and select the appropriate item as the derivation, typically the <b>Empty Derivables<\/b> (Female\/Male Clothing), or the <b>Empty Mood<\/b> item (<a href=\"https:\/\/www.imvu.com\/shop\/product.php?products_id=10945930\" rel=\"noopener\" target=\"_blank\">PID 10945930<\/a>). In the importer ensure <b>Apply scale<\/b> is set to <b>0.01<\/b> [12] and checkboxes for all mesh and materials are cleared [13] (disabled); only morph animation listed under <b>Morphs\/Actions<\/b> should be selected [14]. Click the <b>Import<\/b> button to complete the process.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: for morph animation derivation there isn&#8217;t a &#8216;blank&#8217; or &#8217;empty&#8217; base avatar, the face always animates by default unless something is overridden.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-import-classic.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-import-classic.jpg\" alt=\"IMVU Classic import settings\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Exporting the contents of a Scene from Blender means IMVU will import meshes and materials alongside the animation. As these are not needed they can be discarded during the import process by clearing their respective checkboxes [13], the morph being the only component to bring in [14].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"morph-import-%e2%80%93-studio\"><\/span>Morph Import &#8211; Studio<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For IMVU Studio, to import a shape key\/morph animation file (FBX), click <b>Create<\/b> and select a base derivable, e.g. Empty Female Clothing, and click <b>Derive<\/b>. Once the editor is open click the hamburger icon (\u2630) then select <b>Edit<\/b>, <b>Import<\/b> &#8211; <b><i>\u2630 \u00bb Edit \u00bb Import<\/i><\/b>. In the standard file browser browse to, select and open the FBX to import. Studio will present the <b>FBX Import Settings<\/b> dialogue that initially shows the files contents, skeletons, meshes, materials and animations that might be present. Click the white <b>Set up FBX<\/b> button and on the next page make sure to set <b>Scale<\/b> to <b>0.01<\/b> [15], and if shown deselect any meshes [16]. Click <b>Next<\/b> [17]. Deselect any materials then click <b>Next<\/b>. Make sure the shape key\/morph animation is shown and selected then click <b>Review<\/b> to see what&#8217;s to be imported. Click <b>Import<\/b> to complete the process.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-import-studio.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-import-studio.jpg\" alt=\"IMVU Studio import process\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>For IMVU Studio FBX import is a &#8216;walk-through&#8217; process. With a base derivable in place import the FBX file and set the Scale to 0.01 [15], deselect everything [16] except the morph animation whilst stepping though the process [17].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"morph-action-%e2%80%93-classic\"><\/span>Morph Action &#8211; Classic<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To actually see or use the morph animation it needs an action so once the data has been imported click the <b>actions<\/b> tab then <b>+ Add<\/b> to create one. Depending on how the animation is to be activated set the <b>Trigger<\/b> to be a word or phrase for manual activation, or type <b>stance.Idle<\/b> to start on load [18]. Set <b>Type<\/b> to <b>Avatar<\/b> and select an appropriate option for <b>After Playing<\/b> (random, same, cycle). This sets the base parameters of the action. To finish the action, in the <b>Morph Animation<\/b> section of <b>Ensembles<\/b> below select what is now an XPF file from the drop-down to link the animation itself [19], then in <b>Morph Frame Controls<\/b> set the <b># loops<\/b>, <b>0<\/b> for infinite, and <b>Loop start<\/b> and <b>end<\/b> to set a frame range where necessary, e.g.  <i>Loop start 1<\/i> and <i>end 20<\/i>. Click Apply Changes to finish and play the action based on the trigger used.<\/p>\n<blockquote><p><b>Design note<\/b>: optionally <b>Composition<\/b> can be set to <b>Replace<\/b> and <b>Disable Gaze<\/b> enabled (checkbox) to ensure the default animations don&#8217;t interfere with the new addition unduly.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-action-classic.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-action-classic.jpg\" alt=\"IMVU Studio import process\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the FBX data has been imported it needs to be set up as an action. Set the <b>Trigger<\/b> and product <b>Type<\/b> then select the morph and assign basic playback parameters, the <b># loops<\/b> and <b>Loop start<\/b> and <b>end<\/b> frame range.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"morph-action-%e2%80%93-studio\"><\/span>Morph Action &#8211; Studio<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To set up an action in IMVU Studio, once the FBX has been imported into a derivable and is ready for use, on the left side and in <b>Component<\/b> click the clapper-board icon (&#8216;actions&#8217;) then <b>+<\/b> [21] to create a new instance. To the right-hand side under the <b>Inspector<\/b> type a <b>Name\/Trigger<\/b>, e.g. &#8220;<i>goggly<\/i>&#8221; then click the <b>+<\/b> button to the right of <b>Ensembles<\/b> [22]. The <b>Ensemble<\/b> properties panel appears [23]. Under <b>Morph Animation<\/b> select the <b>Asset<\/b> to be played, the (now converted) XPF file listed and set the sequences <b>Duration<\/b> options; <b>Start<\/b>, <b>End<\/b> and <b>Loop<\/b>. Finally set <b>Amplitude Scale<\/b> between <i>0<\/i> and <i>99<\/i> to affect playback &#8211; 0 &#8216;mutes&#8217; the sequence, 99 plays it as designed in Blender. Click <b>Apply<\/b> to complete. <\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-action-studio.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/shape-key-action-studio.jpg\" alt=\"IMVU Studio import process\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the FBX data has been imported it needs to be set up as an action. Set the <b>Trigger<\/b> and product <b>Type<\/b> then select the morph and assign basic playback parameters, the <b># loops<\/b> and <b>Loop start<\/b> and <b>end<\/b> frame range.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":3965,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,37,230],"tags":[723,622,549,194,738,752,630,754,753],"class_list":["post-3961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-imvu","category-tutorials","tag-actions","tag-animation","tag-avatars","tag-imvu","tag-imvu-studio","tag-morph-targets","tag-poses","tag-shape-key-editor","tag-shape-keys"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/comments?post=3961"}],"version-history":[{"count":40,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3961\/revisions"}],"predecessor-version":[{"id":5051,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3961\/revisions\/5051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/3965"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=3961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=3961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=3961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}