https://docs.genies.com/assets/js/c7f49edf.17ad4c21.js

1"use strict";(self.webpackChunkgenies_devkit_docs=self.webpackChunkgenies_devkit_docs||[]).push([[1087],{72130:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>m,frontMatter:()=>o,metadata:()=>p,toc:()=>h});var n=a(87462),i=(a(67294),a(3905)),l=a(22004),s=a.n(l);const o={sidebar_position:6},r="UV Unwrapping",p={unversionedId:"sdk-unity/3Dcreations/wearables/uv-unwrapping",id:"sdk-unity/3Dcreations/wearables/uv-unwrapping",title:"UV Unwrapping",description:"Prepare your 3D model for texturing. Learn the key UV unwrapping principles and how to apply them to the digital Wearable creation process.",source:"@site/docs/sdk-unity/3Dcreations/wearables/uv-unwrapping.md",sourceDirName:"sdk-unity/3Dcreations/wearables",slug:"/sdk-unity/3Dcreations/wearables/uv-unwrapping",permalink:"/docs/sdk-unity/3Dcreations/wearables/uv-unwrapping",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"artistSidebar",previous:{title:"3D Modeling",permalink:"/docs/sdk-unity/3Dcreations/wearables/modeling"},next:{title:"Texturing",permalink:"/docs/sdk-unity/3Dcreations/wearables/texturing"}},u={},h=[{value:"Definition",id:"definition",level:2},{value:"Technical Requirements",id:"technical-requirements",level:2},{value:"UVs for Tileable Textures",id:"uvs-for-tileable-textures",level:2},{value:"UV Unwrapping software",id:"uv-unwrapping-software",level:2},{value:"UV Unwrapping Process",id:"uv-unwrapping-process",level:2},{value:"UV Projection",id:"uv-projection",level:3},{value:"Cut and Sew UV Seams",id:"cut-and-sew-uv-seams",level:3},{value:"Defining UV seams like a sewing lines",id:"defining-uv-seams-like-a-sewing-lines",level:4},{value:"\u201cHiding\u201d UV seams",id:"hiding-uv-seams",level:4},{value:"Unfolding UV Shells",id:"unfolding-uv-shells",level:3},{value:"Unfold and optimize UV Shells",id:"unfold-and-optimize-uv-shells",level:4},{value:"\u201cSquared\u201d or \u201cStraightened\u201d UV Shells",id:"squared-or-straightened-uv-shells",level:4},{value:"UV Layout",id:"uv-layout",level:2},{value:"UDIM Space",id:"udim-space",level:3},{value:"UV Shell Scale",id:"uv-shell-scale",level:3},{value:"UV Shell Rotation",id:"uv-shell-rotation",level:3},{value:"Check UVs with Tileable Checker Pattern",id:"check-uvs-with-tileable-checker-pattern",level:2},{value:"Texture Mapping",id:"texture-mapping",level:2},{value:"UV Unwrapping Example",id:"uv-unwrapping-example",level:2},{value:"UV Unwrapping errors",id:"uv-unwrapping-errors",level:2},{value:"Non-manifold UVs",id:"non-manifold-uvs",level:3},{value:"Overlapping UVs",id:"overlapping-uvs",level:3},{value:"Non-Manifold Edges",id:"non-manifold-edges",level:3},{value:"Texture Distortions",id:"texture-distortions",level:3},{value:"How to fix non-manifold UVs",id:"how-to-fix-non-manifold-uvs",level:3}],d={toc:h},c="wrapper";

1function m(e){let{components:t,...l}=e;return(0,i.kt)(c,(0,n.Z)({},d,l,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"uv-unwrapping"},"UV Unwrapping"),(0,i.kt)("p",null,"Prepare your 3D model for texturing. Learn the key UV unwrapping principles and how to apply them to the digital Wearable creation process."),(0,i.kt)("h2",{id:"definition"},"Definition"),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"UV Map",src:a(31728).Z,width:"1319",height:"814"})),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"UV Unwrapping")," in a process of creating a UV Map for a 3D model. A ",(0,i.kt)("strong",{parentName:"p"},"UV Map")," is a a 2D coordinate system that maps each vertex of the model to a corresponding location on a flat texture image. "),(0,i.kt)("p",null,"In a few words a UV map is a \u201cflattened\u201d 2D representation of a 3D model. "),(0,i.kt)("p",null,"To simplify it even more, UV map can be imagined as a colorful candy wrapper that covers the 3D model and makes it look appealing. Majority of 3D models are complex and it is hard to have one \u201cwrapper\u201d for them that does not stretch much. "),(0,i.kt)("p",null,"Part of the UV Mapping process is splitting the \u201cwrapper\u201d into different islands, ",(0,i.kt)("strong",{parentName:"p"},"UV shells"),", that will be unwrapped individually. This process is referred to as \u201ccutting UV seams\u201d."),(0,i.kt)("admonition",{type:"info"},(0,i.kt)("p",{parentName:"admonition"},(0,i.kt)("strong",{parentName:"p"},"UV shell")," refers to a distinct and separate group of UV islands within a UV map. A UV shell represents a connected set of UV islands that correspond to a specific part or component of the 3D model's surface.")),(0,i.kt)("h2",{id:"technical-requirements"},"Technical Requirements"),(0,i.kt)("p",null,"Genies ecosystem will have an ability for the in-app users to customize the Wearables by changing the color and material of the defined editable areas. It will also allow to add tileable textures and upload a custom image to use as the color of the Wearable editable area. In order to support this function, the UVs of the Wearables should conform to the following rules: "),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"all UV shells have the same rotation"),(0,i.kt)("li",{parentName:"ul"},"all UV shells have the same scale"),(0,i.kt)("li",{parentName:"ul"},"UV seam lines are hidden or placed appropriately"),(0,i.kt)("li",{parentName:"ul"},"none or minimal UV stretching"),(0,i.kt)("li",{parentName:"ul"},"UV shells packed in one UDIM space")),(0,i.kt)("admonition",{type:"caution"},(0,i.kt)("p",{parentName:"admonition"},"Automatic UV Mapping can give a pretty good and fast result when it comes to UV Unwrapping, but we highly encourage our creators to double check the automated result and edit it if needed to ensure the best final result. ")),(0,i.kt)("h2",{id:"uvs-for-tileable-textures"},"UVs for Tileable Textures"),(0,i.kt)("p",null,"When creating UVs for your Wearable, keep in mind the in-app asset customization function of the Genies ecosystem. In order to support it, your asset should have the UVs that will work with tileable textures."),(0,i.kt)("p",null,"Texture tiling in 3D modeling is the process of repeating the same texture map across the entire surface. It ensures a continuous and realistic appearance without visible seams or stretching. Tiling is especially useful for optimizing resources and maintaining visual quality on large surfaces or repeating patterns."),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Texture Tiling",src:a(83386).Z,width:"2808",height:"3067"})),(0,i.kt)("p",null,"The example below showcases how the in-app user will be able to apply a custom pattern to your 3D creation within the Genies ecosystem. The in-app user will have an ability to choose the pattern, edit how many times the pattern will be repeated on the assed by scaling the pattern as well as edit the rotation of the pattern."),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Seamless Texture",src:a(47481).Z,width:"2808",height:"3067"})),(0,i.kt)("h2",{id:"uv-unwrapping-software"}

1,"UV Unwrapping software"),(0,i.kt)("p",null,"Here is a list of software that can be used for the UV Unwrapping:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/sdk-unity/3Dcreations/maya/uv-unwrapping"},"Autodesk Maya")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/sdk-unity/3Dcreations/blender/uv-unwrapping"},"Blender")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"http://docs.pixologic.com/user-guide/3d-modeling/exporting-your-model/uv-mapping/"},"Maxon Zbrush")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://www.uvlayout.com/about/"},"Headus UV Layout")," (stand alone software)"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://www.rizom-lab.com/uv_mapping_beginner_tips/"},"Rizom UV")," (stand alone software)")),(0,i.kt)("h2",{id:"uv-unwrapping-process"},"UV Unwrapping Process"),(0,i.kt)("h3",{id:"uv-projection"},"UV Projection"),(0,i.kt)("p",null,"3D software offer multiple ways of UV map creation through the means of UV projection. Different techniques like planar, cylindrical, or spherical mapping can be used depending on the model's shape and requirements."),(0,i.kt)("h3",{id:"cut-and-sew-uv-seams"},"Cut and Sew UV Seams"),(0,i.kt)("p",null,"During the UV unwrapping process, artists need to strategically place seams on the model's surface to define where the surface will be split into UV shells for unwrapping. Careful placement of seams can help minimize texture stretching and distortion. "),(0,i.kt)("p",null,"Here are two techniques that will help to place the UV seams appropriately on the Wearable:"),(0,i.kt)("h4",{id:"defining-uv-seams-like-a-sewing-lines"},"Defining UV seams like a sewing lines"),(0,i.kt)("p",null,"Since we are talking about Wearables here, the best way to think about the UV shells here is to imagine what the sewing pattern for this type of clothing will look like. The UV seams on the Wearable are equivalent to the sewing seams on the clothes."),(0,i.kt)("admonition",{type:"info"},(0,i.kt)("p",{parentName:"admonition"},"Imagine UV SEAMS as SEWING SEAMS for your 3D Creation.")),(0,i.kt)("h4",{id:"hiding-uv-seams"},"\u201cHiding\u201d UV seams"),(0,i.kt)("p",null,"It is advised to place your UV seams in the areas that are not visible or that are not in focus on the 3D model. Some cut lines can be hidden on the back of the model, some can be on the sides, under the arms, in between the legs and so on."),(0,i.kt)("p",null,"Always keep in mind that your Wearable will be equipped on the avatar that will be used in multiple Experiences within the Genies ecosystem. That means that your 3D Creation will be viewed from all the angles."),(0,i.kt)("h3",{id:"unfolding-uv-shells"},"Unfolding UV Shells"),(0,i.kt)("p",null,"After the UV seams are defined of the Wearable it is time to cut those seams and unfold the UV shells on a 2D layout. This step ensures that the UV shells are \u201cflattened\u201d appropriately without any stretching. "),(0,i.kt)("h4",{id:"unfold-and-optimize-uv-shells"},"Unfold and optimize UV Shells"),(0,i.kt)("p",null,"After the UV seams are defined of the Wearable it is time to cut those seams and unfold the UV shells on a 2D layout. This step ensures that the UV shells are \u201cflattened\u201d appropriately without any stretching. "),(0,i.kt)("h4",{id:"squared-or-straightened-uv-shells"},"\u201cSquared\u201d or \u201cStraightened\u201d UV Shells"),(0,i.kt)("p",null,"This is an advanced UV Mapping technique that allows you to have a nice straight edge on your UV shells when needed. Using this technique will make the patterns tile nicer on your Wearable and you will be able to pack your UV shells more efficiently. "),(0,i.kt)("p",null,"First, pick the edge that will be in the center of your UV shell and see if it will be reasonable to make it straight. Then locate other parts of the UV shell, that can potentially be straight if you will be sewing this Wearable in real life. For example, ends of sleeves, shirts and pants can be straighten."),(0,i.kt)("p",null,"You can manually straighten the needed lines by scaling then in one axes and \u201crelax\u201d the surrounding UV components."),(0,i.kt)(s(),{controls:!0,url:"/videos/wearables/straightening-uv.mp4",mdxType:"ReactPlayer"}),(0,i.kt)("h2",{id:"uv-layout"},"UV Layout"),(0,i.kt)("p",null,"The arrangement of UV shells within the UV space is called the UV layout. Auto UV Layout can be very helpful to arrange the UV shells of a complex 3D model. Artists also arrange UV shells manually in an organized and efficie

1nt manner to optimize texture resolution and facilitate easier painting and editing of textures. "),(0,i.kt)("p",null,"When creating a UV layout of your 3D Creation, it is important to keep an eye to the scale and rotation of the UV shells. Both of those parameters should be consistent throughout the model."),(0,i.kt)("h3",{id:"udim-space"},"UDIM Space"),(0,i.kt)("p",null,"All UV shells should fit in one texture square / one UDIM space. Please make sure the UV shells stay within the 1:1 UV square and have at least 4 px buffer with the borders of it. "),(0,i.kt)("h3",{id:"uv-shell-scale"},"UV Shell Scale"),(0,i.kt)("p",null,"After creating the UV shells of a digital Wearable it is very important to make sure that the scale of the ALL the UV shells is relative to each other. This will ensure that the final textures will have the consistent resolution and if patterns applied - they will be scaled the same throughout the asset "),(0,i.kt)("h3",{id:"uv-shell-rotation"},"UV Shell Rotation"),(0,i.kt)("p",null,"It is important to maintain consistent rotation of ALL UV shells throughout the asset. This will make the texturing process a lot easier and will allow the in-app users to customize your Wearable with tileable patterns and custom images without any visual issues. "),(0,i.kt)("h2",{id:"check-uvs-with-tileable-checker-pattern"},"Check UVs with Tileable Checker Pattern"),(0,i.kt)("p",null,"It is advised to double check your UVs after creating them to avoid texture stretching and odd UV shell rotation in the future. We offer you a tileable checker pattern with letters and number that makes it easier to see potential UV mapping issues. "),(0,i.kt)("p",null,"Simply use this pattern as the color map for your Wearable while you are editing the UVs of your 3D model. You can also tile this pattern within your shader if needed. "),(0,i.kt)("p",null,"Preview your digital Wearable with the color on. You will be able to see the pattern lining up nicely and all the numbers and letters rotated in the same direction."),(0,i.kt)("p",null,"Download: ",(0,i.kt)("a",{parentName:"p",href:"https://drive.google.com/file/d/1uuaeqtziFnbsCAMFp8qafnatLLbzImgO/view?usp=drive_link"},"genies_UVCheckMap.png")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"UV Checkmap",src:a(40892).Z,width:"1024",height:"1024"})),(0,i.kt)("p",null,"Here is an example of how to use the tileable checker pattern in Autodesk Maya:"),(0,i.kt)(s(),{controls:!0,url:"/videos/wearables/checking-uv.mp4",mdxType:"ReactPlayer"}),(0,i.kt)("h2",{id:"texture-mapping"},"Texture Mapping"),(0,i.kt)("p",null,"Texture mapping is the next step after the 3D model is finalized and UV maps are created and edited appropriately. Texture maps can be created in both 2D and 3D space, but the final output is always a 2D image. Texture maps can include color and opacity maps, normal and height maps, metallic and smoothness maps that enhance the model's appearance in the game engine. "),(0,i.kt)("p",null,"Read the ",(0,i.kt)("a",{parentName:"p",href:"/docs/sdk-unity/3Dcreations/wearables/texturing"},"Texturing")," page for more information about texturing for 3D Creations."),(0,i.kt)("h2",{id:"uv-unwrapping-example"},"UV Unwrapping Example"),(0,i.kt)("p",null,"The example below showcases a UV Unwrapping overview for a Wearable in Autodesk Maya. The same principle can be applied to any other software."),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("strong",{parentName:"li"},"Create")," the initial/auto UV Map for your digital Wearable"),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("strong",{parentName:"li"},"Split")," the initial UV shell into pieces by strategically placing the cutlines (UV seams) on your mesh. "),(0,i.kt)("li",{parentName:"ol"},"\u201c",(0,i.kt)("strong",{parentName:"li"},"Unwrap"),"\u201d the pre-cut UV shells. "),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("strong",{parentName:"li"},"Rotate")," and flip the shells consistently"),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("strong",{parentName:"li"},"Scale")," your UV Shells consistently "),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("strong",{parentName:"li"},"Pack")," UV Shells into one UDIM space")),(0,i.kt)(s(),{controls:!0,url:"/videos/wearables/quick-uv.mp4",mdxType:"ReactPlayer"}),(0,i.kt)("h2",{id:"uv-unwrapping-errors"},"UV Unwrapping errors"),(0,i.kt)("h3",{id:"non-manifold-uvs"},"Non-manifold UVs"),(0,i.kt)("p",null,"Non-manifold UVs refer to a situation in 3D modeling where the UV coordinates of a mesh are not properly structured or defined. Unlike manifold UVs, which follow a consistent and organized layout, non-manifold UVs contain irregularities or inconsistencies that can cause issues during texture mapping and rendering."),(0,i.kt)("h3",{id:"overlapping-uvs"},"Overlapping UVs"),(0,i.kt)("p",null,"One common issue with non-manifold UVs is overlapping UV coordinates. This occurs when multiple vertices in the 3D mesh are assigned the same UV coordinates, resulting in texture stretching or incorrect rendering. "),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Overlapping UV",src:a(88703).Z,width:"1324",height:"799"})),(0,i.kt)("h3",{id:"non-manifold-edges"},"Non-Manifold Edges"),(0,i.kt)("p",null,"Non-manifold UVs can also be caused by ",(0,i.kt)("strong",{parentName:"p"},"non-manifold edges")," in the mesh. Non-manifold edges are edges that are shared by more or fewer than two polygons. When UVs are associated with non-manifold edges, it can lead to irregular texture mapping and undesirable rendering results."),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Non Manifold",src:a(57979).Z,width:"1512",height:"814"})),(0,i.kt)("h3",{id:"texture-distortions"},"Texture Distortions"),(0,i.kt)("p",null,"Non-manifold UVs can cause texture distortions when applying textures to the model's surface. This can result in uneven texture stretching, misaligned patterns, or texture bleeding across adjacent polygons. Distorted textures can significantly impact the visual quality and accuracy of the model's appearance."),(0,i.kt)(s(),{controls:!0,url:"/videos/wearables/texture-distortions.mp4",mdxType:"ReactPlayer"}),(0,i.kt)("h3",{id:"how-to-fix-non-manifold-uvs"},"How to fix non-manifold UVs"),(0,i.kt)("p",null,"To address non-manifold UV issues, it is essential to ensure proper UV unwrapping techniques and resolve any inconsistencies in the UV coordinates. This can involve manually adjusting overlapping UVs, resolving non-manifold edges, or using tools and scripts specifically designed to handle UV-related problems."),(0,i.kt)("p",null,"We hope that the information above gives you a good understanding of how to prepare your 3D model for texturing by creating efficient UV maps for it."),(0,i.kt)("admonition",{type:"info"},(0,i.kt)("p",{parentName:"admonition"},"For more software specific information on UV mapping please proceed to the Tutorials section of the 3D Creations documentation:"),(0,i.kt)("ul",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/sdk-unity/3Dcreations/blender/uv-unwrapping"},"Blender -UV Unwrapping")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/sdk-unity/3Dcreations/maya/uv-unwrapping"},"Autodesk Maya - UV Unwrapping")))))}m.isMDXComponent=!0},57979:(e,t,a)=>{a.d(t,{Z:()=>n});const n=a.p+"assets/images/non-manifold-37144814e1c1ecc7ecb9328f7dcc26f9.png"},88703:(e,t,a)=>{a.d(t,{Z:()=>n});const n=a.p+"assets/images/overlapping-uv-3d357841a0287bb80d4771520cdefd84.png"},47481:(e,t,a)=>{a.d(t,{Z:()=>n});const n=a.p+"assets/images/seamless-texture-24334f346afb10aa27d178c2ef260706.png"},83386:(e,t,a)=>{a.d(t,{Z:()=>n});const n=a.p+"assets/images/texture-tiling-2701bcfdb41bb850914c39cc1e386c7e.png"},40892:(e,t,a)=>{a.d(t,{Z:()=>n});const n=a.p+"assets/images/uv-checkmap-8a8eb88704587e2bb73b873cbb5d1273.png"},31728:(e,t,a)=>{a.d(t,{Z:()=>n});const n=a.p+"assets/images/uv-map-ed0eb35f9341f4f8318957c22d610a10.png"}}]);