即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

OpenGL 零门槛初步入门基础知识教程 之 彩色立方体

编程语言 misayaaaaa 14℃ 0评论

参考资料:http://www.opengl-tutorial.org/cn/beginners-tutorials/tutorial-4-a-colored-cube/




知识点1:顶点属性缓冲、色彩属性缓冲的创建流程




顶点属性缓冲首先给定数组:

static const GLfloat g_vertex_buffer_data[] = { 
  -1.0f,-1.0f,-1.0f,
  -1.0f,-1.0f, 1.0f,
  -1.0f, 1.0f, 1.0f,
   1.0f, 1.0f,-1.0f,
  -1.0f,-1.0f,-1.0f,
  -1.0f, 1.0f,-1.0f,
   1.0f,-1.0f, 1.0f,
  -1.0f,-1.0f,-1.0f,
   1.0f,-1.0f,-1.0f,
   1.0f, 1.0f,-1.0f,
   1.0f,-1.0f,-1.0f,
  -1.0f,-1.0f,-1.0f,
  -1.0f,-1.0f,-1.0f,
  -1.0f, 1.0f, 1.0f,
  -1.0f, 1.0f,-1.0f,
   1.0f,-1.0f, 1.0f,
  -1.0f,-1.0f, 1.0f,
  -1.0f,-1.0f,-1.0f,
  -1.0f, 1.0f, 1.0f,
  -1.0f,-1.0f, 1.0f,
   1.0f,-1.0f, 1.0f,
   1.0f, 1.0f, 1.0f,
   1.0f,-1.0f,-1.0f,
   1.0f, 1.0f,-1.0f,
   1.0f,-1.0f,-1.0f,
   1.0f, 1.0f, 1.0f,
   1.0f,-1.0f, 1.0f,
   1.0f, 1.0f, 1.0f,
   1.0f, 1.0f,-1.0f,
  -1.0f, 1.0f,-1.0f,
   1.0f, 1.0f, 1.0f,
  -1.0f, 1.0f,-1.0f,
  -1.0f, 1.0f, 1.0f,
   1.0f, 1.0f, 1.0f,
  -1.0f, 1.0f, 1.0f,
   1.0f,-1.0f, 1.0f
 };



再进行定义、创建、绑定、填充缓冲

GLuint vertexbuffer;
 glGenBuffers(1, &vertexbuffer);
 glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
 glBufferData(GL_ARRAY_BUFFER, sizeof(g_vertex_buffer_data), g_vertex_buffer_data, GL_STATIC_DRAW);




再在主循环中进行配置

glEnableVertexAttribArray(0); //启用0号顶点数组
  glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer); //绑定缓冲
  glVertexAttribPointer(      //设置其中属性
   0,                  // attribute. No particular reason for 0, but must match the layout in the shader.
   3,                  // size
   GL_FLOAT,           // type
   GL_FALSE,           // normalized?
   0,                  // stride
   (void*)0            // array buffer offset
  );




颜色属性缓冲

static const GLfloat g_color_buffer_data[] = { 
  0.583f,  0.771f,  0.014f,
  0.609f,  0.115f,  0.436f,
  0.327f,  0.483f,  0.844f,
  0.822f,  0.569f,  0.201f,
  0.435f,  0.602f,  0.223f,
  0.310f,  0.747f,  0.185f,
  0.597f,  0.770f,  0.761f,
  0.559f,  0.436f,  0.730f,
  0.359f,  0.583f,  0.152f,
  0.483f,  0.596f,  0.789f,
  0.559f,  0.861f,  0.639f,
  0.195f,  0.548f,  0.859f,
  0.014f,  0.184f,  0.576f,
  0.771f,  0.328f,  0.970f,
  0.406f,  0.615f,  0.116f,
  0.676f,  0.977f,  0.133f,
  0.971f,  0.572f,  0.833f,
  0.140f,  0.616f,  0.489f,
  0.997f,  0.513f,  0.064f,
  0.945f,  0.719f,  0.592f,
  0.543f,  0.021f,  0.978f,
  0.279f,  0.317f,  0.505f,
  0.167f,  0.620f,  0.077f,
  0.347f,  0.857f,  0.137f,
  0.055f,  0.953f,  0.042f,
  0.714f,  0.505f,  0.345f,
  0.783f,  0.290f,  0.734f,
  0.722f,  0.645f,  0.174f,
  0.302f,  0.455f,  0.848f,
  0.225f,  0.587f,  0.040f,
  0.517f,  0.713f,  0.338f,
  0.053f,  0.959f,  0.120f,
  0.393f,  0.621f,  0.362f,
  0.673f,  0.211f,  0.457f,
  0.820f,  0.883f,  0.371f,
  0.982f,  0.099f,  0.879f
 };



颜色缓冲的创建、绑定、填充

GLuint colorbuffer;
glGenBuffer(1,&colorbuffer);
glBindBuffer(GL_ARRAY_BUFFER,colorbuffer);
glBufferData(GL_ARRAY_BUFFER,sizeof(g_color_buffer_data),g_color_buffer_data,GL_STATIC_DRAW);






属性配置

glEnableVertexAttribArray(1);
  glBindBuffer(GL_ARRAY_BUFFER, colorbuffer);
  glVertexAttribPointer(
   1,                                // attribute. No particular reason for 1, but must match the layout in the shader.
   3,                                // size
   GL_FLOAT,                         // type
   GL_FALSE,                         // normalized?
   0,                                // stride
   (void*)0                          // array buffer offset
  );





知识点2:深度缓冲(Z-Buffer)

在缓冲中存储每个片段的深度(即”Z”值);并且每次绘制片段之前要比较当前与先前片段的深度值,看谁离摄像机更近。





您可以自己实现深度缓冲,但让硬件自动完成更简单:


// Enable depth test
glEnable(GL_DEPTH_TEST);
// Accept fragment if it closer to the camera than the former one
glDepthFunc(GL_LESS);



在清除屏幕时,你还需要清除除了颜色以外每一帧(frame)的深度。

// Clear the screen
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);





知识点3:随机数的生成C++/C

头文件

#include
#include





两个函数

       函数一:int rand(void);


从srand (seed)中指定的seed开始,返回一个[seed, RAND_MAX(0x7fff))间的随机整数。


       函数二:void srand(unsigned seed);


参数seed是rand()的种子,用来初始化rand()的起始值。




       可以认为rand()在每次被调用的时候,它会查看:


1)如果用户在此之前调用过srand(seed),给seed指定了一个值,那么它会自动调用


      srand(seed)一次来初始化它的起始值。


2)如果用户在此之前没有调用过srand(seed),它会自动调用srand(1)一次。 




根据上面的第一点我们可以得出:


1)如果希望rand()在每次程序运行时产生的值都不一样,必须给srand(seed)中的seed一个变值,这个变值必须在每次程序运行时都不一样(比如到目前为止流逝的时间)。


2)否则,如果给seed指定的是一个定值,那么每次程序运行时rand()产生的值都会一样,虽然这个值会是[seed, RAND_MAX(0x7fff))之间的一个随机取得的值。


3)如果在调用rand()之前没有调用过srand(seed),效果将和调用了srand(1)再调用rand()一样(1也是一个定值)。





C++代码:

static GLfloat g_color_buffer_data[12*3*3];
 srand((unsigned)time(0));
 for (int i = 0; i < 12*3; i++)
 {
  g_color_buffer_data[3*i+0] = rand()/float(RAND_MAX);
  g_color_buffer_data[3*i+1] = rand()/float(RAND_MAX);
  g_color_buffer_data[3*i+2] = rand()/float(RAND_MAX);
 }





自己修改的代码的特殊之处

1:使用随机数生成颜色,每次运行生成的颜色皆不相同

2:使用不同的MVP,在不同位置画出立体

3:实现每一帧变化不同的颜色




// Include standard headers
#include 
#include 
#include 
#include 

// Include GLEW
#include 

// Include GLFW
#include 
GLFWwindow* window;

// Include GLM
#include 
#include 
#include 
using namespace glm;

#include 

int main( void )
{
 // Initialise GLFW
 if( !glfwInit() )
 {
  fprintf( stderr, "Failed to initialize GLFW\n" );
  getchar();
  return -1;
 }

 glfwWindowHint(GLFW_SAMPLES, 4);
 glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
 glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
 glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // To make MacOS happy; should not be needed
 glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

 // Open a window and create its OpenGL context
 window = glfwCreateWindow( 1024, 768, "Tutorial 04 - Colored Cube", NULL, NULL);
 if( window == NULL ){
  fprintf( stderr, "Failed to open GLFW window. If you have an Intel GPU, they are not 3.3 compatible. Try the 2.1 version of the tutorials.\n" );
  getchar();
  glfwTerminate();
  return -1;
 }
 glfwMakeContextCurrent(window);

 // Initialize GLEW
 glewExperimental = true; // Needed for core profile
 if (glewInit() != GLEW_OK) {
  fprintf(stderr, "Failed to initialize GLEW\n");
  getchar();
  glfwTerminate();
  return -1;
 }

 // Ensure we can capture the escape key being pressed below
 glfwSetInputMode(window, GLFW_STICKY_KEYS, GL_TRUE);

 // Dark blue background
 glClearColor(0.0f, 0.0f, 0.4f, 0.0f);


 /****深度缓冲 Z-BUFFER 保证离相机进的在上层****/
 // Enable depth test
 glEnable(GL_DEPTH_TEST);
 // Accept fragment if it closer to the camera than the former one
 glDepthFunc(GL_LESS); 

 GLuint VertexArrayID;
 glGenVertexArrays(1, &VertexArrayID);
 glBindVertexArray(VertexArrayID);

 // Create and compile our GLSL program from the shaders
 GLuint programID = LoadShaders( "TransformVertexShader.vertexshader", "ColorFragmentShader.fragmentshader" );

 // Get a handle for our "MVP" uniform
 GLuint MatrixID = glGetUniformLocation(programID, "MVP");

 // Projection matrix : 45?Field of View, 4:3 ratio, display range : 0.1 unit <-> 100 units
 glm::mat4 Projection = glm::perspective(45.0f, 4.0f / 3.0f, 0.1f, 100.0f);
 // Camera matrix
 glm::mat4 View       = glm::lookAt(
        glm::vec3(4,3,-3), // Camera is at (4,3,-3), in World Space
        glm::vec3(0,0,0), // and looks at the origin
        glm::vec3(0,1,0)  // Head is up (set to 0,-1,0 to look upside-down)
         );
 // Model matrix : an identity matrix (model will be at the origin)
    glm:mat4 rotate_model = glm::rotate(30.0f,glm::vec3(1.0f, 0.0f, 0.0f));
 glm::mat4 myMatrix = glm::translate(glm::vec3(2.5f, 0.0f, 0.0f));      //平移矩阵
 glm::mat4 Model      = glm::mat4(1.0f);

 // Our ModelViewProjection : multiplication of our 3 matrices
 glm::mat4 MVP        = Projection * View * Model; // Remember, matrix multiplication is the other way around
 glm::mat4 MVP1        = Projection * View * Model*myMatrix; // Remember, matrix multiplication is the other way around


 // Our vertices. Tree consecutive floats give a 3D vertex; Three consecutive vertices give a triangle.
 // A cube has 6 faces with 2 triangles each, so this makes 6*2=12 triangles, and 12*3 vertices
 static const GLfloat g_vertex_buffer_data[] = { 
  -1.0f,-1.0f,-1.0f,
  -1.0f,-1.0f, 1.0f,
  -1.0f, 1.0f, 1.0f,
   1.0f, 1.0f,-1.0f,
  -1.0f,-1.0f,-1.0f,
  -1.0f, 1.0f,-1.0f,
   1.0f,-1.0f, 1.0f,
  -1.0f,-1.0f,-1.0f,
   1.0f,-1.0f,-1.0f,
   1.0f, 1.0f,-1.0f,
   1.0f,-1.0f,-1.0f,
  -1.0f,-1.0f,-1.0f,
  -1.0f,-1.0f,-1.0f,
  -1.0f, 1.0f, 1.0f,
  -1.0f, 1.0f,-1.0f,
   1.0f,-1.0f, 1.0f,
  -1.0f,-1.0f, 1.0f,
  -1.0f,-1.0f,-1.0f,
  -1.0f, 1.0f, 1.0f,
  -1.0f,-1.0f, 1.0f,
   1.0f,-1.0f, 1.0f,
   1.0f, 1.0f, 1.0f,
   1.0f,-1.0f,-1.0f,
   1.0f, 1.0f,-1.0f,
   1.0f,-1.0f,-1.0f,
   1.0f, 1.0f, 1.0f,
   1.0f,-1.0f, 1.0f,
   1.0f, 1.0f, 1.0f,
   1.0f, 1.0f,-1.0f,
  -1.0f, 1.0f,-1.0f,
   1.0f, 1.0f, 1.0f,
  -1.0f, 1.0f,-1.0f,
  -1.0f, 1.0f, 1.0f,
   1.0f, 1.0f, 1.0f,
  -1.0f, 1.0f, 1.0f,
   1.0f,-1.0f, 1.0f
 };

 // One color for each vertex. They were generated randomly.

 //随机数方法,每次运行的颜色都不同
 static GLfloat g_color_buffer_data[12*3*3];
 srand((unsigned)time(0));
 for (int i = 0; i < 12*3; i++)
 {
  g_color_buffer_data[3*i+0] = rand()/float(RAND_MAX);
  g_color_buffer_data[3*i+1] = rand()/float(RAND_MAX);
  g_color_buffer_data[3*i+2] = rand()/float(RAND_MAX);
 }

//  static const GLfloat g_color_buffer_data[] = { 
//   0.583f,  0.771f,  0.014f,
//   0.609f,  0.115f,  0.436f,
//   0.327f,  0.483f,  0.844f,
//   0.822f,  0.569f,  0.201f,
//   0.435f,  0.602f,  0.223f,
//   0.310f,  0.747f,  0.185f,
//   0.597f,  0.770f,  0.761f,
//   0.559f,  0.436f,  0.730f,
//   0.359f,  0.583f,  0.152f,
//   0.483f,  0.596f,  0.789f,
//   0.559f,  0.861f,  0.639f,
//   0.195f,  0.548f,  0.859f,
//   0.014f,  0.184f,  0.576f,
//   0.771f,  0.328f,  0.970f,
//   0.406f,  0.615f,  0.116f,
//   0.676f,  0.977f,  0.133f,
//   0.971f,  0.572f,  0.833f,
//   0.140f,  0.616f,  0.489f,
//   0.997f,  0.513f,  0.064f,
//   0.945f,  0.719f,  0.592f,
//   0.543f,  0.021f,  0.978f,
//   0.279f,  0.317f,  0.505f,
//   0.167f,  0.620f,  0.077f,
//   0.347f,  0.857f,  0.137f,
//   0.055f,  0.953f,  0.042f,
//   0.714f,  0.505f,  0.345f,
//   0.783f,  0.290f,  0.734f,
//   0.722f,  0.645f,  0.174f,
//   0.302f,  0.455f,  0.848f,
//   0.225f,  0.587f,  0.040f,
//   0.517f,  0.713f,  0.338f,
//   0.053f,  0.959f,  0.120f,
//   0.393f,  0.621f,  0.362f,
//   0.673f,  0.211f,  0.457f,
//   0.820f,  0.883f,  0.371f,
//   0.982f,  0.099f,  0.879f
//  };

 //缓冲的创建、绑定和填充方法
 GLuint vertexbuffer;
 glGenBuffers(1, &vertexbuffer);
 glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
 glBufferData(GL_ARRAY_BUFFER, sizeof(g_vertex_buffer_data), g_vertex_buffer_data, GL_STATIC_DRAW);

 GLuint colorbuffer;
 glGenBuffers(1, &colorbuffer);
 glBindBuffer(GL_ARRAY_BUFFER, colorbuffer);
 glBufferData(GL_ARRAY_BUFFER, sizeof(g_color_buffer_data), g_color_buffer_data, GL_STATIC_DRAW);

 do{

  // Clear the screen
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

  // Use our shader
  glUseProgram(programID);

  // Send our transformation to the currently bound shader, 
  // in the "MVP" uniform
  glUniformMatrix4fv(MatrixID, 1, GL_FALSE, &MVP[0][0]);

  // 1rst attribute buffer : vertices
  glEnableVertexAttribArray(0);
  glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
  glVertexAttribPointer(
   0,                  // attribute. No particular reason for 0, but must match the layout in the shader.
   3,                  // size
   GL_FLOAT,           // type
   GL_FALSE,           // normalized?
   0,                  // stride
   (void*)0            // array buffer offset
  );

  // 2nd attribute buffer : colors
  glEnableVertexAttribArray(1);
  glBindBuffer(GL_ARRAY_BUFFER, colorbuffer);
  glBufferData(GL_ARRAY_BUFFER, sizeof(g_color_buffer_data), g_color_buffer_data, GL_DYNAMIC_DRAW);
  glVertexAttribPointer(
   1,                                // attribute. No particular reason for 1, but must match the layout in the shader.
   3,                                // size
   GL_FLOAT,                         // type
   GL_FALSE,                         // normalized?
   0,                                // stride
   (void*)0                          // array buffer offset
  );

  // Draw the triangle !
  glDrawArrays(GL_TRIANGLES, 0, 12*3); // 12*3 indices starting at 0 -> 12 triangles

  glDisableVertexAttribArray(0);
  glDisableVertexAttribArray(1);

  //此处无需再交换帧数
  // Swap buffers
//   glfwSwapBuffers(window);
//   glfwPollEvents();


  //画出第二个立方体
  // Send our transformation to the currently bound shader, 
  // in the "MVP" uniform
  glUniformMatrix4fv(MatrixID, 1, GL_FALSE, &MVP1[0][0]);

  // 1rst attribute buffer : vertices
  glEnableVertexAttribArray(0);
  glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
  glVertexAttribPointer(
   0,                  // attribute. No particular reason for 0, but must match the layout in the shader.
   3,                  // size
   GL_FLOAT,           // type
   GL_FALSE,           // normalized?
   0,                  // stride
   (void*)0            // array buffer offset
   );

  // 2nd attribute buffer : colors
  glEnableVertexAttribArray(1);
  glBindBuffer(GL_ARRAY_BUFFER, colorbuffer);
  glBufferData(GL_ARRAY_BUFFER, sizeof(g_color_buffer_data), g_color_buffer_data, GL_DYNAMIC_DRAW);
  glVertexAttribPointer(
   1,                                // attribute. No particular reason for 1, but must match the layout in the shader.
   3,                                // size
   GL_FLOAT,                         // type
   GL_FALSE,                         // normalized?
   0,                                // stride
   (void*)0                          // array buffer offset
   );

  // Draw the triangle !
  glDrawArrays(GL_TRIANGLES, 0, 12*3); // 12*3 indices starting at 0 -> 12 triangles

  glDisableVertexAttribArray(0);
  glDisableVertexAttribArray(1);


  //此处将颜色生成矩阵加入,得到随帧数变化的结果
  srand((unsigned)time(0));
  for (int i = 0; i < 12*3; i++)
  {
   g_color_buffer_data[3*i+0] = rand()/float(RAND_MAX);
   g_color_buffer_data[3*i+1] = rand()/float(RAND_MAX);
   g_color_buffer_data[3*i+2] = rand()/float(RAND_MAX);
  }

  // Swap buffers
  glfwSwapBuffers(window);
  glfwPollEvents();

 } // Check if the ESC key was pressed or the window was closed
 while( glfwGetKey(window, GLFW_KEY_ESCAPE ) != GLFW_PRESS &&
     glfwWindowShouldClose(window) == 0 );

 // Cleanup VBO and shader
 glDeleteBuffers(1, &vertexbuffer);
 glDeleteBuffers(1, &colorbuffer);
 glDeleteProgram(programID);
 glDeleteVertexArrays(1, &VertexArrayID);

 // Close OpenGL window and terminate GLFW
 glfwTerminate();

 return 0;
}


转载请注明:CodingBlog » OpenGL 零门槛初步入门基础知识教程 之 彩色立方体

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情