1

Lesson7:Cameras
Lesson:IntroductiontoCameras
[http://commons.wikimedia.org/wiki/File:Swampy_fisheye_lens_(crop).jpg]
[http://commons.wikimedia.org/wiki/File:Camera_focal_length_distance.giftwiceanimated]
[
http://commons.wikimedia.org/wiki/File:ElevationPanth%C3%A9onLanterneParisFrance1881
.jpg]

[projections]
[fisheyeperspectiveorthographic]

Thereareallsortsofdifferentwaystoviewtheworld.Herearethree:afisheyelens,a
perspectiveview,andanorthographicview.Thesearealldifferenttypesofprojections.A
projectionmapslocationsintheworldtolocationsonthescreen.
Afisheyeprojectionispossibletosimulateincomputergraphicshey,justaboutanythingcan
besimulatedincomputergraphicsbutitsrarelyusedinpractice.Theseothertwoprojections
aremorepopular,foranumberofreasons.First,theyactsimilarlytohowacameracapturesa
picture,sowereusedtothem.Straightlinesstaystraight,unlikethefisheyelens.Allinall,the
mathissimpler.
Aperspectiveviewiswhatweusuallyassociatewithseeingtheworld.Distantobjectsget
1

smaller.
Anorthographicviewismuchmorecommonindesignsoftware.Inanorthographicview,
objectsdonotgetsmallerastheygetmoredistant.Parallellinesintherealworldstayparallelin
thisview,asopposedtoperspective.Inperspective,suchlinesmeetatvanishingpoints.[first
andlastwellsayaboutthem.]
[AdditionalCourseMaterials:
The[fisheyelens](http://commons.wikimedia.org/wiki/File:Swampy_fisheye_lens_(crop).jpg),
[perspective](http://commons.wikimedia.org/wiki/File:Camera_focal_length_distance.gif),and
[theelevation
drawing](http://commons.wikimedia.org/wiki/File:ElevationPanth%C3%A9onLanterneParisFra
nce1881.jpg)arefromWikimediaCommons.
]

Lesson:OrthographicCamera
[
http://commons.wikimedia.org/wiki/File:Umbria_Plantation__Architectural_drawing_of_front_and
_east_elevations.png]

Thisorthographicprojectionisntnormallyhowwedirectlyperceivetheworld,butitsaformwe
commonlyusenonetheless.Forexample,assemblyinstructionsusuallyshowanorthographic
view.Architecturalplansshowingafront,side,ortopviewofabuildingusethissortof
projection.Youcantakemeasurementsoffthesetypesofviews.Havingthedistortioncausedby
perspectiveprojectionwouldmostlikelyhinderourunderstandingofwhatwereseeing.
[http://commons.wikimedia.org/wiki/File:All_hexayurts_web_dimensions.png]

Anorthographiccameracanbeusedtoexamineobjectsfromanglesotherthandirectlyalong
anaxis.
Ademousinganorthographiccamerafollows.IfindthatImsousedtoseeingwitha
perspectiveviewthatIperceiveanopticalillusion.IfIzoomoutbyusingthesliderandlookatthe
wholescene,myvisualsystemtellsmethatthefrontedgeofthegridisdefinitelyshorterthan
thebackedge.Tryityourselfandletmeknowintheforumswhatyouthink.
[AdditionalCourseMaterials:
Seethe[Wikipediaarticleongraphical
projections](http://en.wikipedia.org/wiki/Graphical_projection)formoreonthissubject,includinga
widerangeofotherarchitecturalprojections.
ImagesfromWikimediaCommons:The[Umbria
Plantation](http://commons.wikimedia.org/wiki/File:Umbria_Plantation__Architectural_drawing_o
f_front_and_east_elevations.png)and[hexayurtshelter](
http://commons.wikimedia.org/wiki/File:All_hexayurts_web_dimensions.png)imagesarefrom
WikimediaCommons.
]
4

Demo:OrthographicProjection
[unit7orthographics_demo.js]

Lesson:Three.jsOrthographicCamera
Todefineanorthographiccamerayoudotwooperations.Oneistodefineavolumeinspace,
theotheristomoveandorientthatvolumeofspaceasyouwish.
viewSize=900
aspectRatio=window.innerWidth/window.innerHeight
//OrthographicCamera(left,right,top,bottom,near,far)
camera=newTHREE.OrthographicCamera(
aspectRatio*viewSize/2,aspectRatio*viewSize/2,
viewSize/2,viewSize/2,
1000,1000)

[drawboxshowingthisview,showviewSizeandaspectRatio*viewSize,andnearandfar.Put
theboxinaseparatelayer,aswellmoveitlater.Makesitniceandcanonical.DEFINITELYPUT
LABELSINSEPARATELAYERS.]

Thisfirstpieceofcodecreatestheorthographiccameraanddefinestherectangularboxof
spaceitisviewing.Thisboxisdefinedbythelefttorightwidthlimits,toptobottomheightlimits,
andfronttobacklimits,allinworldspacecoordinates.ThesecorrespondtotheX,Y,andZ
axes.Thecameracanbethoughtofasbeingpositionedonthe+Zendoftheboxdefined,
lookingdowntheZaxis,withupbeingthe+Ydirection,asusual.
Forconvenience,IdefineaviewSize,whichishowmuchverticalspaceIdliketofitintheview.
TheaspectRatioisjustthat,whatscalledtheaspectratioofthewindow.Itdescribeshow
widetheviewiscomparedtohowhighitis.Forexample,ifyourviewwas1000pixelswideand
500high,theaspectratiowouldbeequalto2.Inotherwords,youdwantyourboxtwiceaswide
asitistall.Ifyoudont,youllgetastretchedviewoftheworld,whichisprobablynotwhatyou
wanted.Whatallthiscodedoesisdefineaboxinspace,inthiscaseithappenstobecentered
aroundtheorigin.
Bytheway,Iveseensomedemosjustusethecanvaswidthandheightdirectlyasthe
camerassize.Dontdothis:youresettingthecamerassizeinyoursceneinworldcoordinates,
whichismostdefinitelynotthesameasthewidthandheightofyourcanvasinpixels.
newpage

Ifwestoppedhere,wedgetasideviewofthebird.

Whatwednowliketodoispositionandorientthiscamerainspacetomakeamoreinteresting
view.
camera.position.set(890,600,480)
cameraControls=newTHREE.OrbitAndPanControls(camera,renderer.domElement)
cameraControls.target.set(0,310,0)

Thiscodedoesthat.Thefirstlinemovestheboxbythisamount,itsatranslation,thesameas
foranormalobject.ThecameraControlscodedoestwothings.First,itsetsupwhatsortof
mousecontrolleryouwantforthecamera,ifany.Icameupwiththiscustom
OrbitAndPanControlsclass,extendingtheOrbitControlsclassIfoundinthree.js.Thiscontrol
keepsthecameraorientedsothatthe+Yaxisisalwaysup.Foranmoreunconstrainedbut
trickiertousecontrol,theTrackballControlsclasscouldbespecifiedinstead.
Ineithercase,thenextlinesetsthetargetforthecamera.Thetargetisthelocationbeinglooked
at.ThisdefinesanewZaxisdirectionforthecamera.The+Yaxisiskeptpointingupasbestas
possiblewelltalkaboutthatlater,whenwelookatthematricesformingthiscamera.
Oncewevepositionedthisboxinspace,itdefineswhatpartofthescenewewanttorender.
Whateverhappenstobeinsidethisboxiswhatwellseeonthescreen.Thezbufferisapplied
asusualsothatobjectsthatareclosertothecameracoverupwhatsbehindthem.

Thisisjustanoverviewofthebasicidea:thecameradefinesachunkofspacedefiningitslimits,
andthischunkthengetspositionedandorientedinspacetomakeanimage.Illgooverthis
processindetailinthefollowinglessons.

Lesson:LookAt
[drawmovingthecameratoalocationfirst,thendefiningtheboxitlooksat.Leaveroomtoright
forcrossproductlater!Drawcameraitselfinaseparatelayer,soIcanreuse.NOTE:inreal
drawing,leaveoffXcandYc!Thesecomelater]

Letslookabitmoreindepthathowthisboxinspaceactuallygetspositionedanddefined
internally.First,wedefineourcameraobjectaslookingdowntheworldsZaxisandorientedso
thatthetopofthecameraisfacingalongthe+Yaxis.Thecamerastartsattheorigin,justlike
otherobjects.
8

Thefirststepistomovethecameratowherewewanttomakeanimageandalsotiltandorient
itasdesired.Thisissimilartohowwehavebeenorientingobjectsallalong:wedefinesome
sortofrotationandtranslationtogetthecameraintoplace.Weignorescalewerejusttryingto
setupthecamerainspace.
Givingthecameraapositionissimpleenough.Tocomputetherotationneededtoorientour
cameraweusewhatscalledalookatsystem.Thisisprettymuchwhatitsoundslike:you
defineatargetlocationforwhatdirectionyouwantthecameratolook.ThisdefinestheZaxis
forthecamerasframeofreference,inotherwords,howitspointingintheworld.
[bringtoycameraintoviewandshowitbeingoriented.Notehowitcouldspinonitsaxis.]
However,wecouldspinthecameraalongthisZaxisdefinedforitwedontknowwhichwayis
upifweregivenjustapositionandatarget.
[drawYaxisforcamera.Drawcameraandallinseparatelayer.NOTE:inrealdrawing,leave
offXcandYc!Thesecomelater]

10

Whendefiningthecameraslocationlikethis,wealsopassinanupvectorofsomesort.This
vectorgivesussomeguidanceastowhichwaytoorientthetopofthecamera.
Typicallyinthree.jswellpassinavectorsuchas(0,1,0),the+Yaxis,astheupvector.Given
ourviewvectorandourupvector,wedliketoformamatrixthatdefinesawholeframeof
referenceforourcamera.WeknowwherewewanttheZaxistolookalong,butwealsowantto
knowwherethecamerasYandXaxisendup.Byspecifyingageneralupdirection,wedothis.
[drawtoside:showcrossproductofupand+Z,givingXc,(drawXc),thenZandX,givingYc.]
Forexample,saywehaveacamerapointinginsomedirection,lookingalongitsnegativeZaxis.
Ifwegiveanupdirection,wecanfindthedirectionpointingtotherightofthecamera,whichis
theXaxis,bytakingthecrossproductofthisZaxisandourupvector.Nowwehavetwoaxes
lockeddown,cameraZandcameraX.Wecanfindthetrueupdirection,thecamerasYaxis,by
thentakingthecrossproductoftheXandZaxes.[righthandedrulewithhand]Rememberthat
thecrossproductoftwovectorswillgiveusavectorthatisperpendiculartobothofthem.This
mayallsoundabitoddandlikealotofwork,butisextremelycommonitsprobablytheplace
10

11

whereIusethecrossproductthemost.
Thewholepointhereisthat,givenaviewdirectionandanupvectorasahint,wecangeta
frameofreferenceforthecamera.
[Makeahawkmodeloutofanoutline.]

Welloftenusetheworlds+Yaxisasourupvectorhint,butitalldepends:saywereahawk
soaringoversometerrain.Werelookingstraightdown,whichwouldbelookingdowntheYaxis
ofourworld.
[drawhawklookingdown.ShowitsZclookataxis,andXYZaxesofworld]

11

12

IfweusedtheworldsYaxisasourhint,itdoesntmakemuchsense:wevedefinedtheZaxis
thecameraslookingalongandtheYaxisforthecamerasupdirectionasvectorsinexactly
oppositedirections.Thisisnotveryuseful!Thecrossproductisthevector0,0,0.Inthiscase
ourupvectorismorelikethedirectionpointingoutthetopofourhawkshead,thedirectionitis
flying.Nowthattheupvectorisnotparalleltothelookatdirectionwecanformagoodframeof
referenceforthehawk.

Exercise:Three.jsLookat
CameraControls.target
2800,360,1600
Theresinfactalookatmethodonthecameraitself,butmostofthetimeweusethe
12

13

CameraControlsclasstoletusmovethecameraaroundwiththemouse.
Ifyouruntheexercisecode,youllseeagridandnotmuchelse:thedrinkingbirdhasleftthe
view.Whydidheleave?Wheredidhego?
Wevehadwordthathesbeensightedatthesecoordinates.Yourjobistoproperlysetthetarget
toseewhatthebirdsdoing.Youdontneedtomodifythecameraspositionorsizeitself.

Answer
//CONTROLS
cameraControls=newTHREE.OrbitAndPanControls(camera,renderer.domElement)
cameraControls.target.set(2800,360,1600)

Thesolutionistosetthecameracontrolstargetpositiontothepropercoordinates.Oncethisis
done,thebirdspositionisrevealed.Hisquestforwaterisatanend!

13

14

Lesson:ViewTransform
[showcamerainspace.Wewantspaceincamerashowreorientedrotatedview]

14

15

15

16

Wevejustshownhowtopositionandorientacamerainworldspace.Ifweapplythismatrixto
somecameraobject,thecamerathengetsplacedintheworld.However,wewantexactlythe
oppositeofthis.Wedontwanttopositionthecamerawithrespecttotheworld,wewantto
positiontheworldwithrespecttothecamera.
Thinkaboutwhatshappening:wehavesomeobjectsinascene.Theyveperhapshada
numberofmodelingtransformsappliedtothem.Theobjectsarenowallpositionedinworld
space.Whatwewanttodonowistransformtheworldtothecamerasframeofreference.
[getoutcameraandteapotmodel.Movecamerawithrespecttoteapot,thenteapotwithrespect
tocamera.Drawonscreen2Dcoordinateaxes,XandY.Cameraatbottompointingup,teapot
upandtoright.Startcameraatorigin.]
Heresacamera[flashflash]andamodel.Sayweslidethecamera5unitsalongtheworlds+X
16

17

axis.Fromthecameraspointofview,ifwesubtracted5fromalloftheworldscoordinates
everythingwouldbenicelyorientedforthecamera.Thelongandshorthereisthatweusethe
inverseofthematrixthatwouldpositionthecameraintheworld.Invertingbasicallysays,no,its
allaboutme,thecamera:reorienteverythingwithrespecttomememe.Thisinversematrixis
calledtheviewmatrix.
[C1MO]
[VMO]
Forthisreasonthisviewmatrixissometimeswrittenastheinverseofthecameramatrix,the
matrixthatwouldmovethecameratoitsplaceinworldspace.
Anotherwaytothinkofthisviewtransformissimplyastheverylastmodelingmatrixinthe
chain.TheMmatrixhererepresentsallthetransformsneededtogetanobjectintoworldspace.
Nowonelasttransform,theviewmatrixV,takestheobjectsinworldspaceandmovesthem
intothecamerasframeofreference.
IfyoudealwithWebGLorOpenGLdirectly,youwillseethesetwomatricesputtogetherasa
singlematrix,calledthemodelviewmatrix.Thismatrixisappliedtoanobject,immediately
takingitfromitsownmodelspacetoviewspace.

Lesson:NormalizedDeviceCoordinates
OrthographicCamera(left,right,top,bottom,near,far)

[Putacameraattheorigin,lookingdownZ.Copyitfromalayer.Movethewholeboxtotheleft
itisshownincorrectlyhere,itshouldbewiththenearfacecenteredattheorigin.]

17

18

Wenowhaveallourcoordinatesinthecamerasframeofreference.Whatwenowwanttodois
defineaboxinthisspacetocontaineverythingweregoingtorender.Itssortoflikedefiningthe
sizeofthestage.
Asnotedbefore,theorthographiccamerasdefinitionistogivealeft,right,top,bottom,near,far
setofvaluestodefinethisbox.Thesesixnumbersdefinethecornersofarectangularboxinthe
viewspaceofyourcamera.ThefirsttimeIexplainedit,wemadetheboxandthenorienteditin
space.Whatshappeningasfarasthematricesgoisthereverse:wefirstorienttheworldtothe
camerasviewofthings,thendefineourboxwithrespecttothecamera.
newpage
left=right
bottom=top
near=0
[thisgetsaddedlater:far=apositivevalue]
Inpracticalterms,weusuallymaketheleftandrightbeopposites,alongwiththetopandbottom.
Thenearvalueisoften0,thoughcanbeanynumber.Theideaisthattheviewmatrixmoved
everythingintheworldtobeplacedrelativetothelensofourcamera.Theboxdefinedbythe
18

19

projectionmatrixistheninfrontofthecameraandsymmetricarounditsviewaxis.

[P(VM)O]
[projectionmodelview]
Thisbox,calledtheviewvolume.infactperformsaprojection.Werenotjustdefiningabox,
weresayingtakeanythinginthisboxandprojectitontothe+Zsideoftheboxandmakean
image.
Youmayhavebeenwondering:whyarewelookingdownthenegativeZaxis?Thisisdone
becauseitmakesforarighthandedcoordinatesystemforthecamera:theYdirectionisup,Xis
totheright,givingaCartesianCoordinatesystemfortheimageformed.Tokeepthings
righthanded,theZaxismustbepointingtowardstheviewer,meaningwehavetolookdownthe
Zaxis.
[addlineaboutpositivefarvalue]
Thatsaid,three.jsthinksabouttheorthographiccameraasgoinginapositivedirection,sothe
farvalueisspecifiedasadistancealongtheZaxis.
Ourchainofmatricesaddsthisprojectiontothefront,inotherwordstheprojectionisapplied
next.Whenapplied,acoordinatewillgetanewvalueinthisprojectionsframeofreference.This
frameuseswhatarecallednormalizeddevicecoordinates,orNDCforshort.TheseNDC
coordinatesareintherange1to1forX,Y,andZ.Welltalkmoreaboutthistransformina
minute,butthepointisthatwhateverisinsidetheboxwillhavecoordinatestransformedtothis
newrange.
[endrecordingof3/27Irecordedthenextfew,butdidntturnontheoverheadcamera!]

Question:OrthographicMatrixType
[startpart8,recorded3/28]

Herestheorthographicprojectioninallitsglory.Itreallydoesntlooklikemuch.Itturnsoutthe
orthographicprojectionmatrixisprettysimpleandusesnothingyoudontalreadyknow.Thats
19

20

thequestiontoyou.
Doesthismatrixperform:
[]scaling?
[]rotation?
[]translation?
[]projection?
Checkallthatapply.
Myhinttoyouistoseethematrixzoneslesson.Bytheway,Iwantnontrivialanswershere.A
purerotationmatrixhasatranslationof0,0,0.Thatdoesntcount.

Answer
Theansweristhatscaleandtranslationtransformsarebeingdone.Therearetwowaystosolve
thisproblem.Oneistolookatthematrixitselfandseethatthereissomesortofscalingand
translationhappening.Theotheristorealizewhatthetransformisdoing:itisdefininga
rectangularboxinspacebymakingitadifferentsizealongeachaxisandbymovingitsorigin
elsewhere.
[putimageofourorthographicboxbackonthescreentoexplainthisnextpart,drawingon
imagehowitscentered.]

20

21

Noticethatifleftisequaltothenegativeoftheright,whichisthecommoncase,theXtranslation
valuewillbezero.Similarly,ifthebottomlimitisequaltothenegativeofthetop,theYtranslation
valueisalsozero.ThismeanstheboxiscenteredalongtheZviewaxisandsodoesntneedto
betranslatedinthesedirections.

Lesson:PerspectiveCamera
[videoclip:Unit6_Perspective,Perspective.mp4,justplayitovermywords.Showstransition
fromorthographictoperspective.]

21

22

Theperspectivecameraiswherethingsgetinteresting.Thiscameraismorelikereallife,with
objectsinthedistancebeingsmaller.Thatsaid,itusesthesamesortofpipelineasbefore.
Internallyyoudefineaviewmatrixexactlythesameasbefore.However,thentheprojection
matrixisformeddifferently.
[drawsimilartrianglesviewofstuff:]

Inaperspectiveviewoftheworld,objectsgetsmallerintheimageastheygetfurtherawayfrom
theviewer.Anotherwaytosayitisthatifsomethingisfartheraway,itneedstobelargerinworld
spaceifitwantstoappearthesamesizeonthescreen.Thisgivesustheideaofsimilar
triangles:y2dividedbyz2willbeequaltoy1dividedbyz1.
22

23

Soperspectiveprojectionisgoingtoinvolvedivisionbutwhenwemultiplyavectorbyamatrix
itsjustsomedotproducts,aseriesofmultipliesandadditions.
[(X,Y,Z,1)]
Thisiswherethefourthcoordinateforourpointscomesintoplay.Uptonow,thisfourthvalue
hasalwaysbeenequalto1.Werunapointthroughanysetofmodelingtransformsandthe
fourthcoordinatevalueof1isleftuntouched.Thisallchangeswithperspectiveprojection.
[AdditionalCourseMaterials:
Onecleverformofillusionisbasedonwhatscalledforcedperspective.See[this
video](https://www.youtube.com/watch?v=tBNHPkLnkk),forexample.Peoplehaveplayedtricks
withperspectiveforhundredsofyears,suchas[this
drawing](http://commons.wikimedia.org/wiki/File:William_Hogarth__Absurd_perspectives.png)
fromthe18thcentury.
]

Lesson:Three.jsPerspectiveCamera
Beforeexplaininghowprojectionworks,letstalkabouthowtheperspectivecameraissetin
three.js.
//PerspectiveCamera(angle,aspectRatio,near,far)
camera=newTHREE.PerspectiveCamera(30,aspectRatio,1,10000)
camera.position.set(170,170,40)
cameraControls=newTHREE.OrbitAndPanControls(camera,renderer.domElement)
cameraControls.target.set(0,50,0)

ItssimilartotheOrthographicCamera.Infact,thecreationcallhasfewerparameters.Weknow
whatthelastthreeare:theaspectratioofwidthdividedbyheight,followedbythenearandfar
planesoftheviewvolumewewanttodefine.
[viewfrustum:addnearandfarandcentralaxisandFOV]

23

24

Remembertheviewfrustum?Itsback,atlast.Thenearandfardistancesaremeasuredfrom
thetipofthepyramid,wherethecameraisplaced,downacentralaxis.BackwhenIwasa
youngman,wecallednearandfarbythenameshitherandyon,whichIthinkismore
poetic.Youllstilloccasionallyseethetermshitherandyonusedinproducts,sokeepaneye
out.
Thefirstargumentfortheperspectivecameraisthefieldofview.Thisistheanglebetweenthe
topandbottomplanesoftheviewpyramid.Noticethatinthree.jsthisnumberisspecifiedin
degrees,unlikemanyotherangles,whichuseradians.
Thefieldofviewalongwiththeaspectratiofullydescribethelocationsofthefoursidesofthe
pyramid.Fortheorthographiccamerawedefinedthelocationofeverysideofourviewvolume
box.Heretheviewisassumedtobesymmetricaroundthecenteraxis.Inotherwords,instead
ofbothatopandbottomvalue,weneedjustasingleangledescribingbothsamethingwithright
andleft,theaspectratioalongwiththeangleisenough.Thisisthree.jsswayofdoingthings,
and99%ofthetimeitswhatyouwant.Thatsaid,itsentirelypossibletospecifyeachsideofthe
pyramid,andWebGLitselfhasafrustumcallthatdoesjustthis.
newpage
Ifyouchangevaluesonthecameraitself,suchasthefieldofview,near,orfarplanes,inthree.js
24

25

youneedtocall:
camera.updateProjectionMatrix()

inordertohavethesechangestakeeffect.Formostdemosthesecameraparametersare
usuallysetonceoncreationandrarelytouched,sothree.jsdoesntspendanytimechecking
themeachframe.Ifyouchangethesevalueswhilerunningyourprogram,calling
updateProjectionMatrixhasthree.jsevaluatetheseparametersandformanewprojectionmatrix.

Exercise:FOVSlider
[usedat.guilibrary
fieldofview
range:1to179degrees,startat40degrees
]
Addasliderthatcontrolsthefieldofviewparameterfortheperspectivecamera.Usethedat.gui
librarytosetupthisslider.Givethesliderthenamefieldofview.Thisfieldofviewslidershould
havearangeof1to179andstartat40degrees.
[unit7fov_solution.js]

25

26

Whenyouredone,theprogramshouldlooklikethis.Asyouchangethefieldofview,youshould
noticethingslookingconsiderablydifferent.Onceyouhavethecodeworking,Irecommendyou
trymovingaroundthescene.Comparechangingthefieldofviewwithwhathappenswhenyou
usethemousewheelormiddlemousebuttontomovebackandforth.
[AdditionalCourseInformation:
Checkpreviousdemocodeorthe[dat.gui
documentation](http://workshop.chromeexperiments.com/examples/gui/#1BasicUsage)for
howtocreateaslider.
]

Answer
effectController={
fov:40
}
vargui=newdat.GUI()
varelement=gui.add(effectController,"fov",1.0,179.0)
element.name("fieldofview")

26

27

Therearetwoparts.Weneedtowritesomepieceofcodelikethistosetuptheslideritself.This
codeisrunatinitialization.

functionrender(){
vardelta=clock.getDelta()
cameraControls.update(delta)
camera.fov=effectController.fov
camera.updateProjectionMatrix()
renderer.render(scene,camera)
}

IntherendermethodweusetheeffectControllersfovvariabletosetthecamerasfieldofview,
whichisalsoindegrees.Oncethecameraparametersareset,wecallupdateProjectionMatrix
tomakethecamerachangestakeeffect.
Welltalkmuchmoreaboutfieldofviewandexactlywhatitmeans,thoughIthinkyouhavea
prettygoodideaafterdoingthisexercise.

Lesson:PerspectiveMatrix
27

28

Herestheperspectivematrixformedfromthethree.jsparameters:
[redraw,ofcourse.InWebGLthesenumbersgetfedinasnegativevaluesalongtheaxis,
superconfusing.]

Thenumbersintheupperleft3x3arescalefactors,similartotheorthographicprojection,
thoughtheZscaleisalittledifferent.TheresalsoatranslationfactorforZ.However,thebig
differencesherearethattheresa1inthelastrow,andthelowerrightcornernowhasa0.
Imnotgoingtoderivethisprojectionformulaheremostgood3Dgraphicstextsrunthroughthis
process.Alsobewarethatforsomeformulationsthenearandfarvaluesarenegative,since
youretravelingdownthenegativeZaxis.Theoneheadacheofkeepingthingsinarighthanded
systemisthiswhole+Zpointsattheviewerproblem.
[drawalittlefrustumandnotenearandfardistancesarepositive.]

Imusingpositivenearandfarvaluesinthisformula,becausethatshowthree.jsspecifies
things,andthankheavensforthat.Infact,thesetwovaluemustbepositivenumbersforthe
28

29

perspectivetransformyoucanseethingswouldgetweirdifthenearvalue,forexample,was
somewherebehindthecamera.
Fororthographicprojectionwecanusewhatevernumberswelikefornearandfar,even
negativevalues,sincewerereallyjustselectingaboxinspace.Forperspectiveweredoing
somethingmoreelaboratewithtransformingspace.
newpage
Theinterestingpartishowthismatrixworkswithcoordinates.Letstakeanicesimplecase:
fieldofview90degrees
aspectratiois1
nearis1
faris11
Thisgivesusamatrix
[paperhttp://mathbits.com/MathBits/StudentResources/GraphPaper/halfpageOne.pdf]
[drawthesituation,showYupandZofcourse,MAKESUREITSNEGATIVEZ,andthenadd
testpoints.Makesuretoaddeverytestpointinaseparatelayer,andmakescreencapsofeach
pointandwithnopoints.
Note:Iforgotthe+Yaxishereaddit.LabelFRUSTUM.
]

29

30

[1000
0100
001.22.2
0010
]
Letsusethismatrixonsometestpointsandseewhatweget.

30

31

Exercise:PerspectiveCoordinateTransform
[1000
0100
001.22.2
0010
]
Multiplythismatrixbythreepointsandgivetheresults
pointsare
(0,0,1)>gives(___,____,____,____)
(0,11,11)>gives(___,____,____,____)
(0,4,6)>gives(___,____,____,____)
Iwantallfourcoordinates.Dontdoanythingbeyondmultiplyingthepointstimesthematrix.
Dontforgetthatpointshaveafourthcoordinateequalto1.

[AdditionalCourseMaterials:
Didyouknowthatyoucantypemathematicalexpressionsinto[Googlessearch
box](https://www.google.com/)anditwillcomputetheanswerforyou?Veryhandy.
]

Answer
[Carefulwiththeminussigns!]
(0,0,1)>gives(0,0,1,1)
(0,11,11)>gives(0,11,11,11)
(0,4,6)>gives(0,4,5,6)
Herearetheanswers.Insteadofvaluesof1inthelastlocation,wehaveallsortsofinteresting
numbers.

31

32

Lesson:HomogeneousCoordinates
[copyfromabove]
(0,0,1)>gives(0,0,1,1)
(0,11,11)>gives(0,11,11,11)
(0,4,6)>gives(0,4,5,6)
ThefourvaluesarecalledX,Y,Z,andW.Thesearecalledhomogeneouscoordinates,and
theyreusedforprojection.
WhatwedonextwiththesecoordinatevaluesisdivideeachvaluebytheWofthecoordinate.
Thisiscalledtheperspectivedivideorhomogeneousdivide.
[underlineorotherwisemarkthews]
(0,0,1)>gives(0,0,1,1)>(0,0,1)
(0,11,11)>gives(0,11,11,11)>(0,1,1)
(0,4,6)>gives(0,4,5,6)>(0,0.67,0.83)
So,forourthreetestpoints,wehadavaluesuchas0,0,1,1,dividingby1issimpleenough,that
givesus0,0,1.WedontneedtobotherwritingouttheWvalueintheresult,sinceWdividedby
Wwillalwaysequal1.
Forournextpoint,Wis11.Dividingallthecoordinatesby11gives0,1,1.
Ourlastpointisalittlemoreinteresting.DividingthroughbyWgivesus0,0.67,0.83.
[ShowfrustumandthenshowNDCpoints]

32

33

33

34

Hereareplotsoftheoriginalpointsinviewspaceandtheircorrespondingnewlocations.Notice
thattheZaxisispointingtotherightforthefrustum,andtheresultingaxisis+Ztotheright.
Lookatwhatshappenedwiththesepointsandwheretheyaretransformed.Theystartedinside
orontheedgeofourfrustum.AftertheprojectionmatrixisappliedanddivisionbyWis
performed,theresultingpointsareinnormalizeddevicecoordinates.Anythingintherange1to
1forX,Y,andZisinthevisibleviewvolume.
[Showfrustumwith3objects,noscaleonfrustum,atnearplane,,3/3,allwithsame
height.ShowNDCversion,whichwillhavedepthsof1,0.5,1onascaleof1to1.Make
heightsofobjectsproportional:stretchcloserone,etc.Also,makefrustumleftandrightdistance
equaltotopandbottom,soNDCboxoverlapseasily.ALSO:SHOWDISTANCESofobjects,1,
2,3]

34

35

Letstakeanotherexample,toshowwhathappensto3objectsthatarethesamesizeinworld
space,butatdifferentdistances.Thissecondobjectinthesceneisattwicethedistanceofthe
first,thethirdisthreetimesasfar.
[FADEIN,overlapwithfrustum]

35

36

WhenwetransformtoNormalizedDeviceCoordinates,therelativeareaofcoverageofthenear
planestaysthesame.Thatis,thecloseobjectwashalfashighasthescreeninourfrustum
view,andtransformstohalftheheightinNDCspace.Thesecondobjectisfartheraway,and
showssmaller.Thethirdobject,onthebackofthefrustum,ismuchsmallerthantheothersin
normalizeddevicecoordinates.
Youmighthavenoticedaninterestingthinghashappenedtothedepthofthesecondobject.
Welltalkmoreaboutthatinabit,asitsimportant.
36

37

[AdditionalCourseMaterials:
Formoreonhomogeneouscoordinatessee
[Wikipedia](http://en.wikipedia.org/wiki/Homogeneous_coordinates).
]
[endofrecordingpart8,3/28]

Lesson:Clipping
[showourtestfrustumyetagain,butzoominonthissection]
[part9recorded3/28]

IleftoutastepthathappensafterprojectionandbeforedivisionbyW:clippingandculling.
Saywehavetwopoints
(0,4,6)>gives(0,4,5,6)
37

38

and
(0,6,4)>gives(0,6,2.6,4)
andtheyformalinesegment.Thesetwopointsandthislinesegmentareshownonthis
zoomedinpartofourfrustum.
Thissecondpointisoutsideofthefrustum.Wewanttohaveallcoordinatesinsideourfinalview
volumeinNDCspacesothatwecanrenderthem.Clippingisdoneforlinesegmentsand
triangleedgesthatpokeoutsideofthefrustum.Anedgecanbeclippedbyanynumberofthe
facesofthefrustum.
Whathappenshereisthatallthecoordinatesbetweenthetwopointsgetlinearlyinterpolated.
Forourexample,thepointonthefrustumfaceishalfwaybetweenourtwopoints.The
interpolatedpointisthen:
(0,5,3.8,5)
WethendividethispointbyW,asusual,togetapointinNormalizedDeviceCoordinates.
[Drawatriangleandshowitchoppedbytwoedgesofthescreen.]

Whenatriangleisclippedbyoneormorefacesofthefrustum,itcanformapolygonwithmore
than3sides.ThispolygonistriangulatedbytheGPUandeachseparatetrianglerasterized.You
asauserdontreallyhavetoknoworcaremuchaboutthisclippingprocessithappens
automatically.Itsworthknowingaboutmostlyifyouneedtodosimilartestingoperationsonthe
CPUside.
Incomputergraphicsweoftenmakeabigdealabouthowwestore3Dpointsandvectorsas
38

39

homogeneouscoordinates,withthefourthelementW.Inreality,foralmosteveryoperationthe
Wvalueiseither0,meaningavector,or1,meaningapoint.Itsonlyafterprojectionandduring
clippingthattheWvalueisanythingbut1.Onceclippingisdoneandwereusingnormalized
devicecoordinates,weredonewithhomogeneouscoordinates.
However,thesehomogeneouscoordinatesareimportantinthattheyrewhatthevertexshader
produces.Whenthecoordinateistransformedbytheprojectionmatrix,butbeforedivisionis
performed,thecoordinatesarecalledclipcoordinates.Thevertexshadercanproduceother
intermediateresults,suchascomputingthelocationoncethemodelandviewmatricesare
applied.Itisrequiredthatthevertexshaderproducesapositiononthescreenforthevertex.
Thispositionisahomogeneouscoordinatetherasterizerthentakesthispositionandperforms
clipping.

Lesson:FieldofView
[videoUnit6_FieldOfView,5.2CameraControl3.mp4startsat0:25goto0:35shortclip,
pleaseeithermakeitfitorjustrepeatitforthetimeItalkatfirst]

Letstalkabitaboutperspectivecameracontrol.Theparameterwiththemostobviouseffectis
thefieldofview.Asmentionedbefore,thisvalueistheanglefromthebottomoftheviewfrustum
tothetop.Italsoadjuststhesidetosideangle,factoringintheaspectratio.
[newpage]
39

40

[Showvariousfieldsofview]

[zoomlensisoptional.]

Thefieldofviewparameteractssomethinglikeazoomlens.Asyousetthisanglesmallerand
smaller,whateverisinthemiddleofthescreengrowslargerandlarger.
FortheseimageswhatIvedoneishavethefieldofviewmatchthecameramove,moreorless.
Inotherwords,asIzoominonthemodel,Ialsomovefartheraway,sothatthemodeltakes
aboutthesameamountofroomonthescreen.Aswezoomout,theperspectivedistortiongets
lessandless.
40

41

Atthelimit,thatis,asweattempttogoinfinitelyfarawayandhavethefieldofviewapproachan
angleofzerodegrees,theviewbecomesanorthographicprojection.Ifyourepracticallyinfinitely
faraway,everythingyourelookingatisatessentiallythesamedistanceasfarasrelativesize
goes,whichishowtheorthographicprojectiontreatsthescene.
Thiseffectofhavingthefieldofviewandthecameramovementoffseteachotherhasbecomea
gotoeffectincinematography.Ifyouwanttoexpressthatsomethingweirdordreamlikeis
happeninginthescene,youzoominwhilemovingbackwardsatthesametime,orviceversa.
Givethisdemoatryyourselfandseehowitlooks.

Demo:DollyandZoom
[Dollyoutandzoomintokeeptargetstablewidth:unit6dolly_zoom_demo.js]
[AdditionalCourseMaterials:
Heres[moreaboutthedollyzoom
technique](http://tvtropes.org/pmwiki/pmwiki.php/Main/VertigoEffect)anditsuseinfilms.
]

Lesson:TrueFieldofView

41

42

[drawfieldofviewforscreentorightoftheseimages,andshowwhatishappening:real
window,virtualwindow]
Wedsaytheviewofthebirdisprettydistorted.Really,theproblemisthatyourenotsitting
closeenoughtothescreen.Itssortoflikebeingoverweight.IcouldinsteadsaythatImnot
denseenoughifIwasdenserthenIdlookthinner.

42

43

Thinkofwhatthefieldofviewrepresents.Whenyoulookatyourmonitor,tablet,ormobile
device,youreagivendistanceawayfromit.Thescreenitselfisacertainheight.Thisformsa
realworldfieldofviewangle.

43

44

Awindowonyourscreenisyourwindowintoavirtualworld.Saythiswindowintherealworld
hasa20degreefieldofviewforyourrealworldeyeposition.Ifyourvirtualworldalsohasthis
samefieldofview,youwontperceiveanydistortion.Objectstowardstheedgeofthescreen
mightlookdistortedifyouweretobackawayfromthescreen,butatyourcurrenteyeposition
thefieldofviewisperfect:theimageiswarpedabitinprojection,butyoureyeisseeingthe
screenatatiltthatcompensatesforit.
[showtrigformula:tangentof(FOV/2)isthemonitorheight,showonscreen]

44

45

Theformulaforwindowheightforagivenfieldofviewanddistancefromthescreenis
height=2*tan(fov/2)*distance
Asthefieldofviewincreases,thetangentvalueincreasesandsotheheightofthemonitor
increases.

45

46

Whattendstohappeninvideogamesisthatthedesignercrankupthevirtualworldsfieldofview
sothatplayerscanseemoreofwhatshappeningaroundthem.Thiscancertainlyleadtoa
moreplayablegame,butthisisalsowherethedistortioncomesfrom,thatthevirtualfieldofview
doesntmatchtherealworldfieldofview.Ifyoumovedyourpointofviewsothatyouwereatthe
apexthevirtualworldsfrustum(gesture)thevirtualworldwouldappearundistorted.Ofcourse,it
mightactuallyallbeblurryatthisdistanceoryoumightgetamassiveheadache,butthatsthe
theory.

Question:MonitorFieldofView
[90degreesFOV,20incheshigh]
Sayyouwanttohaveagraphicsprogramdisplayinginthemonitortrulyrepresenta90degree
fieldofview,andyourmonitoris20incheshigh.Howfarawayfromthescreenshouldyoureyes
be?

46

47

Answer
[Drawmonitorconfiguration,showtriangles]

Wedontreallyneedanytrigonometryforthisone.Herestheeyeandthemonitorsheight.At90
degrees,thesearerighttrianglesandeachpairoftwosidesarethesamelengths.Wecansee
47

48

thattheheightistwicethatofthedistancetheeyemustbefromthemonitor.Theansweris10
inches,whichisdarnclosetotheeye.

Lesson:Target
[videoUnit6_FieldOfView,5.2CameraControl3.mp4startsat0:00goto0:23]

Therearemanywaystomoveacamerathroughascene.Wecanwalkorfly,wecanlookone
directionwhilemovinganother,andsoon.Hereweremovingabitsidewaysandabitforward
whilelookingforward.
Iusuallythinkofthecamerabeinginoneoftwomodes:viewercentricormodelcentric.When
thingsareviewercentric,theviewerismovingaroundthroughtheworld.
[transitionatthispointtothetargetview,wherewerefocusedonthedesk.]
Whenmodelcentric,aparticularobjectinaworldisbeingstudiedandtheviewersgoalisto
seethisobjectfromdifferentangles.
Inthismodewekeepthecamerafocusedonalocationaswemove.Theplacewherewelookis
calledthetargetinthree.jsandinothersystems.Notethatthistargetlocationisnotatall
necessaryinmakingthevariousmatricesneededforviewingthescene.Thetargetismuch
morerelatedtouserintent.
48

49

[newpage]
cameraControls.target.set(0,300,0)

Becausethetargetissuchausefulconcept,many(butnotall)cameracontrolsystemssupport
theideaofatargetinsomeway.
TosetthetargetweusethecameraControlstargetparameter.Wevesetthisparameter
before:itprovidesthepointthatourcameraislookingat,sosettingtheviewmatrix.Bysetting
thetargetinthecameraControls,younotonlysetcamerasviewtransform,youkeepthe
camerapointedatthislocationwhenyouorbit.Iftheobjectismoving,youcanupdatethetarget
eachframeandthecamerawillstaytrainedonit.

Lesson:Dolly,Pan,Orbit
[showcameramoves:zoom,dolly,pan,orbit]

49

50

Letsdefinesometermsforvariouscameramoves.Heresatopdowndrawingofaviewerand
anobject.
Whenyouadjustthefieldofview,thatszoom(orbizarrequasifisheye,ifyouwidenthefieldof
viewtoomuch).Whenyoumovedirectlytowardsorawayfromtheobjectyourelookingat,
thatsdollying.ITSNOTZOOMING.IhaveazoomonmycameradoesnotmeanIfIwantto
makesomethinglarger,Iruntowardsitandyellzoom!Itssoeasyincomputergraphicsto
eitherzoominordollyinthattheyresometimesnotthateasytotellapart.However,theyre
certainlydifferentintheireffectonthecamerasfieldofviewandlocation.Theonegiveawaythat
youredollyingandnotzoomingisifnewfacesbecomevisibleordisappear.Zoomingchanges
thesizeoftheimageseen,butdoesnotchangevisibility.
Allthatsaid,Illsometimessayzoominwhenthecontrolsareactuallydollycontrols,just
becausemostpeopledontknowwhatdollyinmeans.Thecameracontrolsformostofthe
programsinthiscoursehavethemousewheelandmiddlemousebuttonsettodollytheviewin
andout.

50

51

Theothercommoncameramovesarepanningandorbiting.Panningmeansmovingleftorright
asyoukeepthecamerapointedforward.Formostprogramswereusing,therightmouse
buttonpans.Orbitingmeanscirclingaroundthetargetlocation,similartohowasatelliteorbits
theearth.Forthoseofyouintofirstpersonshooters,itscirclestrafingatarget.Thetarget
locationisoftenplacedatthecenterofwhateverobjectistobeexamined.Inmostofour
programs,leftmouseorbitsaroundatargetlocation.
Incidentally,allofthesemousemovesarewhatwejusthappentouse,therearenoironclad
standardsamongprogramsofwhichmousebuttondoeswhat.
[AdditionalCourseMaterials:
[Panning](http://en.wikipedia.org/wiki/Panning_(camera))meanssomethingabitdifferentfor
cinematography.
Circlestrafingisexplained[here](http://en.wikipedia.org/wiki/Strafing_(gaming)#Circle_strafing).
Wikipediahasjustabouteverything.
]

Question:CameraChanges
Sayyourecontrollingacamerabyusingapositionandtargetsystem.
Foreachofthesecameramoves,whatmustchange,thetargetortheposition?Checkall
(ornone)thatapply.Selectanattributeonlyifitischangingafairbit,saymorethanafoot,fora
givenattribute.Forexample,ifIsaidtomoveyourcamerasothatitwaspointingstraightup,the
targetwouldhavechangedconsiderably,whilethepositionwouldhavechangedjustasmallbit.
TargetPosition
[][]Orbittotheright
[][]Turncameratotheleft
[][]Zoomin
[][]Pantotheright

Answer
TargetPosition
[][X]Orbittotheright
[X][]Turncameratotheleft
[][]Zoomin
51

52

[X][X]Pantotheright

Orbitingkeepsthetargetfixedandmovestheposition.
Turningthecamerakeepsthepositionfixedandmovesthetarget.
Zoomchangesthefieldofviewandnothingelse.
Whenyoupan,youaremovingthecameraperpendiculartothewayitisfacing,soboththe
targetandthepositionarechanging.Infact,controllingwherethetargetlocationiscanbea
somewhatfrustratingpartofusingvariousgraphicsmodelers.Ifyoupanandthenorbit,youre
noworbitingaroundsomedifferenttargetlocation,whichmaynothavebeenwhatwasintended.
NotethatIdidntaskabouttheeffectofdollyingonthetargetandposition.Dollycertainly
changestheposition,butitsuptotheprogramwhethertochangethetargetinthiscase.Ifthe
controlalsomovesthetarget,itslikeyourewalkingforwardanddontparticularlycarewhere
thetargetislocated.Ifthetargetdoesntchange,itslikeyourewalkingtowardsanobjectand
perhapsslowdownasyouapproachit.

Lesson:NearandFarClipping
[videoUnit6_NearAndFarClipping,5.2CameraControl3.mp4startsat0:39goto0:53]

52

53

Hereyoucanseetheeffectofmovingthenearandfarclippingplanesthroughthescene.
Seeingthiskindofclippingisusuallyabug,notafeature.Analgorithmsuchasraytracing
doesnthavethissortofproblem,asthemechanismthereistoshootraysfromtheeye.
Thesetwovaluesarenecessaryforrasterizationtoworksensibly,duetoitsuseofthe
projectionmatrix.Well,attheminimumyouneedtheneardistanceitspossibletoforma
projectionmatrixthatgivesafrustumwithnofarlimittothepyramid.
[zbufferbytes{
[24bitszbuffer|8bitsstencilbuffer]
drawasheetofpaperandadesktopnowonaseparatelayer,layoutpage
]
Thekeythingaboutthesetwovaluesisthatyouwanttosetthemtobeasclosetogetherasyou
can,whilestillavoidingclippingthenearplaneisparticularimportanttomoveasfaraspossible
awayfromthecamera.Thenearandfarvaluesdeterminehowthezbuffervalueiscomputed.
Internallythezbuffervaluetypicallygetsstoredasanintegervaluewithsomenumberofbits.
Forexample,24bitsiscommon,with8bitsforwhatscalledthestencilbuffer,aseparatebuffer
thatImnotgoingtotalkaboutinthiscoursebutthatcanbeusedforclippingandothereffects.
Thezbufferhasalotofbits,butnotaninfinitenumberofthem.

Forexample,ifyourerenderingasheetofpaperontopofadesk,youcaneasilygetzfighting,
evenifyouvemodeledeverythingcorrectlyandthesheetisslightlyabovethedesk.Atsome
53

54

pixelsthezvalueofthepaperandthedesktopwillhavethesamezvalueandthedesktopcan
thenbleedonthrough.

[drawnearandfarplanesat1,5(inblue,red)astickmarksonhoriz.axisandbothcolorsat10.
Labelaxes:YaxisisNDCZvalue,Xaxisisdistancefromcamera.]
[trytoleaveabitofroomtorightfortraintracksphoto]

Thezdepthrangeofvaluesisspreadbetweenthenearandfardistances.Itsclearthathaving
thesetwodistancesclosetogetherdirectlybenefitsprecision.
However,withtheperspectivetransforminparticular,youwanttomovethenearplaneasfar
fromtheeyeaspossible.Heresanexample.Saywehaveournearplaneatadistanceof1unit
awayfromthecameraandthefarplane10unitsaway.TheNDCzdepthdoesnotvarylinearly
butinsteadformsahyperboliccurve.Forexample,saywehaveanobjectat7unitsaway.The
NDCZvalueisabout0.9whentheneardistanceis1unit.Inotherwords,thezdepthofmore
distantobjectsarerelativelyhigher.Theseobjectsthatarefartherawayhavetoshareasmall
54

55

rangeofzdepthvaluesandsoaremorelikelytoexhibitzfighting.
[maysneakinaphotooftraintracks,iftheresroom.
http://commons.wikimedia.org/wiki/File:%E3%83%88%E3%83%AD%E3%83%83%E3%82%B3
%E7%8E%8B%E5%9B%BD%E7%BE%8E%E6%B7%B1%E6%B2%BF%E7%B7%9A%E9%A2
%A8%E6%99%AF%E7%99%BD%E6%A8%BAP6260564.jpg
]

Thereasonthezdepthvaluesvaryinthisnonlinearwayhastodowithinterpolation.Wewant
straightlinestostaystraightwhenusingperspectiveprojection.Iwontproveittoyouhere,but
thinkoftraintracksdisappearingintothedistance.Nearthecameratherailroadtiesarevisually
farapartasyoulooktowardsthehorizonthetracksgetcloserandclosertogether.Thedistance
55

56

betweenthetracksisthesame,ofcourse,andthetracksstaystraight,butthedistance
betweenthemontheimagechanges.TheWvalueincomputergraphicsisinterpolatedlinearly
butwhenusedfordivisiongivesusthisdifferingrateofchange.
[Nowmarkongraphwherethebluelineisatdistance5,anddrawarrowsfromtheblueline
from5to10downwardstotheredline.]

Togetbacktosettingthenearandfarplanes,saywereabletosafelymovethenearplanetoa
distanceof5unitsandnotcauseclipping.Wereeffectivelytakingthispieceofouroriginalgraph
andstretchingittoournewrange.First,wegetthesimplebenefitofhavingasmallerrange
betweenthenearandfar.Wealsogetamorenearlylineargraph.Themoreyouincreasethe
nearplanerelativetothefarplane,theslowertheNDCzdepthactuallygoesto1.0.[pointto
curves]
Thelongandshortisthatmovingthenearplaneawayfromthecamerahasalargebenefit,
muchlargerthanmovingthefarplaneinbyasimilardistance.Ofcourse,thisallbegsthe
question:howdoweknowwheretosettheseplanes?Thefardistanceisusuallyrelativelyeasy
tocompute:eitherknowinadvanceorperformsomeroughcomputationtodeterminethe
distancetothefarthestobjectinthescene.Thenearclippingplaneistrickier.Youusuallyhave
tohavesomerules,suchasnotlettingyourcameragettooclosetothewalls,orusesomerule
ofthumbsuchasthatthenearplanewillbeoneonethousandththedistanceofthatofthefar
56

57

plane.Somemoreelaboratesystemswillsetthenearplaneverycloseandperformaseparate
quickrenderofnearbyobjectstodetermineagooddistanceforthesettingforthescene.
Theresnosingle,perfectanswer.
[AdditionalCourseMaterials:
Youcanseetheeffectonprecisionwiththis[zdepth
calculator](http://www.sjbaker.org/steve/omniv/love_your_z_buffer.html).Theresmoreabout
optimizingyourzdepthrange[inthisarticle
post](http://outerra.blogspot.com/2012/11/maximizingdepthbufferrangeand.html).
Formoreonthestencilbuffer,[this
page](http://en.wikibooks.org/wiki/OpenGL_Programming/Stencil_buffer)isastart.Really,a
booksuchas[theRed
Book](http://www.amazon.com/OpenGLProgrammingGuideOfficialLearning/dp/0321552628
?tag=realtimerenderin)or[McReynolds&
Blythes](http://www.amazon.com/exec/obidos/tg/detail//1558606599?tag=realtimerenderin)are
goodforgettingaseriouseducationaboutitsuses.
]
[endpart9recorded3/28]

Lesson:DepthofField
[recorded3/28,part10]
[videoUnit6_FieldOfView,5.2CameraControl3.mp4startsat1:01to1:20letitrun,then
runthethree.jsdemofootage]

57

58

TheresoneotherfeatureofcamerasthatImgoingtomentioninpassinghere:depthoffield.
Thisistheideaofsimulatingarealcamera,whereyoucanfocusthelenstobeataparticular
distance.Indepthoffieldalgorithmsyoucontrolthefocaldistanceandalsohowblurryobjects
willappearwhennotinfocus.
Thistypeofalgorithmisoftendoneasapostprocess.Inotherwords,dataiscollectedby
renderingthescene,thenimageprocessingofsomesortisusedonthisdatatoproducethe
finaldepthoffieldimage.Thedifficultpartisgettingobjectsintheforegroundtobeblurryand
alsoproperlyblendwiththeobjectsinfocusbehindthem.
[http://mrdoob.github.com/three.js/examples/webgl_postprocessing_dof.html]

58

59

Three.jshasademoshowingadepthoffieldeffect.Itwillprobablyshowupabitdarkhere,so
seetheadditionalcoursematerialsforthelinkandgiveitatry.Itavoidstheproblematicblurry
foregroundobjectsbyputtingthefocusnearby,sothatonlydistantobjectsarefuzzy.
[http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html]

59

60

Thereareotherlessexpensivetechniquesyoucandotogetadepthoffieldeffect.Heresa
simpletiltshiftpostprocessthatgivesforegroundandbackgroundblur.Nosceneinformationis
used,avariableblurisjustaddedtothetopandbottomofthefinalimage.
[AdditionalCourseMaterials:
Thethree.jsdepthoffielddemois
[here](http://mrdoob.github.com/three.js/examples/webgl_postprocessing_dof.html).
AlteredQualiastiltshiftdemois
[here](http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html).
]

Lesson:WindowCoordinates
[recorde3/28,part11]
[WPVMO]
Wevehadaseriesoftransformsappliedtotheobject:theobjectsmodeltransform,followedby
theviewandprojectiontransformsgeneratedbythecamera.Theperspectivedivideconverts
fromclipcoordinatestoNormalizedDeviceCoordinates.Theresonelasttransform,anditsa
simpleone:movingfromNormalizedDeviceCoordinatestoWindowCoordinates.Inother
words,howdoyoumovefromaspaceof1to1inX,Y,andZtoanimagewithadepthbuffer.
60

61

Theanswerissimpleenough:add1,dividebytwo,thenmultiplybythewindowsresolution.
Xw=((X+1)/2)*Xres
Yw=((Y+1)/2)*Yres
Zw=((Z+1)/2)*Zres
IshouldmentionatthispointthattheotherpopularAPI,DirectX,hasNormalizedDevice
CoordinatesfortheZvaluethatrangefrom0to1insteadof1to1.Itdoesntreallymatterwhat
rangeisused,itsjustimportanttoknowthatthisrangecanvary.TheXandYrangesofgoing
from1to1isstandardthroughoutanysystemIveeverseen.
Inthree.jsyouselectsomepartofthescreenusingthesetViewportmethodontherenderer.
varcanvasWidth=window.innerWidth
varcanvasHeight=window.innerHeight
//small,middleofbottomofscreen
renderer.setViewport(
0.25*canvasWidth,0,
0.5*canvasWidth,0.5*canvasHeight)

[Nexttoit]

61

62

Yougivethelowerleftpixelcornerandthewidthandheight.Thesettingsheresaytoputthe
lowerleftcorneroftheviewportaquarterofthewaytotherightoftheorigin,andthatthe
viewportitselfshouldbehalfthewidthandheightofthewindow.

62

63

Itspossibletohavemultipleviewports.Eachviewportdefinesapieceoftheimage,andyou
renderseparatelytoeachone.Thisisveryhandyinmodeling,whereyoucanhaveafew
differentviewsofthescene,possiblyrenderedindifferentways.
TheconversionIgivefromNDCtowindowcoordinateshereassumesthatthelowerleftcorner
oftheimageistheorigin,at0,0.ItsworthmentioningisthattherecanbeaflipintheYaxis
withinsomesystems,suchastheDocumentObjectModel.Somesystemsthatdisplaythe
imagegeneratedconsiderthattheupperleftcorneris0,0.IfyouseeaflipintheYdirection
duringmanipulationoftheresultingimage,thisislikelythemismatch.
[drawcenterofpixel,lowerleftcornerview]

Whileweretalkingabout0,0,pleasenotethatthelowerleftcornerofthelowerleftpixelis0,0.
Thecenterofthepixelisnot0.0,0.0itis0.5,0.5.Almostallthetimethisishowyouwantto
considerthecenterofthepixel.DirectX9gotitwrong,makingthecenter0.0,0.0theyfixedthis
inDirectX10.Iveseentextbookstalkabout0.0,0.0asthecenterdontbelievethem.Using0.0,
0.0asthecenterofthepixelhastheoddeffectofmakingthelowerleftcorner0.5,0.5.Itmakes
simpleconversionbetweenfloatsandintegerstrickiermuchofthetime.Withthepropercenter
youjustdropthefraction.Iveoccasionallyseencircumstanceswhereoffsettinghalfapixelcan
63

64

makethingsworkoutmoreefficiently,butmuchofthetimeyoudontwanttodothis.

[AdditionalCourseMaterial:
LeeStemkoskihascommentedcodeforhowtoput[two
viewports](http://stemkoski.github.com/Three.js/ViewportsDual.html)and[four
viewports[(http://stemkoski.github.com/Three.js/ViewportsQuad.html)onthescreen.
Three.jshas[aninteresting
demo](http://mrdoob.github.com/three.js/examples/webgl_multiple_canvases_complex.html)
showinganartisticviewporteffect.
AfairlygoodoverviewoftheOpenGLtransformationpipelinecanbefound[onthis
page](http://www.songho.ca/opengl/gl_transform.html#projection).Althoughdated,[this
page](http://www.glprogramming.com/red/chapter03.html)givesamorefriendlywalkdownthe
camerapipeline.
Theancientarticle,"WhataretheCoordinatesofaPixel?"byPaulHeckbert,inthebook
"[Graphics
Gems](http://www.amazon.com/exec/obidos/ASIN/0122861663?tag=realtimerenderin)",isworth
trackingdown.Itsmystrongestargumentforwhythecenterofapixelortexelhasthe
coordinates0.5,0.5,not0.0,0.0.
]

Lesson:Antialiasing
[drawpixels,notehowwehavearoughedge.]

Nowthatwereatthepixellevel,letstalkabitaboutantialiasing.

64

65

Bydefault,whenwerasterizeascene,wefindwhatisinthecenterofeachpixel.Thiscangive
somefairlybadresults,asedgesoftriangleswilleitherbeconsideredtofullycoverapixelornot
coveritatall.Thebinarynatureofthisprocesscauseswhatscalledaliasing,givingaragged
looktoedges.Informallythisproblemiscalledthejaggiesorstairsteppingwhenyouseeit
inanimationitscalledthecrawlies.
Whatwedliketodoisgetanice,smoothresult,whereeachedgepixelisshadedproportionally
tohowmuchofitiscoveredbyeachobjectoverlappingit.Ifthepixelismostlycoveredbya
triangle,usemoreofthetrianglescolorless,useless.
Thehardpartisinfiguringoutthiscoverage.Itsexpensivetocompute,store,andblendtriangle
areasforeachpixel,thoughmaybethiswillhappensomeday,aboutthesametimeweget
personaljetpacks.
[drawgridandshow4x4samples]

Inthemeantimetherehavebeenahugenumberofantialiasingschemesproposedfor
interactive3Dgraphics.Ononeendofthespectrumissupersampling,whereyousimply
createahigherresolutionimageandthenusealltheseextrasamplestomakethefinalimage.
Forexample,fora1000x1000pixelimageyoumightrenderitataresolutionof4,000x4,000.
Noweachpixelhas16pixelsassociatedwithitinthehighresimage.Blendthesetogetherand
65

66

yougetabetterresult.
ThisschemeisconsideredABadIdea,foranumberofreasons.Oneisthatitsexpensivein
bothmemoryandprocessingcosts.Anotheristhatsamplinginalittle4x4gridisnotmuchhelp
infixingthejaggiesfornearlyhorizontalornearlyverticallines.
[drawMSAAwithsome8queenssamplingpattern]

[showallthree.]

AschemecommonlysupportedbytheGPUiscalledMSAA,multisamplingantialiasing.The
66

67

ideahereistocomputeashadeforthewholefragmentonce,andcomputethegeometric
coverageseparately.Inaddition,adifferentsamplingpatternthanagridisused.Doingsohelps
nearlyhorizontalandverticallinesconsiderably.Thissamplingpatterndoesvarydependingon
thehardwarecompanymakingtheGPU.Themaincostshereareprocessingandstorage,but
thesecostsareconsiderablylessandgiveconsiderablymorebangforthebuckthanbruteforce
supersampling.
ThisisgenerallytheformofantialiasingusedbydefaultbyWebGL.Isaygenerallybecause
theresjustatoggleforantialiasing,onoroff,anditsnotspecifiedwhatformofantialiasingis
used.
renderer=newTHREE.WebGLRenderer({antialias:true})
Toturnantialiasingoninthree.jsconsistsofsettingasinglebooleanparametercalledantialias.
Ishouldnotethatturningthisondoesntnecessarilydoanything.ItdependsonwhethertheGPU
supportsantialiasingmostshouldandwhetherthebrowserdecidestoallowit.Sometimes
therearebugsthatmakeitsafertokeepantialiasingoff.Sadly,mostofthevideolessonsweve
madeshowingthree.jsdemosdonothaveantialiasingon,justbecauseofsuchabug.
Welcometothebleedingedgeoftechnologynoonesaidtheredbecake!
[FXAA:ShowcloseupsofAAonandoff(useNPREffectsSandbox)]

Anotherclassofalgorithmsforantialiasingperformfilteringontheimage.Thisisarelativelynew
classoftechniques.Thefirstofthese,calledmorphologicalantialiasing,orMLAA,was
developedin2009.Theideaistousetheexistingimage,andpossiblyotherdata,todetectsharp
edges.Whenthesearefound,trytosmoothjusttheseedgesbyusingnearbypixels.Amazing,
suchtechniquesworkprettywell,thoughcanfailonthinlines,text,andotherspecialcases.One
ofthemostpopularfilteringtechniquesiscalledFXAA,whichneedsjusttheimageitselfto
operate.Iveuseditmyselfinproducts,anditsevenincludedinthree.js.Ithinkpartofthe
popularityisthattheauthor,TimothyLottes,putaseriousamountofeffortintobothmakingthis
shaderrunonjustabouteveryGPUknowntohumankindandthoroughlydocumentingthecode
itself.
67

68

[onelongbreathlesssentence]
Justtospellitout,incaseyoudidntgetthehint:pleasedodocumentyourcode,especiallyif
youplanonhavinganyoneseeit,whichofcourseanyonecandoifyoureusingWebGLor
three.js,soIllsayitagain:documentyourcode!

[AdditionalCourseMaterials:
SeetheFXAAalgorithminusein[thisthree.js
demo](http://mrdoob.github.com/three.js/examples/webgl_shading_physical.html),thoughyoull
havetodisableityourselftoseethedifference.
MyviewofFXAAis[here](http://www.realtimerendering.com/blog/fxaarulesok/).Therewasa
whole[SIGGRAPHcourse](http://iryoku.com/aacourse/)aboutfilteringtechniques.
AntialiasingdoesnotworkonMacsdueto[anobscureOpenGLdriverbugonNVIDIA
chipsets](http://code.google.com/p/chromium/issues/detail?id=159275).Bythetimeyouread
this,itmaybefixed.
]

Lesson:Conclusion
[http://commons.wikimedia.org/wiki/File:D%C3%BCrer__Man_Drawing_a_Lute.jpg]

68

69

Younowhaveknowledgeofallthebasicelementsforcreatingascene:objects,lights,and
cameras.Youhaveaconsiderablyeasiertimeofitthanthesepeople,asfarasrenderingthe
scenegoesthecomputerdoesallthatforyou,lettingyoufocusonhowtocrafttheobjects
themselves.
Inthenextunitwellshowhowtosignificantlyincreasethevisualrichnessofmodelsinyour
virtualworldthroughtheuseoftexturemapping.
[AdditionalCourseMaterials:
[ManDrawinga
Lute](http://commons.wikimedia.org/wiki/File:D%C3%BCrer__Man_Drawing_a_Lute.jpg)from
WikimediaCommons.
]
[finishedrecording3/28,part11]

69

70

ProblemSet:Camera
[beginrecording4/3part1]

Problem7.1:NearPlaneofZero
Herestheperspectiveprojectionmatrix:

Ihateitwhenobjectsgetclippedbythenearplane.WhathappensifIsettheneardistance
tozero,sotheresnonearplanetoclipagainst?
()ThehomogeneouscoordinatescannotbeturnedintoNDCvalues.
()AlltheresultingNDCZvaluesarezero.
()TheXandYvaluesbecomemirrored(negated).
()TheresultingNDCZvaluesarealmostallone.

Answer
[showmatrixcomputedwithnear=0:1and0inthethirdrow.Showequationsofwhatthe
newZandWare:
Zout=Zin
Wout=Zin
]
Ifyoulookatthismatrixandexamineitseffectonthevariouscoordinates,youllnoticethe
70

71

following.First,thelastcolumnisallzeroes,sotheWvalueofthecoordinatewillhavenoeffect
ontheresult.ThisleavesonlytheincomingZvalueofthecoordinateaffectingtheoutputZand
Wvalues.WhatevertheZvalueiscomingin,theresultingZandWvalueswillbethatoriginalZ
valuemultipliedby1.Inotherwords,theoutputZandWvalueswillbeidentical.Whenyou
divideZbyW,theresultwillalwaysbe1,exceptforthecasewhereWis0.Inotherwords,the
distanceofanobjectfromthecamerawillalmostalwaysbe1,whichisnotausefulresultif
youretryingtousethezbuffer.

Problem7.2:GraphicsPipelineCoordinates
Hereareabunchofdifferentcoordinatespaces.Youresendingamodeldownthepipeline.

Selectthecoordinatetypethemodelstartsinandwhichtypesitmaygothrough.
A.ViewCoordinates
B.OrthogonalCoordinates
C.WindowCoordinates
D.UniversalCoordinates
[listotherhalftoright]
E.NormalizedDeviceCoordinates
F.ModelCoordinates
G.PolarCoordinates
H.Clipcoordinates
I.WorldCoordinates
Startsin:_______to______to______to______to______to______
Inpracticewemightskiponeofthesecoordinatesteps.WhatImlookingforhereisforevery
blanktohavealetterfromthislist.

Answer
[F,I,A,H,E,C]
Theobjectstartsinmodelcoordinates,choiceF,andistransformedtoworldcoordinates,
choiceI.Theobjectthengetstransformedtoviewspace,A,sothattheworldisorientedwith
respecttothecamerasframeofreference.Inpracticeweoftengodirectlyfromobjectspaceto
cameraspacewithasingletransform.

71

72

Theprojectionmatrixisappliedtogettoclipcoordinates,choiceH,andthecoordinatesare
dividedbyWtogetthemodelintoNormalizedDeviceCoordinates,choiceE.Finally,thedatais
convertedtowindowcoordinatestogetitintoanimagetoputonthescreen,choiceC.
[AdditionalCourseMaterials:
TheideaforthisquestionisfromRonenBarzel,withpermission.The[slidesetsforhisgraphics
course](http://graphics.ucsd.edu/courses/cse167_w06/)areworthworkingthrough.
]

Problem7.3:4Viewports
Ivesetuptwoviewportsonthescreen,aperspectiveviewandatopvieworthographiccamera.
Ishouldmentionthereisoneextrathingtosetontherendererinthree.jswhenusingmultiple
viewports:
//don'tclearwhenmultipleviewportsaredrawn
renderer.autoClear=false

Thissettingtellsthree.jstonotclearthescreenbeforerenderingtheviewport.
[Drawtopview,fromside,andhowitscodeworks]
//OrthographicCamera(left,right,top,bottom,near,far)
topCam=newTHREE.OrthographicCamera(
aspectRatio*viewSize/2,aspectRatio*viewSize/2,
viewSize/2,viewSize/2,
1000,1000)
//setXtobetheupaxis
topCam.up.set(1,0,0)

72

73

Thetopviewworksbydefiningavolumeinspace.Theupvectorfortheviewisset,somewhat
arbitrarily,tobethe+Xaxis.
//topview
topCam.position.copy(cameraControls.target)
//moveupaunitandlookdownattarget
topCam.position.y+=1
topCam.lookAt(cameraControls.target)

Duringrenderingthecamerapositionitselfissettobeuponeunit,lookingdownatthetarget.
Theideaistolookatthetargetandthenmovebackabit,toestablishthelookatdirection.Note
thatthelookatandupdirectionsshouldneverbeparallel!
Yourtaskistoaddtwomoreviewports.Addafrontviewporttotheupperleft,sidetothelower
right.ThefrontviewportshouldlookupalongthepositiveXaxis,thesideviewportdown
alongthenegativeZaxis.
[showfinalresult:unit7db_4view_solution.js]
Bothfrontandsideviewportsshouldtrackthetargetpositionsimilartohowthetopviewport
works.Whenyouredonetheprogramshouldlooklikethis.

Answer
73

74

frontCam=newTHREE.OrthographicCamera(
aspectRatio*viewSize/2,aspectRatio*viewSize/2,
viewSize/2,viewSize/2,
1000,1000)
frontCam.up.set(0,1,0)
sideCam=newTHREE.OrthographicCamera(
aspectRatio*viewSize/2,aspectRatio*viewSize/2,
viewSize/2,viewSize/2,
1000,1000)
sideCam.up.set(0,1,0)

Therearetwopartstothesolution.Thefrontcameraandsidecameraarecreatedinasimilar
fashiontothetopcamera.TheupdirectionneedstobesettoYupinsteadofthetopcameras
Xupsetting.Really,thedefaultisYup,butitdoesnthurttosetit.
//frontview
frontCam.position.copy(cameraControls.target)
//movedownalongXaxisaunitandsolookatfrontatbird
frontCam.position.x=1
frontCam.lookAt(cameraControls.target)
renderer.setViewport(0,0.5*canvasHeight,0.5*canvasWidth,0.5*canvasHeight)
renderer.render(scene,frontCam)
//sideview
sideCam.position.copy(cameraControls.target)
//movebackupalongZaxisaunitandsolookatsideatbird
sideCam.position.z+=1
sideCam.lookAt(cameraControls.target)
74

75

renderer.setViewport(0.5*canvasWidth,0,0.5*canvasWidth,0.5*canvasHeight)
renderer.render(scene,sideCam)

Duringrendering,thefrontandsidecamerasarerepositionedalmostidenticallytohowthetop
cameraismoved.
[endrecording4/3part1]

Problem7.4:RearViewCamera
[beginrecording4/3part2]
Inthisexerciseyoullimplementarearviewcamera.Itsnotquitearearviewmirror,because
leftandrightwillnotbereversed.Rightnowtherearviewcameraisjustfocusedonthecenter
ofthemodelthepositionandtargetneverchange.Yourjobistomaketherearviewcamera
actuallylookbackwards,directlyawayfromwhereverthefullscreencameraislooking.Forits
position,usethesamelocationastheforwardcamera.Youllprobablyneedtousethecameras
lookAtmethod,aswellassomeVector3methodsatleastIdid.
[showunit7db_rearview_solution.js]
Ivesetupthetwoviewports.Theonetrickybitinthecodeisthatscissoringisimplemented.A
scissorboxdefinesapartofthescreenthatyouwanttoclear.Thisisneededsothatthe
rearviewcameraviewportproperlyclearsitsareaonthescreen,sinceitoverlapsthelarger
viewport.

75

76

Answer

renderer.render(scene,camera)
rearCam.position.copy(camera.position)
rearTarget.copy(camera.position)
rearTarget.sub(cameraControls.target)
rearTarget.add(camera.position)
rearCam.lookAt(rearTarget)
//rearviewrender
renderer.enableScissorTest(true)

[drawtargetandposition,showgoingtooppositetarget.]
Heresthecodeaddedtotherender()method.Thepositionfortherearcameraiscopiedfrom
theregularcamera.Therearcamerastargetissetbycomputingthevectorfromthefront
camerastargettothepositionandthenaddingthepositionitselftothevector.

Problem7.5:DivisionbyZero
76

77

Giventhisperspectivematrix:
[1000
0100
001.22.2
0010
]
[usefigureofviewsituationforthematrix,thenreplaceitwiththevectorsbelow]
Sayyoumultiplyapointwithcoordinate[3,7,0,1][showvertically]bythismatrix.Illsaveyouthe
effort:youget[3,7,2.2,0][showvertically].Wis0.Ifyoutrytodivide2.2byzerowithoutsafety
glasseson,theworldends.Infact,foranypoint[X,Y,0,1]wellgetaW=0.
Whatdoallthesepointshaveincommon?
()Thepointsareexactlyononeofthefacesofthefrustumitself.
()Thepointsareintheantifrustum,amirroredfrustumbehindthecamera.
()Thepointsareonaplaneparalleltothenearplanethatgoesthroughtheorigin.
()Thepointsarebehindthecamera.

Answer
[showthesideviewagain]
AsetofpointsdescribedbyZ=0isaplanegoingalongtheXandYdirectionsthroughtheorigin,
sothethirdansweristhecorrectone.Thisiswherethecameraislocatedinprojectionspace.
Thepointsinthelastthreeanswersarealllocatedoutsidethefrustum.Thesepointsshouldbe
culledandanyedgesformedfromthemclippedtotheviewvolume.Thiscullingandclippingis
donebeforedivisionbyW.PointsonorinsidetheviewfrustumareguaranteedtohavevalidW
values.

[endrecording4/3part2]

Problem7.6:CameraMatricesMatching
[NOTE: 38-q_x/38-s-x should be moved from the Final question set
77

78

to here]
[MIXUPORDER,makeitclearwhereanswergoes,usea4panelayout]
[viewmatrix]
(0.4600.891160
(010350
(0.8900.46600
(0001
(1.60000
(03.1700
(001.00052.0005
(0010
(727.500727.5
(03510351
(000.50.5
(0001

Whichmatrixiswhich:
A.ViewMatrix
B.PerspectiveMatrix
C.NDCtoWindowMatrix

Answer
Thismatrixhasvaluesinthefirstthreepositionsinthelastrow,soitisaprojectionmatrix.Of
ourchoices,onlytheperspectivematrixisaprojection.
Rotationsaffecttheoffdiagonalelementsofupper3x3ofthematrix.Theviewmatrixistheonly
oneofthethreechoiceswithrotationsinit.
ThisleavesthisthirdmatrixtobetheNDCtoWindowMatrix.Thisconversionisascaleand
translate,whichiswhatthismatrixcertainlycontains.

78