{"id":4627,"date":"2021-11-27T00:00:12","date_gmt":"2021-11-27T00:00:12","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=4627"},"modified":"2024-04-22T10:41:54","modified_gmt":"2024-04-22T09:41:54","slug":"necklace-bezier","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/necklace-bezier\/","title":{"rendered":"Necklace from Bezier Curves"},"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-6a0bd6a54dcb8\" 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-6a0bd6a54dcb8\"  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\/necklace-bezier\/#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\/necklace-bezier\/#editing-beziers-curves\" >Editing Beziers &#038; Curves<\/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\/necklace-bezier\/#bezierscurves-subdivisions\" >Beziers\/Curves &#038; Subdivisions<\/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\/necklace-bezier\/#uv-mapping-texture-tiling\" >UV Mapping &#038; Texture Tiling<\/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\/necklace-bezier\/#vertex-groups-weight-painting\" >Vertex Groups &#038; Weight Painting<\/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\/necklace-bezier\/#normal-maps-image-resolution\" >Normal Maps &#038; Image Resolution<\/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\/necklace-bezier\/#timestamps\" >Timestamps<\/a><\/li><\/ul><\/nav><\/div>\n<p><video poster=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-necklace_mp4.jpg\" controls=\"controls\" width=\"100%\" height=\"auto\"><source src=\"https:\/\/www.katsbits.com\/media\/bezier necklace.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>Supplemental: Baking Normal Maps<\/b><br \/>\n<video poster=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-necklace-bake-normal.jpg\" controls=\"controls\" width=\"98.5%\" height=\"auto\"><source src=\"https:\/\/www.katsbits.com\/media\/bezier necklace texture baking.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<h3><span class=\"ez-toc-section\" id=\"description\"><\/span>Description<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In this exercise we take a look at using a <b>Curve<\/b> to make a simple box-chain necklace accessory item for IMVU. First we take a look at the basics of using <b>Bezier<\/b> and <b>Curve<\/b> objects before loading in the <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-starter-files\/\">Clothing Starter File<\/a>, rather than the Accessory Starter File, to shape the necklace around. Once done the resulting line-art is then given some structure and depth in <b>Object Data Properties<\/b> before using <b>Convert<\/b> &#8211; <b><i>Object \u00bb Convert \u00bb Mesh<\/i><\/b> &#8211; transforming it into a mesh that can be edited. Here the mesh is assigned a material and UV Unwrapped before prep for IMVU weight painting (<b>Weight Paint<\/b>) the mesh to the clothing skeleton to create the necessary <b>Vertex Groups<\/b> to deform the mesh when the avatar moves. Finally the project is exported to FBX and assembled in IMVU Studio with normal and shininess maps.<\/p>\n<p>In the Supplemental we take a look at using Blender to make a normal map for the chain using <b>Bake<\/b>. First a high resolution mesh has to be made which is paired to a low resolution mesh. For baking the low resolution needs to be UV Unwrapped and mapped in a way that replicates the texture usage associated with the original necklace, i.e. a long, thin image (512 x 32) that tiles or repeats around the mesh. This set up can also then be used to generate opacity masks.<\/p>\n<p><b>Duration<\/b>: total c. 2 hr 10 mins (02:10:00).<br \/>\n<b>Info<\/b>: 1080p | 475 MB.<br \/>\n<b>Source<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/imvu\/katsbits - curve necklace.zip\">KatsBits &#8211; Curve Necklace<\/a> (zip c. 1 MB &#8211; *.blend, *.fbx, *.png, *.jpg).<br \/>\n<b>Product ID<\/b>: <a href=\"https:\/\/www.imvu.com\/shop\/product.php?products_id=57208127\">Box-link Necklace (57208127)<\/a>.<\/p>\n<blockquote><p><b>Design note<\/b>: curves and Beziers should generally be used to guide meshes into shape so keep the following in mind when using them to make jewellery;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"editing-beziers-curves\"><\/span>Editing Beziers &#038; Curves<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>For most purposes <b>Curve<\/b> and <b>Bezier<\/b> shapes are modified more directly in Edit Mode (select the curve object then press <span class=\"shortcutkey\">Tab<\/span>). Here <b>Control Points<\/b> can be manipulated as a group or individually by toggling <b>Aligned<\/b> (default) and <b>Free<\/b>, that then allows more acute angles and shapes to be formed. To do this, select a node or nodes then from the <b>Control Points<\/b> [1] menu click <b>Set Handle Type<\/b>, then <b>Aligned<\/b>, <b>Free<\/b> or other option [3] &#8211; <b><i>Control Points \u00bb Set Handle Type \u00bb [option]<\/i><\/b> or press <span class=\"shortcutkey\">V<\/span><b> \u00bb [option]<\/b>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-control-points.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-control-points.jpg\" alt=\"Bezier Control Points set to Free\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The vertex <b>Control Points<\/b> of Curve and Bezier objects move as a group by default (Aligned) but this behaviour can be changed [1] so each node can then able to moved independently [2] for more angular shapes to be formed [3].<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"bezierscurves-subdivisions\"><\/span>Beziers\/Curves &#038; Subdivisions<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In using Curves and Bezier objects attention should be paid to the number of subdivisions, the lines <b>Resolution<\/b>, describing the shape. This can be increased or decreased changing the lines <b>Resolution Preview<\/b> [4] value in <b>Object Data Properties<\/b>. It&#8217;s important to note here however, that resolution is dependant on distribution. In other words, the distance between control points determines how smooth the line appears to be because the distance between individual subdivisions is shorter. Shown below for example, the distance between points <i>I<\/i> and <i>II<\/i> [5] is much shorter than between <i>II<\/i> and <i>III<\/i> [6], with the effect that the line appears smoother along the former than latter section. This difference cannot be altered as except to change the number and distribution of control points (select two control points and subdivide &#8211; <b><i>Segments \u00bb Subdivide<\/i><\/b>) &#8211; if these are evenly distributed the resulting curve will be more uniformly subdivided along its length.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-resolution.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-resolution.jpg\" alt=\"Resolution Preview\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>A line is defined by the number of subdivisions between control points. To even out the distribution and smooth the line, additional control points may be needed else some sections may appear rougher [5] than others [6].<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"uv-mapping-texture-tiling\"><\/span>UV Mapping &#038; Texture Tiling<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When texturing necklaces and similar items, meshes that tend to product long thin UV&#8217;s, preference should be given to unwrapping in a way that makes use of <b><i>texture tiling<\/i><\/b> or repetition, rather than trying to unwrap the entire mesh to a single image. In practice this might mean UV mapping so a 512 x 32 repeats several times over a mesh instead of fitting the entire UV within the same bounds. While the former may result in retain detail but risk pattern repetition, the latter tends to cause loss of detail due to compressed UV&#8217;s, but little, if any, repetition. To aid in this make sure to use well placed UV Seams &#8211; <b><i>Edge \u00bb Mark Seam<\/i><\/b> [7] &#8211; around the mesh [8] so the resulting UV map, when unwrapped, lays out flat.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-mark-seams.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-mark-seams.jpg\" alt=\"Utilise Mark Seams to properly unwrap meshes\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Necklaces and similar objects tend to produce extremely long thin UV maps that are impractical to map with a single image. In these situations it&#8217;s better to unwrap UV&#8217;s in a way that accommodate texturing tiling. Well placed UV Seams [7] help in this regard [8].<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"vertex-groups-weight-painting\"><\/span>Vertex Groups &#038; Weight Painting<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Ordinarily a necklace might be weighted so at most two bones share influence over a given area of the mesh, both then deforming the mesh when articulating. For IMVU Studio shared influence like this is limited to <i>four bones<\/i> (the limit is 5 but applies in special cases typically involving PelvisNode), so it is preferable to weight paint more subtly so influence &#8216;fades&#8217; across the mesh. When <b>Weight Paint<\/b> mode is active (select Armature then shift-click the mesh before switching), in the <b>Active Tool and Workspace settings<\/b> [9] panel the degree of influence can be adjusted changing the <b>Weight<\/b> value [10], <b>1.000<\/b> for full influence (red) to <b>0.000<\/b> no influence (dark blue). In this way how aggressively bones [11] deform the mesh reduces as influence changes from full to none [12].<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-weight-paint.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-weight-paint.jpg\" alt=\"Weight Paint mesh to Armature\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Individual bones control a mesh based on the degree of influence they have, their <b>Weight<\/b> [10]. Technically this is a numerical value that is represented by colours; when a bone [11] is selected the corresponding part of the necklace can be painted [12] dark blue to red, from &#8216;no&#8217; to &#8216;full&#8217; influence.<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"normal-maps-image-resolution\"><\/span>Normal Maps &#038; Image Resolution<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><b>Supplemental<\/b><br \/>\nWhen making normal maps both high and low resolution version of the mesh must not be facetted or have edges marked as <b>Sharp<\/b>, both must be smoothed. What this means is that hard or sharp edges, shapes and forms are defined by the high resolution mesh and not marked edges, structure that is then reproduced through the Bake process, as RGB (Red, Green, Blue) colour information in a normal map. To smooth meshes, select a mesh then from the <b>Object<\/b> menu select <b>Shade Smooth<\/b> [13] &#8211; <b><i>Object \u00bb Shade Smooth<\/i><\/b> [14].<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-shade-smooth.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu\/bezier-shade-smooth.jpg\" alt=\"Make sure meshes are Smoothed before baking\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>For baking to work both high and low resolution meshes need to be Smoothed [14], no factettes or Sharp edges as this information is generated structurally and then rendered to the normal map as RGB colour values.<\/i><\/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<b>Video 1<\/b> \u2013 Bezier Curve Necklace.<br \/>\n\u2013 00:00 : Overview, Bezier Basics.<br \/>\n\u2013 03:00 : Bezier Necklace.<br \/>\n\u2013 16:00 : Materials &#038; UV Unwrapping.<br \/>\n\u2013 39:00 : Weight Painting<br \/>\n\u2013 59:00 : FBX Export &#038; Studio Assembly.<br \/>\n\u2013 48:00 : IMVU Studio Import &#038; Assembly.<br \/>\n\u2013 01:08:00 : Corrections &#038; Final.<\/p>\n<p><b>Video II<\/b> \u2013 Supplemental<br \/>\n\u2013 00:00 : Overview &#038; High-res Meshing.<br \/>\n\u2013 11:00 : Low-res Mesh, UV&#8217;s &#038; Prep.<br \/>\n\u2013 22:00 : Texture Bake.<br \/>\n\u2013 32:00 : Baking &#8216;Opacity Masks&#8217;.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":5300,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,37,32,230],"tags":[575,69,792,686,828,278,203,194,1086,738,835,639,633,632,172,221,824,696],"class_list":["post-4627","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-imvu","category-texturing","category-tutorials","tag-accessory","tag-ambient-occlusion","tag-bezier-curves","tag-clothing-starter-file","tag-convert","tag-example-files","tag-fbx","tag-imvu","tag-imvu-files","tag-imvu-studio","tag-imvu-studio-toolkit","tag-jewellery","tag-jewelry","tag-necklace","tag-normal-map","tag-opacity-map","tag-shininess-maps","tag-texture-bake"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4627","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=4627"}],"version-history":[{"count":32,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4627\/revisions"}],"predecessor-version":[{"id":8770,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4627\/revisions\/8770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/5300"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=4627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=4627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=4627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}