{"id":1024,"date":"2020-12-08T00:00:21","date_gmt":"2020-12-08T00:00:21","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=1024"},"modified":"2023-09-07T15:51:41","modified_gmt":"2023-09-07T14:51:41","slug":"sort-order","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/sort-order\/","title":{"rendered":"Transparency Clipping (Sort Order)"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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-6a3052c17f35a\" 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-6a3052c17f35a\"  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\/sort-order\/#sort-order\" >Sort Order<\/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\/sort-order\/#sort-elements\" >Sort Elements<\/a><\/li><\/ul><\/nav><\/div>\n<p>In situations where layers of transparency are stacked so one or more surface is positioned behind another, issues may arise as a consequence of Blender not being able to properly determine each elements <b>sort order<\/b> with respect to others in a scene and how they should be drawn on screen. In Blender this issue can generally be addressed using &#8220;<b>Sort Elements<\/b>&#8220;.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: transparent surfaces being incorrectly rendered is not a Blender specific problem but rather one that&#8217;s consequential to the way graphics processing handles transparency more broadly.<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"sort-order\"><\/span>Sort Order<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Under normal circumstances <b>sort order<\/b> as a process is not an issue because surfaces that cannot be seen are culled (removed) from view. Ordinarily transparency isn&#8217;t an issue either so long as anterior surfaces are fully opaque (solid). When this is not the case, typically where additional layers of transparency can be seen through others, a conflict arises in which surfaces, or whole meshes, appear inverted or inside out; window surface &#8216;B&#8217; for example, being visible through window surface &#8216;A&#8217; may result in the &#8216;B&#8217; appearing in front of the &#8216;A&#8217; (undesired) instead of the other way around (desired).<\/p>\n<blockquote><p><b>Design note<\/b>: &#8216;<b>sort order<\/b>&#8216; is sometimes referred to interchangeably as &#8216;<b>surface sorting<\/b>&#8216;, &#8216;<b>alpha sort<\/b>&#8216;, &#8216;<b>depth sort<\/b>&#8216;, &#8216;<b>draw order<\/b>&#8216;, &#8216;<b>render order<\/b>&#8216;, &#8216;<b>render sort<\/b>&#8216; and others depending on the exact context of the problem. As an issue meshes may appear inside-out, back-to-front, flicker back on forth, visual artifacts that are similar to, but not be confused with, <b>z-fighting<\/b> (surface proximity sorting error) or other similar surface sort-order issues.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-order-clipping.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\"  style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-order-clipping.jpg\" alt=\"Sort order 'clipping' issues\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Sort order issues tends to show as clipping where surfaces appear to show through, or over others, that should be in front and blocking those behind (indicated above &#8211; Eevee).<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-order-no-clipping.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-order-no-clipping.jpg\" alt=\"Transparency correctly rendered in Cycles\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>An approximation of what should be shown when stacked transparency is properly rendered &#8211; sort order clipped areas are drawn correctly, front to back (Cycles).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"sort-elements\"><\/span>Sort Elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To manually correct surface sort order, first switch to <b>Edit Mode<\/b> then select an individual face or group of faces depending of the desired outcome. Next, from the <b>Mesh<\/b> menu, select <b>Sort Elements&#8230;<\/b> then the option that will determine the appropriate sort order or the selection, e.g. <b>Mesh \u00bb Sort Elements \u00bb Selected<\/b>. Deselect and repeat the selection\/assignment process in reverse to set the render order &#8211; surfaces to the rear should be set last.<\/p>\n<blockquote><p><b>Design note<\/b>: when using <b>Sort Elements&#8230;<\/b>;<br \/>\n1) despite being correctly applied clipping may persist.<br \/>\n2) surface selection order is not always obvious so some trial and error should be expected.<br \/>\n3) manually adjusting surface order may not be supported outside Blender.<br \/>\n4) sort order clipping occurs regardless as to how transparency is defined, by bitmap or procedurally.<br \/>\n5) clipping is Render Engine and Viewport Shading dependent, appearing in some but not others.<\/p><\/blockquote>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: the orientation of objects within a scene affects how sort order behaves &#8211; as objects are moved or move, the relationship between surfaces changes, so whilst the rendering hierarchy may be correct when looking at a scene front-on it might not be when viewed from the side, obliquely, and so on. For content rendered in real time (game engines) this can make fixing the problem entirely, tricky.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-order-orientation.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-order-orientation.jpg\" alt=\"Object\/surface orientation affects clipping\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The orientation of objects and surfaces relative to each other affects how transparency is rendered so whilst addressing sort order from one orientation or perspective it may not work from others.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-elements-selected.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-elements-selected.jpg\" alt=\"Manually correcting sort order\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-element-fixed.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/sort-element-fixed.jpg\" alt=\"Sort Order fixed\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Manually setting the sort order of a selection (image top &#8211; Eevee) &#8211; this may or may not need to be done to all surfaces and not just those exhibiting issues, which for complex objects may require some thought to properly determine the correct, reverse, order of selection and property setting to diminish clipping (trouble spots indicated &#8211; image bottom &#8211; Eevee).<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":3904,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[185,453,694,103,750,448,751,220,454],"class_list":["post-1024","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-alpha-mask","tag-alpha-transparency","tag-clipping","tag-materials","tag-sort-elements","tag-sort-order","tag-surface-order","tag-transparency","tag-transparent-textures"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1024","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=1024"}],"version-history":[{"count":31,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1024\/revisions"}],"predecessor-version":[{"id":5054,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1024\/revisions\/5054"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/3904"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=1024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=1024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=1024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}