WebGL Draw line Bug (ii)

Basic ideas
The previous article briefly describes the WebGL drawing line bug, an article that will cover work around to solve the problem.

The last article at the end of a simple way to solve the idea is to use the triangle to simulate the line.

For example, a line segment consisting of two endpoints is used when plotting line with only two endpoints specified, and if a segment is modeled by a triangle, at least two triangles are required, such as:

Two triangle-Simulated segments
Therefore, to draw a line segment, you need six vertices, two triangles, from which you can see that some vertices are shared, in fact, only four vertices are required, and then indexed to draw two triangles, I believe that the students familiar with WebGL understand this way through the index to draw, not detailed here.

If you want to draw two connected segments, then you need to add two vertices, 6 vertices, draw four triangles, and so on, draw three connected segments need 8 vertices, draw 6 triangles, so you can draw a conclusion that line with n endpoints, need: 2 n vertices, (n-1 ) of 2 triangles.

For a line segment, the control parameter actually has only two endpoint coordinates and the line width.

From the above analysis, we know that given a series of points (n) and the width of the line, the number of vertices required to draw a segment is n * 2.

How to calculate vertices
Two end-point scenarios
How should n vertex data be calculated at that time? Let's start with an example of a simple 2-dimensional drawing and now assume that there are two endpoints given:

( -50,0) and (50,0), to draw a line with a width of 2, then a total of four vertices, the first vertex is the offset from the first endpoint + line width, the line width is 2, so the base of the offset should be 2/2 = 1;

The second vertex is the offset (-1) from the first endpoint + line width, and the same line width is 2, so the base of the offset should be 2/2 (-1) =-1;

And so on, how should we offset it? This is related to the direction of the line, and the direction of the segment in the example can be computed with the second endpoint-the first endpoint:

(50,0)-( -50,0) = (100,0), after normalization is (1,0), this is the direction vector of the line segment, the direction of the line is indicated by the direction of the x-axis, for the first vertex, the orientation of the offset should be (1,0) counterclockwise rotation 90 degrees, That is, the direction perpendicular to the line segment (two perpendicular to the line segment, here based on the right hand rule, choose to rotate 90 degrees counterclockwise), after rotation 90 degrees, vector programming (0,-1)

From the mathematical knowledge inside the graph, we can know that the vector (x, y) rotates counterclockwise 90 degrees into (-y,x);

For the second vertex, the direction of the offset should be (1,0) rotated 90 degrees clockwise, but ahead, we have shifted the base of the offset to 1, so we can think of the direction of the offset or (1,0) counterclockwise rotation of 90 degrees,

Calculate vertex offset direction based on segment direction
As a result, the position of the first vertex can be drawn:

( -50,0)-(0,-1) * 1 = ( -50,-1),

The position of the second vertex is:

( -50,0)-(0,-1) * 1 = ( -50,1)

For third, the calculation of the fourth vertex is similar.

Scenarios for multiple endpoints
The above discussion is the case of only two endpoints, in fact, if it is more than one endpoint, the above discussion is only suitable for the first endpoint and the last end of the case, for the middle end, the direction of the offset to take into account the end of the connection of the two line segments, the same example illustrates:

Assuming three endpoints, three endpoints are ( -50,0), (0,0), (0,50), and now calculate the two vertices (third, fourth) for the second endpoint (0,0),

Three endpoints
To calculate the two vertex positions of the middle end point, you need to consider the direction of the two-day segment that changes the end connection:

Line direction calculates offset direction
The approximate method of calculation calculates the direction of the first line segment by subtracting the endpoint from the previous endpoint:

(0,0)-( -50,0) = (50,0) = (1,0) (normalized)

The direction of the second line segment is calculated by subtracting the endpoint from the next endpoint of the endpoint:

(0,50)-(0,0) = (0,50) = (0,1) (normalized)

Then the two direction vectors are added and rotated 90 degrees counterclockwise to get the offset direction:

(1,0) + (0,1) = (first) = (0.707,0.707) (normalized)

After rotation, the offset direction is programmed ( -0.707,0.707),

It is important to note that at this point the offset base is actually changed, the offset at the corner should now be large, that is, a magnification factor. This amplification factor can be obtained by multiplying the direction of the first segment by the 1/offset direction point, but if the angle of the two segments is small, the value of the point multiplication is very small, the magnification factor is large, and for the sharp corner at the corner does not appear large, we generally limit the magnification factor of not more than 2. So the formula can become:

1/max (offset direction. Direction of the first line segment, 0.5)

How to organize vertex data
Much of the above covers how to calculate vertex coordinates, in fact, all the calculation methods described in the preceding text occur in the vertex shader, and can only be computed in the shader, because the final display to the screen of the vertex is related to the lens, the above is just a simple 2-D case simulation, if the JS side of the calculation, Will greatly consume performance. (so you're not kidding, we haven't figured out how to calculate the data to be passed to the vertex shader), it's not nonsense, because only figuring out how to calculate the final vertex in the shader knows how to organize the data into the vertex shader.

As an example of "multiple endpoint scenarios" above, we can summarize what data is needed to calculate a vertex:

Endpoint coordinates, offset, previous endpoint coordinates, last endpoint coordinates

Therefore, in the shader need to define four attribute variable Position,offset,positionprev,positionnext, respectively, to receive the endpoint coordinates, offset, the previous endpoint coordinates, the next endpoint coordinates.

For the previous two vertices, the endpoint has no previous endpoint, at which point the previous endpoint coordinates, and then in the shader to determine if the previous endpoint point coordinates = = Endpoint coordinates, it is the first endpoint, with two endpoints of the case calculation.

Lower than the next two vertices, the end of which does not have the last endpoint, at which point the end of the endpoint coordinates, and then in the shader to determine if the next endpoint point coordinates = = Endpoint coordinates, it is the final endpoint, using two endpoints of the case calculation.

For the middle vertex, there are both endpoint coordinates, the coordinates of the previous endpoint, and the coordinates of the last endpoint, which is calculated using the case of the previous multiple endpoints.

In the case of the previous three endpoints, for example, three endpoints (50,0,0), (0,0,0), (0,50,0), line width 2 (note that this is already a three-dimensional coordinate, the case of the previous simulation is to use the 2-dimensional coordinates on the screen to simulate the vertex in the shader through the perspective transformation into two-dimensional coordinates)

Then the data for the four variables of the first vertex are:

Endpoint coordinates, offset, previous endpoint coordinates, last endpoint coordinates

(50,0,0), 2/2, (50,0,0) (0,0,0)

The data for the four variables of the second vertex are:

Endpoint coordinates, offset, previous endpoint coordinates, last endpoint coordinates

(50,0,0),-2/2, (50,0,0) (0,0,0)

The data for the four variables of the third vertex are:

Endpoint coordinates, offset, previous endpoint coordinates, last endpoint coordinates

(0,0,0), 2/2, (50,0,0) (0,50,0)

The data for the four variables of the fourth vertex are:

Endpoint coordinates, offset, previous endpoint coordinates, last endpoint coordinates

(0,0,0),-2/2, (50,0,0) (0,50,0)

The data for the four variables of the fifth vertex are:

Endpoint coordinates, offset, previous endpoint coordinates, last endpoint coordinates

(0,50,0), 2/2, (0,0,0) (0,50,0)

The data for the four variables of the sixth vertex are:

Endpoint coordinates, offset, previous endpoint coordinates, last endpoint coordinates

(0,50,0),-2/2, (0,0,0) (0,50,0)

So far, we've learned how to organize the data to draw the vertices you need.

The next article will be labeled with the relevant code description.

Welcome to pay attention to my public number: Itman

WebGL Draw line Bug (ii)