Qt 3D Research (10): Stroke rendering (contour rendering) and Silhouette Shader

Source: Internet
Author: User

Qt 3D Research (10): Stroke rendering (contour rendering) and silhouette Shader

Before writing two articles, introduced me in the edge detection above research, actually uses the GPU to carry on the edge detection to the rendering image, the premise is needs to carry on the two times render, the previous time renders the result as the input texture of the next pass result, then in the second pass rendering, the two dimensional image does some image processing, The resulting stroke rendering effect, followed by blending with normal rendering, becomes the final image of the rendering. However, this is the image processing of the two-dimensional image, even as the last time the depth of the image processing, it can not accurately based on the depth of the mutation to extract the edge we need. So we need new ways to extract the edges of the model.


Saiyang original article, starting address: http://blog.csdn.net/gamesdev/article/details/44455901. Welcome to come to discuss the peer.

In this case, I searched the internet for an article that describes how to extract outlines:

1, vertex coloring stage, calculates the vertex to the viewpoint origin vector in the view view angle and in the vertex position vector the normal vector;

2, the vertex to the point of Origin vector and normal vector normalization, and then the dot product, representing the angle θ cos value

3, if cosθ>0, then means that the θ<90°, can represent the face of the vertex (of course, there may be a point on the edge of the intersection) toward the viewpoint, indicating the front, since it is positive, the original vertex position is displayed, if cosθ<0, it means 90°<θ <180°, can represent this face is the back, so you need to offset the vertex along the normal distance to form a silhouette (contour).

4, the fragment coloring stage, if it is positive, then the display is the normal element color, otherwise the display is black (or other dark color).

Based on this process, I wrote a simple shader:

Silhouette.vert#version 100//Qt 3D default supplied parameters attribute vec3 vertexposition;attribute vec3 vertexnormal;uniform mat4 Modelview;uniform mat3 modelviewnormal;uniform mat4 modelnormalmatrix;uniform mat4 mvp;//Self-supplied parameters uniform VEC3 lightposition;varying float lightintensity;float getlightintensity () {VEC3 Ecpos = VEC3 (Modelview * VEC4 (vertexposit    Ion, 1.0));    VEC3 normal = Modelviewnormal * VERTEXNORMAL;    Ecpos = normalize (Ecpos);    normal = normalize (normal); return dot (-ecpos, normal);}    void Main (void) {const float bias = 0.2;    VEC3 silhouetteposition = vertexposition + normalize (vertexnormal) * bias;    Lightintensity = Getlightintensity ();    if (lightintensity > 0.0) gl_position = MVP * VEC4 (Vertexposition, 1.0); else Gl_position = MVP * VEC4 (Silhouetteposition, 1.0);} Silhouette.frag#version 110//itself provides the parameters varying float lightintensity;void main (void) {VEC4 light = VEC4 (0.9, 0.7, 0.    5, 1.0);    VEC4 dark = vec4 (0.0, 0.0, 0.0, 1.0); Gl_fragcolor = lightintensity > 0.0? Light:dark;}

The results of the operation are as follows:

The depth test needs to be opened here, and the test formula is lessorequal. The code is as follows:

depthtest {func:DepthTest.LessOrEqual}

It seems that the basic outline has been shown, and then to combine the previous period of time to create a cartoon rendering effect, to a combination. The final Toonsilhouette shader is as follows:

Toonsilhouette.vert#version 100//Qt 3D default supplied parameters attribute vec3 vertexposition;attribute vec3 vertexnormal;uniform mat4 Modelview;uniform mat3 modelviewnormal;uniform mat4 modelnormalmatrix;uniform mat4 mvp;//Self-supplied parameters uniform VEC3 lightposition;varying float lightintensity;float getlightintensity () {VEC3 Ecpos = VEC3 (Modelview * VEC4 (vertexposit    Ion, 1.0));    VEC3 normal = Modelviewnormal * VERTEXNORMAL;    Ecpos = normalize (Ecpos);    normal = normalize (normal); return dot (-ecpos, normal);}    void Main (void) {const float bias = 0.1;    VEC3 silhouetteposition = vertexposition + normalize (vertexnormal) * bias;    Lightintensity = Getlightintensity ();    if (lightintensity > 0.0) gl_position = MVP * VEC4 (Vertexposition, 1.0); else Gl_position = MVP * VEC4 (Silhouetteposition, 1.0);}    Toonsilhouette.frag#version 110//Self-supplied parameters uniform sampler2d texpalette;varying float lightintensity;void main (void) {    VEC4 light = VEC4 (0.9, 0.7, 0.5, 1.0); Vec4 darK = vec4 (0.0, 0.0, 0.0, 1.0);    Vec4 toon = texture2d (Texpalette, VEC2 (lightintensity, 1.0)); Gl_fragcolor = lightintensity > 0.0? Toon:dark;}

The demo program is as follows:

It looks a lot fuller.

Because of the length of the program, I put all the code on GitHub, and the friends in need can run the clone from this address.

Qt 3D Research (10): Stroke rendering (contour rendering) and Silhouette Shader

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.