首页 > 其他分享> > 3. 实例化-画100个正方体

3. 实例化-画100个正方体

2021-04-14 22:35:13 作者：互联网

3. 实例化-画100个正方体

3. 实例化-画100个正方体

概述

数据的传递流程

（1）准备顶点属性缓冲区

positionVBO：用于存放正方体顶点位置的缓冲区，一个正方体需要24个顶点位置来描述，一个顶点位置三个数（x，y，z）
colorVBO：用于存放正方体颜色的缓冲区，每个正方体一种颜色，这里一共有100个正方体，一个颜色四个数（x，y，z，a）
mvpVBO：用于存放正方体的mvp变换矩阵的缓冲区，每个正方体一个mvp变换矩阵，这里一共有100个正方体
indicesIBO：用于存放正方体顶点顺序的缓冲区，比如它为{0,2,4,6,8,10}，那么就从positionVBO中取出下标为{0,2,4,6,8,10}的顶点位置，画两个三角形（一个三角形三个顶点）；一个正方体需要12个三角形来描述，所以它为36个indices

（2）计算mvp矩阵

（3）将数据传给顶点着色器以及片段着色器来画图

图形学原理

1. 齐次坐标

齐次坐标（x，y，z，w），它是为了兼容点的平移操作，使得我们可以用同一个公式对点和方向作运算。

（x，y，z，w）同时除于w得到坐标（x/w，y/w，x/w）

当w == 1时，向量（x，y，z，1）为空间中的点
当w == 0时，向量（x，y，z，0）为方向

齐次坐标主要是兼容点的平移操作，在空间中平移方向是没有意义的：

2. 二维坐标间的转换

1. 二维旋转矩阵

把点（x，y）旋转到点（x'，y'）

2. 先平移后旋转，以及先旋转后平移问题

也就是矩阵乘法的顺序问题，设旋转矩阵为R，平移矩阵为T

先平移后旋转：M = R * T
先旋转后平移：M = T * R

3. 二维坐标转换

在xy坐标系中，有一点P(x0，y0)，表示的是：点P(x0，y0)相对于xy坐标系原点的值为x0和y0。

转换到x'y'坐标系之后，变为P(x0'，y0')，表示的是：点P(x0'，y0')相对于x'y'坐标系原点的值为x0'和y0'

它们之间的相对位置时不变的，只是换了一种表示方法。

就比如：小明说，杯子在我的右边；小东说，杯子在我的左边；是一样的道理。这里就是把（杯子在我右边）转换为（杯子在我左边）

（1）为了将对象描述从xy坐标变换到x'y'坐标，必须建立把x'y'轴叠加到xy轴的变换，这需要分两步进行：

将x'y'系统的坐标原点（x0，y0）平移到xy系统的原点（0，0）；
将x'轴旋转到x轴上

所以，就是先平移后旋转：M = R * T

举例：设x'轴与x轴之间的夹角为45度，x'y'系统的坐标原点为（2，2），将点P（1，1）变换到x'y'系统上，由几何关系可以得到变换后P点坐标的值为（-√2，0）

（2）任何旋转矩阵的元素可以表示为一组正交单位向量的元素

4. 旋转矩阵的逆矩阵

旋转矩阵的逆矩阵可以通过矩阵转置，或者将旋转角取负值来获得

3. 三维坐标间转换

1. 三维坐标绕轴旋转

2. 轴角与旋转矩阵

（1）轴角：绕一个给定轴K（x，y，z）（向量）旋转给定角度。也就是原定坐标轴{A}绕给定向量K（x，y，z）旋转给定角度后，得到坐标系{B}

注意：向量K（x，y，z）为单位向量

它的旋转矩阵为：

（2）也可以理解为：一个向量V绕着向量K旋转角，得到向量V(rot)
公式的推导：详情请见：https://www.bilibili.com/video/BV1h7411c7zK?from=search&seid=5987430286330119296

推导过程（TODO）

涉及到：欧拉角，四元数，旋转矩阵，轴角之间的关系

4. MVP矩阵

1. 不同的坐标系

局部空间(Local Space，或者称为物体空间(Object Space))：物体坐标系
世界空间(World Space)：世界坐标系
观察空间(View Space，或者称为视觉空间(Eye Space))：眼睛坐标系
裁剪空间(Clip Space)
屏幕空间(Screen Space)

由上图可以知道：

M：模型矩阵：将物体坐标变换为世界坐标
V：视图矩阵：将世界坐标变换为眼睛坐标
P：投影矩阵：将眼睛坐标变换为裁剪坐标

2. 模型矩阵

将物体坐标变换为世界坐标：

3. 视图矩阵

将世界坐标变换为眼睛坐标

4. 投影矩阵

将眼睛坐标变换为裁剪坐标

1. 正交投影

将一个上下坐标为t（top）和b（bottom），前后坐标为n（near）和f（far），左右坐标为l（left）和r（right）的正方体：

将其中心移动到坐标原点
压缩成边长为2（-1，1）的正方体

2. 齐次坐标不变性

（x，y，z，1）和（kx，ky，kz，k!=0z）和（xz，yz，z^2，z!=0）在三维空间中，这些都代表的是同一个点（x，y，z）

例如：（1，0，0，1）和（2，0，0，2）都代表着点（1，0，0）

3. 透视投影

将左边的梯形体压缩成右边的长方体

注意：n和f是不变的，所以，可以得出：

（1）对于任何在n平面上的点，其坐标的z分量不变

（2）对于任何在f平面上的点，其坐标的z分量不变

从下图可以看出，（x，y，z）坐标和（x'，y'，z'）坐标之间存在相似三角形关系

4. 得出投影矩阵

投影矩阵就是先做透视投影，把梯形体压缩成一个长方体；然后做正交投影，把这个正方体，放到原点，并压缩成边长为2（-1，1）的正方体

OpenGL的为啥为负的？（TODO）

5. 如何求长方体上下左右前后的坐标

给出可视角度fovY，nearZ和长宽比aspect（16:9，或者4:3等等），就可以求出长方体的上下左右前后的坐标了

t（top），b（bottom）= - t，r（right），l（left）= -r，n（nearZ），f（farZ）

然后代入投影矩阵公式，就可以得出投影矩阵的值了。

源码解析

主程序

 #include "esUtil.h"
 #include <stdlib.h>
 #include <math.h>
 #include <android/log.h>
 
 #define NUM_INSTANCES 100
 #define POSITION_LOC 0
 #define COLOR_LOC 1
 #define MVP_LOC 2
 #define LOGI(...) ((void)__android_log_print(ANDROID_LOG_INFO, "lylesUtil", __VA_ARGS__))
 typedef struct
 {
  GLuint programObject;
 
  GLuint positionVBO;
  GLuint colorVBO;
  GLuint mvpVBO;
  GLuint indicesIBO;
  int numIndices;
  GLfloat angle[NUM_INSTANCES];
 } myUserData;
 
 // 初始化顶点着色器和片段着色器
 // 初始化myUserData里面的数据
 int Init(MYESContext *myesContext)
 {
  GLfloat *positions;
  GLuint *indices;
 
  myUserData *userData = (myUserData *)myesContext->userData;
  char vShaderStr[] =
  "#version 300 es                            \n"
  "layout(location = 0) in vec4 a_position;   \n"
  "layout(location = 1) in vec4 a_color;      \n"
  "layout(location = 2) in mat4 a_mvpMatrix;   \n"
  "out vec4 v_color;                          \n"
  "void main()                                \n"
  "{                                          \n"
  "   v_color = a_color;                      \n"
  "   gl_Position = a_mvpMatrix * a_position; \n"  // 在这里设置mvp变换矩阵
  "}                                          \n";
  char fShaderStr[] =
  "#version 300 es                            \n"
  "precision mediump float;                   \n"
  "in vec4 v_color;                           \n"
  "layout(location = 0) out vec4 outColor;    \n"
  "void main()                                \n"
  "{                                          \n"
  "   outColor = v_color;                     \n"
  "}                                          \n";
  userData->programObject = myesLoadProgram(vShaderStr, fShaderStr);
  // 1\. 生成正方体的position数据和indices数据
  userData->numIndices = myesGenCube(0.1f, &positions, NULL, NULL, &indices);
 
  glGenBuffers(1, &userData->indicesIBO);
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->indicesIBO);
  glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLuint)*userData->numIndices, indices, GL_STATIC_DRAW);
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
  free(indices);
 
  glGenBuffers(1, &userData->positionVBO);
  glBindBuffer(GL_ARRAY_BUFFER, userData->positionVBO);
  glBufferData(GL_ARRAY_BUFFER, 24*sizeof(GLfloat)*3, positions, GL_STATIC_DRAW);
  free(positions);
 
  {
  GLubyte colors[NUM_INSTANCES][4];
  int instance;
 
  srandom(0);
 
  for (instance = 0; instance < NUM_INSTANCES; instance++) {
  colors[instance][0] = random() % 255;
  colors[instance][1] = random() % 255;
  colors[instance][2] = random() % 255;
  colors[instance][3] = 0;
  }
 
  glGenBuffers(1, &userData->colorVBO);
  glBindBuffer(GL_ARRAY_BUFFER, userData->colorVBO);
  glBufferData(GL_ARRAY_BUFFER, NUM_INSTANCES*4, colors, GL_STATIC_DRAW);
  }
 
  {
  int instance;
 
  for (instance = 0; instance < NUM_INSTANCES; instance++) {
  userData->angle[instance] = (float) (random() % 32768) / 32767.0f * 360.0f;
  }
 
  glGenBuffers(1, &userData->mvpVBO);
  glBindBuffer(GL_ARRAY_BUFFER, userData->mvpVBO);
  glBufferData(GL_ARRAY_BUFFER, NUM_INSTANCES * sizeof(ESMatrix), NULL, GL_DYNAMIC_DRAW);
  }
  glBindBuffer(GL_ARRAY_BUFFER, 0);
 
  glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
  return GL_TRUE;
 }
 
 // 更新mvp变换矩阵
 void Update(MYESContext *myesContext, float deltaTime)
 {
  myUserData *userData = (myUserData*) myesContext->userData;
  ESMatrix *matrixBuf;
  ESMatrix perspective;
  float aspect;
  int instance = 0;
  int numRows;
  int numColumns;
 
  // 比例=长/高
  aspect = (GLfloat) myesContext->width / (GLfloat)myesContext->height;
  // 先得到一个单位矩阵
  myesMatrixLoadIdentity(&perspective);
  // 然后得到投影矩阵P
  myesPerspective(&perspective, 90.0f, aspect, 0.1f, 100.0f);
  glBindBuffer(GL_ARRAY_BUFFER, userData->mvpVBO);
  matrixBuf = (ESMatrix *)glMapBufferRange(GL_ARRAY_BUFFER, 0, sizeof(ESMatrix) * NUM_INSTANCES, GL_MAP_WRITE_BIT);
  numRows = (int) sqrtf(NUM_INSTANCES);
  numColumns = numRows;
 
  for (instance = 0; instance < NUM_INSTANCES; instance++) {
  ESMatrix modelview;
  float translateX = ((float)(instance % numRows) / (float)numRows)*2.0f - 1.0f;
  float translateY = ((float)(instance/numColumns)/(float)numColumns)*2.0f - 1.0f;
  // 先得到一个单位矩阵
  myesMatrixLoadIdentity(&modelview);
  // 然后将正方体平移到坐标（translateX, translateY, -1.0f），得到模型矩阵M
  myesTranslate(&modelview, translateX, translateY, -1.0f);
  userData->angle[instance] += (deltaTime*40.0f);
  if (userData->angle[instance] >= 360.0f) {
  userData->angle[instance] -= 360.0f;
  }
  // 绕轴（0,0,1）旋转angle角度，得到视图矩阵V，然后和前面的模型矩阵M相乘得到VM矩阵
  myesRotate(&modelview, userData->angle[instance], 0.0, 0, 1.0);
  // 再乘一下，得到VMP矩阵
  myesMatrixMultiply(&matrixBuf[instance], &modelview, &perspective);
  }
 
  glUnmapBuffer(GL_ARRAY_BUFFER);
 }
 
 void Draw(MYESContext *myesContext)
 {
  myUserData *userData = (myUserData *)myesContext->userData;
  // 视口变换
  glViewport(0, 0, myesContext->width, myesContext->height);
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  glUseProgram(userData->programObject);
 
  glBindBuffer(GL_ARRAY_BUFFER, userData->positionVBO);
  glVertexAttribPointer(POSITION_LOC, 3, GL_FLOAT, GL_FALSE,
  3*sizeof(GLfloat), (const void *)NULL);
  glEnableVertexAttribArray(POSITION_LOC);
  glBindBuffer(GL_ARRAY_BUFFER, userData->colorVBO);
  glVertexAttribPointer(COLOR_LOC, 4, GL_UNSIGNED_BYTE,
  GL_TRUE, 4*sizeof(GLubyte), (const void *)NULL);
  glEnableVertexAttribArray(COLOR_LOC);
  // void glVertexAttribDivisor (GLuint index, GLuint divisor);
  // 指示OpenGL ES对每个实例（instance）读取一次或者多次顶点属性。
  // divisor为1，表示每个图元实例（每个正方体）读取一次顶点属性，相当于指针P+1这样子
  // divisor为0，则是（每个顶点），读取一次顶点属性
  glVertexAttribDivisor(COLOR_LOC, 1);
 
  glBindBuffer(GL_ARRAY_BUFFER, userData->mvpVBO);
  // 对于4x4矩阵，需要消耗4个顶点属性来存储它们
  glVertexAttribPointer(MVP_LOC + 0, 4, GL_FLOAT, GL_FALSE, sizeof(ESMatrix), (const void *)NULL);
  glVertexAttribPointer(MVP_LOC + 1, 4, GL_FLOAT, GL_FALSE, sizeof(ESMatrix), (const void *)(sizeof(GLfloat)*4));
  glVertexAttribPointer(MVP_LOC + 2, 4, GL_FLOAT, GL_FALSE, sizeof(ESMatrix), (const void *)(sizeof(GLfloat)*8));
  glVertexAttribPointer(MVP_LOC + 3, 4, GL_FLOAT, GL_FALSE, sizeof(ESMatrix), (const void *)(sizeof(GLfloat)*12));
  glEnableVertexAttribArray(MVP_LOC + 1);
  glEnableVertexAttribArray(MVP_LOC + 1);
  glEnableVertexAttribArray(MVP_LOC + 2);
  glEnableVertexAttribArray(MVP_LOC + 3);
 
  glVertexAttribDivisor(MVP_LOC + 0, 1);
  glVertexAttribDivisor(MVP_LOC + 1, 1);
  glVertexAttribDivisor(MVP_LOC + 2, 1);
  glVertexAttribDivisor(MVP_LOC + 3, 1);
 
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->indicesIBO);
  //void  glDrawElementsInstanced (GLenum mode, GLsizei count, GLenum type, const void *indices, GLsizei instancecount);
  // mode表示要渲染的图元；count为绘制的index数量；type为index中的元素索引类型；indices为存放index的地方；
  // instancecount为要绘制的图元实例的数量
  // 用一次API调用，进行多次渲染具有不同属性（例如不同的变换矩阵、颜色、或者大小）的一个对象
  // 这里就是用一次API调用，渲染了100个具有不同变换矩阵、颜色的正方体
  glDrawElementsInstanced(GL_TRIANGLES, userData->numIndices, GL_UNSIGNED_INT, (const void *)NULL, NUM_INSTANCES);
 }
 
 void Shutdown(MYESContext *myesContext)
 {
  myUserData *userData = (myUserData *)myesContext->userData;
 
  glDeleteBuffers(1, &userData->positionVBO);
  glDeleteBuffers(1, &userData->colorVBO);
  glDeleteBuffers(1, &userData->mvpVBO);
  glDeleteBuffers(1, &userData->indicesIBO);
  glDeleteProgram(userData->programObject);
 }
 
 
 int myesMain(MYESContext *myesContext)
 {
  myesContext->userData = malloc(sizeof(myUserData));
  // 这个width和height是没有用的，userData中的width和height是用的是系统中的
  myesCreateWindow(myesContext, "Example 7-1 Instancing", 640, 480, MY_ES_WINDOW_RGB | MY_ES_WINDOW_DEPTH);
 
  if (!Init(myesContext)) {
  return GL_FALSE;
  }
 
  esRegisterShutdownFunc(myesContext, Shutdown);
  esRegisterUpdateFunc(myesContext, Update);
  esRegisterDrawFunc(myesContext, Draw);
 
  return GL_TRUE;
 }

变换矩阵函数

// 生成单位矩阵
 void myesMatrixLoadIdentity(ESMatrix *result)
 {
  memset(result, 0x0, sizeof(ESMatrix));
  result->m[0][0] = 1.0f;
  result->m[1][1] = 1.0f;
  result->m[2][2] = 1.0f;
  result->m[3][3] = 1.0f;
 }
 
 // 生成投影矩阵的
 void myesPerspective(ESMatrix *result, float fovy, float aspect, float nearZ, float farZ)
 {
  GLfloat frustumW, frustumH;
 
  frustumH = tanf(fovy / 360.0f * PI) * nearZ;
  frustumW = frustumH * aspect;
 
  myesFrustum(result, -frustumW, frustumW, -frustumH, frustumH, nearZ, farZ);
 }
 
 void myesFrustum(ESMatrix *result, float left, float right, float bottom, float top, float nearZ, float farZ)
 {
  float deltaX = right - left;
  float deltaY = top - bottom;
  float deltaZ = farZ - nearZ;
  ESMatrix frust;
 
  if ((nearZ <= 0.0f) || (farZ <= 0.0f) ||
  (deltaX <= 0.0f) || (deltaY <= 0.0f) || (deltaZ <= 0.0f)) {
  return;
  }
 
  frust.m[0][0] = 2.0f * nearZ / deltaX;
  frust.m[0][1] = frust.m[0][2] = frust.m[0][3] = 0.0f;
 
  frust.m[1][1] = 2.0f * nearZ / deltaY;
  frust.m[1][0] = frust.m[1][2] = frust.m[1][3] = 0.0f;
 
  frust.m[2][0] = (right + left) / deltaX;
  frust.m[2][1] = (top + bottom) / deltaY;
  frust.m[2][2] = - (nearZ + farZ) / deltaZ;
  frust.m[2][3] = -1.0f;
 
  frust.m[3][2] = -2.0f * nearZ * farZ / deltaZ;
  frust.m[3][0] = frust.m[3][1] = frust.m[3][3] = 0.0f;
 
  myesMatrixMultiply(result, &frust, result);
 }
 
 // 矩阵乘法
 void myesMatrixMultiply ( ESMatrix *result, ESMatrix *srcA, ESMatrix *srcB )
 {
  ESMatrix    tmp;
  int         i;
 
  for ( i = 0; i < 4; i++ )
  {
  tmp.m[i][0] =  ( srcA->m[i][0] * srcB->m[0][0] ) +
  ( srcA->m[i][1] * srcB->m[1][0] ) +
  ( srcA->m[i][2] * srcB->m[2][0] ) +
  ( srcA->m[i][3] * srcB->m[3][0] ) ;
 
  tmp.m[i][1] =  ( srcA->m[i][0] * srcB->m[0][1] ) +
  ( srcA->m[i][1] * srcB->m[1][1] ) +
  ( srcA->m[i][2] * srcB->m[2][1] ) +
  ( srcA->m[i][3] * srcB->m[3][1] ) ;
 
  tmp.m[i][2] =  ( srcA->m[i][0] * srcB->m[0][2] ) +
  ( srcA->m[i][1] * srcB->m[1][2] ) +
  ( srcA->m[i][2] * srcB->m[2][2] ) +
  ( srcA->m[i][3] * srcB->m[3][2] ) ;
 
  tmp.m[i][3] =  ( srcA->m[i][0] * srcB->m[0][3] ) +
  ( srcA->m[i][1] * srcB->m[1][3] ) +
  ( srcA->m[i][2] * srcB->m[2][3] ) +
  ( srcA->m[i][3] * srcB->m[3][3] ) ;
  }
 
  memcpy ( result, &tmp, sizeof ( ESMatrix ) );
 }
 
 // 平移矩阵
 void myesTranslate ( ESMatrix *result, GLfloat tx, GLfloat ty, GLfloat tz )
 {
  result->m[3][0] += ( result->m[0][0] * tx + result->m[1][0] * ty + result->m[2][0] * tz );
  result->m[3][1] += ( result->m[0][1] * tx + result->m[1][1] * ty + result->m[2][1] * tz );
  result->m[3][2] += ( result->m[0][2] * tx + result->m[1][2] * ty + result->m[2][2] * tz );
  result->m[3][3] += ( result->m[0][3] * tx + result->m[1][3] * ty + result->m[2][3] * tz );
 }
 
 // 轴角，旋转矩阵
 void myesRotate ( ESMatrix *result, GLfloat angle, GLfloat x, GLfloat y, GLfloat z )
 {
  GLfloat sinAngle, cosAngle;
  GLfloat mag = sqrtf ( x * x + y * y + z * z );
 
  sinAngle = sinf ( angle * PI / 180.0f );
  cosAngle = cosf ( angle * PI / 180.0f );
 
  if ( mag > 0.0f )
  {
  GLfloat xx, yy, zz, xy, yz, zx, xs, ys, zs;
  GLfloat oneMinusCos;
  ESMatrix rotMat;
 
  x /= mag;
  y /= mag;
  z /= mag;
 
  xx = x * x;
  yy = y * y;
  zz = z * z;
  xy = x * y;
  yz = y * z;
  zx = z * x;
  xs = x * sinAngle;
  ys = y * sinAngle;
  zs = z * sinAngle;
  oneMinusCos = 1.0f - cosAngle;
 
  rotMat.m[0][0] = ( oneMinusCos * xx ) + cosAngle;
  rotMat.m[0][1] = ( oneMinusCos * xy ) - zs;
  rotMat.m[0][2] = ( oneMinusCos * zx ) + ys;
  rotMat.m[0][3] = 0.0F;
 
  rotMat.m[1][0] = ( oneMinusCos * xy ) + zs;
  rotMat.m[1][1] = ( oneMinusCos * yy ) + cosAngle;
  rotMat.m[1][2] = ( oneMinusCos * yz ) - xs;
  rotMat.m[1][3] = 0.0F;
 
  rotMat.m[2][0] = ( oneMinusCos * zx ) - ys;
  rotMat.m[2][1] = ( oneMinusCos * yz ) + xs;
  rotMat.m[2][2] = ( oneMinusCos * zz ) + cosAngle;
  rotMat.m[2][3] = 0.0F;
 
  rotMat.m[3][0] = 0.0F;
  rotMat.m[3][1] = 0.0F;
  rotMat.m[3][2] = 0.0F;
  rotMat.m[3][3] = 1.0F;
 
  myesMatrixMultiply ( result, &rotMat, result );
  }
 }

参考

1. 第三课：矩阵
http://www.opengl-tutorial.org/cn/beginners-tutorials/tutorial-3-matrices/
2. 旋转矩阵
https://zh.wikipedia.org/wiki/%E6%97%8B%E8%BD%AC%E7%9F%A9%E9%98%B5
3. CG07-3D变换和欧拉角/轴角/四元数
https://www.bilibili.com/video/BV1h7411c7zK?from=search&seid=5987430286330119296
4. GAMES101-现代计算机图形学入门-闫令琪
https://www.bilibili.com/video/BV1X7411F744?p=4
5. 坐标系统
https://learnopengl-cn.readthedocs.io/zh/latest/01%20Getting%20started/08%20Coordinate%20Systems/
6. View Transform（视图变换）详解
https://www.cnblogs.com/graphics/archive/2012/07/12/2476413.html

标签：正方体,userData,矩阵,instance,实例,result,100,GL,坐标
来源： https://www.cnblogs.com/pyjetson/p/14660164.html