{"id":6085,"date":"2022-06-14T19:02:22","date_gmt":"2022-06-14T18:02:22","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=6085"},"modified":"2024-04-22T09:25:12","modified_gmt":"2024-04-22T08:25:12","slug":"animated-hair","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/animated-hair\/","title":{"rendered":"IMVU Studio Toolkit &#8211; Animated Hair Basics (Accessory)"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 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-6a174a28b7f17\" 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-6a174a28b7f17\"  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\/animated-hair\/#description\" >Description<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/animated-hair\/#mesh-first-rig-then-animate\" >Mesh First, Rig, Then Animate<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/codex\/animated-hair\/#armature-modifier\" >Armature Modifier<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/codex\/animated-hair\/#attachment-or-anchor-bone\" >Attachment or Anchor Bone<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.katsbits.com\/codex\/animated-hair\/#vertex-group-assignments\" >Vertex Group Assignments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.katsbits.com\/codex\/animated-hair\/#imvu-import-skeleton-selection\" >IMVU Import &#038; Skeleton Selection<\/a><\/li><\/ul><\/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\/animated-hair\/#timestamps\" >Timestamps<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/zf1A2y8N-DA?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<h3><span class=\"ez-toc-section\" id=\"description\"><\/span>Description<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Using the <b>Attachment Tool<\/b> (accessory) of <a href=\"https:\/\/www.katsbits.com\/codex\/tag\/imvu-studio-toolkit\/\">IMVU Studio Toolkit<\/a> we take a look at making a simple <b>animated hair accessory<\/b>. As the tool is not specifically set up to make animated items like the <a href=\"https:\/\/www.katsbits.com\/codex\/tag\/animation\/\">Animation Tool<\/a> is for <a href=\"https:\/\/www.katsbits.com\/codex\/tag\/poses\/\">avatar poses<\/a>, animating attachments or accessories involves a few extra steps. First, the basic mesh is made and set up as a <a href=\"https:\/\/www.katsbits.com\/codex\/toolkit-accessories\/\">standard accessory or attachment<\/a>. Second, the attachment Armature is used as the basis to create the skeleton for the accessory rig. Third, the accessory mesh is weight painted to the skeleton so it deforms correctly when the rig is articulated. And finally, once everything is in place an animation can be made using the Action Editor, everything then exported to FBX and assembled in IMVU Studio.<\/p>\n<p><b>Duration<\/b>: total c. 55 mins (00:55:00).<br \/>\n<b>Info<\/b>: 1080p.<br \/>\n<b>Suitability<\/b>: Beginner+.<br \/>\n<b>Source<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/imvu\/katsbits - toolkit animated hair.zip\">KatsBits \u2013 Toolkit Animated Hair<\/a> (1 MB, *.blend, *.fbx). Requires installation of the <a href=\"https:\/\/create.imvu.com\/articles\/studio\/toolkit\/\" rel=\"noopener\" target=\"_blank\">toolkit<\/a> for Blender. Open in <a href=\"https:\/\/www.blender.org\/download\/lts\/2-93\/\" rel=\"noopener\" target=\"_blank\">Blender 2.93 LTS<\/a> or above.<br \/>\n<b>Product ID<\/b>: <a href=\"https:\/\/www.imvu.com\/shop\/product.php?products_id=59933678\" rel=\"noopener\" target=\"_blank\">Toolkit Animated Hair<\/a> (PID 59933678).<\/p>\n<blockquote><p><b>Design note<\/b>: making animated hair can be tricky so keep the following in mind when using the Toolkit for IMVU;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"mesh-first-rig-then-animate\"><\/span>Mesh First, Rig, Then Animate<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Using the IMVU Studio Toolkit, animated accessories need to be created in two steps. First the mesh is set up as a normal accessory to gain access to the Armature actually needed for the item, <b>Attachment.RIG<\/b>. Second, Attachment.RIG is then used to properly rig the mesh for animation.<\/p>\n<div style=\"background-color: #fc0; color: #000; width:98.5%; padding: 1.0em;\"><b>Important<\/b>: the initial bone selected when the item is set up establishes a target with respect to the corresponding bone of the avatar, i.e. setting &#8216;Head&#8217; targets the avatars &#8216;Head&#8217; bone as the attachment point of the accessory not the Armature actually used for the accessory itself.<\/div>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-target.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-target.jpg\" alt=\"Selecting an attachment target\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The initial bone selected [1] acts as a proxy for the tool so it know how to set up the accessory items structure &#8211; this initial bone is not actually used to create the final rigged attachment.<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"armature-modifier\"><\/span>Armature Modifier<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Once the accessory mesh has been set up as a standard attachment it will be assigned an <b>Armature<\/b> modifier targeting <b>Attachment.RIG<\/b> [2] &#8211; <i>this does not ordinarily need to be changed<\/i> &#8211; and fully weighted [3] to <b>AttachmentNode[Head]<\/b> [4], indicated by bright red when viewed in <b>Weight Paint<\/b> mode. Establishing this relationship also assigns a corresponding <b>Vertex Group<\/b> also named <b>AttachmentNode[Head]<\/b> [5] to the mesh.<\/p>\n<div style=\"background-color: #fc0; color: #000; width:98.5%; padding: 1.0em;\"><b>Important<\/b>: both bone name (Armature) and vertex group (Mesh) will be labelled <b>AttachmentNode<\/b> plus <b>[boneName]<\/b>, the name of the corresponding bone of the avatar i.e. <b>AttachmentNode[<i>boneName<\/i>]<\/b>, or in practice <i>AttachmentNode[Head]<\/i>, <i>AttachmentNode[rtHand]<\/i>, <i>AttachmentNode[lfCalf]<\/i> and so on. Labels are CaSe SenSiTIve.<\/div>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-armature-modifier.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-armature-modifier.jpg\" alt=\"Armature Modifier assignment\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Check to see if the accessory is set up correctly, if yes, the mesh will have an <b>Armature Modifier<\/b> [2] assignment targeting as the <b>Object<\/b> (parent of the mesh) <b>Attachment.RIG<\/b> &#8211; this applies to accessories no matter where they are; hand, foot, shoulder and so on.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-parenting.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-parenting.jpg\" alt=\"Checking correct set up\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Similarly, if the mesh is correctly set up it will be weight painted (red) [3] to <b>AttachmentNode[Head]<\/b> [4] and assigned a Vertex Groups also labelled <b>AttachmentNode[Head]<\/b> [5].<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"attachment-or-anchor-bone\"><\/span>Attachment or Anchor Bone<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><b>Attachment.RIG<\/b> consists of two bones; <b>AttachmentRoot<\/b> and <b>AttachmentNode[boneName]<\/b>. Either can be used as the basis from which the animated accessory skeleton is made. How this is done depends; 1) on the accessory, 2) the type of relationship needed between bones, and 3) the functionality this informs (how the item then animates).<\/p>\n<p>For example, <i>extruding<\/i> a bone from another [6] creates a chain of bones (<i>bone chain<\/i>) with a parent \u00bb child relationship [7] in which bones are directly connected across a shared pivot point [8]. This results in bones moving and rotating based on this shared link. <\/p>\n<p>Conversely, bones that are <i>duplicated<\/i> from existing selections [9], or <i>added<\/i> to the armature (whilst in Edit Mode), are relationally linked [10] but not connected and do not share a common pivot [11]. The result of this is a bone chain in which bones articulate somewhat independently.<\/p>\n<div style=\"background-color: #fc0; color: #000; width:98.5%; padding: 1.0em;\"><b>Important<\/b>: bones generally do not <i>need<\/i> to be directly or physically connected. So long as they are part of the same bone chain, the <b>parent \u00bb child<\/b> relationships always affect how the overall skeleton articulates &#8211; all the connection essentially does is change the pivot point for each bone.<\/div>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-extrude.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-extrude.jpg\" alt=\"Extrude and bone relations\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<video poster=\"\" controls=\"controls\" width=\"100%\" height=\"auto\"><source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-extrude.mp4\" type=\"video\/mp4\" \/><!--<source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/collections\/collection-shortcut.ogg\" type=\"video\/ogg\" \/><source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/collections\/collection-shortcut.webm\" type=\"video\/webm\" \/>--><\/video><br \/>\n<i>Extruding [6] a bones from an existing bone creates a parent \u00bb child relationship [7] between the two and forms a physical connection that then acts as a shared pivot point [8]&#8230;<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-duplicate.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-duplicate.jpg\" alt=\"Duplicate and bone relations\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<video poster=\"\" controls=\"controls\" width=\"100%\" height=\"auto\"><source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-duplicate.mp4\" type=\"video\/mp4\" \/><!--<source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/collections\/collection-shortcut.ogg\" type=\"video\/ogg\" \/><source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/collections\/collection-shortcut.webm\" type=\"video\/webm\" \/>--><\/video><br \/>\n<i>&#8230; whereas bones that are duplicated or added to the existing Armature [9] will have a parent \u00bb child relationship [10] but won&#8217;t be physically connected [11], allowing each bone to pivot around their respective origins.<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"vertex-group-assignments\"><\/span>Vertex Group Assignments<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Depending on the functionality of the accessory a section of it likely needs to be anchored to the avatars head bone [12]. In other words the section closest the head mesh [13] will need to retain or be assigned to the <b>AttachmentNode[Head]<\/b> vertex group (or AttachmentRoot if used) [14]. As this is assigned by default to the entire mesh when the <b>Setup Mesh<\/b> button is clicked in the toolkit, make sure the parts that do not use the group are removed from the it, else they will unduly influence (limit) the articulation of the mesh.<\/p>\n<p>To clear the association completely, in <b>Edit Mode<\/b> select the vertices to be removed [15] from the group and click the <b>Remove<\/b> button [16] &#8211; <b><i>Object Data Properties \u00bb Vertex Groups \u00bb [button option]<\/i><\/b> &#8211; they <i>can<\/i> be weight painted with <b>Weight: 0.000<\/b> but they will still remain part of the group, which can cause &#8216;over limit&#8217; issues where individual vertices are controlled by multiple bones.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-weight-paint.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-weight-paint.jpg\" alt=\"Weight Paint distribution\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>When clicking <b>Setup Mesh<\/b>, the target bone [12] is attributed to the entire mesh [13] regardless of the state that&#8217;s in. This can be useful for some accessory but not others and needs to be addressed&#8230;<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-clean-weights.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-clean-weights.jpg\" alt=\"Clearing vertices from a vertex group\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>&#8230; by clearing vertices from that initial vertex group [15]. This can be done in Edit Mode by selecting the vertices to be cleared and then clicking the <b>Remove<\/b> button in Object Data Properties [16].<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"imvu-import-skeleton-selection\"><\/span>IMVU Import &#038; Skeleton Selection<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>During import IMVU Studio may list several entries for the skeleton component of <b>Skeleton &#038; Mesh<\/b> set up. If this happens the item at the top of the list should be selected, <b>AttachmentRoot (<i>[n]<\/i> bones, <i>[n]<\/i> mesh)<\/b> [17], as this generally represents the root or master hierarchy of the project being imported &#8211; selecting any other entry will likely break the product as the skeleton will be incomplete.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-import.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/animated-hair-import.jpg\" alt=\"Skeleton selection during import\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Make sure to set the correct skeleton [17] during import into Studio else the product may break due to a malformed armature (the animation won&#8217;t work either in this instance).<\/i>\n<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"timestamps\"><\/span>Timestamps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Times are approximate;<br \/>\n &#8211; 00:00 : Basic Setup &#038; Meshing.<br \/>\n &#8211; 07:00 : Armature Setup.<br \/>\n &#8211; 14:00 : Weight Painting.<br \/>\n &#8211; 22:00 : Inverse Kinematics.<br \/>\n &#8211; 25:00 : Animation.<br \/>\n &#8211; 32:00 : Export &#038; First Assembly.<br \/>\n &#8211; 35:00 : Materials &#038; UVs.<br \/>\n &#8211; 49:00 : Export &#038; Final Assembly.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":6110,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,37,230],"tags":[575,217,622,725,726,194,738,835,411,715,685,684],"class_list":["post-6085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-imvu","category-tutorials","tag-accessory","tag-action-editor","tag-animation","tag-armature","tag-bones","tag-imvu","tag-imvu-studio","tag-imvu-studio-toolkit","tag-pivot","tag-relations","tag-vertex-groups","tag-weight-painting"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6085","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=6085"}],"version-history":[{"count":32,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6085\/revisions"}],"predecessor-version":[{"id":8755,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6085\/revisions\/8755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/6110"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=6085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=6085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=6085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}