我的博客和笔记我的博客和笔记
首页
文章
  • TurboLink
  • TinyEncrypt
  • UnrealStyleGuide
  • AxTrace
  • Cyclone
  • 数学相关
  • 图形学
  • 密码学
  • 编程语言
关于
GitHub
首页
文章
  • TurboLink
  • TinyEncrypt
  • UnrealStyleGuide
  • AxTrace
  • Cyclone
  • 数学相关
  • 图形学
  • 密码学
  • 编程语言
关于
GitHub
  • 我的文章

    • 从抛币协议到智能合约

      • Part1
      • Part2
    • JPEG算法解密

      • Part1
      • Part2
      • Part3
      • Part4
      • Part5
      • Github
    • SPH算法简介

      • Part1
      • Part2
      • Part3
      • Part4
      • Github
    • 赌博中的数学:Martingle策略
    • 如何生成一个随机的圆形
    • 一个简单的DH密钥协商算法的实现
    • 如何计算线段和圆的交点
    • 一道数学趣题
    • 斐波那契数列和1/89
    • 匀速贝塞尔曲线运动的实现

      • Part1
      • Part2
  • 开源项目

    • TurboLink
    • TinyEncrypt
    • UnrealStyleGuide
    • AxTrace
    • Cyclone
  • 学习笔记

    • 数学相关

      • 常用数学符号
      • 群
      • 数论(一)
      • 数论(二)
      • 数论(三)
      • 概率
    • 密码学

      • RSA
      • 抛币协议
      • 智能扑克协议
    • 图形学

      • 数学基础

        • 矢量
        • 矩阵
        • 立体角
        • 几何变换(一)
        • 几何变换(二)
        • 法线变换
        • 摄像机变换
      • 光栅化

        • 基础
          • 1. 坐标系统
            • 1.1 坐标系统
          • 2. 三角形
            • 2.1 顺时针和逆时针
            • 2.2 面积
            • 2.3 重心坐标
            • 2.4 透视矫正
      • 光照模型

        • 传统光照模型
        • 光度学
        • 双向反射分布函数(BRDF)
        • 微平面理论(一)
        • 微平面理论(二)
        • 微平面理论(三)
        • 光照方程
      • 环境光渲染

        • 环境光渲染(一)
        • 环境光渲染(二)
    • 编程语言

      • JavaScript

        • 环境搭建
        • 基本语法
        • 函数
        • 对象和类

基础


1. 坐标系统

1.1 坐标系统

光栅化的本质,是将经过摄像机变换后物体从NDC坐标,转换到二维屏幕空间坐标系(screen space),并离散成一个个像素点的过程。

屏幕空间的坐标系通常左下角为(0,0)点,x轴向右,y轴向上,每个像素可以视作1x1的小方块,像素的中心点的位置是像素左下角位置加上0.5

2. 三角形

2.1 顺时针和逆时针

在屏幕空间上,一个二维的三角形,可以使用3个二维坐标表示P1(x1,y1),P2(x2,y2),P3(x3,y3),按照这个顺序,可以分为逆时针(ccw),顺时针(cw)两种情况

可以使用叉积来判断三个点的顺序是逆时针还是顺时针,如果P1P2→×P2P3→>0,表示是逆时针,如果小于零则是顺时针,也就是(x2−x1)(y3−y2)−(y2−y1)(x3−x2)是否大于0,在一般情况下,都是使用逆时针。

2.2 面积

根据叉积的几何意义,三角形面积同样可以利用叉积计算

S△=12∥AB→×AC→∥=12|(x2−x1)(y3−y1)−(y2−y1)(x3−x1)|

2.3 重心坐标

给定三角形的三点坐标A,B,C,该平面内一点P可以写成这三点坐标的线性组合形式,即

P=αA+βB+γC

且满足α+β+γ=1则称此时3个坐标A,B,C的权重α,β,γ为点P的重心坐标

重心坐标用于将三角形三个顶点上的属性(例如UV,法线,定点色等)均匀过渡到三角形内的任一点,重心坐标可以使用面积的比值来求得

α=S△PBCS△ABC,β=S△PACS△ABC,γ=S△PABS△ABC,

2.4 透视矫正

三角形上点的经过透视投影变换后,重心坐标会发生变换

比如上面这个长方体的侧面,原先均匀分布的竖线,经过透视变换后,在屏幕上不再是均匀分布,说明重心坐标发生了变化。

设摄像机空间中的三角形ABC,经过透视投影矩阵M变换后,成为三角形A′B′C′,三角形上的点P变成P′,设A点的齐次坐标为(A,1)T,A′点的齐次坐标为(A′wa,wa)T,可知

(2.4.1)[A′wawa]=M[A1][B′wbwb]=M[B1][C′wcwc]=M[C1][P′wpwp]=M[P1]

设P的重心坐标为α,β,γ,经过透视投影变换后,P′的重心坐标为α′,β′,γ′,可知

(2.4.2)P=αA+βB+γCP′=α′A′+β′B′+γ′C′

由于α+β+γ=1,可以推导出如下公式

α[A1]+β[B1]+γ[C1]=[αAα]+[βBβ]+[γCγ]=[αA+βB+γCα+β+γ]=[P1]

代入2.4.1可以得到

(2.4.3)[P′wpwp]=M[P1]=M(α[A1]+β[B1]+γ[C1])=αM[A1]+βM[B1]+γM[C1]=α[A′wawa]+β[B′wbwb]+γ[C′wcwc]=[αA′wa+βB′wb+γC′wcαwa+βwb+γwc]

所以可以得到

(2.4.4)P′wp=αA′wa+βB′wb+γC′wcwp=αwa+βwb+γwc

进一步求P′的重心坐标,根据2.4.4可以得到

(2.4.5)P′=αwawpA′+βwbwpB′+γwcwpC′=αwaαwa+βwb+γwcA′+βwbαwa+βwb+γwcB′+γwcαwa+βwb+γwcC′

可以得到

(2.4.6){α′=αwaαwa+βwb+γwcβ′=βwbαwa+βwb+γwcγ′=γwcαwa+βwb+γwc

但是在光栅化过程中,需要计算的是从P′的重心坐标(α′,β′,γ′)推导出P的重心坐标(α,β,γ),首先设

k=1αwa+βwb+γwc

代入2.4.6可以得到

{α′=αwakβ′=βwbkγ′=γwck(2.4.7){α=α′wakβ=β′wbkγ=γ′wck

由于α+β+γ=1,所以将2.4.7中的α,β,γ相加可以得到

1=α′wak+β′wbk+γ′wck=(α′wa+β′wb+γ′wc)1k

求得k值为

(2.4.8)k=α′wa+β′wb+γ′wc

代入2.4.7,可以得到

(2.4.9){α=α′waα′wa+β′wb+γ′wcβ=β′wbα′wa+β′wb+γ′wcγ=γ′wcα′wa+β′wb+γ′wc

观察以往推导出的透视投影矩阵公式(10.2.3.2)

M=[1aspect⋅tan⁡(fov/2)00001tan⁡(fov/2)0000farnear−farnear⋅farnear−far00−10]

可以看出,矩阵最后一行只有第3列是-1其他都是0,可以得知,这个矩阵生成的w值只和z有关,且w=−z,所以

(2.4.10){α=α′zaα′za+β′zb+γ′zcβ=β′zbα′za+β′zb+γ′zcγ=γ′zcα′za+β′zb+γ′zc