十分钟计算机图形学

计算机图形学，从应用的角度上来说，其实是一种非常简单的技术。不幸的是，现有的教程通常会在一开始拘泥于一些数学上的问题，或者执着于一些实现上的细节。本教程尝试通过另一种方式，借由一个基本软件渲染器的实现，概览整个渲染管线，来介绍计算机图形学的基本概念。

本文代码均使用 Julia 实现，在 这里 也有使用 Python 和 MATLAB 实现的代码，可供参考。

计算机图形学

简单来说，计算机图形学的意图就是将一系列的图元（点、线、三角形，以及它们的空间位置、颜色属性）转化为屏幕上的像素点。这个转化的过程被称为渲染。

本教程中，我们会使用 Julia 实现一个基本的软件渲染器，它能光栅化基本的三角形图元，并且能够以可编程的方式配置一部分渲染管线。

准备工作

在开工之前，我们需要先准备一些东西。首先，创建一个 Julia 文件，然后在里面开一个模块：

module Softpipe

# 之后我们的代码都会放到这里面

end # module Softpipe

之所以要开这个模块，是因为在 Julia REPL 中求值脚本的时候，脚本中的类型、函数和变量会被引入到 REPL 的顶层作用域中。之后如果在同一个 REPL 中重新求值这个脚本，原先的定义也不会消失，并且以各种形式干扰你。如果把所有东西包在一个模块里，重新求值脚本就能完全地替换模块中的内容，从而避免上述问题。

接着引入我们需要的包：

# CG 中的线性代数运算经常需要一些定长的向量和矩阵
using StaticArrays
# 由 MWORKS.Syslab 2023b 提供，仅用于最后阶段显示图片，你也可以替换成其他库
using TyImages

# 常用尺寸的向量
# CG 渲染不需要太高的精度，并且 32 位浮点数的使用非常广泛
# 而且这样我们可以少担心一点类型稳定性的问题
const Vec2 = SVector{2,Float32}
const Vec3 = SVector{3,Float32}
const Vec4 = SVector{4,Float32}

# 常用的 4x4 矩阵
const Mat4x4 = SMatrix{4,4,Float32}

# 帧缓冲，记录每个像素点上的颜色
const Framebuffer = Matrix{Vec4}
# 深度缓冲，记录每个像素点上的深度值，之后我们会看到它的作用
const Depthbuffer = Matrix{Float32}

render! 函数

如果“渲染”是一个函数的话，回顾我们刚讲过意图：

简单来说，计算机图形学的意图就是将一系列的图元（点、线、三角形，以及它们的空间位置、颜色属性）转化为屏幕上的像素点。

那么，这个函数的签名也就呼之欲出了：

function render!(
    # 目标帧缓冲，或者可以理解为“画布”
    framebuffer::Framebuffer,
    # 顶点数据。注意顶点数据不止包含位置，还可以包含用户定义的任意属性
    # 所以这里使用一个泛型参数来表示顶点类型
    vertices::Vector{V}

    # 这些还不是全部，我们会在后面添加更多参数
) where {V}
    width = size(framebuffer, 2)
    height = size(framebuffer, 1)
    vertex_count = length(vertices)

    # 做一些基本的检查
    @assert width > 0 && height > 0
    @assert vertex_count > 0
    # 本文中我们只讨论三角形
    # 多边形可以视为多个三角形的组合，线段则使用另外的算法，本文暂不讨论
    @assert vertex_count % 3 == 0
end

准备数据

接下来，我们准备一点供我们渲染的数据，就从一个彩色三角形开始：

# 三角形顶点的属性
struct Vertex
    # 位置，我们暂时只用到 x 和 y，所以两个分量就够了
    position::Vec2
    # 颜色，我们暂时不用透明度，所以三个分量就够了
    color::Vec3
end

# 我们采用和 OpenGL 相同的坐标系，即 y 轴向上，z 轴向屏幕外
vertices = [
    Vertex(Vec2(-1.0, -1.0), Vec3(1.0, 0.0, 0.0)),
    Vertex(Vec2(1.0, -1.0), Vec3(0.0, 1.0, 0.0)),
    Vertex(Vec2(0.0, 1.0), Vec3(0.0, 0.0, 1.0))
]

顶点变换与顶点着色器

在渲染过程中，我们要做的第一件事就是将所有顶点的坐标，根据我们“看”这个顶点的角度以及摄像头的配置，将其转换到一个 (-1, 1) × (-1, 1) 的区域内的坐标。数学上来说，这会涉及到几个变换矩阵和一系列线性代数运算。本文中我们不会讨论数学上的问题，只讨论工程问题 —— 即这些东西如何体现在代码中，更确切地说，如何体现在图形管线的 API 里。

在一些旧的图形 API，例如 OpenGL 1.x 中，顶点的属性是由类似这样的一系列函数来“设置”的：

glBegin(GL_TRIANGLES);
    glColor3f(1.0f, 0.0f, 0.0f);
    glVertex2f(-1.0f, -1.0f);

    glColor3f(0.0f, 1.0f, 0.0f);
    glVertex2f(1.0f, -1.0f);

    glColor3f(0.0f, 0.0f, 1.0f);
    glVertex2f(0.0f, 1.0f);
glEnd();

而各种变换矩阵也是通过类似的 API 来设置的：

glMatrixMode(GL_PROJECTION);              // 告诉 OpenGL 接下来我们要操作投影矩阵
glLoadIdentity();                         // 重置为单位矩阵
glPerspective(45.0f, 1.0f, 0.1f, 100.0f); // 设置投影矩阵

glMatrixMode(GL_MODELVIEW);               // 告诉 OpenGL 接下来我们要操作模型-视图矩阵
glLoadIdentity();                         // 重置为单位矩阵
glTranslatef(0.5f, 0.0f, 5.0f);           // 平移变换
// 添加

显然，这样做是有很大局限性的

• 我们所能设置的属性种类（位置、颜色、纹理坐标等）是有限的，并且完全地受限于 OpenGL API 本身的功能
• 我们能进行的变换也是有限的，在顶点变换阶段只有“给顶点乘一个矩阵来进行变换”这一种操作

因此，各大图形 API 都陆续引入了可编程的部分。简单来说，就是允许用户向图形 API 提交一段自己写的程序（你可以理解为“回调函数”，接下来我们也会这么实现），当图形 API 需要执行某个操作的时候就调用这段程序，这样用户就能为所欲为做对数据做自己想做的处理了。这段程序就是着色器。而用于变换顶点数据的着色器就是顶点着色器。

顶点着色器要接受一个顶点的所有属性，返回顶点在 (-1, 1) × (-1, 1) 区域内的坐标，以及其他属性。例如，我们可以编写这样一个顶点着色器：

mutable struct ManipulatedVertex
    position::Vec4 # 我们统一输出 Vec4，这样后续步骤会更统一
    color::Vec3    # 顶点颜色

    ManipulatedVertex() = new()
    ManipulatedVertex(position::Vec4, color::Vec3) = new(position, color)
end

function vertex_shader_identity(vertex::Vertex)::ManipulatedVertex
    ManipulatedVertex(
        # 顶点位置不变，补上 z 和 t 分量
        Vec4(vertex.position[0], vertex.position[1], 0.0, 1.0),
        # 顶点颜色不变
        vertex.color
    )
end

那么，我们修改 render! 函数的签名，让它接受一个代表“顶点着色器”的函数：

function render!(
    framebuffer::Framebuffer,
    vertices::Vector{V},
    # 顶点着色器
    vertex_shader::VS,
) where {V, VS <: Function}
    # ...
end

然后，我们就可以在 render! 函数中调用这个着色器了：

    # ...

    vs_outputs = map(vertex_shader, vertices)
    # 在这之后，“正规化”着色器输出的顶点位置。不用太在意数学上发生了什么
    for i in 1:vertex_count
        vs_outputs[i].position /= vs_outputs[i].position.w
    end

光栅化

接下来，我们把变换后的顶点转换为屏幕上实际的像素了。我们每次渲染一个三角形：

    for i in 1:3:vertex_count
        # 三角形的三个顶点
        v1 = vs_outputs[i]
        v2 = vs_outputs[i + 1]
        v3 = vs_outputs[i + 2]

        # 三个顶点的位置
        v1_pos = v1.position::Vec4
        v2_pos = v2.position::Vec4
        v3_pos = v3.position::Vec4

        # 计算三角形的包围盒
        min_x = min(v1_pos[1], v2_pos[1], v3_pos[1])
        min_y = min(v1_pos[2], v2_pos[2], v3_pos[2])
        max_x = max(v1_pos[1], v2_pos[1], v3_pos[1])
        max_y = max(v1_pos[2], v2_pos[2], v3_pos[2])

        # 将包围盒的坐标转换为帧缓冲上像素的坐标
        min_x_pix = round(Int, (min_x + 1.0) * width / 2.0)
        min_y_pix = round(Int, (min_y + 1.0) * height / 2.0)
        max_x_pix = round(Int, (max_x + 1.0) * width / 2.0)
        max_y_pix = round(Int, (max_y + 1.0) * height / 2.0)

        # 确保包围盒在帧缓冲内
        min_x_pix = max(min_x_pix, 1)
        min_y_pix = max(min_y_pix, 1)
        max_x_pix = min(max_x_pix, width)
        max_y_pix = min(max_y_pix, height)

        # 对包围盒内的每个像素点进行处理
        for y_pix in min_y_pix:max_y_pix
            for x_pix in min_x_pix:max_x_pix
                # Question: 这个像素是否在三角形内？如果在，我们应该把它填充成什么颜色？
            end
        end
    end

现在还差一个问题：如何判断一个像素是否在三角形内？如果这个像素在三角形内，我们应该把它填充成什么颜色？

重心坐标与插值

简单来说，如果我们有三个点 (x1, y1)，(x2, y2)，(x3, y3)，那么平面内的任意一个点 (x, y) 都可以表示为：

(x, y) = w1 * (x1, y1) + w2 * (x2, y2) + w3 * (x3, y3)

我们把 w 抽出来，那么 (w1, w2, w3) 就是 (x, y) 在三个点上的重心坐标。如果 (w1, w2, w3) 的每个分量都为正，那么 (x, y) 就在三角形内。详细的数学推导过程可以参见这篇博客，本文依旧无视这些细节。以下是 Julia 代码实现：

# 重心坐标计算
function barycentric(
    v1::V,
    v2::V,
    v3::V,
    v::V
)::Tuple{Float32,Float32,Float32} where {V <: AbstractVector}
    denom = (v2[2] - v3[2]) * (v1[1] - v3[1]) + (v3[1] - v2[1]) * (v1[2] - v3[2])

    w1 = ((v2[2] - v3[2]) * (v[1] - v3[1]) + (v3[1] - v2[1]) * (v[2] - v3[2])) / denom
    w2 = ((v3[2] - v1[2]) * (v[1] - v3[1]) + (v1[1] - v3[1]) * (v[2] - v3[2])) / denom
    w3 = 1.0 - w1 - w2

    return (w1, w2, w3)
end

重心坐标还有一个意义，那就是三个点的数据对于这个点的影响程度，或者说权重。有了重心坐标，实现插值就像呼吸一样简单：

# 基于重心坐标的插值
function interpolate3(p::Vec2, v1::T, v2::T, v3::T)::Union{T,Nothing} where {T}
    # 这里用了一些 Julia 的反射机制，不用在意
    @assert hasfield(T, :position)
    @assert isa(v1.position, Vec4)

    v1_xy = v1.position[1:2]
    v2_xy = v2.position[1:2]
    v3_xy = v3.position[1:2]

    w1, w2, w3 = barycentric(v1_xy, v2_xy, v3_xy, p)
    if w1 < 0.0 || w2 < 0.0 || w3 < 0.0
        return nothing
    end

    ret = T()
    for field in fieldnames(T)
        v1_field = getfield(v1, field)
        v2_field = getfield(v2, field)
        v3_field = getfield(v3, field)
        setfield!(ret, field, w1 * v1_field + w2 * v2_field + w3 * v3_field)
    end
    return ret
end

现在，我们已经知道了三角形内某个像素点的所有属性。我们暂时跳过深度测试，接下来就剩一件事要做了：通过这个像素点的属性，确定这个像素点的颜色。

片元着色器

和顶点着色器一样，片元着色器旨在为图形管线增加可编程特性，从而让用户能够自定义渲染管线的行为。片元着色器接受一个像素点的所有属性作为输入，输出这个像素点的颜色。我们可以这样实现一个简单的片元着色器：

function fragment_shader_identity(fragment::ManipulatedVertex)::Vec4
    return Vec4(
        fragment.color[1],
        fragment.color[2],
        fragment.color[3],
        1.0
    )
end

接着我们修改 render! 函数的签名，让它再接受一个代表“片元着色器”的函数：

function render!(
    framebuffer::Framebuffer,
    vertices::Vector{V},
    vertex_shader::VS,
    # 片元着色器
    fragment_shader::FS,
) where {V, VS <: Function, FS <: Function}
    # ...
end

终于，我们可以着手完成 render! 函数中间那个循环里最后一步了：

        for y_pix in min_y_pix:max_y_pix
            for x_pix in min_x_pix:max_x_pix
                x = 2.0 * x_pix / width - 1.0
                y = 2.0 * y_pix / height - 1.0

                # 通过重心坐标插值得到这个像素点的属性
                fragment = interpolate3(Vec2(x, y), v1, v2, v3)

                # 如果这个像素点不在三角形内，就跳过
                if isnothing(fragment)
                    continue
                end

                # 运行片元着色器，得到这个像素点的颜色
                color = fragment_shader(fragment)
                # 将颜色写入帧缓冲
                framebuffer[y_pix, x_pix] = color
            end
        end

在这之后，我们就可以着手进行组装：

framebuffer = zeros(Vec4, 512, 512)
render!(framebuffer, vertices, vertex_shader_identity, fragment_shader_identity)

显示图像 (Syslab 限定)

以下函数用于将帧缓冲转换为 TyImage.imshow 能显示的格式，你可以不用太在意具体细节。如果你选择用其他库来显示图像，你可能也需要自己实现一个类似的函数。

function packed2planar(packed::Framebuffer)::Array{Float32,3}
    ret = Array{Float32}(undef, size(packed, 1), size(packed, 2), 3)

    height = size(packed, 1)
    width = size(packed, 2)

    for i in 1:height
        for j in 1:width
            ret[i, j, 1] = packed[height-i+1, j][1]
            ret[i, j, 2] = packed[height-i+1, j][2]
            ret[i, j, 3] = packed[height-i+1, j][3]
        end
    end

    return ret
end

imshow(packed2planar(framebuffer))

总结

大功告成！你现在应该已经看到了一个彩色三角形了。如果你在哪一步遇到了问题，可以参考 完整代码。

到目前为止，我们已经实现了一个基本的软件渲染器，但还有很多事情没有做。例如，我们还没有实现深度测试，也没有利用我们的可编程功能做一些更有趣的事情。但是，我们已经完成了本文的目标：概览整个渲染管线，介绍计算机图形学的基本概念。敬请期待之后的更多作品，咕咕咕，咕咕咕咕咕咕。