{"id":681,"date":"2024-01-17T09:42:31","date_gmt":"2024-01-17T09:42:31","guid":{"rendered":"https:\/\/shores.design\/?p=681"},"modified":"2024-02-23T18:33:48","modified_gmt":"2024-02-23T18:33:48","slug":"integration-of-mesh-and-volumetric-shader-sdf","status":"publish","type":"post","link":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/","title":{"rendered":"Integration of Mesh and Volumetric Shader SDF"},"content":{"rendered":"\n

Let’s take a look at a problem I worked on recently trying to merge mesh objects and volumetric shader SDFs, breaking it down by problem and solution.<\/p>\n\n\n\n

The Problem<\/h4>\n\n\n\n

For a previous company, we had a 3d-printer slicing software that worked with meshes (STLs, etc as most all of them do). As a new feature we wanted the ability to add infills for lightweighting without strength loss, as well as control of a proprietary advanced materials property. Infills are expensive to generate and render as meshes, but easy to render as Implicit Models (such as volumetric SDFs for raymarched shaders). You can combine SDFs (signed distance fields) of boundary objects like spheres and cubes with SDFs of fills like gyroids or octects fairly easily, but there is little to be found with merging the implicit volumetric shader raymarching world of SDFs and the triangulated world of meshes. These environments are systematically separated by the CPU and GPU hardware divide.<\/p>\n\n\n\n

The Problem: Meshes and SDFs don’t work well together, particularly the problem of defining a boundary of a surface mesh, and the infill pattern such as a gyroid or octet beams.<\/strong><\/p>\n\n\n\n

\n
\"Gyroid<\/figure>\n\n\n\n
\"A<\/figure>\n\n\n\n
\"Display<\/figure>\n<\/figure>\n\n\n\n

(Gyroid Fill – w\/ Cube, Solid Mesh of Teapot, and Gyroid Fill Zoomed In – 2x2x2 Unit Cells)<\/em><\/p>\n\n\n\n

The Solution<\/h4>\n\n\n\n

In order to merge our mesh with the implicit infill, I extended our mesh scene with a custom shader material (in Three.JS) that contains information of a second scene, this time as a raymarched fragment shader (implicit). The key here was to set up the shader uniforms such that any change to the first scene was exactly updated to the second scene. <\/p>\n\n\n\n

Next, I set up the renderer to do multiple passes per render draw, with the first render passes writing to render targets that store depth information about the entry and exit points of the mesh from each pixel in the camera’s perspective. This allows to know not only the depth of each fragment’s first hit, but also the exit of that fragment hit from the mesh and multiple subsequent entrances and exits. This method is known as Depth Peeling and is described by a famous Nvidia paper using that name. (source: https:\/\/developer.download.nvidia.com\/SDK\/10\/opengl\/src\/dual_depth_peeling\/doc\/DualDepthPeeling.pdf<\/a>)<\/p>\n\n\n\n

Passing the textures of those render targets into the final draw render allows us to construct a cheap SDF of the mesh itself, without having to cheap all the millions of triangles of the mesh for each fragment. This representation can then be easily combined with other SDFs such as the gyroid fill described before in a standard volumetric shader raymarcher. <\/p>\n\n\n\n

The beauty of implicit geometry is also that you can render very fine repeating detail with no performance loss, such as millions of tiny unit cells. This solution is efficient and effective for visual representation of the model on the screen for editing and previews to the user. <\/p>\n\n\n\n

For slicing itself, another method was employed using WebGL stencil buffers, but I cannot discuss that here. The Solution: Utilize Depth Peeling algorithms to create a cheap SDF of the mesh, which can then be used in a raymarching scene that is identical to the mesh scene.<\/p>\n\n\n\n

\"Complex
(Teapot With Gyroid Fill<\/em>)<\/figcaption><\/figure>\n\n\n\n
\n
\"A<\/figure>\n\n\n\n
\"A<\/figure>\n\n\n\n
\"A<\/figure>\n<\/figure>\n\n\n\n

(Thin Wall of Gyroid Beams, Sphere w\/ Octet Fill, Torus Knot w\/ Fine Gyroid Fill – No Performance Loss)<\/em><\/p>\n\n\n\n

\n\n\n\n

Thanks for following along! To run a live demo of this, you can use the following link:<\/p>\n\n\n\n

LIVE DEMO<\/a><\/h4>\n\n\n\n

If you want to learn more about these topics for your project, or want to hire me on a freelance\/contract basis to implement optimizations like this and others in your web or desktop graphics projects, please browse the rest of this website and contact me<\/a> for details. <\/p>\n\n\n\n

Disclaimer: Images and demo are from a personal replication of this specific feature, not from company materials. They are not representative of my full professional quality standards, rather just intended to communicate a process<\/em><\/p>\n\n\n

<\/div>

Dan Shores<\/p><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Let’s take a look at a problem I worked on recently trying to merge mesh objects and volumetric shader SDFs, breaking it down by problem and solution. The Problem For a previous company, we had a 3d-printer slicing software that worked with meshes (STLs, etc as most all of them do). As a new feature […]<\/p>\n","protected":false},"author":3,"featured_media":849,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[13,10,9,6,11,8,7,4,5],"class_list":["post-681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-graphics-programming","tag-gyroid","tag-implicit","tag-mesh","tag-octet","tag-raymarching","tag-sdf","tag-three-js","tag-webgl"],"yoast_head":"\nIntegration of Mesh and Volumetric Shader SDF - Shores Design<\/title>\n<meta name=\"description\" content=\"Novel method to integrate mesh objects and implicit SDF geometries in a volumetric shader, broken down by a problem and solution case study\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integration of Mesh and Volumetric Shader SDF - Shores Design\" \/>\n<meta property=\"og:description\" content=\"Novel method to integrate mesh objects and implicit SDF geometries in a volumetric shader, broken down by a problem and solution case study\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/\" \/>\n<meta property=\"og:site_name\" content=\"Shores Design\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-17T09:42:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-23T18:33:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"447\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dan Shores\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dan Shores\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/\"},\"author\":{\"name\":\"Dan Shores\",\"@id\":\"https:\/\/shores.design\/#\/schema\/person\/5adb01079a7efa5be6e4dca54019a5c1\"},\"headline\":\"Integration of Mesh and Volumetric Shader SDF\",\"datePublished\":\"2024-01-17T09:42:31+00:00\",\"dateModified\":\"2024-02-23T18:33:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/\"},\"wordCount\":670,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shores.design\/#organization\"},\"image\":{\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png\",\"keywords\":[\"graphics programming\",\"gyroid\",\"implicit\",\"mesh\",\"octet\",\"raymarching\",\"SDF\",\"Three.js\",\"webgl\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/\",\"url\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/\",\"name\":\"Integration of Mesh and Volumetric Shader SDF - Shores Design\",\"isPartOf\":{\"@id\":\"https:\/\/shores.design\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png\",\"datePublished\":\"2024-01-17T09:42:31+00:00\",\"dateModified\":\"2024-02-23T18:33:48+00:00\",\"description\":\"Novel method to integrate mesh objects and implicit SDF geometries in a volumetric shader, broken down by a problem and solution case study\",\"breadcrumb\":{\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#primaryimage\",\"url\":\"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png\",\"contentUrl\":\"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png\",\"width\":700,\"height\":447,\"caption\":\"Teapot With Gyroid Fill\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shores.design\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integration of Mesh and Volumetric Shader SDF\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shores.design\/#website\",\"url\":\"https:\/\/shores.design\/\",\"name\":\"Shores Design\",\"description\":\"Graphics, Web, and Desktop Design Services\",\"publisher\":{\"@id\":\"https:\/\/shores.design\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shores.design\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shores.design\/#organization\",\"name\":\"Shores Design\",\"url\":\"https:\/\/shores.design\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shores.design\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/shores.design\/wp-content\/uploads\/2023\/11\/LogoBackwardsWhite.png\",\"contentUrl\":\"https:\/\/shores.design\/wp-content\/uploads\/2023\/11\/LogoBackwardsWhite.png\",\"width\":480,\"height\":480,\"caption\":\"Shores Design\"},\"image\":{\"@id\":\"https:\/\/shores.design\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/shores.design\/#\/schema\/person\/5adb01079a7efa5be6e4dca54019a5c1\",\"name\":\"Dan Shores\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shores.design\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/839841389f817d4464f6f3cebd2320e0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/839841389f817d4464f6f3cebd2320e0?s=96&d=mm&r=g\",\"caption\":\"Dan Shores\"},\"url\":\"https:\/\/shores.design\/index.php\/author\/danshores\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integration of Mesh and Volumetric Shader SDF - Shores Design","description":"Novel method to integrate mesh objects and implicit SDF geometries in a volumetric shader, broken down by a problem and solution case study","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/","og_locale":"en_US","og_type":"article","og_title":"Integration of Mesh and Volumetric Shader SDF - Shores Design","og_description":"Novel method to integrate mesh objects and implicit SDF geometries in a volumetric shader, broken down by a problem and solution case study","og_url":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/","og_site_name":"Shores Design","article_published_time":"2024-01-17T09:42:31+00:00","article_modified_time":"2024-02-23T18:33:48+00:00","og_image":[{"width":700,"height":447,"url":"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png","type":"image\/png"}],"author":"Dan Shores","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dan Shores","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#article","isPartOf":{"@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/"},"author":{"name":"Dan Shores","@id":"https:\/\/shores.design\/#\/schema\/person\/5adb01079a7efa5be6e4dca54019a5c1"},"headline":"Integration of Mesh and Volumetric Shader SDF","datePublished":"2024-01-17T09:42:31+00:00","dateModified":"2024-02-23T18:33:48+00:00","mainEntityOfPage":{"@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/"},"wordCount":670,"commentCount":0,"publisher":{"@id":"https:\/\/shores.design\/#organization"},"image":{"@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#primaryimage"},"thumbnailUrl":"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png","keywords":["graphics programming","gyroid","implicit","mesh","octet","raymarching","SDF","Three.js","webgl"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/","url":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/","name":"Integration of Mesh and Volumetric Shader SDF - Shores Design","isPartOf":{"@id":"https:\/\/shores.design\/#website"},"primaryImageOfPage":{"@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#primaryimage"},"image":{"@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#primaryimage"},"thumbnailUrl":"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png","datePublished":"2024-01-17T09:42:31+00:00","dateModified":"2024-02-23T18:33:48+00:00","description":"Novel method to integrate mesh objects and implicit SDF geometries in a volumetric shader, broken down by a problem and solution case study","breadcrumb":{"@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#primaryimage","url":"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png","contentUrl":"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png","width":700,"height":447,"caption":"Teapot With Gyroid Fill"},{"@type":"BreadcrumbList","@id":"https:\/\/shores.design\/index.php\/2024\/01\/17\/integration-of-mesh-and-volumetric-shader-sdf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shores.design\/"},{"@type":"ListItem","position":2,"name":"Integration of Mesh and Volumetric Shader SDF"}]},{"@type":"WebSite","@id":"https:\/\/shores.design\/#website","url":"https:\/\/shores.design\/","name":"Shores Design","description":"Graphics, Web, and Desktop Design Services","publisher":{"@id":"https:\/\/shores.design\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shores.design\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shores.design\/#organization","name":"Shores Design","url":"https:\/\/shores.design\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shores.design\/#\/schema\/logo\/image\/","url":"https:\/\/shores.design\/wp-content\/uploads\/2023\/11\/LogoBackwardsWhite.png","contentUrl":"https:\/\/shores.design\/wp-content\/uploads\/2023\/11\/LogoBackwardsWhite.png","width":480,"height":480,"caption":"Shores Design"},"image":{"@id":"https:\/\/shores.design\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/shores.design\/#\/schema\/person\/5adb01079a7efa5be6e4dca54019a5c1","name":"Dan Shores","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shores.design\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/839841389f817d4464f6f3cebd2320e0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/839841389f817d4464f6f3cebd2320e0?s=96&d=mm&r=g","caption":"Dan Shores"},"url":"https:\/\/shores.design\/index.php\/author\/danshores\/"}]}},"jetpack_featured_media_url":"https:\/\/shores.design\/wp-content\/uploads\/2024\/01\/gyroidTeapot-small.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/posts\/681"}],"collection":[{"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":18,"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/posts\/681\/revisions"}],"predecessor-version":[{"id":953,"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/posts\/681\/revisions\/953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/media\/849"}],"wp:attachment":[{"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/media?parent=681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/categories?post=681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shores.design\/index.php\/wp-json\/wp\/v2\/tags?post=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}