{"id":85,"date":"2019-12-22T20:58:39","date_gmt":"2019-12-22T20:58:39","guid":{"rendered":"http:\/\/philippseifried.com\/blog\/?p=85"},"modified":"2019-12-22T20:59:27","modified_gmt":"2019-12-22T20:59:27","slug":"steel-circus-rendering-the-floor","status":"publish","type":"post","link":"https:\/\/philippseifried.com\/blog\/2019\/12\/steel-circus-rendering-the-floor\/","title":{"rendered":"Steel Circus: Rendering The Floor"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"http:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_views-1024x508.jpg\" alt=\"\" class=\"wp-image-86\" srcset=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_views-1024x508.jpg 1024w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_views-300x149.jpg 300w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_views-768x381.jpg 768w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_views-1536x762.jpg 1536w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_views-788x391.jpg 788w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_views.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/playsteelcircus.com\/\">Steel Circus<\/a>\u00a0is a futuristic ball sport with MOBA or \u201cHero Shooter\u201d elements. Each champion has two unique skills, such as placing defensive walls or stunning enemies. <\/p>\n\n\n\n<p>The arena floor is one of the most prominent assets in the game &#8211; a giant display that shows player UIs, skills&#8217; areas of effect, and things like goal animations or customizable spraytags. We really like how it ties elements into the game world that would traditionally be presented as UI overlays.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large wp-caption-text\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"561\" src=\"http:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_intro-1024x561.jpg\" alt=\"\" class=\"wp-image-87\" srcset=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_intro-1024x561.jpg 1024w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_intro-300x164.jpg 300w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_intro-768x421.jpg 768w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_intro-1536x841.jpg 1536w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_intro-788x432.jpg 788w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_intro.jpg 1917w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Players spawning from inside the floor at the beginning of a match.<\/figcaption><\/figure>\n\n\n\n<p>There&#8217;s quite a few things going on in rendering the floor, notably raymarched light scattering under its surface, and indirect lighting of the characters. In this post, I&#8217;ll break down all the different parts that went into it:<\/p>\n\n\n\n<!--more-->\n\n\n\n<style id=\"wp_carousel_dynamic_css91\">#sp-wp-carousel-free-id-91 .wpcp-swiper-dots {margin: 40px 0px 0px 0px;}.wpcp-wrapper-91 .swiper-wrapper .swiper-slide-kenburn, .wpcp-wrapper-91 .swiper-wrapper, .wpcp-wrapper-91 .wpcpro-row{align-items: center;}#sp-wp-carousel-free-id-91 .wpcp-single-item {box-shadow: 0px 0px 0px 0px #dddddd;transition: all .3s;margin: 0px;}#sp-wp-carousel-free-id-91.swiper-flip .wpcp-single-item{margin: 0!important;}#sp-wp-carousel-free-id-91 .wpcp-single-item:hover {box-shadow: 0px 0px 0px 0px #dddddd;}#sp-wp-carousel-free-id-91.sp-wpcp-91 .wpcp-single-item {border: 1px solid #dddddd;}#sp-wp-carousel-free-id-91.sp-wpcp-91 .swiper-button-prev,#sp-wp-carousel-free-id-91.sp-wpcp-91 .swiper-button-next,#sp-wp-carousel-free-id-91.sp-wpcp-91 .swiper-button-prev:hover,#sp-wp-carousel-free-id-91.sp-wpcp-91 .swiper-button-next:hover {background: none;border: none;font-size: 30px;}#sp-wp-carousel-free-id-91.sp-wpcp-91 .swiper-button-prev i,#sp-wp-carousel-free-id-91.sp-wpcp-91 .swiper-button-next i {color: #aaa;}#sp-wp-carousel-free-id-91.sp-wpcp-91 .swiper-button-prev i:hover,#sp-wp-carousel-free-id-91.sp-wpcp-91 .swiper-button-next i:hover {color: #52b3d9;}#sp-wp-carousel-free-id-91.sp-wpcp-91 .wpcp-swiper-dots .swiper-pagination-bullet {background-color: #cccccc;}#sp-wp-carousel-free-id-91.sp-wpcp-91 .wpcp-swiper-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #52b3d9;} #sp-wp-carousel-free-id-91.sp-wpcp-91.wpcp-image-carousel .wpcp-single-item:hover img, #sp-wp-carousel-free-id-91.sp-wpcp-91.wpcp-post-carousel .wpcp-single-item:hover img, #sp-wp-carousel-free-id-91.sp-wpcp-91.wpcp-product-carousel .wpcp-single-item:hover img{-webkit-transform: scale(1.2);-moz-transform: scale(1.2);transform: scale(1.2);}#sp-wp-carousel-free-id-91 .wpcpro-row>[class*=\"wpcpro-col-\"] { padding: 0 10px; padding-bottom: 20px;} #sp-wp-carousel-free-id-91 .swiper-slide .single-item-fade:not(:last-child) { margin-right: 20px;}@media (min-width: 480px) { .wpcpro-row .wpcpro-col-sm-1 { flex: 0 0 100%; max-width: 100%; } .wpcpro-row .wpcpro-col-sm-2 { flex: 0 0 50%; max-width: 50%; } .wpcpro-row .wpcpro-col-sm-2-5 { flex: 0 0 75%; max-width: 75%; } .wpcpro-row .wpcpro-col-sm-3 { flex: 0 0 33.333%; max-width: 33.333%; } .wpcpro-row .wpcpro-col-sm-4 { flex: 0 0 25%; max-width: 25%; } .wpcpro-row .wpcpro-col-sm-5 { flex: 0 0 20%; max-width: 20%; } .wpcpro-row .wpcpro-col-sm-6 { flex: 0 0 16.66666666666667%; max-width: 16.66666666666667%; } .wpcpro-row .wpcpro-col-sm-7 { flex: 0 0 14.28571428%; max-width: 14.28571428%; } .wpcpro-row .wpcpro-col-sm-8 { flex: 0 0 12.5%; max-width: 12.5%; } } @media (max-width: 480px) { .wpcpro-row .wpcpro-col-xs-1 { flex: 0 0 100%; max-width: 100%; } .wpcpro-row .wpcpro-col-xs-2 { flex: 0 0 50%; max-width: 50%; } .wpcpro-row .wpcpro-col-xs-3 { flex: 0 0 33.222%; max-width: 33.222%; } .wpcpro-row .wpcpro-col-xs-4 { flex: 0 0 25%; max-width: 25%; } .wpcpro-row .wpcpro-col-xs-5 { flex: 0 0 20%; max-width: 20%; } .wpcpro-row .wpcpro-col-xs-6 { flex: 0 0 16.6667%; max-width: 16.6667%; } .wpcpro-row .wpcpro-col-xs-7 { flex: 0 0 14.28571428%; max-width: 14.28571428%; } .wpcpro-row .wpcpro-col-xs-8 { flex: 0 0 12.5%; max-width: 12.5%; } } @media (min-width: 736px) { .wpcpro-row .wpcpro-col-md-1 { flex: 0 0 100%; max-width: 100%; } .wpcpro-row .wpcpro-col-md-2 { flex: 0 0 50%; max-width: 50%; } .wpcpro-row .wpcpro-col-md-2-5 { flex: 0 0 75%; max-width: 75%; } .wpcpro-row .wpcpro-col-md-3 { flex: 0 0 33.333%; max-width: 33.333%; } .wpcpro-row .wpcpro-col-md-4 { flex: 0 0 25%; max-width: 25%; } .wpcpro-row .wpcpro-col-md-5 { flex: 0 0 20%; max-width: 20%; } .wpcpro-row .wpcpro-col-md-6 { flex: 0 0 16.66666666666667%; max-width: 16.66666666666667%; } .wpcpro-row .wpcpro-col-md-7 { flex: 0 0 14.28571428%; max-width: 14.28571428%; } .wpcpro-row .wpcpro-col-md-8 { flex: 0 0 12.5%; max-width: 12.5%; } } @media (min-width: 980px) { .wpcpro-row .wpcpro-col-lg-1 { flex: 0 0 100%; max-width: 100%; } .wpcpro-row .wpcpro-col-lg-2 { flex: 0 0 50%; max-width: 50%; } .wpcpro-row .wpcpro-col-lg-3 { flex: 0 0 33.222%; max-width: 33.222%; } .wpcpro-row .wpcpro-col-lg-4 { flex: 0 0 25%; max-width: 25%; } .wpcpro-row .wpcpro-col-lg-5 { flex: 0 0 20%; max-width: 20%; } .wpcpro-row .wpcpro-col-lg-6 { flex: 0 0 16.6667%; max-width: 16.6667%; } .wpcpro-row .wpcpro-col-lg-7 { flex: 0 0 14.28571428%; max-width: 14.28571428%; } .wpcpro-row .wpcpro-col-lg-8 { flex: 0 0 12.5%; max-width: 12.5%; } } @media (min-width: 1200px) { .wpcpro-row .wpcpro-col-xl-1 { flex: 0 0 100%; max-width: 100%; } .wpcpro-row .wpcpro-col-xl-2 { flex: 0 0 50%; max-width: 50%; } .wpcpro-row .wpcpro-col-xl-3 { flex: 0 0 33.22222222%; max-width: 33.22222222%; } .wpcpro-row .wpcpro-col-xl-4 { flex: 0 0 25%; max-width: 25%; } .wpcpro-row .wpcpro-col-xl-5 { flex: 0 0 20%; max-width: 20%; } .wpcpro-row .wpcpro-col-xl-6 { flex: 0 0 16.66667%; max-width: 16.66667%; } .wpcpro-row .wpcpro-col-xl-7 { flex: 0 0 14.28571428%; max-width: 14.28571428%; } .wpcpro-row .wpcpro-col-xl-8 { flex: 0 0 12.5%; max-width: 12.5%; } }<\/style><div class=\"wpcp-carousel-wrapper wpcp-wrapper-91\">\n\t\t<div class=\"wpcp-carousel-content-wrapper\">\n\t<div id=\"sp-wp-carousel-free-id-91\" class=\"wpcp-carousel-section sp-wpcp-91  nav-vertical-center wpcp-image-carousel wpcp-standard\" data-swiper='{ &quot;accessibility&quot;:true, &quot;spaceBetween&quot;:20, &quot;arrows&quot;:true, &quot;freeMode&quot;: false, &quot;autoplay&quot;:false, &quot;effect&quot;: &quot;slide&quot;, &quot;centerMode&quot;: false, &quot;autoplaySpeed&quot;:3000, &quot;dots&quot;:true, &quot;infinite&quot;:true, &quot;speed&quot;:600, &quot;pauseOnHover&quot;:true,\n\t\t\t&quot;slidesToShow&quot;:{&quot;lg_desktop&quot;:1, &quot;desktop&quot;: 1, &quot;laptop&quot;: 1, &quot;tablet&quot;: 1, &quot;mobile&quot;: 1}, &quot;responsive&quot;:{&quot;desktop&quot;:1200, &quot;laptop&quot;: 980, &quot;tablet&quot;: 736, &quot;mobile&quot;: 480}, &quot;rtl&quot;:false, &quot;lazyLoad&quot;: &quot;false&quot;, &quot;swipe&quot;: true, &quot;draggable&quot;: true, &quot;swipeToSlide&quot;:true }' dir=\"ltr\">\n\t\t<div class=\"swiper-wrapper\">\n\t\t<div class=\"swiper-slide\">\n\t<div class=\"wpcp-single-item\">\n\t\t\t<a class=\"wcp-light-box\" data-buttons='[\"close\"]' data-wpc_url='https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_01_composite.jpg' href=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_01_composite.jpg\" data-fancybox=\"wpcp_view\">\n\t\t<figure>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"skip-lazy\" src=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_01_composite.jpg\" alt=\"floor_breakdown_01_composite\" width=\"1918\" height=\"1080\">\t\t<\/figure>\n\t<\/a>\n\t\t<\/div>\n<\/div>\n\t<div class=\"swiper-slide\">\n\t<div class=\"wpcp-single-item\">\n\t\t\t<a class=\"wcp-light-box\" data-buttons='[\"close\"]' data-wpc_url='https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_02_basic_surface.jpg' href=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_02_basic_surface.jpg\" data-fancybox=\"wpcp_view\">\n\t\t<figure>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"skip-lazy\" src=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_02_basic_surface.jpg\" alt=\"floor_breakdown_02_basic_surface\" width=\"1918\" height=\"1080\">\t\t<\/figure>\n\t<\/a>\n\t\t<\/div>\n<\/div>\n\t<div class=\"swiper-slide\">\n\t<div class=\"wpcp-single-item\">\n\t\t\t<a class=\"wcp-light-box\" data-buttons='[\"close\"]' data-wpc_url='https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_03_reflections.jpg' href=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_03_reflections.jpg\" data-fancybox=\"wpcp_view\">\n\t\t<figure>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"skip-lazy\" src=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_03_reflections.jpg\" alt=\"floor_breakdown_03_reflections\" width=\"1918\" height=\"1080\">\t\t<\/figure>\n\t<\/a>\n\t\t<\/div>\n<\/div>\n\t<div class=\"swiper-slide\">\n\t<div class=\"wpcp-single-item\">\n\t\t\t<a class=\"wcp-light-box\" data-buttons='[\"close\"]' data-wpc_url='https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_04_zblur.jpg' href=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_04_zblur.jpg\" data-fancybox=\"wpcp_view\">\n\t\t<figure>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"skip-lazy\" src=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_04_zblur.jpg\" alt=\"floor_breakdown_04_zblur\" width=\"1918\" height=\"1080\">\t\t<\/figure>\n\t<\/a>\n\t\t<\/div>\n<\/div>\n\t<div class=\"swiper-slide\">\n\t<div class=\"wpcp-single-item\">\n\t\t\t<a class=\"wcp-light-box\" data-buttons='[\"close\"]' data-wpc_url='https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_05_refraction.jpg' href=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_05_refraction.jpg\" data-fancybox=\"wpcp_view\">\n\t\t<figure>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"skip-lazy\" src=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_05_refraction.jpg\" alt=\"floor_breakdown_05_refraction\" width=\"1918\" height=\"1080\">\t\t<\/figure>\n\t<\/a>\n\t\t<\/div>\n<\/div>\n\t<div class=\"swiper-slide\">\n\t<div class=\"wpcp-single-item\">\n\t\t\t<a class=\"wcp-light-box\" data-buttons='[\"close\"]' data-wpc_url='https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_06_raymarch.jpg' href=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_06_raymarch.jpg\" data-fancybox=\"wpcp_view\">\n\t\t<figure>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"skip-lazy\" src=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_06_raymarch.jpg\" alt=\"floor_breakdown_06_raymarch\" width=\"1918\" height=\"1080\">\t\t<\/figure>\n\t<\/a>\n\t\t<\/div>\n<\/div>\n\t<div class=\"swiper-slide\">\n\t<div class=\"wpcp-single-item\">\n\t\t\t<a class=\"wcp-light-box\" data-buttons='[\"close\"]' data-wpc_url='https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_07_lcd.jpg' href=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_07_lcd.jpg\" data-fancybox=\"wpcp_view\">\n\t\t<figure>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"skip-lazy\" src=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_07_lcd.jpg\" alt=\"floor_breakdown_07_lcd\" width=\"1918\" height=\"1080\">\t\t<\/figure>\n\t<\/a>\n\t\t<\/div>\n<\/div>\n\t<div class=\"swiper-slide\">\n\t<div class=\"wpcp-single-item\">\n\t\t\t<a class=\"wcp-light-box\" data-buttons='[\"close\"]' data-wpc_url='https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_08_indirect.jpg' href=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_08_indirect.jpg\" data-fancybox=\"wpcp_view\">\n\t\t<figure>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"skip-lazy\" src=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_08_indirect.jpg\" alt=\"floor_breakdown_08_indirect\" width=\"1918\" height=\"1080\">\t\t<\/figure>\n\t<\/a>\n\t\t<\/div>\n<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<div class=\"wpcp-swiper-dots swiper-pagination\"><\/div>\n\t\t\t\t<!-- If we need navigation buttons -->\n\t\t\t\t\t<div class=\"wpcp-prev-button swiper-button-prev\"><i class=\"fa fa-angle-left\"><\/i><\/div>\n\t\t\t<div class=\"wpcp-next-button swiper-button-next\"><i class=\"fa fa-angle-right\"><\/i><\/div>\n\t\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n\n<p class=\"wp-caption-text\">A piece-by-piece breakdown of how we render the floor.<\/p>\n\n\n\n<p>The floor&#8217;s reflections are just planar reflections, rendered with a flipped camera and distorted by the floor&#8217;s normal map. To reduce noisy details, we do a z-based blur that blurs pixels the farther away they are from the surface.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large wp-caption-text\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"http:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_refl-1024x576.jpg\" alt=\"\" class=\"wp-image-101\" srcset=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_refl-1024x576.jpg 1024w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_refl-300x169.jpg 300w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_refl-768x432.jpg 768w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_refl-1536x864.jpg 1536w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_refl-788x443.jpg 788w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_refl.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Floor reflections without (left) and with (right) z-Blur. Since the floor is flat, we can easily render these reflections with a flipped camera and a skewed projection matrix.<\/figcaption><\/figure>\n\n\n\n<p>The floor&#8217;s contents (contained in a render texture) are rendered as if they were emitted from about ten inches below the surface. We refract view rays as they enter the surface and then raymarch to the bottom, simulating a rough approximation of the light scattering inside. As the camera gets close to the floor, we also mask out the contents with a procedural LCD grid. All of this is done in the floor&#8217;s shader.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large wp-caption-text\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"433\" src=\"http:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_scattering_3_views-1024x433.jpg\" alt=\"\" class=\"wp-image-102\" srcset=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_scattering_3_views-1024x433.jpg 1024w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_scattering_3_views-300x127.jpg 300w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_scattering_3_views-768x325.jpg 768w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_scattering_3_views-1536x650.jpg 1536w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_scattering_3_views-2048x866.jpg 2048w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_breakdown_scattering_3_views-788x333.jpg 788w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Floor with refractions (left), raymarched scatter (middle) and LCD mask (right)<\/figcaption><\/figure>\n\n\n\n<p>Here&#8217;s an illustration of our light scattering &#8220;simulation&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"310\" src=\"http:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_scattering-1024x310.jpg\" alt=\"\" class=\"wp-image-103\" srcset=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_scattering-1024x310.jpg 1024w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_scattering-300x91.jpg 300w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_scattering-768x232.jpg 768w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_scattering-1536x465.jpg 1536w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_scattering-788x238.jpg 788w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_scattering.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Since the floor is flat and of fixed size, we can also easily use its contents to do some indirect lighting on objects on top of it. This indirect lighting is part of our standard shader that we use for objects in the arena:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"http:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_indirect-1024x547.jpg\" alt=\"\" class=\"wp-image-104\" srcset=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_indirect-1024x547.jpg 1024w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_indirect-300x160.jpg 300w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_indirect-768x410.jpg 768w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_indirect-788x421.jpg 788w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_indirect.jpg 1300w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here&#8217;s an old shot of our setup from inside the Unity editor. Note that we&#8217;re not only rendering the floor&#8217;s emissive texture in realtime, but also its normal map (and originally, to the right, a dirt map, but we&#8217;ve removed that feature since). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" src=\"http:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_unity_editor-1024x514.jpg\" alt=\"\" class=\"wp-image-106\" srcset=\"https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_unity_editor-1024x514.jpg 1024w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_unity_editor-300x151.jpg 300w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_unity_editor-768x386.jpg 768w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_unity_editor-788x396.jpg 788w, https:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_unity_editor.jpg 1432w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Rendering the normal map in realtime allows us to do all kinds of fancy effects that interact great with the floor&#8217;s reflections and refractions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large wp-caption-text\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"273\" src=\"http:\/\/philippseifried.com\/blog\/wp-content\/uploads\/2019\/12\/floor_spawn.gif\" alt=\"\" class=\"wp-image-107\"\/><figcaption>An old placeholder asset for health pickups we spawn in the game. We use the stencil buffer to cut a hole in the floor and the real-time normal map to create waves in the floor that interact with the light-scattering and reflection features.<\/figcaption><\/figure>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Steel Circus\u00a0is a futuristic ball sport with MOBA or \u201cHero Shooter\u201d elements. Each champion has two unique skills, such as placing defensive walls or stunning enemies. The arena floor is one of the most prominent assets in the game &#8211; a giant display that shows player UIs, skills&#8217; areas of effect, and things like goal [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[5,4,6],"class_list":["post-85","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-rendering","tag-steel-circus","tag-vfx"],"_links":{"self":[{"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/posts\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":9,"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/posts\/85\/revisions"}],"predecessor-version":[{"id":111,"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/posts\/85\/revisions\/111"}],"wp:attachment":[{"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/categories?post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philippseifried.com\/blog\/wp-json\/wp\/v2\/tags?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}