图形流水线中光栅化原理与实现

最新推荐文章于 2025-04-10 17:20:13 发布
最新推荐文章于 2025-04-10 17:20:13 发布
阅读量1.9k 收藏 15
点赞数 5
分类专栏： 计算机图形学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27161673/article/details/103840506
版权
本文详细介绍了图形流水线中的光栅化过程，包括如何解决可见性问题，光栅化的基本原理，如判断像素是否在三角形内、顶点属性插值（特别是深度值的正确插值）以及透视校正。光栅化通过Z-Buffer和FrameBuffer处理深度测试，确保正确的遮挡效果，并提供了一种利用重心坐标系进行属性插值的方法，以实现像素级别的精确渲染。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

图形流水线中光栅化原理与实现

光栅化主要解决的问题

在传统图形学流水线，技术难点可以分为两大类：

着色(shading) 涉及到后续局部光照模型以及全局光照模型。这类知识点在以后我学明白后再写文章介绍给大家。

光栅化原理

  • 那什么是可见性问题呢？简单来说就是处在后面的物体应该被前面的物体所遮挡，从而在渲染结果上表现为不可见（对于不透明物体来说是这样，对于透明物体来说是颜色混合）。

  • 结合文章（图形流水线中坐标变换详解：模型矩阵、视角矩阵、投影矩阵），所有三角形点在经过模型矩阵变换、视角矩阵变换、投影矩阵变化以及透视除法后，坐标都变换到NDC坐标系下（x,y,z∈【-1， 1】）。而在知道输出屏幕大小的情况下，通过窗口变换可将x/y变换到窗口大小下（x∈【0，width】 y∈【0，height】z不变）。至此我们即将所有三角形投射到raster_space中。
    将三角形投射到窗口上

  • 光栅化的作用是判断哪些像素点与三角形“干涉”(在三角形内部)，并插值出三角形内部点的属性值（Z值、颜色、法向、纹理坐标等）。

在这里插入图片描述

  • 光栅化解决可见性(visibility) 思想：借助Z-Buffer, FrameBuffer

    • Z-Buffer是一个与光栅图像大小一致的二维数组，记录着每个像素点的深度值。
    • Z-Buffer中所有值初始化为inifity，当三角形上点P的Z值小于Z-Buffer中记录的值时，Z-Buffer中相应位置深度值更新为P点的Z值。否则不进行更新。
    • FrameBuffer也是一个与光栅图像大小一致的二维数据，记录着每个像素点的颜色值
    • 当Z-Buffer深度值更新时，FrameBuffer对应处颜色值也进行更新。

  • 光栅化流程：

//遍历所有三角形
FOR 每个已经转换到窗口坐标系(raster space)下的三角形：
  //内部两重循环 遍历所有像素点
  FOR row in raster space：
    FOR column in raster space：
      pixelCoord = vec2(row, column)
      IF pixelCoord 在三角形内部：
        插值pixelCoord 的Z值
        用Z值与Z-Buffer做深度测试
        IF 通过深度测试：
          更新Z-Buffer对应处的Z值
          插值pixelCoord的其他顶点属性(color, normal, uv)
          将像素点处的颜色值写入FrameBuffer

根据光栅化步骤，我们可以提出两个关键点：

  1. 如何判断某个像素在三角形内部
  2. 如何正确插值顶点属性

判断像素在三角形内部or外部

前提条件：三角形都已投影到raster space空间中

  • 该问题可以简化为，在二维平面中，如何判断一个点在三角形内部。如果你学过计算几何中凸包求解问题。你可能记得里面有一个TO-LEFT测试：一条向量无限延长后可以将平面分成两部分，分别称为其左侧和右侧
    在这里插入图片描述
    给定三角形旋向，三角形三条边即可以确定三条向量，如果对于一个点P，对这三条向量来说，它都处于同一侧(都在左侧(或者边上)、都在右侧(或者边上))，那个我们可以称点P它在三角形内部。具体情况如下图所示：
    在这里插入图片描述
  • 用向量叉乘判断点P在向量的左侧或右侧或在直线上
    在这里插入图片描述
    因此只需要判断三次叉乘结果是否同号(或者=0)即可判断点是否在上三角形上
  • 判断像素在三角形内部or外部 伪代码

//edge Funciton
bool edgeFunction(vec2 p, vec2 a, vec2 b, vec2 c){
  //三角形三个点abc构成三个向量ab bc ca
  vec2 ab = b - a;
  vec2 bc = c - b;
  vec2 ca = a - c;

  //待判断点p分别于abc构成三个向量 ap, bp, cp
  vec2 ap = p - a;
  vec2 bp = p - b;
  vec2 cp = p - c;
  //得到三次叉乘结果
   result1 = ab * ap;
   result2 = bc * bp;
   result3 = ca * cp;
  //判断是否同号
  float threshold = 1e-5;
  if(result1 > -threshold && result2 > -threshold && result3 > -threshold)//都为非负数
    return true;
  if(result1 < threshold && result2 < threshold && result3 ><threshold)//都为非正数
    return true;
  return false;
}

顶点属性插值

流水线中我们只会给三角形顶点赋值某些顶点属性，光栅化需要根据三个顶点信息插值三角形内部点的顶点属性。

重心坐标系

对于三角形内部点P来说，它可以由顶点V0/V1/V2唯一表示：
p = λ0 * V0 + λ1 * V1 + λ2 * V2 且 λ0 >=0 λ1 >=0 λ2 >=0; λ0 + λ1 + λ2 = 1
(λ0, λ1, λ2)即V0V1V2组成的三角形内部点P的重心坐标

同理我们可以用重心坐标来插值顶点属性
P_attribute = λ0 * V0_attribute + λ1 * V1_attribute + λ2 * V2_attribute
在这里插入图片描述

  • 既然可以用重心坐标系来插值所有顶点属性信息，那么又如何计算重心坐标系呢？
    在这里插入图片描述
    观察上图，你可以从中看出，重心坐标系值与V0V1P/V1V2P/V2V0P这三个三角形的面积有关。
    在这里插入图片描述
    由向量叉乘的集合意义可知: 叉乘得到的行列式的值，即两个向量所围成的平行四边形面积
    在这里插入图片描述
    结合判断点P是否在三角形内部的函数。我们可以在判断点P是否在三角形内部时，同时计算出P点的重心坐标系值。这是不是非常巧妙！

//改进 edge Funciton， 判断点p是否在三角形abc上时，
//同时返回其重心坐标系值
bool edgeFunction(vec2 p, vec2 a, vec2 b, vec2 c, vector<< float>& barycentricCoord ){
  //三角形三个点abc构成三个向量ab bc ca
  vec2 ab = b - a;
  vec2 bc = c - b;
  vec2 ca = a - c;
   //三角形面积的两倍
  float triangleArea = abs(ab * bc);
  //待判断点p分别于abc构成三个向量 ap, bp, cp
  vec2 ap = p - a;
  vec2 bp = p - b;
  vec2 cp = p - c;
  //得到三次叉乘结果
   result1 = ab * ap;
   result2 = bc * bp;
   result3 = ca * cp;
  //计算重心坐标系
  barycentricCoord.push_back(abs(result2) / triangleArea);
  barycentricCoord.push_back(abs(result3) / triangleArea);
  barycentricCoord.push_back(abs(result1) / triangleArea);
  //判断是否同号
  float threshold = 1e-5;
  if(result1 > -threshold && result2 > -threshold && result3 > -threshold)//都为非负数
    return true;
  if(result1 < threshold && result2 < threshold && result3 ><threshold)//都为非正数
    return true;
  return false;
}

插值深度
直接插值Z值的问题

根据上文结论可得，对于三角形内部点p，其Z值可以由此插值：
P_z = λ0 * V0_z + λ1 * V1_z + λ2 * V2_z
但实际上直接使用此式子是错误的，因为经过投影变换后，Z值不再满足线性变化。下图可以清楚的展现这种错误：
在这里插入图片描述
在投影前，P的Z值为:
P.z = V0.z * (1 - 0.666) + V1.z * 0.666 = 4.001;
投影后，P‘的Z值为
P’.z = V0.z * (1 - 0.8333) + V1.z * 0.8333 = 4.499;

正确的深度插值公式推导

在这里插入图片描述
在这里插入图片描述
因此正确的深度插值公式为：
1 / P_z = λ0 * 1 / V0_z + λ1 * 1 / V1_z + λ2 * 1 / V2_z

透视校正

同理在插值其他顶点属性（如颜色、法相、纹理坐标）时，如果直接用重心坐标系，也不正确。
因此正确的方法是借助已经正确插值的Z值，属性与Z值满足线性变化关系。
在这里插入图片描述
在这里插入图片描述
因此正确的顶点属性插值公式为：
Attr = Z * [Attr0 / V0_z * λ0 +Attr1 / V1_z * λ1 + Attr2 / V2_z * λ2 ]
下图展示了使用正确的属性插值与不正确的属性插值的颜色误差。
在这里插入图片描述

代码实现

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
vector2.h

//vector2.h
#pragma once
#include<iostream>

using namespace std;

template <typename T>
class Vector2 {
   
public:
	T x, y;
	float z;

public:
	//Vector(){}
	~Vector2() {
   }
	Vector2(T xx = 0, T yy = 0, float zz = 0) :x(xx), y(yy), z(zz) {
   }
	Vector2(Vector2& t) {
    x = t.x; y = t.y; z = t.z; }


	//标量乘除
	Vector2 multiplayByScalar(float a, Vector2<T>& result) {
   
		result.x = x * a;
		result.y = y * a;
		return result;
	}

	Vector2 divideByScalar(float a, Vector2<T>& result) {
   
		result.x = x / a;
		result.y = y / a;
		return result;
	}

	//矢量运算
	Vector2<T> add(Vector2& t, Vector2<T>& result) {
   
		result.x = x + t.x;
		result.y = y + t.y;

		return result;
	}

	Vector2<T> divide(Vector2& t, Vector2<T>& result) {
   
		result.x = x - t.x;
		result.y = y - t.y;

		return result;
	}

	float cross(Vector2& t) {
   
		return y * t.x - x * t.y;
	}


	//模场
	float length() {
   
		return sqrt(x * x + y * y);
	}

	//归一化
	void normalize() {
   
		float l = this->length();
		if (l < 1e-5) {
   
			cout << "向量模长为0.0，不能归一化" << endl;
			return;
		}
		x /= l;
		y /= l;
	}

	//流运算
	friend ostream& operator<<(ostream& os, const Vector2<T>& t) {
   
		os << "(x, y, z):" << "(" << t.x << ", " << t.y << ", " << t.z << ")" << endl;
		return os;
	}

};

Vector3.h

//Vector3
#pragma once
#include<iostream>

using namespace std;

template <typename T>
class Vector3 {
   
public:
	T x, y, z;
	float w;

public:
	//Vector(){}
	~Vector3() {
   }
	Vector3(T xx = 0, T yy = 0, T zz = 0, float ww = 1.0) :x(xx), y(yy), z(zz), w(ww) {
   }
	Vector3(Vector3& t) {
    x = t.x; y = t.y; z = t.z; w = t.w; }
	

	//标量乘除
	Vector3 multiplayByScalar(float a, Vector3<T>& result) {
   
		result.x = x * a;
		result.y = y * a;
		result.z = z * a;
		return result;
	}

	Vector3 divideByScalar(float a, Vector3<T>& result) {
   
		result.x = x / a;
		result.y = y / a;
		result.z = z / a;
		return result;
	}
	
	//矢量运算
	Vector3<T> add(Vector3& t, Vector3<T>& result) {
   
		result.x = x + t.x;
		result.y = y + t.y;
		result.z = z + t.z;

		return result;
	}

	Vector3<T> divide(Vector3& t, Vector3<T>& result) {
   
		result.x = x - t.x;
		result.y = y - t.y;
		result.z = z - t.z;

		return result;
	}

	Vector3<T> cross(Vector3& t, Vector3<T>& result) {
   
		result.x = y * t.z - z * t.y;
		result.y = z * t.x - x * t.z;
		result.z = x * t.y - y * t.x;

		return result;
	}

	//比较运算
	bool equal(Vector3<T>& t) {
   
		float threshold = 1e-5;
		if (abs(x - t.x) < threshold && abs(y - t.y) < threshold && abs(z - t.z) < threshold)
			return true;
		return false;
	}

	//透视除法
	void perspectiveDivision() {
   
		x = x / T(w);
		y = y / T(w);
		z = z / T(w);
		w = 1.0f;
	}

	//模场
	float length() {
   
		return sqrt(x * x + y * y + z * z);
	}

	//归一化
	void normalize() {
   
		float l = this->length();
		if (l < 1e-5) {
   
			cout << "向量模长为0.0，不能归一化" << endl;
			return ;
		}
		x /= l;
		y /= l;
		z /= l;
	}

	//流运算
	friend ostream& operator<<(ostream& os, const Vector3<T>& t) {
   
		os << "(x, y, z, w):" << "(" << t.x << ", " << t.y << ", " << t.z << ", " << t.w << ")" << endl;
		return os;
	}

};

Matrix4.h

//Matrix4.h
#pragma once
#include "Vector3.h"

class Matrix4
{
   
public:
	Matrix4();
	~Matrix4();

	Matrix4(float a0, float a1, float a2, float a3,
		float a4, float a5, float a6, float a7,
		float a8, float a9, float a10, float a11,
		float a12, float a13, float a14, float a15);

	Matrix4(Matrix4& t);

	//重置为单位矩阵
	void setIdentityMatrix();
	//求矩阵的行列式的值
	float getDeterminant();
	//求矩阵的逆矩阵
	Matrix4 invert();
	//矩阵与向量/点相乘
	Vector3<float> multiplyByVector(Vector3<float> v);
	//矩阵与矩阵相乘
	Matrix4 multiplyByMatrix4(Matrix4& m);

	//交换矩阵的两行
	void swapRow(int row1, int row2);

	//输出矩阵
	friend ostream& operator<<(ostream& os, Matrix4& t);


public:
	float m[16];

};

Matrix4.cpp

//Matrix4.cpp
#include "Matrix4.h"


Matrix4::Matrix4()
{
   
	m[0] = m[5] = m[10] = m[15] = 1.0f;
	m[1] = m[2] = m[3] = m[4] = m[6] = m[7] = m[8] = m[9] = m[11] = m
最低0.47元/天 解锁文章
[图形编程]【Unity】Shader基础4- 光栅化阶段的三角形设置、遍历与片元着色器
每日出拳老爷子的博客
12-09 334
在光栅化阶段，**片元（Fragment）**是一个包含了多个数据的集合，代表一个潜在的像素。需要注意的是，片元并不是最终的像素，它仅包含一个像素的颜色值、深度值以及其他可能的属性（如法线、纹理坐标等）。片元的属性：片元会包含该像素的坐标信息、深度信息（用于深度测试）以及从顶点阶段传递下来的数据，如纹理坐标、颜色等。片元生成的过程：每个被覆盖的像素会生成一个片元，所有片元的集合最终会经过片元着色器的处理，计算最终的颜色值。
计算机图形学学习笔记4---Unity着色器之渲染流水线光栅化阶段
qq_40843666的博客
01-04 1255
渲染流水线三阶段学习笔记（光栅化阶段） 光栅化阶段可分为四个阶段： 三角形设置 三角形遍历 片元着色器 逐片元操作 上图中绿色表示该流水线是完全可编程控制的，黄色表示可以配置但不可以编程的，蓝色表示GPU固定实现的，开发者没有控制权。虚线框表示该shader是可选的。 一：三角形设置 ...
WebGL光栅化流水线
MFDY
08-01 579
三种图元 Point Line Triangle WebGL绘制流程 准备数据阶段：提供顶点坐标、索引（三角形绘制顺序）、uv（决定贴图坐标）、法线（决定光照效果），以及各种矩阵（比如投影矩阵） 生成顶点着色器 图元装配：坐标转换 生成片元着色器：模型是什么颜色，看起来是什么质地，光照效果，阴影（流程较复杂，需要先渲染到纹理，可以先不关注），都在这个阶段处理。 光栅化 顶点提取器 获取顶点坐标, 并写入缓存区  由于顶点数据往往成千上万，在获取到顶点坐标后，我们通常会将它存储在显存，即缓存区内
3DGS之光栅化
最新发布
whuzhang16的博客
04-10 519
光栅化（Rasterization）是计算机图形学中将连续的几何图形（如三角形、直线等）转换为离散像素的过程，最终在屏幕上形成图像。
闫令琪图形学入门笔记（光栅化篇）
卢平光的博客
07-19 1391
1
光栅化：将三维图形转换为二维图像
AI天才研究院
12-29 1571
1.背景介绍 光栅化(rasterization)是一种将三维图形转换为二维图像的方法，它是现代计算机图形学中最重要的技术之一。光栅化的核心思想是将三维场景中的所有可见物体都分解为一系列小的二维图形片段，然后将这些片段组合在一起，形成最终的图像。这种方法的优点是它能够生成高质量的图像，并且对于复杂的三维场景也能够得到较好的性能。 在这篇文章中，我们将深入探讨光栅化的核心概念、算法原理、具体操作...
深入理解光栅化原理及C++实践指南
### 描述：图形流水线中光栅化原理与C++实现 描述部分强调了对光栅化原理的理解以及如何使用C++进行实现。光栅化原理在计算机图形学中是基础且核心的内容，理解其工作流程对于开发图形应用程序是必须的。 光栅化...
SoftRenderer&RenderPipeline（从迷你光栅化软渲染器的实现看渲染流水线）
puppet_master的专栏
05-22 9104
简介这是一篇没有什么实际作用的文章，因为没有任何shader效果实现，整篇文章到最后，我只实现了一个旋转的立方体（o(╯□╰)o），和Unity渲染的万紫千红的3D世界显得有很大落差，仿佛一切都回到了最初的起点。不过实时渲染繁华的背后，还是这看似简单的光栅化。今天，本人打算研究一下基本的光栅化渲染的实现，看一下怎样把一个模型从一些顶点数据，变成最终显示在屏幕上的图像，也就是所谓的渲染流水线。实现过...
【流水线技术在图形处理中的应用】：嵌套循环流水线的图形化革命
本文首先介绍了流水线技术与图形处理的基础知识，然后深入探讨了嵌套循环流水线的工作原理，以及如何将流水线技术应用于图形处理的实践案例。接着，本文着重分析了流水线优化策略和性能提升方法，并对未来流水线技术...
计算机图形学L1--1光栅化及其实现---实现点的绘制及雪花
qq_54831038的博客
04-01 616
（一）Windows窗体创建及分析 1.创建一个窗体的框架。 主要流程为1.注册一个窗体 2.生成一个窗体并显示 3.捕捉消息，分发到端口 4.在wndProc里处理信息。 描述：窗体程序的运行像一个函数不断的接收信息，然后并不断的处理捕捉信息，然后把信息分发到WndProc中处理和修改！ 2.了解界面，读懂框架： 1）MyRegisterClass:注册一个窗体的类型，包括窗体的大小风格 MyRegisterClass是一个窗体类型，ATOM：MyRegisterClass通过函数..
实时渲染(第三版):第二章 图形渲染管道 2.4 光栅化阶段
tiewen的专栏
11-06 2828
。 2.4 光栅化阶段     给定转换和投影后的顶点及其相关的着色数据（全部来自几何形状阶段），光栅化阶段的目标是计算和设置对象覆盖的像素的颜色。这一个过程叫做光栅化或扫描转换（这种转换将屏幕空间中的2D顶点（每个顶点都有一个z值（深度值）和各种相关的着色信息）转换到屏幕上的像素）。  图2.8 光栅化阶段细分为多个功能阶段     和几何形状阶段类似，本阶段也细分为几个功能阶段：建
光栅化（Rasterization）算法
qq_40844444的博客
11-29 1241
屏幕宽度和高度定义800600这里使用宏定义了模拟屏幕的宽度和高度，即像素阵列在水平和垂直方向上的像素数量，后续所有与屏幕像素坐标相关的操作都基于这两个值来限定范围。颜色枚举类型定义BLACK = 0,WHITE = 1,RED = 2,GREEN = 3,BLUE = 4} Color;定义了一个枚举类型Color。
Shader理论《三》GPU流水线之光栅化阶段
纯技术流日常开发商业开发记录总结等
06-28 1308
欢迎加入Unity业内qq交流群：956187480 qq扫描二维码加群，行业纵横颇多，每个人精通领域各异，旨在交流， 接上； 光栅化阶段： 1.三角形设置 屏幕映射是几何阶段的最后一个环节，会把相关的数据数值传送给光栅化的第一个阶段：三角形设置。从上一个阶段输出的信息是屏幕坐标系下的顶点的位置以及和他们相关的额外信息如：深度值，法线方向，视角方向等。光栅化阶段有两个最重要的目标：计...
计算机图形学笔记（二）光栅化
qq_15017307的博客
08-23 2556
计算机图形学笔记（二）光栅化
计算机图形学03 光栅化
qq_45835091的博客
10-07 1644
经过前面的MVP变换，我们得到了一个宽高均为2，中心在坐标原点的cube，光栅化就是把这个cube绘制在屏幕上的过程。他需要经历两个阶段，分别是视口变换（Viewpoint Transformation)和光栅化（Rasterization)。
通俗傻瓜式理清光栅化渲染和光线追踪渲染的原理
热门推荐
qq_37366618的博客
12-14 1万+
用通俗语言傻瓜式的讲清楚光栅渲染和光线追踪渲染的原理，方便没有相关理论基础的朋友理解入门。
什么是光栅化
小孔明的专栏
05-07 3491
光栅化是将几何数据经过一系列变换后最终转换为像素，从而呈现在显示设备上的过程。比如下图： 光栅化的本质是坐标变换、几何离散化，如下图： 在u3D中，美术模型由定点和定点构成三角面来确定，将3D模型绘制到屏幕上时，根据每个三角面的三个定点，将这个三角面所覆盖的每个像素（一个格子一个格子）进行填充的过程，就叫做光栅化。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值