{"id":1624,"date":"2026-10-20T00:15:32","date_gmt":"2026-10-19T15:15:32","guid":{"rendered":"https:\/\/heyyocg.link\/?p=1624"},"modified":"2026-10-20T00:22:11","modified_gmt":"2026-10-19T15:22:11","slug":"ue5-screenspace-dissolve-overview","status":"publish","type":"post","link":"https:\/\/heyyocg.link\/en\/ue5-screenspace-dissolve-overview\/","title":{"rendered":"[UE5 Niagara] Beyond Skeletal Mesh Location: A &#8220;Silhouette Cutout&#8221; Approach to Dissolve Effects"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hi there!<br>When you play games, you often see a &#8220;dissolve effect&#8221; where a character breaks apart into particles and disappears\u2014like when an enemy is defeated. Don&#8217;t those make you want to build one yourself?<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Screen Space Particle Dissolve from my Coloso course Mastering the Mechanics of Advanced Niagara &amp; Material VFX \u2192 <a href=\"https:\/\/t.co\/tUTQstjjHM\">https:\/\/t.co\/tUTQstjjHM<\/a><br><br>This explains a screen-space technique to emit particles from a mesh and compares with the traditional Skeletal Mesh Location method. <a href=\"https:\/\/t.co\/6d0IlKK8PY\">pic.twitter.com\/6d0IlKK8PY<\/a><\/p>&mdash; HeyYo (@yo_hanashima) <a href=\"https:\/\/x.com\/yo_hanashima\/status\/2045487517101592832?ref_src=twsrc%5Etfw\">April 18, 2026<\/a><\/blockquote><script async src=\"https:\/\/platform.x.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">So how do you approach this when building it with Niagara in UE5?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">My guess is that most of you reach for the easiest option: <strong>the <code>Skeletal Mesh Location<\/code> module<\/strong>.<br>It&#8217;s the go-to method, and it&#8217;s genuinely handy&#8230; but have you ever found yourself thinking, &#8220;Hmm, this doesn&#8217;t look as clean as I hoped&#8221;?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, I&#8217;d like to share another tool for your VFX toolbox: <strong>a dissolve approach that uses Screen Space and a Stencil Mask<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Learn an Alternative to Skeletal Mesh Location?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Skeletal Mesh Location<\/code> spawns particles directly from the surface of the character&#8217;s 3D model (its polygons).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s great for getting something up and running quickly, but it comes with a few weaknesses (and extra work):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/img02_skeletal_mesh_location.webp\" alt=\"Particles spawned from the character's surface with Skeletal Mesh Location. Particles cluster along the outlines of the hair and hands, while the torso is sparse.\"\/><figcaption class=\"wp-element-caption\">Particles spawned with Skeletal Mesh Location. They cluster along the outlines of the hair and arms, while the torso and legs end up sparse.<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>The result depends on the mesh structure (polygon density)<\/strong><br>Areas with dense polygons, like around the face, get thick with particles, while areas with fewer polygons, like the torso, end up looking empty. This makes the look hard to control.<\/li>\n\n\n\n<li><strong>You end up implementing the dissolve twice\u2014once in Niagara too<\/strong><br>To make a character fade away, it isn&#8217;t enough to dissolve it in the material. You also have to build logic on the Niagara side, such as &#8220;don&#8217;t spawn particles from parts that have already disappeared,&#8221; which adds to the implementation work.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;I want a cleaner, more even silhouette effect.&#8221; &#8220;I want to try a different approach.&#8221;<br>That&#8217;s where the technique I&#8217;m introducing today comes in.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A New Approach: Screen Space \u00d7 Stencil Mask<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The key idea is this: <strong>instead of spawning particles from the character&#8217;s model, spawn them across what the camera sees on screen, then cut them out in the shape of the character.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It breaks down into three main steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Find the Character&#8217;s On-Screen Frame (Screen Bounds)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/img03_screen_bounds.webp\" alt=\"The area the character occupies on screen, shown as a semi-transparent red rectangle\"\/><figcaption class=\"wp-element-caption\">The area the character occupies on screen (Screen Bounds), shown as a red rectangle<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/img03b_screen_bounds_slide.webp\" alt=\"Lecture slide. The position of point P inside the red rectangle around the character is expressed as a combination of the Right Direction Vector and the Up Direction Vector.\"\/><figcaption class=\"wp-element-caption\">From the lecture slides: a position inside the frame is expressed using the frame&#8217;s right and up direction vectors<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">First, we convert 3D information into the 2D screen coordinates we see on our monitors (Screen Space). Then we calculate the rectangular frame (Screen Bounds) that tells us exactly where on the screen the character appears.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Fill the Frame with Particles<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/img04_particles_in_bounds.webp\" alt=\"White particles filling a flat rectangle at the character's position\"\/><figcaption class=\"wp-element-caption\">Particles filling the Screen Bounds frame (before the cutout)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we spawn particles inside the rectangular frame we just found. At this point, you have a &#8220;rectangular wall of particles&#8221; sitting in front of the character.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Cut It Out with the Stencil (Custom Stencil)!<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/img05_stencil_cutout.webp\" alt=\"On the left, particles from Skeletal Mesh Location. On the right, particles cut out in the character's shape using the stencil, evenly filled.\"\/><figcaption class=\"wp-element-caption\">Left: Skeletal Mesh Location \/ Right: particles cut out with the stencil. The right one is evenly filled across the whole silhouette.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/img05b_custom_stencil_slide.webp\" alt=\"Lecture slide. Reading the stencil value at each screen position gives 0 outside the character and 1 on the character.\"\/><figcaption class=\"wp-element-caption\">From the lecture slides: reading the stencil value at each screen position gives 0 outside the character and 1 on the character<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is the most important part!<br>Using UE&#8217;s rendering feature, Custom Depth-Stencil, we assign the character&#8217;s model a &#8220;special number&#8221; (for example, 1).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, on the Niagara side, we <strong>keep only the particles where the on-screen value is 1 (that is, where the character is visible) and remove all the rest.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Think of it like pressing a character-shaped cookie cutter (Step 3) into a sheet of cookie dough (Step 2)\u2014pop!<br>This lets you create a clean silhouette effect that isn&#8217;t affected by polygon density.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">That Said, There&#8217;s a Small Hurdle to Implementing It&#8230;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;ve read this far, you might be thinking, &#8220;Oh, I didn&#8217;t know you could do it that way!&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But to be honest, when you actually try to build this in Niagara, <strong>you can&#8217;t make it just by dropping in existing modules.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ll need to open a <strong>Scratch Pad<\/strong> and build your own custom module.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/img06_scratch_pad.webp\" alt=\"Niagara Scratch Pad. Nodes that read the Screen Bounds position, size, and direction vectors are wired into multiply and add nodes.\"\/><figcaption class=\"wp-element-caption\">Calculating particle positions from the Screen Bounds position, size, and direction vectors in Scratch Pad<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Passing data with the <code>Particle Attribute Reader<\/code><\/li>\n\n\n\n<li>Getting the camera&#8217;s forward vector and up vector<\/li>\n\n\n\n<li>Building the math to spread particles across the screen using UV coordinates and dot products<\/li>\n\n\n\n<li>Reading accurate depth and stencil values from the G-Buffer<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">&#8230;and so on. It takes a bit of math and a deeper knowledge of Niagara.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Hands-On: Want to Learn This System from Scratch?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;I get the theory, but how exactly do I wire up the nodes?&#8221;<br>&#8220;I want to really understand the vector math in Scratch Pad and be able to use it myself!&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If that sounds like you, <strong>I&#8217;ve released an online course on Coloso where you can learn how to build this screen-space-and-stencil dissolve effect from scratch, step by step, working alongside me!<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Coloso course: Mastering the Mechanics of Advanced Niagara &amp; Material VFX<\/strong><br><a href=\"https:\/\/coloso.global\/en\/products\/vfxartist-heyyo-us\">https:\/\/coloso.global\/en\/products\/vfxartist-heyyo-us<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">The English subbed version of my class \u201cMastering the Mechanics of Advanced Niagara &amp; Material VFX&quot; is now up for pre-order on Coloso(<a href=\"https:\/\/x.com\/colosoglobal?ref_src=twsrc%5Etfw\">@colosoglobal<\/a>)<br><br>We&#39;ll learn how to enhance any gameplay experience with advanced, high-quality game VFX!<br><br>Link \u2192 <a href=\"https:\/\/t.co\/tUTQstjjHM\">https:\/\/t.co\/tUTQstjjHM<\/a><a href=\"https:\/\/x.com\/hashtag\/coloso?src=hash&amp;ref_src=twsrc%5Etfw\">#coloso<\/a> <a href=\"https:\/\/t.co\/ySXgSc75bQ\">pic.twitter.com\/ySXgSc75bQ<\/a><\/p>&mdash; HeyYo (@yo_hanashima) <a href=\"https:\/\/x.com\/yo_hanashima\/status\/2001834875842617482?ref_src=twsrc%5Etfw\">December 19, 2025<\/a><\/blockquote><script async src=\"https:\/\/platform.x.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Building on the theory covered in this post, the course doesn&#8217;t just have you copy nodes\u2014it carefully explains <strong>why each calculation is needed<\/strong>, starting from the basics.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And of course, <strong>the finished project data used in this post is included with the course<\/strong>, so you can learn while working with the actual data!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Just Want the Data, Fast?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;I don&#8217;t have time to sit through a whole course&#8230;&#8221;<br>&#8220;I want to use the finished system in my own project right away!&#8221;<br>&#8220;I want to take the data apart and see how it works myself!&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For you, <strong>the project data is also available on its own on Gumroad.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\ud83d\udd3d Gumroad: Dissolve Effect Project Data<\/strong><br><a href=\"https:\/\/heyyohanashima.gumroad.com\/l\/lvmte\">https:\/\/heyyohanashima.gumroad.com\/l\/lvmte<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Once you master this &#8220;silhouette cutout&#8221; technique, it opens up far more than dissolve effects\u2014 like hologram effects and much more in Niagara!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to expand your toolbox beyond Skeletal Mesh Location, give it a try through the course or the project data!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi there!When you play games, you often see a &#8220;dissolve effect&#8221; where a character breaks apart into particles and disappears\u2014like when an enemy is defeated. Don&#8217;t those make you want to build one yourself? So how do you approach this when building it with Niagara in UE5? My guess is that most of you reach [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1632,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_mi_skip_tracking":false,"_locale":"en_US","_original_post":"https:\/\/heyyocg.link\/?p=1623","footnotes":""},"categories":[20,17,31],"tags":[32,15,30],"class_list":["post-1624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ue4-tutorial","category-ue","category-ue4-tech-info","tag-niagara","tag-vfx","tag-tech-info","en-US"],"modified_by":"yohanashima","_links":{"self":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/comments?post=1624"}],"version-history":[{"count":3,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1624\/revisions"}],"predecessor-version":[{"id":1631,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1624\/revisions\/1631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media\/1632"}],"wp:attachment":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media?parent=1624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/categories?post=1624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/tags?post=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}