{"id":342,"date":"2025-07-20T08:55:29","date_gmt":"2025-07-20T08:55:29","guid":{"rendered":"https:\/\/www.itgoesboink.com\/home\/?page_id=342"},"modified":"2025-07-21T22:03:17","modified_gmt":"2025-07-21T22:03:17","slug":"compositor","status":"publish","type":"page","link":"https:\/\/www.itgoesboink.com\/home\/compositor\/","title":{"rendered":"Compositor"},"content":{"rendered":"\n<p>Procedural Image Generation and Compositing Tool for Unity<\/p>\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 loading=\"lazy\" title=\"Layered Noise Generation with Effects\" width=\"525\" height=\"295\" src=\"https:\/\/www.youtube.com\/embed\/W0ZnKH1OwI4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Animation is unfortunately not built into Compositor, but that could change&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Originally designed for creating terrain height-maps, Compositor is a highly-decoupled, node-based image compositing tool which can work both within the Unity Editor, as well as at runtime.  Its compositing workflow is modeled after Layer palettes from applications such as Photoshop, however it&#8217;s not (currently) a painting tool.  Compositor is exactly that: an image layer compositor.<\/p>\n\n\n\n<p>The power of the system lies in its extensibility.  Authors can create custom layers, utilize both GPU and CPU operations, inject shaders and materials, and for some properties &#8211; use other nodes as inputs.  Compositor is made to be non-destructive, so source imagery provided by any given node remains intact during composition.  An Editor-Level Cache system is used to avoid unnecessary rendering triggered by Unity&#8217;s Editor events.<\/p>\n\n\n\n<p>Compositor currently offers the following Layer\/Node types:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Noise Generator<\/li>\n\n\n\n<li>Vignette<\/li>\n\n\n\n<li>Channel Curves<\/li>\n\n\n\n<li>Image Asset Input<\/li>\n\n\n\n<li>Gradient Map<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\"><div class=\"wp-block-media-text__content\">\n<p>An example of a Gradient Map Adjustment Layer being applied to a Noise Layer composition.  The combination of Unity&#8217;s Gradient UI,  and Compositor&#8217;s Blend Modes make it easy to create striking, beautiful imagery.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"660\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-20-at-1.53.06-AM-1024x660.png\" alt=\"\" class=\"wp-image-338 size-full\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-20-at-1.53.06-AM-1024x660.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-20-at-1.53.06-AM-300x193.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-20-at-1.53.06-AM-768x495.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-20-at-1.53.06-AM-1536x989.png 1536w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-20-at-1.53.06-AM-2048x1319.png 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure><\/div>\n\n\n\n<p>Below are a couple of simple noise compositions:<\/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 loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"850\" data-id=\"335\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Layered_noise-1.jpg\" alt=\"\" class=\"wp-image-335\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Layered_noise-1.jpg 851w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Layered_noise-1-300x300.jpg 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Layered_noise-1-150x150.jpg 150w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Layered_noise-1-768x767.jpg 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Layered_noise-1-100x100.jpg 100w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"256\" height=\"253\" data-id=\"242\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2023-06-10-at-11.45.12-AM.png\" alt=\"\" class=\"wp-image-242\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2023-06-10-at-11.45.12-AM.png 256w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2023-06-10-at-11.45.12-AM-100x100.png 100w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Compositor&#8217;s user interface is currently being completely overhauled.  However, below you can see it in action.<\/p>\n\n\n\n<p>On the far left, the larger image is the final composition.<\/p>\n\n\n\n<p>Of the smaller images, from left to right, are the layers, top to bottom, being composited.<\/p>\n\n\n\n<p>So the far right image is the base layer, then the stack composites toward the left into the final image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"647\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.31.35-1024x647.jpeg\" alt=\"\" class=\"wp-image-464\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.31.35-1024x647.jpeg 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.31.35-300x190.jpeg 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.31.35-768x485.jpeg 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.31.35.jpeg 1280w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.25.25-1024x638.jpeg\" alt=\"\" class=\"wp-image-463\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.25.25-1024x638.jpeg 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.25.25-300x187.jpeg 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.25.25-768x479.jpeg 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-20-at-22.25.25.jpeg 1280w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>I&#8217;m looking forward to updating this page once the new UI is coming along.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Procedural Image Generation and Compositing Tool for Unity Originally designed for creating terrain height-maps, Compositor is a highly-decoupled, node-based image compositing tool which can work both within the Unity Editor, as well as at runtime. Its compositing workflow is modeled after Layer palettes from applications such as Photoshop, however it&#8217;s not (currently) a painting tool. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.itgoesboink.com\/home\/compositor\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Compositor&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-342","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/pages\/342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/comments?post=342"}],"version-history":[{"count":5,"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/pages\/342\/revisions"}],"predecessor-version":[{"id":481,"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/pages\/342\/revisions\/481"}],"wp:attachment":[{"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/media?parent=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}