import{_ as T}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as l,a as n,b as t,e as Q,o as e}from"./app-D3AKSfRn.js";const o="/assets/title_64-_FgKh5nb.jpg",s="/assets/title_16-iJhhK4Yu.jpg",r="/assets/title_4_0-DKeQdDgc.jpg",i="/assets/title_4_1-B5fkCEh0.png",m="/assets/edge_title-CFr2ugQa.svg",d="/assets/edge_title_four-pyNq2hCG.svg",g="/assets/triangle_title_0-Can4WStV.svg",p="/assets/triangle_title_1-QR6k_O9b.svg",h="/assets/triangle_title_2-BqPybX-w.svg",H="/assets/triangle_title_3-BNP2JxgU.svg",L={},V={class:"MathJax",jax:"SVG",style:{position:"relative"}},u={style:{"vertical-align":"0"},xmlns:"http://www.w3.org/2000/svg",width:"5.028ex",height:"1.532ex",role:"img",focusable:"false",viewBox:"0 -677 2222.4 677","aria-hidden":"true"},f={class:"MathJax",jax:"SVG",style:{position:"relative"}},M={style:{"vertical-align":"-0.439ex"},xmlns:"http://www.w3.org/2000/svg",width:"25.268ex",height:"1.971ex",role:"img",focusable:"false",viewBox:"0 -677 11168.7 871","aria-hidden":"true"},c={class:"MathJax",jax:"SVG",style:{position:"relative"}},x={style:{"vertical-align":"-0.05ex"},xmlns:"http://www.w3.org/2000/svg",width:"7.291ex",height:"1.581ex",role:"img",focusable:"false",viewBox:"0 -677 3222.4 699","aria-hidden":"true"},w={class:"MathJax",jax:"SVG",style:{position:"relative"}},Z={style:{"vertical-align":"0"},xmlns:"http://www.w3.org/2000/svg",width:"5.028ex",height:"1.532ex",role:"img",focusable:"false",viewBox:"0 -677 2222.4 677","aria-hidden":"true"},v={class:"MathJax",jax:"SVG",style:{position:"relative"}},y={style:{"vertical-align":"-0.05ex"},xmlns:"http://www.w3.org/2000/svg",width:"7.291ex",height:"1.557ex",role:"img",focusable:"false",viewBox:"0 -666 3222.4 688","aria-hidden":"true"},b={class:"MathJax",jax:"SVG",style:{position:"relative"}},j={style:{"vertical-align":"-0.05ex"},xmlns:"http://www.w3.org/2000/svg",width:"7.291ex",height:"1.557ex",role:"img",focusable:"false",viewBox:"0 -666 3222.4 688","aria-hidden":"true"},C={class:"MathJax",jax:"SVG",style:{position:"relative"}},_={style:{"vertical-align":"0"},xmlns:"http://www.w3.org/2000/svg",width:"5.028ex",height:"1.532ex",role:"img",focusable:"false",viewBox:"0 -677 2222.4 677","aria-hidden":"true"},k={class:"MathJax",jax:"SVG",style:{position:"relative"}},z={style:{"vertical-align":"0"},xmlns:"http://www.w3.org/2000/svg",width:"5.028ex",height:"1.532ex",role:"img",focusable:"false",viewBox:"0 -677 2222.4 677","aria-hidden":"true"};function B(D,a){return e(),l("div",null,[a[28]||(a[28]=n('

像素遍历

5. 像素遍历

像素遍历是指光栅化中重要的一个环节，是指找到三角形内部像素的过程，同时也要计算出像素对应的属性，比如颜色，深度等。

5.1 扫描线算法

(略...)

5.2 分块算法

',7)),t("p",null,[a[6]||(a[6]=Q("分块算法是将绘制区域分成方块(Title)，逐个方块进行光栅化。 Title的大小最小为",-1)),t("mjx-container",V,[(e(),l("svg",u,[...a[0]||(a[0]=[n('',1)])])),a[1]||(a[1]=t("mjx-assistive-mml",{unselectable:"on",display:"inline"},[t("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[t("mn",null,"4"),t("mo",null,"×"),t("mn",null,"4")])],-1))]),a[7]||(a[7]=Q("，逐级按照4倍递增，也就是",-1)),t("mjx-container",f,[(e(),l("svg",M,[...a[2]||(a[2]=[n('',1)])])),a[3]||(a[3]=t("mjx-assistive-mml",{unselectable:"on",display:"inline"},[t("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[t("mn",null,"4"),t("mo",null,"×"),t("mn",null,"4"),t("mo",null,","),t("mn",null,"16"),t("mo",null,"×"),t("mn",null,"16"),t("mo",null,","),t("mn",null,"64"),t("mo",null,"×"),t("mn",null,"64"),t("mo",null,","),t("mo",null,"."),t("mo",null,"."),t("mo",null,".")])],-1))]),a[8]||(a[8]=Q("，比如下面图中这个三角形所在的绘制区域，大小为",-1)),t("mjx-container",c,[(e(),l("svg",x,[...a[4]||(a[4]=[n('',1)])])),a[5]||(a[5]=t("mjx-assistive-mml",{unselectable:"on",display:"inline"},[t("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[t("mn",null,"64"),t("mo",null,"×"),t("mn",null,"64")])],-1))]),a[9]||(a[9]=Q("，正好是一个Title。",-1))]),a[29]||(a[29]=t("figure",null,[t("img",{src:o,alt:"",tabindex:"0",loading:"lazy"}),t("figcaption",null,"一个要被光栅化的三角形，显示在64×64的Title中")],-1)),t("p",null,[a[14]||(a[14]=Q("将这个Title分成",-1)),t("mjx-container",w,[(e(),l("svg",Z,[...a[10]||(a[10]=[n('',1)])])),a[11]||(a[11]=t("mjx-assistive-mml",{unselectable:"on",display:"inline"},[t("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[t("mn",null,"4"),t("mo",null,"×"),t("mn",null,"4")])],-1))]),a[15]||(a[15]=Q("份，每份",-1)),t("mjx-container",v,[(e(),l("svg",y,[...a[12]||(a[12]=[n('',1)])])),a[13]||(a[13]=t("mjx-assistive-mml",{unselectable:"on",display:"inline"},[t("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[t("mn",null,"16"),t("mo",null,"×"),t("mn",null,"16")])],-1))]),a[16]||(a[16]=Q("大小的方块, 计算有哪些方块被三角形覆盖",-1))]),a[30]||(a[30]=t("figure",null,[t("img",{src:s,alt:"",tabindex:"0",loading:"lazy"}),t("figcaption",null,"一共有16个方块需要被测定是否碰触到三角形")],-1)),t("p",null,[a[21]||(a[21]=Q("判定只有一个",-1)),t("mjx-container",b,[(e(),l("svg",j,[...a[17]||(a[17]=[n('',1)])])),a[18]||(a[18]=t("mjx-assistive-mml",{unselectable:"on",display:"inline"},[t("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[t("mn",null,"16"),t("mo",null,"×"),t("mn",null,"16")])],-1))]),a[22]||(a[22]=Q("块碰触到三角形, 也就是上图中黄色方块, 然后再把这个块分为16个",-1)),t("mjx-container",C,[(e(),l("svg",_,[...a[19]||(a[19]=[n('',1)])])),a[20]||(a[20]=t("mjx-assistive-mml",{unselectable:"on",display:"inline"},[t("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[t("mn",null,"4"),t("mo",null,"×"),t("mn",null,"4")])],-1))]),a[23]||(a[23]=Q("的块，再次判断",-1))]),a[31]||(a[31]=t("figure",null,[t("img",{src:r,alt:"",tabindex:"0",loading:"lazy"}),t("figcaption",null,"需要计算16个4×4的方块是否碰触到三角形")],-1)),t("p",null,[a[26]||(a[26]=Q("计算出其中5个",-1)),t("mjx-container",k,[(e(),l("svg",z,[...a[24]||(a[24]=[n('',1)])])),a[25]||(a[25]=t("mjx-assistive-mml",{unselectable:"on",display:"inline"},[t("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[t("mn",null,"4"),t("mo",null,"×"),t("mn",null,"4")])],-1))]),a[27]||(a[27]=Q("块碰触到了三角形, 逐个对这5个方块进行填充处理",-1))]),a[32]||(a[32]=n('

分块算法的好处是可以进行并行处理，非常适合通过GPU计算。

5.2.1 方块和直线的关系

方块和直线的关系有三种：相交、在直线内侧、在直线外侧

根据直线的方向，方块的四个角中有一个“排除角”和一个“接受角”可以用于快速判断方块和直线的关系。例如上面这条直线方向是指向右上方，那么方块左上角为“排斥角(RejectCorner)”，用红色表示，右下角为“接受角(AcceptCorner)”，用绿色表示。

如果排斥角在直线外侧，那么方块一定是在直线的外侧
如果接受角在直线内侧，那么方块一定在直线的内侧
如果排斥角在直线内测同时接受角在直线外侧，那么方块和直线相交

随着直线方向的不同，方块的“排除角”和“接受角”也不同

5.2.2 方块和三角形的关系

方块和三角形的关系也有三种：外侧、内侧或者相交：

如果方块在任意一条边的外侧，那么方块一定在三角形外

如果方块在所有三条边的内侧，那么方块一定在三角形内侧

其他情况，方块可能在三角形外侧也可能相交

在分块光栅化算法中

如果方块在三角形外侧（也就是出现在任意一条边的外侧），则可以直接忽略;
如果在内侧（也就是出现在所有边的内侧）），则全部填充;
如果是其他情况，方块可能和三角形相交也可能出现在外侧，需要进一步分拆方块为更小的方块进行判断

',20))])}const G=T(L,[["render",B]]),N=JSON.parse('{"path":"/note/graphics/rasterization/raster03.html","title":"像素遍历","lang":"zh-CN","frontmatter":{"description":"像素遍历 5. 像素遍历像素遍历是指光栅化中重要的一个环节，是指找到三角形内部像素的过程，同时也要计算出像素对应的属性，比如颜色，深度等。 5.1 扫描线算法 (略...) 5.2 分块算法分块算法是将绘制区域分成方块(Title)，逐个方块进行光栅化。 Title的大小最小为，逐级按照4倍递增，也就是，比如下面图中这个三角形所在的绘制区域，大小为...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"像素遍历\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-07-13T10:53:44.000Z\\",\\"author\\":[{\\"@type\\":\\"Person\\",\\"name\\":\\"JinChao\\",\\"url\\":\\"https://thecodeway.com\\"}]}"],["meta",{"property":"og:url","content":"https://thejinchao.github.io/note/graphics/rasterization/raster03.html"}],["meta",{"property":"og:site_name","content":"我的博客和笔记"}],["meta",{"property":"og:title","content":"像素遍历"}],["meta",{"property":"og:description","content":"像素遍历 5. 像素遍历像素遍历是指光栅化中重要的一个环节，是指找到三角形内部像素的过程，同时也要计算出像素对应的属性，比如颜色，深度等。 5.1 扫描线算法 (略...) 5.2 分块算法分块算法是将绘制区域分成方块(Title)，逐个方块进行光栅化。 Title的大小最小为，逐级按照4倍递增，也就是，比如下面图中这个三角形所在的绘制区域，大小为..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-07-13T10:53:44.000Z"}],["meta",{"property":"article:modified_time","content":"2025-07-13T10:53:44.000Z"}]]},"git":{"createdTime":1752291638000,"updatedTime":1752404024000,"contributors":[{"name":"thejinchao","username":"thejinchao","email":"thejinchao@gmail.com","commits":2,"url":"https://github.com/thejinchao"}]},"readingTime":{"minutes":2.69,"words":807},"filePathRelative":"note/graphics/rasterization/raster03.md","autoDesc":true}');export{G as comp,N as data};