{"id":633,"date":"2012-05-19T18:59:50","date_gmt":"2012-05-19T22:59:50","guid":{"rendered":"http:\/\/alexlemke.com\/wordpress\/?p=633"},"modified":"2012-06-04T02:56:25","modified_gmt":"2012-06-04T06:56:25","slug":"post-process-shaders","status":"publish","type":"post","link":"http:\/\/alexlemke.com\/wordpress\/post-process-shaders\/","title":{"rendered":"Post Process Shaders"},"content":{"rendered":"<p>Time for post process effects!<\/p>\n<p style=\"text-align: left;\">I started out with a simple black and white post process shader.<\/p>\n<p style=\"text-align: center;\">Basically it turns this<\/p>\n<p><a href=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlackAndWhiteBefore.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-635\" title=\"PPBlackAndWhiteBefore\" src=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlackAndWhiteBefore-300x245.png\" alt=\"\" width=\"300\" height=\"245\" srcset=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlackAndWhiteBefore-300x245.png 300w, http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlackAndWhiteBefore.png 406w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p style=\"text-align: center;\">into this<a href=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlackAndWhiteAfter.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-636\" title=\"PPBlackAndWhiteAfter\" src=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlackAndWhiteAfter-300x255.png\" alt=\"\" width=\"300\" height=\"255\" srcset=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlackAndWhiteAfter-300x255.png 300w, http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlackAndWhiteAfter.png 425w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>This is done by getting the sum of the rgb pixel values and dividing it by three, giving you the grey scale value of that color.<\/p>\n<p><a href=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPEdgeDetection_AND_celShading.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-638\" title=\"PPEdgeDetection_AND_celShading\" src=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPEdgeDetection_AND_celShading-300x228.png\" alt=\"\" width=\"300\" height=\"228\" srcset=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPEdgeDetection_AND_celShading-300x228.png 300w, http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPEdgeDetection_AND_celShading.png 721w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Next we have a sobel edge detection post process. \u00a0This simply gets the gradient of each pixel(or the change in color) from the surrounding nearby pixels. \u00a0If the gradient beats a threshold value then it&#8217;s an edge.\u00a0Also in this image is a basic cel shading effect which is done by rounding the calculated diffuse levels to certain thresholds.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlur.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-637\" title=\"PPBlur\" src=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlur-300x265.png\" alt=\"\" width=\"300\" height=\"265\" srcset=\"http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlur-300x265.png 300w, http:\/\/alexlemke.com\/wordpress\/wp-content\/uploads\/2012\/05\/PPBlur.png 789w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Last we have a blur post process effect. \u00a0This simply samples the surrounding pixels around the current pixel, scales them depending on their distance from the current pixel and then adds up the calculated values. \u00a0This shader is done in two passes, first blurring the horizontally then vertically. \u00a0All of these shaders were done in FxComposer.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.alexlemke.com\/Graphics\/Shaders\/HLSL\/PostProcess_BlackAndWhite_Shader.fx\">Post Process Black and White Effect<\/a><\/p>\n<p><a href=\"http:\/\/www.alexlemke.com\/Graphics\/Shaders\/HLSL\/PostProcess_EdgeDetection_Shader.fx\">Post Process Sobel Edge Detection<\/a><\/p>\n<p><a href=\"http:\/\/www.alexlemke.com\/Graphics\/Shaders\/HLSL\/CelShading_Shader.fx\">Cel Shading Effect<\/a><\/p>\n<p><a href=\"http:\/\/www.alexlemke.com\/Graphics\/Shaders\/HLSL\/PostProcess_Blur_Shader.fx\">Post Process Blur Shader<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Time for post process effects! I started out with a simple black and white post process shader. Basically it turns this into this &nbsp; This is done by getting the sum of the rgb pixel values and dividing it by three, giving you the grey scale value of that color. &nbsp; Next we have a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,23],"tags":[24,35,25],"class_list":["post-633","post","type-post","status-publish","format-standard","hentry","category-graphics","category-shaders","tag-hlsl","tag-post-process","tag-shader"],"_links":{"self":[{"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/posts\/633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/comments?post=633"}],"version-history":[{"count":15,"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/posts\/633\/revisions"}],"predecessor-version":[{"id":646,"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/posts\/633\/revisions\/646"}],"wp:attachment":[{"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/media?parent=633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/categories?post=633"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/alexlemke.com\/wordpress\/wp-json\/wp\/v2\/tags?post=633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}