{"id":1085,"date":"2023-07-16T16:30:04","date_gmt":"2023-07-16T07:30:04","guid":{"rendered":"https:\/\/heyyocg.link\/?p=1085"},"modified":"2023-07-16T22:44:48","modified_gmt":"2023-07-16T13:44:48","slug":"3d-print-fill-mesh-inside","status":"publish","type":"post","link":"https:\/\/heyyocg.link\/en\/3d-print-fill-mesh-inside\/","title":{"rendered":"3D printer-like vfx ~ How to fill the mesh cavity? ~"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"3D Benchy Timelapse (INVISIBLE)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/zRWFXJ2dLWo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The video above is a time-lapse video of figure generation with a 3D printer.<\/p>\n\n\n\n<p>If you are trying to do this kind of expression in CG, you will notice that you need to fill in the inner cavity of the Mesh. In this article, I will introduce one easy way to do that! (There are some limitations that I will mention along the way\u2026)<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"574\" data-id=\"989\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ng-1024x574.jpg\" alt=\"\" class=\"wp-image-989\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ng-1024x574.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ng-300x168.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ng-768x431.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ng-1536x862.jpg 1536w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ng.jpg 1847w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Cavity is seen<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"575\" data-id=\"1011\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ok-1-1024x575.jpg\" alt=\"\" class=\"wp-image-1011\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ok-1-1024x575.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ok-1-300x169.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ok-1-768x431.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ok-1-1536x863.jpg 1536w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/mesh_ok-1.jpg 1846w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Cavity is filled<\/figcaption><\/figure>\n<\/figure>\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\">I don&#39;t know how many people are interested in this, but I wrote a blog of:<br>3D printer-like vfx ~How to fill the mesh cavity?~<a href=\"https:\/\/t.co\/ocgtklXPu5\">https:\/\/t.co\/ocgtklXPu5<\/a><br><br>actual working data is here:<a href=\"https:\/\/t.co\/5HHXbwc9Wk\">https:\/\/t.co\/5HHXbwc9Wk<\/a> <a href=\"https:\/\/t.co\/m7bCPkoRdE\">pic.twitter.com\/m7bCPkoRdE<\/a><\/p>&mdash; HeyYo (@yo_hanashima) <a href=\"https:\/\/twitter.com\/yo_hanashima\/status\/1680566703741100035?ref_src=twsrc%5Etfw\">July 16, 2023<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>I also provide sample data below that implements what I describe here, so if you want actual working data right away, please check it out (it also includes the extra implementation data listed at the end oft this article).<\/p>\n\n\n\n<p><a href=\"https:\/\/heyyohanashima.gumroad.com\/l\/nlujvf\">https:\/\/heyyohanashima.gumroad.com\/l\/nlujvf<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Version<\/h2>\n\n\n\n<p>Unreal Engine 5.2.0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method<\/h2>\n\n\n\n<p>In conclusion, I place a plane mesh on the cross-section of the mesh and make it visible only the part where the back side of the mesh can be seen on screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/plane_cover-1024x638.jpg\" alt=\"\" class=\"wp-image-992\" width=\"614\" height=\"365\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<ol><li>Set up Mesh and Stencil Value<\/li><li>Use Stencil Value to make the plane mesh transparent with material<\/li><li>Limitations<\/li><\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">1. Set up Mesh and Stencil Value<\/h4>\n\n\n\n<p>First, to make it easier to work with, I set up meshes in BP Actor. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"667\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/bp_mesh-1024x667.jpg\" alt=\"\" class=\"wp-image-994\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/bp_mesh-1024x667.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/bp_mesh-300x195.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/bp_mesh-768x500.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/bp_mesh.jpg 1262w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li>Front: Mesh for drawing only the front of the target mesh (assign a Two Sided Off material)<\/li><li>Back: Mesh for drawing the back side of the target mesh (assign Two Sided On material)<\/li><li>Cover: Plane mesh that fills the inside of the target mesh to look visible<\/li><\/ul>\n\n\n\n<p>Then, set the Stancil Value to the Back mesh. As shown below, turn on Render CustomDepth Pass and set CustomDepth Stencil Value to any value you like (2 in this case). This value will later be used in the material of the Cover mesh.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"309\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/stencil.jpg\" alt=\"\" class=\"wp-image-995\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/stencil.jpg 436w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/stencil-300x213.jpg 300w\" sizes=\"(max-width: 436px) 100vw, 436px\" \/><\/figure>\n\n\n\n<p>Also, for the Front mesh, turn on Render CustomDepth Pass. <\/p>\n\n\n\n<p>And shrink the Back mesh slightly in the Normal direction so that the front side is slightly inside (=not visible to the camera) of the Front mesh (do not use TwoSidedSign to display only the back side, as it would not be correct to draw the shadow described later).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"521\" height=\"458\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shrink_wpo.jpg\" alt=\"\" class=\"wp-image-1007\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shrink_wpo.jpg 521w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shrink_wpo-300x264.jpg 300w\" sizes=\"(max-width: 521px) 100vw, 521px\" \/><\/figure>\n\n\n\n<p>Now, the Stencil Value (2) is written to the Stencil Buffer only where the back side of the target mesh is displayed.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"604\" data-id=\"996\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/back_mesh.jpg\" alt=\"\" class=\"wp-image-996\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/back_mesh.jpg 622w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/back_mesh-300x291.jpg 300w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"655\" data-id=\"997\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/stencil_screen.jpg\" alt=\"\" class=\"wp-image-997\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/stencil_screen.jpg 718w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/stencil_screen-300x274.jpg 300w\" sizes=\"(max-width: 718px) 100vw, 718px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Note that Custom Depth-Stencil Pass in Project Settings&gt;Rendering&gt;PostProcessing must be changed to Enabled with Stencil if Custom Stencil is to be used.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"926\" height=\"307\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/enable_stencil.jpg\" alt=\"\" class=\"wp-image-1005\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/enable_stencil.jpg 926w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/enable_stencil-300x99.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/enable_stencil-768x255.jpg 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/><\/figure>\n\n\n\n<p>By default, the back side of the Mesh does not cast a shadow, so check the Back mesh&#8217;s Shadow Two Sided checkbox to ensure that the shadow is cast correctly.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"263\" data-id=\"1008\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shadow_two_sided.jpg\" alt=\"\" class=\"wp-image-1008\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shadow_two_sided.jpg 360w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shadow_two_sided-300x219.jpg 300w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"623\" data-id=\"1010\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shadow_two_sided_imp-1.jpg\" alt=\"\" class=\"wp-image-1010\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shadow_two_sided_imp-1.jpg 804w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shadow_two_sided_imp-1-300x232.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/shadow_two_sided_imp-1-768x595.jpg 768w\" sizes=\"(max-width: 804px) 100vw, 804px\" \/><\/figure>\n<\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Use Stencil Value to make the plane mesh transparent with Material.<\/h4>\n\n\n\n<p>Next, use this Stencil Value as a mask so that only the part of the Cover mesh that covers the back side of the target mesh is visible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"889\" height=\"540\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/material_stencil-2.jpg\" alt=\"\" class=\"wp-image-1000\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/material_stencil-2.jpg 889w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/material_stencil-2-300x182.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/material_stencil-2-768x467.jpg 768w\" sizes=\"(max-width: 889px) 100vw, 889px\" \/><\/figure>\n\n\n\n<p>The process itself is very simple. If it matches the Stencil Value set in the Back mesh(2 in this case), opacity will be set to 1; otherwise, set to 0 or less.<\/p>\n\n\n\n<p>Now that the Cover is drawn just on the back side of the target mesh, a simple expression that fills the cavity is accomplished.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. Limitations<\/h4>\n\n\n\n<p>Although it is relatively easy to express the filling of cavities, there are some aspects that are difficult to adjust well, and there are two major limitations.<\/p>\n\n\n\n<p>\u2460 Only translucent can be used for the plane mesh to fill cavities.<\/p>\n\n\n\n<p>Stencil Value (GBuffer) can only be obtained from the material in the order of drawing below translucent, so if you use this method, the plane mesh on a cross-section will be translucent.<\/p>\n\n\n\n<p>With translucent material, it is difficult to get the right texture because the processing around lighting is different from that of opaque.<\/p>\n\n\n\n<p>One way around this is to use SceneCapture2D. If the tuning is done well, even if SceneCapture2D is used, it could be good performance to some extent in this case, so it may be a way to go.<\/p>\n\n\n\n<p>\u2461 Failure if there is a penetration in the target mesh<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"761\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/intersect-1-1024x761.jpg\" alt=\"\" class=\"wp-image-1002\" srcset=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/intersect-1-1024x761.jpg 1024w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/intersect-1-300x223.jpg 300w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/intersect-1-768x571.jpg 768w, https:\/\/heyyocg.link\/wp-content\/uploads\/2023\/04\/intersect-1.jpg 1074w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If the Mesh has a through-penetrating part, the surface Mesh will be inside the Mesh, and the Stencil Value will not be written to that part and the plane mesh will not be drawn, which will cause a breakdown in the representation of filling the cavity.<\/p>\n\n\n\n<p>Currently, I can&#8217;t think of much of a workaround for this, so I think it would be difficult to use this method for mesh with Animation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bonus<\/h2>\n\n\n\n<p>The problem of the filled area becoming translucent can be avoided by using SceneCapture2D.<\/p>\n\n\n\n<p>Below is an example of using SceneCpature2D to assign an opaque material to the plane mesh that fills the cavity and add Normal.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.tumblr.com\/yooo19\/721932894110679040\/3d-print-like-model-forming-effect-opaque-normal?source=share\" data-type=\"URL\" data-id=\"https:\/\/www.tumblr.com\/yooo19\/721932894110679040\/3d-print-like-model-forming-effect-opaque-normal?source=share\" target=\"_blank\">https:\/\/www.tumblr.com\/yooo19\/721932894110679040\/3d-print-like-model-forming-effect-opaque-normal<\/a><\/p>\n\n\n\n<p>I also tried to make it possible to adjust the orientation freely as shown below.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.tumblr.com\/yooo19\/721627445301739520\/3d-print-like-model-forming-effect?source=share\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.tumblr.com\/yooo19\/721627445301739520\/3d-print-like-model-forming-effect<\/a><\/p>\n\n\n\n<p>The data provided below include those described above, plus an extra one using SceneCapture2D and adjustable orientation, so if you are interested in the implementation, please take a look!<\/p>\n\n\n\n<p><a href=\"https:\/\/heyyohanashima.gumroad.com\/l\/nlujvf\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/heyyohanashima.gumroad.com\/l\/nlujvf<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The video above is a time-lapse video of figure generation with a 3D printer. If you are trying to do this kind of expression in CG, you will notice that you need to fill in the inner cavity of the Mesh. In this article, I will introduce one easy way to do that! (There [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1011,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_mi_skip_tracking":false,"footnotes":"","_locale":"en_US","_original_post":"https:\/\/heyyocg.link\/?p=987"},"categories":[17,31],"tags":[15,30],"modified_by":"yohanashima","_links":{"self":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1085"}],"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=1085"}],"version-history":[{"count":4,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1085\/revisions"}],"predecessor-version":[{"id":1091,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1085\/revisions\/1091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media\/1011"}],"wp:attachment":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media?parent=1085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/categories?post=1085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/tags?post=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}