example1: 使用缩放和旋转变换之前的矩形箱子#

思路：在顶点着色器中声明uniform类型的变换矩阵，并在main函数中将其作用于顶点位置。在main.cpp中，引入glm库，定义mat4类型的变换矩阵，使用glm库中的rotate方法和scale方法构造符合变换矩阵（先缩放后旋转），然后在着色器激活的情况下设置uniform变量的值。 BQACAgUAAyEGAASHRsPbAAEWKWlqPzuOuvEv3jyWSCrMBBpTFBVlrwAC7iEAAk05AVZ14a851QABbe48BA.png

1
#version 330 core
2
layout (location = 0) in vec3 aPos;
3
layout (location = 1) in vec2 aTexcoord;
4

5
out vec2 ourTexcoord;
6

7
uniform mat4 transform;
8
void main(){
9
  gl_Position = transform*vec4(aPos,1.0f);
10
  ourTexcoord = aTexcoord;
11
}

1
#define STB_IMAGE_IMPLEMENTATION
2
#include <glad/glad.h>
3
#include <GLFW/glfw3.h>
4
#include <stb_image.h>
5
#include <myShader.h>
6
#include <iostream>
7

8
#include <glm/glm.hpp>
9
#include <glm/gtc/matrix_transform.hpp>
10
#include <glm/gtc/type_ptr.hpp>
11

12
const unsigned int SCR_WIDTH = 800;
13
const unsigned int SCR_HEIGHT = 600;
14

15
void framebuffer_size_callback(GLFWwindow* window, int width, int height) {
16
  glViewport(0, 0, width, height);
17
}
18
void processInput(GLFWwindow* window) {
19
  if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) {
20
    glfwSetWindowShouldClose(window, true);
21
  }
22
}
23

24
int main() {
25
  glfwInit();
26
  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
27
  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
28
  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
29

30
  GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
31
  if (window == NULL) {
32
    cout << "Failed to create GLFW window" << endl;
33
    glfwTerminate();
34
    return -1;
35
  }
36
  glfwMakeContextCurrent(window);
37
  glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
38

39
  if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {
40
    cout << "Failed to initialize GLAD" << endl;
41
    glfwTerminate();
42
    return -1;
43
  }
44

45
  Shader ourShader("src/Shader/vertexShader.txt", "src/Shader/fragmentShader.txt");
46

47
  float vertices[] = {
48
    0.5f,0.5f,0.0f, 1.0f,1.0f,//右上
49
    0.5f,-0.5f,0.0f, 1.0f,0.0f,//右下
50
    -0.5f,-0.5f,0.0f, 0.0f,0.0f,//左下
51
    -0.5f,0.5f,0.0f, 0.0f,1.0f//左上
52
  };
53

54
  unsigned int indices[] = {
55
    0,1,3,
56
    1,2,3
57
  };
58

59
  unsigned int VBO, VAO,EBO;
60
  glGenVertexArrays(1, &VAO);
61
  glGenBuffers(1, &VBO);
62
  glGenBuffers(1, &EBO);
63

64
  glBindVertexArray(VAO);
65
  glBindBuffer(GL_ARRAY_BUFFER, VBO);
66
  glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
67
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
68
  glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
69

70
  glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
71
  glEnableVertexAttribArray(0);
72
  glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
73
  glEnableVertexAttribArray(1);
74

75
  glBindVertexArray(0);
76

77
  unsigned int texture1, texture2;
78
  glGenTextures(1, &texture1);
79
  glBindTexture(GL_TEXTURE_2D, texture1);
80
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
81
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
82
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
83
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR_MIPMAP_LINEAR);
84

85
  int width, height, nrChannels;
86
  stbi_set_flip_vertically_on_load(true);
87
  unsigned char* data = stbi_load("resources/textures/container.jpg", &width, &height, &nrChannels, 0);
88
  if (data) {
89
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
90
    glGenerateMipmap(GL_TEXTURE_2D);
91
  }
92
  else {
93
    cout << "Failed to load texture" << endl;
94
  }
95
  stbi_image_free(data);
96

97
  glGenTextures(1, &texture2);
98
  glBindTexture(GL_TEXTURE_2D, texture2);
99
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
100
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
101
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
102
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR_MIPMAP_LINEAR);
103
  data = stbi_load("resources/textures/awesomeface.png", &width, &height, &nrChannels, 0);
104
  if (data) {
105
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
106
    glGenerateMipmap(GL_TEXTURE_2D);
107
  }
108
  else {
109
    cout << "Failed to load image" << endl;
110
  }
111
  stbi_image_free(data);
112

113
  ourShader.use();
114
  ourShader.setInt("texture1", 0);
115
  ourShader.setInt("texture2", 1);
116
  glm::mat4 trans;
117
  trans = glm::rotate(trans, glm::radians(90.0f), glm::vec3(0.0, 0.0, 1.0));
118
  trans = glm::scale(trans, glm::vec3(0.5, 0.5, 0.5));
119
  unsigned int transformLoc = glGetUniformLocation(ourShader.ID, "transform");
120
  glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));//这个函数的最后一个参数需要一个float*类型的指针，而glm::mat4是GLM自己的矩阵类，内部有16个连续的float，所以需要value_ptr获取矩阵的首地址，转换数据类型
121

122
  while (!glfwWindowShouldClose(window)) {
123
    processInput(window);
124
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
125
    glClear(GL_COLOR_BUFFER_BIT);
126

127
    glActiveTexture(GL_TEXTURE0);
128
    glBindTexture(GL_TEXTURE_2D, texture1);
129
    glActiveTexture(GL_TEXTURE1);
130
    glBindTexture(GL_TEXTURE_2D, texture2);
131

132
    ourShader.use();
133
    glBindVertexArray(VAO);
134
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
135

136
    glfwSwapBuffers(window);
137
    glfwPollEvents();
138
  }
139
  glDeleteVertexArrays(1, &VAO);
140
  glDeleteBuffers(1, &VBO);
141
  glDeleteBuffers(1, &EBO);
142

143
  glfwTerminate();
144
  return 0;
145
}

example2: 让箱子移动到屏幕右下角，并随着时间旋转#

思路：因为需要随着时间更新旋转角度，所以uniform变量的设置需要在循环内部。使用运行时间作为旋转角度，运行时间越长，则旋转角度越大，而且运行时间是均匀递增的，所以角度变换也是均匀的。然后应用缩放和平移。此外，要注意变换矩阵在每一次循环中都要重新定义，否则只会在上一帧旋转角度上累加运行时间变换的角度，只会越转越多，而不是均匀的。

1
while (!glfwWindowShouldClose(window)) {
2
  processInput(window);
3
  glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
4
  glClear(GL_COLOR_BUFFER_BIT);
5

6
  glActiveTexture(GL_TEXTURE0);
7
  glBindTexture(GL_TEXTURE_2D, texture1);
8
  glActiveTexture(GL_TEXTURE1);
9
  glBindTexture(GL_TEXTURE_2D, texture2);
10

11
  ourShader.use();
12
  glm::mat4 trans;
13
  trans = glm::translate(trans, glm::vec3(0.5, -0.5, 0.0));
14
  trans = glm::scale(trans, glm::vec3(0.5, 0.5, 0.5));
15
  trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0, 0.0, 1.0));
16
  unsigned int transformLoc = glGetUniformLocation(ourShader.ID, "transform");
17
  glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));
18
  glBindVertexArray(VAO);
19
  glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
20

21
  glfwSwapBuffers(window);
22
  glfwPollEvents();
23
}

homework1#

使用应用在箱子上的最后一个变换，尝试将其改变为先旋转，后位移。看看发生了什么，试着想想为什么会发生这样的事情.

思路：仅调换旋转和平移两行的顺序，使其先应用平移再应用旋转。则会观察到物体不绕着自己的中心旋转，而是绕着屏幕原点旋转，即沿着一个大圆圈绕圈。

原因：glm::scale/glm::rotate始终都是以屏幕原点为基准进行变换，在未平移时，物体的中心就是屏幕原点（根据定义的vertices数组可知），则缩放和旋转都相当于是以物体中心为基准，可以得到我们想要的效果。但是如果先平移了，那么物体中心和屏幕原点不再重合，就会导致意料之外的效果。

1
while (!glfwWindowShouldClose(window)) {
2
  processInput(window);
3
  glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
4
  glClear(GL_COLOR_BUFFER_BIT);
5

6
  glActiveTexture(GL_TEXTURE0);
7
  glBindTexture(GL_TEXTURE_2D, texture1);
8
  glActiveTexture(GL_TEXTURE1);
9
  glBindTexture(GL_TEXTURE_2D, texture2);
10

11
  ourShader.use();
12
  glm::mat4 trans;
13

14
  trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0, 0.0, 1.0));
15
  trans = glm::scale(trans, glm::vec3(0.5, 0.5, 0.5));
16
  trans = glm::translate(trans, glm::vec3(1, -1, 0.0));
17

18
  unsigned int transformLoc = glGetUniformLocation(ourShader.ID, "transform");
19
  glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));
20
  glBindVertexArray(VAO);
21
  glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
22

23
  glfwSwapBuffers(window);
24
  glfwPollEvents();
25
}

homework2#

尝试再次调用glDrawElements画出第二个箱子，只使用变换将其摆放在不同的位置。让这个箱子被摆放在窗口的左上角，并且会不断的缩放（而不是旋转）。（sin函数在这里会很有用，不过注意使用sin函数时应用负值会导致物体被翻转）。

思路：绘制第二个箱子不需要重复定义vertices或是修改着色器代码，只需传入不同的transform。而传入时机仍在渲染循环内，可以先计算第一个三角形的transform，然后设置、传入、绘制，再计算第二个三角形的transform，设置、传入和绘制。即调用两次glDrawElements，为每次调用计算不同的变换矩阵和设置调用着色器时的transform。不断的缩放的实现思路是借助sin函数，以运行时间作为自变量，sin函数自会将其限制在-1-1之间，而正因为sin函数可能取负值，当给物体应用负值的缩放，会翻转物体，这不是我们想要的，所以需要对sin结果做重映射，将其映射到0-1.

1
while (!glfwWindowShouldClose(window)) {
2
  processInput(window);
3
  glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
4
  glClear(GL_COLOR_BUFFER_BIT);
5

6
  glActiveTexture(GL_TEXTURE0);
7
  glBindTexture(GL_TEXTURE_2D, texture1);
8
  glActiveTexture(GL_TEXTURE1);
9
  glBindTexture(GL_TEXTURE_2D, texture2);
10

11
  ourShader.use();
12
  glBindVertexArray(VAO);
13
  //画第一个箱子，右下角，随时间旋转
14
  glm::mat4 trans1;
15

16
  trans1 = glm::translate(trans1, glm::vec3(0.5, -0.5, 0.0));
17
  trans1 = glm::scale(trans1, glm::vec3(0.5, 0.5, 0.5));
18
  trans1 = glm::rotate(trans1, (float)glfwGetTime(), glm::vec3(0.0, 0.0, 1.0));
19

20
  unsigned int transformLoc = glGetUniformLocation(ourShader.ID, "transform");
21
  glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans1));
22
  glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
23

24

25
  //画第二个箱子，左下角，随时间缩放
26
  glm::mat4 trans2;
27
  trans2 = glm::translate(trans2, glm::vec3(-0.5, -0.5, 0.0));
28
  float scale = (glm::sin(glfwGetTime()) + 1.0) / 2.0;
29
  trans2 = glm::scale(trans2, glm::vec3(scale));
30
  transformLoc = glGetUniformLocation(ourShader.ID, "transform");
31
  glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans2));
32
  glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
33

34
  glfwSwapBuffers(window);
35
  glfwPollEvents();
36
}