import{_ as s,c as n,a as l,b as t,d as Q,o as T}from"./app-BccG_woC.js";const e="/assets/title_64-_FgKh5nb.jpg",r="/assets/title_16-iJhhK4Yu.jpg",o="/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"},x={class:"MathJax",jax:"SVG",style:{position:"relative"}},w={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"},c={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"}},b={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"},y={class:"MathJax",jax:"SVG",style:{position:"relative"}},_={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"},j={class:"MathJax",jax:"SVG",style:{position:"relative"}},C={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"}},B={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 z(D,a){return T(),n("div",null,[a[28]||(a[28]=l('

像素遍历

5. 像素遍历

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

5.1 扫描线算法

(略...)

5.2 分块算法

',7)),t("p",null,[a[6]||(a[6]=Q("分块算法是将绘制区域分成方块(Title)，逐个方块进行光栅化。 Title的大小最小为")),t("mjx-container",V,[(T(),n("svg",u,a[0]||(a[0]=[l('',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倍递增，也就是")),t("mjx-container",f,[(T(),n("svg",M,a[2]||(a[2]=[l('',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("，比如下面图中这个三角形所在的绘制区域，大小为")),t("mjx-container",x,[(T(),n("svg",w,a[4]||(a[4]=[l('',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。"))]),a[29]||(a[29]=t("figure",null,[t("img",{src:e,alt:"",tabindex:"0",loading:"lazy"}),t("figcaption",null,"一个要被光栅化的三角形，显示在64×64的Title中")],-1)),t("p",null,[a[14]||(a[14]=Q("将这个Title分成")),t("mjx-container",c,[(T(),n("svg",Z,a[10]||(a[10]=[l('',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("份，每份")),t("mjx-container",v,[(T(),n("svg",b,a[12]||(a[12]=[l('',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("大小的方块, 计算有哪些方块被三角形覆盖"))]),a[30]||(a[30]=t("figure",null,[t("img",{src:r,alt:"",tabindex:"0",loading:"lazy"}),t("figcaption",null,"一共有16个方块需要被测定是否碰触到三角形")],-1)),t("p",null,[a[21]||(a[21]=Q("判定只有一个")),t("mjx-container",y,[(T(),n("svg",_,a[17]||(a[17]=[l('',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个")),t("mjx-container",j,[(T(),n("svg",C,a[19]||(a[19]=[l('',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("的块，再次判断"))]),a[31]||(a[31]=t("figure",null,[t("img",{src:o,alt:"",tabindex:"0",loading:"lazy"}),t("figcaption",null,"需要计算16个4×4的方块是否碰触到三角形")],-1)),t("p",null,[a[26]||(a[26]=Q("计算出其中5个")),t("mjx-container",k,[(T(),n("svg",B,a[24]||(a[24]=[l('',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个方块进行填充处理"))]),a[32]||(a[32]=l('

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

5.2.1 方块和直线的关系

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

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

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

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

5.2.2 方块和三角形的关系

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

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

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

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

在分块光栅化算法中

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

',20))])}const S=s(L,[["render",z],["__file","raster03.html.vue"]]),G=JSON.parse('{"path":"/note/graphics/rasterization/raster03.html","title":"像素遍历","lang":"zh-CN","frontmatter":{},"headers":[{"level":2,"title":"5. 像素遍历","slug":"_5-像素遍历","link":"#_5-像素遍历","children":[{"level":3,"title":"5.1 扫描线算法","slug":"_5-1-扫描线算法","link":"#_5-1-扫描线算法","children":[]},{"level":3,"title":"5.2 分块算法","slug":"_5-2-分块算法","link":"#_5-2-分块算法","children":[]}]}],"git":{},"filePathRelative":"note/graphics/rasterization/raster03.md"}');export{S as comp,G as data};