-
Notifications
You must be signed in to change notification settings - Fork 1
/
Games101-05-07291674.js
53 lines (53 loc) · 33 KB
/
Games101-05-07291674.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import{_ as p}from"./ValaxyMain.vue_vue_type_style_index_0_lang-bf8ee3fd.js";import{_ as m,p as h,c as d,w as t,o as u,e as g,a as s,d as l,b as a,r as i,f as y}from"./app-4433fae6.js";import"./YunFooter.vue_vue_type_script_setup_true_lang-80290804.js";import"./YunCard.vue_vue_type_style_index_0_lang-e4df850e.js";import"./YunPageHeader.vue_vue_type_script_setup_true_lang-80be03ea.js";const $s=JSON.parse('{"title":"Games101-Lecture 05 Rasterization 1 (Triangles)","description":"","frontmatter":{"title":"Games101-Lecture 05 Rasterization 1 (Triangles)","toc":true,"date":"2022-06-01T09:46:22.000Z","tags":["Computer Graphics","Games101"],"categories":["笔记","Games101"],"cover":null},"headers":[{"level":2,"title":"一、透视投影 (续)","slug":"一、透视投影-续","link":"#一、透视投影-续","children":[]},{"level":2,"title":"二、视口变换 (Viewport Transform)","slug":"二、视口变换-viewport-transform","link":"#二、视口变换-viewport-transform","children":[{"level":3,"title":"1. 什么是屏幕?","slug":"_1-什么是屏幕?","link":"#_1-什么是屏幕?","children":[]},{"level":3,"title":"2. 什么是像素?","slug":"_2-什么是像素?","link":"#_2-什么是像素?","children":[]},{"level":3,"title":"3. 屏幕中像素的坐标表示?","slug":"_3-屏幕中像素的坐标表示?","link":"#_3-屏幕中像素的坐标表示?","children":[]},{"level":3,"title":"4. 视口变换 (Viewport Transform)","slug":"_4-视口变换-viewport-transform","link":"#_4-视口变换-viewport-transform","children":[]}]},{"level":2,"title":"三、绘制设备与显示设备","slug":"三、绘制设备与显示设备","link":"#三、绘制设备与显示设备","children":[]},{"level":2,"title":"四、光栅化 (Rasterization)","slug":"四、光栅化-rasterization","link":"#四、光栅化-rasterization","children":[{"level":3,"title":"1. 模型的表示","slug":"_1-模型的表示","link":"#_1-模型的表示","children":[]},{"level":3,"title":"2. 采样","slug":"_2-采样","link":"#_2-采样","children":[]}]},{"level":2,"title":"五、真实的像素","slug":"五、真实的像素","link":"#五、真实的像素","children":[]}],"relativePath":"pages/posts/note/computer-graphics/Games101-05.md","path":"/home/runner/work/YlYZ/YlYZ/pages/posts/note/computer-graphics/Games101-05.md","lastUpdated":1686297441000}'),r=JSON.parse('{"title":"Games101-Lecture 05 Rasterization 1 (Triangles)","description":"","frontmatter":{"title":"Games101-Lecture 05 Rasterization 1 (Triangles)","toc":true,"date":"2022-06-01T09:46:22.000Z","tags":["Computer Graphics","Games101"],"categories":["笔记","Games101"],"cover":null},"headers":[{"level":2,"title":"一、透视投影 (续)","slug":"一、透视投影-续","link":"#一、透视投影-续","children":[]},{"level":2,"title":"二、视口变换 (Viewport Transform)","slug":"二、视口变换-viewport-transform","link":"#二、视口变换-viewport-transform","children":[{"level":3,"title":"1. 什么是屏幕?","slug":"_1-什么是屏幕?","link":"#_1-什么是屏幕?","children":[]},{"level":3,"title":"2. 什么是像素?","slug":"_2-什么是像素?","link":"#_2-什么是像素?","children":[]},{"level":3,"title":"3. 屏幕中像素的坐标表示?","slug":"_3-屏幕中像素的坐标表示?","link":"#_3-屏幕中像素的坐标表示?","children":[]},{"level":3,"title":"4. 视口变换 (Viewport Transform)","slug":"_4-视口变换-viewport-transform","link":"#_4-视口变换-viewport-transform","children":[]}]},{"level":2,"title":"三、绘制设备与显示设备","slug":"三、绘制设备与显示设备","link":"#三、绘制设备与显示设备","children":[]},{"level":2,"title":"四、光栅化 (Rasterization)","slug":"四、光栅化-rasterization","link":"#四、光栅化-rasterization","children":[{"level":3,"title":"1. 模型的表示","slug":"_1-模型的表示","link":"#_1-模型的表示","children":[]},{"level":3,"title":"2. 采样","slug":"_2-采样","link":"#_2-采样","children":[]}]},{"level":2,"title":"五、真实的像素","slug":"五、真实的像素","link":"#五、真实的像素","children":[]}],"relativePath":"pages/posts/note/computer-graphics/Games101-05.md","path":"/home/runner/work/YlYZ/YlYZ/pages/posts/note/computer-graphics/Games101-05.md","lastUpdated":1686297441000}'),_={name:"pages/posts/note/computer-graphics/Games101-05.md",data(){return{data:r,frontmatter:r.frontmatter}},setup(){h("pageData",r)}},v=s("p",null,"重点归纳:",-1),z=s("ol",null,[s("li",null,"如何透视投影范围的定义"),s("li",null,[l("MVP 之后的视口变换 "),s("ul",null,[s("li",null,"何为屏幕"),s("li",null,"何为像素")])]),s("li",null,[l("一些绘制设备与显示设备 "),s("ul",null,[s("li",null,"隔行扫描技术"),s("li",null,"帧缓冲")])]),s("li",null,[l("光栅化 "),s("ul",null,[s("li",null,"模型的表示"),s("li",null,[l("采样 "),s("ul",null,[s("li",null,"边界情况"),s("li",null,"如何减小计算规模")])])])]),s("li",null,"真实的像素")],-1),f={id:"一、透视投影-续",tabindex:"-1"},D=s("p",null,"如何定义透视投影的四棱台的范围",-1),w=s("pre",null,[s("code",null,`- 长宽比 (aspect ratio)
- 垂直的可视角度 (vertical field-of-view)
`)],-1),C=s("img",{src:"https://s2.loli.net/2022/06/01/I9xzvAusFopNl8R.png",alt:""},null,-1),A=s("p",null,"水平可视角度和垂直可视角度的互相转换",-1),F=s("img",{src:"https://s2.loli.net/2022/06/01/G4MFVwl8sB7ZkzK.png",alt:""},null,-1),b={id:"二、视口变换-viewport-transform",tabindex:"-1"},x=s("p",null,[l("在 MVP 变换完成后,无论是正交投影还是透视投影都会得到一个标准立方体"),s("span",{class:"katex"},[s("span",{class:"katex-mathml"},[s("math",{xmlns:"http:https://www.w3.org/1998/Math/MathML"},[s("semantics",null,[s("mrow",null,[s("mstyle",{mathsize:"1.2em"},[s("mi",null,"C"),s("mi",null,"u"),s("mi",null,"b"),s("mi",null,"e"),s("mo",{stretchy:"false"},"["),s("mo",null,"−"),s("mn",null,"1"),s("mo",{separator:"true"},","),s("mn",null,"1"),s("msup",null,[s("mo",{stretchy:"false"},"]"),s("mn",null,"3")])])]),s("annotation",{encoding:"application/x-tex"},"\\large Cube [-1 , 1]^3")])])]),s("span",{class:"katex-html","aria-hidden":"true"},[s("span",{class:"base"},[s("span",{class:"strut",style:{height:"1.2512em","vertical-align":"-0.3em"}}),s("span",{class:"mord mathnormal sizing reset-size6 size7",style:{"margin-right":"0.07153em"}},"C"),s("span",{class:"mord mathnormal sizing reset-size6 size7"},"u"),s("span",{class:"mord mathnormal sizing reset-size6 size7"},"b"),s("span",{class:"mord mathnormal sizing reset-size6 size7"},"e"),s("span",{class:"mopen sizing reset-size6 size7"},"["),s("span",{class:"mord sizing reset-size6 size7"},"−"),s("span",{class:"mord sizing reset-size6 size7"},"1"),s("span",{class:"mpunct sizing reset-size6 size7"},","),s("span",{class:"mspace",style:{"margin-right":"0.1667em"}}),s("span",{class:"mord sizing reset-size6 size7"},"1"),s("span",{class:"mclose sizing reset-size6 size7"},[s("span",{class:"mclose"},"]"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.7926em"}},[s("span",{style:{top:"-3.163em","margin-right":"0.0417em"}},[s("span",{class:"pstrut",style:{height:"2.8em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},"3")])])])])])])])])])])],-1),k=s("p",null,"接下来要做的就是把这个标准立方体 (Canonical Cube) 绘制到屏幕上",-1),G={id:"_1-什么是屏幕?",tabindex:"-1"},M=s("pre",null,[s("code",null,`- 由像素组成的一个数组
- 数组的大小被称为分辨率:1080P、4K
- 屏幕是典型的光栅化显示设备
- 光栅一词来源于德语,在德语中是屏幕的意思
`)],-1),V={id:"_2-什么是像素?",tabindex:"-1"},T=s("pre",null,[s("code",null,`- 在图形学中,像素被抽象成显示颜色的最小单元
- 像素是红绿蓝 (RGB) 三通道的混合
- 像素是图元 (picture element) 的一种简称
`)],-1),$={id:"_3-屏幕中像素的坐标表示?",tabindex:"-1"},B=s("pre",null,[s("code",null,`- 以像素左下角的坐标来代表像素的坐标
- 像素中心的坐标需要在 x、y 轴方向偏移 0.5
`)],-1),L=s("img",{src:"https://s2.loli.net/2022/06/01/854r7lGPYFHbnzg.png",alt:""},null,-1),N={id:"_4-视口变换-viewport-transform",tabindex:"-1"},Y=s("pre",null,[s("code",null,`- 将标准立方体的 x、y 轴坐标缩放到屏幕的分辨率
- z 轴坐标不变
`)],-1),P=s("p",null,[s("span",{class:"katex-display"},[s("span",{class:"katex"},[s("span",{class:"katex-mathml"},[s("math",{xmlns:"http:https://www.w3.org/1998/Math/MathML",display:"block"},[s("semantics",null,[s("mrow",null,[s("mstyle",{mathsize:"1.2em"},[s("msub",null,[s("mi",null,"M"),s("mrow",null,[s("mi",null,"v"),s("mi",null,"i"),s("mi",null,"e"),s("mi",null,"w"),s("mi",null,"p"),s("mi",null,"o"),s("mi",null,"r"),s("mi",null,"t")])]),s("mo",null,"="),s("mrow",null,[s("mo",{fence:"true"},"("),s("mtable",{rowspacing:"0.16em",columnalign:"center center center center",columnspacing:"1em"},[s("mtr",null,[s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mfrac",null,[s("mrow",null,[s("mi",null,"w"),s("mi",null,"i"),s("mi",null,"d"),s("mi",null,"t"),s("mi",null,"h")]),s("mn",null,"2")])])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mfrac",null,[s("mrow",null,[s("mi",null,"w"),s("mi",null,"i"),s("mi",null,"d"),s("mi",null,"t"),s("mi",null,"h")]),s("mn",null,"2")])])])]),s("mtr",null,[s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mfrac",null,[s("mrow",null,[s("mi",null,"h"),s("mi",null,"e"),s("mi",null,"i"),s("mi",null,"g"),s("mi",null,"h"),s("mi",null,"t")]),s("mn",null,"2")])])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mfrac",null,[s("mrow",null,[s("mi",null,"h"),s("mi",null,"e"),s("mi",null,"i"),s("mi",null,"g"),s("mi",null,"h"),s("mi",null,"t")]),s("mn",null,"2")])])])]),s("mtr",null,[s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"1")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])])]),s("mtr",null,[s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"0")])]),s("mtd",null,[s("mstyle",{scriptlevel:"0",displaystyle:"false"},[s("mn",null,"1")])])])]),s("mo",{fence:"true"},")")])])]),s("annotation",{encoding:"application/x-tex"},"\\large M_{viewport}=\\left(\\begin{array}{cccc} \\frac{width}{2} & 0 & 0 & \\frac{width}{2} \\\\ 0 & \\frac{height}{2} & 0 & \\frac{height}{2} \\\\ 0 & 0 & 1 & 0 \\\\ 0 & 0 & 0 & 1 \\end{array}\\right) ")])])]),s("span",{class:"katex-html","aria-hidden":"true"},[s("span",{class:"base"},[s("span",{class:"strut",style:{height:"1.1555em","vertical-align":"-0.3356em"}}),s("span",{class:"mord sizing reset-size6 size7"},[s("span",{class:"mord mathnormal",style:{"margin-right":"0.10903em"}},"M"),s("span",{class:"msupsub"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.2897em"}},[s("span",{style:{top:"-2.65em","margin-left":"-0.109em","margin-right":"0.0417em"}},[s("span",{class:"pstrut",style:{height:"2.8em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.03588em"}},"v"),s("span",{class:"mord mathnormal mtight"},"i"),s("span",{class:"mord mathnormal mtight"},"e"),s("span",{class:"mord mathnormal mtight"},"wp"),s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.02778em"}},"or"),s("span",{class:"mord mathnormal mtight"},"t")])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.2796em"}},[s("span")])])])])]),s("span",{class:"mspace",style:{"margin-right":"0.2778em"}}),s("span",{class:"mrel sizing reset-size6 size7"},"="),s("span",{class:"mspace",style:{"margin-right":"0.2778em"}})]),s("span",{class:"base"},[s("span",{class:"strut",style:{height:"5.8555em","vertical-align":"-2.6277em"}}),s("span",{class:"minner sizing reset-size6 size7"},[s("span",{class:"mopen sizing reset-size7 size6"},[s("span",{class:"delimsizing mult"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"3em"}},[s("span",{style:{top:"-5em"}},[s("span",{class:"pstrut",style:{height:"7.4em"}}),s("span",{style:{width:"0.875em",height:"5.400em"}},[s("svg",{xmlns:"http:https://www.w3.org/2000/svg",width:"0.875em",height:"5.400em",viewBox:"0 0 875 5400"},[s("path",{d:`M863,9c0,-2,-2,-5,-6,-9c0,0,-17,0,-17,0c-12.7,0,-19.3,0.3,-20,1
c-5.3,5.3,-10.3,11,-15,17c-242.7,294.7,-395.3,682,-458,1162c-21.3,163.3,-33.3,349,
-36,557 l0,1884c0.2,6,0,26,0,60c2,159.3,10,310.7,24,454c53.3,528,210,
949.7,470,1265c4.7,6,9.7,11.7,15,17c0.7,0.7,7,1,19,1c0,0,18,0,18,0c4,-4,6,-7,6,-9
c0,-2.7,-3.3,-8.7,-10,-18c-135.3,-192.7,-235.5,-414.3,-300.5,-665c-65,-250.7,-102.5,
-544.7,-112.5,-882c-2,-104,-3,-167,-3,-189
l0,-1892c0,-162.7,5.7,-314,17,-454c20.7,-272,63.7,-513,129,-723c65.3,
-210,155.3,-396.3,270,-559c6.7,-9.3,10,-15.3,10,-18z`})])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.4em"}},[s("span")])])])])]),s("span",{class:"mord"},[s("span",{class:"mtable"},[s("span",{class:"arraycolsep",style:{width:"0.5em"}}),s("span",{class:"col-align-c"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.6898em"}},[s("span",{style:{top:"-5.0328em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},[s("span",{class:"mopen nulldelimiter sizing reset-size7 size6"}),s("span",{class:"mfrac"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.857em"}},[s("span",{style:{top:"-2.655em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mtight"},"2")])])]),s("span",{style:{top:"-3.23em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"frac-line",style:{"border-bottom-width":"0.04em"}})]),s("span",{style:{top:"-3.394em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.02691em"}},"w"),s("span",{class:"mord mathnormal mtight"},"i"),s("span",{class:"mord mathnormal mtight"},"d"),s("span",{class:"mord mathnormal mtight"},"t"),s("span",{class:"mord mathnormal mtight"},"h")])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.345em"}},[s("span")])])])]),s("span",{class:"mclose nulldelimiter sizing reset-size7 size6"})])])]),s("span",{style:{top:"-3.7702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])]),s("span",{style:{top:"-2.5702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])]),s("span",{style:{top:"-1.3702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.1898em"}},[s("span")])])])]),s("span",{class:"arraycolsep",style:{width:"0.5em"}}),s("span",{class:"arraycolsep",style:{width:"0.5em"}}),s("span",{class:"col-align-c"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.6898em"}},[s("span",{style:{top:"-5.0328em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])]),s("span",{style:{top:"-3.7702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},[s("span",{class:"mopen nulldelimiter sizing reset-size7 size6"}),s("span",{class:"mfrac"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.9026em"}},[s("span",{style:{top:"-2.655em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mtight"},"2")])])]),s("span",{style:{top:"-3.23em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"frac-line",style:{"border-bottom-width":"0.04em"}})]),s("span",{style:{top:"-3.4396em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight"},"h"),s("span",{class:"mord mathnormal mtight"},"e"),s("span",{class:"mord mathnormal mtight"},"i"),s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.03588em"}},"g"),s("span",{class:"mord mathnormal mtight"},"h"),s("span",{class:"mord mathnormal mtight"},"t")])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.345em"}},[s("span")])])])]),s("span",{class:"mclose nulldelimiter sizing reset-size7 size6"})])])]),s("span",{style:{top:"-2.5702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])]),s("span",{style:{top:"-1.3702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.1898em"}},[s("span")])])])]),s("span",{class:"arraycolsep",style:{width:"0.5em"}}),s("span",{class:"arraycolsep",style:{width:"0.5em"}}),s("span",{class:"col-align-c"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.6898em"}},[s("span",{style:{top:"-5.0328em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])]),s("span",{style:{top:"-3.7702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])]),s("span",{style:{top:"-2.5702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"1")])]),s("span",{style:{top:"-1.3702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.1898em"}},[s("span")])])])]),s("span",{class:"arraycolsep",style:{width:"0.5em"}}),s("span",{class:"arraycolsep",style:{width:"0.5em"}}),s("span",{class:"col-align-c"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.6898em"}},[s("span",{style:{top:"-5.0328em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},[s("span",{class:"mopen nulldelimiter sizing reset-size7 size6"}),s("span",{class:"mfrac"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.857em"}},[s("span",{style:{top:"-2.655em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mtight"},"2")])])]),s("span",{style:{top:"-3.23em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"frac-line",style:{"border-bottom-width":"0.04em"}})]),s("span",{style:{top:"-3.394em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.02691em"}},"w"),s("span",{class:"mord mathnormal mtight"},"i"),s("span",{class:"mord mathnormal mtight"},"d"),s("span",{class:"mord mathnormal mtight"},"t"),s("span",{class:"mord mathnormal mtight"},"h")])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.345em"}},[s("span")])])])]),s("span",{class:"mclose nulldelimiter sizing reset-size7 size6"})])])]),s("span",{style:{top:"-3.7702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},[s("span",{class:"mopen nulldelimiter sizing reset-size7 size6"}),s("span",{class:"mfrac"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.9026em"}},[s("span",{style:{top:"-2.655em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mtight"},"2")])])]),s("span",{style:{top:"-3.23em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"frac-line",style:{"border-bottom-width":"0.04em"}})]),s("span",{style:{top:"-3.4396em"}},[s("span",{class:"pstrut",style:{height:"3em"}}),s("span",{class:"sizing reset-size7 size4 mtight"},[s("span",{class:"mord mtight"},[s("span",{class:"mord mathnormal mtight"},"h"),s("span",{class:"mord mathnormal mtight"},"e"),s("span",{class:"mord mathnormal mtight"},"i"),s("span",{class:"mord mathnormal mtight",style:{"margin-right":"0.03588em"}},"g"),s("span",{class:"mord mathnormal mtight"},"h"),s("span",{class:"mord mathnormal mtight"},"t")])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"0.345em"}},[s("span")])])])]),s("span",{class:"mclose nulldelimiter sizing reset-size7 size6"})])])]),s("span",{style:{top:"-2.5702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"0")])]),s("span",{style:{top:"-1.3702em"}},[s("span",{class:"pstrut",style:{height:"3.2em"}}),s("span",{class:"mord"},[s("span",{class:"mord"},"1")])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.1898em"}},[s("span")])])])]),s("span",{class:"arraycolsep",style:{width:"0.5em"}})])]),s("span",{class:"mclose sizing reset-size7 size6"},[s("span",{class:"delimsizing mult"},[s("span",{class:"vlist-t vlist-t2"},[s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"3em"}},[s("span",{style:{top:"-5em"}},[s("span",{class:"pstrut",style:{height:"7.4em"}}),s("span",{style:{width:"0.875em",height:"5.400em"}},[s("svg",{xmlns:"http:https://www.w3.org/2000/svg",width:"0.875em",height:"5.400em",viewBox:"0 0 875 5400"},[s("path",{d:`M76,0c-16.7,0,-25,3,-25,9c0,2,2,6.3,6,13c21.3,28.7,42.3,60.3,
63,95c96.7,156.7,172.8,332.5,228.5,527.5c55.7,195,92.8,416.5,111.5,664.5
c11.3,139.3,17,290.7,17,454c0,28,1.7,43,3.3,45l0,1809
c-3,4,-3.3,16.7,-3.3,38c0,162,-5.7,313.7,-17,455c-18.7,248,-55.8,469.3,-111.5,664
c-55.7,194.7,-131.8,370.3,-228.5,527c-20.7,34.7,-41.7,66.3,-63,95c-2,3.3,-4,7,-6,11
c0,7.3,5.7,11,17,11c0,0,11,0,11,0c9.3,0,14.3,-0.3,15,-1c5.3,-5.3,10.3,-11,15,-17
c242.7,-294.7,395.3,-681.7,458,-1161c21.3,-164.7,33.3,-350.7,36,-558
l0,-1944c-2,-159.3,-10,-310.7,-24,-454c-53.3,-528,-210,-949.7,
-470,-1265c-4.7,-6,-9.7,-11.7,-15,-17c-0.7,-0.7,-6.7,-1,-18,-1z`})])])])]),s("span",{class:"vlist-s"},"")]),s("span",{class:"vlist-r"},[s("span",{class:"vlist",style:{height:"2.4em"}},[s("span")])])])])])])])])])])],-1),R={id:"三、绘制设备与显示设备",tabindex:"-1"},Z=s("p",null,"绘制设备:",-1),S=s("pre",null,[s("code",null,`- 数控绘制机 (CNC Sharpie Drawing Machine)
- 激光切割机 (Laser Cutters)
- etc..
`)],-1),H=s("p",null,"显示设备:",-1),q=s("pre",null,[s("code",null,`- 示波器 (Oscilloscope)
- 阴极射线管 (CathodeRay Tube)
`)],-1),E=s("img",{src:"https://s2.loli.net/2022/06/01/rZCnhbKcP9HdEyk.png",alt:"",width:"250"},null,-1),I=s("p",null,"隔行扫描技术",-1),K=s("pre",null,[s("code",null,`- 利用人眼的视觉暂留
- 一张只画奇数行,一张只画偶数行
- 视频压缩也可以采取类似做法
- 缺点:画面可能撕裂
`)],-1),U=s("p",null,[l("帧缓冲:将内存中的一块区域映射到屏幕上 "),s("img",{src:"https://s2.loli.net/2022/06/01/NESRvs6IqnVYT45.png",alt:""})],-1),O=s("p",null,"其他显示设备:",-1),Q=s("pre",null,[s("code",null,`- LCD(Liquid Crystal Display), 液晶显示器,利用偏振过滤光
- LED, 发光二极管,控制发光强度
- 墨水屏,刷新率很低,电极吸附带点墨水
- 视网膜屏幕,分辨率超过人眼的屏幕
`)],-1),X={id:"四、光栅化-rasterization",tabindex:"-1"},J=s("p",null,"光栅化:将模型的网格绘制到光栅显示设备,把多边形拆成多个像素",-1),W={id:"_1-模型的表示",tabindex:"-1"},j=s("p",null,"网格分为多边形网格、四边形网格、三角形网格等",-1),ss=s("p",null,"三角形网格的优点",-1),ls=s("pre",null,[s("code",null,`- 三角形,最基本的多边形
- 其他的多边形都可以拆成三角形
- 三角形一定是在一个平面内
- 很好定义内外,且容易叉积求得,不像别的多边形可能有凹陷,有洞
- 可以根据三角形三个顶点的属性得到三角形内部的点的属性 (插值)
`)],-1),ts=s("p",null,"四边形网格的优点:方便展 UV 等",-1),es={id:"_2-采样",tabindex:"-1"},as=s("p",null,"空间中的点是连续的,而屏幕上的像素是离散的,那么就在将空间中的三角形绘制到屏幕上时需要进行采样",-1),ns={id:"函数的采样",tabindex:"-1"},is=s("img",{src:"https://s2.loli.net/2022/06/01/kHbqrUlt4jdBKys.png",alt:""},null,-1),rs={id:"对像素中心进行采样",tabindex:"-1"},os=s("img",{src:"https://s2.loli.net/2022/06/01/H6QCMNyS9s3kLGX.png",alt:""},null,-1),cs=s("div",{class:"language-cpp"},[s("span",{class:"copy"}),s("pre",{class:"shiki material-theme-palenight",tabindex:"0"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#89DDFF","font-style":"italic"}},"for"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"("),s("span",{style:{color:"#C792EA"}},"int"),s("span",{style:{color:"#A6ACCD"}}," x "),s("span",{style:{color:"#89DDFF"}},"="),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#F78C6C"}},"0"),s("span",{style:{color:"#89DDFF"}},";"),s("span",{style:{color:"#A6ACCD"}}," x "),s("span",{style:{color:"#89DDFF"}},"<"),s("span",{style:{color:"#A6ACCD"}}," xmax"),s("span",{style:{color:"#89DDFF"}},";"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"++"),s("span",{style:{color:"#A6ACCD"}},"x"),s("span",{style:{color:"#89DDFF"}},")")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF","font-style":"italic"}},"for"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"("),s("span",{style:{color:"#C792EA"}},"int"),s("span",{style:{color:"#A6ACCD"}}," y "),s("span",{style:{color:"#89DDFF"}},"="),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#F78C6C"}},"0"),s("span",{style:{color:"#89DDFF"}},";"),s("span",{style:{color:"#A6ACCD"}}," y "),s("span",{style:{color:"#89DDFF"}},"<"),s("span",{style:{color:"#A6ACCD"}}," ymax"),s("span",{style:{color:"#89DDFF"}},";"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"++"),s("span",{style:{color:"#A6ACCD"}},"y"),s("span",{style:{color:"#89DDFF"}},")")]),l(`
`),s("span",{class:"line"},[s("span",{style:{color:"#A6ACCD"}}," image"),s("span",{style:{color:"#89DDFF"}},"["),s("span",{style:{color:"#A6ACCD"}},"x"),s("span",{style:{color:"#89DDFF"}},"]["),s("span",{style:{color:"#A6ACCD"}},"y"),s("span",{style:{color:"#89DDFF"}},"]"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#89DDFF"}},"="),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#82AAFF"}},"inside"),s("span",{style:{color:"#89DDFF"}},"("),s("span",{style:{color:"#A6ACCD"}},"tri"),s("span",{style:{color:"#89DDFF"}},","),s("span",{style:{color:"#A6ACCD"}},"x "),s("span",{style:{color:"#89DDFF"}},"+"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#F78C6C"}},"0.5"),s("span",{style:{color:"#89DDFF"}},","),s("span",{style:{color:"#A6ACCD"}}," y "),s("span",{style:{color:"#89DDFF"}},"+"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#F78C6C"}},"0.5"),s("span",{style:{color:"#89DDFF"}},");")]),l(`
`),s("span",{class:"line"})])])],-1),ps={id:"边界情况",tabindex:"-1"},ms=s("p",null,"使用叉积来计算一个点是否在三角形内部,如果该点在边界上,则自己定义其在内部还是在外部,一般遵循 top-left rule",-1),hs={id:"减小计算规模",tabindex:"-1"},ds=s("p",null,"使用 AABB 包围盒 (Axis-Aligend Bounding Box) 来减少需要检查的像素数量",-1),us=s("img",{src:"https://s2.loli.net/2022/06/01/ISdz4bDH9MNZ5WE.png",alt:""},null,-1),gs=s("p",null,[l("也可以使用增量三角形遍历的方式 "),s("img",{src:"https://s2.loli.net/2022/06/01/opqdcLSQuhzg3fI.png",alt:""})],-1),ys={id:"五、真实的像素",tabindex:"-1"},_s=s("p",null,"像素内部结构",-1),vs=s("pre",null,[s("code",null,`- 并非一个方块
- bayer pattern
- 绿色的密度最高,人眼最能分辨绿色
`)],-1),zs=s("img",{src:"https://s2.loli.net/2022/06/01/zP2a6gM5GVKfkOS.png",alt:""},null,-1),fs=s("img",{src:"https://s2.loli.net/2022/06/01/AHDGaPlYWXmNvi1.png",alt:""},null,-1),Ds=s("img",{src:"https://s2.loli.net/2022/06/01/nfqHda6BXoVDCMP.png",alt:""},null,-1),ws=s("p",null,[l("Q: 这幅图有什么问题? "),s("img",{src:"https://s2.loli.net/2022/06/01/UHozcITg52ZCYdq.png",alt:""}),l(" A: 采样率不够导致了走样,需要抗锯齿")],-1);function Cs(n,As,Fs,bs,o,xs){const e=y,c=p;return u(),d(c,{frontmatter:o.frontmatter,data:o.data},{"main-content-md":t(()=>[v,z,g(" more "),s("h2",f,[l("一、透视投影 (续) "),a(e,{class:"header-anchor",href:"#一、透视投影-续","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),D,w,C,A,F,s("h2",b,[l("二、视口变换 (Viewport Transform) "),a(e,{class:"header-anchor",href:"#二、视口变换-viewport-transform","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),x,k,s("h3",G,[l("1. 什么是屏幕? "),a(e,{class:"header-anchor",href:"#_1-什么是屏幕?","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),M,s("h3",V,[l("2. 什么是像素? "),a(e,{class:"header-anchor",href:"#_2-什么是像素?","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),T,s("h3",$,[l("3. 屏幕中像素的坐标表示? "),a(e,{class:"header-anchor",href:"#_3-屏幕中像素的坐标表示?","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),B,L,s("h3",N,[l("4. 视口变换 (Viewport Transform) "),a(e,{class:"header-anchor",href:"#_4-视口变换-viewport-transform","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),Y,P,s("h2",R,[l("三、绘制设备与显示设备 "),a(e,{class:"header-anchor",href:"#三、绘制设备与显示设备","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),Z,S,H,q,E,I,K,U,O,Q,s("h2",X,[l("四、光栅化 (Rasterization) "),a(e,{class:"header-anchor",href:"#四、光栅化-rasterization","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),J,s("h3",W,[l("1. 模型的表示 "),a(e,{class:"header-anchor",href:"#_1-模型的表示","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),j,ss,ls,ts,s("h3",es,[l("2. 采样 "),a(e,{class:"header-anchor",href:"#_2-采样","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),as,s("h4",ns,[l("函数的采样 "),a(e,{class:"header-anchor",href:"#函数的采样","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),is,s("h4",rs,[l("对像素中心进行采样 "),a(e,{class:"header-anchor",href:"#对像素中心进行采样","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),os,l(" indise(t, x, y)=\\\\{\\begin{array}{cc}1 & \\text{Point(x,y) in triangle t}\\\\ 0 & otherwise\\end{array} "),cs,s("h4",ps,[l("边界情况 "),a(e,{class:"header-anchor",href:"#边界情况","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),ms,s("h4",hs,[l("减小计算规模 "),a(e,{class:"header-anchor",href:"#减小计算规模","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),ds,us,gs,s("h2",ys,[l("五、真实的像素 "),a(e,{class:"header-anchor",href:"#五、真实的像素","aria-hidden":"true"},{default:t(()=>[l("#")]),_:1})]),_s,vs,zs,fs,Ds,ws]),"main-header":t(()=>[i(n.$slots,"main-header")]),"main-header-after":t(()=>[i(n.$slots,"main-header-after")]),"main-nav":t(()=>[i(n.$slots,"main-nav")]),"main-content":t(()=>[i(n.$slots,"main-content")]),"main-content-after":t(()=>[i(n.$slots,"main-content-after")]),"main-nav-before":t(()=>[i(n.$slots,"main-nav-before")]),"main-nav-after":t(()=>[i(n.$slots,"main-nav-after")]),comment:t(()=>[i(n.$slots,"comment")]),footer:t(()=>[i(n.$slots,"footer")]),aside:t(()=>[i(n.$slots,"aside")]),"aside-custom":t(()=>[i(n.$slots,"aside-custom")]),default:t(()=>[i(n.$slots,"default")]),_:3},8,["frontmatter","data"])}const Bs=m(_,[["render",Cs]]);export{$s as __pageData,Bs as default};