Method for generating pixel wide line, program, storage medium, and device
By obtaining and processing vertex information in WebGL, drawing quadrilateral primitives and shading, the problem that WebGL cannot draw bandwidth lines is solved, and more efficient rendering and memory optimization is achieved.
Patent Information
- Application Number
- CN202411578355.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-06
- Publication Date
- 2025-02-28
AI Technical Summary
Existing WebGL technology cannot effectively draw lines with bandwidth, resulting in poor rendering effects, large memory usage and slow rendering speed.
By obtaining all vertex information of the wide line to be drawn, it is stored in an array, and quadrilateral primitives are drawn in the vertex shader, the map coordinates are calculated, and the fin shader is used to color to generate pixel wide lines.
It realizes drawing bandwidth lines in WebGL, improves rendering efficiency, reduces memory usage and generation time, and supports completion and smooth maps around corners.
Smart Images
Figure CN119540422A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of image rendering, and in particular to a method, program, storage medium and device for generating pixel width lines. Background Art
[0002] WebGL does not natively support drawing lines with width, and can only draw single-pixel lines, which makes the edges appear jagged and not clear, smooth, or beautiful. In addition, the inability to set the width is not conducive to the realization of some specific objects, such as drawing maps and charts. If you can use lines with set width to draw, you can achieve richer and more interactive data visualization effects and improve user experience.
[0003] In the prior art, data is usually prepared in advance to generate rendering objects, or a model is used to create lines, or capsule-shaped pieces are stacked end to end to generate lines. These methods have poor rendering effects, large memory usage, and slow rendering speed. Summary of the invention
[0004] The present invention aims to solve the problem that the existing WebGL has poor rendering effect, large memory usage and slow rendering speed when drawing wide lines. In order to solve the above technical problems, the present invention provides a method, program, storage medium and device for generating pixel wide lines.
[0005] In a first aspect, a method for generating a pixel width line is provided, comprising:
[0006] Obtain information of all vertices of the wide line to be drawn, and store the information of all the vertices in a preset array;
[0007] The vertex shader draws at least one quadrilateral primitive according to information of the vertices in the array, each of the quadrilateral primitives covering a line segment formed by two adjacent vertices;
[0008] Calculate the texture coordinates of each vertex of the wide line to be drawn;
[0009] The fragment shader shades all generated quadrilateral primitives according to the texture coordinates to generate pixel-wide lines.
[0010] In a possible implementation of the first aspect, obtaining information of all vertices of the wide line to be drawn and storing the information of all the vertices in a preset array specifically includes:
[0011] Obtain information of all vertices of the wide line to be drawn, and determine the starting point and the end point, wherein the vertex information includes: vertex coordinates, the distance between the vertex and the starting point, and a disconnection flag;
[0012] The vertex coordinates of all the vertices, the distance between the vertex and the starting point, and the disconnection flag are stored in a preset one-dimensional array, and the information of a starting point is additionally stored at the first position of the one-dimensional array, and the information of an end point is additionally stored at the last position of the one-dimensional array.
[0013] In a possible implementation of the first aspect, a vertex shader draws at least one quadrilateral primitive according to information of vertices in the array, specifically comprising:
[0014] The vertex shader obtains information of four vertices from the array in sequence each time, and steps at a spacing of one vertex, offsetting one vertex each time it obtains information until information of all vertices in the array is obtained;
[0015] The vertex shader calculates the position offset of the vertex at the corner according to the information of the four vertices obtained each time, determines the vertices of the quadrilateral primitive according to the calculated position offset result, and draws the quadrilateral primitive according to the obtained vertices of the quadrilateral primitive.
[0016] In a possible implementation of the first aspect, the vertex shader calculates the position offset of the vertex at the corner according to the information of the four vertices obtained each time, specifically including:
[0017] The vertex shader calculates the vertices of two triangle primitives each time based on the information of the four vertices obtained. The two triangle primitives are combined into one quadrilateral primitive, including:
[0018] Calculate the vertex position of the ith triangle primitive, and multiply the calculated vertex position of the ith triangle primitive by the corresponding model view matrix to obtain the camera space position of the vertex of the ith triangle primitive;
[0019] Transform the camera space position of the vertex of the i-th triangle primitive into the standard device space, and calculate the vector dir from the starting point to the end point of the vertex of the i-th triangle primitive i , and the vector dir from the starting point to the midpoint i 1 and the vector dir from the midpoint to the end point i 2;
[0020] Calculate the vector dir of the i-th triangle primitive i The vector dir i 1 Cosine value, according to which it is determined whether to adjust the vector dir i direction and side length of the i-th triangle primitive;
[0021] Calculate the perpendicular to the vector dir iThe vector offset of the i-th triangle primitive is determined according to the vertex sequence of drawing the i-th triangle primitive, the compensation weight of the line width at the current angle is calculated according to the cosine value, and the line width is determined according to the compensation weight;
[0022] offsetting the midpoint of the i-th triangle primitive according to the line width to obtain a position after the offset;
[0023] Wherein, i=1,2,…,2N, and N is the number of quadrilateral primitives.
[0024] In a possible implementation of the first aspect, a first side of the drawn quadrilateral primitive is parallel to a third side, and the first side is parallel to a line segment covered by the corresponding quadrilateral primitive, and vertices of the covered line segment are respectively located on a second side and a fourth side of the corresponding quadrilateral primitive;
[0025] Among them, the first side and the third side are opposite sides of the quadrilateral primitive, the second side and the fourth side are opposite sides of the quadrilateral primitive, and the first side and the second side are adjacent sides.
[0026] In a possible implementation of the first aspect, the mapping coordinates of each vertex of all the quadrilateral primitives are calculated according to the following formula, specifically including:
[0027] InstacnePrevDist*(1-a)+InstaceNextDist*a
[0028] Among them, InstacePrevDist is the distance from the previous vertex of the current vertex to the starting point, InstaceNextDist is the distance from the next vertex of the current vertex to the starting point, and a is a value determined according to the vertex order of drawing the triangle primitive, and a is 0 or 1.
[0029] In a possible implementation of the first aspect, a vertex shader sequentially obtains information of four vertices from the array each time, and the vertex shader draws at least one quadrilateral primitive according to the information of the vertices in the array, specifically including:
[0030] The vertex shader obtains information of four vertices from the array in turn each time, and determines whether the current vertex is disconnected according to the disconnect flag. When the current vertex is disconnected, it determines whether the disconnect flag of the next adjacent vertex is disconnected. When the next vertex is also disconnected, the quadrilateral primitive from the current vertex to the next vertex is not drawn.
[0031] In a possible implementation of the second aspect, a computer program is provided. When the computer program is processed and executed, the computer program is used to implement the method for generating a pixel width line as described in any of the above technical solutions.
[0032] In a possible implementation of the third aspect, a storage medium is provided, in which instructions are stored. When a computer reads the instructions, the computer executes the method for generating a pixel width line as described in any of the above technical solutions.
[0033] In a possible implementation of the fourth aspect, a device for generating a pixel width line is provided, including:
[0034] Memory for storing computer programs;
[0035] The processor is used to execute the computer program to implement the method for generating a pixel width line as described in any of the above technical solutions.
[0036] Based on the problem that native WebGL cannot draw lines with width, this solution provides a solution for drawing wide lines, which can adapt to the correct display width of large near and small far away. It can be applied in many specific scenarios to draw effects that were not originally achievable and improve user experience. At the same time, the pixel-wide lines implemented by this solution use a batch drawing method to improve rendering efficiency, and at the same time, optimization is made in the uploaded vertex array to reduce memory and generation time. And the method of drawing lines in groups can be used to reduce the number of generated lines, and optimization is made again to improve performance. The above two points will be particularly effective when there are lines with a large number of vertices or many lines. At the corners, we will automatically calculate the offset to complete the corners, and support smooth calculation of mapping coordinates.
[0037] Advantages of additional aspects of the present invention will be given in part in the following description, and in part will be obvious from the following description, or will be learned through practice of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS
[0038] Figure 1 A schematic flow chart of a method for generating a pixel width line provided by an embodiment of the present invention;
[0039] Figure 2 A schematic diagram of a client wide line drawing process provided for other embodiments of the present invention;
[0040] Figure 3 A schematic diagram of a broad line example provided for other embodiments of the present invention;
[0041] Figure 4 Array schematic diagrams provided for other embodiments of the present invention;
[0042] Figure 5 A schematic diagram of vertex information provided for other embodiments of the present invention;
[0043] Figure 6 A schematic diagram of a vertex uploading method provided for other embodiments of the present invention;
[0044] Figure 7 Schematic diagram of drawing quadrilateral primitives provided for other embodiments of the present invention, (a) is an example of a line, (b) is an actually drawn line, and (b) is a triangle that makes up the line;
[0045] Figure 8 A schematic diagram of a quadrilateral primitive cyclic drawing process provided for other embodiments of the present invention;
[0046] Fig. 9 A schematic diagram of a quadrilateral primitive structure provided for other embodiments of the present invention;
[0047] Fig.10 Schematic diagram of vertex drawing provided for other embodiments of the present invention, (a) is the vertex of a line, (b) is the three required points;
[0048] Fig.11 A schematic diagram of a dir vector provided for other embodiments of the present invention;
[0049] Fig.12 A schematic diagram of the position of the offset point provided for other embodiments of the present invention;
[0050] Fig.13 A schematic diagram of drawing a triangle primitive provided for other embodiments of the present invention;
[0051] Fig.14 A schematic diagram of wide line grouping provided for other embodiments of the present invention. DETAILED DESCRIPTION
[0052] The principles and features of the present invention are described below in conjunction with the accompanying drawings. The examples given are only used to explain the present invention but not to limit the scope of the present invention.
[0053] In order to solve the problem that native WebGL cannot generate lines with width, the present invention provides a solution for generating lines with settable width, which can dynamically generate lines according to real-time data based on instantiated rendering technology, and supports the completion of corner seams, transparent display and smooth mapping. It is also necessary to maintain good performance to ensure rendering effects, optimize memory and increase generation speed.
[0054] like Figure 1 FIG. 1 is a flow chart of a method for generating a pixel width line according to an embodiment of the present invention. The method comprises:
[0055] S1, obtain the information of all vertices of the wide line to be drawn, and store the information of all vertices in a preset array;
[0056] It should be noted that in JavaScript, a one-dimensional array is a linear data structure that stores data of the same type. It consists of a series of elements arranged in order, and each element has a unique index, which is usually an integer.
[0057] The vertex information may include position information of the vertex, etc., and the vertex information may be stored in a preset array in order according to the drawing order of the line segments.
[0058] S2, the vertex shader draws at least one quadrilateral primitive according to the vertex information in the array, and each quadrilateral primitive covers a line segment formed by two adjacent vertices;
[0059] It should be understood that a shader is a special program used for graphics programming, which is mainly used to control certain stages in the graphics rendering pipeline and is used to determine the final appearance of objects in a 3D scene. The main types are divided into vertex shaders, which are used to process vertex data of 3D models, and fragment shaders, which process the color and other attributes of each pixel.
[0060] like Figure 8 As shown, the vertex information of the line will be calculated in the vertex shader, the purpose is to calculate the final offset position of each point, that is, the vertex position of the triangle primitives that form the quadrilateral primitive, and calculate the mapping coordinates of the vertices of the triangle primitives, and pass them to the fragment shader for shading.
[0061] like Fig. 9 As shown, the schematic diagram of drawing a quadrilateral primitive in the vertex shader is shown in the figure below. Drawing pixel lines will calculate the final vertex position of the quadrilateral primitive again and draw each correct quadrilateral primitive.
[0062] The vertex shader calculates the vertices of a triangle primitive in sequence and draws the triangle primitive in the order of (0,2,1)(2,3,1). This is the basic upload and drawing process. Batch rendering can draw multiple quadrilateral primitives in one drawing, and each quadrilateral primitive is an instance. For example, the diagram above shows how to draw a pixel-wide line. Figure 7 In the figure, it is composed of two quadrilateral primitives.
[0063] S3, calculating the mapping coordinates of each vertex of the wide line to be drawn;
[0064] S4, the fragment shader shades all generated quadrilateral primitives according to the texture coordinates to generate pixel-wide lines.
[0065] It should be noted that WebGL is an API (application programming interface) based on OpenGL ES2.0, which is used to implement 3D graphics rendering in web browsers.
[0066] like Figure 2 As shown, the pixel-wide line can also be encapsulated and developers can use it directly. For the client, it only needs to create the line and set the line width, corner threshold, grouping information, etc. as needed, as well as the vertex coordinates of the line to complete the creation of a pixel-wide line.
[0067] like Figure 3 As shown, an example of drawing a simple wide line with only three vertices is given. The drawn line sets three points A[0,0,0], B[0,0,5], and C[2,0,5].
[0068] The pixel-wide line is drawn using the batch rendering method (Instance). What is drawn is actually a quadrilateral primitive, which is composed of two triangle primitives. For example Figure 3 The line segments AB and BC are actually two rectangular primitives, and the operation of drawing quadrilateral primitives is handled in the shader, and the vertex information of the quadrilateral piece is uploaded by default.
[0069] This embodiment provides a solution for drawing wide lines, which can adapt to the correct display width of large near and small far, and can be applied in many specific scenes to draw effects that were not originally achievable, thereby improving user experience. At the same time, the pixel wide lines implemented by this solution use a batch drawing method to improve rendering efficiency, and at the same time, optimization is made in the uploaded vertex array, reducing memory and generation time. And the method of drawing lines in groups can be used to reduce the number of generated lines, and optimization is performed again to improve performance. The above two points will be particularly effective when there are lines with a large number of vertices, or when there are many lines. At the corners, we will automatically calculate the offset to complete the corners, and support smooth calculation of mapping coordinates.
[0070] Optionally, in some possible implementations, obtaining information of all vertices of the wide line to be drawn and storing the information of all vertices in a preset array specifically includes:
[0071] Get the information of all vertices of the wide line to be drawn, and determine the starting point and the end point. The vertex information includes: vertex coordinates, the distance between the vertex and the starting point, and the disconnection flag.
[0072] The vertex coordinates of all vertices, the distance between the vertex and the starting point, and the disconnection flag are stored in a preset one-dimensional array, and the information of an additional starting point is stored at the first position of the one-dimensional array, and the information of an additional end point is stored at the tail position of the one-dimensional array.
[0073] The vertex coordinates may be xyz three-axis coordinates in a rectangular coordinate system, and the disconnection position may be represented by 0 or 1, for example, 0 represents disconnection, and 1 represents non-disconnection.
[0074] It should be understood that performance optimization is also particularly critical in the process of drawing and rendering line segments. If a large number of pixel-wide lines are used in the scene, how to ensure performance is also an issue that needs to be addressed.
[0075] In this embodiment, by additionally storing the starting point and end point of the line segment, batch rendering can be used when drawing each quadrilateral primitive, and the vertex array for finally drawing the pixel line only needs to store the starting point and end point of one more line segment, and there is no need to store the vertices of the quadrilateral primitive, which greatly reduces memory usage. There will be no other duplicate points in the array, saving memory and upload speed.
[0076] For example, Figure 4 As shown, an array example is provided. First, the vertices set for the line are processed internally: an array is created to store all vertex information of the pixel-wide line. An additional start point and end point are stored in the array. 0, 0, 1, 2, 3, 4, 4 are used to store data. It should be understood that Figure 4 The data is continuous, and the use of squares to display it is just to distinguish that each vertex of the line is stored.
[0077] Each vertex of the line segment will occupy five positions in the entire array. The first three positions are the xyz coordinates of the vertex, and the fourth is the distance between the point and the starting point, that is, the distance from the current point to the starting point of the line. If there is a break in the middle, the break will be the starting point, and the last position is the flag bit for whether it is broken. Figure 5 shown.
[0078] The final array is a one-dimensional array that stores the vertex information of the line.
[0079] Each time you upload, the information of the four points of the corresponding line segment will be uploaded from the array, and the stepping will be based on the spacing of one point of the line segment. After uploading for the first time, one vertex will be offset, and one vertex will occupy 5 positions. The next upload will offset one vertex and upload the next four vertices, such as Figure 6 shown.
[0080] Optionally, in some possible implementations, the vertex shader draws at least one quadrilateral primitive according to information of vertices in the array, specifically including:
[0081] The vertex shader obtains information of four vertices from the array one at a time, and steps forward at a spacing of one vertex, offsetting one vertex each time until the information of all vertices in the array is obtained;
[0082] The vertex shader calculates the position offset of the vertex at the corner according to the information of the four vertices obtained each time, determines the vertices of the quadrilateral primitive according to the calculated position offset result, and draws the quadrilateral primitive according to the obtained vertices of the quadrilateral primitive.
[0083] For example, for Figure 4 The vertices 0, 0, 1, 2, 3, 4, 4 shown can be uploaded first, then the vertices 0, 0, 1, 2, and then the vertices 0, 1, 2, 3, and then the vertices 1, 2, 3, 4, and so on.
[0084] It should be understood that the method of the present invention can freely set vertices and modify the data in the line, while ensuring that the mapping can be correct, which makes it more convenient and more beautiful to use. However, being able to freely set vertices will result in a situation where if several points are connected into a line, there will be seams at the angles. How to smoothly fill the seams and process the mapping at the seams will be a difficult problem to be solved. For example,
[0085] The method provided in this embodiment can solve this problem. The reason for uploading four vertices is that the offset of the vertex position at the corner needs to be calculated. Since the quadrilateral pieces are drawn using batch rendering technology, the fundamental meaning of drawing the line mentioned above is to use the quadrilateral pieces to calculate according to the points of the line, offset the final position of the vertices of the quadrilateral primitive, and finally draw a quadrilateral primitive composed of two triangle primitives. A pixel line is actually composed of multiple quadrilateral primitives of different shapes, so that the desired line can have both width and correct width at the corners, and can also be displayed smoothly.
[0086] It should be noted that because the WebGL shader needs to use triangles as the basic primitives when drawing, two triangles are needed to form a quadrilateral.
[0087] For example, Figure 7 As shown, three points ABC draw a line, and its vertex information is represented by the three points ABC in the drawing. Figure 7 (a), and the final result of drawing a pixel-wide line is Figure 7 (b) is a polyline drawn from two quadrilaterals, each of which is generated by two triangles, such as Figure 7 As shown in (c), the rendering step actually draws four triangles in sequence.
[0088] Optionally, in some possible implementations, the vertex shader calculates the position offset of the vertex at the corner according to the information of the four vertices obtained each time, specifically including:
[0089] The vertex shader calculates the vertices of two triangle primitives each time based on the information of the four vertices obtained. The two triangle primitives are combined into one quadrilateral primitive, including:
[0090] Calculate the vertex position of the i-th triangle primitive, multiply the calculated vertex position of the i-th triangle primitive by the corresponding model view matrix to obtain the camera space position of the vertex of the i-th triangle primitive;
[0091] Transform the camera space position of the vertex of the i-th triangle primitive into the standard device space, and calculate the vector dir from the starting point to the end point of the vertex of the i-th triangle primitive i , and the vector dir from the starting point to the midpoint i 1 and the vector dir from the midpoint to the end point i 2;
[0092] Calculate the vector dir of the i-th triangle primitive i and vector dir i The cosine value of 1, based on which the vector dir is determined i The direction and side length of the i-th triangle primitive;
[0093] Calculate the perpendicular to the vector dir i The direction of the vector offset is determined according to the vertex order of drawing the i-th triangle primitive, the compensation weight of the line width at the current angle is calculated according to the cosine value, and the line width is determined according to the compensation weight;
[0094] The midpoint of the i-th triangle primitive is offset according to the line width to obtain the offset position;
[0095] Wherein, i=1,2,…,2N, and N is the number of quadrilateral primitives.
[0096] It should be understood that each time a quadrilateral primitive is drawn, the four vertices of the pixel line are uploaded, such as Fig.10 As shown, the points are named instancePrev2, instancePrev1, instanceNext1, and instanceNext2 in order to facilitate the following introduction. As mentioned above, the first and last points of the line segment will be stored once more in the array. Fig.10 For example, if you draw a line with three points, the points in the array are 1, 1, 2, 3, and 3. If you draw a quadrilateral at a time, you upload four points in the array, that is, 1, 1, 2, and 3. Therefore, instancePrev2 and instancePrev1 are the same point. Fig.10 (a) shown.
[0097] Then calculate the three camera space points used to draw the vertices this time.
[0098] Calculate the final position of each vertex of the quadrilateral primitive in turn. Take the first vertex of the triangle primitive as an example (follow the 021 231 order of drawing the triangle above), take the three vertices of the uploaded pixel line and multiply them with the model view matrix to calculate the position in the camera space, and use prev, curr, and next as the names to introduce them, such as Fig.10 (b) as shown.
[0099] Next, transform these three points into the standard device space (ndc), that is, multiply these points with the projection matrix to get the coordinates of the points in the clipping space, and then perform perspective division on the coordinates of the clipping space to get the points in the standard device space. In the standard device space (also called screen space), it is easier to calculate the direction and width of the line segment, and it can ensure that the line segment is not affected by depth because the size relationship between near and far objects has been correctly handled.
[0100] Then, the vector dir from the prev point to the next point is calculated in the standardized device space, such as Fig.11 shown.
[0101] An exemplary method for calculating the offset position is given below:
[0102] like Fig.11 As shown, first calculate the vector dir1 from point prev to point current, calculate the vector dir2 from point current to point next, and multiply both vectors by the screen aspect ratio, so that the line segment can be guaranteed to look straight on a non-square screen. Then normalize and add them to get the dir vector, and then calculate the cosine value between the dir vector and the dir1 vector to determine whether the angle is an acute angle. If it is an acute angle, the direction of dir will be adjusted, and the line width will be increased. It should be understood that the pixel line width at the corner is the length of the quadrilateral side, which prevents the final drawn line from being too thin at the sharp corner and the effect is not smooth enough.
[0103] Then, the final position after the offset is calculated based on the vector. First, a vector perpendicular to the vector dir calculated above is calculated and named offset. Because in the previous step, in order to calculate the correct direction, the vector was multiplied by the screen aspect ratio. In this step, in order to calculate the correct width of the line, the screen width and height are removed and divided by the screen aspect ratio.
[0104] Next, we determine the direction of the offset vector according to the order of drawing the triangle primitive vertices. Then, we calculate a compensation weight for the line width at the current angle based on the angle cosine value calculated above (different weights for different positions). This weight factor will make the width of the line at both ends more naturally gradient according to the position of the line. Multiply the offset vector by the set line width, and then multiply it by the compensation weight to adjust the actual line width. Finally, use this line width to offset at the current point, and finally calculate the offset position, such as Fig.12 shown.
[0105] According to the above algorithm, the remaining triangle primitives are drawn again. After drawing two triangle primitives, the drawing of a quadrilateral primitive is completed. Next, the vertex array of the stepping line is looped and the triangle primitives are drawn until the drawing is completed. The whole step is as follows Fig.13 As shown, the blue points are the vertices of the line segments, the red points are the final calculated offset positions, and the triangle primitives are drawn according to the offset positions.
[0106] Optionally, in some possible implementations, the first side of the drawn quadrilateral primitive is parallel to the third side, and the first side is parallel to the line segment covered by the corresponding quadrilateral primitive, and the vertices of the covered line segment are respectively located on the second side and the fourth side of the corresponding quadrilateral primitive;
[0107] Among them, the first side and the third side are opposite sides of the quadrilateral primitive, the second side and the fourth side are opposite sides of the quadrilateral primitive, and the first side and the second side are adjacent sides.
[0108] Optionally, in some possible implementations, the mapping coordinates of each vertex of all quadrilateral primitives are calculated according to the following formula, specifically including:
[0109] InstacnePrevDist*(1-a)+InstaceNextDist*a
[0110] Among them, InstacePrevDist is the distance from the previous vertex of the current vertex to the starting point, InstaceNextDist is the distance from the next vertex of the current vertex to the starting point, and a is a value determined according to the vertex order of drawing the triangle primitive, and a is 0 or 1.
[0111] UV coordinates are a coordinate system used in computer graphics for texture mapping. They define how a 2D texture image is mapped to the surface of a 3D model.
[0112] It should be understood that when the above calculation of each vertex of the triangle primitive is drawn, the UV coordinates will also be processed. According to the fourth bit dist in the vertex of the uploaded line segment, the information stored in this bit is the distance between the two vertices. Each time the UV value of a vertex is calculated, the distance between the previous point and the starting point of the line and the distance between the next point and the starting point of the line are taken into account, and the specific position of the point is interpolated based on its position.
[0113] The calculated result is a value of the uv coordinate on v, which is interpolated according to the distance between the vertices, so the result between the lines is smooth. At the same time, the distance from the next point to the starting point is taken into account, which can ensure that the uv of the seam at the corner can also have a smooth transition.
[0114] Texture coordinates support two modes, the normal mode is tiling, and you can also set the stretching mode.
[0115] By calculating the current point map coordinates based on the distance from the previous point to the starting point and the distance from the next point to the starting point, a tiling effect will be achieved.
[0116] It should be understood that interpolation is the process of estimating unknown values between known data points. In computer graphics, data analysis, and mathematics, interpolation is a common technique used to smooth transitions, fill in data gaps, or generate intermediate values.
[0117] Optionally, in some possible implementations, the vertex shader sequentially obtains information of four vertices from the array each time, and the vertex shader draws at least one quadrilateral primitive according to the information of the vertices in the array, specifically including:
[0118] The vertex shader obtains the information of four vertices from the array in turn each time, and determines whether the current vertex is disconnected based on the disconnect flag. When the current vertex is disconnected, it determines whether the disconnect flag of the next adjacent vertex is disconnected. If the next vertex is also disconnected, the quadrilateral primitive from the current vertex to the next vertex is not drawn.
[0119] It should be understood that when creating a pixel-wide line, the vertex information of the pixel-wide line can be passed in while the grouping information can be passed in, that is, these points should be divided into several lines. In the internal processing, the disconnection mark will be marked on the front and back endpoints of the segmentation point. In the shader, when drawing to the point with the disconnection mark, it will be processed to avoid drawing the disconnection.
[0120] For example, in the vertex shader, it can be calculated based on the 5th bit (disconnection flag bit) of the line vertex information to indicate whether the current vertex needs to be discarded.
[0121] In the fragment shader, when the disconnect flag is set to need to be disconnected, it will be considered that drawing is impossible and will stop, thereby realizing the disconnection operation here. After that, the next point will be treated as a new line and continue to be drawn from the disconnection point.
[0122] For example, if five points are uploaded and grouped as [0,3][3,2] (meaning three points starting from the 0th point and two points starting from the third point, i.e. 012 and 34), the drawing effect is to create one line, but two lines are drawn in the computer. Fig.14 As shown, this technology can be used to achieve the effect of multiple lines by drawing only one line.
[0123] In some embodiments, a computer program is further provided. When the computer program is processed and executed, the computer program is used to implement the method for generating a pixel width line as disclosed in any of the above embodiments.
[0124] In some embodiments, a storage medium is further provided, in which instructions are stored. When a computer reads the instructions, the computer executes the method for generating a pixel width line disclosed in any of the above embodiments.
[0125] In some embodiments, a device for generating a pixel width line is further provided, comprising:
[0126] Memory for storing computer programs;
[0127] A processor is used to execute a computer program to implement the method for generating a pixel width line disclosed in any of the above embodiments.
[0128] It should be understood that the above-mentioned implementation is a product implementation corresponding to the previous method implementation. The description of the product implementation can refer to the description of the previous method implementation, and will not be repeated here.
[0129] It should be understood that, without violating the concept of the present invention, those skilled in the art may arbitrarily combine the above-mentioned embodiments, all of which are within the protection scope of the present invention.
[0130] The reader should understand that in the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "examples", "specific examples", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine different embodiments or examples described in this specification and the features of different embodiments or examples without contradiction.
[0131] In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the method embodiments described above are only illustrative, for example, the division of steps is only a logical function division, and there may be other division methods in actual implementation, such as multiple steps can be combined or integrated into another step, or some features can be ignored or not executed.
[0132] If the above method is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods of each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.
[0133] The above are only specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed by the present invention, and these modifications or replacements should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be based on the protection scope of the claims.
Claims
1. A method for generating a pixel width line, characterized in that: include: Obtain information of all vertices of the wide line to be drawn, and store the information of all the vertices in a preset array; The vertex shader draws at least one quadrilateral primitive according to information of the vertices in the array, each of the quadrilateral primitives covering a line segment formed by two adjacent vertices; Calculate the texture coordinates of each vertex of the wide line to be drawn; The fragment shader shades all generated quadrilateral primitives according to the texture coordinates to generate pixel-wide lines.
2. The method for generating a pixel width line according to claim 1, characterized in that: Obtaining information about all vertices of the wide line to be drawn, and storing the information about all the vertices in a preset array, specifically includes: Obtain information of all vertices of the wide line to be drawn, and determine the starting point and the end point, wherein the vertex information includes: vertex coordinates, the distance between the vertex and the starting point, and a disconnection flag; The vertex coordinates of all the vertices, the distance between the vertex and the starting point, and the disconnection flag are stored in a preset one-dimensional array, and the information of a starting point is additionally stored at the first position of the one-dimensional array, and the information of an end point is additionally stored at the last position of the one-dimensional array.
3. The method for generating a pixel width line according to claim 2, characterized in that: The vertex shader draws at least one quadrilateral primitive according to the vertex information in the array, specifically comprising: The vertex shader obtains information of four vertices from the array in sequence each time, and steps at a spacing of one vertex, offsetting one vertex each time it obtains information until information of all vertices in the array is obtained; The vertex shader calculates the position offset of the vertex at the corner according to the information of the four vertices obtained each time, determines the vertices of the quadrilateral primitive according to the calculated position offset result, and draws the quadrilateral primitive according to the obtained vertices of the quadrilateral primitive.
4. The method for generating a pixel width line according to claim 3, characterized in that: The vertex shader calculates the position offset of the vertex at the corner based on the information of the four vertices obtained each time, including: The vertex shader calculates the vertices of two triangle primitives each time based on the information of the four vertices obtained. The two triangle primitives are combined into one quadrilateral primitive, including: Calculate the vertex position of the i-th triangle primitive, and multiply the calculated vertex position of the i-th triangle primitive by the corresponding model view matrix to obtain the camera space position of the vertex of the i-th triangle primitive; Transform the camera space position of the vertex of the i-th triangle primitive into the standard device space, and calculate the vector dir from the starting point to the end point of the vertex of the i-th triangle primitive i , and the vector dir from the starting point to the midpoint i 1 and the vector dir from the midpoint to the end point i 2; Calculate the vector dir of the i-th triangle primitive i The vector dir i 1 Cosine value, according to which it is determined whether to adjust the vector dir i direction and side length of the i-th triangle primitive; Calculate the perpendicular to the vector dir i The vector offset of the i-th triangle primitive is determined according to the vertex sequence of drawing the i-th triangle primitive, the compensation weight of the line width at the current angle is calculated according to the cosine value, and the line width is determined according to the compensation weight; offsetting the midpoint of the i-th triangle primitive according to the line width to obtain a position after the offset; Wherein, i=1,2,…,2N, and N is the number of quadrilateral primitives.
5. The method for generating a pixel width line according to claim 4, characterized in that: The first side of the drawn quadrilateral primitive is parallel to the third side, and the first side is parallel to the line segment covered by the corresponding quadrilateral primitive, and the vertices of the covered line segment are respectively located on the second side and the fourth side of the corresponding quadrilateral primitive; Among them, the first side and the third side are opposite sides of the quadrilateral primitive, the second side and the fourth side are opposite sides of the quadrilateral primitive, and the first side and the second side are adjacent sides.
6. The method for generating a pixel width line according to claim 5, characterized in that: The mapping coordinates of each vertex of all the quadrilateral primitives are calculated according to the following formula, specifically including: InstacnePrevDist*(1-a)+InstaceNextDist*a Among them, InstacePrevDist is the distance from the previous vertex of the current vertex to the starting point, InstaceNextDist is the distance from the next vertex of the current vertex to the starting point, and a is a value determined according to the vertex order of drawing the triangle primitive, and a is 0 or 1.
7. The method for generating a pixel width line according to claim 6, characterized in that: The vertex shader sequentially obtains information of four vertices from the array each time, and the vertex shader draws at least one quadrilateral primitive according to the information of the vertices in the array, specifically including: The vertex shader obtains information of four vertices from the array in turn each time, and determines whether the current vertex is disconnected according to the disconnect flag. When the current vertex is disconnected, it determines whether the disconnect flag of the next adjacent vertex is disconnected. When the next vertex is also disconnected, the quadrilateral primitive from the current vertex to the next vertex is not drawn.
8. A computer program, characterized in that The computer program is used to implement the method for generating a pixel width line according to any one of claims 1 to 7 when being processed and executed.
9. A storage medium, characterized in that: The storage medium stores instructions, and when a computer reads the instructions, the computer executes the method for generating a pixel width line according to any one of claims 1 to 7.
10. A device for generating a pixel width line, characterized in that: include: Memory for storing computer programs; A processor is used to execute the computer program to implement the method for generating a pixel width line according to any one of claims 1 to 7.