{"id":538,"date":"2026-03-09T23:53:40","date_gmt":"2026-03-09T23:53:40","guid":{"rendered":"https:\/\/sites.wsagames.com\/om3g24\/?p=538"},"modified":"2026-10-06T13:37:31","modified_gmt":"2026-10-06T13:37:31","slug":"unity-shaders","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/om3g24\/2026\/03\/09\/unity-shaders\/","title":{"rendered":"Unity Shader Basics"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline\"><mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\"><strong>Textures &amp; UVs<\/strong><\/mark><\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Textures can be made using all types of software: Ps, Affinity, Aesprite etc.<\/li>\n\n\n\n<li>UV co-ords are attached data that act as a mapping between the vertices of the mesh and texture position.\n<ul class=\"wp-block-list\">\n<li>Setting up the UVs on <mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\">custom objects<\/mark> has to be done <mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\">manually.<\/mark><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Adding <mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\">time nodes<\/mark> can help with animating shaders (e.g scrolling textures).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline\"><mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\"><strong>Transparency and Alpha<\/strong><\/mark><\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Because of the way transparent shaders are rendered, Unity has a rendering queue system for objects.\n<ul class=\"wp-block-list\">\n<li>Using code shaders requires a manually queue number.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Alpha (in RGBA) means transparency.<\/li>\n\n\n\n<li>Alpha clipping allows us to set an alpha threshold &#8211; any pixels below it are culled.<\/li>\n<\/ul>\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=\"397\" height=\"518\" data-id=\"559\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture1.jpg\" alt=\"\" class=\"wp-image-559\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture1.jpg 397w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture1-230x300.jpg 230w\" sizes=\"(max-width: 397px) 100vw, 397px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"366\" height=\"477\" data-id=\"558\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture2.jpg\" alt=\"\" class=\"wp-image-558\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture2.jpg 366w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture2-230x300.jpg 230w\" sizes=\"(max-width: 366px) 100vw, 366px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"371\" height=\"484\" data-id=\"557\" src=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture3.jpg\" alt=\"\" class=\"wp-image-557\" srcset=\"https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture3.jpg 371w, https:\/\/sites.wsagames.com\/om3g24\/wp-content\/uploads\/sites\/55\/2026\/03\/Picture3-230x300.jpg 230w\" sizes=\"(max-width: 371px) 100vw, 371px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline\"><mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\"><strong>Vertex Shaders<\/strong><\/mark><\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Meshes are made of vertices &#8211; each frame, Unity needs to read the vertex data and figure out where to show vertexes on the screen.<\/li>\n\n\n\n<li>In shadergraph, we have some control over these vertex shader stage, and can move them around.<\/li>\n\n\n\n<li><mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\"><strong>Tesselation <\/strong>is the ability to create new vertices between existing ones <\/mark>before running the vertex shader.\n<ul class=\"wp-block-list\">\n<li>To implement, tick &#8216;Tesselation&#8217; in the Graph settings, which adds 2 new output blocks.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\">Object space:<\/mark> abstract mesh data where vertex points are defined relative to the mesh origin point<\/li>\n\n\n\n<li><mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\">World space:<\/mark> where vertex positions are relative to the world origin.<\/li>\n\n\n\n<li><mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\">Clip space:<\/mark> where vertex positions are relative to the camera position.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline\"><mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\"><strong>Depth Buffer &amp; Silhouettes<\/strong><\/mark><\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Depth buffer (also known as the &#8216;Z-Buffer&#8217;) <mark style=\"background-color:#E2E2E2\" class=\"has-inline-color\">stores values registering how close objects are to the camera.<\/mark><\/li>\n\n\n\n<li><strong>Depth testing:<\/strong> when something is rendered, we calculate the depth value of what is being drawn and compare it with the buffer.\n<ul class=\"wp-block-list\">\n<li>If the object has a lower or equal value, the new object is drawn over the existing one.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>To create silhouettes, enable depth textures in the URP. Create a seperate shader, change the &#8216;surface&#8217; to transparent, and create a foreground and background colour(s).\n<ul class=\"wp-block-list\">\n<li>Add the &#8216;scene depth&#8217; node and set its sampling to Linear01. create a LERP block, attach the nodes and attach all to the Base Colour.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Textures &amp; UVs Transparency and Alpha Vertex Shaders Depth Buffer &amp; Silhouettes<\/p>\n","protected":false},"author":46,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"saved_in_kubio":false,"footnotes":""},"categories":[35,1,44],"tags":[],"class_list":["post-538","post","type-post","status-publish","format-standard","hentry","category-research-ideation","category-y2-parent","category-y2s2"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/posts\/538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/comments?post=538"}],"version-history":[{"count":6,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/posts\/538\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/posts\/538\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/media?parent=538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/categories?post=538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/om3g24\/wp-json\/wp\/v2\/tags?post=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}