{"id":954,"date":"2012-08-05T01:42:39","date_gmt":"2012-08-04T22:42:39","guid":{"rendered":"http:\/\/unitycoder.com\/blog\/?p=954"},"modified":"2014-06-15T02:52:01","modified_gmt":"2014-06-14T23:52:01","slug":"old-film-shader","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2012\/08\/05\/old-film-shader\/","title":{"rendered":"Old Film FX Shader"},"content":{"rendered":"<p><a title=\"start webplayer demo\" href=\"http:\/\/unitycoder.com\/upload\/demos\/OldFilmShader1\/\" target=\"_blank\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"955\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2012\/08\/05\/old-film-shader\/old_film_shader_unity\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2012\/08\/old_film_shadeR_unity.jpg?fit=680%2C455&amp;ssl=1\" data-orig-size=\"680,455\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"old_film_shadeR_unity\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2012\/08\/old_film_shadeR_unity.jpg?fit=300%2C200&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2012\/08\/old_film_shadeR_unity.jpg?fit=680%2C455&amp;ssl=1\" class=\"alignnone size-full wp-image-955\" title=\"old_film_shadeR_unity\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2012\/08\/old_film_shadeR_unity.jpg?resize=680%2C455\" alt=\"\" width=\"680\" height=\"455\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2012\/08\/old_film_shadeR_unity.jpg?w=680&amp;ssl=1 680w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2012\/08\/old_film_shadeR_unity.jpg?resize=300%2C200&amp;ssl=1 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><\/p>\n<p>Converted from webgl shaders (source at <a title=\"http:\/\/devmaster.net\/posts\/shader-effects-old-film\" href=\"http:\/\/devmaster.net\/posts\/shader-effects-old-film\" target=\"_blank\">devmaster.net<\/a>). This should be nice as a camera shader?<\/p>\n<p><strong>Adjustable parameters in shader:<\/strong><br \/>\n&#8211; SepiaValue, NoiseValue, ScratchValue, InnerVignetting, OuterVignetting, RandomValue, TimeLapse<\/p>\n<p>Original barn image: <a title=\"http:\/\/www.cgtextures.com\/texview.php?id=12170\" href=\"http:\/\/www.cgtextures.com\/texview.php?id=12170\" target=\"_blank\">http:\/\/www.cgtextures.com\/texview.php?id=12170<\/a><\/p>\n<p><strong>Webplayer:<\/strong><br \/>\n<a title=\"start webplayer demo\" href=\"http:\/\/unitycoder.com\/upload\/demos\/OldFilmShader1\/\" target=\"_blank\">http:\/\/unitycoder.com\/upload\/demos\/OldFilmShader1\/<\/a><\/p>\n<p><strong>Readme pdf:<\/strong><br \/>\n<a href=\"http:\/\/unitycoder.com\/blog\/wp-content\/uploads\/2012\/08\/README_OldFilmFx_Shader_web1.pdf\" target=\"_blank\">README_OldFilmFx_Shader_web<\/a><\/p>\n<p><strong>Purchase: (unity package)<br \/>\n<\/strong><\/p>\n<p>0.50 eur [digishop id=&#8221;15&#8243;]<\/p>\n<p>*unitypackage is saved with unity 3.5.6f4 (comes with example scene, see the ReadMe pdf above for more information)<br \/>\nOr use this,<\/p>\n<p><strong>Free source:<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\n\/\/ old film shader, converted to unity from : http:\/\/devmaster.net\/posts\/shader-effects-old-film\r\n\/\/ http:\/\/unitycoder.com\/blog\/2012\/08\/05\/old-film-shader\/\r\n\r\nShader &quot;UnityCoder\/OldFilm1&quot;\r\n{\r\nProperties {\r\n_MainTex (&quot;Base (RGB)&quot;, 2D) = &quot;white&quot; {}\r\n\r\nSepiaValue(&quot;SepiaValue&quot;, Float) = 0\r\nNoiseValue(&quot;NoiseValue&quot;, Float) = 0\r\nScratchValue(&quot;ScratchValue&quot;, Float) = 0\r\nInnerVignetting(&quot;InnerVignetting&quot;, Float) = 0\r\nOuterVignetting(&quot;OuterVignetting&quot;, Float) = 0\r\nRandomValue(&quot;RandomValue&quot;, Float) = 0\r\nTimeLapse(&quot;TimeLapse&quot;, Float) = 0\r\n\r\n}\r\nSubShader {\r\nTags { &quot;RenderType&quot;=&quot;Opaque&quot; }\r\nLOD 200\r\n\r\nCGPROGRAM\r\n#pragma target 3.0\r\n#pragma surface surf Lambert\r\n\r\nsampler2D _MainTex;\r\n\r\nuniform float SepiaValue;\r\nuniform float NoiseValue;\r\nuniform float ScratchValue;\r\nuniform float InnerVignetting;\r\nuniform float OuterVignetting;\r\nuniform float RandomValue;\r\nuniform float TimeLapse;\r\n\r\nstruct Input {\r\nfloat2 uv_MainTex;\r\n};\r\n\r\n\/\/\/ &lt;summary&gt;\r\n\/\/\/ Computes the overlay between the source and destination colours.\r\n\/\/\/ &lt;summary&gt;\r\nfloat3 Overlay (float3 src, float3 dst)\r\n{\r\n\/\/ if (dst &lt;= O) then: 2 * src * dst\r\n\/\/ if (dst &gt; O) then: 1 - 2 * (1 - dst) * (1 - src)\r\nreturn float3((dst.x &lt;= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x)),\r\n(dst.y &lt;= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y)),\r\n(dst.z &lt;= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z)));\r\n}\r\n\r\nfloat3 mod289(float3 x) { return x - floor(x * (1.0 \/ 289.0)) * 289.0; }\r\nfloat2 mod289(float2 x) { return x - floor(x * (1.0 \/ 289.0)) * 289.0; }\r\nfloat3 permute(float3 x) { return mod289(((x*34.0)+1.0)*x); }\r\n\r\nfloat snoise (float2 v)\r\n{\r\nconst float4 C = float4(0.211324865405187,\u00a0 \/\/ (3.0-sqrt(3.0))\/6.0\r\n0.366025403784439,\u00a0 \/\/ 0.5*(sqrt(3.0)-1.0)\r\n-0.577350269189626, \/\/ -1.0 + 2.0 * C.x\r\n0.024390243902439); \/\/ 1.0 \/ 41.0\r\n\r\n\/\/ First corner\r\nfloat2 i\u00a0 = floor(v + dot(v, C.yy) );\r\nfloat2 x0 = v -\u00a0\u00a0 i + dot(i, C.xx);\r\n\r\n\/\/ Other corners\r\nfloat2 i1;\r\ni1 = (x0.x &gt; x0.y) ? float2(1.0, 0.0) : float2(0.0, 1.0);\r\nfloat4 x12 = x0.xyxy + C.xxzz;\r\nx12.xy -= i1;\r\n\r\n\/\/ Permutations\r\ni = mod289(i); \/\/ Avoid truncation effects in permutation\r\nfloat3 p = permute( permute( i.y + float3(0.0, i1.y, 1.0 ))\r\n+ i.x + float3(0.0, i1.x, 1.0 ));\r\n\r\nfloat3 m = max(0.5 - float3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\r\nm = m*m ;\r\nm = m*m ;\r\n\r\n\/\/ Gradients: 41 points uniformly over a line, mapped onto a diamond.\r\n\/\/ The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)\r\n\r\nfloat3 x = 2.0 * frac(p * C.www) - 1.0;\r\nfloat3 h = abs(x) - 0.5;\r\nfloat3 ox = floor(x + 0.5);\r\nfloat3 a0 = x - ox;\r\n\r\n\/\/ Normalise gradients implicitly by scaling m\r\n\/\/ Approximation of: m *= inversesqrt( a0*a0 + h*h );\r\nm *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );\r\n\r\n\/\/ Compute final noise value at P\r\nfloat3 g;\r\ng.x\u00a0 = a0.x\u00a0 * x0.x\u00a0 + h.x\u00a0 * x0.y;\r\ng.yz = a0.yz * x12.xz + h.yz * x12.yw;\r\nreturn 130.0 * dot(m, g);\r\n}\r\n\r\nvoid surf (Input IN, inout SurfaceOutput o)\r\n{\r\n\r\n\/\/ Sepia RGB value\r\nfloat3 sepia = float3(112.0 \/ 255.0, 66.0 \/ 255.0, 20.0 \/ 255.0);\r\n\r\n\/\/ Step 1: Convert to grayscale\r\nfloat3 colour = tex2D(_MainTex,\u00a0 IN.uv_MainTex.xy).xyz;\r\nfloat gray = (colour.x + colour.y + colour.z) \/ 3.0;\r\nfloat3 grayscale = float3(gray);\r\n\r\n\/\/ Step 2: Appy sepia overlay\r\nfloat3 finalColour = Overlay(sepia, grayscale);\r\n\r\n\/\/ Step 3: Lerp final sepia colour\r\nfinalColour = grayscale + SepiaValue * (finalColour - grayscale);\r\n\r\n\/\/ Step 4: Add noise\r\nfloat noise = snoise(IN.uv_MainTex.xy * float2(1024.0 + RandomValue * 512.0, 1024.0 + RandomValue * 512.0)) * 0.5;\r\nfinalColour += noise * NoiseValue;\r\n\r\n\/\/ Optionally add noise as an overlay, simulating ISO on the camera\r\n\/\/vec3 noiseOverlay = Overlay(finalColour, vec3(noise));\r\n\/\/finalColour = finalColour + NoiseValue * (finalColour - noiseOverlay);\r\n\r\n\/\/ Step 5: Apply scratches\r\nif ( RandomValue &lt; ScratchValue )\r\n{\r\n\/\/ Pick a random spot to show scratches\r\nfloat dist = 1.0 \/ ScratchValue;\r\n\/\/RandomValue *= _Time.y*10;\r\nfloat d = distance(IN.uv_MainTex.xy, float2(RandomValue * dist, RandomValue * dist));\r\nif ( d &lt; 0.4 )\r\n{\r\n\/\/ Generate the scratch\r\nfloat xPeriod = 8.0;\r\nfloat yPeriod = 1.0;\r\nfloat pi = 3.141592;\r\nfloat phase = TimeLapse;\r\n\/\/\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0float phase = _Time.x*TimeLapse;\r\n\/\/\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0float phase = _Time.x;\r\nfloat turbulence = snoise(IN.uv_MainTex.xy * 2.5);\r\nfloat vScratch = 0.5 + (sin(((IN.uv_MainTex.x * xPeriod + IN.uv_MainTex.y * yPeriod + turbulence)) * pi + phase) * 0.5);\r\nvScratch = clamp((vScratch * 10000.0) + 0.35, 0.0, 1.0);\r\n\r\nfinalColour.xyz *= vScratch;\r\n}\r\n}\r\n\r\n\/\/ Step 6: Apply vignetting\r\n\/\/ Max distance from centre to corner is ~0.7. Scale that to 1.0.\r\nfloat d = distance(float2(0.5, 0.5), IN.uv_MainTex) * 1.414213;\r\nfloat vignetting = clamp((OuterVignetting - d) \/ (OuterVignetting - InnerVignetting), 0.0, 1.0);\r\nfinalColour.xyz *= vignetting;\r\n\r\n\/\/ Apply colour\r\n\/\/gl_FragColor.xyz = finalColour;\r\n\/\/gl_FragColor.w = 1.0;\r\n\r\n\/\/half4 c = tex2D (_MainTex, IN.uv_MainTex);\r\no.Albedo = finalColour;\r\no.Alpha = 1;\r\n}\r\nENDCG\r\n}\r\nFallBack &quot;Diffuse&quot;\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Converted from webgl shaders (source at devmaster.net). This should be nice as a camera shader? Adjustable parameters in shader: &#8211; SepiaValue, NoiseValue, ScratchValue, InnerVignetting, OuterVignetting, RandomValue, TimeLapse Original barn image: http:\/\/www.cgtextures.com\/texview.php?id=12170 Webplayer: http:\/\/unitycoder.com\/upload\/demos\/OldFilmShader1\/ Readme pdf: README_OldFilmFx_Shader_web Purchase: (unity package) 0.50 eur [digishop id=&#8221;15&#8243;] *unitypackage is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":955,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[485,4,3],"tags":[402,262,105,260,261,265,264,14,263],"class_list":["post-954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-assets","category-demos","category-unity3d","tag-asset","tag-film","tag-fx","tag-noise","tag-old","tag-old-film","tag-random","tag-shader","tag-tv"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2012\/08\/old_film_shadeR_unity.jpg?fit=680%2C455&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-fo","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=954"}],"version-history":[{"count":12,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/954\/revisions"}],"predecessor-version":[{"id":3006,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/954\/revisions\/3006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/955"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}