Shulou(Shulou.com)06/01 Report--

This article is about Unity3D Cartoon Stroke and how to control the line weight. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

I. Foreword

In the previous real-time stroke, we used LineStream in the geometry shader to draw lines, so drawing lines cannot be separated from the underlying characteristics to control the thickness of lines universally on all platforms, which requires us to make a fuss.

II. Principle

How to control the thickness of lines in graphics, in fact, someone has done research, the article is here.

Borrowing a picture from this article

The principle is clear from the diagram. In the clipping space, e0 and e1 are the two vertices of the line, and then the two-dimensional vectors ext and n are calculated in turn. Four points are calculated through these two vectors, and then two triangles are drawn with these four points to spell out the quadrilateral.

This article makes a little adjustment on this basis, as shown in the following figure.

Simply put, it is to draw a quadrilateral with 2 points of the line as the center line, rather than as an edge of the quadrilateral, because the position order of the 2 points obtained in the geometry shader in this article is disordered, e1 may be mistaken for e0, or e0 may be mistaken for e1, if they want to become ordered, it will become complicated, and drawing a quadrilateral with this center line will become very simple. Next, just compute the four points of the quadrilateral and split it into two triangles by the geometry shader to get the quadrilateral.

n and ext are computed in the Shader of unity3D as follows:

float PctExtend = 0.01;float2 ext = PctExtend * (e1.xy - e0.xy);float2 v = normalize(float3(e1.xy - e0.xy, 0)).xy;float2 n = float2(-v.y, v.x) * line width;

As you can see from the above code, the width is controlled in the calculation of n, and we can extract this parameter and let the user adjust it at will.

III. Coding

Before the code was written in a mess, for the convenience of no longer finishing, coding slightly complex, please organize yourself.

Source code attached here (https://github.com/L-LingRen/UnitySimpleCartoonLine)

IV. Operation

The effect is good, the performance is not evaluated, unity3d seems to have been optimized internally, and the number of frames is high and low for some reason.

Thank you for reading! About "Unity3D cartoon stroke how to control line thickness" This article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.