{"id":4386,"date":"2021-04-30T13:45:34","date_gmt":"2021-04-30T12:45:34","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=4386"},"modified":"2023-09-07T15:51:26","modified_gmt":"2023-09-07T14:51:26","slug":"refraction","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/refraction\/","title":{"rendered":"Basic Refraction (transparency)"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 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-69fe6e329fd47\" 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-69fe6e329fd47\"  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\/refraction\/#basic-material\" >Basic Material<\/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\/refraction\/#transparent-material\" >Transparent Material<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/codex\/refraction\/#refraction-bsdf\" >Refraction BSDF<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/codex\/refraction\/#refraction-in-eevee-vs-cycles\" >Refraction in Eevee vs Cycles<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/VCsHhRTKeFs\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p>Generally speaking using <a href=\"https:\/\/www.katsbits.com\/codex\/tag\/transparency\/\">transparent materials<\/a> on their own are more than enough to create the illusion of transparency, that something can be seen though another object or surface. For more representative accuracy however, the way light tends to distort on passing through clear or semi-transparent materials should be taken into account. This can be done including a <b>Refraction BSDF<\/b> node.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/blender\/katsbits - refraction.zip\">Refraction BSDF example file<\/a> (c. 200 KB &#8211; *.blend, *.tga).<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"basic-material\"><\/span>Basic Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As refraction is a material property, for the effect to work correctly a material is required. If one is not available (select an object and) click the <b>+ New<\/b> button in <b>Material Properties<\/b> to create and populate a new material instance. Switch to <b>Shading Workspace<\/b> [1] and drop in an <b>Image Texture<\/b> node, <b>Add \u00bb Texture \u00bb Image Texture<\/b>, link an image (<i>+ New<\/i> or <i>Open<\/i> where appropriate) before then connecting <b>Color<\/b> output (<i>Image Texture<\/i>) to <b>Base Color<\/b> input (<i>Principled BSDF<\/i>) [2].<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: if the material to be refracted makes use of non-procedural or non-generated data, an external bitmap image for example, objects will need to be fully <a href=\"https:\/\/www.katsbits.com\/codex\/uv-editing\/\">UV Unwrapped<\/a> to ensure the resulting effect is correctly mapped and rendered to objects and the scene. Refraction will work without UV Unwrapping, UV Mapping or Image Texture input however.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/initial-material.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/initial-material.jpg\" alt=\"Basic material in Shading Workspace\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Setting up a basic material in <b>Shading Workspace<\/b> [1] and the Node Editor (bottom), a simple <b>Image Texture<\/b> node [2] with image is linked to the default <b>Principled BSDF<\/b> node, <b>Color<\/b> output to <b>Base Color<\/b> input.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"transparent-material\"><\/span>Transparent Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Although refraction introduces transparency to a material with its inclusion it is not generally used for this purpose (<i>should not be used to provide transparency in of itself<\/i>). In other words materials to be refracted should be set up as though for transparency, the simplest being an image with <a href=\"https:\/\/www.katsbits.com\/codex\/alpha\/\">alpha channel<\/a>. To do this, if the bitmap image loaded into the <a href=\"#basic-material\">Image Texture node described above<\/a> includes an Alpha Channel, after loading link the <b>Alpha<\/b> output of the <i>Image Texture<\/i> node to the <b>Alpha<\/b> input of <i>Principle BSDF<\/i> [3], then in <b>Material Properties<\/b> set the <b>Blend Mode<\/b> to <b>Alpha Blend<\/b> [4]. The material will immediately appear transparent in the 3D View (assuming Material Preview or Rendered mode is active).<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: for <b>Cycles<\/b> materials Blend Mode is in <a href=\"https:\/\/www.katsbits.com\/codex\/transparency-cycles\/\"><b>Viewport Display<\/b><\/a> rather than Settings.<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: transparency can be established a number of ways; using an image with included <a href=\"https:\/\/www.katsbits.com\/codex\/alpha\/\">Alpha Channel<\/a>, using <a href=\"https:\/\/www.katsbits.com\/codex\/principled-alpha\/\">Principled BSDF Alpha<\/a> (Transparent BSDF), or a separate <a href=\"https:\/\/www.katsbits.com\/codex\/opacity\/\">Opacity Map<\/a>, that is then further dependent on whether Eevee or <a href=\"https:\/\/www.katsbits.com\/codex\/transparency-cycles\/\">Cycles<\/a> is being used.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/transparency.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/transparency.jpg\" alt=\"Basic material Transparency before refraction\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Although refraction introduces transparency to any material its associated with, for the effect to work correctly transparency will need to be set up properly. For simple transparency connect <b>Alpha<\/b> output to <b>Alpha<\/b> input [3] then set the <b>Blend Mode<\/b> in Material Properties [4].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"refraction-bsdf\"><\/span>Refraction BSDF<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the basic material is set up refraction can be added. To do this, from the <b>Add<\/b> menu in the Node Editor select <b>Shader<\/b> then <b>Refraction BSDF<\/b> &#8211; <b><i>Add \u00bb Shader \u00bb Refraction BSDF<\/i><\/b>. Click to drop the node into the workspace. Next, click <b>Add<\/b> then <b>Shader<\/b> again, then <b>Mix Shader<\/b> &#8211; <b><i>Add \u00bb Shader \u00bb Mix Shader<\/i><\/b>. Click to drop in place. These are the two nodes needed for basic refraction.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/refraction-bsdf-node.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/refraction-bsdf-node.jpg\" alt=\"Adding a Refraction BSDF node\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>With the basic material in place refraction can be set up by adding in a <b>Refraction BSDF<\/b> [5] and <b>Mix Shader<\/b> [6] nodes to the tree&#8230;<\/i><\/p>\n<p>To complete the material tree link the <b>BSDF<\/b> output from <i>Refraction BSDF<\/i> node [7] to a <b>Shader<\/b> input of <i>Mix Shader<\/i> [8], then <b>Shader<\/b> output from the <i>Mix Shader<\/i> to the <b>Surface<\/b> input of <i>Material Output<\/i> node. Finally connect the <b>BSDF<\/b> output from <i>Principled BSDF<\/i> [9] to the remaining <b>Shader<\/b> input on the <i>Mix Shader<\/i>.<\/p>\n<blockquote><p><b>Design note<\/b>: how Refraction BSDF is linked within a tree that includes transparency depends on the type of transparency accommodated by the material, using a Transparent BSDF node for example might mean Principled BSDF and Transparent BSDF first being passed through a Mix Shader [8b] (per standard transparency) whose output in then plugged into another Mix Shader [8c] that includes Refraction BSDF as an input.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/extended-material-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/extended-material-tree.jpg\" alt=\"Linking node to complete the refraction material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>An &#8216;extended&#8217; node tree may be needed depending on how transparency is supported, if <b>Transparent BSDF<\/b> [8b] is present for example, <b>Refraction BSDF<\/b> may need to be passed through its own <b>Mix Shader<\/b> [8c] before final output.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/refraction-links.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/refraction-links.jpg\" alt=\"Linking node to complete the refraction material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>&#8230; which then need to be connected so that both Refraction BSDF [7] and Principled BSDF [9] link to the Mix Shader [8], which in turn is linked to Material Output [10].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"refraction-in-eevee-vs-cycles\"><\/span>Refraction in Eevee vs Cycles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>How refraction is displayed or rendered depends a great deal on the <b>Viewport Shading<\/b> mode and <b>Render Engine<\/b> used. For example, once the material is set up as described above, if <b>Material Preview<\/b> [11] is set in either Eevee or Cycles, the material will exhibit a &#8216;reflective&#8217; quality but little &#8216;refraction&#8217; as might be expected.<\/p>\n<blockquote><p><b>Design note<\/b>: when rendering with <b>Cycles<\/b>, especially real-time, display can be cleaned up in <b>Render Properties<\/b> [11] by enable <b>Denoising<\/b> [12] under the <b>Settings<\/b> subsection &#8211; depending on system graphics a number of options will be available; e.g. <b>Automatic<\/b>, <b>OptiX<\/b>, <b>OpenImageDenouse<\/b>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/refraction-denoise.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/refraction-denoise.jpg\" alt=\"Refraction and Denoise\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>When using Cycles engine, in <b>Render Properties<\/b> scene (real-time display) rendering can be cleaned  enabling the <b>Denoising<\/b> setting.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/material-preview.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/material-preview.jpg\" alt=\"Refraction and Material Preview\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In <b>Material Preview<\/b> for both Cycles and Eevee the resulting effect is displayed as having a reflective rather than refractive quality&#8230;<\/i><\/p>\n<p>In <b>Rendered<\/b> mode however, there may be a marked difference between Eevee and Cycles that may also be affected by hardware capabilities.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/rendered-eevee.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/rendered-eevee.jpg\" alt=\"Refraction in Eevee\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/rendered-cycles.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/refraction\/rendered-cycles.jpg\" alt=\"Refraction in Cycles\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In <b>Material Preview<\/b> for both Cycles and Eevee (top) the resulting effect is displayed as having a reflective rather than refractive quality. In <b>Rendered<\/b> mode (bottom) refraction tends to display marked differences between Eevee and Cycles, the latter being more accurate (relatively).<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":4443,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[565,784,103,327,783,519,220,562],"class_list":["post-4386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-cycles","tag-denoising","tag-materials","tag-node-editor","tag-refraction-bsdf","tag-shading-workspace","tag-transparency","tag-transparent-bsdf"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4386","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=4386"}],"version-history":[{"count":34,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4386\/revisions"}],"predecessor-version":[{"id":5034,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4386\/revisions\/5034"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/4443"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=4386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=4386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=4386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}