写在前面
源码：https://github.com/bajdcc/GameFramework/blob/master/CCGameFramework/base/pe2d/Render2DScene5.cpp
本文主要内容：
- 三角形的渲染
- 聚光效果的实现
- 色散的简易版实现
三角形的渲染
在上一文中，主要介绍了矩形的渲染，其实三角形也跟它差不多，无非就是判断线与线的关系罢了。
三角形的数据结构：
// 三角形
class Geo2DTriangle : public Geo2DShape
{
public:
Geo2DTriangle(vector2 p1, vector2 p2, vector2 p3, color L, color R, float eta, color S);
~Geo2DTriangle() = default;
Geo2DResult sample(vector2 ori, vector2 dir) const override;
vector2 get_center() const override;
vector2 center, p1, p2, p3;
vector2 n[3];
};
要注意的地方：
- 三角形的中心点（重心）要计算出来
- 缓存三角形三条边的法线
- 确保三个点p1~p3的按顺时针方向排列的
顶点排序与法线设置
// 假定三顶点是顺时针方向
const auto p12 = p2 - p1;
const auto p13 = p3 - p1;
if (p12.x * p13.y - p12.y * p13.x < 0) // 确保点1、2、3是顺时针
{
const auto tmp = p2;
p2 = p3;
p3 = tmp;
}
n[0] = p2 - p1;
n[0] = Normalize(vector2(n[0].y, -n[0].x));
n[1] = p3 - p2;
n[1] = Normalize(vector2(n[1].y, -n[1].x));
n[2] = p1 - p3;
n[2] = Normalize(vector2(n[2].y, -n[2].x));
怎样知道三个点是顺时针排列的呢？本质上是求一个点在另外两个点形成的线段的哪一侧。
求点P在直线L的左侧还是右侧？可以用叉乘法，我们只要知道叉乘结果的符号就可以了。
三角形的采样方法类似于矩形的：
Geo2DResult Geo2DTriangle::sample(vector2 ori, vector2 dir) const
{
const vector2 pts[3] = { p1,p2,p3 }; static int m[3][2] = { { 0,1 },{ 1,2 },{ 2,0 } };
float t[2];
vector2 p[2];
int ids[2];
int cnt = 0;
for (int i = 0; i < 3 && cnt < 2; i++)
{
if (IntersectWithLineAB(ori, dir, pts[m[i][0]], pts[m[i][1]], t[cnt], p[cnt]))
{
ids[cnt++] = i;
}
}
if (cnt == 2)
{
const auto td = ((t[0] >= 0 ? 1 : 0) << 1) | (t[1] >= 0 ? 1 : 0);
switch (td)
{
case 0: // 双反，无交点，在外
break;
case 1: // t[1]，有交点，在内
return Geo2DResult(this, true,
Geo2DPoint(t[0], p[0], n[ids[0]]),
Geo2DPoint(t[1], p[1], n[ids[1]]));
case 2: // t[0]，有交点，在内
return Geo2DResult(this, true,
Geo2DPoint(t[1], p[1], n[ids[1]]),
Geo2DPoint(t[0], p[0], n[ids[0]]));
case 3: // 双正，有交点，在外
if (t[0] > t[1])
{
return Geo2DResult(this, false,
Geo2DPoint(t[1], p[1], n[ids[1]]),
Geo2DPoint(t[0], p[0], n[ids[0]]));
}
else
{
return Geo2DResult(this, false,
Geo2DPoint(t[0], p[0], n[ids[0]]),
Geo2DPoint(t[1], p[1], n[ids[1]]));
}
default:
break;
}
}
return Geo2DResult();
}
聚光效果
要做一个色散就要一束平行的光，实现很简单，限制角度！
我们在圆的采样方法中，做一个判断：当光线来的角度不在聚光灯有效范围内时，就返回黑色。
Geo2DResult Geo2DCircle::sample(vector2 ori, vector2 dir) const
{
auto v = ori - center;
auto a0 = SquareMagnitude(v) - rsq;
auto DdotV = DotProduct(dir, v); //if (DdotV <= 0)
{
auto discr = (DdotV * DdotV) - a0; // 平方根中的算式 if (discr >= 0)
{
// 非负则方程有解，相交成立
// r(t) = o + t.d
auto distance = -DdotV - sqrtf(discr); // 得出t，即摄影机发出的光线到其与圆的交点距离
auto distance2 = -DdotV + sqrtf(discr);
auto position = ori + dir * distance; // 代入直线方程，得出交点位置
auto position2 = ori + dir * distance2;
auto normal = Normalize(position - center); // 法向量 = 光线终点(球面交点) - 球心坐标
auto normal2 = Normalize(position2 - center);
if (a0 > 0 && angle && !(A1.x * dir.y < A1.y * dir.x && A2.x * dir.y > A2.y * dir.x))
{ // 判断三条线之间的时针顺序
return Geo2DResult();
}
return Geo2DResult((a0 <= 0 || distance >= 0) ? this : nullptr, a0 <= 0,
Geo2DPoint(distance, position, normal),
Geo2DPoint(distance2, position2, normal2));
}
} return Geo2DResult(); // 失败，不相交
}
色散效果
色散其实就是不同频率的光在介质内的折射率不同，我们就简化一下，按照RGB修改折射率，如：红光=原折射率，绿光=原折射率+0.1，等。
对于没有明确修改折射率（默认为1.0）的图形，不对它做色散检查。
if (r.body->eta == 1.0f) // 不折射
{
// 按照先前的折射方法，不变！
}
else // 色散测试
{
const auto eta = r.inside ? r.body->eta : (1.0f / r.body->eta);
const auto k = 1.0f - eta * eta * (1.0f - idotn * idotn);
if (k >= 0.0f) // 可以折射，不是全反射
{
const auto a = eta * idotn + sqrtf(k);
const auto refraction = eta * d - a * normal;
const auto cosi = -(DotProduct(d, normal));
const auto cost = -(DotProduct(refraction, normal));
refl = refl * (r.inside ? fresnel(cosi, cost, eta, 1.0f) : fresnel(cosi, cost, 1.0f, eta));
refl.Normalize();
//下面不一样了
color par;//求三个维度的分量和
sum.Set(0.0f);//光源的光就不纳入计算
par.Add(trace5(pos - BIAS * normal, refraction, depth + 1));//加上红光的分量
auto n = par.Valid() ? 1 : 0;
par.g *= ETAS;//ETAS=0.1 对红光分量而言，绿和蓝分量就削减它
par.b *= ETAS;
for (int i = 1; i < 3; ++i)//求蓝光和绿光分量
{
//ETAD=0.1 折射率：绿=红+0.1 蓝=红+0.2
const auto eta0 = r.inside ? (r.body->eta + ETAD * i) : (1.0f / (r.body->eta + ETAD * i));
const auto k0 = 1.0f - eta0 * eta0 * (1.0f - idotn * idotn);
if (k >= 0.0f) // 可以折射，不是全反射
{
const auto a0 = eta0 * idotn + sqrtf(k0);
const auto refraction0 = eta0 * d - a0 * normal;
auto c = trace5(pos - BIAS * normal, refraction0, depth + 1);//做折射计算
if (c.Valid())
{
if (i == 1)
{
c.r *= ETAS;//削减其他两个颜色分量
c.b *= ETAS;
}
else
{
c.r *= ETAS;
c.g *= ETAS;
}
n++;//如果这一分量不为黑色，就有效，加一，原本要加最终值做下平均的，现在暂不用它
}
par.Add(c);// 加上蓝和绿分量
}
}
sum.Add((refl.Negative(1.0f)) * par);//再加上三个折射分量的和
}
else // 不折射则为全内反射
refl.Set(1.0f);
局部扫描
当光源很亮（RGB>10f）时，仅256的采样还不能有很好的效果，用下面的方法：
static color sample5(float x, float y) {
color sum;
for (auto i = 0; i < N; i++) {
const auto a = PI2 * (i + float(rand()) / RAND_MAX) / N;
const auto c = trace5(vector2(x, y), vector2(cosf(a), sinf(a)));
if (c.Valid())
{
color par;
for (auto j = 0; j < NP; j++) {//进一步计算
const auto a0 = PI2 * (i + (j + float(rand()) / RAND_MAX) / NP) / N;
const auto c0 = trace5(vector2(x, y), vector2(cosf(a0), sinf(a0)));
par.Add(c0);
}
sum.Add(par * (1.0f / NP));
}
}
return sum * (1.0f / N);
}
当第一层抖动采样结果有效时，做第二层抖动采样，精度更高。
最终结果1080P，一层采样数=512，二层采样数=8，双核四线程渲染用时差不多半小时。
进一步更真实的话，我只想到再增加一些折射测试，将原本的RGB分量扩展为七彩色，转换用RGB跟HSL的，其中的问题就是七彩色各分量并不正交，如何将它们整合起来还待研究。
题图的设定为RGB分量的折射率递增为0.1，也就是说1.4~1.6，颜色削减为0.1。另外，光源的光也不是严格的平行光，更优的效果还需要不断调整参数。