CENG315:ComputerGraphics
Assignment3–Tessellation&Shading
Deadline:December29,2016
• Youcanworkinpairs.
• Don’twaitforthelastdaystostartyourhomework.
• Isuggestyoutoreadthewholeassignmentbeforestartingyourwork.
Inthisassignment,youwill:
a) generateasphere
b) shadethesphereusingGouraudandPhongshadingmodels
c) providelightandmaterialcontrols.
Whatyoualreadyhave:
a) coordinateaxesandatriangle
b) shaderswitchmechanism
c) allcontrolsfromthepreviousassignment(transformationandcamera
parameters).
Fordetailedexplanationsseebelow.
Downloadtheinitialcodeasazipfileasyoudidinthepreviousassignment.
Initialcode:ybu.edu.tr/abulbul/contents/files/assignment3.zip
Whatyouhaveinthatcode.
• Common/MV.js:Includesutilityfunctionssuchastranslate(),scalem(),
normalMatrix()etc.EdAngelprovidedthisfile.Youdon’tneedtochange
thisfile.
• assignment3/shading_sphere.html:IncludestheGUIelementsand
shaders.Youneedtowriteyournamesandids.Therearetwominimal
shadersthatyoucanswitch.Currently,GouraudpaintsRedandPhong
paintsBlue.Youneedtomodifytheseshaderstoperformcorrectly.
• assignment3/shading_sphere.js:Mostofthethingsarehandledhere.
Halfofthecontrolsalreadywork.Insteadofasphere,Idrawatriangleso
thatyouseesomethingwhenyouopenthecodefirsttime.Scale,rotate,
translate,cameraposition,targetposition,andFOVYarealready
functional.Youneedtoimplementallothercontrols.
Tipsforhowtodebug:IfyouuseChrome,rightclickonthepageandselect
inspect.
• Intheconsoletabyoucanseeerrorsandwarningsthatarethrownby
webGL.
• Youcanusetheconsoletabtoprintvariablesetc.Iputanexampleofthat
intothecode(Also,seeFigure1.)
console.log(spherePoints);
Figure1:ConsoleinChrome
Whattodo
1)Drawingasphere.
Hereyouwilldrawaunituvsphere(radius=1).Notthespheregivenin
shadedSphere1.htmlinChapter6.Youwillconstructthesphereaslongitudes
andlatitudes.Simply,numberofstacksisthenumberofhorizontallineslike
latitudesandnumberofslicesaretheverticallineslikelongitudes.(SeeFigure
below)
Figure2:uv-sphere.Youwillgenerateaspherebytrianglesasshownontheleft.Foreachvertex
youcancalculatepositionandnormalsusingtwoangles;elevationandazimuth.Radiuswillbe1.
Youcanthinkofthatsphereasmultiplecirclesplacedontopofeachother.You
needtwoforloops,oneiteratesoverstacksandtheotheriteratesoverslices.In
theouterforloopyoucancalculatetheheightofacircle(usingelevationangle)
andintheinnerloopyoucanfindthecoordinatesofeachvertex(usingazimuth
angle).Thinkcarefullyandusesincostofindthevertexpositions.
Yoursphereisplacedattheorigin.Therefore,positionsandnormalsarethe
same.Theonlydifferenceisthelastcomponent(w)is1forpositionand0for
normal.
Also,youneedtogeneratetriangles.Youcancheckthegiveninitialcodetodraw
thetriangleandcubev.jsinCh4(fromEdAngel’scodesamplesinhiswebsite).
Checkhowindicesareusedintheseexamples.
WhenuserchangesnumberofstacksorslicesusingtheGUI,youneedto
regeneratethesphereaccordingly.
2)Shading
Toeaseyourwork,I’veprovidedtwosimpleshadersthatyoucanswitch
throughGUI.OneoftheseshaderspainttheshapewithRedandtheotherPaints
withBlue.YouneedtomodifytheseshaderssothatonewilluseGouraud
ShadingandtheotherwillusePhongShading.Youdon’tneedtodoanythingfor
wireframeshading.Itisgiven.
YoucancheckshadedSphere1.htmlinChapter6forGouraudshadingand
shadedSphere2.htmlforPhongshading.BothfromEdAngel’scodesamples.
Youalsoneedtocheckthejavascriptfilestoseehowtheparametersarepassed
totheshader.
3)Lightingandmaterials
Allcontrolsshouldbefunctional.LightpositionwillbecontrolledbyGUIsliders.
AlsoMaterialpropertieswillbeadjustedusingtheR,G,B,diffuse,specular,
ambientandbetavaluescomingfromtheGUI.
R,G,Bvaluescanbeusedtomodifythediffuseandambientmaterialcoefficients.
Youcanassumethatthelightiswhite(1,1,1).
Imagesbelowshowafewexamplesofwhatyouneedtogetattheend.