光栅化渲染器：对三角形着色

原创

嘿克不黑 2022-01-25 10:03:46 ©著作权

文章标签 游戏引擎着色器数组 #include 头文件 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者嘿克不黑的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

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

对三角形着色

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

// 引用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;
}