《計(jì)算機(jī)圖形學(xué)》

總復(fù)習(xí)

ComputerGraphics1《計(jì)算機(jī)圖形學(xué)》

總復(fù)習(xí)ComputerGraphicsCh1.asurveyofCSComputerGraphics2Ch1.asurveyofCSComputerGrGraphicsConceptInnarrowsense位圖(bitmap)-圖像Image，矢量圖(vectorgraph)GraphicIngeneral,graphicscanbeanyobjectwhichisabletogivevisionimpressioninman’svisionsystem.Itincludevariousgeometrygraphics,views,pictures,patterns,andimages.3GraphicsConceptInnarrowsens凡是能夠在人的視覺系統(tǒng)中形成視覺印象的客觀對(duì)象都稱為圖形。(1)自然景物(2)照片和圖片(3)工程圖、設(shè)計(jì)圖和方框圖(4)人工美術(shù)繪畫、雕塑品(5)用數(shù)學(xué)方法描述的圖形

（包括幾何圖形、代數(shù)方程、分析表達(dá)式或列表所確定的圖形）什么是圖形？4凡是能夠在人的視覺系統(tǒng)中形成視覺印象的客觀對(duì)象都稱為圖形。什Vectorgraphandbitmap(1).vectorgraphAnycurvesareapproachedwithmanyshortlines(2).bitmapEverycurvemustbeconsistofseveralpixels5Vectorgraphandbitmap(1).vect幾何要素：刻畫對(duì)象的輪廓、形狀等(幾何模型)非幾何要素:刻畫對(duì)象的顏色、材質(zhì)等(物理屬性)計(jì)算機(jī)圖形學(xué)中的圖形要素6幾何要素：刻畫對(duì)象的輪廓、形狀等(幾何模型)計(jì)算機(jī)圖形學(xué)中的WhatisComputerGraphics？Thetechnologyforgeneratingtheimagesonthecomputerscreenwithalgorithmsandprogramsiscalledthecomputergraphics.計(jì)算機(jī)圖形學(xué)(ComputerGraphics,CG)是研究怎樣用數(shù)字計(jì)算機(jī)生成、處理和顯示圖形的一門學(xué)科。7WhatisComputerGraphics？TheRelationshipwithothersubjects數(shù)字圖像DigitalImages數(shù)據(jù)模型DataModels圖像生成ImageRendering（計(jì)算機(jī)圖形學(xué)ComputerGraphics）模型/特征的提取Model/FeatureExtraction（計(jì)算機(jī)視覺ComputerVision,

模式識(shí)別PatternRecognition）模型變換ModelTransformation（計(jì)算幾何ComputerGeometry）圖像變換ImageTransformation（圖像處理ImageProcessing）研究?jī)?nèi)容（學(xué)科）8RelationshipwithothersubjecComputerGraphics’Applications圖形用戶界面(GUI)計(jì)算機(jī)輔助設(shè)計(jì)與制造（CAD/CAM）娛樂游戲及計(jì)算機(jī)動(dòng)畫(entertainment/game/animation)

計(jì)算機(jī)藝術(shù)(computerart)地理信息系統(tǒng)(GIS)科學(xué)技術(shù)與信息可視化(Visualization)虛擬現(xiàn)實(shí)(VirtualReality)圖形用戶界面(GUI)……9ComputerGraphics’ApplicationResearchHotspot真實(shí)感顯示RealisticDisplay變形技術(shù)MorphingTechnology數(shù)字城市DigitalCity識(shí)別技術(shù)RecognizeTechnology基于圖像的建模ImageBasedModeling自然對(duì)象的建模NatureObjects’Modeling離散數(shù)據(jù)建模DiscreteDataModeling網(wǎng)絡(luò)漫游Web3D……10ResearchHotspot真實(shí)感顯示RealisticCRT(CathodeRayTube)Thebeamemitselectrons(cathode).Rayintensityiscontrolledbythegrid.Thefocusforcestheelectronstowardsaconvergencepath.Deflectorsforcetheraytopointataspecificscreenpoint.Theraystunsoverthephosphor.Phosphoremitslights.Phosphoremissiondeclinesveryfast(refreshmentrequired)Figure2-4ElectrostaticdeflectionoftheelectronbeaminaCRT11CRT(CathodeRayTube)Thebeam12121313當(dāng)前研究動(dòng)態(tài)(1)造型技術(shù)規(guī)則形體：歐氏幾何方法不規(guī)則形體：分形幾何方法、粒子系統(tǒng)、紋理映射實(shí)體造型基于物理的造型基于圖像的造型14當(dāng)前研究動(dòng)態(tài)(1)造型技術(shù)14當(dāng)前研究動(dòng)態(tài)(2)真實(shí)感圖形繪制技術(shù)光照明模型繪制算法快速算法基于圖像的繪制（非真實(shí)感圖形繪制技術(shù)）15當(dāng)前研究動(dòng)態(tài)(2)真實(shí)感圖形繪制技術(shù)15當(dāng)前研究動(dòng)態(tài)(3)人機(jī)交互技術(shù)(4)與計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的緊密結(jié)合遠(yuǎn)程醫(yī)療與診斷遠(yuǎn)程導(dǎo)航與維修遠(yuǎn)程教育16當(dāng)前研究動(dòng)態(tài)(3)人機(jī)交互技術(shù)16研究熱點(diǎn)ModelinggettingmodelsfromtherealworldAnimationphysicallybasedmodelingmotioncaptureRenderingmorerealistic:image-basedrenderinglessrealistic:impressionist,pen&ink17研究熱點(diǎn)Modeling17Ch2.IntroductiontoOpenGL/GLUTComputerGraphics18Ch2.IntroductiontoOpenGL/GLWhatisOpenGL?AsoftwareinterfacetographicshardwareGraphicsrenderingAPI(LowLevel)High-qualitycolorimagescomposedofgeometricandimageprimitivesWindowsystemindependentOperatingsystemindependent19WhatisOpenGL?AsoftwareinteOpenGLandGLUTGLUT(OpenGLUtilityToolkit)AnauxiliarylibraryAportablewindowingAPIEasiertoshowtheoutputofyourOpenGLapplicationNotofficiallypartofOpenGLHandles:Windowcreation,OSsystemcallsMousebuttons,movement,keyboard,etc…Callbacks20OpenGLandGLUTGLUT(OpenGLUtHowtoinstallGLUT?DownloadGLUT/resources/libraries/glut.htmlCopythefilestofollowingfolders:glut.h VC/include/gl/glut32.lib VC/lib/glut32.dll windows/system32/HeaderFiles:#include<GL/glut.h>#include<GL/gl.h>Includeglutautomaticallyincludesotherheaderfiles21HowtoinstallGLUT?DownloadGSampleProgram#include<GL/glut.h>#include<GL/gl.h>voidmain(intargc,char**argv){

intmode=GLUT_RGB|GLUT_DOUBLE;

glutInitDisplayMode(mode);

glutInitWindowSize(500,500);

glutCreateWindow(“Simple”);init();glutDisplayFunc(display);glutKeyboardFunc(key);glutMainLoop();

}22SampleProgram#include<GL/glOpenGLInitializationSetupwhateverstateyou’regoingtouseDon’tneedthismuchdetailunlessworkingin3Dvoidinit(void){

glClearColor(0.0,0.0,0.0,0.0);glViewport(0,0,width,height);glMatrixMode(GL_PROJECTION);glLoadIdentity();glOrtho(-10,10,-10,10,-10,20);glMatrixMode(GL_MODELVIEW);glLoadIdentity();glEnable(GL_LIGHT0);glEnable(GL_LIGHTING);glEnable(GL_DEPTH_TEST);}23OpenGLInitializationSetupwhGLUTCallbackfunctionsEvent-driven:ProgramsthatusewindowsInput/OutputWaituntilaneventhappensandthenexecutesomepre-definedfunctionsaccordingtotheuser’sinput

Events–keypress,mousebuttonpressandrelease,windowresize,etc.YourOpenGLprogramwillbeininfiniteloop24GLUTCallbackfunctionsEvent-GLUTCallbackFunctionsCallbackfunction:RoutinetocallwhenaneventhappensWindowresizeorredrawUserinput(mouse,keyboard)Animation(rendermanyframes)“Register”callbackswithGLUTglutDisplayFunc(my_display_func);glutIdleFunc(my_idle_func);glutKeyboardFunc(my_key_events_func);glutMouseFunc(my_mouse_events_func);25GLUTCallbackFunctions25EventQueueKeyboardMouseWindow….MainLoop()Eventqueuewindow_callback(){….{Mouse_callback(){….{Keypress_callback(){….{26EventQueueKeyboardMouseWindoRenderingCallbackCallbackfunctionwhereallourdrawingisdoneEveryGLUTprogrammusthaveadisplaycallbackglutDisplayFunc(my_display_func

);/*thispartisinmain.c*/voidmy_display_func(void){

glClear(

GL_COLOR_BUFFER_BIT

);

glBegin(

GL_TRIANGLE

);

glVertex3fv(v[0]); glVertex3fv(v[1]); glVertex3fv(v[2]);

glEnd();

glFlush();}27RenderingCallbackCallbackfunIdleCallbackUseforanimationandcontinuousupdateCanuseglutTimerFuncortimedcallbacksforanimationsglutIdleFunc(idle);voididle(void){

/*changesomething*/t+=dt;glutPostRedisplay();}28IdleCallbackUseforanimationUserInputCallbacksProcessuserinputglutKeyboardFunc(my_key_events);voidmy_key_events(charkey,intx,inty){

switch(key){ case‘q’:case‘Q’: exit(EXIT_SUCCESS); break; case‘r’:case‘R’: rotate=GL_TRUE; break; }}29UserInputCallbacksProcessusMouseCallbackCapturesmousepressandreleaseeventsglutMouseFunc(my_mouse);voidmyMouse(intbutton,intstate,intx,inty){if(button==GLUT_LEFT_BUTTON&&state==GLUT_DOWN){…}}30MouseCallbackCapturesmousepOpenGLGeometricPrimitivesThegeometryisspecifiedbyvertices.Therearetenprimitivetypes:31OpenGLGeometricPrimitivesTheAnExamplevoiddrawParallelogram(GLfloatcolor[]){glBegin(GL_QUADS);glColor3fv(color);glVertex2f(0.0,0.0);glVertex2f(1.0,0.0);glVertex2f(1.5,1.118);glVertex2f(0.5,1.118);glEnd();}32AnExamplevoiddrawParallelogrCh3.GeometricPrimitives

幾何圖元繪制ComputerGraphics33Ch3.GeometricPrimitives

幾何圖元Whatisrastering?Therasterdisplaytechnologyrequirestobrakedowngraphicprimitivesintopixelswithintheraster.Thisprocessiscalledrastering(柵格化).scanconversion（掃描轉(zhuǎn)換）Thisisusuallydonebythegraphicshardware.

However,itisusefultounderstandhowthisprocessworksinordertobeabletoachievegoodgraphicsperformance.34Whatisrastering?Therasterd掃描轉(zhuǎn)換將圖形數(shù)字化為一組像素強(qiáng)度值，并存放在幀緩存中。這個(gè)數(shù)字化過程稱為掃描轉(zhuǎn)換(scanconversion)基本圖元的掃描轉(zhuǎn)換就是計(jì)算出落在基本圖元上或充分靠近它的一串像素，并以此像素近似替代基本圖元上對(duì)應(yīng)位置在屏幕上顯示的過程。

35掃描轉(zhuǎn)換將圖形數(shù)字化為一組像素強(qiáng)度值，并存放在幀緩存中。這個(gè)Line-DrawingAlgorithms1)DDAalgorithm2)Bresenhamalgorithm36Line-DrawingAlgorithms36DDAalgorithm(p94)Thedigitaldifferentialanalyzer(DDA，數(shù)字微分分析法)isascan-conversionlinealgorithmbasedoncalculatingdifferencesbasedonthe

slopeoftheline.37DDAalgorithm(p94)ThedigitalDDAalgorithmAlinecanbedescribedbytheequationy=m?x+bWithoutlossofgenerality,wecanassume0<m<1.Otherwisewecanmirrororinterchangethecoordinatesasneeded.Now,weneedtocomputetheseriesofpoints(xk,yk),k=0,…,nthatbestdescribestheline.38DDAalgorithmAlinecanbedesDDAalgorithmSince0<m<1,wecanincreasethex-coordinateby1andthencalculatethey-coordinateaccordingly.Sincetheslopeforastraightlineisthesamethroughouttheentirelinethefollowingequationholds:This,then,allowsustocomputethey-coordinate;byroundingtheresulttotheclosestintegervaluewegetthenextpoint(xk,yk).39DDAalgorithmSince0<m<1,wec40DDAalgorithm’spseudocode

voidDDA_line(intx0,inty0,intx1,inty1){intdx=x1–x0,dy=y1–y0,k;floatxIncrement,yIncrement,steps,x=x0,y=y0;if(fabs(dx)>fabs(dy)) steps=fabs(dx);elsesteps=abs(dy);xIncrement=(float)(dx)/steps;yIncrement=(float)(dy)/steps;For(k=0;k<steps;k++){Setpixel(round(x),round(y);x+=xIncrement;y+=yIncrement;}4040DDAalgorithm’spseudocodevDDAalgorithmForm>1,swapthecoordinatesaxes.41DDAalgorithmForm>1,swapthe42AdvantageandDisadvantageforDDAAdvantage優(yōu)點(diǎn):-消除乘法.Disadvantage缺點(diǎn): -浮點(diǎn)數(shù)相加積累誤差，對(duì)長(zhǎng)線段而言，引起像素點(diǎn)位置與理想位置的偏移. -需要圓整操作和浮點(diǎn)計(jì)算，消耗時(shí)間。4242AdvantageandDisadvantagefDDAalgorithmTheDDAalgorithmeasilycanbeextendedtoothergraphicsprimitives,suchascircles,ellipses,etc.DDAisGood,butStillNotFastEnough!Floatingpointmultiplygonefrom"y=mx+b"ButloopstillhasafloatingpointaddAndaround()WECANDOBETTER!Bestperformance:Onlyintegeradds/subtractsinsideloopTheBresenhamalgorithmallowsustodojustthat.43DDAalgorithmTheDDAalgorithmBresenhamalgorithm(p95)Again,weassumewithoutlossofgeneralitythattheslopeis0<m<1;hence,thelineislocatedinthefirstoctant.Ideanomatterwhattheslopeis,weincreaseonecoordinatebyone(x-coordinate)similartotheDDAalgorithm.Theothercoordinate(y-coordinate)iseitherincreasedbyoneaswellorleftunchanged,dependingonthedistancetothenextgridpoint.44Bresenhamalgorithm(p95)AgainBresenhamalgorithmInordertodecidewhichpointtopick,weintroducean

error

Ewhichisproportionaltothedifferencebetweentheexactpointonthestraightlineandthecenterbetweenthetwopossiblegridpointsontheraster.

ThesignofEcanthenbeusedasacriterionforthedecision.Eitherpoint1orpoint2isdrawn,

dependingon

whichisclosertothestraightline.dupperyxkxk+1=xk+1

dlowerykyk+1linepath45BresenhamalgorithmInordertoBresenhamalgorithmdupperyxkxk+1=xk+1

dlowerykyk+1linepath46BresenhamalgorithmdupperyxkxkBresenhamalgorithmIfwescaleEusingΔx,thenwecaneliminatem.47BresenhamalgorithmIfwescaleBresenhamalgorithmCanEkbecaculatedrecursively?

Yes!48BresenhamalgorithmCanEkbecBresenhamalgorithmNote:

ONLYintegeroperations

areused!BresenhamAlgorithm//

(x1,y1),(x2,y2),x1<x2x=x1;y=y1;dx=x2-x1;dy=y2-y1;e=2*dy-dx;setPixel(x,y);while(x<x2){x=x+1;if(e<0){

e=e+2*dy;}else{

e=e+2*dy-2*dx;

y=y+1;}setPixel(x,y);}49BresenhamalgorithmNote:

BresenhamalgorithmxkEkplot(xk,yk)dx=5,dy=4,2*dy=8,2*dy-2*dx=-2E0=2*dy-dx=3if(e<0){e=e+2*dy;}else{e=e+2*dy-2*dx;y=y+1;

}

xkEkplot(xk,yk)03(0,0)11(1,1)2-1(2,2)37(3,2)45(4,3)53(5,4)50BresenhamalgorithmxkEkplot(xMidpointCircleAlgorithm(Hearn&Baker,Section3-9,P103)

ExtensionofBresenhamideasCircleequation:

x2+y2=r2Defineacirclefunction:f(x,y)=x2+y2-r2f(x,y)=0(x,y)isoncirclef(x,y)<0(x,y)isinsidecirclef(x,y)>0(x,y)isoutsidecircle51MidpointCircleAlgorithm(HearMidpointCircleAlgorithmAssumethatwe’vejustplotted(xk,yk)Steppinginx,nextpixeliseither:(xk+1,yk)--

the“top”case(xk+1,yk-1)--

the“bottom”caseLookatmidpoint:

yk

xk

xk+1

xk+2

yk-152MidpointCircleAlgorithmAssumMidpointCircleChoicesInside:f(x,y)<0chooseupperpixelOutside:f(x,y)>0chooselowerpixel53MidpointCircleChoicesInside:MidpointCircleChoicesEvaluatefatmidpoint(xk+1,yk-1/2)DefinePredictor:Pk=f(xk+1,

yk-1/2)

Pk<0inside(choosetoppixel)Pk>0outside(choosebottompixel)

Pk=(xk+1)2+(yk-1/2)2-r2

=xk2+2xk+

5/4

+yk2-yk-r2

!!!AsforBresenham,trytogetarecurrencerelationforP.54MidpointCircleChoicesEvaluatMidpointCircleChoicesTopCase:(xk+1=xk+1,yk+1=yk)△△△55MidpointCircleChoicesTopCasMidpointCircleChoicesBottomCase:(xk+1=xk+1,yk+1=yk-1)△△△56MidpointCircleChoicesBottomMidpointCircleAlgorithmInitialPk

:57MidpointCircleAlgorithmInitiMidpointCircleAlgorithmInitialPk

:

P0=1-rTopCase:

(xk+1=xk+1,yk+1=yk)

Pk+1=PK+2xk+1+1BottomCase:

(xk+1=xk+1,yk+1=yk-1)

Pk+1=PK+2(xk+1-yk+1)+1

yk

xk

xk+1

xk+2

yk-158MidpointCircleAlgorithmIniti59voidMidPoint_Circle(intx0,inty0,doubleradius){intx,y,h;x=0;y=int(radius);h=1-int(radius);

Set8Pixel(x0,y0,x,y);//CirclePlotPointswhile(x<y){x++;if(h<0)h+=2*x+1;else{y--;h+=2*(x-y)+1;}

Set8Pixel(x0,y0,x,y);}}5959voidMidPoint_Circle(intx0,CirclesnotcenteredonoriginNewSet8Pixel()Function:60CirclesnotcenteredonoriginCh4.AttributesofGeometricPrimitives

幾何圖元的屬性ComputerGraphics61Ch4.AttributesofGeometricP1.AreaFillAlgorithms

(區(qū)域填充算法)(

Hearn&Baker,

Section3-14/15,P123;Section4-10/11/12/13,P196)621.AreaFillAlgorithms

(區(qū)域填充算Scan-linemethods

(掃描線填充算法)WorksrowbyrowfromtoptobottomApixelinsidethecurrentscanlineisonlydrawnifitislocatedinsidethepolygon.逐點(diǎn)判斷法Greedyapproachveryslow!!!63Scan-linemethods(掃描線填充算法)WorCoherenceEdgeCoherence(邊的連貫性)某條邊與當(dāng)前掃描線相交，也可能與

下一條掃描線相交Scan-lineCoherence(掃描線的連貫性)當(dāng)前掃描線與各邊的交點(diǎn)順序與下一

條掃描線與各邊的交點(diǎn)順序可能相同

或類似SpanCoherence(區(qū)間的連貫性)同一區(qū)間上的像素取同一顏色屬性64CoherenceEdgeCoherence(邊的連貫性Scan-linemethods:ExampleExample:

Scanliney=2:

-intersectionwithpolygonatx=1,8-wecansubdividethescanlineinto3sections:x<1:outsidethepolygon1≤x≤8:

inside

thepolygonx>8:outsidethepolygon65Scan-linemethods:ExampleExaScan-linemethods:ExampleExample:

Scanliney=4:

-intersectionwithpolygon

atx=1,4,6,8-wecansubdividethescanlineinto5sections:x<1:outsidethepolygon1≤x≤4:

inside

thepolygon4<x<6:outsidethepolygon6≤x≤8:

inside

thepolygonx>8:outsidethepolygon66Scan-linemethods:ExampleExaScan-linemethodsThesimpleorderededgelistalgorithm

(有序邊表算法)

Method:preprocessing+scanconversion67Scan-linemethodsThesimpleorOrderedEdgeListAlgorithmPreprocessing(1)Determineforeveryedgeofthepolygontheintersectionswiththescanlinesatthepixelcenters;ignorehorizontaledges.(2)Storeeveryintersection(x,y)inalist.(3)Sortlistfromtoptobottom,lefttoright.68OrderedEdgeListAlgorithmPreOrderedEdgeListAlgorithmScanconversion(1)Considerpairsofsubsequentintersections(x1,y1)and(x2,y2)inthelist,i.e.listelement1and2,listelement3and4,…)(2)Duetothepreprocessingstep,weknowthatforeveryscanliney:y=y1=y2,x1≤x2(3)Drawallpixelsalongthescanlineyforwhich:x1≤x<x2

foreveryintegernumberx.69OrderedEdgeListAlgorithmScaExample:Preprocessing70Example:Preprocessing70Example：ScanConversion71Example：ScanConversion71Seedfillmethods

(種子填充算法)72Seedfillmethods

(種子填充算法)72ConnectednessofAreas4-connected:

connectedhorizontallyorvertically（四連通）8-connected:additionallydiagonallyconnected（八連通）(區(qū)域的連通性)73ConnectednessofAreas4-connecSimpleSeedFillAlgorithm4directionsofmovementaredefinedbyboundaryFILO/LIFONote:

somepixelsmaybestoredinthestack

(andalsocolored)multipletimes.BoundaryFillFloodFill74SimpleSeedFillAlgorithm4diSimpleFlood-FillAlgorithm

voidFloodFill4(intx,inty,intnew,intold)

{

intcolor;

getPixel(x,y,color);

if(color=old)

{

setPixel(x,y);FloodFill4(x+1,

y,

new,old);

//

right

FloodFill4(x,

y+1,

new,old);

//

up

FloodFill4(x–1,

y,

new,old);

//leftFloodFill4(x,

y–1,

new,old);//down

}

}75SimpleFlood-FillAlgorithmvoSeedfillmethods:Example-1

(numbersindicatelocationofpixelswithinthestack)76Seedfillmethods:Example-1Seedfillmethods:Example-1

(numbersindicatelocationofpixelswithinthestack)travel:→R→U→L→Dstack:FILOsomepixelsmaybestoredinthestack

(andalsocolored)multipletimes.77Seedfillmethods:Example-1Seedfillmethods:Example-2areawithhole78Seedfillmethods:Example-2a5.Antialiasing(反走樣)(Hearn&Baker,Section4-17,P214)795.Antialiasing(反走樣)(Hearn&AliasingandAntialiasingwhatisaliasing?whatisthereasonforaliasing?whatcanwedoagainstit?80AliasingandAntialiasing80AliasingGenerally,aliasingeffects

areerroneousreconstructionofa(continuous)signalduesamplingratewithatoolowfrequency(seealsoNyquisttheorem).用離散量(像素)表示連續(xù)的量(圖形)而引起的失真，稱為走樣或稱為混淆。81AliasingGenerally,aliasingefReasonsforaliasingerrorsthatarecausedbythediscretization

ofanalogdatatodigitaldata

toobadresolution

toofewcolors

toofewimages/sec

geometricerrors

numericerrors82ReasonsforaliasingerrorsthaAliasingAliasingartifactsincomputergraphicsTextureartifacts(e.g.checkerboard)Staircasingartifactswhenrasteringcurves?jaggedlinesDisappearanceofobjectswhicharesmallerthanapixelDisappearanceofsmall,skinnyobjectsLossofdetailincompleximages“Flipping”smallobjectsduringmotion/animation83AliasingAliasingartifactsinAliasingStaircasingartifacts,jaggededgesThepreviouslydiscussedtechniquesforrastering

straightlinesandcurvesresultinstaircasingartifacts(left)sinceitisonlypossibletodrawpointsatfixedrasterlocations.Theselocationsaregenerallynotidenticaltothereal/ideallocationsofthesepoints.階梯狀的、鋸齒狀的84AliasingStaircasingartifactsVariousAliasingEffects85VariousAliasingEffects85AliasingfromtoofewColorsartificialcolorborderscanappear86AliasingfromtoofewColorsarAliasinginAnimationsjumpingimages"worming"backwardsrotatingwheels87AliasinginAnimationsjumpingAntialiasingAntialiasing(反走樣)

methodsaretechniques(e.g.over-sampling,filtering)thattrytominimizethealiasingeffect.EliminatingthealiasingeffectisoftenNOTpossible

(alreadyfromatheoreticalpointofview).88Antialiasing88ShannonSamplingTheorem89ShannonSamplingTheorem89SolutionsagainstAliasing?1.improvethedeviceshigherresolutionmorecolorlevelsfasterimagesequence2.improvetheimages=antialiasingpost-processingpre-filteringsoftwareexpensive90SolutionsagainstAliasing?1.AntialiasingStrategiessupersamplingstraight-linesegmentsareasamplingstraight-linesegmentsfilteringtechniquescompensatingforline-intensitydifferencesantialiasingareaboundaries(adjustingboundarypixelpositions)adjustingboundarypixelintensity91AntialiasingStrategiessupersaAntialiasing:SupersamplingLinesSupersampling(超級(jí)采樣)92Antialiasing:SupersamplingLiAntialiasing:SupersamplingLines93Antialiasing:SupersamplingLiAntialiasing:AreaSamplingLinescalculatethepixelcoverageexactlycanbedonewithincrementalschemes

unweighted

area

sampling(非加權(quán)區(qū)域采樣)

weightedareasampling

(加權(quán)區(qū)域采樣)94Antialiasing:AreaSamplingLiUnweighted

Area

SamplingSettingintensityproportionaltotheamountofareacovered.theintensitiesofneighboringpixelschangecontinuously95Unweighted

Area

SamplingSettiUnweighted

Area

Sampling兩點(diǎn)認(rèn)識(shí):(1)像素不是點(diǎn)，一個(gè)小區(qū)域，形狀由硬件決定(如正方形)；(2)直線有寬度。掃描轉(zhuǎn)換時(shí)兩點(diǎn)假設(shè):(1)象素是數(shù)學(xué)上抽象的點(diǎn)，它的面積為0，它的亮度由覆蓋該點(diǎn)的圖形的亮度所決定；(2)直線段是數(shù)學(xué)上抽象直線段，它的寬度為0。反走樣方法:

把像素看作一個(gè)平面區(qū)域進(jìn)行采樣(1)將直線段看作具有一定寬度的狹長(zhǎng)矩形；(2)當(dāng)直線段與像素有交時(shí)，求出兩者相交區(qū)域的面積；(3)根據(jù)相交區(qū)域的面積，確定該象素的亮度值。相鄰兩個(gè)象素的灰度之間有一個(gè)平緩的過渡，淡化了鋸齒狀的邊界。96Unweighted

Area

Sampling兩點(diǎn)認(rèn)識(shí):WeightedAreaSampling權(quán)函數(shù)：

或經(jīng)驗(yàn)值，可自定義；直線與像素相交，相交區(qū)域?yàn)锳’，則直線對(duì)象素的亮度的貢獻(xiàn)為：W(X,Y)=1：非加權(quán)情形。97WeightedAreaSampling權(quán)函數(shù)：W(X,WeightedAreaSampling加權(quán)區(qū)域采樣算法（直線段情形）：求直線段與像素的相交區(qū)域A’；計(jì)算的值；用上面的值乘以像素的最大灰度值，即為像素的顯示灰度值。98WeightedAreaSampling加權(quán)區(qū)域采樣算法WeightedAreaSampling加權(quán)區(qū)域采樣的離散算法：分割像素成n個(gè)子像素{Ai},面積為1/n，每個(gè)子像素對(duì)原像素的亮度的貢獻(xiàn)為

將各權(quán)值保存在一張加權(quán)表中。求所有子像素中心落在直線段內(nèi)的子像素集；計(jì)算這些子像素對(duì)原像素亮度的和例：加權(quán)表的取法99WeightedAreaSampling加權(quán)區(qū)域采樣的離Antialiasing:FilteringTechniquescontinuousoverlappingweightingfunctionstocalculatetheantialiasedvalueswithintegrals100Antialiasing:FilteringTechniAntialiasing:IntensityDifferencesunequallinelengthsdisplayedwiththesamenumberofpixelsineachline/rowhavedifferentintensitiesproperantialiasing

compensatesforthat!101Antialiasing:IntensityDifferAntialiasingAreaBoundaries102AntialiasingAreaBoundaries10AntialiasingAreaBoundariesalternative1:supersamplingadjustingpixelintensitiesalonganareaboundary103AntialiasingAreaBoundariesalAntialiasingAreaBoundariesalternative2:likemidpointlinealgorithm

adjustingboundarypixelintensity104AntialiasingAreaBoundariesal105105Antialiasing反走樣點(diǎn)、直線、多邊形的抗鋸齒

glEnable(GL_POINT_SMOOTH);glHint(GL_POINT_SMOOTH_HINT,GL_NICEST);glEnable(GL_LINE_SMOOTH);glHint(GL_LINE_SMOOTH_HINT,GL_NICEST);glEnable(GL_POLYGON_SMOOTH);glHint(GL_POLYGON_SMOOTH_HINT,GL_NICEST);GL_NICEST—讓OpenGL選擇效果最佳算法

GL_FASTEST—讓OpenGL選擇速度最快算法106Antialiasing反走樣點(diǎn)、直線、多邊形的抗鋸齒1Ch5.InteractiveinputmethodComputerGraphics107Ch5.InteractiveinputmethodCReshapeCallbackVoidglutReshapeFunc(void(*f)(intwidth,intheight))當(dāng)用戶用鼠標(biāo)改變窗口的大小時(shí)，調(diào)用函數(shù)f,新窗口的寬和高(width,height)值返回給函數(shù)f該函數(shù)調(diào)用放在主程序main()中Glut有一個(gè)默認(rèn)的reshapecallback當(dāng)默認(rèn)的reshapecallback不滿足需求時(shí)，我們必須編寫自己的reshapecallback108ReshapeCallbackVoidglutReshaReshapeexamplevoidReshape(intw,inth){glMatrixMode(GL_PROJECTION);glLoadIdentity();glViewport(0,0,w,h);gluOrtho2D(0,w,0,h);}首先在主程序中加上reshapecallback調(diào)用glutReshapeFunc(myreshape);109ReshapeexamplevoidReshape(inKeyboardandMouseglutKeyboardFunc(mykeyboard)glutSpecialFunc(myspecialkey)glutMouseFunc(mymouse)glutMotionFunc(mymousemotion)glutPassiveMotionFunc(mymousemotion2)glutEntryFunc(mymouseentry)110110KeyboardandMouseglutKeyboardOpenGL和GLUT坐標(biāo)系OpenGLx右為正

y上為正適用gl和glu開頭的函數(shù)GLUT和Windows系統(tǒng)中左上角為原點(diǎn)

x右為正

y下為正適用glut開頭的函數(shù)111OpenGL和GLUT坐標(biāo)系OpenGL111MouseCallbackexample例，鼠標(biāo)左鍵繼續(xù)用于程序退出，鼠標(biāo)右鍵用于給出矩形的左下角和右上角坐標(biāo).右鍵首先單擊一次可獲取對(duì)角線一角坐標(biāo)右鍵再單擊一次可獲取對(duì)角線另一角坐標(biāo)，開始畫矩形。。。如何設(shè)計(jì)程序？112MouseCallbackexample例，鼠標(biāo)左鍵繼續(xù)drawingpolicy

GLintx1,y1,x2,y2;inthh;/globalforviewportheight*/voidmymouse(intbutton,intstate,intx,inty){staticboolfirst=true;if(state==GLUT_DOWN&&button==GLUT_LEFT_BUTTON)exit(0);if(state==GLUT_DOWN&&button==GLUT_RIGHT_BUTTON){if(first){x1=x;y1=hh-y;first=!first;}else{first=!first;x2=x;y2=hh-y;}glutPostRedisplay();}}voidmydisplay(){glClear(GL_COLOR_BUFFER_BIT);glRectf(x1,y1,x2,y2);}113drawingpolicyGLintx1,y1,x2,Howtogetwindow’ssize

intww,hh;/*globalsforviewportheightandwidth*/voidmyReshape(GLsizeiw，GLsizeih){glMatrixMode(GL_PROJECTION);glLoadIdentity();glViewport(0,0,w,h);gluOrtho2D(0.0,(GLfloat)w,0.0,(GLfloat)h);ww=w;hh=h;}114Howtogetwindow’ssizeintwIdleCallbackexample例，實(shí)現(xiàn)正方形不停旋轉(zhuǎn)。glutIdleFunc(myidle);voidmyidle(){thetha+=2.0;if(theta>=360.0)theta-=360.0;glutPostRedisplay();}115IdleCallbackexample例，實(shí)現(xiàn)正方形不停

#defineDEG_TO_RAD1.0/57.29578#include<math.h>GLfloattheta=0.0voidmydisplay(){

glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_POLYGON);

glVertex2f(cos(DEG_TO_RAD*theta),sin(DEG_TO_RAD*theta);glVertex2f(-sin(DEG_TO_RAD*theta),cos(DEG_TO_RAD*theta);glVertex2f(-cos(DEG_TO_RAD*theta),-sin(DEG_TO_RAD*theta);glVertex2f(sin(DEG_TO_RAD*theta),-cos(DEG_TO_RAD*theta);glEnd();glFlush();}116116《計(jì)算機(jī)圖形學(xué)》

總復(fù)習(xí)

ComputerGraphics117《計(jì)算機(jī)圖形學(xué)》

總復(fù)習(xí)ComputerGraphicsCh1.asurveyofCSComputerGraphics118Ch1.asurveyofCSComputerGrGraphicsConceptInnarrowsense位圖(bitmap)-圖像Image，矢量圖(vectorgraph)GraphicIngeneral,graphicscanbeanyobjectwhichisabletogivevisionimpressioninman’svisionsystem.Itincludevariousgeometrygraphics,views,pictures,patterns,andimages.119GraphicsConceptInnarrowsens凡是能夠在人的視覺系統(tǒng)中形成視覺印象的客觀對(duì)象都稱為圖形。(1)自然景物(2)照片和圖片(3)工程圖、設(shè)計(jì)圖和方框圖(4)人工美術(shù)繪畫、雕塑品(5)用數(shù)學(xué)方法描述的圖形

（包括幾何圖形、代數(shù)方程、分析表達(dá)式或列表所確定的圖形）什么是圖形？120凡是能夠在人的視覺系統(tǒng)中形成視覺印象的客觀對(duì)象都稱為圖形。什Vectorgraphandbitmap(1).vectorgraphAnycurvesareapproachedwithmanyshortlines(2).bitmapEverycurvemustbeconsistofseveralpixels121Vectorgraphandbitmap(1).vect幾何要素：刻畫對(duì)象的輪廓、形狀等(幾何模型)非幾何要素:刻畫對(duì)象的顏色、材質(zhì)等(物理屬性)計(jì)算機(jī)圖形學(xué)中的圖形要素122幾何要素：刻畫對(duì)象的輪廓、形狀等(幾何模型)計(jì)算機(jī)圖形學(xué)中的WhatisComputerGraphics？Thetechnologyforgeneratingtheimagesonthecomputerscreenwithalgorithmsandprogramsiscalledthecomputergraphics.計(jì)算機(jī)圖形學(xué)(ComputerGraphics,CG)是研究怎樣用數(shù)字計(jì)算機(jī)生成、處理和顯示圖形的一門學(xué)科。123WhatisComputerGraphics？TheRelationshipwithothersubjects數(shù)字圖像DigitalImages數(shù)據(jù)模型DataModels圖像生成ImageRendering（計(jì)算機(jī)圖形學(xué)Com