GAMES101-5 20200225 20210706 07 Rasterization 1 (Triangles)

5 20200225 / 20210706/07 Rasterization 1 (Triangles)

Perspective Projection

• 红线夹角（field-of-view, FOY）：垂直可视角度

• How to convert from fovY and aspect to l,r,b,t?

  

What’s after MVP?

• Model transformation (placing objects)
• View transformation (placing camera)
• Projection transformation
  • Orthographic projection (cuboid to “canonical” cube $[-1, 1]^3$)
  • Perspective projection (frustum to “canonical” cube)
• Canonical Cube to Screen （画在屏幕上）

Canonical Cube to Screen

• What is a screen?

  • An array of pixels
  • Size of the array: resolution
  • A typical kind of raster display

• Raster (光栅) == screen in German

  • Rasterize == drawing onto the screen

• Pixel (FYl short for “picture element”)

  • For now: A pixel is a little square with uniform color
  • Color is a mixture of (red, green, blue)

• Defining the screen space

  • Slightly different from the “tiger book”

    

  • 像素覆盖屏幕空间（宽 * 高）

    

• Irrelevant to z

• Transform in xy plane: $[-1: 1]^2$ to [o, width] x [o, height]

• Viewport transform matrix: 视口变换

  • 先把 $[-1, 1]^2$ 映射到 $[0,width] x [0, height]$
  • 再把屏幕中心左下角定义到原点 所以有平移变换
  • 忽略 z 轴

Rasterizing Triangles into Pixels 光栅化

• Drawing machine

  • CNC Sharpie Drawing Machine
  
  • Laser Cutters
  

Different Raster Displays

• Oscilloscope 示波器

  

示波器成像原理 - Cathode Ray Tube (CRT) 阴极射线管

• 隔行扫描 （利用视觉暂留效应）高速运动画面会造成严重画面撕裂

Frame Buffer: Memory for a Raster Display

Flat Panel Displays

• LCD (liquid Crystal Display) Pixel

  
  • Principle: block or transmit light by twisting polarization
  • Illumination from backlight (e.g. fluorescent or LED)
  • Intermediate intensity levels by partial twist

• OLED

• LED Array Display 发光二极管

  

• Electrophoretic (Electronic Ink) Display

  
  • 问题
    • 刷新率比较低（肉眼可见）

Rasterization: Drawing to Raster Displays

Triangles - Fundamental Shape Primitives

• Why triangles?

  • Most basic polygon
  • Break up other polygons 其他多边形可被拆为三角形

• Unique properties

  • Guaranteed to be planar 三角形内部一定在同一平面
  • Well-defined interior 内外定义清晰
  • Well-defined method for interpolating values at vertices over triangle (barycentric interpolation) 定义三个顶点属性后 可以根据位置方便地插值

• What Pixel Values Approximate a Triangle

  

A simple approach - sampling

Sampling a Function

• definition
  • Evaluating a function at a point is sampling.
    We can discretize a function by sampling.
    采样就是把函数离散化的过程

for (int x = 0; x < xmax; ++x;
output [x] = f(x);

• Sampling is a core idea in graphics.
  We sample time (1D), area (2D), direction (2D), volume (3D) …

看给定点像素中心是否在三角形内

• 方法：叉乘

  

Edge Cases

• 不作处理

• 都做特殊处理

  

Cheking all pixels on the screen

• 包围盒 Axis-aligned bounding box AABB

  

• Incremental Triangle Traversal

  
  • 适用于细长型三角形（像素少，但 bounding box 大）

实际案例

• Real LCD Screen Pixel (Closeup)

  

• Bayer pattern（右方）

  • 绿色的点比其他的多（红蓝几乎相等）
  • 因为人眼对绿色更敏感

• Aside: What about other display methods

  

• Assume display pixels emit square of light

  

• question

  • 锯齿
    • 原因：采样率不够高
    • 解决：next