Detailed description of unity3d stroke shader

Source: Internet
Author: User

1. rim light ):
An example is provided in the official unity tutorial. The core of this example is the code:
 
Half rim = 1.0-saturate (dot (normalize (in. viewdir), In. worldnormal ));
O. Emission = _ rimcolor. RGB * POW (rim, _ rimpower );
In. viewdir is the current angle vector, and in. worldnormal is the object's normal. Dot is the dot product for calculating the Angle of View and the normal, which is equal to the COs value of the angle between the angle of view and the normal, for example:

Image: sl7.jpg


 
The value range of COS is 1--cos, Which is 0-1 and reaches the maximum value when the angle is 90 degrees. It is used to simulate the intensity of side light (which is the strongest part of light with the angle of view 90 degrees, is the edge light)
Using a POW function (RIM's _ rimpower power) to enlarge the change rate of this value can enhance the shiny edge effect. Comparison:

Image: sl1.jpg


 
The CoS function changes slowly without passing through the edge light of the POW amplification rate, causing large areas to be stained.

Image: sl2.jpg


 
After the ratio of change amplified by the POW function, the edge will shine. This figure roughly shows the curve of the ratio of change before and after amplification:

Image: sl14.jpg


 
 
This edge light works well in complex ry.

Image: sl3.jpg


 

Image: sl4.jpg


 
But on a straight object, the edge light disappears.

Image: sl5.jpg


 
It's hard to see square objects.

Image: sl6.jpg


 
It is easy to understand that each side of a square has a normal direction, and it cannot reflect changes and outlines.
In addition, when this method is used to describe concave ry, the edges of the concave part (including the concave and convex caused by the normal map) are also drawn, which is not the actual edge contour, it is a side light effect.
The advantage of this method is that it is simple. You only need to rewrite the official shader and add a few words to calculate the edge light. You can dynamically switch the shader when you want to display it. Code intervention is not required, which is highly efficient.
 
2. single object contour Rendering Method
The implementation of this method is complex and can only be described as follows:
1. Place the object to render the contour in a separate layer
2. Set a disable camera in the layer. The culling mask is the layer where the rendering object is located.
3. The master camera maintains that the culling mask is everything.
4. Generate one rendertexture
5. Use the renderwithshader method of the disable auxiliary camera to specify a shader for monochrome rendering (only the outline is required, and no illumination is required) to render the outline of the object to a rendertexture.
6. continue to use the monochrome shader, and use the method similar to blur provided by unity to move a few pixels to the left and right of the object's contour map and combine them to get an outline map that is larger than the original contour and blurred at the edge, save to a temporary rendertexture
7. Overlay a large contour map with the original contour map, and eliminate the clear outline in the middle to obtain a complete contour map with transparency.
8. In the onrenderimage of the main camera, the transparent contour map and the image rendered by the main camera are combined with Alpha to produce a complete and unblocked contour effect.
Effect:

Image: sl8.jpg


 
The effect is much better than the side light. However, this method is costly and requires support from a lot of code.
 
A small demo is attached, which contains the above two methods.
The mouse can control the translation, rotation, and scaling of the lens. Hover the mouse over the object to display the side light effect, click the object to display the clear outline effect, and click the effect again to eliminate.

Image: sl9.jpg


 

Image: sl10.jpg


Image: sl11.jpg


You can set the Blur degree of edge color and width.
Targets are grouped by material to facilitate processing

Image: sl12.jpg


 
Change to thin line green

Image: sl13.jpg


Bytes ---------------------------------------------------------------------------------------------------------------------
Optimized the code and reduced a set of rendertexture, which consumes resources and reduces the number of computations.
In addition, a set of shader is added to blur and crop each time, which saves more resources, but the edge is fuzzy.
Comparison of the two algorithms:

Image: sl15.jpg


 
This algorithm is used to perform multiple fuzzy re-cropping. the edge is smooth, and the model's sawtooth is smooth on the edge line, with a slightly higher overhead.

Image: sl16.jpg


 
Fuzzy and cropping algorithms at the same time. The edges are blurred and the sertices are also amplified by the proportional ratio, but the overhead is relatively low.
Use as needed.
In general, because it is a full screen effect, it has nothing to do with the number of rendered objects, so basically the number of objects displayed in the contour will not affect the efficiency.

The attachment contains the code and shader of the two methods. A shader in the rimlight method can correspond to a material effect without code support. The next method requires the code to add shader, similar to the official image effect.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.