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

This article introduces you how to draw Bezier curve in OpenGL practice, the content is very detailed, interested friends can refer to, hope to be helpful to you.

When it comes to Bezier curves, we are certainly no stranger. There are many excellent articles and dynamic diagrams on the Internet about introducing and understanding Bezier curves.

The following two are more classic motion pictures.

Second-order Bezier curve:

Image

Third-order Bezier curve:

Image

Since you often have to deal with Bezier curves at work, let's briefly talk about your understanding:

Now suppose we want to draw a straight line in the coordinate system, and the equation of the straight line is very simple, which is yyogx, and it's easy to get the following picture:

Image.png

Now let's limit the closed interval in which the range of x is 0 to 1, then we can find that the range of y is also 0 to 1.

How many numbers can x take in the range of 0 to 1? The answer is, of course, countless.

Image.png

By the same token, there are countless values for y. Every x has a unique y corresponding to it, and a (XMagol y) is a point in the coordinate system.

So the resulting segment of the 0-1 interval is actually made up of innumerable points.

So how long is this segment? The length is determined by the range of the value of x. If the value of x is 0-2, then the length of the line is twice as long.

In addition, if the range of x is not innumerable, but increases from 0 to 1 at a distance of 0.05, then you get a series of points.

Because a point is an ideal description, it has no width, height or area in mathematics.

However, if you draw a dot on draft paper, whether you use a pencil, brush, fountain brush or paintbrush, a dot will always occupy an area.

The area of a point drawn by a brush may require dozens of points in pencil drawing.

In real life, if you want to draw a series of points of x in the range of 0: 1 in the first coordinate diagram at a distance of 0.05, the final result is no different from drawing a line segment directly.

This is the difference between reality and ideal. A string of ideal points and a line of reality.

Let's put this logic on the phone screen.

The smallest display unit on a mobile phone screen is pixels, and a 1920 by 1080 screen refers to the number of pixels in all directions.

If you draw a line as wide as the screen, a point is at least one pixel, at most 1080 points.

The more pixels dots occupy, the fewer points are needed for actual painting, which is also a potential optimization item.

After saying the straight line, go back to the Bezier curve.

Curves and straight lines have one thing in common, they all have their own specific equations, but the straight line example we use is relatively simple, that is, y = x, we can see the calculation results at a glance.

The linear equation y = x can be described mathematically as follows: y is a function of x, that is, y = F (x), where the value of x determines the length of the line.

According to the above understanding, a straight line of this length is actually made up of countless points corresponding to the value of x.

In contrast, the Bezier curve equation and the corresponding figure are as follows:

Second-order Bezier curve: where P0 and P2 are the starting points and P1 is the control point.

Image.png

Image.png

In the third-order Bezier curve, P0 and P3 are the starting points, and P1 and P2 are control points.

Image.png

Image.png

It is not difficult to understand that if we want to draw a curve, there must be start and end points to specify the range curve of the curve.

The control point is to specify the Radian of the curve, or to specify the bending direction of the curve, different control points get different results of the curve.

In addition, it can be observed that no matter how many orders of the Bezier curve, there is a limit to the value range of the parameter t and t.

T is in the closed interval of 0: 1, then the number of values of t is actually innumerable, and t can be understood as the x mentioned in the above introduction line.

In this way, the starting point and control point can be fixed at the beginning, then the calculation formula of Bezier curve becomes B = F (t), B is a function about t, and the value range of t is a closed interval of 0: 1.

That is to say, the Bezier curve, when the starting point and control point are selected, can still be regarded as composed of countless points corresponding to t in the 0: 1 closed interval.

With the above description, it is not difficult to understand how Bezier curves are used from a ban zhuan point of view.

Drawing Bezier Curve with Android

Android has its own Bezier curve drawing API, which can be drawn through the quadTo and cubicTo methods of the Path class.

1 / / build the path path, that is, select 2 path.reset (); 3 path.moveTo (p0x, p0y); 4 / draw the second order Bezier curve 5 path.quadTo (p1x, p1y, p2x, p2y); 6 path.moveTo (p0x, p0y); 7 path.close (); 8 9 / the final drawing operation 10 canvas.drawPath (path, paint)

The drawing here actually gives the equation of Bezier curve calculation to the Android system to complete, and only the starting point and control point are transferred on the parameter transfer.

We can calculate this equation through our own code to gain more control over the logic, that is, to split the curve into many points, and if the size of the points is relatively large, we can even reduce the number of points to achieve the same effect. To achieve the purpose of drawing optimization.

OpenGL drawing

The above scheme can be realized by OpenGL, which divides the curve into multiple points. This scheme requires us to calculate the Bezier curve equation on CPU, calculate a Bessel point according to each value of t, and use OpenGL to draw this point.

This point can be drawn in the form of triangle GL_TRIANGLES in OpenGL, so it can give the point texture effect, but there are a little more potholes, and the realization of dynamic variable starting point and control point at run time will be more difficult than fixed.

Here we first introduce another scheme, which is relatively simple to implement and can achieve the optimization effect. We can give the calculation equation of the Bezier curve to GPU and complete it in OpenGL Shader.

In this way, as long as we give the starting point and control point, the process of calculating the Bezier curve to fill the point is left to Shader.

In addition, by controlling the number of t, we can control the density of Bessel point filling.

The larger the t is, the more points are filled. After exceeding a certain threshold, the rendering effect will not be improved, but the performance will be affected.

The smaller the t, the Bezier curve will degenerate into a series of points. Therefore, the value range of t can also play an optimization role in rendering.

The drawing effect is shown in the following figure:

Image

The following is the actual code part, on the basic theory of OpenGL can refer to the previously written articles and official accounts, no longer elaborate.

Define a function in Shader to implement the Bessel equation:

1vec2 fun (in vec2 p0, in vec2 p1, in vec2 p2, in vec2 p3, in float t) {2 float tt = (1.0-t) * (1.0-t); 3 return tt * (1.0-t) * p04 + 3.0 * t * tt * p15 + 3.0 * t * t * (1.0-t) * p26 + t * t * p3scape 7}

The equation can be optimized by using the function included in Shader:

1vec2 fun2 (in vec2 p0, in vec2 p1, in vec2 p2, in vec2 p3, in float t) 2 {3 vec2 Q0 = mix (p0, p1, t); 4 vec2 Q1 = mix (p1, p2, t); 5 vec2 Q2 = mix (p2, p3, t); 6 vec2 R0 = mix (Q0, Q1, t); 7 vec2 R1 = mix (Q1, Q2, t); 8 return mix (R0, R1, t); 9}

Then there is the specific vertex shader shader:

1 2attribute float aData; / corresponding t data transfer 2attribute float aData; 3Universe / corresponding starting point and ending point 4uniform vec4 uStartEndData; 5Universe / corresponding control point 6uniform vec4 uControlData; 7pm / mvp matrix 8uniform mat4 uplink MVPMatrix; 910void main () {11 vec4 pos;12 pos.w = 1.0transfer13 / / take out the starting point, end point, control point 14 vec2 p0 = uStartEndData.xy;15 vec2 p3 = uStartEndData.zw;16 vec2 p1 = uControlData.xy;17 vec2 p2 = uControlData.zw 18 / / take out the value of t 19 float t = aData;20 / / the function call to calculate the Bessel point 21 vec2 point = fun2 (p0, p1, p2, p3, t); 22 / define the x _ pos.xy y coordinates of the point 23 pos.xy = point;24 / / the location to be drawn 25 gl_Position = u_MVPMatrix * pos;26 / / the size of the definition point 27 gl_PointSize = 20.0X 28}

The uStartEndData in the code corresponds to the start and end points, and the uControlData corresponds to two control points.

The data of these two variables can be passed through the glUniform4f method:

1 mStartEndHandle = glGetUniformLocation (mProgram, "uStartEndData"); 2 mControlHandle = glGetUniformLocation (mProgram, "uControlData"); 3 / pass data as fixed values 4 glUniform4f (mStartEndHandle, 5 mStartEndPoints [0], 6 mStartEndPoints [1], 7 mStartEndPoints [2], 8 mStartEndPoints [3]); 9 glUniform4f (mControlHandle,10 mControlPoints [0], 11 mControlPoints [1], 12 mControlPoints [2], 13 mControlPoints [3])

Another important variable is aData, which corresponds to the number of partitions of t in the 0: 1 closed interval.

1 private float [] genTData () {2 float [] tData = new float [Const.NUM _ POINTS]; 3 for (int I = 0; I < tData.length; I + +) {4 float t = (float) I / (float) tData.length;5 tData [I] = tten 6} 7 return tData;8}

The above function is to divide t into Const.NUM_POINTS parts in the closed interval of 0: 1, and the value of each part is stored in the tData array, and finally passed to Shader through the glVertexAttribPointer function.

Finally, when we actually draw, we just draw in the form of GL_POINTS.

1 GLES20.glDrawArrays (GLES20.GL_POINTS, 0, Const.NUM_POINTS); on how to draw Bezier curves in OpenGL practice is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.