LearnGL - 05 - Texture


LearnGL - 学习笔记目录

本人才疏学浅,如有什么错误,望不吝指出。

上一篇:LearnGL - 04.2 - 封装 ShaderProgram 类,对 Shader、Program 封装了类,便于后续使用。

这一篇:继续我们的 OpenGL 学习主线内容:纹理(Texture)。纹理的内容挺多的,这里只讲到部分的内容。


为何要有纹理?

想让我们的几何体(模型)看起来更丰富,除了之前我们说过的 添加顶点(由 三角形 到 四边形,再多一些就甚至可以是圆形,甚至是各种几何体,只要顶点数量足够多)、然后给顶点添加颜色,最终都控制如何显示 成最后的屏幕像素,让它看起来更丰富的内容。

一些色彩丰富的物体,如一些画家画的抽象画,什么鬼颜色都有,如果我们只用添加顶点的方式,让每一块相同的颜色,都弄一个几何体(一堆顶点),并添加顶点颜色来表示的话,那估计建模的同学会疯掉。

所以聪明的人类、聪明的图形先辈们想到了一个方法:纹理

纹理这玩意儿,有点像我们在一个气球上画一些图像,或是写一些字,然后我们将气球吹鼓。

再将气球捏来捏去的,改变它的形状,你会发现气球上的图案都很好的映射在你画在对应位置上的气球表面位置上;最后你将气球泄气会原型后,你会发现画在气球上的图像内容都还原样的保留着(除非你使劲儿地把画上去的颜料戳没了。-_-!!!)。

所以我们的 纹理 也是类型这么个映射。这个方法可就很好的替代了上面添加N个无穷无尽的表面顶点来丰富画面了。工作量上可是省了 N 多的量。建模同学是个幸运儿,都没经历这么多痛的假设工作量,都给图形先辈们提前想到并解决了。

纹理 的整体系统的思路很简单,先提供一些保存着图像内容的 图片纹理贴图 texture map),这些图片都有一些纹理座标,就想我们画的一个二维的笛卡尔座标一样,也有个座标。然后在顶点属性上添加一个映射在纹理采样的座标,这样不管我的顶点变化到哪去,我都让该顶点映射纹理座标的位置不变。顶点的位置变化能引起图像映射的内容伸缩,但这正是我们想要的效果,就想上面提到的气球的例子一样。而上面的顶点座标中映射了纹理座标,我们通常叫:纹理映射(Texture-Mapping)。

纹理座标

前面简单的简述了纹理的概念,也提到了 纹理座标 的概念。

纹理系统中的 纹理贴图(texture map) 就是张图片,而这张 图片的座标 通常是下面的方式:
在这里插入图片描述

但是我们的 纹理座标 可不一样:(0,0)在左下角,即:Y轴的增量方向是朝上的。
在这里插入图片描述

加载图片数据到内存

选用现成库

有好几种方法

  • 一种是使用:http://www.opengl-redbook.com,(红宝书)中的源码:vglLoadImagevglUnloadIImagevglLoadTexture、等方法。(如果要全面一些的加载也可以使用这个)
  • 一种是:SOIL(Simple OpenGL Image Library,简要的 OpenGL 图像库),unsinged char* image = SIO_load_image("filename.ext", &width, &height, 0 SOIL_LOAD_RGB);(为了做学习用,可以使用这个)
  • 一种是:stb_image.h。(这个库使用比较简单,我是推荐使用这个)

我使用的是也 stb_image.h 的加载方式,使用方式可以参考:stb_image.h,除了参考文中说明的使用方式,大家也可以查查此头文件中的前面的注释,也有很详细的英文说明。

将此文件放在我们的 include path(包含目录)
在这里插入图片描述

在源码中包含此头文件之前,先要定义宏:

#define STB_IMAGE_IMPLEMENTATION

就像这样:

#define STB_IMAGE_IMPLEMENTATION
#include"stb_image.h"

加载图片:

int width, height, nrChannels;
unsigned char *data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);

使用 stb_image.h

上面确定使用了 stb_image.h ,下面我们列出我们使用到的加载方式。

要将图片数据加载到纹理中,首先我们先将图片数据加载到内存

	// loading texture here...
	// 加载纹理需要用的图片数据
	char img_path[MAX_PATH];
	g_GetPicturePathCallback(img_path, "my_tex.png");				// 获取图片目录
	int img_w, img_h, img_channels;
	stbi_set_flip_vertically_on_load(1);							// 也可以在加载前设置加载时翻转的变量
	unsigned char* img_data = stbi_load(img_path, &img_w, &img_h, &img_channels, 4); // 加载图片数据,返回确定宽、高、通道数量、每个分量要多少字节
	if (img_data == NULL) {											// 如果加载图片失败
		std::cout << "Loading Image File : " << img_path << " FAILURE : " << stbi_failure_reason() << std::endl;
		exit(EXIT_FAILURE);
	}
	//stbi__vertical_flip(img_data, img_w, img_h, 4);					// 如果不设置前面stbi_set_flip_vertically_on_load(1),也可以在这手动去翻转,因为图片座标与纹理座标的Y轴增量方向不同,所以需要翻转垂直方向的行数数据

	// loading texture here...
	// when loading complete.
	// free image data here
	stbi_image_free(img_data);
  • unsigned char* img_data = stbi_load(img_path, &img_w, &img_h, &img_channels, 0); 根据img_path路径加载图片数据,返回确定宽、高、通道数量、每个分量要多少字节,返回加载的数据
  • 注意:图像垂直方向图像翻转,前面我们介绍过,因为 图片座标 与 纹理座标 的垂直向量增量方向不同,所以需要翻转垂直方向行数的数据
    • stbi_set_flip_vertically_on_load(1); 也可以在加载前设置加载时翻转的变量
    • stbi__vertical_flip(img_data, img_w, img_h, 4); 如果不设置前面stbi_set_flip_vertically_on_load(1),也可以在这手动去翻转

删除加载的图片数据

上面代码最后一句,可以看到有个:回收内存函数,这样就可以回收掉之前分配的内存。

只要我们的数据上传到了GPU缓存(显存)就回收。

stbi_image_free(img_data);										// 纹理已经上传到了显存,内存中的数据可以删除了

纹理对象

有了图片数据我们就要开创建纹理。

就像之前介绍的:VAO(顶点缓存数组对象),VBO(顶点缓存对象),EBO/IBO(元素/索引缓存对象),Shader Object(着色器对象),Shader Program Object(着色器程序对象),等对象

所以纹理也有一个封装的对象:纹理对象(Texture Object)。

在使用纹理之前,需要先创建一个 纹理对象。

创建纹理对象

纹理对象的生成/创建可以使用: glCreateTextures

glCreateTextures 是 OpenGL 4.0+ 的规范定义的API。

如果要在 OpenGL 4.0-之前的版本创建纹理对象的话,使用:glGenTextures

OpenGL4.0+的glCreateTextures 和 OpenGL4.0-的glGenTextures 稍微有丢丢不同:

glCreateTextures

void glCreateTextures(	GLenum target,
					 	GLsizei n,
					 	GLuint *textures);

glGenTextures

void glGenTextures(	GLsizei n,
 					GLuint * textures);

OpenGL4.0+的glCreateTextures 的多了第一个参数 GLenum target。后面两参数 n 是创建的 纹理对象数量textures 纹理对象 都一样的意思。

纹理目标类型glCreateTextures - target:是要绑定的纹理目标。它能传入的类型有:

目标(GL_TEXTURE_*) 采样器类型 维度
1D sampler1D 一维
1D_ARRAY sampler1DArray 一维数组
2D sampler2D 二维
2D_Array sampler2DArray 二维数组
2D_MULTISAMPLE sampler2DMS 二维多重采样
2D_MULTISAMPLE_ARRAY sampler2DMSArray 二维多重采样数组
3D sampler3D 三维
CUBE samplerCube 立方体映射纹理
ARRAY samplerCubeArray 立方体映射纹理数组
RECTANGLE samplerRect 二维长方形
BUFFER samplerBuffer 一维缓存

传入对应的纹理类型,对应到着色器中的 采样器类型 也是一一对应的。

glIsTexture 可以判断一个对象ID是否 纹理对象

glCreateTextures(GL_TEXTURE_2D, 1, &texture);					// 创建纹理对象

设置为当前操作的纹理对象

//glActiveTexture(GL_TEXTURE0);									// 默认第 0 个纹理单元是激活的,可以不用设置
glBindTextureUnit(0, texture);									// 绑定第 0 索引的纹理单元,OpenGL 4.0+建议用这个,与 glCreateTextures 配对。 OpenGL4.0-可用 glBindTexture

删除纹理对象

如果某个纹理对象不再使用了,可以使用 glDeleteTextures 删除这个纹理对象:

glDeleteTextures(1, &texture);								// 删除纹理对象

设置纹理对象内部格式以及传入图像数据

上面创建好了 纹理对象 后,纹理对象里还是空的:配置是默认的,纹理数据的空的。在给纹理对象设置图像数据之前,先配置它的数据存储的是什么内部格式。

内部 格式中的 内部 指的是在 OpenGL 环境中的数据(着色器中的采样出来的数据)格式。

内部 就会有相对的 外部,外部格式是我们的图片的数据格式,代表它在 传入到 OpenGL 环境前外部 格式,后面会有说明如何指定我们纹理数据的外部格式。

设置纹理对象的内部格式有:glTextureStorage1DglTextureStorage2DglTextureStorage3D 三个API。

这三个 API 是 OpenGL 4.5+(包含4.5)才有的,在 glad.c OpenGL 4.5 版本的文件可以看到它的读取。

目前:docs.gl上没找到对应的 API。

在 OpenGLS 4.5-(不确定是否4.5-)之前,可以使用其他的 API :glTexImage1DglTexImage1DglTexImage1D

glTextureStorage1D

void glTextureStorage1D(GLuint texture,
					 	GLsizei levels,
					 	GLenum internalformat,
					 	GLsizei width);
  • texture 是指定的纹理对象
  • leves 是指定的 mipmaps 的分层有几级
  • internalFormat 就是我们上面说的的 内部各式 下面的列表有信息,有三个表(Base/Sized/Compressed Internal Format)
  • width 用在这 1D,2D,3D 函数中的纹理的宽度

Base Internal Format(内部格式)

Base Internal Format(基础的内部格式) RGBA, Depth and Stencil Values(RGB,深度和模板值) Internal Components(内部分量)
GL_DEPTH_COMPONENT Depth D
GL_DEPTH_STENCIL Depth, Stencil D, S
GL_RED Red R
GL_RG Red, Green R, G
GL_RGB Red, Green, Blue R, G, B
GL_RGBA Red, Green, Blue, Alpha R, G, B, A

Sized Internal Format

Sized Internal Format Base Internal Format Red Bits Green Bits Blue Bits Alpha Bits Shared Bits
GL_R8 GL_RED 8
GL_R8_SNORM GL_RED s8
GL_R16 GL_RED 16
GL_R16_SNORM GL_RED s16
GL_RG8 GL_RG 8 8
GL_RG8_SNORM GL_RG s8 s8
GL_RG16 GL_RG 16 16
GL_RG16_SNORM GL_RG s16 s16
GL_R3_G3_B2 GL_RGB 3 3 2
GL_RGB4 GL_RGB 4 4 4
GL_RGB5 GL_RGB 5 5 5
GL_RGB8 GL_RGB 8 8 8
GL_RGB8_SNORM GL_RGB s8 s8 s8
GL_RGB10 GL_RGB 10 10 10
GL_RGB12 GL_RGB 12 12 12
GL_RGB16_SNORM GL_RGB 16 16 16
GL_RGBA2 GL_RGB 2 2 2 2
GL_RGBA4 GL_RGB 4 4 4 4
GL_RGB5_A1 GL_RGBA 5 5 5 1
GL_RGBA8 GL_RGBA 8 8 8 8
GL_RGBA8_SNORM GL_RGBA s8 s8 s8 s8
GL_RGB10_A2 GL_RGBA 10 10 10 2
GL_RGB10_A2UI GL_RGBA ui10 ui10 ui10 ui2
GL_RGBA12 GL_RGBA 12 12 12 12
GL_RGBA16 GL_RGBA 16 16 16 16
GL_SRGB8 GL_RGB 8 8 8
GL_SRGB8_ALPHA8 GL_RGBA 8 8 8 8
GL_R16F GL_RED f16
GL_RG16F GL_RG f16 f16
GL_RGB16F GL_RGB f16 f16 f16
GL_RGBA16F GL_RGBA f16 f16 f16 f16
GL_R32F GL_RED f32
GL_RG32F GL_RG f32 f32
GL_RGB32F GL_RGB f32 f32 f32
GL_RGBA32F GL_RGBA f32 f32 f32 f32
GL_R11F_G11F_B10F GL_RGB f11 f11 f10
GL_RGB9_E5 GL_RGB 9 9 9 5
GL_R8I GL_RED i8
GL_R8UI GL_RED ui8
GL_R16I GL_RED i16
GL_R16UI GL_RED ui16
GL_R32I GL_RED i32
GL_R32UI GL_RED ui32
GL_RG8I GL_RG i8 i8
GL_RG8UI GL_RG ui8 ui8
GL_RG16I GL_RG i16 i16
GL_RG16UI GL_RG ui16 ui16
GL_RG32I GL_RG i32 i32
GL_RG32UI GL_RG ui32 ui32
GL_RGB8I GL_RGB i8 i8 i8
GL_RGB8UI GL_RGB ui8 ui8 ui8
GL_RGB16I GL_RGB i16 i16 i16
GL_RGB16UI GL_RGB ui16 ui16 ui16
GL_RGB32I GL_RGB i32 i32 i32
GL_RGB32UI GL_RGB ui32 ui32 ui32
GL_RGBA8I GL_RGBA i8 i8 i8 i8
GL_RGBA8UI GL_RGBA ui8 ui8 ui8 ui8
GL_RGBA16I GL_RGBA i16 i16 i16 i16
GL_RGBA16UI GL_RGBA ui16 ui16 ui16 ui16
GL_RGBA32I GL_RGBA i32 i32 i32 i32
GL_RGBA32UI GL_RGBA ui32 ui32 ui32 ui32

Compressed Internal Format

Compressed Internal Format Base Internal Format Type
GL_COMPRESSED_RED GL_RED Generic
GL_COMPRESSED_RG GL_RG Generic
GL_COMPRESSED_RGB GL_RGB Generic
GL_COMPRESSED_RGBA GL_RGBA Generic
GL_COMPRESSED_SRGB GL_RGB Generic
GL_COMPRESSED_SRGB_ALPHA GL_RGBA Generic
GL_COMPRESSED_RED_RGTC1 GL_RED Specific
GL_COMPRESSED_SIGNED_RED_RGTC1 GL_RED Specific
GL_COMPRESSED_RG_RGTC2 GL_RG Specific
GL_COMPRESSED_SIGNED_RG_RGTC2 GL_RG Specific
GL_COMPRESSED_RGBA_BPTC_UNORM GL_RGBA Specific
GL_COMPRESSED_SRGB_ALPHA_BPTC_UNORM GL_RGBA Specific
GL_COMPRESSED_RGB_BPTC_SIGNED_FLOAT GL_RGB Specific
GL_COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT GL_RGB Specific

glTextureStorage2D 比 1D 的多了个 height

void glTextureStorage2D(前面的参数与1D一样, GLsizei height);

glTextureStorage3D 比 2D 的多了个 depth

void glTextureStorage3D(前面的参数与1D一样, GLsizei depth);

一般 2D 可以当作 1D 的数组,height 作为 1D 的数据的行;3D 可以当作 2D 的数据,depth 作为 2D 的切片层数。

glTextureStorage1D 执行后就像是下面的代码处理:

for (i = 0; i < levels; i++) {
    glTexImage1D(target, i, internalformat, width, 0, format, type, NULL);
    width = max(1, (width / 2));
}

glTextureStorage2D 执行后等价于下面代码:

for (i = 0; i < levels; i++) {
    glTexImage2D(target, i, internalformat, width, height, 0, format, type, NULL);
    width = max(1, (width / 2));
    height = max(1, (height / 2));
}
// When target is GL_TEXTURE_CUBE_MAP, glTexStorage2D is equivalent to:
for (i = 0; i < levels; i++) {
    for (face in (+X, -X, +Y, -Y, +Z, -Z)) {
        glTexImage2D(face, i, internalformat, width, height, 0, format, type, NULL);
    }
    width = max(1, (width / 2));
    height = max(1, (height / 2));
}
// When target is GL_TEXTURE_1D_ARRAY or GL_PROXY_TEXTURE_1D_ARRAY, glTexStorage2D is equivalent to:
for (i = 0; i < levels; i++) {
    glTexImage2D(target, i, internalformat, width, height, 0, format, type, NULL);
    width = max(1, (width / 2));
}

glTextureStorage3D 执行后等价于下面代码:

for (i = 0; i < levels; i++) {
    glTexImage3D(target, i, internalformat, width, height, depth, 0, format, type, NULL);
    width = max(1, (width / 2));
    height = max(1, (height / 2));
    depth = max(1, (depth / 2));
}
// When target is GL_TEXTURE_2D_ARRAY, GL_PROXY_TEXTURE_2D_ARRAY, GL_TEXTURE_CUBE_MAP_ARRAY, or GL_PROXY_TEXTURE_CUBE_MAP_ARRAY, glTexStorage3D is equivalent to:

for (i = 0; i < levels; i++) {
    glTexImage3D(target, i, internalformat, width, height, depth, 0, format, type, NULL);
    width = max(1, (width / 2));
    height = max(1, (height / 2));
}

其实就是根据要生成的 mipmaps 的 levels 值来遍历设置对应 mipmaps 层级的数据、及格式。

注意:但是可以看到他们的等价代码中会调用到glTexImage1DglTexImage1DglTexImage1D,并且最后一个 const void* data 数据传入的是 NULL,这里特别说明一下,如果该参数传入的数据为 NULL,并且当前 GL_PIXEL_UNPACK_BUFFER 绑定的像素缓存对象数据不为 NULL 的话,那么纹理对象中的数据将指向 GL_PIXEL_UNPACK_BUFFER 的缓存数据,它会在着色器程序读取数据时再取读取数据的。

OpenGL 4.5之前,上面的 mipmaps 的数据,我们也可以手动调用 glTexImage2D,再调用 glGenerateMipmap生成 mipmaps 数据:

//// 先填入第0 层 mipmaps 数据
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img_w, img_h, 0, GL_RGBA, GL_UNSIGNED_BYTE, img_data);
// 如果前面给这个纹理对象指定了多层级 mipmaps,那么可以使用 glGenerateMipmap 
// void glGenerateMipmap(GLenum target);
// void glGenerateTextureMipmap(GLuint texture);
// 来给纹理的0层之后的其他mipmaps层生成图像数据
//glGenerateTextureMipmap(texture);// opengl 4.5 API,生成指定纹理对象的mipmaps
glGenerateMipmap(GL_TEXTURE_2D); // opengl 4.5之前的API,生成当前绑定纹理对象,且属于 GL_TEXTURE_2D 类型的纹理对象的mipmaps

glTexImage1D 原型:

void glTexImage1D(	GLenum target,
				 	GLint level,
				 	GLint internalformat,
				 	GLsizei width,
				 	GLint border,
				 	GLenum format,
				 	GLenum type,
				 	const void * data);
  • target 纹理目标类型之间有列表罗列出来了各个枚举与着色器中采样器对应。
  • level 当前要设置的 level 层级
  • internalformat 内部格式,之前也有对应的表格
  • width 单行像素的数量
  • border 必须填0
  • format 外部格式,指定需要用到的分量有哪些,下面讲有对应表格说明
  • type 外部格式,指定分量的类型
    后面的 glTexImage2D/glTextureImage2DglTexImage3D/glTextureImage3D 都只是对二维、三维的纹理处理的。多了个 heightdepth参数而已。类似的也可以使用 glTextureSubImage2D

这里提一下mipmaps
会每次缩小一倍的尺寸来保存另一个已经 linear 采样来缩小过的图片数据,会才图元的某个片元的像素密集度到达一定程度时就会选择使用对应的 mipmaps 数据,像素密集度越大,则使用 miplevels 中对应 level 越高的图片数据来采样。这样既可以让采样性能更高,而且显示质量也越好。
在这里插入图片描述

最终我们调用是:
使用 glTextureStorage2D设置纹理对象内部格式 以及 使用 glTextureSubImage2D 传入图像数据

glTextureStorage2D(												// 设置 texture 纹理对象的内部格式
	texture,													// 要设置的 texture 纹理对象
	1,															// mipmaps 的层数,只要1层 mipmaps 即可,至少要有1层,否则有错误。需要需要多层 mipmaps ,可以指定多层
	GL_RGBA8,													// 内部数据格式
	img_w,														// 图像的宽
	img_h														// 图像的高
);

glTextureSubImage2D(											// 给 texture 纹理对象设置对应 mipmap 层级的数据
	texture,													// 要设置的 texture 纹理对象
	0,															// mipmaps 的层级索引,从0开始,mipmaps 的
	0, 0,														// 要从 x,y 偏移多少开始,不要偏移所以都填0
	img_w, img_h,												// 要填入的行、列尺寸的像素数量
	GL_RGBA, GL_UNSIGNED_BYTE,									// 外部格式,指定要包含的分量数量 和 分量类型
	img_data													// 外部图片数据
);

之前 glTextureSubImage2D API的最后一个参数的作用有说明怎么用,当 GL_PIXEL_UNPACK_BUFFER 缓存对象不为NULL时, glTextureSubImage2D 的最后一个参数将作为 GL_PIXEL_UNPACK_BUFFER 缓存对象数据的字节偏移值。

如下代码,我写了个宏,预处理分支 GET_IMG_DATA_TYPE 1 或是 2 的类型

  • 1 : 直接在 glTextureSubImage2D 的最后一个参数设置数据
  • 2 : 直接在 GL_PIXEL_UNPACK_BUFFER 中读取

1 但是没有问题的,就是 2 的时候有错误。具体暂时找不出什么原因。(按 GL 提示的错误代码是说的缓存数据提供的内容不符合纹理需要的格式,但是为何 1 就可以呢?都是原始的字节流数据,除非 GL_PIXEL_UNPACK_BUFFER 缓存对象会修改原始字节的内容?)

	// 1 : 直接在 glTextureSubImage2D 的最后一个参数设置数据
	// 2 : 直接在 GL_PIXEL_UNPACK_BUFFER 中读取
#define GET_IMG_DATA_TYPE 1											// 使用 2 类型的缓存对象方式来加载纹理对象数据会有错误

#if GET_IMG_DATA_TYPE == 2											// 如果需要从GL_PIXEL_UNPACK_BUFFER中读取纹理数据的话
	glCreateBuffers(1, &pixelBufObject);							// 创建缓存对象
	checkGLError();

	glNamedBufferStorage(											// 给指定缓存对象配置参数、设置数据
		pixelBufObject,												// 要配置的缓存对象
		sizeof(img_data),											// 要分配多少字节缓存大小(sizeof(img_data)的大小)
		img_data,													// 使用 img_data 初始化字节数据,如果填入 NULL,就是不使用数据初始化
		0);															// flag 标记位暂时填入0
	checkGLError();

	glBindBuffer(GL_PIXEL_UNPACK_BUFFER, pixelBufObject);			// 将pixelBufObject缓存对象作为 GL_PIXEL_UNPACK_BUFFER 目标缓存对象
	checkGLError();
#endif

	glTextureSubImage2D(											// 给 texture 纹理对象设置对应 mipmap 层级的数据
		texture,													// 要设置的 texture 纹理对象
		0,															// mipmaps 的层级索引,从0开始,mipmaps 的
		0, 0,														// 要从 x,y 偏移多少开始,不要偏移所以都填0
		img_w, img_h,												// 要填入的行、列尺寸的像素数量
		GL_RGBA, GL_UNSIGNED_BYTE,									// 外部格式,指定要包含的分量数量 和 分量类型
#if GET_IMG_DATA_TYPE == 1
		img_data													// 外部图片数据
#else
		NULL														// 先填充GL_PIXEL_UNPACK_BUFFER数据,这里传入的是NULL从GL_PIXEL_UNPACK_BUFFER缓存数据的字节偏移NULL就是0偏移
#endif
	);
	// 查看有无错误
	checkGLError();													// GET_IMG_DATA_TYPE 2 时会有错误

之前我们有讲到 内部格式,上面的代码注释中有讲到 外部格式 它时告诉 OpenGL 传入的数据是什么格式,好让它转换为 内部数据

外部格式 有量个参数可以决定:formattype

format 的枚举值决定:
GL_RED, GL_RG, GL_RGB, GL_BGR, GL_RGBA, GL_BGRA, GL_DEPTH_COMPONENT, 和 GL_STENCIL_INDEX

type 的枚举值决定分量字节数据分布:
GL_UNSIGNED_BYTE, GL_BYTE, GL_UNSIGNED_SHORT, GL_SHORT, GL_UNSIGNED_INT, GL_INT, GL_FLOAT, GL_UNSIGNED_BYTE_3_3_2, GL_UNSIGNED_BYTE_2_3_3_REV, GL_UNSIGNED_SHORT_5_6_5, GL_UNSIGNED_SHORT_5_6_5_REV, GL_UNSIGNED_SHORT_4_4_4_4, GL_UNSIGNED_SHORT_4_4_4_4_REV, GL_UNSIGNED_SHORT_5_5_5_1, GL_UNSIGNED_SHORT_1_5_5_5_REV, GL_UNSIGNED_INT_8_8_8_8, GL_UNSIGNED_INT_8_8_8_8_REV, GL_UNSIGNED_INT_10_10_10_2, 和 GL_UNSIGNED_INT_2_10_10_10_REV

也可以从纹理对象中读取数据到内存

其实也可以从纹理对象中读取图像数据:

纹理单元

我们的纹理对象的数据最终是要在着色器中被调用的,着色器调用是通过 绑定了纹理元的采样器 对,这样就可以采样到 纹理单元上绑定的纹理对象 的数据了。

纹理单元(Texture Unit),你可以理解为着色器程序中预先分配好的指向纹理指针对象。但是他们的数量是有限的。

如果获取你本机设备上的 OpenGL 查看的纹理单元的支持最大数量,可以使用 glGetIntegerv 使用 GL_MAX_TEXTURE_IMAGE_UNITS 参数来获取,如下:

	// 打印着色器支持最大的纹理图像单元的数量
	int maxTexUnit;
	glGetIntegerv(GL_MAX_TEXTURE_IMAGE_UNITS, &maxTexUnit);
	std::cout << "Maximun number of texture image units : " << maxTexUnit << std::endl;
	
	// 打印着色器支持最大的所有组合的纹理图像单元的数量
	int maxCombinedTexUnit;
	glGetIntegerv(GL_MAX_COMBINED_TEXTURE_IMAGE_UNITS, &maxCombinedTexUnit);
	std::cout << "Maximun number of Combined texture image units : " << maxCombinedTexUnit << std::endl;

一般机器上都能支持 16 个纹理单元。

我的笔记本(2018年的顶配游戏本)上运行上面的代码输出:

Maximun number of texture image units : 32
Maximun number of Combined texture image units : 192

纹理单元的支持最大数量 这个结果在不同的操作系统,不同的硬件的 OpenGL 实现,不同的 OpenGL 版本,都会有可能不一样的结果。

先激活纹理单元

纹理单元要想正常使用,首先这个单元得先激活,可以使用:glActiveTexture

glActiveTexture(GL_TEXTURE0);									// 默认第 0 个纹理单元是激活的,可以不用设置

激活纹理单元的用法与之前的 glBindxxxx 的很类似,因为 OpenGL 底层实现就是一个状态机,多数的操作对象都先要设置为当前要操作的对象,后续的操作函数都会对之前激活、绑定的对象进行处理、配置、等。

注意:在有些代码中,可能会没看到对 GL_TEXTURE0 纹理单元的激活,因为第 0 索引的纹理单元它默认是激活的。

它的参数 GL_TEXTURE[N] 中的 N 可以是 0GL_MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1 的范围。小于 0 或是超出最大支持数量都会出错。

有些 GLAD 的头文件的定义中,最大也就 GL_TEXTURE32 个。

但是,如果我们需要再着色器中 使用多个纹理单元 的使用,就 需要激活多个对应的纹理单元

创建纹理对象后,要在着色器中使用的话,需要绑定到 纹理单元 ,可使用 glBindTextureUnit

glBindTextureUnit(0, texture);									// 绑定第 0 索引的纹理单元,OpenGL 4.0+建议用这个,与 glCreateTextures 配对。 OpenGL4.0-可用 glBindTexture

如果绑定时的 纹理对象ID 是不存在的,可使用:glGetError 来获取OpenGL 当前运行环境中的错误枚举:返回的是:GLenum。通常是:

#define GL_INVALID_ENUM 0x0500
#define GL_INVALID_VALUE 0x0501
#define GL_INVALID_OPERATION 0x0502

下面是绑定一个不存在的纹理对象ID:

glBindTextureUnit(0, 99);	// 第 0 索引的纹理单元,绑定一个不存在的纹理对象ID:99
GLenum error = glGetError();// 获取 OpenGL 运行环境的错误
if (error != 0) {
	std::cout << std::dec;	// 以10进制显示数值
	std::cout << "glError : " << error;
	std::cout << std::hex;	// 以16进制显示数值
	std::cout << "(0x" << error << ")" << std::endl;
}

/* 输出:
glError : 1282(0x502)
*/

采样器

上述中,有题到 采样器类型,其中 采样器,是在着色器程序(Shader Program)中的子着色器程序(Shader)使用的。

一般来说,你在应用程序层创建的 纹理对象 的类型,要与 着色器程序中的 采样器 的类型也是要一一对应的,否则会有问题。

上述的表格有列出了他们一一对应的关系表。

早期的 OpenGL4.5 前的都是使用纹理单元对应的纹理对象,与采样器的类型匹配的方式来使用的,可读性真的很差,我也不知道这么个全球流行的开源渲染系统的设计规范,设计这么拙劣(这也是导致学习成本比较高的原因之一,更高的原因是 API 名称也不友好,很多API命名真的无语)。到了 OpenGL 4.5 的 API 设计上就好很多了,它可以创建采样器,设置采样器参数等,然后还可以绑定采样器对应的采样的纹理单元。

在 OpenGL 4.5 之前,就经过前面设置就可以在着色器添加对应的采样器就可以运作了。
在 OpenGL 4.5 之后,虽然也可以兼容,但是它可以更清晰的设置那个纹理单元使用那个采样器来采样。

我们先对 顶点着色器片元着色器 添加对应的 纹理座标 变量,后续再给应用层的顶点数据添加 纹理座标 数据。

首先我们对 着色器文件的目录调整了:
在这里插入图片描述

  • Dependencies/Shaders/ 下添加了 TestingTexture 的目录
  • 并在 TestingTexture 目录复制了之前的 Shaders/shader1.vert, Shaders/shader1.frag 的两个文件,再调整内容。

testing_tex_shader.vert 的内容为:

// jave.lin - testing_tex_shader.vert - 测试纹理的顶点着色器
#version 450 compatibility
uniform mat4 transformMat;
attribute vec3 vPos;
attribute vec3 vCol;
attribute vec2 vUV;
varying vec3 fCol;
varying vec2 fUV;
void main() {
	gl_Position = transformMat * vec4(vPos, 1.0);
	fCol = vCol;
	fUV = vUV;
}

注意 顶点着色器 中我们添加了:
testing_tex_shader.frag 的内容为:attribute vec2 vUV;varying vec2 fUV;
至于 attributevarying之前有讲过,前者是顶点着色器专用的属性,后者是顶点着色器的数据在光栅化插值后再传入片段着色器的。这里就不再详细说明了。

testing_tex_shader.frag 的内容为:

// jave.lin - testing_tex_shader.frag - 测试纹理的片段着色器
#version 450 compatibility
varying vec3 fCol;
varying vec2 fUV;

uniform sampler2D tex;

void main() {
	vec3 texCol = texture(tex, fUV).rgb;
	gl_FragColor = vec4(fCol * texCol, 1.0);
}
  • varying vec2 fUV; 是顶点着色器传过来的纹理座标数据。
  • vec3 texCol = texture(tex, fUV).rgb; 中,textureGLSL内置函数
    • 第一个参数采样器(这个 采样器已绑定了 我们之前应用层设置的 纹理单元,而 纹理单元也绑定了 我们设置的 纹理对象所以 该采样器 最终会采样 到我们绑定的 纹理对象中的图像数据
    • 第二个参数纹理座标,这个方法有多个重载,这里我们只用到其中一个。
    • 返回值 返回一个 vec4 类型,但是填充了数据的只会按我们之前设置的 外部格式,内部格式 来决定的,如果返回的是一个分量的 vec4 ,那么 vec4 中第一个分量中才是我们想要的数值,其他都是默认值。在这里我们返回的是 vec43 个对我们的逻辑来说才是有效的分量,所以我们采样出来的 vec4,再用 swizzle 语言来获取 rgb3 个分量,并将结果赋值给 texCol 变量。
  • gl_FragColor = vec4(fCol * texCol, 1.0); 最后我们用顶点颜色与纹理颜色相乘混合了。

texture 的各重载原型定义:

gvec4 texture(gsampler1D tex, float P[, float bias]);
gvec4 texture(gsampler2D tex, vec2 P[, float bias]);
gvec4 texture(gsampler3D tex, vec3 P[, float bias]);
gvec4 texture(gsamplerCube tex, vec3 P[, float bias]);
gvec4 texture(gsampler1DArray tex, vec2 P[, float bias]);
gvec4 texture(gsampler2DArray tex, vec3 P[, float bias]);
gvec4 texture(gsampler2DRect tex, vec2 P[, float bias]);
gvec4 texture(gsamplerCubeArray tex, vec4 P[, float bias]);

从名为 tex 的采样器中采样一个纹素,对应的纹理座标为 P。如果对象支持 mipmap,并且设置了 bias,那么这个参数将用于 mipmap 细节层次(level-of-detail)的偏移量计算,来判断采样应当在哪一层进行。函数的返回值是一个包含了采样后的纹理数据的向量。

这里有一个专业术语上的解释:对于很多 GLSL 函数的原型,我们都可以看到 gvec4 (或者其他维度的向量)这样的定义。它实际上是一个“占位符”,表示任何类型的一个向量。它可以用来表达 vec4ivec4uvec4。同理,gsampler2D也是一个这样的占位符,它可以表达 sampler2Disampler2D或者usampler2D类型。此外,我们在书写函数参数的时候如果添加了方括号([和]),说明这个参数是可选的,可以忽略不计。

OpenGL 4.5 后,我们可以使用 glCreateSamplers 来创建我们自定义的采样器。

但是因为 OpenGL 才创建纹理对象时,会给他包含上一个默认配置的采样器,所以我们一般可以不同区设置。

但一般什么情况下会去使用呢?

因为着色器中的采样器对象/单元数量都是有限的,但你的纹理有很多个,多到超过了采样器数量的上限。

这就可以通过抽象出多个纹理对象的相同采样配置,来设置他们的采样器位同一个采样器即可。

可以通过 glBindSamplerglBindSamplers 来处理:

GLuint sampler_object;
...
glCreateSamplers(1, &sampler_object);							// 创建采样器,OpenGL 4.5+才有的API,可读性更高,因为 OpenGL 默认的给每一个纹理对象都包含了一个默认配置的采样器对象,没必要使用,因为有默认的,除非你想多给纹理单元都使用同一个采样器来采样时,就可以通过这种方式来指定
glBindSampler(0, sampler_object);								// 将纹理单元0 的采样器绑定为 sampler_object的

我们现在就不用这个自定义的了。先暂时用着默认的。

纹理系统要区别好这几个玩意儿:

  • 纹理对象
  • 纹理单元
  • 采样器对象/单元

这里我引用一下 《OpenGL 编程指南》第9版说的(其实这是一本很权威的数据,毕竟三个作者都是非常厉害的,都是 OpenGL 开发核心人员,OpenGL 规范制定人员),但是,我看了一些内容,说得不够透彻,该说的没有说清楚。我反正是把它引用过来了,大家能否看懂是另一回事,我个人觉得有些说明前后上是后矛盾的。

我们可以通过着色器中带有纹理单元信息的采样器变量来读取纹理,使用GLSL内置的函数从纹理图像中读取纹素。而纹素读取的方式依赖于另一个对象中的参数,名为采样器对象(sampler object)。采样器对象会绑定到采样器单元,这类似于纹理对象绑定到纹理单元。为了简便起见,我们在每一个纹理对象中包含了一个默认内置的采样器对象,如果没有把采样器对象绑定到专门的采样器单元,这个对象可以用来从纹理对象中读取数据。

应用层程序添加顶点属性

GLfloat uvs[] = {								// 顶点的 uv 座标
	0.0f, 0.0f,									// 左下角
	1.0f, 0.0f,									// 右下角
	1.0f, 1.0f,									// 右上角
	0.0f, 1.0f,									// 左上角
};
...

GLint vuv_location;
GLuint vertex_buffer[4]; // 原来是3的大小,现在改为4,作为uv用

// shader program init 5 - 根据shader源码的相对路径(变量),加载deps下的shader
char vs_path[MAX_PATH], fs_path[MAX_PATH];
g_GetShaderPathCallback(vs_path, "TestingTexture\\testing_tex_shader.vert");
g_GetShaderPathCallback(fs_path, "TestingTexture\\testing_tex_shader.frag");
if (!shaderProgram->initByPath(vs_path, fs_path)) {
	std::cout << "ShaderProgram init Error: " << shaderProgram->errorLog() << std::endl; // 输出shader program错误
	exit(EXIT_FAILURE);
}
...
vuv_location = shaderProgram->getAttributeLoc("vUV");			// 获取 顶点着色器中的顶点 attribute 属性的 location
...
glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[3]);				// 绑定 VBO[2]
glBufferData(GL_ARRAY_BUFFER, sizeof(uvs), uvs, GL_STATIC_DRAW); // 设置 VBO uv数据

glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[3]);				// 绑定 VBO[3],因为后面要设置该 VBO 的uv格式
glVertexAttribPointer(vuv_location, 2, GL_FLOAT, GL_FALSE,		// 设置 顶点属性 vUV 格式
	sizeof(GLfloat) * 2, (GLvoid*)0);
glEnableVertexAttribArray(vuv_location);						// 启用 顶点缓存 location uv的属性

设置好纹理座标的顶点数据后,现在的顶点数据就变成这样的了:
在这里插入图片描述

运行效果

在这里插入图片描述

完整源码

// jave.lin
#include"glad/glad.h"
#include"GLFW/glfw3.h"
//#include"linmath.h"
// 把linmath.h 放在 iostream 之前include会有错误,所以放到iostream 后include就好了
// 而这个错误正式 xkeycheck.h 文件内 #error 提示的,所以可以使用 #define _XKEYCHECK_H 这个头文件的引用标记宏
// 就可以避免对 xkeycheck.h 头文件的 include 了。
#include<iostream>
#include"linmath.h"
#include"shader.h"
// 使用 stb_image.h 的加载库
// github 源码:https://github.com/nothings/stb/blob/master/stb_image.h
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"
// 将之前的打印版本信息代码包含一下
#include"print_gl_version_info.h"

GLfloat vertices[] = {
	// x,	y,	  z
	// 直接放4个顶点
	-0.25f, -0.25f, 0.0f,						// 第0个顶点,左下角
	 0.25f, -0.25f, 0.0f,						// 第1个顶点,右下角
	 0.25f,  0.25f, 0.0f,						// 第2个顶点,右上角
	-0.25f,  0.25f, 0.0f,						// 第3个顶点,左上角
};

GLfloat colors_1[] = {							// 顶点颜色缓存数据1
	1.0f, 0.0f, 0.0f,							// 第0个顶点颜色
	0.0f, 1.0f, 0.0f,							// 第1个顶点颜色
	1.0f, 1.0f, 0.0f,							// 第2个顶点颜色
	0.0f, 0.0f, 1.0f,							// 第3个顶点颜色
};

GLfloat colors_2[] = {							// 顶点颜色缓存数据2
	1.0f, 1.0f, 0.0f,							// 第0个顶点颜色
	0.0f, 1.0f, 1.0f,							// 第1个顶点颜色
	1.0f, 1.0f, 1.0f,							// 第2个顶点颜色
	1.0f, 0.0f, 1.0f,							// 第3个顶点颜色
};

GLfloat uvs[] = {								// 顶点的 uv 座标
	0.0f, 0.0f,									// 左下角
	1.0f, 0.0f,									// 右下角
	1.0f, 1.0f,									// 右上角
	0.0f, 1.0f,									// 左上角
};

GLuint indices[] = {							// 注意索引从0开始!通过索引缓存来指定 图元 组成 用的 顶点有哪些
	0, 1, 3,									// 放置顶点的索引,第一个三角形
	1, 2, 3										// 放置顶点的索引,第二个三角形
};

// 定义:获取 Shader 目录的回调函数原型
typedef char* (__stdcall * GetShaderPathCallback)(char*, const char*);
GetShaderPathCallback g_GetShaderPathCallback = NULL;
// 定义:获取 Pic 目录的回调函数原型
typedef char* (__stdcall* GetPicturePathCallback)(char*, const char*);
GetPicturePathCallback g_GetPicturePathCallback = NULL;

static void error_callback(int error, const char* description) {
	fprintf(stderr, "ErrorCode : %d(0x%08x), Error: %s\n", error, error, description);
}

static void key_callback(GLFWwindow* window, int key, int scancode, int action, int mods) { // 当键盘按键ESCAPE按下时,设置该window为:需要关闭
	if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
		glfwSetWindowShouldClose(window, GLFW_TRUE);
}

// 时候开启检测GL的错误
#define CHECK_GL_ERROR

#ifdef CHECK_GL_ERROR
// 检测如果有GL的错误,则提示并退出程序
#define checkGLError() \
{\
	GLenum errorCode = glGetError(); \
	if (errorCode != 0) { \
		std::cout << "Line:" << __LINE__ << " "; \
		std::cout << std::dec; \
		std::cout << "glError : " << errorCode; \
		std::cout << std::hex; \
		std::cout << "(0x" << errorCode << ")" << std::endl; \
		exit(EXIT_FAILURE); \
	}\
}
#else
#define checkGLError() 
#endif

int main() {
	glfwSetErrorCallback(error_callback); // 安装glfw内部错误时的回调

	if (!glfwInit()) { // 初始化glfw
		std::cout << "glfwInit FAILURE" << std::endl; // 初始化失败
		exit(EXIT_FAILURE);
	}
	// 设置最低的openGL 版本,major:主版本号,minor:次版本号
	// openGl 太低版本的话是不支持CORE Profile模式的
	// 会报错:ErrorCode: 65540(0x00010004), Error : Context profiles are only defined for OpenGL version 3.2 and above
	//glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 2);
	//glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 0);
	// 根据上面的错误提示,至少使用3.2才行,这里我们使用4.5
	//glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 2);
	//glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 0);

	// core profile 下运行有问题,不显示任何内容,但不会报错。
	// 着色器编译、着色器程序链接都没有错误日志信息。
	// 很有可能是因为我参考的学习网站使用的API相对比较老,使用的是3.3的。
	//glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
	// 所以这里我们不设置 major, minor的版本,默认使用本计算机能用的最高版本
	// 使用 compatibility profile 就有内容出现了。

	int width = 600;
	int height = 600;

	// 使用glfw创建窗体
	GLFWwindow* window = glfwCreateWindow(width, height, "jave.lin - Learning OpenGL - 05_Texture", NULL, NULL);
	if (window == NULL) {
		std::cout << "Failed to create GLFW window" << std::endl; // 构建窗体失败
		glfwTerminate();
		exit(EXIT_FAILURE);
	}
	glfwMakeContextCurrent(window);
	glfwSetKeyCallback(window, key_callback); // 安装glfw内部键盘按键的回调

	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) { // 装载OpenGL的C函数库
		std::cout << "Failed to initialize OpenGL context" << std::endl; // 装载报错
		glfwTerminate();
		exit(EXIT_FAILURE);
	}

	// 打印版本信息
	print_infos(window);

	// 打印支持最大的顶点支持的数量
	int nrAttributes;
	glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);
	std::cout << "Maximum number of vertex attributes supported : " << nrAttributes << std::endl;

	// 打印着色器支持最大的纹理图像单元的数量
	int maxTexUnit;
	glGetIntegerv(GL_MAX_TEXTURE_IMAGE_UNITS, &maxTexUnit);
	std::cout << "Maximun number of texture image units : " << maxTexUnit << std::endl;
	
	// 打印着色器支持最大的所有组合的纹理图像单元的数量
	int maxCombinedTexUnit;
	glGetIntegerv(GL_MAX_COMBINED_TEXTURE_IMAGE_UNITS, &maxCombinedTexUnit);
	std::cout << "Maximun number of Combined texture image units : " << maxCombinedTexUnit << std::endl;

	GLint mat_location;
	GLint vpos_location, vcol_location, vuv_location;
	GLuint vertex_buffer[4], index_buffer;
	GLuint vertex_array_object[2];
	GLuint sampler_object;
	GLuint texture;
	GLuint pixelBufObject;
	GLint success, infoLogLen;

	//glBindTextureUnit(0, 99);	// 第 0 索引的纹理单元,绑定一个不存在的纹理对象ID:99
	//checkGLError()

	// 用 lambda 设置,获取 pic 目录的回调,后面在封装
	g_GetPicturePathCallback = [](char* receiveBuff, const char* file)->char* {
		char buf[MAX_PATH];
		sprintf_s(buf, "..\\..\\Dependencies\\Pic\\%s", file);
		strcpy_s(receiveBuff, MAX_PATH, buf);
		return receiveBuff;
	};

	// loading texture here...
	// 加载纹理需要用的图片数据
	char img_path[MAX_PATH];
	g_GetPicturePathCallback(img_path, "my_tex.png");				// 获取图片目录
	int img_w, img_h, img_channels;
	stbi_set_flip_vertically_on_load(1);							// 也可以在加载前设置加载时翻转的变量
	unsigned char* img_data = stbi_load(img_path, &img_w, &img_h, &img_channels, 4); // 加载图片数据,返回确定宽、高、通道数量、每个分量要多少字节
	if (img_data == NULL) {											// 如果加载图片失败
		std::cout << "Loading Image File : " << img_path << " FAILURE : " << stbi_failure_reason() << std::endl;
		exit(EXIT_FAILURE);
	}
	//stbi__vertical_flip(img_data, img_w, img_h, 4);					// 如果不设置前面stbi_set_flip_vertically_on_load(1),也可以在这手动去翻转,因为图片座标与纹理座标的Y轴增量方向不同,所以需要翻转垂直方向的行数数据

	glCreateTextures(GL_TEXTURE_2D, 1, &texture);					// 创建纹理对象
	//glActiveTexture(GL_TEXTURE0);									// 默认第 0 个纹理单元是激活的,可以不用设置
	glBindTextureUnit(0, texture);									// 绑定第 0 索引的纹理单元,OpenGL 4.0+建议用这个,与 glCreateTextures 配对。 OpenGL4.0-可用 glBindTexture
	// 查看有无错误
	checkGLError();
	
	//glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);	// 使用 OpenGL 4.5+ 的 API 会更清晰:glTextureParameteri,因为这个是更具 target 类型,与当前 bind 的 纹理对象来确定设置那个纹理对象的,从可读性来说 4.5+ 版本的可读性高很多
	//glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
	//glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
	//glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
	//glTextureParameteri(texture, GL_TEXTURE_WRAP_S, GL_REPEAT);		// 设置 texture 纹理对象的 GL_TEXTURE_WRAP_S 参数,就是设置 uv 中的水平 u 座标超出0~1范围后的数值环绕方式,GL_REPEAT 是重复的
	//glTextureParameteri(texture, GL_TEXTURE_WRAP_T, GL_REPEAT);		// 设置 texture 纹理对象的 GL_TEXTURE_WRAP_T 参数,就是设置 uv 中的水平 v 座标超出0~1范围后的数值环绕方式,GL_REPEAT 是重复的
	//glTextureParameteri(texture, GL_TEXTURE_MIN_FILTER, GL_LINEAR);	// 设置 texture 纹理对象的 GL_TEXTURE_MIN_FILTER 在像素缩小时的滤波方式
	//glTextureParameteri(texture, GL_TEXTURE_MAG_FILTER, GL_LINEAR);	// 设置 texture 纹理对象的 GL_TEXTURE_MAG_FILTER 在像素放大时的滤波方式
	// 查看有无错误
	checkGLError();

	glTextureStorage2D(												// 设置 texture 纹理对象的内部格式
		texture,													// 要设置的 texture 纹理对象
		1,															// mipmaps 的层数,只要1层 mipmaps 即可,至少要有1层,否则有错误。需要需要多层 mipmaps ,可以指定多层
		GL_RGBA8,													// 内部数据格式
		img_w,														// 图像的宽
		img_h														// 图像的高
	);

	// 查看有无错误
	checkGLError();

	// 1 : 直接在 glTextureSubImage2D 的最后一个参数设置数据
	// 2 : 直接在 GL_PIXEL_UNPACK_BUFFER 中读取
#define GET_IMG_DATA_TYPE 1											// 使用 2 类型的缓存对象方式来加载纹理对象数据会有错误

#if GET_IMG_DATA_TYPE == 2											// 如果需要从GL_PIXEL_UNPACK_BUFFER中读取纹理数据的话
	glCreateBuffers(1, &pixelBufObject);							// 创建缓存对象
	checkGLError();

	glNamedBufferStorage(											// 给指定缓存对象配置参数、设置数据
		pixelBufObject,												// 要配置的缓存对象
		sizeof(img_data),											// 要分配多少字节缓存大小(sizeof(img_data)的大小)
		img_data,													// 使用 img_data 初始化字节数据,如果填入 NULL,就是不使用数据初始化
		0);															// flag 标记位暂时填入0
	checkGLError();

	glBindBuffer(GL_PIXEL_UNPACK_BUFFER, pixelBufObject);			// 将pixelBufObject缓存对象作为 GL_PIXEL_UNPACK_BUFFER 目标缓存对象
	checkGLError();
#endif

	glTextureSubImage2D(											// 给 texture 纹理对象设置对应 mipmap 层级的数据
		texture,													// 要设置的 texture 纹理对象
		0,															// mipmaps 的层级索引,从0开始,mipmaps 的
		0, 0,														// 要从 x,y 偏移多少开始,不要偏移所以都填0
		img_w, img_h,												// 要填入的行、列尺寸的像素数量
		GL_RGBA, GL_UNSIGNED_BYTE,									// 外部格式,指定要包含的分量数量 和 分量类型
#if GET_IMG_DATA_TYPE == 1
		img_data													// 外部图片数据
#else
		NULL														// 先填充GL_PIXEL_UNPACK_BUFFER数据,这里传入的是NULL从GL_PIXEL_UNPACK_BUFFER缓存数据的字节偏移NULL就是0偏移
#endif
	);
	// 查看有无错误
	checkGLError();													// GET_IMG_DATA_TYPE 2 时会有错误

	//// 先填入第 0 层 mipmaps 数据
	//glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img_w, img_h, 0, GL_RGBA, GL_UNSIGNED_BYTE, img_data);
	// 如果前面给这个纹理对象指定了多层级 mipmaps,那么可以使用 glGenerateMipmap 
	// void glGenerateMipmap(GLenum target);
	// void glGenerateTextureMipmap(GLuint texture);
	// 来给纹理的0层之后的其他mipmaps层生成图像数据
	//glGenerateMipmap(GL_TEXTURE_2D); // opengl 4.5之前的API,生成当前绑定纹理对象,且属于 GL_TEXTURE_2D 类型的纹理对象的mipmaps
	glGenerateTextureMipmap(texture);// opengl 4.5 API,生成指定纹理对象的mipmaps
	// 查看有无错误
	checkGLError();

	// when loading complete.
	// free image data here
	stbi_image_free(img_data);										// 纹理已经上传到了显存,内存中的数据可以删除了

	//glCreateSamplers(1, &sampler_object);							// 创建采样器,OpenGL 4.5+才有的API,可读性更高,因为 OpenGL 默认的给每一个纹理对象都包含了一个默认配置的采样器对象,没必要使用,因为有默认的,除非你想多给纹理单元都使用同一个采样器来采样时,就可以通过这种方式来指定
	//// 查看有无错误
	//checkGLError();
	//glBindSampler(0, sampler_object);								// 将纹理单元0 的采样器绑定为 sampler_object的
	//// 查看有无错误
	//checkGLError();

	ShaderProgram* shaderProgram = new ShaderProgram;
	//// shader program init 1 - 直接加载shader源码方式
	//if (!shaderProgram->initBySourceCode(vertex_shader_text, fragment_shader_text)) {

	//// shader program init 2 - 加载shader源码路径方式,我真的是服了C++获取当前运行目录就这么难吗?
	//char exeFullPath[512];
	//char vs_path[512], fs_path[512];
	//GetCurrentDirectoryA(1000, exeFullPath);
	//sprintf_s(vs_path, "%s\\Debug\\%s", exeFullPath, "shader1.vert");
	//sprintf_s(fs_path, "%s\\Debug\\%s", exeFullPath, "shader1.frag");
	//if (!shaderProgram->initByPath(vs_path, fs_path)) {
	
	//// shader program init 3 - 加载shader源码的相对路径,方面第二种方法的是绝对路径
	//if (!shaderProgram->initByPath("Debug\\shader1.vert", "Debug\\shader1.frag")) {
	//	std::cout << "ShaderProgram init Error: " << shaderProgram->errorLog() << std::endl; // 输出shader program错误
	//	exit(EXIT_FAILURE);
	//}

//	// 这种宏定义只能处理常量路径,所以如果要加载动态变量的路径只能写一个方法来处理
//#define GET_SHADER(name) "..\\..\\Dependencies\\Shaders\\"#name
//	// shader program init 4 - 根据shader源码的相对路径(常量),加载deps下的shader
//	if (!shaderProgram->initByPath(GET_SHADER(shader1.vert), GET_SHADER(shader1.frag))) {
//		std::cout << "ShaderProgram init Error: " << shaderProgram->errorLog() << std::endl; // 输出shader program错误
//		exit(EXIT_FAILURE);
//	}

	// 用 lambda 设置,获取 shader 目录的回调,后面在封装
	g_GetShaderPathCallback = [](char* receiveBuff, const char* file)->char* {
		char buf[MAX_PATH];
		sprintf_s(buf, "..\\..\\Dependencies\\Shaders\\%s", file);
		strcpy_s(receiveBuff, MAX_PATH, buf);
		return receiveBuff;
	};
	
	// shader program init 5 - 根据shader源码的相对路径(变量),加载deps下的shader
	char vs_path[MAX_PATH], fs_path[MAX_PATH];
	g_GetShaderPathCallback(vs_path, "TestingTexture\\testing_tex_shader.vert");
	g_GetShaderPathCallback(fs_path, "TestingTexture\\testing_tex_shader.frag");
	if (!shaderProgram->initByPath(vs_path, fs_path)) {
		std::cout << "ShaderProgram init Error: " << shaderProgram->errorLog() << std::endl; // 输出shader program错误
		exit(EXIT_FAILURE);
	}

	mat_location = shaderProgram->getUniformLoc("transformMat");	// 获取 着色器程序的 uniform 变量的 location
	vpos_location = shaderProgram->getAttributeLoc("vPos");			// 获取 顶点着色器中的顶点 attribute 属性的 location
	vcol_location = shaderProgram->getAttributeLoc("vCol");			// 获取 顶点着色器中的顶点 attribute 属性的 location
	vuv_location = shaderProgram->getAttributeLoc("vUV");			// 获取 顶点着色器中的顶点 attribute 属性的 location

	glGenVertexArrays(2, vertex_array_object);						// 生成两个 VAO

	glGenBuffers(4, vertex_buffer);									// 创建4个 VBO,这里我们因为有一个一样的顶点座标,一个一样的顶点UV,两个不同的顶点颜色
	glGenBuffers(1, &index_buffer);									// 创建1个 EBO,因为两个 Quad 的顶点索引顺序都是一样的
	//
	// === VAO[0] ===
	//
	glBindVertexArray(vertex_array_object[0]);						// 绑定 VAO[0],那么之后的 vbo, ebo,的绑定指针都是指向该 VAO 中的,还有顶点格式(规范)都会保存在该 VAO

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[0]);				// 绑定 VBO[0]
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 设置 VBO 座标数据

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[1]);				// 绑定 VBO[1]
	glBufferData(GL_ARRAY_BUFFER, sizeof(colors_1), colors_1, GL_STATIC_DRAW); // 设置 VBO 颜色数据

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[3]);				// 绑定 VBO[2]
	glBufferData(GL_ARRAY_BUFFER, sizeof(uvs), uvs, GL_STATIC_DRAW); // 设置 VBO uv数据

	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index_buffer);			// 绑定 EBO
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW); // 设置 EBO 数据

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[0]);				// 绑定 VBO[0],因为后面要设置该 VBO 的座标格式
	glVertexAttribPointer(vpos_location, 3, GL_FLOAT, GL_FALSE,		// 设置 顶点属性 vPos 格式
		sizeof(GLfloat) * 3, (GLvoid*)0);
	glEnableVertexAttribArray(vpos_location);						// 启用 顶点缓存 location 位置的属性

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[1]);				// 绑定 VBO[1],因为后面要设置该 VBO 的颜色格式
	glVertexAttribPointer(vcol_location, 3, GL_FLOAT, GL_FALSE,		// 设置 顶点属性 vCol 格式
		sizeof(GLfloat) * 3, (GLvoid*)0);
	glEnableVertexAttribArray(vcol_location);						// 启用 顶点缓存 location uv的属性

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[3]);				// 绑定 VBO[3],因为后面要设置该 VBO 的uv格式
	glVertexAttribPointer(vuv_location, 2, GL_FLOAT, GL_FALSE,		// 设置 顶点属性 vUV 格式
		sizeof(GLfloat) * 2, (GLvoid*)0);
	glEnableVertexAttribArray(vuv_location);						// 启用 顶点缓存 location uv的属性

	//
	// === VAO[1] ===
	//
	glBindVertexArray(vertex_array_object[1]);						// 绑定 VAO[1],那么之后的 vbo, ebo,的绑定指针都是指向该 VAO 中的,还有顶点格式(规范)都会保存在该 VAO

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[0]);				// 绑定 VBO[1]
	//glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 设置 VBO 座标数据,这里不用再设置座标,因为都一样

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[2]);				// 绑定 VBO[2]
	glBufferData(GL_ARRAY_BUFFER, sizeof(colors_2), colors_2, GL_STATIC_DRAW); // 设置 VBO 颜色数据,颜色就需要重新设置了,因为不一样

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[3]);				// 绑定 VBO[2]
	//glBufferData(GL_ARRAY_BUFFER, sizeof(uvs), uvs, GL_STATIC_DRAW); // 设置 VBO uv数据,这里不用再设置座标,因为都一样

	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index_buffer);			// 绑定 EBO
	//glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW); // 设置 EBO 数据,这里不用再设置索引值,因为都一样

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[0]);				// 绑定 VBO[0],因为后面要设置该 VBO 的座标格式
	glVertexAttribPointer(vpos_location, 3, GL_FLOAT, GL_FALSE,		// 设置 顶点属性 vPos 格式
		sizeof(GLfloat) * 3, (GLvoid*)0);
	glEnableVertexAttribArray(vpos_location);						// 启用 顶点缓存 location 位置的属性

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[2]);				// 绑定 VBO[2],因为后面要设置该 VBO 的颜色格式
	glVertexAttribPointer(vcol_location, 3, GL_FLOAT, GL_FALSE,		// 设置 顶点属性 vCol 格式
		sizeof(GLfloat) * 3, (GLvoid*)0);
	glEnableVertexAttribArray(vcol_location);						// 启用 顶点缓存 location 位置的属性

	glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer[3]);				// 绑定 VBO[3],因为后面要设置该 VBO 的uv格式
	glVertexAttribPointer(vuv_location, 2, GL_FLOAT, GL_FALSE,		// 设置 顶点属性 vUV 格式
		sizeof(GLfloat) * 2, (GLvoid*)0);
	glEnableVertexAttribArray(vuv_location);						// 启用 顶点缓存 location uv的属性

	//glEnable(GL_CULL_FACE);										// 开启面向剔除
	//glCullFace(GL_BACK);										// 设置剔除背面
	GLboolean cf = glIsEnabled(GL_CULL_FACE);					// 查看是否启用面向剔除
	std::cout << "cull face enabled : " << (cf ? "true" : "false") << std::endl;

	//glFrontFace(GL_CW);											// 顺时针
	//glFrontFace(GL_CCW);										// 逆时针(默认的)ClockWise
	GLint facing;
	glGetIntegerv(GL_FRONT_FACE, &facing);						// 获取正面的顺逆时针 : CW(ClockWise - 顺时针), CCW(Counter ClockWise - 逆时针)
	std::cout << "facing : " << (facing == GL_CW ? "CW" : "CCW") << std::endl;

	mat4x4 rMat, tMat, tranformMat;											// 声明定义一个 mat4x4 用的旋转矩阵

	while (!glfwWindowShouldClose(window)) {					// 检测是否需要关闭窗体

		glfwGetFramebufferSize(window, &width, &height);		// 获取窗口大小

		glViewport(0, 0, width, height);						// 设置Viewport
		glClearColor(0.1f, 0.2f, 0.1f, 0.f);					// 设置清理颜色缓存时,填充颜色值
		glClear(GL_COLOR_BUFFER_BIT);							// 清理颜色缓存

		//glUseProgram(program);									// 使用此着色器程序,两个 VAO 的着色都一样,设置一些 uniform 不一样
		shaderProgram->use();

		glBindVertexArray(vertex_array_object[0]);				// 先绘制 VAO[0] 的 VBO,EBO,VAF,ENABLED
		mat4x4_identity(tMat);									// 给矩阵单位化,消除之前的所有变换
		mat4x4_translate(tMat, -0.5, 0.0f, 0.0f);				// x轴位移-0.5,注意是NDC下的座标
		//glUniformMatrix4fv(mat_location, 1, GL_FALSE, (const GLfloat*)tMat); // 设置, 着色器中 uniform mat4 rMat; 的矩阵数据
		shaderProgram->setMatrix4x4(mat_location, (const GLfloat*)tMat); // 设置, 着色器中 uniform mat4 rMat; 的矩阵数据
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, (GLvoid*)0); // 参数1:绘制三角图元;参数2:取6个索引来绘制三角图元(每个三角图元需要3个,所以可以画两个三角图元);参数3:将 GL_ELEMENT_ARRAY_BUFFER 每个元素视为 uint 类型;参数4:设置索引缓存的字节偏移量。也可以设置为另一个 缓存数据的指针,即:使用另一个数据。

		glBindVertexArray(vertex_array_object[1]);				// 先绘制 VAO[1] 的 VBO,EBO,VAF,ENABLED
		mat4x4_identity(rMat);									// 给矩阵单位化,消除之前的所有变换
		mat4x4_rotate_Z(rMat, rMat, (float)glfwGetTime());		// 先旋转,沿着 z 轴旋转,旋转量为当前 glfw 启用到现在的时间点(秒)
		mat4x4_translate(tMat, +0.5, 0.0f, 0.0f);				// 再位移
		mat4x4_mul(tranformMat, tMat, rMat);					// 将旋转与位移的变换合并
		//glUniformMatrix4fv(mat_location, 1, GL_FALSE, (const GLfloat*)tranformMat); // 设置, 着色器中 uniform mat4 rMat; 的矩阵数据
		shaderProgram->setMatrix4x4(mat_location, (const GLfloat*)tranformMat); // 设置, 着色器中 uniform mat4 rMat; 的矩阵数据
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, (GLvoid*)0); // 参数1:绘制三角图元;参数2:取6个索引来绘制三角图元(每个三角图元需要3个,所以可以画两个三角图元);参数3:将 GL_ELEMENT_ARRAY_BUFFER 每个元素视为 uint 类型;参数4:设置索引缓存的字节偏移量。也可以设置为另一个 缓存数据的指针,即:使用另一个数据。

		glfwSwapBuffers(window);								// swap buffer, from backbuffer to front buffer
		glfwPollEvents();										// 处理其他的系统消息
	}

	
	glDeleteSamplers(1, &sampler_object);						// 测试删除采样器对象 SO
	glDeleteBuffers(1, &pixelBufObject);						// 测试删除 BO
	glDeleteBuffers(4, vertex_buffer);							// 测试删除 VBO
	glDeleteBuffers(1, &index_buffer);							// 测试删除 EBO
	glDeleteBuffers(2, vertex_array_object);					// 测试删除 VAO
	glDeleteTextures(1, &texture);								// 删除纹理对象 TO
	delete shaderProgram;										// 销毁 shader program

	checkGLError();												// 最后再看看GL还有什么错误

	glfwDestroyWindow(window);									// 销毁之前创建的window对象
	glfwTerminate();											// 清理glfw之前申请的资源

	//checkGLError();												// 最后再看看GL还有什么错误,从这句一直报错可以看出:glfw 的销毁与退出是有问题的

	return 0;
} // int main() {

总结

纹理的使用简述步骤为:

  • 创建纹理对象
  • 设置纹理对象内部格式
  • 加载图片的图像数据
  • 设置外部格式数据加载到纹理对象
  • 回收图像数据
  • 激活纹理单元(默认有激活第0个)
  • 绑定纹理对象到指定的纹理单元上
  • 添加顶点数据中的:纹理座标数据
    • 创建纹理座标 vbo,设置指向顶点数据缓存对象
    • 设置纹理座标 vbo 的格式(规范)
  • 创建采样器对象(这步可以不需要,默认纹理对象上有默认配置的采样器)
  • 绑定采样器对象到指定的纹理单元(这步可以不需要,默认纹理对象上有默认配置的采样器)
  • 着色器添加采样器(注意采样器维度类型要与应用程序创建的纹理对象一直)
  • 顶点着色器添加纹理座标 attribute、varying 变量
    • 将 attribute 设置到 varying
  • 片段着色器添加纹理座标 varying 变量
    • 使用 纹理座标 varying 变量,来传入 texture 内置函数来采样纹理对象的数据(texture(sampler_tex_xxx, uv)

References

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章