{"id":159,"date":"2014-11-01T10:50:49","date_gmt":"2014-11-01T18:50:49","guid":{"rendered":"http:\/\/neonstruct.com\/blog\/?p=159"},"modified":"2014-11-01T10:50:49","modified_gmt":"2014-11-01T18:50:49","slug":"sequences-and-shaders","status":"publish","type":"post","link":"https:\/\/neonstruct.com\/blog\/?p=159","title":{"rendered":"Sequences and Shaders"},"content":{"rendered":"<p style=\"text-align: justify;\"><iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/mZ8oxc-teME\" width=\"474\" height=\"267\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p style=\"text-align: justify;\">I started building a filmic title sequence for <em>NEON STRUCT<\/em> this week. My options for implementing it were somewhat constrained. I don&#8217;t have any support for Flash or Bink videos, so I had to build it all in-engine. It&#8217;s also a short sequence, so I didn&#8217;t want to spend too much time on it.<\/p>\n<p style=\"text-align: justify;\">I wanted this sequence to contain visual elements suggestive of an electronic surveillance system searching for Jillian, the player character. I first considered a <em>Casino Royale<\/em>-esque treatment with swirling vector art of eyes and ears and camera apertures and drones, but I wasn&#8217;t sure I could execute that concept particularly well. Instead, I wanted to take a programmatic approach and let the code turn a small amount of content into something bigger.<\/p>\n<p style=\"text-align: justify;\">The treatment I chose, as seen in the video above, is a sort of glowing, pixelated crawl that leaves behind a faint trace of Jillian&#8217;s face. It is implemented with just 4 textures, <a href=\"http:\/\/pastebin.com\/raw.php?i=fV5DDPJt\" target=\"_blank\">a simple shader<\/a>, and a short piece of code that drives the control values in the shader during the sequence.<\/p>\n<p style=\"text-align: justify;\">The fundamental concept of animating the crawl in the shader works by clamping a gradient texture to a small range of values that shifts over time.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/imgur.com\/If1aYJa\"><img title=\"source: imgur.com\" src=\"http:\/\/i.imgur.com\/If1aYJa.png\" alt=\"\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">For example, this is the gradient I use for the pink and blue diagonal wipe at the start of the video. By authoring it as a gradient from dark in the top-left to bright in the bottom-right, the pixels will crawl in that direction. I added some noise so that some pixels will light up earlier or later than their neighbors. And because I wanted a pixelated look, I started with a small gradient texture and blew it up to full size without interpolation, leaving all those big chunky pixels.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/imgur.com\/KDRBOvO\"><img title=\"source: imgur.com\" src=\"http:\/\/i.imgur.com\/KDRBOvO.png\" alt=\"\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Then the shader multiplies the value by a grid mask to separate the big pixels from each other&#8230;<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/imgur.com\/jOJPSo8\"><img title=\"source: imgur.com\" src=\"http:\/\/i.imgur.com\/jOJPSo8.png\" alt=\"\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">&#8230;and finally multiplies by a color texture to colorize the result.<\/p>\n<p style=\"text-align: justify;\">In practice, the gradient texture and mask are packed into the red and green channels of a full color texture, and a second gradient\/mask pair is packed into the blue and alpha channels to control the secondary crawl (the trail of longer-burning pixels that reveal Jillian&#8217;s face). The parameters for the gradient selection on each of these channels are driven by a small piece of game code.<\/p>\n<p style=\"text-align: justify;\">When the sequence switches from the pink and blue crawl to the green radar crawl, it is simply using a different pair of textures; and I can easily implement more patterns just by authoring a couple of simple textures.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I started building a filmic title sequence for NEON STRUCT this week. My options for implementing it were somewhat constrained. I don&#8217;t have any support for Flash or Bink videos, so I had to build it all in-engine. It&#8217;s also a short sequence, so I didn&#8217;t want to spend too much time on it. I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/159"}],"collection":[{"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=159"}],"version-history":[{"count":7,"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/159\/revisions"}],"predecessor-version":[{"id":166,"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/159\/revisions\/166"}],"wp:attachment":[{"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/neonstruct.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}