Monday, June 3, 2013

Getting Started With Custom Post-Processing Shaders in Unity3D


I had some trouble learning about how to make my own post-processing shaders in Unity3D, so here is a simple guide to help people get started.

Note: Post-processing shaders require the "RenderTexture" function that is only avaliable in Unity Pro. Even shader code like "GrabPass" (which lets you use the previous render pass as a texture) requires you to have Unity Pro.



Learning the Basics


The first step is to learn about the Cg programming language and the Unity shader architecture. While you could write your shaders using OpenGL instead of Cg, Unity recommends writing shaders in Cg for compatibility problems. Also, almost all shader examples are written in Cg.

Cg Tutorial:  http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter01.html
Unity Shader Referencehttp://docs.unity3d.com/Documentation/Components/SL-Reference.html


Note: The Cg tutorial contains a lot of basic computer graphics knowledge that is good for review. However, you don't need to read about "compiling under different profiles" because Unity handles that internally. For Unity Shader Reference, the most important topics are ShaderLab Syntax, Writing Surface Shaders, and Writing Vertex and Fragment Shaders.



Writing Your First Shader


After going through those tutorials, it's time to write some post-processing shaders!

But first, how does Unity call post-processing shaders?

In Unity, post-processing shaders are different from regular shaders because there is no model to stick a material on. Of course, you could create a plane and stick your post-processing shader on that, but there is a better way to do this.

Turns out that the Camera class has a function dedicated to post-processing, called OnRenderImage. The Camera class will automatically call OnRenderImage, so you just have to fill it out like you do with Update or Start.

In that function, you should use the Graphics.Bilt function with a material. The Graphics.Bilt function will render the source texture using your material (a material is just a shader and the values passed in to it), and save it to your dest texture.

So there should be a script on your camera that does something like this:

// Called by the camera to apply the image effect
void OnRenderImage (RenderTexture source, RenderTexture destination){

 //mat is the material containing your shader
 Graphics.Blit(source,destination,mat);
}
Note that in this code, we never explicitly tell the material (and hence the shader) to use the texture in the "source" variable (which contains the rendered image of the scene) as input. This is because Graphics.Bilt will automatically copy the "source" texture to the material's main texture (or _MainTex in the shader code).

After that, we need code for the actual shader. Below is a simple grayscale post-processing shader. The vertex shader simply transform the vertex position and texture coordinate and passes them along. The fragment shader uses the texture coordinates to get the color of the current render (which is stored in _MainTex) and finds the grayscale color.

Shader "Custom/GrayScale" {
Properties {
 _MainTex ("", 2D) = "white" {}
}

SubShader {

ZTest Always Cull Off ZWrite Off Fog { Mode Off } //Rendering settings

 Pass{
  CGPROGRAM
  #pragma vertex vert
  #pragma fragment frag
  #include "UnityCG.cginc" 
  //we include "UnityCG.cginc" to use the appdata_img struct
   
  struct v2f {
   float4 pos : POSITION;
   half2 uv : TEXCOORD0;
  };
  
  //Our Vertex Shader 
  v2f vert (appdata_img v){
   v2f o;
   o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
   o.uv = MultiplyUV (UNITY_MATRIX_TEXTURE0, v.texcoord.xy);
   return o; 
  }
   
  sampler2D _MainTex; //Reference in Pass is necessary to let us use this variable in shaders
   
  //Our Fragment Shader
  fixed4 frag (v2f i) : COLOR{
   fixed4 orgCol = tex2D(_MainTex, i.uv); //Get the orginal rendered color 
    
   //Make changes on the color
   float avg = (orgCol.r + orgCol.g + orgCol.b)/3f;
   fixed4 col = fixed4(avg, avg, avg, 1);
    
   return col;
  }
  ENDCG
 }
} 
 FallBack "Diffuse"
}

29 comments:

  1. Thanks for the post!
    Could you tell how to make a glow shader?

    ReplyDelete
  2. thanks for the post. How i may dislike it ?

    ReplyDelete
  3. Unity 3D Games scripts and gives code scraps, wizards and different devices. It additionally gives reconciliation between the Unity support and Visual Studio. Naturally, Unity itself offers it restricted backing for Visual Studio C# combination, yet Unityvs goes a considerable amount past this.

    ReplyDelete
  4. Custom software development specialists explore exactly of the company are on they need from their IT system in order to operate to their optimum.

    ReplyDelete
  5. Thanks for sharing this information. I found it very informative as I have been researching a lot lately on practical matters such as you talk about..
    Unity3d game development

    ReplyDelete
  6. Better Programming blog more information our site Post processing

    ReplyDelete
  7. On top of reality in desire of a decorous benefit, I demand a smart custom writing. I acquire a many of process that I wish ended furthermore the deadlines are many intimate composed. Some lane you can support me discover such benefits would be astounding!

    ReplyDelete
  8. Hi, we are the leading html5 game development company in US. Thanks for sharing this informative post

    ReplyDelete
  9. Cheers, was looking for a bit of a tutorial. I know a lot about programming however not shaders, post processing in particular. Very helpful for a starting point.

    ReplyDelete
  10. Very nice .Thank you for sharing your information
    custom essay writing service

    ReplyDelete
  11. Here some details to generate the free hack for moviestarplanet msp hack and make generate the access the free stuff of moviestarplanet.

    ReplyDelete
  12. I absolutely love this blog. Thank you so much for letting us know how we can create our own post-processing shaders in unity3D. Keep on updating us please. Need urgent secondary data thesis rewriting help? Click on the link below for help.
    Urgent secondary data thesis rewriting help

    ReplyDelete
  13. I think that this has been one of the best posts I have come across today. Chemistry Capstone Help. It is very informative and I like how you have elaborated the process in a simple and clear way. Thanks for sharing. Music school admission essay proofreading help

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. I have found this post very important, i can now confidently say that i know much more about starting a custom post than i used to. This is such a nice post, and to show my gratitude I can share a very important link on web content writing. Its a great opportunity to create web pages that are very unique, professional and relevant.

    ReplyDelete
  16. One of my programming passions has been to learn more about 3D programming and hence develop games. This blog has given me a very good basis in using the Shaders in Unity 3D programming. I hope that the programming beginners will have a privilege to read such a simplified blog. You can hire one of the Trusted Lit Review Rewriters to rewrite your literature review in a computer science project.

    ReplyDelete
  17. This article is very much helpful and i hope this will be an useful information for the needed one. Keep on updating these kinds of informative things...

    Android App Development Company

    ReplyDelete
  18. I just want to say that all the information you have given here is awesome...great and nice blog thanks sharing..Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...
    Web Design Development Company
    Web design Company in Chennai
    Web development Company in Chennai

    ReplyDelete
  19. Nice it seems to be good post... It will get readers engagement on the article since readers engagement plays an vital role in every blog.. i am expecting more updated posts from your hands.
    Fitness SMS
    Salon SMS
    Investor Relation SMS

    ReplyDelete
  20. I wondered upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.
    iOS App Development Company

    ReplyDelete
  21. These ways are very simple and very much useful, as a beginner level these helped me a lot thanks fore sharing these kinds of useful and knowledgeable information.
    Texting API
    Text message marketing
    Digital Mobile Marketing
    Sms API
    Sms marketing

    ReplyDelete
  22. great and nice blog thanks sharing..I just want to say that all the information you have given here is awesome...Thank you very much for this one.
    web design Company
    web development Company
    web design Company in chennai
    web development Company in chennai
    web design Company in India
    web development Company in India

    ReplyDelete
  23. Extraordinary article for reading since peoples and researcher also search this type of article. I am particularly inspired with your vision and comprehension. Hope so you will keep on posting an amazing post in future! college essay writing tips

    ReplyDelete
  24. This article is very informative. Here describe about the bio-data related information’s are very much useful for me. This article include more instructions for writing good . thanks a lot for sharing such a useful post.
    Custom Essay Writing Service

    ReplyDelete
  25. Thanks for this article. It contains the information I was searching for and you have also explained it well. We are also an assignment writing help provider. So, the students struggling to write their college assignments can opt for our online assignment help and can get a quality assignment written from us. Academic Writing Style

    ReplyDelete
  26. These ways are very simple and very much useful, as a beginner level these helped me a lot thanks fore sharing these kinds of useful and knowledgeable information.

    snapho

    ReplyDelete
  27. Hello! Thanks for sharing knowledgeable post, I have read it very carefully. I just found this post very effective to make the concept strengthen.
    I wanted to request you please visit my website, I have also post the knowledgeable information. If you need help with the writing essays are also offering writing services.
    Here is the Url of my website

    ReplyDelete