三角形填充算法：让模型栩栩如生

前端

2023-05-03 03:45:40

三角形填充算法：让你的模型栩栩如生

引言

在 3D 图形渲染的奇妙世界中，三角形扮演着至关重要的角色，它们是构成逼真模型的基本要素。为了让这些模型焕发生机，我们需要一种方法来填充三角形中的像素，让其在屏幕上栩栩如生。这就是三角形填充算法的用武之地。

三角形填充算法：从概念到现实

三角形填充算法的工作原理很简单：确定哪些像素属于三角形的内部，并用相应的信息填充它们。这就像给三角形上色，只保留像素，将模型的其他部分隐藏起来。然而，确定哪些像素属于三角形内是一个挑战，这就是三角形填充算法发挥作用的地方。

三角形填充算法的类型

有三种常用的三角形填充算法：

1. 点在三角形内测试

点在三角形内测试法是最简单直接的算法。对于每个像素，它检查该像素是否位于三角形的内部。如果位于内部，则填充该像素；否则，将其忽略。叉积法是一种常用的技术，通过计算点与三角形顶点的叉积来判断像素的位置。

2. 边函数法

边函数法是一种更有效率的算法。它为三角形的每条边定义一个函数，该函数的值等于该边上的点到另一条边的距离。如果一个点在三角形的内部，那么其边函数值都为正；否则，至少有一个为负。

3. 重心坐标法

重心坐标法是一种灵活且强大的算法。它为三角形的每个顶点定义一个重心坐标，等于该顶点到其他两条边的距离之和。如果一个点在三角形的内部，那么其重心坐标的和为 1；否则，大于 1 或小于 0。

插值和着色：让三角形栩栩如生

确定三角形的像素后，下一步是为这些像素分配颜色值。这个过程称为插值。线性插值是一种常见的技术，根据像素到三角形顶点的距离来计算颜色值。

着色是指根据插值结果生成最终图像。Gouraud 着色法根据像素到顶点的距离计算法线向量，然后根据法线向量和光照条件计算颜色值。

代码示例：让你的模型动起来

以下是使用 C++ 实现三角形填充算法的一个代码示例：

#include <iostream>
#include <vector>

using namespace std;

// 三角形结构体
struct Triangle {
  vector<int> vertices; // 顶点索引
};

// 模型结构体
struct Model {
  vector<Triangle> triangles; // 三角形列表
};

// 点在三角形内测试法
bool isPointInTriangle(const Triangle& triangle, const int x, const int y) {
  // 计算叉积
  int cp1 = (triangle.vertices[1].y - triangle.vertices[2].y) * (x - triangle.vertices[2].x) -
            (triangle.vertices[1].x - triangle.vertices[2].x) * (y - triangle.vertices[2].y);
  int cp2 = (triangle.vertices[2].y - triangle.vertices[0].y) * (x - triangle.vertices[0].x) -
            (triangle.vertices[2].x - triangle.vertices[0].x) * (y - triangle.vertices[0].y);
  int cp3 = (triangle.vertices[0].y - triangle.vertices[1].y) * (x - triangle.vertices[1].x) -
            (triangle.vertices[0].x - triangle.vertices[1].x) * (y - triangle.vertices[1].y);

  // 检查叉积符号是否相同
  return (cp1 > 0 && cp2 > 0 && cp3 > 0) || (cp1 < 0 && cp2 < 0 && cp3 < 0);
}

// 三角形填充算法
void fillTriangle(const Triangle& triangle) {
  // 确定三角形边界框
  int minX = min({triangle.vertices[0].x, triangle.vertices[1].x, triangle.vertices[2].x});
  int maxX = max({triangle.vertices[0].x, triangle.vertices[1].x, triangle.vertices[2].x});
  int minY = min({triangle.vertices[0].y, triangle.vertices[1].y, triangle.vertices[2].y});
  int maxY = max({triangle.vertices[0].y, triangle.vertices[1].y, triangle.vertices[2].y});

  // 遍历边界框内的像素
  for (int x = minX; x <= maxX; x++) {
    for (int y = minY; y <= maxY; y++) {
      // 检查像素是否在三角形内
      if (isPointInTriangle(triangle, x, y)) {
        // 填充像素
        // ...
      }
    }
  }
}

int main() {
  // 创建模型
  Model model;

  // 创建三角形
  Triangle triangle;
  triangle.vertices.push_back({100, 100});
  triangle.vertices.push_back({200, 200});
  triangle.vertices.push_back({300, 100});
  model.triangles.push_back(triangle);

  // 填充三角形
  for (const auto& triangle : model.triangles) {
    fillTriangle(triangle);
  }

  // 生成最终图像
  // ...

  return 0;
}