{"id":1680,"date":"2026-10-20T23:29:45","date_gmt":"2026-10-20T14:29:45","guid":{"rendered":"https:\/\/heyyocg.link\/?p=1680"},"modified":"2026-10-20T23:33:38","modified_gmt":"2026-10-20T14:33:38","slug":"ue5-parallax-offset-coloso","status":"publish","type":"post","link":"https:\/\/heyyocg.link\/en\/ue5-parallax-offset-coloso\/","title":{"rendered":"The Magic of Adding &#8220;Depth&#8221; to a Single Plane! How to Make Parallax Offset"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Have you ever seen an effect\u2014like a cyberpunk hologram UI or an icy floor\u2014where <strong>&#8220;it&#8217;s just a single, paper-thin plane (polygon), yet when you peer into it, it looks like there&#8217;s space stretching far back inside&#8221;<\/strong>?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ve probably wondered how that&#8217;s made. It&#8217;s not a 3D model with an actual box built deep inside\u2014it&#8217;s an optical illusion created with a material technique called <strong>&#8220;Parallax Offset&#8221;<\/strong>!<\/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\">Parallax Cube 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>Just single material on a cube!<br>Covering not only parallax effect, design techniques for a depth-rich look, and a translucent rendering order issue fix. <a href=\"https:\/\/t.co\/W2VfqB3y8K\">pic.twitter.com\/W2VfqB3y8K<\/a><\/p>&mdash; HeyYo (@yo_hanashima) <a href=\"https:\/\/x.com\/yo_hanashima\/status\/2058171094830367149?ref_src=twsrc%5Etfw\">May 23, 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\">There are several kinds of Parallax Offset techniques, ranging from simple to complex.<br>In this article, I&#8217;ll walk you step by step through the simplest one: building a material that adds depth to a single flat plane!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hands-On! Let&#8217;s Build the Parallax Offset Nodes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It may look tricky at first glance, but the node setup itself is really simple.<br>Create a material, grab any texture you like (a logo, a pattern, etc.), and let&#8217;s build it together!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Get the Camera Direction (Camera Vector)<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac7c8c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac7c8c\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/01_camera_vector.jpg\" alt=\"The Camera Vector node (Input Data) in the Material Editor\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Camera Vector node<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">First, we get information about &#8220;from what angle the player (camera) is looking at the mesh.&#8221;<br>Right-click in the Material Editor and add a <strong>CameraVector<\/strong> node.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Transform the Space (World \u2192 Tangent)<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac7f47&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac7f47\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/02_transform_vector.jpg\" alt=\"The Camera Vector node connected to a TransformVector node (World Space to Tangent Space)\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Set TransformVector to &#8220;World Space to Tangent Space&#8221; and connect the Camera Vector<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Next, we convert that camera direction into &#8220;a space based on the mesh&#8217;s surface.&#8221; This is the most important part.<br>Add a <strong>TransformVector<\/strong> node and change its settings in the Details panel as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Source: World Space<\/li>\n\n\n\n<li>Destination: Tangent Space<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Then connect the CameraVector from the previous step into this TransformVector.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Extract the XY Components and Adjust the Depth<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac8237&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac8237\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/03_mask_multiply.jpg\" alt=\"TransformVector connected to a Mask (R G) node and a Multiply node, with a ParallaxOffset_Intensity parameter for the depth\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Extract only XY with Mask (R G), then adjust the depth with Multiply<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now we take only the parts we need from the transformed vector.<br>Add a <strong>ComponentMask<\/strong> node and check only &#8220;R&#8221; and &#8220;G&#8221; in the Details panel (this extracts just the X and Y axes).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You could add these values as they are, but to make the depth adjustable, multiply them by a value with a <strong>Multiply<\/strong> node. Try something like -0.1. This value becomes the depth (the amount of offset).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Add It to the UVs and Plug It into the Texture!<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac84a4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac84a4\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/04_full_graph.jpg\" alt=\"The full node graph: Camera Vector, TransformVector, Mask and Multiply, added to TexCoord with an Add node and connected to the Texture Sample's UVs\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The full graph: added to TexCoord with Add and connected to the Texture Sample&#8217;s UVs<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Finally, use an <strong>Add<\/strong> node to add the value we just calculated to the texture&#8217;s original UVs (the TexCoord node).<br>Plug that into the texture&#8217;s UV pin and&#8230; you&#8217;re done!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac86a4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac86a4\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/05b_preview_parallax_sink.gif\" alt=\"As the camera orbits, the logo shifts toward the plane's near edge and gets hidden by it, so it looks sunk behind the plane\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">With a negative depth, the logo looks sunk behind the plane<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">How does it look?<br>Try looking at the plane from an angle in the preview viewport. The texture slides around as the camera angle changes, and it should look just as if the texture exists somewhere behind the plane!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By the way, if you make the depth value in the Multiply <strong>positive<\/strong> (e.g. 0.1), the shift goes the other way, and the texture now looks like it <strong>pops out in front of<\/strong> the plane.<br>Just remember: &#8220;negative sinks in, positive pops out,&#8221; and you can choose whichever fits the look you&#8217;re going for!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac88ca&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac88ca\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/05_preview_parallax.gif\" alt=\"As the camera orbits, the logo shifts toward the plane's far edge and spills past it, so it looks like it pops out in front of the plane\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">With a positive depth, the logo looks like it pops out in front of the plane<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Question: Why Do These Nodes Alone Create &#8220;Depth&#8221;?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">So, we&#8217;ve successfully created a sense of depth. &#8230;But let&#8217;s stop and think for a moment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;Why does transforming the CameraVector into Tangent Space and adding it to the UVs make things look deep?&#8221; Could you explain that logic off the top of your head?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are plenty of tips online saying &#8220;wire it up like this and you get Parallax Offset!&#8221;, but if you don&#8217;t understand the mathematical mechanics of spaces behind &#8220;why it works,&#8221; you won&#8217;t be able to adapt it when you really need to.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac8b5a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac8b5a\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/06a_world_space.jpg\" alt=\"Camera vectors from the camera to the plane in World Space, with their values\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">World Space: the camera vectors seen along the world axes<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac902d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac902d\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/06b_tangent_space.jpg\" alt=\"The same camera vectors in Tangent Space, with values relative to the plane's surface\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Tangent Space: the camera vectors seen relative to the plane&#8217;s surface<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">As a practical example using this technique, I also made a &#8220;3D hologram cube.&#8221;<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad8004ac953c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad8004ac953c\" class=\"wp-block-image size-full wp-lightbox-container\"><img fetchpriority=\"high\" decoding=\"async\" width=\"600\" height=\"600\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/heyyocg.link\/wp-content\/uploads\/2026\/10\/ParallaxCube_600.gif\" alt=\"A rotating translucent hologram cube with a logo that appears to sit deep inside each face\" class=\"wp-image-1678\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When you build something practical like this, you need a few extra tricks to push the quality higher, and you&#8217;ll run into walls such as <strong>&#8220;the draw-order problem unique to translucent materials.&#8221;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you build a box and apply this material, the back faces get drawn on top of the front faces, and the 3D illusion instantly falls apart.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">[Full Understanding] For Those Who Want to Learn Everything, from Theory to Production-Ready Work!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;I don&#8217;t just want to wire up Parallax Offset nodes\u2014I want to really understand the theory of space transformation behind it (the Why)!&#8221;<br>&#8220;I want to solve the draw-order problem and finish a high-quality piece!&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If that sounds like you, my online course on Coloso covers Parallax Offset in depth, from the theory all the way to practical finishing!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udd3d Coloso course: Mastering the Mechanics of Advanced Niagara &amp; Material VFX<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\">(The content of this article is covered in detail in <strong>Lessons 25 and 26<\/strong> of the course.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the course, I carefully explain the math I skipped here\u2014&#8221;what&#8217;s actually happening when you transform from World Space to Tangent Space?&#8221;\u2014with diagrams.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ll also learn the full process of cleanly solving the translucent draw-order bug that appears when applying this to a cube, using advanced Custom Depth techniques, and polishing it into a final high-quality effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">For Those Who &#8220;Just Want the Finished Data, Fast!&#8221;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;I don&#8217;t have time to sit through a whole course!&#8221; &#8220;I just want the finished, fully bug-fixed hologram cube data to use in my own project right away!&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For anyone in that camp, I also sell the project data on its own on Gumroad.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udd3d Gumroad: Project Data<br><a href=\"https:\/\/heyyohanashima.gumroad.com\/l\/zrgie\">https:\/\/heyyohanashima.gumroad.com\/l\/zrgie<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you move past memorizing &#8220;how to connect the nodes&#8221; and understand the logic of &#8220;why it works,&#8221; material creation becomes so much more fun.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to take your range of expression up a notch, I hope you&#8217;ll unlock the secrets of this magic through the course or the project data!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever seen an effect\u2014like a cyberpunk hologram UI or an icy floor\u2014where &#8220;it&#8217;s just a single, paper-thin plane (polygon), yet when you peer into it, it looks like there&#8217;s space stretching far back inside&#8221;? You&#8217;ve probably wondered how that&#8217;s made. It&#8217;s not a 3D model with an actual box built deep inside\u2014it&#8217;s an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1676,"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=1674","footnotes":""},"categories":[20,17,31],"tags":[15,30],"class_list":["post-1680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ue4-tutorial","category-ue","category-ue4-tech-info","tag-vfx","tag-tech-info","en-US"],"modified_by":"yohanashima","_links":{"self":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1680","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=1680"}],"version-history":[{"count":3,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1680\/revisions"}],"predecessor-version":[{"id":1690,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/posts\/1680\/revisions\/1690"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media\/1676"}],"wp:attachment":[{"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/media?parent=1680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/categories?post=1680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heyyocg.link\/wp-json\/wp\/v2\/tags?post=1680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}