前言

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

对三角形着色

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
// 引用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;

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

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

结果

在这里插入图片描述

结尾

如果你遇到了问题可以在评论区告诉我哦
项目地址