C++模拟OpenGL库——图形学状态机接口封装（二）：基于状态机接口的画线&画三角形

已于 2023-03-21 14:36:56 修改
阅读量822 收藏 1
点赞数
分类专栏： OpenGL 文章标签： c++ 重构 OpenGL
于 2022-11-21 14:52:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jason6620/article/details/127962806
版权

目录

画线操作

画三角形操作

按区间取点来进行绘制

加入纹理

画线操作

上次我们定义了一系列状态机接口，并遗留了：

void Canvas::gtDrawArray(DRAW_MODE _mode, int _first, int _count)

没有去实现，这次对他进行一个实现，一个利用状态机接口画线的功能。

这里直接上代码，并且连带着之前的关键类，方便理解：

	class Point {
	public:
		float m_x;
		float m_y;
		RGBA m_color;
		floatV2 m_uv;

		Point(float _x = 0, float _y = 0, RGBA _color = RGBA(0, 0, 0, 0), floatV2 _uv = floatV2(0.0, 0.0)) {
			m_x = _x, m_y = _y, m_color = _color, m_uv = _uv;
		}

		
//===========================Render==================================================
void Render() {
    _canvas->clear();

    GT::Point ptArray[] = {
        {0.0,200.0,       GT::RGBA(255,0,0),GT::floatV2(0,0)},
        {800.0,200.0,     GT::RGBA(0,255,0),GT::floatV2(1.0,0)},
        {100.0,600.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {800.0,300.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {200.0,150.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)}
    };

    _canvas->gtVertexPointer(2, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)ptArray);
    _canvas->gtColorPointer(1, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)&ptArray[0].m_color);
    _canvas->gtDrawArray(GT::GT_LINE, 0, 5);

    //在这里画到设备上，hMem相当于缓冲区
    BitBlt(hDC, 0, 0, wWidth, wHeight, hMem, 0, 0, SRCCOPY);
}
	void Canvas::gtDrawArray(DRAW_MODE _mode, int _first, int _count)
	{
		GT::Point pt0, pt1;
		byte* _vertexData = m_state.m_vertexData.m_data;
		byte* _colorData = m_state.m_colorData.m_data;
		switch (_mode) {
		case GT_LINE:
			_count /= 2;
			for (int i = 0; i < _count; i ++) {
				//取坐标,按步长
				float* _vertexDataFloat = (float*)_vertexData;
				pt0.m_x = _vertexDataFloat[0];
				pt0.m_y = _vertexDataFloat[1];
				_vertexData += m_state.m_vertexData.m_stride;

				_vertexDataFloat = (float*)_vertexData;
				pt1.m_x = _vertexDataFloat[0];
				pt1.m_y = _vertexDataFloat[1];
				_vertexData += m_state.m_vertexData.m_stride;

				//取颜色坐标
				RGBA* _colorDataRGBA = (RGBA*)_colorData;
				pt0.m_color = _colorDataRGBA[0];

				_colorData += m_state.m_colorData.m_stride;

				_colorDataRGBA = (RGBA*)_colorData;
				pt1.m_color = _colorDataRGBA[0];
				_colorData += m_state.m_colorData.m_stride;

				//画线
				drawLine(pt0, pt1);
			}
			break;
		case GL_TRIANGLE:
			break;
		default:
			break;
		}
	}

简单解析一下：

首先我们从上往下看，我们有了一个Point类，里面包含了坐标xy，颜色RGBA信息m_color，以及uv坐标。
我们在Render函数里设定里五个点，分别是：

    GT::Point ptArray[] = {
        {0.0,200.0,       GT::RGBA(255,0,0),GT::floatV2(0,0)},
        {800.0,200.0,     GT::RGBA(0,255,0),GT::floatV2(1.0,0)},
        {100.0,600.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {800.0,300.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {200.0,150.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)}
    };

那么接下来的事就是如何利用这些信息来描绘这些点，并且调用drawLine来绘制直线了。
首先用gtVertexPointer获得点的信息：

_canvas->gtVertexPointer(2, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)ptArray);

参数分别意味着：

  • 2：平面上的点，有两个元素
  • GT::GT_FLOAT：值类型是float类型
  • sizeof(GT::Point)：每次步长是一个Point类的大小，这一点很重要
  • GT::byte*)ptArray：从这部分数据中的哪个位置开始取数据

对于

 _canvas->gtColorPointer(1, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)&ptArray[0].m_color);

也是同理，不多赘述。值得注意的是我们要从Point中的m_color部分开始取颜色的数据。

接下来就是如何遍历这个Point数组，来取数据，并且把取来的数据进行一个装配，配置好点pt1和pt2的坐标信息以及颜色信息，然后进行画线的过程。

	void Canvas::gtDrawArray(DRAW_MODE _mode, int _first, int _count)
	{
		GT::Point pt0, pt1;
		byte* _vertexData = m_state.m_vertexData.m_data;
		byte* _colorData = m_state.m_colorData.m_data;
		switch (_mode) {
		case GT_LINE:
			_count /= 2;
			for (int i = 0; i < _count; i ++) {
				//取坐标,按步长
				float* _vertexDataFloat = (float*)_vertexData;
				pt0.m_x = _vertexDataFloat[0];
				pt0.m_y = _vertexDataFloat[1];
				_vertexData += m_state.m_vertexData.m_stride;

				_vertexDataFloat = (float*)_vertexData;
				pt1.m_x = _vertexDataFloat[0];
				pt1.m_y = _vertexDataFloat[1];
				_vertexData += m_state.m_vertexData.m_stride;

				//取颜色坐标
				RGBA* _colorDataRGBA = (RGBA*)_colorData;
				pt0.m_color = _colorDataRGBA[0];

				_colorData += m_state.m_colorData.m_stride;

				_colorDataRGBA = (RGBA*)_colorData;
				pt1.m_color = _colorDataRGBA[0];
				_colorData += m_state.m_colorData.m_stride;

				//画线
				drawLine(pt0, pt1);
			}
			break;
		case GL_TRIANGLE:
			break;
		default:
			break;
		}
	}

测试一下:

五个点，只能画出两条线。在Canvas::gtDrawArray有一个_count /= 2;，作用就是这个。

（其实颜色不对，估计是和windows下的RGBA 值没有对应上，，有时间再看看改改吧。原理上是对的，暂时就可以了）

画三角形操作

原理和画线是一样的，只不过每次绘制需要多加一个点，并且可以加入纹理的信息：

//===========================Render==================================================
void Render() {
    _canvas->clear();

    GT::Point ptArray[] = {
        {0.0,200.0,       GT::RGBA(255,0,0),GT::floatV2(0,0)},
        {400.0,200.0,     GT::RGBA(0,255,0),GT::floatV2(1.0,0)},
        {500.0,400.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {600.0,300.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {200.0,150.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {150.0,150.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {220.0,100.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)}
    };

    _canvas->gtVertexPointer(2, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)ptArray);
    _canvas->gtColorPointer(1, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)&ptArray[0].m_color);
    _canvas->gtDrawArray(GT::GL_TRIANGLE, 0, 7);

    //在这里画到设备上，hMem相当于缓冲区
    BitBlt(hDC, 0, 0, wWidth, wHeight, hMem, 0, 0, SRCCOPY);
}
	void Canvas::gtDrawArray(DRAW_MODE _mode, int _first, int _count)
	{
		//三个点
		GT::Point pt0, pt1, pt2;
		byte* _vertexData = m_state.m_vertexData.m_data;
		byte* _colorData = m_state.m_colorData.m_data;
		byte* _texCoordData = m_state.m_texCoordData.m_data;

		switch (_mode) {
		case GT_LINE:
			......
			break;
		case GL_TRIANGLE:
			_count /= 3;
			for (int i = 0; i < _count; i++) {
				//取坐标,按步长
				//pt0
				float* _vertexDataFloat = (float*)_vertexData;
				pt0.m_x = _vertexDataFloat[0];
				pt0.m_y = _vertexDataFloat[1];
				_vertexData += m_state.m_vertexData.m_stride;
				//pt1
				_vertexDataFloat = (float*)_vertexData;
				pt1.m_x = _vertexDataFloat[0];
				pt1.m_y = _vertexDataFloat[1];
				_vertexData += m_state.m_vertexData.m_stride;
				//pt2
				_vertexDataFloat = (float*)_vertexData;
				pt2.m_x = _vertexDataFloat[0];
				pt2.m_y = _vertexDataFloat[1];
				_vertexData += m_state.m_vertexData.m_stride;

				//取颜色坐标
				//pt1
				RGBA* _colorDataRGBA = (RGBA*)_colorData;
				pt0.m_color = _colorDataRGBA[0];
				_colorData += m_state.m_colorData.m_stride;
				//pt2
				_colorDataRGBA = (RGBA*)_colorData;
				pt1.m_color = _colorDataRGBA[0];
				_colorData += m_state.m_colorData.m_stride;
				//pt3
				_colorDataRGBA = (RGBA*)_colorData;
				pt2.m_color = _colorDataRGBA[0];
				_colorData += m_state.m_colorData.m_stride;

				//画三角形
				drawTriange(pt0, pt1, pt2);
			}
			break;
		default:
			break;
		}
	}

结果如下，（颜色不对，先忽略下。。）：

按区间取点来进行绘制

我们之前绘制的点，都是默认从头到尾的，比如：

_canvas->gtDrawArray(GT::GL_TRIANGLE, 0, 7);

有7个点，从0到7这样取。那如果要是想从2到5这样取呢？回到函数定义上：

void gtDrawArray(DRAW_MODE _mode,int _first,int _count);//从first的点，画count个点

只需修改一下即可:

void Canvas::gtDrawArray(DRAW_MODE _mode, int _first, int _count)
	{
		//三个点
		GT::Point pt0, pt1, pt2;
		byte* _vertexData = m_state.m_vertexData.m_data + _first * m_state.m_vertexData.m_stride;
		byte* _colorData = m_state.m_colorData.m_data + _first * m_state.m_colorData.m_stride;
		byte* _texCoordData = m_state.m_texCoordData.m_data + _first * m_state.m_texCoordData.m_stride;
		_count -= _first;
        .....................

测试：

_canvas->gtDrawArray(GT::GL_TRIANGLE, 2, 7);

取了5个点，只能画一个三角形。

.

加入纹理

void Canvas::gtDrawArray(DRAW_MODE _mode, int _first, int _count) 中:

case GL_TRIANGLE:
			_count /= 3;
			for (int i = 0; i < _count; i++) {
				......

				//取uv坐标
				floatV2* _uvData = (floatV2*)_texCoordData;
				pt0.m_uv = _uvData[0];
				_texCoordData += m_state.m_texCoordData.m_stride;

				_uvData = (floatV2*)_texCoordData;
				pt1.m_uv = _uvData[0];
				_texCoordData += m_state.m_texCoordData.m_stride;

				_uvData = (floatV2*)_texCoordData;
				pt2.m_uv = _uvData[0];
				_texCoordData += m_state.m_texCoordData.m_stride;

测试：

//===========================Render==================================================
void Render() {
    _canvas->clear();

    GT::Point ptArray[] = {
        {0.0,0.0,        GT::RGBA(255,0,0),GT::floatV2(0,0)},
        {500.0,0.0,      GT::RGBA(0,255,0),GT::floatV2(1.0,0)},
        {500.0,300.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)},
        {0.0,300.0,      GT::RGBA(0,0,255),GT::floatV2(0.0,1.0)},
        {0.0,0.0,        GT::RGBA(0,0,255),GT::floatV2(0,0)},
        {500.0,300.0,    GT::RGBA(0,0,255),GT::floatV2(1.0,1.0)}        
    };

    _canvas->gtVertexPointer(2, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)ptArray);
    _canvas->gtColorPointer(1, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)&ptArray[0].m_color);
    _canvas->gtTexCoordPointer(1, GT::GT_FLOAT, sizeof(GT::Point), (GT::byte*)&ptArray[0].m_uv);
    _canvas->gtDrawArray(GT::GL_TRIANGLE, 0, 6);

    _canvas->enableTexture(true);
    _canvas->bindTexture(_bkImage);

    //在这里画到设备上，hMem相当于缓冲区
    BitBlt(hDC, 0, 0, wWidth, wHeight, hMem, 0, 0, SRCCOPY);
}

 

BBBourne
关注
专栏目录
C++计算机图形学OpenGL编程套件合集（Windows 64位）
04-14
含有如下库文件： ...3. GLFW（一个OpenGL功能封装实现） 4. GLM（OpenGL数学计算库） 5. SDL2（多媒体简易编程库） 6. SOIL2（图像简易解析库） 同时支持MinGW64和Visual C++两种编译器，请任选其一进行学习与开发
C++模拟OpenGL库——图形学状态机接口封装（一）：用状态模式重构部分代码及接口定义
最不正经的计算机专业学生
11-20 884
C++模拟OpenGL库——图形学状态机接口封装（一）：用状态模式重构部分代码及接口定义
探索globjects：优雅的OpenGL对象封装库
gitblog_00041的博客
05-10 510
探索globjects：优雅的OpenGL对象封装库 globjectsC++ library strictly wrapping OpenGL objects.项目地址:https://gitcode.com/gh_mirrors/gl/globjects 项目介绍 globjects 是一款跨平台的C++库，它为OpenGL API提供了一层友好的面向对象封装。这个库的设计目标是减少编写Op...
OpenGL（C++3D库）教程 1 配置与调试
最新发布
2401_86528221的博客
08-05 679
打开Dev-C++，文件->新建->项目->Multimedia->OpenGL,创建一个新项目。注意，请给项目新建一个文件夹，因为Dev-C++是不会自动给项目添加文件夹的。-lopengl32-lglfw3-lglu32-lgdi32-lwinmm点击确定，配置结束。
OpenGL（六）——创建三维图形
ifeng12358的博客
10-18 1万+
OpenGL（三）——创建三维图形 一、
用C++类、C函数封装OpenGL功能模块
weixin_42950492的博客
06-27 312
用C++类与C函数封装OpenGL功能模块！
图形学实验：C++实现画各种图形，直线，曲线。多边形，
10-30
在图形学领域，C++是一种常用的编程语言，用于创建各种可视化元素，如直线、曲线、多边形等。本实验的目的是让学生掌握C++在图形绘制方面的应用，理解图形渲染的基本原理，以及如何通过编程控制图形的颜色、线条样式...
关于《计算机图形学编程（使用Opengl和c++）》资源环境
10-02
- **状态机模型**：OpenGL是一个状态机，你可以设置各种状态（如颜色、深度测试、混合模式等），然后绘制图形，这些状态会影响图形的最终渲染效果。 - **缓冲区对象**：用于存储顶点数据、索引数据或纹理数据，提高...
opengl接口函数画贝塞尔曲线和B样条曲线
05-26
实现C++ opengl的glut库接口函数画贝塞尔曲线和均匀B样条曲线
52128计算机图形学编程（使用OpenGL和C++）.zip
11-19
本学期上图形学编程课，老师提供的辅助材料，无任何版权问题，可以拿去边看书，边翻阅，里面包含ppt，以及程序的参考答案。
OpenGL与gl glu glut freeglut glew glfw框架关系(十五)
Android系统攻城狮
08-03 541
本篇目的：OpenGL与gl glu glut freeglut glew glfw框架关系。更多原创,欢迎关注：Android系统攻城狮。
OPENGL学习（一）认识OPENGL和各种库
qq_21043585的博客
07-13 3534
认识OPENGL各种库
c++/OpenGL,绘制3个立体图像
走向CTO的路上...
10-08 536
C++是一种通用的编程语言，而OpenGL是一个用于图形渲染的跨平台API。OpenGL提供了一系列的函数和接口，用于创建图形窗口、设置渲染上下文、定义顶点和着色器、设置光照和纹理等等。通过编写C++代码，使用OpenGL的函数和接口，可以实现绘制三维图形的逻辑。通过利用OpenGL的强大功能，结合C++的灵活性和高性能，可以实现高度交互性和逼真的三维图形应用。这只是一些当前使用C++和OpenGL的示例，实际上，C++和OpenGL的组合在许多领域中都得到广泛应用。
C++ + opengl 的总结
u012719076的博客
11-11 4633
用opengl 画两个点，发现这个点怎么都没显示出来： 应该用glBegin(GL_POINTS); glClearColor(0.4, 0.5, 1, 0); glColor3f(0.0f, 1.0f, 0.0f); glBegin(GL_POINT); glPointSize(106); glVertex3f(0.90f, 0.10f, 0.0f); glVertex3f(0.4f, 0.40f, 0.0f); glEnd(); 最后发现，我是画的两个点，glBegin后面是point参
OpenGL / C++ 学习笔记（一） 搭设环境
CJL_asLong72的博客
02-01 8424
OpenGL是一个庞大且用途多样的图形库，涉及知识点和函数较多，==对刚接触图形学的新手==而言零基础直接啃《OpenGL超级宝典》（俗称蓝宝书）或《OpenGL编程指南》（又叫红宝书（虽然中文版是墨绿色的封皮=-=））其实是不太适合的。 这边推荐新手先食用相较下会简单点的learnopengl提供的入门教程(由于教程是放在gayhub上，所以可能需要魔法上网，或者食用官方英文版教程)
【C++】OpenGL：计算机图形学OpenGL基础及环境配置
DevFrank的博客
10-08 4574
计算机图形学OpenGL基础及环境配置
C++ OpenGL学习——入门篇
热门推荐
peixin_huang的博客
02-17 1万+
本文参考自 opengl学习网站 opengl学习网站中文版 一、什么是OpenGL OpenGL主流上被认为是一个API(一个应用程序程序接口)，提供了大量的函数，使用这些函数可以操作图形和图像。但OpenGL本身不是API，而是一个规范，由Khronos集团开发和维护 二、安装配置 1、OpenGL本身并没有创建窗口的函数，所以只能调用其他函数库，这里使用GLFW创建窗口 2、安装GLFW 下...
OpenglC++学习笔记
晨蓝的博客
02-17 3644
文章目录OpenGL学习19.10.13OpenGL环境配置OpengGL是什么？GLFW预编译文件和源代码文件GLFW配置CMAKEGLAD和GLEW创建一个窗口渲染循环glClearColor和glClear三角形图元(primitive)标准化设备坐标(Normalized Device Coordinates, NDC)10.15vs解决方案sln文件lib和头文件c++里的数组和size...
OpenGL实现皮球运动动画：计算机图形学课程设计
该设计旨在通过模拟皮球从高处落下、弹起并最终静止的过程，让学生掌握计算机图形学中的动画原理和圆的绘制技术。" 在这个项目中，皮球运动动画的设计方案基于以下几个关键知识点： 1. **动画原理**：动画是利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值