iOS视觉(七) -- OpenGL图元组合与纹理

一、多个图元的绘制

前文讲述大多都是去绘制某个图元, 这里绘制一下多个图元. 最终效果如下:

这个界面包含了:

1. 自转的最大的红色球体
2. 环绕大球转动的小蓝球
3. 地板上50个蓝色小球体
4. 绿色地板

1.1、绘制绿色地板

观察这个地板图元, 我们了解到绘制它的话, 需要改变的是x与z的位置, y的位置是不变的. 所以可以通过遍历来生成一组y值相等的顶点数据:

//设置地板顶点数据
floorBatch.Begin(GL_LINES, 324);
for(GLfloat x = -20.0; x <= 20.0f; x+= 0.5) {
    floorBatch.Vertex3f(x, -0.55f, 20.0f);
    floorBatch.Vertex3f(x, -0.55f, -20.0f);
    
    floorBatch.Vertex3f(20.0f, -0.55f, x);
    floorBatch.Vertex3f(-20.0f, -0.55f, x);
}
floorBatch.End();

对批次类设置好顶点数据后只需要在渲染里开启绘制就可以绘制完成了:

//传递到存储着色器，即GLT_SHADER_IDENTITY着色器，这个着色器只是使用指定颜色以默认笛卡尔坐标第在屏幕上渲染几何图形
shaderManager.UseStockShader(GLT_SHADER_FLAT,
                             transformPipeline.GetModelViewProjectionMatrix(),
                             vFloorColor);
//绘制地板
floorBatch.Draw();

1.2、绘制红色大球

前文提到过系统有自带的一些图元绘制, 球体就是其中一个了. 那么我们即可以直接通过API来绘制这个球体.

//设置大球顶点数据
gltMakeSphere(torusBatch, 0.4f, 40, 80);

下面来到渲染里:

1. 首先使用一个定时器来不断的改变角度造成自转.
2. 为了让自转显得真实这里来设置一个点光源.
3. 把它向里平移来方便观察
4. 改变物体前入栈
5. 旋转图元角度
6. 设置着色器 -- 点光源着色器
7. 绘制
8. 出栈

//定时器
static CStopWatch rotTimer;
//每次绘制都旋转一个角度
float yRot = rotTimer.GetElapsedSeconds() * 60.0f;
//光源位置
M3DMatrix44f vLightPos = {0,10,5,1};
//把红色球体向里平移(方便观察)
modelViewMatrix.Translate(0, 0, -3);
//旋转前压栈
modelViewMatrix.PushMatrix();
//根据定时器角度进行旋转
modelViewMatrix.Rotate(yRot, 0, 1, 0);
shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF,//点光源着色器
                             transformPipeline.GetModelViewMatrix(),//模型视图矩阵
                             transformPipeline.GetProjectionMatrix(),//投影矩阵
                             vLightPos,//光源位置
                             vTorusColor);//图元颜色
torusBatch.Draw();//绘制
modelViewMatrix.PopMatrix();//旋转出栈

1.3、绘制50个蓝色小球

批量生成50个蓝色小球, 我们就需要用一个数组来保存这50个小球的顶点数据:

//设置小球顶点数据
gltMakeSphere(sphereBatch, 0.1f, 13, 26);
for (int i = 0; i < NUM_SPHERES; i++) {
    GLfloat x = ((rand() % 400) - 200) * 0.1f;//随机x坐标
    GLfloat z = ((rand() % 400) - 200) * 0.1f;//随机z坐标
    spheres[i].SetOrigin(x, 0, z);//存储一个小球的顶点数据
}

来到渲染里进行绘制这50个小球:

//画50个小球
for (int i = 0; i < NUM_SPHERES; i++) {
    modelViewMatrix.PushMatrix();//小球入栈
    modelViewMatrix.MultMatrix(spheres[i]);//设置顶点
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF,//点光源着色器
                                 transformPipeline.GetModelViewMatrix(),//模型视图矩阵
                                 transformPipeline.GetProjectionMatrix(),//投影矩阵
                                 vLightPos,//光源位置
                                 vSphereColor);//图元颜色
    sphereBatch.Draw();//绘制
    modelViewMatrix.PopMatrix();//小球出栈
}

1.4、绘制公转小球

小球发生公转, 也就是:

1. x坐标一直在发生变化, 围绕y轴转,此时只是自转.
2. 直接可以使用上面的小蓝球的批次类, 只需要重新设置顶点数据.
3. 平移小球,造成公转

modelViewMatrix.PushMatrix();//小球入栈
modelViewMatrix.Rotate(yRot * -2, 0, 1, 0);//围绕y轴旋转角度
modelViewMatrix.Translate(0.8f, 0, 0);//平移一点距离旋转,造成公转效果
shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF,//点光源着色器
                             transformPipeline.GetModelViewMatrix(),//模型视图矩阵
                             transformPipeline.GetProjectionMatrix(),//投影矩阵
                             vLightPos,//光源位置
                             vSphereColor);//图元颜色
sphereBatch.Draw();//绘制
modelViewMatrix.PopMatrix();//小球出栈

1.5、绘制完成后的注意事项

绘制完成后我们需要对其进行出栈, 每一次Push都要匹配好一个Pop.

这里因为对图元进行来一些操作,所以每次旋转后都要在最后进行一次: glutPostRedisplay()

二、纹理

绘制完以上的图元后, 运行起来, 但是看起来还是非常的单调. 因为都是直接用点、线等进行绘制, 用颜色直接进行填充. 所以看起来非常单调.

所以我们就可以对图元对表面附着一层图片来提高美观度.

纹理泛指物体面上的花纹或线条，是物体上呈现的线形纹路。

在OpenGL中, 纹理通常指的就是图元表面附着的一层图片. 通常是使用tag文件.

在其他平台中, 我们使用png、jpg的话, 都需要对其进行解码, 拿到图片的位图数据.

我们通常使用的png、jpg等图像,都是压缩图像, 是对原始图像数据进行了一层处理.

图像存储空间 = 图像的高度 x 图像宽度 x 每个像素的字节数

2.1、认识函数

2.1.1、存储方式

改变像素存储方式:

voidglPixelStorei(GLenumpname,GLintparam);

恢复像素存储方式:

voidglPixelStoref(GLenumpname,GLfloatparam);

这两个函数在开发中使用率是非常低的, 这里还是进行举例一下:

//参数1：GL_UNPACK_ALIGNMENT指定OpenGL如何从数据缓存区中解包图像数据
//参数2：表示参数GL_UNPACK_ALIGNMENT设置的值
//GL_UNPACK_ALIGNMENT指内存中每个像素⾏起点的排列请求，允许设置为1 （byte排列）、2（排列为偶数byte的⾏）、4（字word排列）、8（⾏从双字节边界开始）
glPixelStorei(GL_UNPACK_ALIGNMENT,1);

2.1.2、读取像素图

我们直接可以从颜色缓存区来直接读取像素图:

//参数1：x,矩形左下⻆的窗⼝坐标
//参数2：y,矩形左下⻆的窗⼝坐标
//参数3：width,矩形的宽，以像素为单位
//参数4：height,矩形的⾼，以像素为单位
//参数5：format,OpenGL的像素格式，参考表6-1 
//参数6：type,解释参数pixels指向的数据，告诉OpenGL使⽤缓存区中的什么数据类型来存储颜⾊分量，像素数据的数据类型(参考表如下)
//参数7：pixels,指向图形数据的指针
voidglReadPixels(GLintx, GLinty, GLSizei width,GLSizei height,GLenumformat,GLenumtype, const void* pixels);
glReadBuffer(mode);//指定读取的缓存
glWriteBuffer(mode);//指定写⼊的缓存

2.1.3、载入纹理

载入纹理有三个函数, 分别为载入1D、2D、3D纹理:

voidglTexImage1D(GLenumtarget,GLintlevel,GLint internalformat,GLsizeiwidth,GLintborder,GLenum 
format,GLenumtype,void* data);

voidglTexImage2D(GLenumtarget,GLintlevel,GLint internalformat,GLsizeiwidth,GLsizeiheight,GLint border,GLenumformat,GLenumtype,void*data);

voidglTexImage3D(GLenumtarget,GLintlevel,GLint 
internalformat,GLSizeiwidth,GLsizeiheight,GLsizei 
depth,GLintborder,GLenumformat,GLenumtype,void*data);

*target:`GL_TEXTURE_1D`、`GL_TEXTURE_2D`、`GL_TEXTURE_3D`。
*Level:指定所加载的mip贴图层次。⼀般我们都把这个参数设置为0。
*internalformat:每个纹理单元中存储多少颜⾊成分。
*width、height、depth参数:指加载纹理的宽度、⾼度、深度。==注意！==这些值必须是
2的整数次⽅。（这是因为OpenGL旧版本上的遗留下的⼀个要求。当然现在已经可以⽀持不是
2的整数次⽅。但是开发者们还是习惯使⽤以2的整数次⽅去设置这些参数。）
*border参数:允许为纹理贴图指定⼀个边界宽度。
*format、type、data参数：与我们在讲glDrawPixels函数对于的参数相同

2.1.4、更新纹理

voidglTexSubImage1D(GLenumtarget,GLintlevel,GLintxOffset,GLsizeiwidth,GLenum format,GLenumtype,constGLvoid*data);

voidglTexSubImage2D(GLenumtarget,GLintlevel,GLintxOffset,GLintyOffset,GLsizei width,GLsizeiheight,GLenumformat,GLenumtype,constGLvoid*data);

voidglTexSubImage3D(GLenumtarget,GLintlevel,GLintxOffset,GLintyOffset,GLint zOffset,GLsizeiwidth,GLsizeiheight,GLsizeidepth,Glenumtype,constGLvoid*data);

2.1.5、插入替换纹理

voidglCopyTexSubImage1D(GLenumtarget,GLintlevel,GLintxoffset,GLintx,GLinty,GLsizei width);

voidglCopyTexSubImage2D(GLenumtarget,GLintlevel,GLintxoffset,GLintyOffset,GLintx,GLint y,GLsizeiwidth,GLsizeiheight);

voidglCopyTexSubImage3D(GLenumtarget,GLintlevel,GLintxoffset,GLintyOffset,GLint zOffset,GLint x,GLinty,GLsizeiwidth,GLsizeiheight);

2.1.6、加载数据形成新纹理

voidglCopyTexImage1D(GLenumtarget,GLintlevel,GLenum internalformt,GLintx,GLinty,GLsizeiwidth,GLintborder);

voidglCopyTexImage2D(GLenumtarget,GLintlevel,GLenum internalformt,GLintx,GLinty,GLsizeiwidth,GLsizei height,GLintborder);

//x,y在颜⾊缓存区中指定了开始读取纹理数据的位置；
//缓存区⾥的数据，是源缓存区通过glReadBuffer设置的。
//注意：不存在glCopyTextImage3D，因为我们⽆法从2D颜⾊缓存区中获取体积数据

2.1.7、使用纹理对象

//使⽤函数分配纹理对象
//指定纹理对象的数量和指针（指针指向⼀个⽆符号整形数组，由纹理对象标识符填充）。
voidglGenTextures(GLsizei n,GLuint* textTures);

//绑定纹理状态
//参数target:GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D 
//参数texture:需要绑定的纹理对象
voidglBindTexture(GLenum target,GLunit texture);

//删除绑定纹理对象
//纹理对象以及纹理对象指针（指针指向⼀个⽆符号整形数组，由纹理对象标识符填充）。
voidglDeleteTextures(GLsizein,GLuint*textures);

//测试纹理对象是否有效
//如果texture是⼀个已经分配空间的纹理对象，那么这个函数会返回GL_TRUE,否则会返回GL_FALSE。
GLbooleanglIsTexture(GLuint texture);

2.1.8、设置纹理参数

glTexParameterf(GLenumtarget,GLenumpname,GLFloatparam);

glTexParameteri(GLenumtarget,GLenumpname,GLintparam);

glTexParameterfv(GLenumtarget,GLenumpname,GLFloat*param);

glTexParameteriv(GLenumtarget,GLenumpname,GLint*param);

参数1:target,指定这些参数将要应⽤在那个纹理模式上，⽐如GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D。
参数2:pname,指定需要设置那个纹理参数
参数3:param,设定特定的纹理参数的值

param有两种:

邻近过滤: 以取像素点位置最近的颜色的值为目标

线性过滤: 以取像素点位置附近的颜色的值进行混合得到的值为目标

//例如:
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);

2.1.9、环绕方式

OpenGL中,环绕方式有4中:

环绕方式	描述
GL_REPEAT	对纹理的默认行为,重复纹理图像
GL_MIRRORED_REPEAT	和GL_REPEAT一样,但是每次重复的图片是镜像放置的
GL_CLAMP_TO_EDGE	纹理坐标会被约束在0到1之间,超出的部分会重复纹理坐标的边缘,产生一种拉伸效果
GL_CLAMP_TO_BORDER	超出的坐标为用户指定的边缘颜色

效果依次如下:

环绕设置方式如下:

参数1：GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D 

参数2：GL_TEXTURE_WRAP_S、GL_TEXTURE_T、GL_TEXTURE_R,针对s,t,r坐标参数3：GL_REPEAT、GL_CLAMP、GL_CLAMP_TO_EDGE、GL_CLAMP_TO_BORDER

GL_REPEAT:OpenGL在纹理坐标超过1.0的⽅向上对纹理进⾏重复；

GL_CLAMP:所需的纹理单元取⾃纹理边界或TEXTURE_BORDER_COLOR.

GL_CLAMP_TO_EDGE环绕模式强制对范围之外的纹理坐标沿着合法的纹理单元的最后⼀⾏或者最后⼀列来进⾏采样。

GL_CLAMP_TO_BORDER:在纹理坐标在0.0到1.0范围之外的只使⽤边界纹理单元。边界纹理单元是作为围绕基本图像的额外的⾏和列，并与基本纹理图像⼀起加载的。

glTextParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAR_S,GL_CLAMP_TO_EDGE);
glTextParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAR_T,GL_CLAMP_TO_EDGE);

2.2、纹理坐标

常规情况下默认左下角为 (0,0), 右上角为(1,1)

当我们把这个图片加载到图元上, 就会按照纹理坐标将图像数据映射到图元上