{"id":186,"date":"2016-08-31T03:11:00","date_gmt":"2016-08-30T18:11:00","guid":{"rendered":"https:\/\/posuer000.wordpress.com\/?p=186"},"modified":"2018-12-28T12:54:10","modified_gmt":"2018-12-28T03:54:10","slug":"b-spline-surface-implementation-with-opengl","status":"publish","type":"post","link":"https:\/\/www.wanggengyu.com\/?p=186","title":{"rendered":"B-Spline Surface Implementation with OpenGL"},"content":{"rendered":"

In this implementation, instead of using any B-Spline built-in functions of OpenGL, I made my own functions calculate points on surface base on given knots and control points.<\/p>\n

\"capture\"<\/p>\n

OK, let’s start!<\/p>\n

Basic Information<\/h3>\n

First of all, I want to specify some notations in this implementation.<\/p>\n

Here are two core expression of B-Spline curve<\/strong>.
\n
\n\"\u56fe\u72471\"\"\u56fe\u72472\"<\/p>\n

and here is the\u00a0linear combination of B-spline surface<\/strong>. They use the same expressions for the polynomial pieces ( N() function).<\/p>\n

\"\u56fe\u72473\"<\/p>\n

If you do not understand these expressions clearly yet, I\u00a0recommend you read this tutorial\u00a0below before going on. Knowledge\u00a0in Unit 6 and 8 is enough for this implementation.<\/p>\n

<CS3621 Introduction to Computing with Geometry Notes><\/a><\/p>\n

<You can download the complete runnable code and input file at the end of this page.><\/p>\n

Input Data<\/strong> (knots vector and control points)<\/h3>\n

Here is an example to help you have intuition view on input data. Since we are making a\u00a0surface, we have U and V two directions.<\/p>\n


\n6 6 \/\/the number of control points in U and V directions.
\n2 2 \/\/the degree of U and V direction
\n0 0 0 0.2 0.5 0.7 1 1 1 \/\/knots in U direction
\n0 0 0 0.2 0.5 0.7 1 1 1 \/\/knots in V direction
\n-30 -36 -30 \/\/first control point\u2019s 3D coordinates in U and V direction
\n-30 -26 -20 \/\/ secondcontrol point
\n....... \/\/Other 36 control points in this example. control points\u2019 coordinates in row-major order. The row is V direction, the column is U direction
\n<\/code>
\nFrom this example, we have these variables.<\/p>\n


\nnumContrU = 6, numContrV = 6 \/\/numbers of control points<\/p>\n

degreeU = 2, degreeV = 2 \/\/ degree
\nknotU[numContrU + degreeU + 1] = 0 0 0 0.2 0.5 0.7 1 1 1
\nknotV[numContrV + degreeV + 1] = 0 0 0 0.2 0.5 0.7 1 1 1
\n<\/code><\/p>\n

The introduction\u00a0of the code for reading input data will be omitted here.<\/p>\n

B-Spline Function (core code)<\/h3>\n

First, for the B-Spline basic functions(Cox-de Boor recursion formula)<\/i><\/p>\n

\"\u56fe\u72471\"<\/p>\n

I wrote a recursive function deBoor()<\/p>\n


\nfloat deBoor(int i, int p, float u, float *knots){
\nfloat equationR, equationL;\/\/right coefficient and left coefficient<\/p>\n

if (p == 0){
\nif (u &amp;gt;= knots[i] &amp;amp;&amp;amp; (u &amp;lt; knots[i + 1]))
\nreturn 1;
\nelse return 0;
\n}
\nelse{
\nif ((knots[i + p] - knots[i]) == 0) equationR = 0; \/\/Prevent divide by zero
\nelse equationR = ((u - knots[i]) \/ (knots[i + p] - knots[i]));
\nif ((knots[i + p + 1] - knots[i + 1]) == 0) equationL = 0; \/\/ Prevent divide by zero
\nelse equationL = ((knots[i + p + 1] - u) \/ (knots[i + p + 1] - knots[i + 1]));
\nreturn equationR * deBoor(i, p - 1, u, knots) + equationL * deBoor(i + 1, p - 1, u, knots);
\n}
\n}
\n<\/code><\/p>\n

After calculating the\u00a0deBoor(), it’s the time to get the points on the surface\u00a0by Control Points. I wrote a function to do this job.<\/p>\n

\"\u56fe\u72473\"<\/p>\n


\nvoid bSpline(){<\/p>\n

for (int u = 0; u &amp;lt; numSegment; u++) \/\/for each point on the surface, 20*20 points for this surface
\nfor (int v = 0; v &amp;lt; numSegment; v++){
\nfor (int i = 0; i &amp;lt;= numContrU; i++)\/\/for each control points
\nfor (int j = 0; j &amp;lt;= numContrV; j++){
\nP[u][v] = P[u][v] + ctlPoints[i][j] * double(deBoor(i, degreeU, u*piece, knotU) * deBoor(j, degreeV, v*piece, knotV));
\n}
\n}
\n}
\n<\/code><\/p>\n

Normal Vectors<\/h3>\n

I wrote a function(vertexNormal) calculate the normal vector of each vertex(smooth shading) and face (flat shading) on the surface.<\/p>\n


\nVec3 faceNormal(Vec3 a, Vec3 b, Vec3 c){
\nVec3 ab = a - b;
\nVec3 ac = a - c;
\nVec3 cross = ab.crossProduct(ac);
\nreturn cross.normalize();
\n}<\/p>\n

void vertexNormal(){
\nfor (int i = 0; i &amp;lt; numSegment-1; i++)
\nfor (int j = 0; j &amp;lt; numSegment-1; j++){
\nfacenormal[i][j] = faceNormal(P[i][j + 1], P[i + 1][j], P[i][j]);
\n}
\n\/\/four corners
\nvertexnormal[0][0] = facenormal[0][0];
\nvertexnormal[numSegment][numSegment] = facenormal[numSegment - 1][numSegment - 1];
\nvertexnormal[0][numSegment] = facenormal[0][numSegment - 1];
\nvertexnormal[numSegment][0] = facenormal[numSegment - 1][0];
\n\/\/four edge
\nfor (int i = 1; i &amp;lt; numSegment; i++){
\nvertexnormal[i][0] = (facenormal[i - 1][0] + facenormal[i][0]) \/ 2;
\nvertexnormal[0][i] = (facenormal[0][i-1] + facenormal[0][i]) \/ 2;
\nvertexnormal[i][19] = (facenormal[i - 1][18] + facenormal[i][18]) \/ 2;
\nvertexnormal[19][i] = (facenormal[18][i-1] + facenormal[18][i]) \/ 2;
\n}
\n\/\/others
\nfor (int i = 1; i &amp;lt; numSegment-1; i++)
\nfor (int j = 1; j &amp;lt; numSegment-1; j++){
\nvertexnormal[i][j] = (facenormal[i - 1][j - 1] + facenormal[i - 1][j] + facenormal[i][j - 1] + facenormal[i][j]) \/ 4;
\n}
\n}
\n<\/code><\/p>\n

Render the Sence<\/h3>\n

I used the\u00a0GL_TRIANGLES to generate the surface in two models(smooth shading and flat shading).<\/p>\n

If you use the GL_LIGHT_MODEL_TWO_SIDE model \u00a0for lighting, you have to be careful to arrange the order of three points of each triangle and their normal vectors.<\/p>\n

Smooth Shading<\/h4>\n

Each loop generates two triangles, all these triangles will be connected together.<\/p>\n


\nglShadeModel(GL_SMOOTH);
\nglBegin(GL_TRIANGLES);
\nfor (int i = 0; i &amp;amp;amp;lt; numSegment-1; i++){
\nfor (int j = 0; j &amp;amp;amp;lt; numSegment-1; j++){
\nglNormal3f(vertexnormal[i][j + 1].x, vertexnormal[i][j + 1].y, vertexnormal[i][j + 1].z);
\nglVertex3f(P[i][j + 1].x, P[i][j + 1].y, P[i][j + 1].z);
\nglNormal3f(vertexnormal[i + 1][j].x, vertexnormal[i + 1][j].y, vertexnormal[i + 1][j].z);
\nglVertex3f(P[i + 1][j].x, P[i + 1][j].y, P[i + 1][j].z);
\nglNormal3f(vertexnormal[i][j].x, vertexnormal[i][j].y, vertexnormal[i][j].z);
\nglVertex3f(P[i][j].x, P[i][j].y, P[i][j].z);<\/p>\n

glNormal3f(vertexnormal[i + 1][j].x, vertexnormal[i + 1][j].y, vertexnormal[i + 1][j].z);
\nglVertex3f(P[i + 1][j].x, P[i + 1][j].y, P[i + 1][j].z);
\nglNormal3f(vertexnormal[i][j + 1].x, vertexnormal[i][j + 1].y, vertexnormal[i][j + 1].z);
\nglVertex3f(P[i][j + 1].x, P[i][j + 1].y, P[i][j + 1].z);
\nglNormal3f(vertexnormal[i + 1][j + 1].x, vertexnormal[i + 1][j + 1].y, vertexnormal[i + 1][j + 1].z);
\nglVertex3f(P[i + 1][j + 1].x, P[i + 1][j + 1].y, P[i + 1][j + 1].z);
\n}
\n}
\nglEnd();
\n<\/code><\/p>\n

Flat Shading<\/h4>\n

Different from the smooth shading, there is only one normal vector for each triangle.<\/p>\n


\nVec3 facenormal1, facenormal2;
\nglShadeModel(GL_FLAT);
\nglBegin(GL_TRIANGLES);
\nfor (int i = 0; i &amp;amp;amp;lt; numSegment-1; i++){
\nfor (int j = 0; j &amp;amp;amp;lt; numSegment-1; j++){
\nfacenormal1 = faceNormal(P[i][j + 1], P[i + 1][j], P[i][j]);
\nfacenormal2 = faceNormal(P[i + 1][j + 1], P[i + 1][j], P[i][j + 1]);<\/p>\n

glNormal3f(facenormal1.x, facenormal1.y, facenormal1.z);
\nglVertex3f(P[i][j + 1].x, P[i][j + 1].y, P[i][j + 1].z);
\nglVertex3f(P[i + 1][j].x, P[i + 1][j].y, P[i + 1][j].z);
\nglVertex3f(P[i][j].x, P[i][j].y, P[i][j].z);<\/p>\n

glNormal3f(facenormal2.x, facenormal2.y, facenormal2.z);
\nglVertex3f(P[i + 1][j].x, P[i + 1][j].y, P[i + 1][j].z);
\nglVertex3f(P[i][j + 1].x, P[i][j + 1].y, P[i][j + 1].z);
\nglVertex3f(P[i+1][j+1].x, P[i+1][j+1].y, P[i+1][j+1].z);
\n}
\n}
\nglEnd()
\n<\/code><\/p>\n

Now, you have a B-Spline surface!<\/p>\n

I added some small features for this surface.<\/p>\n

Other Features<\/h3>\n

Keyboard Contol<\/h4>\n


\nvoid processSpecialKeys(int key, int x, int y)
\n{
\nswitch (key) {
\ncase GLUT_KEY_F2: \/\/Switch flat and smooth shading
\nflatSmooth = !flatSmooth;
\nbreak;
\ncase GLUT_KEY_F3: \/\/turn on\/off the control polygon
\nshowControlPolygon = !showControlPolygon;
\nbreak;
\ncase GLUT_KEY_F4: \/\/ture on\/off the wire frame
\nshowWireframe = !showWireframe;
\nglutPostRedisplay();
\nbreak;
\n\/\/change the visualization view, there is some code works together in the renderScenc function.
\ncase GLUT_KEY_LEFT:
\nyAngle += 5;
\nif (yAngle == 360) yAngle = 0;
\nbreak;
\ncase GLUT_KEY_RIGHT:
\nyAngle -= 5;
\nif (yAngle == -360) yAngle = 0;
\nbreak;
\ncase GLUT_KEY_UP:
\nxAngle += 5;
\nif (xAngle == 360) xAngle = 0;
\nbreak;
\ncase GLUT_KEY_DOWN:
\nxAngle -= 5;
\nif (xAngle == -360) xAngle = 0;
\nbreak;
\n}
\nglutPostRedisplay();
\n}
\n<\/code><\/p>\n

Flat and Smooth Shading<\/h4>\n


\nif (flatSmooth){
\n\/************ Smooth shading ****************\/
\n\/\/you can find this part of code above
\n}
\nelse {
\n\/**************Flat shading****************
\n\/\/you can find this part of code above
\n}
\n<\/code><\/p>\n

Control Polygon<\/h4>\n


\nif (showControlPolygon) {
\nglDisable(GL_LIGHTING);
\nglColor3f(1.0, 1.0, 0.0);
\nfor (int i = 0; i &amp;lt;= numContrU; i++) {
\nglBegin(GL_LINE_STRIP);
\nfor (int j = 0; j &amp;lt;= numContrV; j++) {
\nglVertex3f(ctlPoints[i][j].x, ctlPoints[i][j].y, ctlPoints[i][j].z);
\n}
\nglEnd();
\n}
\nfor (int i = 0; i &amp;lt;= numContrV; i++) {
\nglBegin(GL_LINE_STRIP);
\nfor (int j = 0; j &amp;lt;= numContrU; j++) {
\nglVertex3f(ctlPoints[j][i].x, ctlPoints[j][i].y, ctlPoints[j][i].z);
\n}
\nglEnd();
\n}
\nglEnable(GL_LIGHTING);
\n}
\n<\/code><\/p>\n

Control Polygon<\/h4>\n


\nif (showWireframe) {
\nglDisable(GL_LIGHTING);
\nglColor3f(1.0, 1.0, 1.0);
\nfor (int i = 0; i &amp;lt; numSegment; i++) {
\nglBegin(GL_LINE_STRIP);
\nfor (int j = 0; j &amp;lt; numSegment; j++) {
\nglVertex3f(P[i][j].x, P[i][j].y, P[i][j].z);
\n}
\nglEnd();
\nglBegin(GL_LINE_STRIP);
\nfor (int j = 0; j &amp;lt; numSegment; j++) {
\nglVertex3f(P[j][i].x, P[j][i].y, P[j][i].z);
\n}
\nglEnd();
\n}
\nglEnable(GL_LIGHTING);
\n}
\n<\/code><\/p>\n

Control Polygon<\/h4>\n


\n\/\/Global declaration
\nfloat xAngle = 0, yAngle = 0;
\n\/\/In the renderScence function
\nglRotatef(xAngle, 1.0f, 0.0f, 0.0f);
\nglRotatef(yAngle, 0.0f, 1.0f, 0.0f);
\n\/\/Kyeboard contol
\n\/\/In the kyeboard control function
\n<\/code><\/p>\n

Ok! That’s all!<\/p>\n

Code and input file download<\/a><\/p>\n

Thanks for reading. If you have any questions, please comment this articles.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

In this implementation, instead of using any B-Spline built-in functions of OpenGL, I made my own functions calculate points on surface base on given knots and control points. OK, let’s start! Basic Information First of all, I want to specify some notations in this implementation. Here are two core expression…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-186","post","type-post","status-publish","format-standard","hentry","category-techniques"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=\/wp\/v2\/posts\/186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=186"}],"version-history":[{"count":1,"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=\/wp\/v2\/posts\/186\/revisions"}],"predecessor-version":[{"id":683,"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=\/wp\/v2\/posts\/186\/revisions\/683"}],"wp:attachment":[{"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wanggengyu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}