前言

上一篇文章咱们已经画出来了一个纯色的三角形，那么今天我们画一个非纯色的三角形。

对三角形着色

其实对三角形着色很简单，咱们只需要给予不同的顶点不同的颜色值，然后进行插值就可以了，废话不多说直接看代码。

// 引用EasyX图形库头文件
#include <graphics.h>		
#include <conio.h>
//glm数学相关头文件
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>

#include <iostream>
#include <vector>


std::vector<float> Interpolate(float i0, float d0, float i1, float d1)
{
	std::vector<float> values;
	if (glm::abs(i0 - i1) < 1e-6)
	{
		values.push_back(d0);
		return values;
	}
	float a = (d1 - d0) / (i1 - i0);
	float d = d0;
	for (int i = i0;i < i1;i++)
	{
		values.push_back(d);
		d = d + a;
	}
	return values;
}

void DrawLine(glm::vec2 P0, glm::vec2 P1, COLORREF color)
{
	if (glm::abs(P1.x - P0.x) > glm::abs(P1.y - P0.y))
	{
		if (P0.x > P1.x)
		{
			std::swap(P0, P1);
		}
		std::vector<float> ys = Interpolate(P0.x, P0.y, P1.x, P1.y);
		for (int x = P0.x;x < P1.x;x++)
		{
			putpixel(x, ys[x - P0.x], color);
		}
	}
	else
	{
		if (P0.y > P1.y)
		{
			std::swap(P0, P1);
		}
		std::vector<float> xs = Interpolate(P0.y, P0.x, P1.y, P1.x);
		for (int y = P0.y;y < P1.y;y++)
		{
			putpixel(xs[y - P0.y], y, color);
		}
	}

}

void DrawWireframeTriangle(glm::vec2 P0, glm::vec2 P1, glm::vec2 P2, COLORREF color)
{
	DrawLine(P0, P1, color);
	DrawLine(P1, P2, color);
	DrawLine(P2, P0, color);
}

void DrawFilledTriangle(glm::vec2 P0, glm::vec2 P1, glm::vec2 P2, COLORREF color)
{
	//排序顶点 P0.y <= P1.y <= P2.y
	if (P1.y < P0.y) { std::swap(P1, P0); }
	if (P2.y < P0.y) { std::swap(P2, P0); }
	if (P2.y < P1.y) { std::swap(P2, P1); }

	// 				   P2 |
	// 	                  | 
	// 					  |   P1
	// 					  |  /
	// 					  | /
	// 				   P0 |/			  			   

		//P0P1边x坐标数组
	std::vector<float> x01 = Interpolate(P0.y, P0.x, P1.y, P1.x);
	//P1P2边x坐标数组
	std::vector<float> x12 = Interpolate(P1.y, P1.x, P2.y, P2.x);
	//P0P2边x坐标数组
	std::vector<float> x02 = Interpolate(P0.y, P0.x, P2.y, P2.x);

	//【注意】去掉重复坐标，P0P1和P1P2重复了P1
	//x01.pop_back();
	//x012=x01+x12 x012代表P0P1和P1P2两条边的x坐标数组
	x01.insert(x01.end(), x12.begin(), x12.end());
	std::vector<float> x012(x01);

	float m = glm::floor(x012.size() / 2);
	std::vector<float> x_left;
	std::vector<float> x_right;
	//	      第一种情况
	// 		  P2 |
	// 	         | 
	// 			 |   P1
	// 			 |  /
	// 			 | /
	// 		  P0 |/		
	if (x02[m] < x012[m])
	{
		x_left = x02;
		x_right = x012;
	}
	//	      第二种情况
	// 		    /| P2
	// 	       / | 
	// 	   p1 /  | 
	// 		  	 |
	// 		    |
	// 		    | P0	
	else
	{
		x_left = x012;
		x_right = x02;
	}
	//从左到右填充
	for (int y = P0.y;y < P2.y;y++)
	{
		for (int x = x_left[y - P0.y];x < x_right[y - P0.y];x++)
		{
			putpixel(x, y, color);
		}
	}
}

struct Vertex
{
	glm::vec3 position;
	float color;
};

void DrawShadedTriangle(Vertex P0, Vertex P1, Vertex P2, COLORREF color)
{

	BYTE r = GetRValue(color);
	BYTE g = GetGValue(color);
	BYTE b = GetBValue(color);

	//排序顶点 P0.y <= P1.y <= P2.y
	if (P1.position.y < P0.position.y) { std::swap(P1, P0); }
	if (P2.position.y < P0.position.y) { std::swap(P2, P0); }
	if (P2.position.y < P1.position.y) { std::swap(P2, P1); }

	// 				   P2 |
	// 	                  | 
	// 					  |   P1
	// 					  |  /
	// 					  | /
	// 				   P0 |/			  			   

	//P0P1边x坐标数组
	std::vector<float> x01 = Interpolate(P0.position.y, P0.position.x, P1.position.y, P1.position.x);
	std::vector<float> h01 = Interpolate(P0.position.y, P0.color, P1.position.y, P1.color);

	//P1P2边x坐标数组
	std::vector<float> x12 = Interpolate(P1.position.y, P1.position.x, P2.position.y, P2.position.x);
	std::vector<float> h12 = Interpolate(P1.position.y, P1.color, P2.position.y, P2.color);

	//P0P2边x坐标数组
	std::vector<float> x02 = Interpolate(P0.position.y, P0.position.x, P2.position.y, P2.position.x);
	std::vector<float> h02 = Interpolate(P0.position.y, P0.color, P2.position.y, P2.color);

	//【注意】去掉重复坐标，P0P1和P1P2重复了P1
	//x01.pop_back();
	//x012=x01+x12 x012代表P0P1和P1P2两条边的x坐标数组
	x01.insert(x01.end(), x12.begin(), x12.end());
	std::vector<float> x012(x01);

	h01.insert(h01.end(), h12.begin(), h12.end());
	std::vector<float> h012(h01);

	float m = glm::floor(x012.size() / 2);
	std::vector<float> x_left;
	std::vector<float> x_right;

	std::vector<float> h_left;
	std::vector<float> h_right;

	//	      第一种情况
	// 		  P2 |
	// 	         | 
	// 			 |   P1
	// 			 |  /
	// 			 | /
	// 		  P0 |/		
	if (x02[m] < x012[m])
	{
		x_left = x02;
		x_right = x012;

		h_left = h02;
		h_right = h012;
	}
	//	      第二种情况
	// 		    /| P2
	// 	       / | 
	// 	   p1 /  | 
	// 		  	 |
	// 		    |
	// 		    | P0	
	else
	{
		x_left = x012;
		x_right = x02;

		h_left = h012;
		h_right = h02;
	}
	//从左到右填充
	for (int y = P0.position.y; y < P2.position.y; y++)
	{
		float x_l = x_left[y - P0.position.y];
		float x_r = x_right[y - P0.position.y];

		std::vector<float> h_segment = Interpolate(x_l, h_left[y - P0.position.y], x_r, h_right[y - P0.position.y]);

		for (int x = x_left[y - P0.position.y]; x < x_right[y - P0.position.y]; x++)
		{
			COLORREF shaded_color = RGB(r * h_segment[x - x_l], g * h_segment[x - x_l], b * h_segment[x - x_l]);
			putpixel(x, y, shaded_color);
		}
	}
}

int main()
{
	int ScreenWidth = 800;
	int ScreenHeight = 600;

	initgraph(ScreenWidth, ScreenHeight);	// 创建绘图窗口，大小为 640x480 像素

	Vertex v0;
	v0.position = { 200, 200 ,0 };
	v0.color = 1.0f;
	Vertex v1;
	v1.position = { 200, 500 ,0 };
	v1.color = 0.5f;
	Vertex v2;
	v2.position = { 350, 350 ,0 };
	v2.color = 0.0f;

	// 	glm::vec2 P0(200, 200);
	// 	glm::vec2 P1(200, 500);
	// 	glm::vec2 P2(350, 350);

	DrawShadedTriangle(v0, v1, v2, RGB(255, 0, 0));

	_getch();				// 按任意键继续
	closegraph();			// 关闭绘图窗口
	return 0;
}

结果

结尾

如果你遇到了问题可以在评论区告诉我哦
光栅化渲染器：三角形着色欢迎去我的个人网站留言
项目地址

最后

以上就是典雅中心为你收集整理的光栅化渲染器：对三角形着色前言对三角形着色结尾的全部内容，希望文章能够帮你解决光栅化渲染器：对三角形着色前言对三角形着色结尾所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。