Table of Contents - FITstaff.fit.ac.cy/.../3d-game-development-with-lwjgl.pdf · 2017-09-28 ·...

TableofContentsIntroduction

Firststeps

TheGameLoop

Abriefaboutcoordinates

Rendering

MoreonRendering

Transformations

Textures

Camera

Loadingmorecomplexmodels

Lettherebelight

Lettherebeevenmorelight

SkyBoxandsomeoptimizations

HeightMaps

TerrainCollisions

NormalMapping

Shadows

Animations

Particles

InstancedRendering

3DObjectpicking

Hudrevisited-NanoVG

Optimizations

CascadedShadowMaps

Assimp

3DGameDevelopmentwithLWJGL3Thisonlinebookwillintroducethemainconceptsrequiredtowritea3DgameusingtheLWJGL3library.

LWJGLisaJavalibrarythatprovidesaccesstonativeAPIsusedinthedevelopmentofgraphics(OpenGL),audio(OpenAL)andparallelcomputing(OpenCL)applications.ThislibraryleveragesthehighperformanceofnativeOpenGLapplicationswhileusingtheJavalanguage.

Myinitialgoalwastolearnthetechniquesinvolvedinwritinga3DgameusingOpenGL.Alltheinformationrequiredwasthereintheinternetbutitwasnotorganizedandsometimesitwasveryhardtofindandevenincompleteormisleading.

Istartedtocollectsomematerials,developsomeexamplesanddecidedtoorganizethatinformationintheformofabook.

SourceCodeThesourcecodeofthesamplesofthisbookareinGitHub.

ThesourcecodeforthebookitselfisalsopublishedinGitHub.

LicenseThebookislicensedunderAttribution-ShareAlike4.0International(CCBY-SA4.0)

ThesourcecodeforthebookislicensedunderApachev2.0

SupportIfyoulikethebookpleaserateitwithastartandshareit.Ifyouwanttocontributewithadonationyoucandoadonation:

OrifyoupreferBitcoin:1Kwe78faWarzGTsWXtdGvjjbS9RmW1j3nb.

Commentsarewelcome

Introduction

Suggestionsandcorrectionsaremorethanwelcome(andifyoudolikeitpleaserateitwithastar).Pleasesendthemusingthediscussionforumandmakethecorrectionsyouconsiderinordertoimprovethebook.

AuthorAntonioHernándezBejarano

SpecialThanksToallthereadersthathavecontributedwithcorrections,improvementsandideas.

Introduction

FirststepsInthisbookwewilllearntheprincipaltechniquesinvolvedindeveloping3Dgames.WewilldevelopoursamplesinJavaandwewillusetheLightweightJavaGameLibrary(LWJGL).TheLWJGLlibraryenablestheaccesstolow-levelAPIs(ApplicationProgrammingInterface)suchasOpenGL.

LWJGLisalowlevelAPIthatactslikeawrapperaroundOpenGL.Ifyourideaistostartcreating3Dgamesinashortperiodoftimemaybeyoushouldconsiderotheralternativeslike[JmonkeyEngine].ByusingthislowlevelAPIyouwillhavetogothroughmanyconceptsandwritelotsoflinesofcodebeforeyouseetheresults.Thebenefitofdoingitthiswayisthatyouwillgetamuchbetterunderstandingof3Dgraphicsandalsoyoucangetbettercontrol.

AssaidinthepreviousparagraphswewillbeusingJavaforthisbook.WewillbeusingJava8,soyouneedtodownloadtheJavaSDKfromOracle’spages.JustchoosetheinstallerthatsuitsyourOperatingSystemandinstallit.ThisbookassumesthatyouhaveamoderateunderstandingoftheJavalanguage.

ThesourcecodethataccompaniesthisbookhasbeendevelopedusingtheNetbeansIDE.YoucandownloadthelatestversionofthatIDEfromhttps://netbeans.org/.InordertoexecuteNetbeansyouonlyneedtheJavaSEversionbutremembertodownloadtheversionthatcorrespondstoyourJDKversion(32bitsor64bits).

ForbuildingoursampleswewillbeusingMaven.MavenisalreadyintegratedinNetbeansandyoucandirectlyopenthedifferentsamplesfromNetbeans.JustopenthefolderthatcontainsthechaptersampleandNetbeanswilldetectthatitisamavenproject.

Firststeps

MavenbuildsprojectsbasedonanXMLfilenamedpom.xml(ProjectObjectModel)whichmanagesprojectdependencies(thelibrariesyouneedtouse)andthestepstobeperformedduringthebuildprocess.Mavenfollowstheprincipleofconventionoverconfiguration,thatis,ifyousticktothestandardprojectstructureandnamingconventionstheconfigurationfiledoesnotneedtoexplicitlysaywheresourcefilesareorwherecompiledclassesshouldbelocated.

Thisbookdoesnotintendtobeamaventutorial,sopleasefindtheinformationaboutitinthewebincaseyouneedit.Thesourcecodefolderdefinesaparentprojectwhichdefinesthepluginstobeusedandcollectstheversionsofthelibrariesemployed.

LWJGL3.1introducedsomechangesinthewaythattheprojectisbuilt.Nowthebasecodeismuchmoremodular,andwecanbemoreselectiveinthepackagesthatwewanttouseinsteadofusingagiantmonolithicjarfile.Thiscomesatacost:Younowneedtocarefullyspecifythedependenciesonebyone.Butthedownloadpageincludesafancyscriptthatgeneratesthepomfileforyou.Inourcase,wewilljustbeusingGLFWandOpenGLbindings.Youcancheckwhatthepomfilelookslikeinthesourcecode.

TheLWJGLplatformdependencyalreadytakescareofunpackingnativelibrariesforyourplatform,sothere'snoneedtouseotherplugins(suchasmavennatives).WejustneedtosetupthreeprofilestosetapropertythatwillconfiguretheLWJGLplatform.TheprofileswillsetupthecorrectvaluesofthatpropertyforWindows,LinuxandMacOSfamilies.

Firststeps

<id>windows-profile</id>

<family>Windows</family>

</activation>

<native.target>natives-windows</native.target>

</properties>

</profile>

<id>linux-profile</id>

<family>Linux</family>

</activation>

<native.target>natives-linux</native.target>

</properties>

</profile>

<id>OSX-profile</id>

</activation>

<native.target>natives-osx</native.target>

</properties>

</profile>

</profiles>

Insideeachproject,theLWJGLplatformdependencywillusethecorrectpropertyestablishedintheprofileforthecurrentplatform.

<groupId>org.lwjgl</groupId>

<artifactId>lwjgl-platform</artifactId>

<version>${lwjgl.version}</version>

<classifier>${native.target}</classifier>

</dependency>

Besidesthat,everyprojectgeneratesarunnablejar(onethatcanbeexecutedbytypingjava-jarname_of_the_jar.jar).Thisisachievedbyusingthemaven-jar-pluginwhichcreatesajarwithaMANIFEST.MFfilewiththecorrectvalues.Themostimportantattributeforthatfile

Firststeps

isMain-Class,whichsetstheentrypointfortheprogram.Inaddition,allthedependenciesaresetasentriesintheClass-Pathattributeforthatfile.Inordertoexecuteitonanothercomputer,youjustneedtocopythemainjarfileandthelibdirectory(withallthejarsincludedthere)whicharelocatedunderthetargetdirectory.

ThejarsthatcontainLWJGLclasses,alsocontainthenativelibraries.LWJGLwillalsotakecareofextractingthemandaddingthemtothepathwheretheJVMwilllokforlibraries.

Chapter1sourcecodeistakendirectlyfromthegettingstartedsampleintheLWJGLsite(http://www.lwjgl.org/guide).YouwillseethatwearenotusingSwingorJavaFXasourGUIlibrary.InsteadofthatweareusingGLFWwhichisalibrarytohandleGUIcomponents(Windows,etc.)andevents(keypresses,mousemovements,etc.)withanOpenGLcontextattachedinastraightforwardway.PreviousversionsofLWJGLprovidedacustomGUIAPIbut,forLWJGL3,GLFWisthepreferredwindowingAPI.

Thesamplessourcecodeisverywelldocumentedandstraightforwardsowewon’trepeatthecommentshere.

Ifyouhaveyourenvironmentcorrectlysetupyoushouldbeabletoexecuteitandseeawindowwitharedbackground.

ThesourcecodeofthisbookispublishedinGitHub.

Firststeps

TheGameLoopInthischapterwewillstartdevelopingourgameenginebycreatingourgameloop.Thegameloopisthecorecomponentofeverygame.Itisbasicallyanendlessloopwhichisresponsibleforperiodicallyhandlinguserinput,updatinggamestateandrenderingtothescreen.

Thefollowingsnippetshowsthestructureofagameloop:

while(keepOnRunning){

handleInput();

updateGameState();

render();

So,isthatall?Arewefinishedwithgameloops?Well,notyet.Theabovesnippethasmanypitfalls.Firstofallthespeedthatthegamelooprunsatwillbedifferentdependingonthemachineitrunson.Ifthemachineisfastenoughtheuserwillnotevenbeabletoseewhatishappeninginthegame.Moreover,thatgameloopwillconsumeallthemachineresources.

Thus,weneedthegamelooptotryrunningataconstantrateindependentlyofthemachineitrunson.Letussupposethatwewantourgametorunataconstantrateof50FramesPerSecond(FPS).Ourgameloopcouldbesomethinglikethis:

doublesecsPerFrame=1.0d/50.0d;

while(keepOnRunning){

doublenow=getTime();

handleInput();

updateGameState();

render();

sleep(now+secsPerFrame–getTime());

Thisgameloopissimpleandcouldbeusedforsomegamesbutitalsopresentssomeproblems.Firstofall,itassumesthatourupdateandrendermethodsfitintheavailabletimewehaveinordertorenderataconstantrateof50FPS(thatis,secsPerFramewhichisequalto20ms.).

TheGameLoop

Besidesthat,ourcomputermaybeprioritizingothertasksthatpreventourgameloopfromexecutingforacertainperiodoftime.So,wemayendupupdatingourgamestateatveryvariabletimestepswhicharenotsuitableforgamephysics.

Finally,sleepaccuracymayrangetotenthofasecond,sowearenotevenupdatingataconstantframerateevenifourupdateandrendermethodstakenotime.So,asyouseetheproblemisnotsosimple.

OntheInternetyoucanfindtonsofvariantsforgameloops.Inthisbookwewilluseanottoocomplexapproachthatcanworkwellinmanysituations.Soletusmoveonandexplainthebasisforourgameloop.ThepatternusedhereisusuallycalledFixedStepGameLoop.

Firstofallwemaywanttocontrolseparatelytheperiodatwhichthegamestateisupdatedandtheperiodatwhichthegameisrenderedtothescreen.Whydowedothis?Well,updatingourgamestateataconstantrateismoreimportant,especiallyifweusesomephysicsengine.Onthecontrary,ifourrenderingisnotdoneintimeitmakesnosensetorenderoldframeswhileprocessingourgameloop.Wehavetheflexibilitytoskipsomeframes.

Letushavealookathowourgamelooplookslike:

doublesecsPerUpdate=1.0d/30.0d;

doubleprevious=getTime();

doublesteps=0.0;

while(true){

doubleloopStartTime=getTime();

doubleelapsed=loopStartTime-previous;

previous=current;

steps+=elapsed;

handleInput();

while(steps>=secsPerUpdate){

updateGameState();

steps-=secsPerUpdate;

render();

sync(current);

Withthisgameloopweupdateourgamestateatfixedsteps.Buthowdowecontrolthatwedonotexhaustthecomputer'sresourcesbyrenderingcontinuously?Thisisdoneinthesyncmethod:

TheGameLoop

privatevoidsync(doubleloopStartTime){

floatloopSlot=1f/50;

doubleendTime=loopStartTime+loopSlot;

while(getTime()<endTime){

Thread.sleep(1);

}catch(InterruptedExceptionie){}

Sowhatarewedoingintheabovemethod?Insummarywecalculatehowmanysecondsourgameloopiterationshouldlast(whichisstoredintheloopSlotvariable)andwewaitforthatamountoftimetakingintoconsiderationthetimewespentinourloop.Butinsteadofdoingasinglewaitforthewholeavailabletimeperiodwedosmallwaits.Thiswillallowothertaskstorunandwillavoidthesleepaccuracyproblemswementionedbefore.Then,whatwedois:

1. Calculatethetimeatwhichweshouldexitthiswaitmethodandstartanotheriterationofourgameloop(whichisthevariableendTime).

2. Comparethecurrenttimewiththatendtimeandwaitjustonemillisecondifwehavenotreachedthattimeyet.

NowitistimetostructureourcodebaseinordertostartwritingourfirstversionofourGameEngine.Butbeforedoingthatwewilltalkaboutanotherwayofcontrollingtherenderingrate.Inthecodepresentedabove,wearedoingmicro-sleepsinordertocontrolhowmuchtimeweneedtowait.Butwecanchooseanotherapproachinordertolimittheframerate.Wecanusev-sync(verticalsynchronization).Themainpurposeofv-syncistoavoidscreentearing.Whatisscreentearing?It’savisualeffectthatisproducedwhenweupdatethevideomemorywhileit’sbeingrendered.Theresultwillbethatpartoftheimagewillrepresentthepreviousimageandtheotherpartwillrepresenttheupdatedone.Ifweenablev-syncwewon’tsendanimagetotheGPUwhileitisbeingrenderedontothescreen.

Whenweenablev-syncwearesynchronizingtotherefreshrateofthevideocard,whichattheendwillresultinaconstantframerate.Thisisdonewiththefollowingline:

glfwSwapInterval(1);

Withthatlinewearespecifyingthatwemustwait,atleast,onescreenupdatebeforedrawingtothescreen.Infact,wearenotdirectlydrawingtothescreen.Weinsteadstoretheinformationtoabufferandweswapitwiththismethod:

glfwSwapBuffers(windowHandle);

TheGameLoop

So,ifweenablev-syncweachieveaconstantframeratewithoutperformingthemicro-sleepstochecktheavailabletime.Besidesthat,theframeratewillmatchtherefreshrateofourgraphicscard.Thatis,ifit’ssetto60Hz(60timespersecond),wewillhave60FramesPerSecond.Wecanscaledownthatratebysettinganumberhigherthan1intheglfwSwapIntervalmethod(ifwesetitto2,wewouldget30FPS).

Let’sgetbacktoreorganizethesourcecode.FirstofallwewillencapsulatealltheGLFWWindowinitializationcodeinaclassnamedWindowallowingsomebasicparameterizationofitscharacteristics(suchastitleandsize).ThatWindowclasswillalsoprovideamethodtodetectkeypresseswhichwillbeusedinourgameloop:

publicbooleanisKeyPressed(intkeyCode){

returnglfwGetKey(windowHandle,keyCode)==GLFW_PRESS;

TheWindowclassbesidesprovidingtheinitializationcodealsoneedstobeawareofresizing.Soitneedstosetupacallbackthatwillbeinvokedwheneverthewindowisresized.Thecallbackwillreceivethewidthandheight,inpixels,oftheframebuffer(therenderingarea,inthissample,thedisplayarea).Ifyouwantthewidth,heightoftheframebufferinscreencoordinatesyoumayusethetheglfwSetWindowSizeCallbackmethod.Screencoordinatesdon'tnecessarillycorrespondtopixels(forinstance,onaMacwithRetinadisplay.SincewearegoingtousethatinformationwhenperformingsomeOpenGLcalls,weareinterestedinpixelsnotinscreencoordinates.YoucangetmoreinfomationintheGLFWdocumentation.

//Setupresizecallback

glfwSetFramebufferSizeCallback(windowHandle,(window,width,height)->{

Window.this.width=width;

Window.this.height=height;

Window.this.setResized(true);

WewillalsocreateaRendererclasswhichwillhandleourgamerenderlogic.Bynow,itwilljusthaveanemptyinitmethodandanothermethodtoclearthescreenwiththeconfiguredclearcolor:

publicvoidinit()throwsException{

publicvoidclear(){

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

TheGameLoop

ThenwewillcreateaninterfacenamedIGameLogicwhichwillencapsulateourgamelogic.Bydoingthiswewillmakeourgameenginereusableacrossdifferenttitles.Thisinterfacewillhavemethodstogettheinput,toupdatethegamestateandtorendergame-specificdata.

publicinterfaceIGameLogic{

voidinit()throwsException;

voidinput(Windowwindow);

voidupdate(floatinterval);

voidrender(Windowwindow);

ThenwewillcreateaclassnamedGameEnginewhichwillcontainourgameloopcode.ThisclasswillimplementtheRunnableinterfacesincethegameloopwillberuninsideaseparatethread:

publicclassGameEngineimplementsRunnable{

//..[Removedcode]..

privatefinalThreadgameLoopThread;

publicGameEngine(StringwindowTitle,intwidth,intheight,booleanvsSync,IGame

LogicgameLogic)throwsException{

gameLoopThread=newThread(this,"GAME_LOOP_THREAD");

window=newWindow(windowTitle,width,height,vsSync);

this.gameLogic=gameLogic;

//..[Removedcode]..

ThevSyncparameterallowsustoselectifwewanttousev-syncornot.YoucanseewecreateanewThreadwhichwillexecutetherunmethodofourGameEngineclasswhichwillcontainourgameloop:

TheGameLoop

publicvoidstart(){

gameLoopThread.start();

@Override

publicvoidrun(){

init();

gameLoop();

}catch(Exceptionexcp){

excp.printStackTrace();

OurGameEngineclassprovidesastartmethodwhichjuststartsourThreadsotherunmethodwillbeexecutedasynchronously.Thatmethodwillperformtheinitializationtasksandwillrunthegameloopuntilourwindowisclosed.ItisveryimportanttoinitializeGLFWinsidethethreadthatisgoingtoupdateitlater.Thus,inthatinitmethodourWindowandRendererinstancesareinitialized.

InthesourcecodeyouwillseethatwecreatedotherauxiliaryclassessuchasTimer(whichwillprovideutilitymethodsforcalculatingelapsedtime)andwillbeusedbyourgamelooplogic.

OurGameEngineclassjustdelegatestheinputandupdatemethodstotheIGameLogicinstance.IntherendermethoditdelegatesalsototheIGameLogicinstanceandupdatesthewindow.

protectedvoidinput(){

gameLogic.input(window);

protectedvoidupdate(floatinterval){

gameLogic.update(interval);

protectedvoidrender(){

gameLogic.render(window);

window.update();

Ourstartingpoint,ourclassthatcontainsthemainmethodwilljustonlycreateaGameEngineinstanceandstartit.

TheGameLoop

publicclassMain{

publicstaticvoidmain(String[]args){

booleanvSync=true;

IGameLogicgameLogic=newDummyGame();

GameEnginegameEng=newGameEngine("GAME",

600,480,vSync,gameLogic);

gameEng.start();

System.exit(-1);

Attheendweonlyneedtocreateorgamelogicclass,whichforthischapterwillbeasimplerone.Itwilljustincrease/decreasetheclearcolorofthewindowwhenevertheuserpressestheup/downkey.Therendermethodwilljustclearthewindowwiththatcolor.

TheGameLoop

publicclassDummyGameimplementsIGameLogic{

privateintdirection=0;

privatefloatcolor=0.0f;

privatefinalRendererrenderer;

publicDummyGame(){

renderer=newRenderer();

@Override

renderer.init();

@Override

publicvoidinput(Windowwindow){

if(window.isKeyPressed(GLFW_KEY_UP)){

direction=1;

}elseif(window.isKeyPressed(GLFW_KEY_DOWN)){

direction=-1;

}else{

direction=0;

@Override

publicvoidupdate(floatinterval){

color+=direction*0.01f;

if(color>1){

color=1.0f;

}elseif(color<0){

color=0.0f;

@Override

publicvoidrender(Windowwindow){

if(window.isResized()){

glViewport(0,0,window.getWidth(),window.getHeight());

window.setResized(false);

window.setClearColor(color,color,color,0.0f);

renderer.clear();

Intherendermethodwegetnotifiedwhenthewindowhasbeenresizedinordertoupdatetheviewporttolocatethecenterofthecoordinatestothecenterofthewindow.

TheGameLoop

Theclasshierarchythatwehavecreatedwillhelpustoseparateourgameenginecodefromthecodeofaspecificgame.Althoughitmayseemnecessaryatthismomentweneedtoisolategenerictasksthateverygamewillusefromthestatelogic,artworkandresourcesofaspecificgameinordertoreuseourgameengine.Inlaterchapterswewillneedtorestructurethisclasshierarchyasourgameenginegetsmorecomplex.

ThreadingissuesIfyoutrytorunthesourcecodeprovidedaboveinOSXyouwillgetanerrorlikethis:

Exceptioninthread"GAME_LOOP_THREAD"java.lang.ExceptionInInitializerError

Whatdoesthismean?TheansweristhatsomefunctionsoftheGLFWlibrarycannotbecalledinaThreadwhichisnotthemainThread.Wearedoingtheinitializingstuff,includingwindowcreationintheinitmethodoftheGameEngineclass.Thatmethodgetscalledintherunmethodofthesameclass,whichisinvokedbyanewThreadinsteadtheonethat'susedtolaunchtheprogram.

ThisisaconstraintoftheGLFWlibraryandbasicallyitimpliesthatweshouldavoidthecreationofnewThreadsforthegameloop.WecouldtrytocreatealltheWindowsrelatedstuffinthemainthreadbutwewillnotbeabletorenderanything.Theproblemisthat,OpenGLcallsneedtobeperformedinthesameThreadthatitscontextwascreated.

OnWindowsandLinuxplatforms,althoughwearenotusingthemainthreadtoinitializetheGLFWstuffthesampleswillwork.TheproblemiswithOSX,soweneedtochangethesourcecodeoftherunmethodoftheGameEngineclasstosupportthatplatformlikethis:

publicvoidstart(){

StringosName=System.getProperty("os.name");

if(osName.contains("Mac")){

gameLoopThread.run();

}else{

gameLoopThread.start();

WhatwearedoingisjustignoringthegameloopthreadwhenweareinOSXandexecutethegameloopcodedirectlyinthemainThread.ThisisnotaperfectsolutionbutitwillallowyoutorunthesamplesonMac.Othersolutionsfoundintheforums(suchasexecutingtheJVMwiththe-XstartOnFirstThreadflagseemtonotwork).

TheGameLoop

InthefutureitmaybeinterestingtoexploreifLWJGLprovidesotherGUIlibrariestocheckifthisrestrictionappliestothem.(ManythankstoTimoBühlmannforpointingoutthisissue).

PlatformDifferences(OSX)YouwillbeabletorunthecodedescribedaboveonWindowsorLinux,butwestillneedtodosomemodificationsforOSX.Asit'sstatedinthGLFWdocumentation:

TheonlyOpenGL3.xand4.xcontextscurrentlysupportedbyOSXareforward-compatible,coreprofilecontexts.Thesupportedversionsare3.2on10.7Lionand3.3and4.1on10.9Mavericks.Inallcases,yourGPUneedstosupportthespecifiedOpenGLversionforcontextcreationtosucceed.

So,inordertosupportfeaturesexplainedinlaterchaptersweneedtoaddtheselinestotheWindowclassbeforethewindowiscreated:

glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR,3);

glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR,2);

glfwWindowHint(GLFW_OPENGL_PROFILE,GLFW_OPENGL_CORE_PROFILE);

glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT,GL_TRUE);

ThiswillmaketheprogramusethehighestOpenGLversionpossiblebetween3.2and4.1.Ifthoselinesarenotincluded,aLegacyversionofOpenGLisused.

TheGameLoop

AbriefaboutcoordinatesInthischapterwewilltalkalittlebitaboutcoordinatesandcoordinatesystemstryingtointroducesomefundamentalmathematicalconceptsinasimplewaytosupportthetechniquesandtopicsthatwewilladdressinsubsequentchapters.Wewillassumesomesimplificationswhichmaysacrificeprecisenessforthesakeoflegibility.

Welocateobjectsinspacebyspecifyingitscoordinates.Thinkaboutamap.Youspecifyapointonamapbystatingitslatitudeorlongitude.Withjustapairofnumbersapointispreciselyidentified.Thatpairofnumbersarethepointcoordinates(thingsarealittlebitmorecomplexinreality,sinceamapisaprojectionofanonperfectellipsoid,theearth,somoredataisneededbutit’sagoodanalogy).

Acoordinatesystemisasystemwhichemploysoneormorenumbers,thatis,oneormorecoordinatestouniquelyspecifythepositionofapoint.Therearedifferentcoordinatesystems(Cartesian,polar,etc.)andyoucantransformcoordinatesfromonesystemtoanother.WewillusetheCartesiancoordinatesystem.

IntheCartesiancoordinatesystem,fortwodimensions,acoordinateisdefinedbytwonumbersthatmeasurethesigneddistancetotwoperpendicularaxes,xandy.

Continuingwiththemapanalogy,coordinatesystemsdefineanorigin.Forgeographiccoordinatestheoriginissettothepointwheretheequatorandthezeromeridiancross.Dependingonwherewesettheorigin,coordinatesforaspecificpointaredifferent.Acoordinatesystemmayalsodefinetheorientationoftheaxis.Inthepreviousfigure,thex

coordinateincreasesaslongaswemovetotherightandtheycoordinateincreasesaswemoveupwards.But,wecouldalsodefineanalternativeCartesiancoordinatesystemwithdifferentaxisorientationinwhichwewouldobtaindifferentcoordinates.

Asyoucanseeweneedtodefinesomearbitraryparameters,suchastheoriginandtheaxisorientationinordertogivetheappropriatemeaningtothepairofnumbersthatconstituteacoordinate.Wewillrefertothatcoordinatesystemwiththesetofarbitraryparametersasthecoordinatespace.Inordertoworkwithasetofcoordinateswemustusethesamecoordinatespace.Thegoodnewsisthatwecantransformscoordinatesfromonespacetoanotherjustbyperformingtranslationsandrotations.

Ifwearedealingwith3Dcoordinatesweneedanadditionalaxis,thezaxis.3Dcoordinateswillbeformedbyasetofthreenumbers(x,y,z).

Asin2DCartesiancoordinatespaceswecanchangetheorientationoftheaxesin3Dcoordinatespacesaslongastheaxesareperpendicular.Thenextfigureshowsanother3Dcoordinatespace.

3Dcoordinatescanbeclassifiedintwotypes:lefthandedandrighthanded.Howdoyouknowwhichtypeitis?Takeyourhandandforma“L”betweenyourthumbandyourindexfingers,themiddlefingershouldpointinadirectionperpendiculartotheothertwo.Thethumbshouldpointtothedirectionwherethexaxisincreases,theindexfingershouldpointwheretheyaxisincreasesandthemiddlefingershouldpointwherethezaxisincreases.Ifyouareabletodothatwithyourlefthand,thenitslefthanded,ifyouneedtouseyourrighthandisright-handed.

2Dcoordinatespacesareallequivalentsincebyapplyingrotationwecantransformfromonetoanother.3Dcoordinatespaces,onthecontrary,arenotallequal.Youcanonlytransformfromonetoanotherbyapplyingrotationiftheybothhavethesamehandedness,thatis,ifbotharelefthandedorrighthanded.

Nowthatwehavedefinedsomebasictopicslet’stalkaboutsomecommonlyusedtermswhendealingwith3Dgraphics.Whenweexplaininlaterchaptershowtorender3Dmodelswewillseethatweusedifferent3Dcoordinatespaces,thatisbecauseeachofthosecoordinatespaceshasacontext,apurpose.Asetofcoordinatesismeaninglessunlessitreferstosomething.Whenyouexaminethiscoordinates(40.438031,-3.676626)theymaysaysomethingtoyouornot.ButifIsaythattheyaregeometriccoordinates(latitudeandlongitude)youwillseethattheyarethecoordinatesofaplaceinMadrid.

Whenwewillload3Dobjectswewillgetasetof3Dcoordinates.Thosecoordinatesareexpressedina3Dcoordinatespacewhichiscalledobjectcoordinatespace.Whenthegraphicsdesignersarecreatingthose3Dmodelstheydon’tknowanythingaboutthe3Dscenethatthismodelwillbedisplayedin,sotheycanonlydefinethecoordinatesusingacoordinatespacethatisonlyrelevantforthemodel.

Whenwewillbedrawinga3Dsceneallofour3Dobjectswillberelativetothesocalledworldspacecoordinatespace.Wewillneedtotransformfrom3Dobjectspacetoworldspacecoordinates.Someobjectswillneedtoberotated,stretchedorenlargedandtranslatedinordertobedisplayedproperlyina3Dscene.

Wewillalsoneedtorestricttherangeofthe3Dspacethatisshown,whichislikemovingacamerathroughour3Dspace.Thenwewillneedtotransformworldspacecoordinatestocameraorviewspacecoordinates.Finallythesecoordinatesneedtobetransformedtoscreencoordinates,whichare2D,soweneedtoproject3Dviewcoordinatestoa2Dscreencoordinatespace.

ThefollowingpictureshowsOpenGLcoordinates,(thezaxisisperpendiculartothescreen)andcoordinatesarebetween-1and+1.

Don’tworryifyoudon’thaveaclearunderstandingofalltheseconcepts.Theywillberevisitedduringnextchapterswithpracticalexamples.

RenderingInthischapterwewilllearntheprocessesthattakesplacewhilerenderingasceneusingOpenGL.IfyouareusedtoolderversionsofOpenGL,thatisfixed-functionpipeline,youmayendthischapterwonderingwhyitneedstobesocomplex.Youmayendupthinkingthatdrawingasimpleshapetothescreenshouldnotrequiresomanyconceptsandlinesofcode.Letmegiveyouanadviceforthoseofyouthatthinkthatway.Itisactuallysimplerandmuchmoreflexible.Youonlyneedtogiveitachance.ModernOpenGLletsyouthinkinoneproblematatimeanditletsyouorganizeyourcodeandprocessesinamorelogicalway.

Thesequenceofstepsthatendsupdrawinga3Drepresentationintoyour2Dscreeniscalledthegraphicspipeline.FirstversionsofOpenGLemployedamodelwhichwascalledfixed-functionpipeline.Thismodelemployedasetofstepsintherenderingprocesswhichdefinedafixedsetofoperations.Theprogrammerwasconstrainedtothesetoffunctionsavailableforeachstep.Thus,theeffectsandoperationsthatcouldbeappliedwerelimitedbytheAPIitself(forinstance,“setfog”or“addlight”,buttheimplementationofthosefunctionswerefixedandcouldnotbechanged).

Thegraphicspipelinewascomposedofthesesteps:

Rendering

OpenGL2.0introducedtheconceptofprogrammablepipeline.Inthismodel,thedifferentstepsthatcomposethegraphicspipelinecanbecontrolledorprogrammedbyusingasetofspecificprogramscalledshaders.ThefollowingpicturedepictsasimplifiedversionoftheOpenGLprogrammablepipeline:

TherenderingstartstakingasitsinputalistofverticesintheformofVertexBuffers.But,whatisavertex?Avertexisadatastructurethatdescribesapointin2Dor3Dspace.Andhowdoyoudescribeapointina3Dspace?Byspecifyingitsx,yandzcoordinates.AndwhatisaVertexBuffer?AVertexBufferisanotherdatastructurethatpacksalltheverticesthatneedtoberendered,byusingvertexarrays,andmakesthatinformationavailabletotheshadersinthegraphicspipeline.

Thoseverticesareprocessedbythevertexshaderwhosemainpurposeistocalculatetheprojectedpositionofeachvertexintothescreenspace.Thisshadercangeneratealsootheroutputsrelatedtocolourortexture,butitsmaingoalistoprojecttheverticesintothescreenspace,thatis,togeneratedots.

Thegeometryprocessingstageconnectstheverticesthataretransformedbythevertexshadertoformtriangles.Itdoessobytakingintoconsiderationtheorderinwhichtheverticeswerestoredandgroupingthemusingdifferentmodels.Whytriangles?Atriangleislikethebasicworkunitforgraphiccards.It’sasimplegeometricshapethatcanbecombinedandtransformedtoconstructcomplex3Dscenes.Thisstagecanalsouseaspecificshadertogroupthevertices.

Rendering

Therasterizationstagetakesthetrianglesgeneratedinthepreviousstages,clipsthemandtransformsthemintopixel-sizedfragments.

Thosefragmentsareusedduringthefragmentprocessingstagebythefragmentshadertogeneratepixelsassigningthemthefinalcolorthatgetswrittenintotheframebuffer.Theframebufferisthefinalresultofthegraphicspipeline.Itholdsthevalueofeachpixelthatshouldbedrawntothescreen.

Keepinmindthat3Dcardsaredesignedtoparallelizealltheoperationsdescribedabove.Theinputdatacanbeprocessesinparallelinordertogeneratethefinalscene.

Solet'sstartwritingourfirstshaderprogram.ShadersarewrittenbyusingtheGLSLlanguage(OpenGLShadingLanguage)whichisbasedonANSIC.Firstwewillcreateafilenamed“vertex.vs”(TheextensionisforVertexShader)undertheresourcesdirectorywiththefollowingcontent:

#version330

layout(location=0)invec3position;

voidmain()

gl_Position=vec4(position,1.0);

ThefirstlineisadirectivethatstatestheversionoftheGLSLlanguageweareusing.ThefollowingtablerelatestheGLSLversion,theOpenGLthatmatchesthatversionandthedirectivetouse(Wikipedia:https://en.wikipedia.org/wiki/OpenGL_Shading_Language#Versions).

Rendering

GLSVersion OpenGLVersion ShaderPreprocessor

1.10.59 2.0 #version110

1.20.8 2.1 #version120

1.30.10 3.0 #version130

1.40.08 3.1 #version140

1.50.11 3.2 #version150

3.30.6 3.3 #version330

4.00.9 4.0 #version400

4.10.6 4.1 #version410

4.20.11 4.2 #version420

4.30.8 4.3 #version430

4.40 4.4 #version440

4.50 4.5 #version450

Thesecondlinespecifiestheinputformatforthisshader.DatainanOpenGLbuffercanbewhateverwewant,thatis,thelanguagedoesnotforceyoutopassaspecificdatastructurewithapredefinedsemantic.Fromthepointofviewoftheshaderitisexpectingtoreceiveabufferwithdata.Itcanbeaposition,apositionwithsomeadditionalinformationorwhateverwewant.Thevertexshaderisjustreceivinganarrayoffloats.Whenwefillthebuffer,wedefinethebufferchunksthataregoingtobeprocessedbytheshader.

So,firstweneedtogetthatchunkintosomethingthat’smeaningfultous.Inthiscasewearesayingthat,startingfromtheposition0,weareexpectingtoreceiveavectorcomposedof3attributes(x,y,z).

TheshaderhasamainblocklikeanyotherCprogramwhichinthiscaseisverysimple.Itisjustreturningthereceivedpositionintheoutputvariablegl_Positionwithoutapplyinganytransformation.Younowmaybewonderingwhythevectorofthreeattributeshasbeenconvertedintoavectoroffourattributes(vec4).Thisisbecausegl_Positionisexpectingtheresultinvec4formatsinceitisusinghomogeneouscoordinates.Thatis,it’sexpectingsomethingintheform(x,y,z,w),wherewrepresentsanextradimension.Whyaddanotherdimension?Inlaterchaptersyouwillseethatmostoftheoperationsweneedtodoarebasedonvectorsandmatrices.Someofthoseoperationscannotbecombinedifwedonothavethatextradimension.Forinstancewecouldnotcombinerotationandtranslationoperations.(Ifyouwanttolearnmoreonthis,thisextradimensionallowustocombineaffineandlineartransformations.Youcanlearnmoreaboutthisbyreadingtheexcellentbook“3DMathPrimerforGraphicsandGamedevelopment,byFletcherDunnandIanParberry).

Rendering

Letusnowhavealookatourfirstfragmentshader.Wewillcreateafilenamed“fragment.fs”(TheextensionisforFragmentShader)undertheresourcesdirectorywiththefollowingcontent:

#version330

outvec4fragColor;

voidmain()

fragColor=vec4(0.0,0.5,0.5,1.0);

Thestructureisquitesimilartoourvertexshader.Inthiscasewewillsetafixedcolourforeachfragment.Theoutputvariableisdefinedinthesecondlineandsetasavec4fragColor.Nowthatwehaveourshaderscreated,howdoweusethem?Thisisthesequenceofstepsweneedtofollow:

1. CreateaOpenGLProgram2. Loadthevertexandshadercodefiles.3. Foreachshader,createanewshaderprogramandspecifyitstype(vertex,fragment).4. Compiletheshader.5. Attachtheshadertotheprogram.6. Linktheprogram.

Attheendtheshaderwillbeloadedinthegraphicscardandwecanuseitbyreferencinganidentifier,theprogramidentifier.

packageorg.lwjglb.engine.graph;

importstaticorg.lwjgl.opengl.GL20.*;

publicclassShaderProgram{

privatefinalintprogramId;

privateintvertexShaderId;

privateintfragmentShaderId;

publicShaderProgram()throwsException{

programId=glCreateProgram();

if(programId==0){

thrownewException("CouldnotcreateShader");

Rendering

publicvoidcreateVertexShader(StringshaderCode)throwsException{

vertexShaderId=createShader(shaderCode,GL_VERTEX_SHADER);

publicvoidcreateFragmentShader(StringshaderCode)throwsException{

fragmentShaderId=createShader(shaderCode,GL_FRAGMENT_SHADER);

protectedintcreateShader(StringshaderCode,intshaderType)throwsException{

intshaderId=glCreateShader(shaderType);

if(shaderId==0){

thrownewException("Errorcreatingshader.Type:"+shaderType);

glShaderSource(shaderId,shaderCode);

glCompileShader(shaderId);

if(glGetShaderi(shaderId,GL_COMPILE_STATUS)==0){

thrownewException("ErrorcompilingShadercode:"+glGetShaderInfoLog(s

haderId,1024));

glAttachShader(programId,shaderId);

returnshaderId;

publicvoidlink()throwsException{

glLinkProgram(programId);

if(glGetProgrami(programId,GL_LINK_STATUS)==0){

thrownewException("ErrorlinkingShadercode:"+glGetProgramInfoLog(pr

ogramId,1024));

if(vertexShaderId!=0){

glDetachShader(programId,vertexShaderId);

if(fragmentShaderId!=0){

glDetachShader(programId,fragmentShaderId);

glValidateProgram(programId);

if(glGetProgrami(programId,GL_VALIDATE_STATUS)==0){

System.err.println("WarningvalidatingShadercode:"+glGetProgramInfoLo

g(programId,1024));

publicvoidbind(){

glUseProgram(programId);

Rendering

publicvoidunbind(){

glUseProgram(0);

publicvoidcleanup(){

unbind();

if(programId!=0){

glDeleteProgram(programId);

TheconstructoroftheShaderProgramcreatesanewprograminOpenGLandprovidesmethodstoaddvertexandfragmentshaders.ThoseshadersarecompiledandattachedtotheOpenGLprogram.Whenallshadersareattachedthelinkmethodshouldbeinvokedwhichlinksallthecodeandverifiesthateverythinghasbeendonecorrectly.

Oncetheshaderprogramhasbeenlinked,thecompiledvertexandfragmentshaderscanbefreedup(bycallingglDetachShader)

Regardingverification,thisisdonethroughtheglValidateProgramcall.Thismethodisusedmainlyfordebuggingpurposes,anditshouldberemovedwhenyourgamereachesproductionstage.ThismethodtriestovalidateiftheshaderiscorrectgiventhecurrentOpenGLstate.Thismeans,thatvalidationmayfailinsomecaseseveniftheshaderiscorrect,duetothefactthatthecurrentstateisnotcompleteenoughtoruntheshader(somedatamayhavenotbeenuploadedyet).So,insteadoffailing,wejustprintanerrormessagetothestandarderroroutput.

ShaderProgramalsoprovidesmethodstoactivatethisprogramforrendering(bind)andtostopusingit(unbind).Finallyitprovidesacleanupmethodtofreealltheresourceswhentheyarenolongerneeded.

Sincewehaveacleanupmethod,letuschangeourIGameLogicinterfaceclasstoaddacleanupmethod:

voidcleanup();

Thismethodwillbeinvokedwhenthegameloopfinishes,soweneedtomodifytherunmethodoftheGameEngineclass:

Rendering

@Override

publicvoidrun(){

init();

gameLoop();

}finally{

cleanup();

Nowwecanuseorshadersinordertodisplayatriangle.WewilldothisintheinitmethodofourRendererclass.Firstofall,wecreatetheshaderprogram:

shaderProgram=newShaderProgram();

shaderProgram.createVertexShader(Utils.loadResource("/vertex.vs"));

shaderProgram.createFragmentShader(Utils.loadResource("/fragment.fs"));

shaderProgram.link();

Wehavecreatedautilityclasswhichbynowprovidesamethodtoretrievethecontentsofafilefromtheclasspath.Thismethodisusedtoretrievethecontentsofourshaders.

Nowwecandefineourtriangleasanarrayoffloats.Wecreateasinglefloatarraywhichwilldefinetheverticesofthetriangle.Asyoucanseethere’snostructureinthatarray.Asitisrightnow,OpenGLcannotknowthestructureofthatdata.It’sjustasequenceoffloats:

float[]vertices=newfloat[]{

0.0f,0.5f,0.0f,

-0.5f,-0.5f,0.0f,

0.5f,-0.5f,0.0f

Thefollowingpicturedepictsthetriangleinourcoordinatessystem.

Rendering

Nowthatwehaveourcoordinates,weneedtostorethemintoourgraphicscardandtellOpenGLaboutthestructure.Wewillintroducenowtwoimportantconcepts,VertexArrayObjects(VAOs)andVertexBufferObject(VBOs).Ifyougetlostinthenextcodefragmentsrememberthatattheendwhatwearedoingissendingthedatathatmodelstheobjectswewanttodrawtothegraphicscardmemory.Whenwestoreitwegetanidentifierthatservesuslatertorefertoitwhiledrawing.

LetusfirststartwithVertexBufferObject(VBOs).AVBOisjustamemorybufferstoredinthegraphicscardmemorythatstoresvertices.Thisiswherewewilltransferourarrayoffloatsthatmodelatriangle.Aswesaidbefore,OpenGLdoesnotknowanythingaboutourdatastructure.Infactitcanholdnotjustcoordinatesbutotherinformation,suchastextures,colour,etc.AVertexArrayObjects(VAOs)isanobjectthatcontainsoneormoreVBOswhichareusuallycalledattributelists.Eachattributelistcanholdonetypeofdata:position,colour,texture,etc.Youarefreetostorewhicheveryouwantineachslot.

AVAOislikeawrapperthatgroupsasetofdefinitionsforthedatathatisgoingtobestoredinthegraphicscard.WhenwecreateaVAOwegetanidentifier.Weusethatidentifiertorenderitandtheelementsitcontainsusingthedefinitionswespecifiedduringitscreation.

Soletuscontinuecodingourexample.ThefirstthingthatwemustdoistostoreourarrayoffloatsintoaFloatBuffer.ThisismainlyduetothefactthatwemustinterfacewiththeOpenGLlibrary,whichisC-based,sowemusttransformourarrayoffloatsintosomethingthatcanbemanagedbythelibrary.

FloatBufferverticesBuffer=MemoryUtil.memAllocFloat(vertices.length);

verticesBuffer.put(vertices).flip();

Rendering

WeusetheMemoryUtilclasstocreatethebufferinoff-heapmemorysothatit'saccessiblebytheOpenGLlibrary.Afterwehavestoredthedata(withtheputmethod)weneedtoresetthepositionofthebuffertothe0positionwiththeflipmethod(thatis,wesaythatwe’vefinishingwritingtoit).Remember,thatJavaobjects,areallocatedinaspacecalledtheheap.TheheapisalargebunchofmemoryreservedintheJVM'sprocessmemory.Memorystoredintheheapcannotbeaccessedbynativecode(JNI,themechanismthatallowscallingnativecodefromJavadoesnotallowthat).TheonlywayofsharingmemorydatabetweenJavaandnativecodeisbydirectlyallocatingmemoryinJava.

IfyoucomefrompreviousversionsofLWJGLit'simportanttostressoutafewtopics.YoumayhavenoticedthatwedonotusetheutilityclassBufferUtilstocreatethebuffers.InsteadweusetheMemoryUtilclass.ThisisduetothefactthatBufferUtilswasnotveryefficient,andhasbeenmantainedonlyforbackwardscompatibility.Instead,LWJGL3proposestwomethodsforbuffermanagement:

Auto-managedbuffers,thatis,buffersthatareautomaticallycollectedbytheGarbageCollector.Thesebuffersaremainlyusedforshortlivedoperations,orfordatathatistransferredtotheGPUanddoesnotneedtobepresentintheprocessmemory.Thisisachievedbyusingtheorg.lwjgl.system.MemoryStackclass.Manuallymanagedbuffers.Inthiscaseweneedtocarefulleyfreethemoncewearefinished.Thesebuffersareintendedforlongtimeoperationsorforlargeamountsofdata.ThisisachievedbyusingtheMemoryUtilclass.

Youcanconsultthedetailshere:https://blog.lwjgl.org/memory-management-in-lwjgl-3/.

Inthiscase,ourdataissenttotheGPUsowecoulduseauto-managedbuffers.Butsince,lateron,wewillusethemtoholdpotentiallylargevolumesofdatawewillneedtomanuallymanagethem.ThisisthereasonwhyweareusingtheMemoryUtilclassandthus,whywearefreeingthebufferinafinallyblock.Innextchapterswewilllearnhowtouseauto-managedbuffers.

NowweneedtocreatetheVAOandbindit.

vaoId=glGenVertexArrays();

glBindVertexArray(vaoId);

ThenweneedtocreatetheVBO,binditandputthedataintoit.

vboId=glGenBuffers();

glBindBuffer(GL_ARRAY_BUFFER,vboId);

glBufferData(GL_ARRAY_BUFFER,verticesBuffer,GL_STATIC_DRAW);

memFree(verticesBuffer);

Rendering

Nowcomesthemostimportantpart.WeneedtodefinethestructureofourdataandstoreitinoneoftheattributelistsoftheVAO.Thisisdonewiththefollowingline.

glVertexAttribPointer(0,3,GL_FLOAT,false,0,0);

Theparametersare:

index:Specifiesthelocationwheretheshaderexpectsthisdata.size:Specifiesthenumberofcomponentspervertexattribute(from1to4).Inthiscase,wearepassing3Dcoordinates,soitshouldbe3.type:Specifiesthetypeofeachcomponentinthearray,inthiscaseafloat.normalized:Specifiesifthevaluesshouldbenormalizedornot.stride:Specifiesthebyteoffsetbetweenconsecutivegenericvertexattributes.(Wewillexplainitlater).offset:Specifiesanoffsettothefirstcomponentinthebuffer.

AfterwearefinishedwithourVBOwecanunbinditandtheVAO(bindthemto0)

//UnbindtheVBO

glBindBuffer(GL_ARRAY_BUFFER,0);

//UnbindtheVAO

glBindVertexArray(0);

Oncethishasbeencompletedwemustfreetheoff-heapmemorythatwasallocatedbytheFloatBuffer.ThisisdonebymanuallycallingmemFree,asJavagarbagecollectionwillnotcleanupoff-heapallocations.

if(verticesBuffer!=null){

MemoryUtil.memFree(verticesBuffer);

That’sallthecodethatshouldbeinourinitmethod.Ourdataisalreadyinthegraphicscard,readytobeused.Weonlyneedtomodifyourrendermethodtouseiteachrenderstepduringourgameloop.

Rendering

clear();

shaderProgram.bind();

//BindtotheVAO

glEnableVertexAttribArray(0);

//Drawthevertices

glDrawArrays(GL_TRIANGLES,0,3);

//Restorestate

glDisableVertexAttribArray(0);

shaderProgram.unbind();

Asyoucanseewejustclearthewindow,bindtheshaderprogram,bindtheVAO,drawtheverticesstoredintheVBOassociatedtotheVAOandrestorethestate.That’sit.

WealsoaddedacleanupmethodtoourRendererclasswhichfreesacquiredresources.

if(shaderProgram!=null){

shaderProgram.cleanup();

//DeletetheVBO

glDeleteBuffers(vboId);

//DeletetheVAO

glDeleteVertexArrays(vaoId);

And,that’sall!Ifyoufollowedthestepscarefullyyouwillseesomethinglikethis.

Rendering

Ourfirsttriangle!Youmaythinkthatthiswillnotmakeitintothetoptengamelist,andyouwillbetotallyright.Youmayalsothinkthatthishasbeentoomuchworkfordrawingaboringtriangle.Butkeepinmindthatweareintroducingkeyconceptsandpreparingthebaseinfrastructuretodomorecomplexthings.Pleasebepatientandcontinuereading.

Rendering

MoreonRenderingInthischapterwewillcontinuetalkingabouthowOpenGLrendersthings.Inordertotidyupourcodealittlebitlet’screateanewclasscalledMeshwhich,takingasaninputanarrayofpositions,createstheVBOandVAOobjectsneededtoloadthatmodelintothegraphicscard.

importjava.nio.FloatBuffer;

importorg.lwjgl.system.MemoryUtil;

publicclassMesh{

privatefinalintvaoId;

privatefinalintvboId;

privatefinalintvertexCount;

publicMesh(float[]positions){

FloatBufferverticesBuffer=null;

verticesBuffer=MemoryUtil.memAllocFloat(positions.length);

vertexCount=positions.length/3;

verticesBuffer.put(positions).flip();

vaoId=glGenVertexArrays();

glBufferData(GL_ARRAY_BUFFER,verticesBuffer,GL_STATIC_DRAW);

}finally{

if(verticesBuffer!=null){

MemoryUtil.memFree(verticesBuffer);

MoreonRendering

publicintgetVaoId(){

returnvaoId;

publicintgetVertexCount(){

returnvertexCount;

publicvoidcleanUp(){

//DeletetheVBO

glDeleteBuffers(vboId);

//DeletetheVAO

WewillcreateourMeshinstanceinourDummyGameclass,removingtheVAOandVBOcodefromRendererinitmethod.OurrendermethodintheRendererclasswillacceptalsoaMeshinstancetorender.ThecleanupmethodwillalsobesimplifiedsincetheMeshclassalreadyprovidesoneforfreeingVAOandVBOresources.

MoreonRendering

publicvoidrender(Meshmesh){

clear();

//Drawthemesh

glBindVertexArray(mesh.getVaoId());

glDrawArrays(GL_TRIANGLES,0,mesh.getVertexCount());

//Restorestate

if(shaderProgram!=null){

shaderProgram.cleanup();

Oneimportantthingtonoteisthisline:

OurMeshcountsthenumberofverticesbydividingthepositionarrayby3(sincewearepassingX,YandZcoordinates)).Nowthatwecanrendermorecomplexshapes,letustrytorenderamorecomplexshape.Letusrenderaquad.Aquadcanbeconstructedbyusingtwotrianglesasshowninthenextfigure.

MoreonRendering

Asyoucanseeeachofthetwotrianglesiscomposedofthreevertices.ThefirstoneformedbytheverticesV1,V2andV4(theorangeone)andthesecondoneformedbytheverticesV4,V2andV3(thegreenone).Verticesarespecifiedinacounter-clockwiseorder,sothefloatarraytobepassedwillbe[V1,V2,V4,V4,V2,V3].Thus,theinitmethodinourDummyGameclasswillbe:

@Override

renderer.init();

float[]positions=newfloat[]{

-0.5f,0.5f,0.0f,

-0.5f,-0.5f,0.0f,

0.5f,0.5f,0.0f,

-0.5f,-0.5f,0.0f,

0.5f,-0.5f,0.0f,

mesh=newMesh(positions);

Nowyoushouldseeaquadrenderedlikethis:

MoreonRendering

Arewedoneyet?Unfortunatelynot.Thecodeabovestillpresentssomeissues.Wearerepeatingcoordinatestorepresentthequad.WearepassingtwiceV2andV4coordinates.Withthissmallshapeitmaynotseemabigdeal,butimagineamuchmorecomplex3Dmodel.Wewouldberepeatingthecoordinatesmanytimes.Keepinmindalsothatnowwearejustusingthreefloatsforrepresentingthepositionofavertex.Butlateronwewillneedmoredatatorepresentthetexture,etc.Alsotakeintoconsiderationthatinmorecomplexshapesthenumberofverticessharedbetweentrianglescanbeevenhigherlikeinthefigurebelow(whereavertexcanbesharedbetweensixtriangles).

AttheendwewouldneedmuchmorememorybecauseofthatduplicateinformationandthisiswhereIndexBufferscometotherescue.Fordrawingthequadweonlyneedtospecifyeachvertexoncethisway:V1,V2,V3,V4).Eachvertexhasapositioninthearray.V1hasposition0,V2hasposition1,etc:

V1 V2 V3 V4

0 1 2 3

Thenwespecifytheorderinwhichthoseverticesshouldbedrawnbyreferringtotheirposition:

0 1 3 3 1 2

V1 V2 V4 V4 V2 V3

SoweneedtomodifyourMeshclasstoacceptanotherparameter,anarrayofindices,andnowthenumberofverticestodrawwillbethelengthofthatindicesarray.

MoreonRendering

publicMesh(float[]positions,int[]indices){

vertexCount=indices.length;

AfterwehavecreatedourVBOthatstoresthepositions,weneedtocreateanotherVBOwhichwillholdtheindices.SowerenametheidentifierthatholdstheidentifierforthepositionsVBOandcreateanewonefortheindexVBO(idxVboId).TheprocessofcreatingthatVBOissimilarbutthetypeisnowGL_ELEMENT_ARRAY_BUFFER.

idxVboId=glGenBuffers();

indicesBuffer=MemoryUtil.memAllocInt(indices.length);

indicesBuffer.put(indices).flip();

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,idxVboId);

glBufferData(GL_ELEMENT_ARRAY_BUFFER,indicesBuffer,GL_STATIC_DRAW);

memFree(indicesBuffer);

SincewearedealingwithintegersweneedtocreateanIntBufferinsteadofaFloatBuffer.

Andthat’sit.TheVAOwillcontainnowtwoVBOs,oneforpositionsandanotheronethatwillholdtheindicesandthatwillbeusedforrendering.OurcleanupmethodinourMeshclassmusttakeintoconsiderationthatthereisanotherVBOtofree.

publicvoidcleanUp(){

//DeletetheVBOs

glDeleteBuffers(posVboId);

glDeleteBuffers(idxVboId);

//DeletetheVAO

Finally,weneedtomodifyourdrawingcallthatusedtheglDrawArraysmethod:

ToanothercallthatusesthemethodglDrawElements:

glDrawElements(GL_TRIANGLES,mesh.getVertexCount(),GL_UNSIGNED_INT,0);

Theparametersofthatmethodare:

MoreonRendering

mode:Specifiestheprimitivesforrendering,trianglesinthiscase.Nochangeshere.count:Specifiesthenumberofelementstoberendered.type:Specifiesthetypeofvalueintheindicesdata.Inthiscaseweareusingintegers.indices:Specifiestheoffsettoapplytotheindicesdatatostartrendering.

Andnowwecanuseournewerandmuchmoreefficientmethodofdrawingcomplexmodelsbyjustspecifyingtheindices.

renderer.init();

-0.5f,0.5f,0.0f,

-0.5f,-0.5f,0.0f,

0.5f,-0.5f,0.0f,

0.5f,0.5f,0.0f,

int[]indices=newint[]{

0,1,3,3,1,2,

mesh=newMesh(positions,indices);

Nowlet’saddsomecolourtoourexample.WewillpassanotherarrayoffloatstoourMeshclasswhichholdsthecolourforeachcoordinateinthequad.

publicMesh(float[]positions,float[]colours,int[]indices){

Withthatarray,wewillcreateanotherVBOwhichwillbeassociatedtoourVAO.

//ColourVBO

colourVboId=glGenBuffers();

FloatBuffercolourBuffer=memAllocFloat(colours.length);

colourBuffer.put(colours).flip();

glBindBuffer(GL_ARRAY_BUFFER,colourVboId);

glBufferData(GL_ARRAY_BUFFER,colourBuffer,GL_STATIC_DRAW);

memFree(colourBuffer);

PleasenoticethatintheglVertexAttribPointercall,thefirstparameterisnowa“1”.Thisisthelocationwhereourshaderwillbeexpectingthatdata.(Ofcourse,sincewehaveanotherVBOweneedtofreeitinthecleanupmethod).

Thenextstepistomodifytheshaders.Thevertexshaderisnowexpectingtwoparameters,thecoordinates(inlocation0)andthecolour(inlocation1).Thevertexshaderwilljustoutputthereceivedcoloursoitcanbeprocessedbythefragmentshader.

MoreonRendering

#version330

layout(location=1)invec3inColour;

outvec3exColour;

voidmain()

gl_Position=vec4(position,1.0);

exColour=inColour;

Andnowourfragmentshaderreceivesasaninputthecolourprocessedbyourvertexshaderandusesittogeneratethecolour.

#version330

invec3exColour;

outvec4fragColor;

voidmain()

fragColor=vec4(exColour,1.0);

Thelastimportantthingtodoistomodifyourrenderingcodetousethatsecondarrayofdata:

publicvoidrender(Windowwindow,Meshmesh){

clear();

//Drawthemesh

glBindVertexArray(mesh.getVaoId());

glDrawElements(GL_TRIANGLES,mesh.getVertexCount(),GL_UNSIGNED_INT,0);

MoreonRendering

YoucanseethatweneedtoenabletheVAOattributeatposition1tobeusedduringrendering.WecannowpassanarrayofcolourslikethistoourMeshclassinordertoaddsomecolourtoourquad.

float[]colours=newfloat[]{

0.5f,0.0f,0.0f,

0.0f,0.5f,0.0f,

0.0f,0.0f,0.5f,

0.0f,0.5f,0.5f,

Andwewillgetafancycolouredquadlikethis.

MoreonRendering

Transformations

ProjectingLet’sgetbacktoournicecolouredquadwecreatedinthepreviouschapter.Ifyoulookcarefullyatit,itmoreresemblesarectangle.Youcanevenchangethewidthofthewindowfrom600pixelsto900andthedistortionwillbemoreevident.What’shappeninghere?

Ifyourevisitourvertexshadercodewearejustpassingourcoordinatesdirectly.Thatis,whenwesaythatavertexhasavalueforcoordinatexof0.5wearesayingtoOpenGLtodrawitatxposition0.5onourscreen.ThefollowingfigureshowstheOpenGLcoordinates(justforxandyaxis).

Thosecoordinatesaremapped,consideringourwindowsize,towindowcoordinates(whichhavetheoriginatthetop-leftcornerofthepreviousfigure).So,ifourwindowhasasizeof900x480,OpenGLcoordinates(1,0)willbemappedtocoordinates(900,0)creatingarectangleinsteadofaquad.

Transformations

But,theproblemismoreseriousthanthat.Modifythezcoordinateofourquadfrom0.0to1.0andto-1.0.Whatdoyousee?Thequadisexactlydrawninthesameplacenomatterifit’sdisplacedalongthezaxis.Whyisthishappening?Objectsthatarefurtherawayshouldbedrawnsmallerthanobjectsthatarecloser.Butwearedrawingthemwiththesamexandycoordinates.

But,wait.Shouldthisnotbehandledbythezcoordinate?Theanswerisyesandno.ThezcoordinatetellsOpenGLthatanobjectiscloserorfartheraway,butOpenGLdoesnotknowanythingaboutthesizeofyourobject.Youcouldhavetwoobjectsofdifferentsizes,onecloserandsmallerandonebiggerandfurtherthatcouldbeprojectedcorrectlyontothescreenwiththesamesize(thosewouldhavesamexandycoordinatesbutdifferentz).OpenGLjustusesthecoordinateswearepassing,sowemusttakecareofthis.Weneedtocorrectlyprojectourcoordinates.

Nowthatwehavediagnosedtheproblem,howdowedothis?Theanswerisusingaprojectionmatrixorfrustum.Theprojectionmatrixwilltakecareoftheaspectratio(therelationbetweensizeandheight)ofourdrawingareasoobjectswon’tbedistorted.Italsowillhandlethedistancesoobjectsfarawayfromuswillbedrawnsmaller.Theprojectionmatrixwillalsoconsiderourfieldofviewandhowfarthemaximumdistanceisthatshouldbedisplayed.

Forthosenotfamiliarwithmatrices,amatrixisabi-dimensionalarrayofnumbersarrangedincolumnsandrows.Eachnumberinsideamatrixiscalledanelement.Amatrixorderisthenumberofrowsandcolumns.Forinstance,hereyoucanseea2x2matrix(2rowsand2columns).

Matriceshaveanumberofbasicoperationsthatcanbeappliedtothem(suchasaddition,multiplication,etc.)thatyoucanconsultinanymathsbook.Themaincharacteristicsofmatrices,relatedto3Dgraphics,isthattheyareveryusefultotransformpointsinthespace.

Youcanthinkabouttheprojectionmatrixasacamera,whichhasafieldofviewandaminimumandmaximumdistance.Thevisionareaofthatcamerawillbeatruncatedpyramid.Thefollowingpictureshowsatopviewofthatarea.

Transformations

Aprojectionmatrixwillcorrectlymap3Dcoordinatessotheycanbecorrectlyrepresentedona2Dscreen.Themathematicalrepresentationofthatmatrixisasfollows(don’tbescared).

Whereaspectratioistherelationbetweenourscreenwidthandourscreenheight(a = width/height).Inordertoobtaintheprojectedcoordinatesofagivenpointwejustneedtomultiplytheprojectionmatrixbytheoriginalcoordinates.Theresultwillbeanothervectorthatwillcontaintheprojectedversion.

Soweneedtohandleasetofmathematicalentitiessuchasvectors,matricesandincludetheoperationsthatcanbedoneonthem.Wecouldchoosetowriteallthatcodebyourownfromscratchoruseanalreadyexistinglibrary.WewillchoosetheeasypathanduseaspecificlibraryfordealingwithmathoperationsinLWJGLwhichiscalledJOML(JavaOpenGLMathLibrary).Inordertousethatlibrarywejustneedtoaddanotherdependencytoourpom.xmlfile.

<version>${joml.version}</version>

</dependency>

Anddefinetheversionofthelibrarytouse.

Transformations

<joml.version>1.7.1</joml.version>

</properties>

Nowthateverythinghasbeensetuplet’sdefineourprojectionmatrix.WewillcreateaninstanceoftheclassMatrix4f(providedbytheJOMLlibrary)inourRendererclass.TheMatrix4fclassprovidesamethodtosetupaprojectionmatrixnamedperspective.Thismethodneedsthefollowingparameters:

FieldofView:TheFieldofViewangleinradians.WewilldefineaconstantthatholdsthatvalueAspectRatio.Distancetothenearplane(z-near)Distancetothefarplane(z-far).

WewillinstantiatethatmatrixinourinitmethodsoweneedtopassareferencetoourWindowinstancetogetitssize(youcanseeitinthesourcecode).Thenewconstantsandvariablesare:

*FieldofViewinRadians

privatestaticfinalfloatFOV=(float)Math.toRadians(60.0f);

privatestaticfinalfloatZ_NEAR=0.01f;

privatestaticfinalfloatZ_FAR=1000.f;

privateMatrix4fprojectionMatrix;

Theprojectionmatrixiscreatedasfollows:

floataspectRatio=(float)window.getWidth()/window.getHeight();

projectionMatrix=newMatrix4f().perspective(FOV,aspectRatio,

Z_NEAR,Z_FAR);

Atthismomentwewillignorethattheaspectratiocanchange(byresizingourwindow).Thiscouldbecheckedintherendermethodtochangeourprojectionmatrixaccordingly.

Nowthatwehaveourmatrix,howdoweuseit?Weneedtouseitinourshader,anditshouldbeappliedtoallthevertices.Atfirst,youcouldthinkofbundlingitinthevertexinput(likethecoordinatesandthecolours).Inthiscasewewouldbewastinglotsofspacesince

Transformations

theprojectionmatrixshouldnotchangeevenbetweenseveralrendercalls.Youmayalsothinkofmultiplyingtheverticesbythematrixinthejavacode.Butthen,ourVBOswouldbeuselessandwewillnotbeusingtheprocesspoweravailableinthegraphicscard.

Theansweristouse“uniforms”.UniformsareglobalGLSLvariablesthatshaderscanuseandthatwewillemploytocommunicatewiththem.

SoweneedtomodifyourvertexshadercodeanddeclareanewuniformcalledprojectionMatrixanduseittocalculatetheprojectedposition.

#version330

outvec3exColour;

uniformmat4projectionMatrix;

voidmain()

gl_Position=projectionMatrix*vec4(position,1.0);

exColour=inColour;

AsyoucanseewedefineourprojectionMatrixasa4x4matrixandthepositionisobtainedbymultiplyingitbyouroriginalcoordinates.Nowweneedtopassthevaluesoftheprojectionmatrixtoourshader.First,weneedtogetareferencetotheplacewheretheuniformwillholditsvalues.

ThisisdonewiththemethodglGetUniformLocationwhichreceivestwoparameters:

Theshaderprogramidentifier.Thenameoftheuniform(itshouldmatchtheoncedefinedintheshadercode).

Thismethodreturnsanidentifierholdingtheuniformlocation.Sincewemayhavemorethanoneuniform,wewillstorethoselocationsinaMapindexedbythelocation'sname(Wewillneedthatlocationnumberlater).SointheShaderProgramclasswecreateanewvariablethatholdsthoseidentifiers:

privatefinalMap<String,Integer>uniforms;

Thisvariablewillbeinitializedinourconstructor:

uniforms=newHashMap<>();

Transformations

Andfinallywecreateamethodtosetupnewuniformsandstoretheobtainedlocation.

publicvoidcreateUniform(StringuniformName)throwsException{

intuniformLocation=glGetUniformLocation(programId,

uniformName);

if(uniformLocation<0){

thrownewException("Couldnotfinduniform:"+

uniformName);

uniforms.put(uniformName,uniformLocation);

Now,inourRendererclasswecaninvokethecreateUniformmethodoncetheshaderprogramhasbeencompiled(inthiscase,wewilldoitoncetheprojectionmatrixhasbeeninstantiated).

shaderProgram.createUniform("projectionMatrix");

Atthismoment,wealreadyhaveaholderreadytobesetupwithdatatobeusedasourprojectionmatrix.Sincetheprojectionmatrixwon’tchangebetweenrenderingcallswemaysetupthevaluesrightafterthecreationoftheuniform.Butwewilldoitinourrendermethod.Youwillseelaterthatwemayreusethatuniformtodoadditionaloperationsthatneedtobedoneineachrendercall.

WewillcreateanothermethodinourShaderProgramclasstosetupthedata,namedsetUniform.Basicallywetransformourmatrixintoa4x4FloatBufferbyusingtheutilitymethodsprovidedbytheJOMLlibraryandsendthemtothelocationwestoredinourlocationsmap.

publicvoidsetUniform(StringuniformName,Matrix4fvalue){

//Dumpthematrixintoafloatbuffer

try(MemoryStackstack=MemoryStack.stackPush()){

FloatBufferfb=stack.mallocFloat(16);

value.get(fb);

glUniformMatrix4fv(uniforms.get(uniformName),false,fb);

Asyoucanseewearecreatingbuffersinadifferentwayhere.Weareusingauto-managedbuffers,andallocatingthemonthestack.Thisisduetothefactthatthesizeofthisbufferissmallandthatitwillnotbeusedbeyondthismethod.Thus,weusetheMemoryStackclass.

NowwecanusethatmethodintheRendererclassintherendermethod,aftertheshaderprogramhasbeenbound:

Transformations

shaderProgram.setUniform("projectionMatrix",projectionMatrix);

Wearealmostdone.Wecannowshowthequadcorrectlyrendered.Soyoucannowlaunchyourprogramandwillobtaina....blackbackgroundwithoutanycolouredquad.What’shappening?Didwebreaksomething?Well,actuallyno.Rememberthatwearenowsimulatingtheeffectofacameralookingatourscene.Andweprovidedtwodistances,onetothefarthestplane(equalto1000f)andonetotheclosestplane(equalto0.01f).Ourcoordinatesare:

-0.5f,0.5f,0.0f,

-0.5f,-0.5f,0.0f,

0.5f,-0.5f,0.0f,

0.5f,0.5f,0.0f,

Thatis,ourzcoordinatesareoutsidethevisiblezone.Let’sassignthemavalueof-0.05f.Nowyouwillseeagiantgreensquarelikethis:

Whatishappeningnowisthatwearedrawingthequadtooclosetoourcamera.Weareactuallyzoomingintoit.Ifweassignnowavalueof-1.05ftothezcoordinatewecannowseeourcolouredquad.

Transformations

Ifwecontinuepushingthequadbackwardswewillseeitbecomingsmaller.Noticealsothatourquaddoesnotresemblearectangleanymore.

ApplyingTransformationsLet’srecallwhatwe’vedonesofar.Wehavelearnedhowtopassdatainanefficientformattoourgraphicscard,andhowtoprojectthatdataandassignthemcoloursusingvertexandfragmentsshaders.Nowweshouldstartdrawingmorecomplexmodelsinour3Dspace.Butinordertodothatwemustbeabletoloadanarbitrarymodelandrepresentitinour3Dspaceataspecificposition,withtheappropriatesizeandtherequiredrotation.

Sorightnow,inordertodothatrepresentationweneedtoprovidesomebasicoperationstoactuponanymodel:

Translation:Moveanobjectbysomeamountonanyofthethreeaxes.Rotation:Rotateanobjectbysomeamountofdegreesaroundanyofthethreeaxes.Scale:Adjustthesizeofanobject.

Theoperationsdescribedaboveareknownastransformations.Andyouprobablemaybeguessingthatthewaywearegoingtoachievethatisbymultiplyingourcoordinatesbyasetofmatrices(onefortranslation,oneforrotationandoneforscaling).Thosethreematriceswillbecombinedintoasinglematrixcalledworldmatrixandpassedasauniformtoourvertexshader.

Thereasonwhyitiscalledworldmatrixisbecausewearetransformingfrommodelcoordinatestoworldcoordinates.Whenyouwilllearnaboutloading3Dmodelsyouwillseethatthosemodelsaredefinedintheirowncoordinatesystems.Theydon’tknowthesizeofyour3Dspaceandtheyneedtobeplacedinit.Sowhenwemultiplyourcoordinatesbyourmatrixwhatwearedoingistransformingfromacoordinatesystem(themodelone)toanothercoordinatesystem(theoneforour3Dworld).

Thatworldmatrixwillbecalculatedlikethis(theorderisimportantsincemultiplicationusingmatricesisnotcommutative):

Transformations

WorldMatrix TranslationMatrix RotationMatrix ScaleMatrix

Ifweincludeourprojectionmatrixinthetransformationmatrixitwouldbelikethis:

Transf = ProjMatrix TranslationMatrix RotationMatrix ScaleMatrix = ProjMatr

Thetranslationmatrixisdefinedlikethis:

TranslationMatrixParameters:

dx:Displacementalongthexaxis.dy:Displacementalongtheyaxis.dz:Displacementalongthezaxis.

Thescalematrixisdefinedlikethis:

ScaleMatrixParameters:

sx:Scalingalongthexaxis.sy:Scalingalongtheyaxis.sz:Scalingalongthezaxis.

Therotationmatrixismuchmorecomplex.Butkeepinmindthatitcanbeconstructedbythemultiplicationof3rotationmatricesforasingleaxis,each.

Now,inordertoapplythoseconceptsweneedtorefactorourcodealittlebit.Inourgamewewillbeloadingasetofmodelswhichcanbeusedtorendermanyobjectsatdifferentpositionsaccordingtoourgamelogic(imagineaFPSgamewhichloadsthreemodelsfordifferentenemies.Thereareonlythreemodelsbutusingthesemodelswecandrawasmanyenemiesaswewant).DoweneedtocreateaVAOandthesetofVBOsforeachofthoseobjects?Theanswerisno.Weonlyneedtoloaditoncepermodel.Whatweneedtodoistodrawitindependentlyaccordingtoitsposition,sizeandrotation.Weneedtotransformthosemodelswhenwearerenderingthem.

SowewillcreateanewclassnamedGameItemthatwillholdareferencetoamodel,toaMeshinstance.AGameIteminstancewillhavevariablesforstoringitsposition,itsrotationstateanditsscale.Thisisthedefinitionofthatclass.

[ ] [ ] [ ]

[ ] [ ] [ ] [ ] [

⎣⎢⎢⎡1000

1 ⎦⎥⎥⎤

⎣⎢⎢⎡sx

0001⎦⎥⎥⎤

Transformations

packageorg.lwjglb.engine;

importorg.joml.Vector3f;

importorg.lwjglb.engine.graph.Mesh;

publicclassGameItem{

privatefinalMeshmesh;

privatefinalVector3fposition;

privatefloatscale;

privatefinalVector3frotation;

publicGameItem(Meshmesh){

this.mesh=mesh;

position=newVector3f(0,0,0);

scale=1;

rotation=newVector3f(0,0,0);

publicVector3fgetPosition(){

returnposition;

publicvoidsetPosition(floatx,floaty,floatz){

this.position.x=x;

this.position.y=y;

this.position.z=z;

publicfloatgetScale(){

returnscale;

publicvoidsetScale(floatscale){

this.scale=scale;

publicVector3fgetRotation(){

returnrotation;

publicvoidsetRotation(floatx,floaty,floatz){

this.rotation.x=x;

this.rotation.y=y;

this.rotation.z=z;

publicMeshgetMesh(){

returnmesh;

Transformations

WewillcreateanotherclasswhichwilldealwithtransformationsnamedTransformation.

importorg.joml.Matrix4f;

publicclassTransformation{

privatefinalMatrix4fprojectionMatrix;

privatefinalMatrix4fworldMatrix;

publicTransformation(){

worldMatrix=newMatrix4f();

projectionMatrix=newMatrix4f();

publicfinalMatrix4fgetProjectionMatrix(floatfov,floatwidth,floatheight,fl

oatzNear,floatzFar){

floataspectRatio=width/height;

projectionMatrix.identity();

projectionMatrix.perspective(fov,aspectRatio,zNear,zFar);

returnprojectionMatrix;

publicMatrix4fgetWorldMatrix(Vector3foffset,Vector3frotation,floatscale){

worldMatrix.identity().translate(offset).

rotateX((float)Math.toRadians(rotation.x)).

rotateY((float)Math.toRadians(rotation.y)).

rotateZ((float)Math.toRadians(rotation.z)).

scale(scale);

returnworldMatrix;

Asyoucanseethisclassgroupstheprojectionandworldmatrices.Givenasetofvectorsthatmodelthedisplacement,rotationandscaleitreturnstheworldmatrix.ThemethodgetWorldMatrixreturnsthematrixthatwillbeusedtotransformthecoordinatesforeachGameIteminstance.ThatclassalsoprovidesamethodthatgetstheprojectionmatrixbasedontheFieldOfView,theaspectratioandthenearandfardistances.

AnimportantthingtonoticeisthatthemulmethodoftheMatrix4fclassmodifiesthematrixinstancewhichthemethodisbeingappliedto.Soifwedirectlymultiplytheprojectionmatrixwiththetransformationmatrixwewillmodifytheprojectionmatrixitself.Thisiswhy

Transformations

wearealwaysinitializingeachmatrixtotheidentitymatrixuponeachcall.

IntheRendererclass,intheconstructormethod,wejustinstantiatetheTransformationwithnoargumentsandintheinitmethodwejustcreatetheuniform.

publicRenderer(){

transformation=newTransformation();

publicvoidinit(Windowwindow)throwsException{

//....Somecodebefore...

//Createuniformsforworldandprojectionmatrices

shaderProgram.createUniform("projectionMatrix");

shaderProgram.createUniform("worldMatrix");

window.setClearColor(0.0f,0.0f,0.0f,0.0f);

IntherendermethodofourRendererclasswenowreceiveanarrayofGameItems:

publicvoidrender(Windowwindow,GameItem[]gameItems){

clear();

//UpdateprojectionMatrix

Matrix4fprojectionMatrix=transformation.getProjectionMatrix(FOV,window.getWidt

h(),window.getHeight(),Z_NEAR,Z_FAR);

//RendereachgameItem

for(GameItemgameItem:gameItems){

//Setworldmatrixforthisitem

Matrix4fworldMatrix=

transformation.getWorldMatrix(

gameItem.getPosition(),

gameItem.getRotation(),

gameItem.getScale());

shaderProgram.setUniform("worldMatrix",worldMatrix);

//Renderthemesforthisgameitem

gameItem.getMesh().render();

Transformations

Weupdatetheprojectionmatrixonceperrendercall.Bydoingitthiswaywecandealwithwindowresizeoperations.ThenweiterateovertheGameItemarrayandcreateatransformationmatrixaccordingtotheposition,rotationandscaleofeachofthem.ThismatrixispushedtotheshaderandtheMeshisdrawn.Theprojectionmatrixisthesameforalltheitemstoberendered.Thisisthereasonwhyit’saseparatevariableinourTransformationclass.

WemovedtherenderingcodetodrawaMeshtothisclass:

publicvoidrender(){

//Drawthemesh

glBindVertexArray(getVaoId());

glDrawElements(GL_TRIANGLES,getVertexCount(),GL_UNSIGNED_INT,0);

//Restorestate

OurvertexshaderismodifiedbysimplyaddinganewworldMatrixmatrixanditusesitwiththeprojectionMatrixtocalculatetheposition:

#version330

outvec3exColour;

uniformmat4worldMatrix;

voidmain()

gl_Position=projectionMatrix*worldMatrix*vec4(position,1.0);

exColour=inColour;

Asyoucanseethecodeisexactlythesame.Weareusingtheuniformtocorrectlyprojectourcoordinatestakingintoconsiderationourfrustum,position,scaleandrotationinformation.

Transformations

Anotherimportantthingtothinkaboutis,whydon’twepassthetranslation,rotationandscalematricesinsteadofcombiningthemintoaworldmatrix?Thereasonisthatweshouldtrytolimitthematricesweuseinourshaders.Alsokeepinmindthatthematrixmultiplicationthatwedoinourshaderisdoneoncepereachvertex.TheprojectionmatrixdoesnotchangebetweenrendercallsandtheworldmatrixdoesnotchangeperGameIteminstance.Ifwepassedthetranslation,rotationandscalematricesindependentlywewouldbedoingmanymorematrixmultiplications.Thinkaboutamodelwithtonsofvertices.That’salotofextraoperations.

Butyoumaynowthink,thatiftheworldmatrixdoesnotchangeperGameIteminstance,whydidn'twedothematrixmultiplicationinourJavaclass?WewouldmultiplytheprojectionmatrixandtheworldmatrixjustonceperGameItemandwesenditasasingleuniform.Inthiscasewewouldbesavingmanymoreoperations.Theansweristhatthisisavalidpointrightnow.Butwhenweaddmorefeaturestoourgameenginewewillneedtooperatewithworldcoordinatesintheshadersanyway,soit’sbettertohandlethosetwomatricesinanindependentway.

FinallyweonlyneedtochangetheDummyGameclasstocreateaninstanceofGameItemwithitsassociatedMeshandaddsomelogictotranslate,rotateandscaleourquad.Sinceit’sonlyatestexampleanddoesnotaddtoomuchyoucanfinditinthesourcecodethataccompaniesthisbook.

Transformations

Textures

Createa3DcubeInthischapterwewilllearnhowtoloadtexturesandusethemintherenderingprocess.Inordertoshowalltheconceptsrelatedtotextureswewilltransformthequadthatwehavebeenusinginpreviouschaptersintoa3Dcube.Withthecodebasewehavecreated,inordertodrawacubewejustneedtocorrectlydefinethecoordinatesofacubeanditshouldbedrawncorrectly.

Inordertodrawacubewejustneedtodefineeightvertices.

Sotheassociatedcoordinatesarraywillbelikethis:

Textures

-0.5f,0.5f,0.5f,

-0.5f,-0.5f,0.5f,

0.5f,-0.5f,0.5f,

0.5f,0.5f,0.5f,

-0.5f,0.5f,-0.5f,

0.5f,0.5f,-0.5f,

-0.5f,-0.5f,-0.5f,

0.5f,-0.5f,-0.5f,

Ofcourse,sincewehave4moreverticesweneedtoupdatethearrayofcolours.Justrepeatthefirstfouritemsbynow.

float[]colours=newfloat[]{

0.5f,0.0f,0.0f,

0.0f,0.5f,0.0f,

0.0f,0.0f,0.5f,

0.0f,0.5f,0.5f,

0.5f,0.0f,0.0f,

0.0f,0.5f,0.0f,

0.0f,0.0f,0.5f,

0.0f,0.5f,0.5f,

Finally,sinceacubeismadeofsixfacesweneedtodrawtwelvetriangles(twoperface),soweneedtoupdatetheindicesarray.Rememberthattrianglesmustbedefinedincounter-clockwiseorder.Ifyoudothisbyhand,iseasytomakemistakes.Allwaysputthefacethatyouwanttodefineindicesforinfrontofyou.Then,idenifietheverticesanddrawthetrianglesincounter-clockwiseorder.

Textures

int[]indices=newint[]{

//Frontface

0,1,3,3,1,2,

//TopFace

4,0,3,5,4,3,

//Rightface

3,2,7,5,3,7,

//Leftface

6,1,0,6,0,4,

//Bottomface

2,1,6,2,6,7,

//Backface

7,6,4,7,4,5,

InordertobetterviewthecubewewillchangecodethatrotatesthemodelintheDummyGameclasstorotatealongthethreeaxes.

//Updaterotationangle

floatrotation=gameItem.getRotation().x+1.5f;

if(rotation>360){

rotation=0;

gameItem.setRotation(rotation,rotation,rotation);

Andthat’sall.Wearenowabletodisplayaspinning3Dcube.Youcannowcompileandrunyourexampleandyouwillobtainsomethinglikethis.

Thereissomethingweirdwiththiscube.Somefacesarenotbeingpaintedcorrectly.Whatishappening?Thereasonwhythecubehasthisaspectisthatthetrianglesthatcomposethecubearebeingdrawninasortofrandomorder.Thepixelsthatarefarawayshouldbedrawnbeforepixelsthatarecloser.Thisisnothappeningrightnowandinordertodothatwemustenabledepthtesting.

Textures

ThiscanbedoneintheWindowclassattheendoftheinitmethod:

glEnable(GL_DEPTH_TEST);

Nowourcubeisbeingrenderedcorrectly!

IfyouseethecodeforthispartofthechapteryoumayseethatwehavedoneaminorreorganizationintheMeshclass.TheidentifiersoftheVBOsarenowstoredinalisttoeasilyiterateoverthem.

AddingtexturetothecubeNowwearegoingtoapplyatexturetoourcube.Atextureisanimagewhichisusedtodrawthecolourofthepixelsofacertainmodel.Youcanthinkofatextureasaskinthatiswrappedaroundyour3Dmodel.Whatyoudoisassignpointsintheimagetexturetotheverticesinyourmodel.WiththatinformationOpenGLisabletocalculatethecolourtoapplytotheotherpixelsbasedonthetextureimage.

Thetextureimagedoesnothavetohavethesamesizeasthemodel.Itcanbelargeror

Textures

smaller.OpenGLwillextrapolatethecolourifthepixeltobeprocessedcannotbemappedtoaspecificpointinthetexture.Youcancontrolhowthisprocessisdonewhenaspecifictextureiscreated.

Sobasicallywhatwemustdo,inordertoapplyatexturetoamodel,isassigningtexturecoordinatestoeachofourvertices.Thetexturecoordinatesystemisabitdifferentfromthecoordinatesystemofourmodel.Firstofall,wehavea2Dtexturesoourcoordinateswillonlyhavetwocomponents,xandy.Besidesthat,theoriginissetupinthetopleftcorneroftheimageandthemaximumvalueofthexoryvalueis1.

Howdowerelatetexturecoordinateswithourpositioncoordinates?Easy,inthesamewaywepassedthecolourinformation.WesetupaVBOwhichwillhaveatexturecoordinateforeachvertexposition.

Solet’sstartmodifyingthecodebasetousetexturesinour3Dcube.Thefirststepistoloadtheimagethatwillbeusedasatexture.Forthistask,inpreviousversionsofLWJGL,theSlick2Dlibrarywascommonlyused.AtthemomentofthiswritingitseemsthatthislibraryisnotcompatiblewithLWJGL3sowewillneedtofollowamoreverboseapproach.Wewillusealibrarycalledpngdecoder,thus,weneedtodeclarethatdependencyinourpom.xmlfile.

<groupId>org.l33tlabs.twl</groupId>

<artifactId>pngdecoder</artifactId>

<version>${pngdecoder.version}</version>

</dependency>

Anddefinetheversionofthelibrarytouse.

Textures

<pngdecoder.version>1.0</pngdecoder.version>

</properties>

OnethingthatyoumayseeinsomewebpagesisthatthefirstthingwemustdoisenablethetexturesinourOpenGLcontextbycallingglEnable(GL_TEXTURE_2D).Thisistrueifyouareusingthefixed-functionpipepline.SinceweareusingGLSLshadersitisnotrequiredanymore.

NowwewillcreateanewTextureclassthatwillperformallthenecessarystepstoloadatexture.OurtextureimagewillbelocatedintheresourcesfolderandcanbeaccessedasaCLASSPATHresourceandpassedasaninputstreamtothePNGDecoderclass.

PNGDecoderdecoder=newPNGDecoder(

Texture.class.getResourceAsStream(fileName));

ThenweneedtodecodethePNGimageandstoreitscontentintoabufferbyusingthedecodemethodofthePNGDecoderclass.ThePNGimagewillbedecodedinRGBAformat(RGBforRed,Green,BlueandAforAlphaortransparency)whichusesfourbytesperpixel.

Thedecodemethodrequiresthreeparameters:

buffer:TheByteBufferthatwillholdthedecodedimage(sinceeachpixelusesfourbytesitssizewillbe4widthheight).stride:Specifiesthedistanceinbytesfromthestartofalinetothestartofthenextline.Inthiscaseitwillbethenumberofbytesperline.format:Thetargetformatintowhichtheimageshouldbedecoded(RGBA).

ByteBufferbuf=ByteBuffer.allocateDirect(

4*decoder.getWidth()*decoder.getHeight());

decoder.decode(buf,decoder.getWidth()*4,Format.RGBA);

buf.flip();

OneimportantthingtorememberisthatOpenGL,forhistoricalreasons,requiresthattextureimageshaveasize(numberoftexelsineachdimension)ofapoweroftwo(2,4,8,16,....).Somedriversremovethatconstraintbutit’sbettertosticktoittoavoidproblems.

Thenextstepistouploadthetextureintothegraphicscardmemory.Firstofallweneedtocreateanewtextureidentifier.Eachoperationrelatedtothattexturewillusethatidentifiersoweneedtobindit.

Textures

//CreateanewOpenGLtexture

inttextureId=glGenTextures();

//Bindthetexture

glBindTexture(GL_TEXTURE_2D,textureId);

ThenweneedtotellOpenGLhowtounpackourRGBAbytes.Sinceeachcomponentisonebyteinsizeweneedtoaddthefollowingline:

glPixelStorei(GL_UNPACK_ALIGNMENT,1);

Andfinallywecanuploadourtexturedata:

glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA,decoder.getWidth(),

decoder.getHeight(),0,GL_RGBA,GL_UNSIGNED_BYTE,buf);

TheglTextImage2Dmethodhasthefollowingparameters:

target:Specifiesthetargettexture(itstype).Inthiscase:GL_TEXTURE_2D.level:Specifiesthelevel-of-detailnumber.Level0isthebaseimagelevel.Levelnisthenthmipmapreductionimage.Moreonthislater.internalformat:Specifiesthenumberofcolourcomponentsinthetexture.width:Specifiesthewidthofthetextureimage.height:Specifiestheheightofthetextureimage.border:Thisvaluemustbezero.format:Specifiestheformatofthepixeldata:RGBAinthiscase.type:Specifiesthedatatypeofthepixeldata.Weareusingunsignedbytesforthis.data:Thebufferthatstoresourdata.

InsomecodesnippetsthatyoumayfindyowwillprobablyseethatfilteringparametersaresetupbeforecallingtheglTextImage2Dmethod.Filteringreferstohowtheimagewillbedrawnwhenscalingandhowpixelswillbeinterpolated.

Ifthoseparametersarenotsetthetexturewillnotbedisplayed.SobeforetheglTextImage2Dmethodyoucouldseesomethinglikethis:

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);

Thisparameterbasicallysaysthatwhenapixelisdrawnwithnodirectonetooneassociationtoatexturecoordinateitwillpickthenearesttexturecoordinatepoint.

Textures

Bythismomentwewillnotsetupthoseparameters.Insteadwewillgenerateamipmap.Amipmapisadecreasingresolutionsetofimagesgeneratedfromahighdetailedtexture.Thoselowerresolutionimageswillbeusedautomaticallywhenourobjectisscaled.

Inordertogeneratemipmapswejustneedtosetthefollowingline(inthiscaseaftertheglTextImage2Dmethod:

glGenerateMipmap(GL_TEXTURE_2D);

Andthat’sall,wehavesuccessfullyloadedourtexture.Nowweneedtouseit.AswesaidbeforeweneedtopasstexturecoordinatesasanotherVBO.SowewillmodifyourMeshclasstoacceptanarrayoffloats,thatcontainstexturecoordinates,insteadofthecolour(wecouldhavecoloursandtexturebutinordertosimplifyitwewillstripcoloursoff).Ourconstructorwillbelikethis:

publicMesh(float[]positions,float[]textCoords,int[]indices,

Texturetexture)

ThetexturecoordinatesVBOiscreatedinthesamewayasthecolourone.Theonlydifferenceisthatithastwoelementsinsteadofthree:

vboIdList.add(vboId);

textCoordsBuffer=MemoryUtil.memAllocFloat(textCoords.length);

textCoordsBuffer.put(textCoords).flip();

glBufferData(GL_ARRAY_BUFFER,textCoordsBuffer,GL_STATIC_DRAW);

Nowweneedtousethosetexturesinourshader.Inthevertexshaderwehavechangedtheseconduniformparameterbecausenowit’savec2(wealsochangedtheuniformname,soremembertochangeitintheRendererclass).Thevertexshader,asinthecolourcase,justpassesthetexturecoordinatestobeusedbythefragmentshader.

Textures

#version330

layout(location=1)invec2texCoord;

outvec2outTexCoord;

uniformmat4worldMatrix;

voidmain()

gl_Position=projectionMatrix*worldMatrix*vec4(position,1.0);

outTexCoord=texCoord;

Inthefragmentshaderwemustusethosetexturecoordinatesinordertosetthepixelcolours:

#version330

invec2outTexCoord;

outvec4fragColor;

uniformsampler2Dtexture_sampler;

voidmain()

fragColor=texture(texture_sampler,outTexCoord);

Beforeanalyzingthecodelet’sclarifysomeconcepts.Agraphicscardhasseveralspacesorslotstostoretextures.Eachofthesespacesiscalledatextureunit.Whenweareworkingwithtextureswemustsetthetextureunitthatwewanttoworkwith.Asyoucanseewehaveanewuniformnamedtexture_sampler.Thatuniformhasasampler2Dtypeandwillholdthevalueofthetextureunitthatwewanttoworkwith.

Inthemainfunctionweusethetexturelookupfunctionnamedtexture.Thisfunctiontakestwoarguments:asamplerandatexturecoordinateandwillreturnthecorrectcolour.Thesampleruniformallowustodomulti-texturing.Wewillnotcoverthattopicrightnowbutwewilltrytopreparethecodetoadditeasilylateron.

Thus,inourShaderProgramclasswewillcreateanewmethodthatallowsustosetanintegervalueforauniform:

Textures

publicvoidsetUniform(StringuniformName,intvalue){

glUniform1i(uniforms.get(uniformName),value);

IntheinitmethodoftheRendererclasswewillcreateanewuniform:

shaderProgram.createUniform("texture_sampler");

Also,intherendermethodofourRendererclasswewillsettheuniformvalueto0.(Wearenotusingseveraltexturesrightnowsowearejustusingunit0).

shaderProgram.setUniform("texture_sampler",0);

FinallywejustneedtochangetherendermethodoftheMeshclasstousethetexture.Atthebeginningofthatmethodweputthefollowinglines:

//Activatefirsttextureunit

glActiveTexture(GL_TEXTURE0);

//Bindthetexture

glBindTexture(GL_TEXTURE_2D,texture.getId());

Webasicallyarebindingthetextureidentifiedbytexture.getId()tothetextureunit0.

Rightnow,wehavejustmodifiedourcodebasetosupporttextures.Nowweneedtosetuptexturecoordinatesforour3Dcube.Ourtextureimagefilewillbesomethinglikethis:

Inour3Dmodelwehaveeightvertices.Let’sseehowthiscanbedone.Let’sfirstdefinethefrontfacetexturecoordinatesforeachvertex.

Textures

Vertex TextureCoordinate

V0 (0.0,0.0)

V1 (0.0,0.5)

V2 (0.5,0.5)

V3 (0.5,0.0)

Now,let’sdefinethetexturemappingofthetopface.

Vertex TextureCoordinate

V4 (0.0,0.5)

V5 (0.5,0.5)

V0 (0.0,1.0)

V3 (0.5,1.0)

Asyoucanseewehaveaproblem,weneedtosetupdifferenttexturecoordinatesforthesamevertices(V0andV3).Howcanwesolvethis?Theonlywaytosolveitistorepeatsomeverticesandassociatedifferenttexturecoordinates.Forthetopfaceweneedtorepeatthefourverticesandassignthemthecorrecttexturecoordinates.

Textures

Sincethefront,backandlateralfacesusethesametexturewewillnotneedtorepeatallofthesevertices.Youhavethecompletedefinitioninthesourcecode,butweneededtomovefrom8pointsto20.Thefinalresultislikethis.

Inthenextchapterswewilllearnhowtoloadmodelsgeneratedby3Dmodelingtoolssowewon’tneedtodefinebyhandthepositionsandtexturecoordinates(whichbytheway,wouldbeimpracticalformorecomplexmodels).

Textures

CameraInthischapterwewilllearnhowtomoveinsidearendered3Dscene,thiscapabilityislikehavingacamerathatcantravelinsidethe3Dworldandinfactisthetermusedtorefertoit.

ButifyoutrytosearchforspecificcamerafunctionsinOpenGLyouwilldiscoverthatthereisnocameraconcept,orinotherwordsthecameraisalwaysfixed,centeredinthe(0,0,0)positionatthecenterofthescreen.

Sowhatwewilldoisasimulationthatgivesustheimpressionthatwehaveacameracapableofmovinginsidethe3Dscene.Howdoweachievethis?Well,ifwecannotmovethecamerathenwemustmovealltheobjectscontainedinour3Dspaceatonce.Inotherwords,ifwecannotmoveacamerawewillmovethewholeworld.

So,supposethatwewouldliketomovethecamerapositionalongthezaxisfromastartingposition(Cx,Cy,Cz)toaposition(Cx,Cy,Cz+dz)togetclosertotheobjectwhichisplacedatthecoordinates(Ox,Oy,Oz).

Whatwewillactuallydoismovetheobject(alltheobjectsinour3Dspaceindeed)intheoppositedirectionthatthecamerashouldmove.Thinkaboutitliketheobjectsbeingplacedinatreadmill.

Acameracanbedisplacedalongthethreeaxis(x,yandz)andalsocanrotatealongthem(roll,pitchandyaw).

Camera

Sobasicallywhatwemustdoistobeabletomoveandrotatealloftheobjectsofour3Dworld.Howarewegoingtodothis?Theansweristoapplyanothertransformationthatwilltranslatealloftheverticesofalloftheobjectsintheoppositedirectionofthemovementofthecameraandthatwillrotatethemaccordingtothecamerarotation.Thiswillbedoneofcoursewithanothermatrix,thesocalledviewmatrix.Thismatrixwillfirstperformthetranslationandthentherotationalongtheaxis.

Let'sseehowwecanconstructthatmatrix.Ifyourememberfromthetransformationschapterourtransformationequationwaslikethis:

Transf = [ProjMatrix] ⋅ [TranslationMatrix] ⋅ [RotationMatrix] ⋅ [ScaleMatrix] = [ProjM

Theviewmatrixshouldbeappliedbeforemultiplyingbytheprojectionmatrix,soourequationshouldbenowlikethis:

Transf = [ProjMatrix] ⋅ [V iewMatrix] ⋅ [TranslationMatrix] ⋅ [RotationMatrix] ⋅ [ScaleM

Nowwehavethreematrices,let'sthinkalittlebitaboutthelifecyclesofthosematrices.Theprojectionmatrixshouldnotchangeverymuchwhileourgameisrunning,intheworstcaseitmaychangeonceperrendercall.Theviewmatrixmaychangeonceperrendercallifthecameramoves.TheworldmatrixchangesonceperGameIteminstance,soitwillchangeseveraltimesperrendercall.

So,howmanymatricesshouldwepushtoorvertexshader?Youmayseesomecodethatusesthreeuniformsforeachofthosematrices,butinprinciplethemostefficientapproachwouldbetocombinetheprojectionandtheviewmatrices,let’scallitpvmatrix,andpushtheworldandthepvmatricestoourshader.Withthisapproachwewouldhavethepossibilitytoworkwithworldcoordinatesandwouldbeavoidingsomeextramultiplications.

Actually,themostconvenientapproachistocombinetheviewandtheworldmatrix.Whythis?Becauserememberthatthewholecameraconceptisatrick,whatwearedoingispushingthewholeworldtosimulateworlddisplacementandtoshowonlyasmallportionofthe3Dworld.Soifweworkdirectlywithworldcoordinateswemaybeworkingwithworldcoordinatesthatarefarawayfromtheoriginandwemayincurinsomeprecisionproblems.

Camera

Ifweworkinwhat’scalledthecameraspacewewillbeworkingwithpointsthat,althougharefarawayfromtheworldorigin,areclosertothecamera.Thematrixthatresultsofthecombinationoftheviewandtheworldmatrixisoftencalledasthemodelviewmatrix.

Solet’sstartmodifyingourcodetosupportacamera.FirstofallwewillcreateanewclasscalledCamerawhichwillholdthepositionandrotationstateofourcamera.Thisclasswillprovidemethodstosetthenewpositionorrotationstate(setPositionorsetRotation)ortoupdatethosevalueswithanoffsetuponthecurrentstate(movePositionandmoveRotation)

publicclassCamera{

publicCamera(){

publicCamera(Vector3fposition,Vector3frotation){

this.position=position;

this.rotation=rotation;

returnposition;

position.x=x;

position.y=y;

position.z=z;

publicvoidmovePosition(floatoffsetX,floatoffsetY,floatoffsetZ){

if(offsetZ!=0){

position.x+=(float)Math.sin(Math.toRadians(rotation.y))*-1.0f*offset

position.z+=(float)Math.cos(Math.toRadians(rotation.y))*offsetZ;

if(offsetX!=0){

position.x+=(float)Math.sin(Math.toRadians(rotation.y-90))*-1.0f*o

ffsetX;

position.z+=(float)Math.cos(Math.toRadians(rotation.y-90))*offsetX;

Camera

position.y+=offsetY;

returnrotation;

rotation.x=x;

rotation.y=y;

rotation.z=z;

publicvoidmoveRotation(floatoffsetX,floatoffsetY,floatoffsetZ){

rotation.x+=offsetX;

rotation.y+=offsetY;

rotation.z+=offsetZ;

NextintheTransformationclasswewillholdanewmatrixtoholdthevaluesoftheviewmatrix.

privatefinalMatrix4fviewMatrix;

Wewillalsoprovideamethodtoupdateitsvalue.Liketheprojectionmatrixthismatrixwillbethesameforalltheobjectstoberenderedinarendercycle.

publicMatrix4fgetViewMatrix(Cameracamera){

Vector3fcameraPos=camera.getPosition();

Vector3frotation=camera.getRotation();

viewMatrix.identity();

//Firstdotherotationsocamerarotatesoveritsposition

viewMatrix.rotate((float)Math.toRadians(rotation.x),newVector3f(1,0,0))

.rotate((float)Math.toRadians(rotation.y),newVector3f(0,1,0));

//Thendothetranslation

viewMatrix.translate(-cameraPos.x,-cameraPos.y,-cameraPos.z);

returnviewMatrix;

Asyoucanseewefirstneedtodotherotationandthenthetranslation.Ifwedotheoppositewewouldnotberotatingalongthecamerapositionbutalongthecoordinatesorigin.PleasealsonotethatinthemovePositionmethodoftheCameraclasswejustnotsimplyincreasethecamerapositionbyandoffset.Wealsotakeintoconsiderationthe

Camera

rotationalongtheyaxis,theyaw,inordertocalculatethefinalposition.Ifwewouldjustincreasethecamerapositionbytheoffsetthecamerawillnotmoveinthedirectionitsfacing.

Besideswhatismentionedabove,wedonothavehereafullfreeflycamera(forinstance,ifwerotatealongthexaxisthecameradoesnotmoveupordowninthespacewhenwemoveitforward).Thiswillbedoneinlaterchapterssinceisalittlebitmorecomplex.

FinallywewillremovethepreviousmethodgetWorldMatrixandaddanewonecalledgetModelViewMatrix.

publicMatrix4fgetModelViewMatrix(GameItemgameItem,Matrix4fviewMatrix){

Vector3frotation=gameItem.getRotation();

modelViewMatrix.identity().translate(gameItem.getPosition()).

rotateX((float)Math.toRadians(-rotation.x)).

rotateY((float)Math.toRadians(-rotation.y)).

rotateZ((float)Math.toRadians(-rotation.z)).

scale(gameItem.getScale());

Matrix4fviewCurr=newMatrix4f(viewMatrix);

returnviewCurr.mul(modelViewMatrix);

ThegetModelViewMatrixmethodwillbecalledpereachGameIteminstancesowemustworkoveracopyoftheviewmatrixsotransformationsdonotgetaccumulatedineachcall(RememberthatMatrix4fclassisnotimmutable).

IntherendermethodoftheRendererclasswejustneedtoupdatetheviewmatrixaccordingtothecameravalues,justaftertheprojectionmatrixisalsoupdated.

Matrix4fprojectionMatrix=transformation.getProjectionMatrix(FOV,window.getWidth(),

window.getHeight(),Z_NEAR,Z_FAR);

//UpdateviewMatrix

Matrix4fviewMatrix=transformation.getViewMatrix(camera);

shaderProgram.setUniform("texture_sampler",0);

//RendereachgameItem

//Setmodelviewmatrixforthisitem

Matrix4fmodelViewMatrix=transformation.getModelViewMatrix(gameItem,viewMatrix)

shaderProgram.setUniform("modelViewMatrix",modelViewMatrix);

gameItem.getMesh().render();

Camera

Andthat’sall,ourbasecodesupportstheconceptofacamera.Nowweneedtouseit.Wecanchangethewaywehandletheinputandupdatethecamera.Wewillsetthefollowingcontrols:

Keys“A”and“D”tomovethecameratotheleftandright(xaxis)respectively.Keys“W”and“S”tomovethecameraforwardandbackwards(zaxis)respectively.Keys“Z”and“X”tomovethecameraupanddown(yaxis)respectively.

Wewillusethemousepositiontorotatethecameraalongthexandyaxiswhentherightbuttonofthemouseispressed.Asyoucanseewewillbeusingthemouseforthefirsttime.WewillcreateanewclassnamedMouseInputthatwillencapsulatemouseaccess.Here’sthecodeforthatclass.

importorg.joml.Vector2d;

importstaticorg.lwjgl.glfw.GLFW.*;

publicclassMouseInput{

privatefinalVector2dpreviousPos;

privatefinalVector2dcurrentPos;

privatefinalVector2fdisplVec;

privatebooleaninWindow=false;

privatebooleanleftButtonPressed=false;

privatebooleanrightButtonPressed=false;

publicMouseInput(){

previousPos=newVector2d(-1,-1);

currentPos=newVector2d(0,0);

displVec=newVector2f();

publicvoidinit(Windowwindow){

glfwSetCursorPosCallback(window.getWindowHandle(),(windowHandle,xpos,ypos)

currentPos.x=xpos;

currentPos.y=ypos;

glfwSetCursorEnterCallback(window.getWindowHandle(),(windowHandle,entered)-

inWindow=entered;

glfwSetMouseButtonCallback(window.getWindowHandle(),(windowHandle,button,ac

Camera

tion,mode)->{

leftButtonPressed=button==GLFW_MOUSE_BUTTON_1&&action==GLFW_PRESS;

rightButtonPressed=button==GLFW_MOUSE_BUTTON_2&&action==GLFW_PRESS

publicVector2fgetDisplVec(){

returndisplVec;

publicvoidinput(Windowwindow){

displVec.x=0;

displVec.y=0;

if(previousPos.x>0&&previousPos.y>0&&inWindow){

doubledeltax=currentPos.x-previousPos.x;

doubledeltay=currentPos.y-previousPos.y;

booleanrotateX=deltax!=0;

booleanrotateY=deltay!=0;

if(rotateX){

displVec.y=(float)deltax;

if(rotateY){

displVec.x=(float)deltay;

previousPos.x=currentPos.x;

previousPos.y=currentPos.y;

publicbooleanisLeftButtonPressed(){

returnleftButtonPressed;

publicbooleanisRightButtonPressed(){

returnrightButtonPressed;

TheMouseInputclassprovidesaninitmethodwhichshouldbecalledduringtheinitializationphaseandregistersasetofcallbackstoprocessmouseevents:

glfwSetCursorPosCallback:Registersacallbackthatwillbeinvokedwhenthemouseismoved.glfwSetCursorEnterCallback:Registersacallbackthatwillbeinvokedwhenthemouseentersourwindow.Wewillbereceivingmouseeventsevenifthemouseisnotinourwindow.Weusethiscallbacktotrackwhenthemouseisinourwindow.glfwSetMouseButtonCallback:Registersacallbackthatwillbeinvokedwhenamousebuttonispressed.

Camera

TheMouseInputclassprovidesaninputmethodwhichshouldbecalledwhengameinputisprocessed.ThismethodcalculatesthemousedisplacementfromthepreviouspositionandstoresitintoVector2fdisplVecvariablesoitcanbeusedbyourgame.

TheMouseInputclasswillbeinstantiatedinourGameEngineclassandwillbepassedasaparameterintheinitandupdatemethodsofthegameimplementation(soweneedtochangetheinterfaceaccordingly).

voidinput(Windowwindow,MouseInputmouseInput);

voidupdate(floatinterval,MouseInputmouseInput);

ThemouseinputwillbeprocessedintheinputmethodoftheGameEngineclassbeforepassingthecontroltothegameimplementation.

protectedvoidinput(){

mouseInput.input(window);

gameLogic.input(window,mouseInput);

NowwearereadytoupdateourDummyGameclasstoprocessthekeyboardandmouseinput.Theinputmethodofthatclasswillbelikethis:

@Override

publicvoidinput(Windowwindow,MouseInputmouseInput){

cameraInc.set(0,0,0);

if(window.isKeyPressed(GLFW_KEY_W)){

cameraInc.z=-1;

}elseif(window.isKeyPressed(GLFW_KEY_S)){

cameraInc.z=1;

if(window.isKeyPressed(GLFW_KEY_A)){

cameraInc.x=-1;

}elseif(window.isKeyPressed(GLFW_KEY_D)){

cameraInc.x=1;

if(window.isKeyPressed(GLFW_KEY_Z)){

cameraInc.y=-1;

}elseif(window.isKeyPressed(GLFW_KEY_X)){

cameraInc.y=1;

ItjustupdatesaVector3fvariablenamedcameraIncwhichholdsthecameradisplacementthatshouldbeapplied.TheupdatemethodoftheDummyGameclassmodifiesthecamerapositionandrotation

Camera

accordingtotheprocesseskeyandmouseevents.

@Override

publicvoidupdate(floatinterval,MouseInputmouseInput){

//Updatecameraposition

camera.movePosition(cameraInc.x*CAMERA_POS_STEP,

cameraInc.y*CAMERA_POS_STEP,

cameraInc.z*CAMERA_POS_STEP);

//Updatecamerabasedonmouse

if(mouseInput.isRightButtonPressed()){

Vector2frotVec=mouseInput.getDisplVec();

camera.moveRotation(rotVec.x*MOUSE_SENSITIVITY,rotVec.y*MOUSE_SENSITIVITY

Nowwecanaddmorecubestoourworld,scalethemsetthemupinaspecificlocationandplaywithournewcamera.Asyoucanseeallthecubessharethesamemesh.

GameItemgameItem1=newGameItem(mesh);

gameItem1.setScale(0.5f);

gameItem1.setPosition(0,0,-2);

gameItem2.setPosition(0.5f,0.5f,-2);

gameItem3.setPosition(0,0,-2.5f);

gameItem4.setPosition(0.5f,0,-2.5f);

gameItems=newGameItem[]{gameItem1,gameItem2,gameItem3,gameItem4};

Youwillgetsomethinglikethis.

Camera

LoadingmorecomplexmodelsInthischapterwewilllearntoloadmorecomplexmodelsdefinedinexternalfiles.Thosemodelswillbecreatedby3Dmodellingtools(suchasBlender).Uptonowwewerecreatingourmodelsbyhanddirectlycodingthearraysthatdefinetheirgeometry,inthischapterwewilllearnhowtoloadmodelsdefinedinOBJformat.

OBJ(or.OBJ)isageometrydefinitionopenfileformatdevelopedbyWavefrontTechnologieswhichhasbeenwidelyadopted.AnOBJfiledefinesthevertices,texturecoordinatesandpolygonsthatcomposea3Dmodel.It’sarelativeeasyformattoparsesinceistextbasedandeachlinedefinesanelement(avertex,atexturecoordinate,etc.).

Inan.objfileeachlinestartswithatokenwithidentifiesthetypeofelement:

Commentsarelineswhichstartwith#.Thetoken“v”definesageometricvertexwithcoordinates(x,y,z,w).Example:v0.1550.2110.321.0.Thetoken“vn”definesavertexnormalwithcoordinates(x,y,z).Example:vn0.710.210.82.Moreonthislater.Thetoken“vt”definesatexturecoordinate.Example:vt0.5001.Thetoken“f”definesaface.Withtheinformationcontainedintheselineswewillconstructourindicesarray.Wewillhandleonlythecasewerefacesareexportedastriangles.Itcanhaveseveralvariants:

Itcandefinejustvertexpositions(fv1v2v3).Example:f631.Inthiscasethistriangleisdefinedbythegeometricverticesthatoccupypositions6,3aand1.(Vertexindicesalwaysstartsby1).Itcandefinevertexpositions,texturecoordinatesandnormals(fv1/t1/n1v2/t2/n2V3/t3/n3).Example:f6/4/13/5/37/6/5.Thefirstblockis“6/4/1”anddefinesthecoordinates,texturecoordinatesandnormalvertex.Whatyouseehereistheposition,sowearesaying:pickthegeometricvertexnumbersix,thetexturecoordinatenumber4andthevertexnormalnumberone.

OBJformathasmanymoreentrytypes(likeonetogrouppolygons,definingmaterials,etc.).Bynowwewillsticktothissubset,ourOBJloaderwillignoreotherentrytypes.

Butwhatisanormal?Let’sdefineitfirst.Whenyouhaveaplaneitsnormalisavectorperpendiculartothatplanewhichhasalengthequaltoone.

Asyoucanseeinthefigureaboveaplanecanhavetwonormals,whichoneshouldweuse?Normalsin3Dgraphicsareusedforlightning,soweshouldchosethenormalwhichisorientedtowardsthesourceoflight.Inotherwordsweshouldchoosethenormalthatpointsoutfromtheexternalfaceofourmodel.

Whenwehavea3Dmodel,itiscomposedbypolygons,trianglesinourcase.Eachtriangleiscomposedbythreevertices.TheNormalvectorforatrianglewillbethevectorperpendiculartothetrianglesurfacewhichhasalengthequaltoone.

Avertexnormalisassociatedtoaspecificvertexandisthecombinationofthenormalsofthesurroundingtriangles(ofcourseitslengthisequaltoone).Hereyoucanseethevertexmodelsofa3Dmesh(takenfromWikipedia)

Normalswillbeusedforlighting.

Solet’sstartcreatingourOBJloader.FirstofallwewillmodifyourMeshclasssincenowit’smandatorytouseatexture.Someoftheobjfilesthatwemayloadmaynotdefinetexturecoordinatesandwemustbeabletorenderthemusingacolourinsteadofatexture.Inthiscasethefacedefinitionwillbelikethis:“fv//n”.

OurMeshclasswillhaveanewattributenamedcolour

privateVector3fcolour;

AndtheconstructorwillnotrequireaTextureinstanceanymore.Insteadwewillprovidegettersandsettersfortextureandcolourattributes.

publicMesh(float[]positions,float[]textCoords,float[]normals,int[]indices){

Ofcourse,intherenderandcleanupmethodswemustcheckiftextureattributeisnotnullbeforeusingit.Asyoucanseeintheconstructorwepassnowanewarrayoffloatsnamednormals.Howdoweusenormalsforrendering?TheansweriseasyitwillbejustanotherVBOinsideourVAO,soweneedtoaddthiscode.

//VertexnormalsVBO

vboIdList.add(vboId);

vecNormalsBuffer=MemoryUtil.memAllocFloat(normals.length);

vecNormalsBuffer.put(normals).flip();

glBufferData(GL_ARRAY_BUFFER,vecNormalsBuffer,GL_STATIC_DRAW);

InourrendermethodwemustenablethisVBObeforerenderinganddisableitwhenwehavefinished.

//Drawthemesh

//Restorestate

glBindTexture(GL_TEXTURE_2D,0);

NowthatwehavefinishedthemodificationsintheMeshclasswecanchangeourcodetouseeithertexturecoordinatesorafixedcolour.Thusweneedtomodifyourfragmentshaderlikethis:

#version330

invec2outTexCoord;

outvec4fragColor;

uniformvec3colour;

uniformintuseColour;

voidmain()

if(useColour==1)

fragColor=vec4(colour,1);

Asyoucanseewehavecreatetwonewuniforms:

colour:Willcontainthebasecolour.useColour:It’saflagthatwewillsetto1whenwedon’twanttousetextures.

IntheRendererclassweneedtocreatethosetwouniforms.

//Createuniformfordefaultcolourandtheflagthatcontrolsit

shaderProgram.createUniform("colour");

shaderProgram.createUniform("useColour");

Andlikeanyotheruniform,intherendermethodoftheRendererclassweneedtosetthevaluesforthisuniformsforeachgameItem.

Meshmesh=gameItem.getMesh();

//Setmodelviewmatrixforthisitem

Matrix4fmodelViewMatrix=transformation.getModelViewMatrix(gameItem,viewMatrix)

shaderProgram.setUniform("modelViewMatrix",modelViewMatrix);

shaderProgram.setUniform("colour",mesh.getColour());

shaderProgram.setUniform("useColour",mesh.isTextured()?0:1);

mesh.render();

NowwecancreateanewclassnamedOBJLoaderwhichparsesOBJfilesandwillcreateaMeshinstancewiththedatacontainedinit.YoumayfindsomeotherimplementationsinthewebthatmaybeabitmoreefficientthanthisonebutIthinkthisversionissimplertounderstand.Thiswillbeanutilityclasswhichwillhaveastaticmethodlikethis:

publicstaticMeshloadMesh(StringfileName)throwsException{

Theparameterfilenamespecifiesthenameofthefile,thatmustbeintheCLASSPATHthatcontainstheOBJmodel.

Thefirstthingthatwewilldointhatmethodistoreadthefilecontentsandstoreallthelinesinanarray.Thenwecreateseveralliststhatwillholdthevertices,thetexturecoordinates,thenormalsandthefaces.

List<String>lines=Utils.readAllLines(fileName);

List<Vector3f>vertices=newArrayList<>();

List<Vector2f>textures=newArrayList<>();

List<Vector3f>normals=newArrayList<>();

List<Face>faces=newArrayList<>();

Thenwillparseeachlineanddependingonthestartingtokenwillgetavertexposition,atexturecoordinate,avertexnormalorafacedefinition.Attheendwewillneedtoreorderthatinformation.

for(Stringline:lines){

String[]tokens=line.split("\\s+");

switch(tokens[0]){

case"v":

//Geometricvertex

Vector3fvec3f=newVector3f(

Float.parseFloat(tokens[1]),

Float.parseFloat(tokens[3]));

vertices.add(vec3f);

break;

case"vt":

//Texturecoordinate

Vector2fvec2f=newVector2f(

textures.add(vec2f);

break;

case"vn":

//Vertexnormal

Vector3fvec3fNorm=newVector3f(

normals.add(vec3fNorm);

break;

case"f":

Faceface=newFace(tokens[1],tokens[2],tokens[3]);

faces.add(face);

break;

default:

//Ignoreotherlines

break;

returnreorderLists(vertices,textures,normals,faces);

Beforetalkingaboutreorderinglet’sseehowfacedefinitionsareparsed.WehavecreateaclassnamedFacewhichparsesthedefinitionofaface.AFaceiscomposedbyalistofindicesgroups,inthiscasesincewearedealingwithtriangleswewillhavethreeindicesgroup).

WewillcreateanotherinnerclassnamedIndexGroupthatwillholdtheinformationforagroup.

protectedstaticclassIdxGroup{

publicstaticfinalintNO_VALUE=-1;

publicintidxPos;

publicintidxTextCoord;

publicintidxVecNormal;

publicIdxGroup(){

idxPos=NO_VALUE;

idxTextCoord=NO_VALUE;

idxVecNormal=NO_VALUE;

OurFaceclasswillbelikethis.

protectedstaticclassFace{

*ListofidxGroupgroupsforafacetriangle(3verticesperface).

privateIdxGroup[]idxGroups=newIdxGroup[3];

publicFace(Stringv1,Stringv2,Stringv3){

idxGroups=newIdxGroup[3];

//Parsethelines

idxGroups[0]=parseLine(v1);

privateIdxGroupparseLine(Stringline){

IdxGroupidxGroup=newIdxGroup();

String[]lineTokens=line.split("/");

intlength=lineTokens.length;

idxGroup.idxPos=Integer.parseInt(lineTokens[0])-1;

if(length>1){

//Itcanbeemptyiftheobjdoesnotdefinetextcoords

StringtextCoord=lineTokens[1];

idxGroup.idxTextCoord=textCoord.length()>0?Integer.parseInt(textCoor

d)-1:IdxGroup.NO_VALUE;

if(length>2){

idxGroup.idxVecNormal=Integer.parseInt(lineTokens[2])-1;

returnidxGroup;

publicIdxGroup[]getFaceVertexIndices(){

returnidxGroups;

Whenparsingfaceswemayseeobjectswithnotexturesbutwithvectornormals,inthiscaseafacelinecouldbelikethisf11//117//113//1,soweneedtodetectthosecases.

Nowwecantalkabouthowtoreordertheinformationwehave.Finallyweneedtoreorderthatinformation.OurMeshclassexpectsfourarrays,oneforpositioncoordinates,otherfortexturecoordinates,otherforvectornormalsandanotheronefortheindices.Thefirstthreearraysshallhavethesamenumberofelementssincetheindicesarrayisunique(notethatthesamenumberofelementsdoesnotimplythesamelength.Positionelements,vertexcoordinates,are3Dandarecomposedbythreefloats.Textureelements,texture

coordinates,are2Dandthusarecomposedbytwofloats).OpenGLdoesnotallowustodefinedifferentindicesarrayspertypeofelement(ifso,wewouldnotneedtorepeatverticeswhileapplyingtextures).

WhenyouopenanOBJlineyouwillfirstprobablyseethatthelistthatholdstheverticespositionshasahighernumberofelementsthantheliststhatholdthetexturecoordinatesandthenumberofvertices.That’ssomethingthatweneedtosolve.Let’suseasimpleexamplewhichdefinesaquadwithatexturewithapixelheight(justforillustrationpurposes).TheOBJfilemaybelikethis(don’tpaytoomuchattentionaboutthenormalscoordinatesinceit’sjustforillustrationpurpose).

f1/2/12/1/13/2/1

f1/2/13/2/14/1/1

Whenwehavefinishedparsingthefilewehavethefollowinglists(thenumberofeachelementisitspositioninthefileuponorderofappearance)

Nowwewillusethefacedefinitionstoconstructthefinalarraysincludingtheindices.Athingtotakeintoconsiderationisthattheorderinwhichtexturescoordinatesandvectornormalsaredefineddoesnotcorrespondtotheordersinwhichverticesaredefined.Ifthesizeofthelistswouldbethesameandtheywereordered,facedefinitionlineswouldonlyjustneedtoincludeanumberpervertex.

Soweneedtoorderthedataandsetupaccordinglytoourneeds.Thefirstthingthatwemustdoiscreatethreearraysandonelist,oneforthevertices,otherforthetexturecoordinates,otherforthenormalsandthelistfortheindices.Aswehavesaidbeforethethreearrayswillhavethesamenumberofelements(equaltothenumberofvertices).Theverticesarraywillhaveacopyofthelistofvertices.

Nowwestartprocessingthefaces.Thefirstindexgroupofthefirstfaceis1/2/1.Weusethefirstindexintheindexgroup,theonethatdefinesthegeometricvertextoconstructtheindexlist.Let’snameitasposIndex.Ourfaceisspecifiyingthattheweshouldaddtheindexoftheelementthatoccupiesthefirstpositionintoourindiceslist.SoweputthevalueofposIndexminusoneintotheindicesList(wemustsubstract1sincearraysstartat0butOBJfileformatassumesthattheystartat1).

ThenweusetherestoftheindicesoftheindexgrouptosetupthetexturesArrayandnormalsArray.Thesecondindex,intheindexgroup,is2,sowhatwemustdoisputthesecondtexturecoordinateinthesamepositionastheonethatoccupiesthevertexdesignatedposIndex(V1).

Thenwepickthethirdindex,whichis1,sowhatwemustdoisputthefirstvectornormalcoordinateinthesamepositionastheonethatoccupiesthevertexdesignatedposIndex(V1).

Afterwehaveprocessedthefirstfacethearraysandlistswillbelikethis.

Afterwehaveprocessedthesecondfacethearraysandlistswillbelikethis.

Thesecondfacedefinesverticeswhichalreadyhavebeenassigned,buttheycontainthesamevalues,sothere’snoprobleminreprocessingthis.Ihopetheprocesshasbeenclarifiedenough,itcanbesometrickyuntilyougetit.Themethodsthatreorderthedataaresetbelow.Keepinmindthatwhatwehavearefloatarrayssowemusttransformthose

arraysofvertices,texturesandnormalsintoarraysoffloats.Sothelengthofthesearrayswillbethelengthoftheverticeslistmultipliedbythenumberthreeinthecaseofverticesandnormalsormultipliedbytwointhecaseoftexturecoordinates.

privatestaticMeshreorderLists(List<Vector3f>posList,List<Vector2f>textCoordList,

List<Vector3f>normList,List<Face>facesList){

List<Integer>indices=newArrayList();

//Createpositionarrayintheorderithasbeendeclared

float[]posArr=newfloat[posList.size()*3];

inti=0;

for(Vector3fpos:posList){

posArr[i*3]=pos.x;

posArr[i*3+1]=pos.y;

posArr[i*3+2]=pos.z;

float[]textCoordArr=newfloat[posList.size()*2];

float[]normArr=newfloat[posList.size()*3];

for(Faceface:facesList){

IdxGroup[]faceVertexIndices=face.getFaceVertexIndices();

for(IdxGroupindValue:faceVertexIndices){

processFaceVertex(indValue,textCoordList,normList,

indices,textCoordArr,normArr);

int[]indicesArr=newint[indices.size()];

indicesArr=indices.stream().mapToInt((Integerv)->v).toArray();

Meshmesh=newMesh(posArr,textCoordArr,normArr,indicesArr);

returnmesh;

privatestaticvoidprocessFaceVertex(IdxGroupindices,List<Vector2f>textCoordList,

List<Vector3f>normList,List<Integer>indicesList,

float[]texCoordArr,float[]normArr){

//Setindexforvertexcoordinates

intposIndex=indices.idxPos;

indicesList.add(posIndex);

//Reordertexturecoordinates

if(indices.idxTextCoord>=0){

Vector2ftextCoord=textCoordList.get(indices.idxTextCoord);

texCoordArr[posIndex*2]=textCoord.x;

texCoordArr[posIndex*2+1]=1-textCoord.y;

if(indices.idxVecNormal>=0){

//Reordervectornormals

Vector3fvecNorm=normList.get(indices.idxVecNormal);

normArr[posIndex*3]=vecNorm.x;

normArr[posIndex*3+1]=vecNorm.y;

normArr[posIndex*3+2]=vecNorm.z;

AnotherthingtonoticeisthattexturecoordinatesareinUVformatsoycoordinatesneedtobecalculatedas1minusthevaluecontainedinthefile.

Now,atlast,wecanrenderobjmodels.I’veincludedanOBJfilethatcontainsthetexturedcubethatwehavebeenusinginpreviouschapters.InordertouseitintheinitmethodofourDummyGameclasswejustneedtoconstructaGameIteminstancelikethis.

Texturetexture=newTexture("/textures/grassblock.png");

mesh.setTexture(texture);

GameItemgameItem=newGameItem(mesh);

gameItem.setScale(0.5f);

gameItem.setPosition(0,0,-2);

gameItems=newGameItem[]{gameItem};

Andwewillgetourfamiliartexturedcube.

Wecannowtrywithothermodels.WecanusethefamousStandfordBunny(itcanbefreelydownloaded)model,whichisincludedintheresources.Thismodelisnottexturedsowecanuseitthisway:

Meshmesh=OBJLoader.loadMesh("/models/bunny.obj");

GameItemgameItem=newGameItem(mesh);

gameItem.setScale(1.5f);

gameItem.setPosition(0,0,-2);

gameItems=newGameItem[]{gameItem};

Themodellooksalittlebitstrangebecausewehavenotexturesandthere’snolightsowecannotappreciatethevolumesbutyoucancheckthatthemodeliscorrectlyloaded.IntheWindowclasswhenwesetuptheOpenGLparametersaddthisline.

glPolygonMode(GL_FRONT_AND_BACK,GL_LINE);

Youshouldnowseesomethinglikethiswhenyouzoomin.

Nowyoucannowseeallthetrianglesthatcomposethemodel.

WiththisOBJloaderclassyoucannowuseBlendertocreateyourmodels.Blenderisapowerfultoolbutitcanbesomebitofoverwhelmingatfirst,therearelotsofoptions,lotsofkeycombinationsandyouneedtotakeyourtimetodothemostbasicthingsbythefirsttime.Whenyouexportthemodelsusingblenderpleasemakesuretoincludethenormalsandexportfacesastriangles.

Alsoremebertosplitedgeswhenexporting,sincewecannotassignseveraltexturecoordinatestothesamevertex.Also,weneedthenormalstobedefinedpereachtriangle,notasignedtovertices.Ifyoufindlightproblems(nextchapters),withsomemodels,youshouldverifythenormals.Youcanvisualizetheminsideblender.

LettherebelightInthischapterwewilllearnhowtoaddlighttoour3Dgameengine.Wewillnotimplementaphysicalperfectlightmodelbecause,takingasidethecomplexity,itwouldrequireatremendousamountofcomputerrecourses,insteadwewillimplementanapproximationwhichwillprovidedecentresults.WewilluseanalgorithmnamedPhongshading(developedbyBuiTuongPhong).Anotherimportantthingtopointisthatwewillonlymodellightsbutwewon’tmodeltheshadowsthatshouldbegeneratedbythoselights(thiswillbedoneinanotherchapter).

Beforewestart,letusdefinesomelighttypes:

Pointlight:Thistypeoflightmodelsalightsourcethat’semitteduniformlyformapointinspaceinalldirections.Spotlight:Thistypeoflightmodelsalightsourcethat’semittedfromapointinspace,butinsteadofemittinginalldirectionsisrestrictedtoacone.Directionallight:Thistypeforlightmodelsthelightthatwereceivefromthesun,alltheobjectsinthe3Dthespacearehitbyparallelraylightscomingfromaspecificdirection.Nomatteriftheobjectiscloseoroffaraway,alltheraylightsimpacttheobjectswiththesameangle.Ambientlight:Thistypeoflightcomesfromeverywhereinthespaceandilluminatesalltheobjectsinthesameway.

Thus,tomodellightweneedtotakeintoconsiderationthetypeoflightplus,itspositionandsomeotherparameterslikeitscolour.Ofcourse,wemustalsoconsiderthewaythatobjects,impactedbyraylights,absorbandreflectlight.

ThePhongshadingalgorithmwillmodeltheeffectsoflightforeachpointinourmodel,thatisforeveryvertex.Thisiswhyit’scalledalocalilluminationsimulation,andthisisthereasonwhichthisalgorithmwillnotcalculateshadows,itwilljustcalculatethelighttobeappliedtoeveryvertexwithouttakingintoconsiderationifthevertexisbehindanobjectthat

Lettherebelight

blocksthelight.Wewillovercomethisinlaterchapters.But,becauseofthat,isaverysimpleandfastalgorithmthatprovidesverygoodeffects.Wewillusehereasimplifiedversionthatdoesnottakeintoaccountmaterialsdeeply.

ThePhongalgorithmconsidersthreecomponentsforlighting:

Ambientlight:modelslightthatcomesfromeverywhere,thiswillserveustoilluminate(withtherequireintensity)theareasthatarenothitbyanylight,it’slikeabackgroundlight.Diffusereflectance:Ittakesintoconsiderationthatsurfacesthatarefacingthelightsourcearebrighter.Specularreflectance:modelshowlightreflectsinpolishedormetallicsurfaces

Attheendwhatwewanttoobtainisafactorthat,multipliedbycolourassignedtoafragment,willsetthatcolourbrighterordarkerdependingonthelightitreceives.Let’snameourcomponentsasAforambient,DfordiffuseandSforspecular.Thatfactorwillbetheadditionofthosecomponents:

L = A+D + S

Infact,thosecomponentsareindeedcolours,thatisthecolourcomponentsthateachlightcomponentcontributesto.Thisisduetothefactthatlightcomponentswillnotonlyprovideadegreeofintensitybutitcanmodifiythecolourofmodel.Inourfragmentshaderwejustneedtomultiplythatlightcolourbytheoriginalfragmentcolour(obtainedfromatextureorabasecolour).

Wecanassignalsodifferentcolours,forthesamematerials,thatwillbeusedintheambient,diffuseandspecularcomponents.Hence,thesecomponentswillbemodulatedbythecoloursassociatedtothematerial.Ifthematerialhasatexture,wewillsimplyuseasingletextureforeachofthecomponents.

Sothefinalcolourforanontexturedmaterialwillbe:L = A ∗ ambientColour +D ∗ diffuseColour + S ∗ specularColour.

Andthefinalcolourforatexturedmaterialwillbe:

L = A ∗ textureColour +D ∗ textureColour + S ∗ textureColour

AmbientLightcomponentLet’sviewthefirstcomponent,theambientlightcomponentit’sjustaconstantfactorthatwillmakeallofourobjectsbrighterordarker.Wecanuseittosimulatelightforaspecificperiodoftime(dawn,dusk,etc.)alsoitcanbeusedtoaddsomelighttopointsthatarenothit

Lettherebelight

directlybyraylightsbutcouldbelightedbyindirectlight(causedbyreflections)inaneasyway.

Ambientlightistheeasiestcomponenttocalculate,wejustneedtopassacolour,sinceitwillbemultipliedbyourbasecolouritjustmodulatesthatbasecolour.Imaginethatwehavedeterminedthatacolourforafragmentis(1.0, 0.0, 0.0),thatisredcolour.Withoutambientlightitwillbedisplayedasafullyredfragment.Ifwesetambientlightto(0.5, 0.5, 0.5)thefinalcolourwillbe(0.5, 0, 0),thatisadarkerversionofred.Thislightwilldarkenallthefragmentsinthesameway(itmayseemtobealittlestrangetobetalkingaboutlightthatdarkensobjectsbutinfactthatistheeffectthatweget).Besidesthat,itcanaddsomecolouriftheRGBcomponentsarenotthesame,sowejustneedavectortomodulateambientlightintensityandcolour.

DiffuserefletanceLet’stalknowaboutdiffusereflectance.Itmodelsthefactthatsurfaceswhichfaceinaperpendicularwaytothelightsourcelookbrighterthansurfaceswherelightisreceivedinamoreindirectangle.Thoseobjectsreceivemorelight,thelightdensity(letmecallitthisway)ishigher.

But,howdowecalculatethis?Doyourememberfrompreviouschapterthatweintroducedthenormalconcept?Thenormalwasthevectorperpendiculartoasurfacethathadalengthequaltoone.So,Let’sdrawthenormalsforthreepointsinthepreviousfigure,asyoucansee,thenormalforeachpointwillbethevectorperpendiculartothetangentplaneforeachpoint.Insteadofdrawingrayscomingfromthesourceoflightwewilldrawvectorsfromeachpointtothepointoflight(thatis,intheoppositedirection).

Lettherebelight

Asyoucansee,thenormalassociatedtoP1,namedN1,isparalleltothevectorthatpointstothelightsource,whichmodelstheoppositeofthelightray(N1hasbeensketcheddisplacedsoyoucanseeit,butit’sequivalentmathematically).P1hasanangleequalto0withthevectorthatpointstothelightsource.It’ssurfaceisperpendiculartothelightsourceandP1wouldbethebrightestpoint.

ThenormalassociatedtoP2,namedN2,hasanangleofaround30degreeswiththevectorthatpointsthelightsource,soitshouldbedarkertanP1.Finally,thenormalassociatedtoP3,namedN3,isalsoparalleltothevectorthatpointstothelightsourcebutbothvectorsareintheoppositedirection.P3hasanangleof180degreeswiththevectorthatpointsthelightsource,andshouldnotgetanylightatall.

Soitseemsthatwehaveagoodapproachtodeterminethelightintensitythatgetstoapointandit’srelatedtotheanglethatformsthenormalwithavectorthatpointstothelightsource.Howcanwecalculatethis?

There’samathematicaloperationthatwecanuseandit’scalleddotproduct.Thisoperationtakestwovectorsandproducesanumber(ascalar),thatispositiveiftheanglebetweenthemissmall,andproducesanegativenumberiftheanglebetweenthemiswide.Ifbothvectorsarenormalized,thatisthebothhavealengthequaltoone,thedotproductwillbebetween−1and1.Thedotproductwillbeoneifbothvectorslookinthesamedirection(angle0)anditwillbe0ifbothvectorsformasquareangleandwillbe−1ifbothvectorsfaceoppositedirection.

Let’sdefinetwovectors,v1andv2,andletalphabetheanglebetweenthem.Thedotproductisdefinedbythefollowingformula.

Lettherebelight

Ifbothvectorsarenormalized,theirlength,theirmodulewillbeequaltoone,sothedotproductisequaltothecosineiftheanglebetweenthem.Wewillusethatoperationtocalculatethediffusereflectancecomponent.

Soweneedtocalculatethevectorthatpointstothesourceoflight.Howwedothis?Wehavethepositionofeachpoint(thevertexposition)andwehavethepositionofthelightsource.Firstofall,bothcoordinatesmustbeinthesamecoordinatespace.Tosimplify,let’sassumethattheyarebothinworldcoordinatespace,thenthosepositionsarethecoordinatesofthevectorsthatpointtothevertexposition(V P )andtothelightsource(V S),asshowninthenextfigure.

IfwesubstractVSfromV P wegetthevectorthatwearelookingforwhichit’scalledL.

Nowwecandothedotproductbetweenthevectorthatpointstothelightsourceandthenormal,thatproductiscalledtheLambertterm,duetoJohannLambertwhichwasthefirsttoproposethatrelationtomodelthebrightnessofasurface.

Let’ssummarizehowwecancalculateit,wedefinethefollowingvariables:

vPos:Positionofourvertexinmodelviewspacecoordinates.lPos:Positionofthelightinviewspacecoordinates.

Lettherebelight

intensity:Intensityofthelight(from0to1).lColour:Colourofthelight.normal:Thevertexnormal.Firstweneedtocalculatethevectorthatpointstothelightsourcefromcurrentposition:toLightDirection = lPos− vPos.Theresultofthatoperationneedstobenormalized

Thenweneedtocalculatethediffusefactor(anscalar):diffuseFactor = normal ⋅ toLightDirection.It’scalculatedasdotproductbetweentwovectors,sincewewantittobebetween−1and1bothvectorsneedtobenormalized.Coloursneedtobebetween0and1soifavalueit’slowerthan0wewillsetitto0.

Finallywejustneedtomodulatethelightcolourbythediffusefactorandthelightintensity:

colour = diffuseColour ∗ lColour ∗ diffuseFactor ∗ intensity

SpecularcomponentLet’sviewnowthespecularcomponent,butfirstweneedtoexaminehowlightisreflected.Whenlighthitsasurfacesomepartofitisabsorbedandtheotherpartisreflected,ifyourememberfromyourphysicsclass,reflectioniswhenlightbouncesoffanobject.

Ofcourse,surfacesarenottotallypolished,andifyoulookatcloserdistanceyouwillseealotofimperfections.Besidesthat,youhavemanyraylights(photonsinfact),thatimpactthatsurface,andthatgetreflectedinawiderangeofangles.Thus,whatweseeislikeabeamoflightbeingreflectedfromthesurface.Thatis,lightisdiffusedwhenimpactingoverasurface,andthat’sthedisusecomponentthatwehavebeentalkingaboutpreviously.

Lettherebelight

Butwhenlightimpactsapolishedsurface,forinstanceametal,thelightsuffersfromlowerdiffusionandmostofitgetsreflectedintheoppositedirectionasithitthatsurface.

Thisiswhatthespecularcomponentmodels,anditdependsonthematerialcharacteristics.Regardingspecularreflectance,it’simportanttonotethatthereflectedlightwillonlybevisibleifthecameraisinaproperposition,thatis,ifit'sintheareaofwherethereflectedlightisemitted.

Oncethemechanismthat’sbehindsepecularreflectionhasbeenexplainedwearereadytocalculatethatcomponent.Firstweneedavectorthatpointsfromthelightsourcetothevertexpoint.Whenwewerecalculatingthedifussecomponentwecalculatedjusttheopposite,avectorthatpointstothelightsource.toLightDirection,solet’scalculateitasfromLightDirection = −(toLightDirection).

ThenweneedtocalculatethereflectedlightthatresultsfromtheimpactofthefromLightDirectionintothesurfacebytakingintoconsiderationitsnormal.There’saGLSLfunctionthatdoesthatnamedreflect.So,

Lettherebelight

reflectedLight = reflect(fromLightSource,normal).

Wealsoneedavectorthatpointstothecamera,let’snameitcameraDirection,anditwillbecalculatedasthedifferencebetweenthecamerapositionandthevertexposition:cameraDirection = cameraPos− vPos.Thecamerapositionvectorandthevertexpositionneedtobeinthesamecoordinatesystemandtheresultingvectorneedstobenormalized.Thefollowingfiguresketchesthemaincomponentswehavecalculateduptonow.

NowweneedtocalculatethelightintensitythatweseewhichwewillcallspecularFactor.ThiscomponentwillbehigherifthecameraDirectionandthereflectedLightvectorsareparallelandpointinthesamedirectionandwilltakeitslowervalueiftheypointinoppositedirections.Inordertocalculatethisthedotproductcomestotherescueagain.SospecularFactor = cameraDirection ⋅ reflectedLight.Weonlywantthisvaluetobebetween0and1soifit’slowerthan0itwillbesetto0.

Wealsoneedtotakeintoconsiderationthatthislightmustbemoreintenseifthecameraispointingtothereflectedlightcone.ThiswillbeachievedbypoweringthespecularFactortoaparameternamedspecularPower.

specularFactor = specularFactor .

Finallyweneedtomodelthereflectivityofthematerial,whichwillalsomodulatetheintensityifthelightreflected,thiswillbedonewithanotherparameternamedreflectance.Sothecolourcomponentofthespecularcomponentwillbe:specularColour ∗ lColour ∗ reflectance ∗ specularFactor ∗ intensity.

Attenuation

specularPower

Lettherebelight

Wenowknowhowtocalculatethethreecomponentsthatwillserveustomodelapointlightwithanambientlight.Butourlightmodelisstillnotcomplete,thelightthatanobjectreflectsisindependentofthedistancethatthelightis,weneedtosimulatelightattenuation.

Attenuationisafunctionofthedistanceandlight.Theintensityoflightisinverselyproportionaltothesquareofdistance.Thatfactiseasytovisualize,aslightispropagatingitsenergyisdistributedalongthesurfaceofaspherewitharadiusthat’sequaltothedistancetraveledbythelight.Thesurfaceofasphereisproportionaltothesquareofitsradius.Wecancalculatetheattenuationfactorwiththisformula:

1.0/(atConstant+ atLinear ∗ dist+ atExponent ∗ dist ).

Inordertosimulateattenuationwejustneedtomultiplythatattenuationfactorbythefinalcolour.

ImplementationNowwecanstartcodingalltheconceptsdescribedabove,wewillstartwithourshaders.Mostoftheworkwillbedoneinthefragmentshaderbutweneedtopasssomedatafromthevertexshadertoit.Inpreviouschapterthefragmentshaderjustreceivedthetexturecoordinates,nowwearegoingtopassalsotwomoreparameters:

Thevertexnormal(normalized)transformedtomodelviewspacecoordinates.Thevertexpositiontransformedtomodelviewspacecoordinates.Thisisthecodeofthevertexshader.

Lettherebelight

#version330

layout(location=2)invec3vertexNormal;

outvec2outTexCoord;

outvec3mvVertexNormal;

outvec3mvVertexPos;

uniformmat4modelViewMatrix;

voidmain()

vec4mvPos=modelViewMatrix*vec4(position,1.0);

gl_Position=projectionMatrix*mvPos;

mvVertexNormal=normalize(modelViewMatrix*vec4(vertexNormal,0.0)).xyz;

mvVertexPos=mvPos.xyz;

Beforewecontinuewiththefragmentshaderthere’saveryimportantconceptthatmustbehighlighted.FromthecodeaboveyoucanseethatmvVertexNormal,thevariablecontainsthevertexnormal,istransformedintomodelviewspacecoordinates.ThisisdonebymultiplyingthevertexNormalbythemodelViewMatrixaswiththevertexposition.Butthere’sasubtledifference,thewcomponentofthatvertexnormalissetto0beforemultiplyingitbythematrix:vec4(vertexNormal,0.0).Whyarewedoingthis?Becausewedowantthenormaltoberotatedandscaledbutwedonotwantittobetranslated,weareonlyinterestedintoitsdirectionbutnotinitsposition.Thisisachievedbysettingiswcomponentto0andisoneoftheadvantagesofusinghomogeneouscoordinates,bysettingthewcomponentwecancontrolwhattransformationsareapplied.Youcandothematrixmultiplicationbyhandandseewhythishappens.

Nowwecanstarttodotherealworkinourfragmentshader,besidesdeclaringasinputparametersthevaluesthatcomefromthevertexshaderwearegoingtodefinesomeusefulstructurestomodellightandmaterialcharacteristic.Firstofall,wewilldefinethestructuresthatmodelthelight.

Lettherebelight

structAttenuation

floatconstant;

floatlinear;

floatexponent;

structPointLight

vec3colour;

//Lightpositionisassumedtobeinviewcoordinates

vec3position;

floatintensity;

Attenuationatt;

Apointlightisdefinedbyacolour,aposition,anumberbetween0and1whichmodelsitsintensityandasetofparameterswhichwillmodeltheattenuationequation.

Thestructurethatmodelsamaterialcharacteristicsis:

structMaterial

vec4ambient;

vec4diffuse;

vec4specular;

inthasTexture;

floatreflectance;

Amaterialisdefinedbyaasetofcolours(ifwedon’tusetexturetocolourthefragments):

Thecoloutusedfortheambientcomponent.Thecolourusedforthediffusecomponent.Thecolourusedforthespecularcomponent.

Amaterialalsoisdefinedbyaflagthatcontrolsifithasanassociatedtextureornotandareflectanceindex.Wewillusethefollowinguniformsinourfragmentshader.

uniformvec3ambientLight;

uniformfloatspecularPower;

uniformMaterialmaterial;

uniformPointLightpointLight;

uniformvec3camera_pos;

Wearecreatingnewuniformstosetthefollowingvariables:

Lettherebelight

Theambientlight:whichwillcontainacolourthatwillaffecteveryfragmentinthesameway.Thespecularpower(theexponentusedintheequationthatwaspresentedwhentalkingaboutthespecularlight).Apointlight.Thematerialcharacteristics.Thecamerapositioninviewspacecoordinates.

Wewillalsodefinesomeglobalvariablesthatwillholdthematerialcolourcomponentstobeusedintheambient,diffuseandspecularcomponents.Weusethesevariablessince,ifthecomponenthasatexture,wewillusethesamecolourforallthecomponentsandwedonotwanttoperformredundanttexturelookups.Thevariablesaredefinedlikethis:

vec4ambientC;

vec4diffuseC;

vec4speculrC;

Wenowcandefineafunctionthatwillsetupthesevariablesaccodringtothematerialcharacteristics:

voidsetupColours(Materialmaterial,vec2textCoord)

if(material.hasTexture==1)

ambientC=texture(texture_sampler,textCoord);

diffuseC=ambientC;

speculrC=ambientC;

ambientC=material.ambient;

diffuseC=material.diffuse;

speculrC=material.specular;

Nowwearegoingtodefineafunctionthat,takingasitsinputapointlight,thevertexpositionanditsnormalreturnsthecolourcontributioncalculatedforthediffuseandspecularlightcomponentsdescribedpreviously.

Lettherebelight

vec4calcPointLight(PointLightlight,vec3position,vec3normal)

vec4diffuseColour=vec4(0,0,0,0);

vec4specColour=vec4(0,0,0,0);

//DiffuseLight

vec3light_direction=light.position-position;

vec3to_light_source=normalize(light_direction);

floatdiffuseFactor=max(dot(normal,to_light_source),0.0);

diffuseColour=diffuseC*vec4(light.colour,1.0)*light.intensity*diffuseFact

//SpecularLight

vec3camera_direction=normalize(-position);

vec3from_light_source=-to_light_source;

vec3reflected_light=normalize(reflect(from_light_source,normal));

floatspecularFactor=max(dot(camera_direction,reflected_light),0.0);

specularFactor=pow(specularFactor,specularPower);

specColour=speculrC*specularFactor*material.reflectance*vec4(light.colour,

//Attenuation

floatdistance=length(light_direction);

floatattenuationInv=light.att.constant+light.att.linear*distance+

light.att.exponent*distance*distance;

return(diffuseColour+specColour)/attenuationInv;

Thepreviouscodeisrelativelystraightforward,itjustcalculatesacolourforthediffusecomponent,anotheroneforthespecularcomponentandmodulatesthembytheattenuationsufferedbythelightinitstraveltothevertexweareprocessing.

Pleasebeawarethatverticescoordinatesareinviewspace.Whencalculatingthespecularcomponent,wemustgetthedirecttiontothepointofview,thatisthecamera.This,couldbedonelikethis:

vec3camera_direction=normalize(camera_pos-position);

But,sincepositionisinviewspace,thecamerapositionisallwaysattheorigin,thatis,(0, 0, 0),sowecalculateitlikethis:

vec3camera_direction=normalize(vec3(0,0,0)-position);

Whichcanbesimplifiedlikethis:

Lettherebelight

vec3camera_direction=normalize(-position);

Withthepreviousfunction,themainfunctionofthevertexfunctionisverysimple.

voidmain()

setupColours(material,outTexCoord);

vec4diffuseSpecularComp=calcPointLight(pointLight,mvVertexPos,mvVertexNormal)

fragColor=ambientC*vec4(ambientLight,1)+diffuseSpecularComp;

ThecalltothesetupColoursfunctionwillsetuptheambientC,diffuseCandspeculrCvariableswiththeappropriatecolours.Then,wecalculatethediffuseandspecularcomponents,takingintoconsiderationtheattennuation.Wedothisusingasinglefunctioncallforconvenience,asithasbeenexplainedabove.Finalcolouriscalculatedbyaddingtheambientcomponent(multiplyingambientCbytheambientlight).Asyoucanseeambientlightisnotaffectedbyattenuation.

Wehaveintroducedsomenewconceptsintoourshaderthatrequirefurtherexplanation,wearedefiningstructuresandusingthemasuniforms.Howdowepassthosestructures?Firstofallwewilldefinetwonewclassesthatmodelthepropertiesofapointlightandamaterial,namedohsurprise,PointLightandMaterial.TheyarejustplainPOJOssoyoucanchecktheminthesourcecodethataccompaniesthisbook.Then,weneedtocreatenewmethodsintheShaderProgramclass,firsttobeabletocreatetheuniformsforthepointlightandmaterialstructures.

publicvoidcreatePointLightUniform(StringuniformName)throwsException{

createUniform(uniformName+".colour");

createUniform(uniformName+".position");

createUniform(uniformName+".intensity");

createUniform(uniformName+".att.constant");

createUniform(uniformName+".att.linear");

createUniform(uniformName+".att.exponent");

publicvoidcreateMaterialUniform(StringuniformName)throwsException{

createUniform(uniformName+".ambient");

createUniform(uniformName+".diffuse");

createUniform(uniformName+".specular");

createUniform(uniformName+".hasTexture");

createUniform(uniformName+".reflectance");

Lettherebelight

Asyoucansee,it’sverysimple,wejustcreateaseparateuniformforalltheattributesthatcomposethestructure.NowweneedtocreateanothertwomethodstosetupthevaluesofthoseuniformsandthatwilltakeasparametersPointLightandMaterialinstances.

publicvoidsetUniform(StringuniformName,PointLightpointLight){

setUniform(uniformName+".colour",pointLight.getColor());

setUniform(uniformName+".position",pointLight.getPosition());

setUniform(uniformName+".intensity",pointLight.getIntensity());

PointLight.Attenuationatt=pointLight.getAttenuation();

setUniform(uniformName+".att.constant",att.getConstant());

setUniform(uniformName+".att.linear",att.getLinear());

setUniform(uniformName+".att.exponent",att.getExponent());

publicvoidsetUniform(StringuniformName,Materialmaterial){

setUniform(uniformName+".ambient",material.getAmbientColour());

setUniform(uniformName+".diffuse",material.getDiffuseColour());

setUniform(uniformName+".specular",material.getSpecularColour());

setUniform(uniformName+".hasTexture",material.isTextured()?1:0);

setUniform(uniformName+".reflectance",material.getReflectance());

InthischaptersourcecodeyouwillseealsothatwealsohavemodifiedtheMeshclasstoholdamaterialinstanceandthatwehavecreatedasimpleexamplethatcreatesapointlightthatcanbemovedbyusingthe“N”and“M”keysinordertoshowhowapointlightfocusingoverameshwithareflectancevaluehigherthan0lookslike.

Let'sgetbacktoourfragmentshader,aswehavesaidweneedanotheruniformwhichcontainsthecameraposition,camera_pos.Thesecoordinatesmustbeinviewspace.Usuallywewillsetuplightcoordinatesinworldspacecoordinates,soweneedtomultiplythembytheviewmatrixinordertobeabletousetheminourshader,soweneedtocreateanewmethodintheTransformationclassthatreturnstheviewmatrixsowetransformlightcoordinates.

//Getacopyofthelightobjectandtransformitspositiontoviewcoordinates

PointLightcurrPointLight=newPointLight(pointLight);

Vector3flightPos=currPointLight.getPosition();

Vector4faux=newVector4f(lightPos,1);

aux.mul(viewMatrix);

lightPos.x=aux.x;

lightPos.y=aux.y;

lightPos.z=aux.z;

shaderProgram.setUniform("pointLight",currPointLight);

Lettherebelight

Wewillnotincludethewholesourcecodebecausethischapterwouldbetoolonganditwouldnotcontributetoomuchtoclarifytheconceptsexplainedhere.Youcancheckitinthesourcecodethataccompaniesthisbook.

Lettherebelight

LettherebeevenmorelightInthischapterwearegoingtoimplementotherlighttypesthatweintroducedinpreviouschapter.Wewillstartwithdirectionallightning.

DirectionalLightIfyourecall,directionallightinghitsalltheobjectsbyparallelraysallcomingfromthesamedirection.ItmodelslightsourcesthatarefarawaybuthaveahighintensitysuchustheSun.

Anothercharacteristicofdirectionallightisthatitisnotaffectedbyattenuation.ThinkagainaboutSunlight,allobjectsthatarehitbyraylightsareilluminatedwiththesameintensity,thedistancefromthesunissohugethatthepositionoftheobjectsisirrelevant.Infact,directionallightsaremodeledaslightsourcesplacedattheinfinity,ifitwasaffectedbyattenuationitwouldhavenoeffectinanyobject(it’scolourcontributionwouldbeequalto0).

Besidesthat,directionallightiscomposedalsobyadiffuseandspecularcomponents,theonlydifferenceswithpointlightsisthatitdoesnothaveapositionbutadirectionandthatitisnotaffectedbyattenuation.Let’sgetbacktothedirectionattributeofdirectionallight,andimaginewearemodelingthemovementofthesunacrossour3Dworld.Ifweareassumingthatthenorthisplacedtowardstheincreasingz-axis,thefollowingpictureshowsthedirectiontothelightsourceatdawn,midnightanddusk.

Lightdirectionsfortheabovepositionsare:

Dawn:(-1,0,0)Midday:(0,1,0)Dusk:(1,0,0)

Sidenote:Youmaythinkthatabovecoordinatesareequaltopositionones,buttheymodelavector,adirection,notaposition.Fromthemathematicalpointofviewavectorandapositionarenotdistinguishablebuttheyhaveatotallydifferentmeaning.

But,howdowemodelthefactthatthislightislocatedattheinfinity?Theanswerisbyusingthewcoordinate,thatis,byusinghomogeneouscoordinatesandsettingthewcoordinateto0:

Dawn:(-1,0,0,0)Midday:(0,1,0,0)Dusk:(1,0,0,0)

Thisisthesamecaseaswhenwepassthenormals,fornormalswesetthewcomponentto0tostatethatwearenotinterestedindisplacements,justinthedirection.Also,whenwedealwithdirectionallightweneedtodothesame,cameratranslationsshouldnotaffectthedirectionofadirectionallight.

Solet’sstartcodingandmodelourdirectionallight.Thefirstthingthatwearegoingtodoistocreateaclassthatmodelsitsattributes.ItwillbeanotherPOJOwithacopyconstructorwhichstoresthedirection,thecolourandtheintensity.

publicclassDirectionalLight{

privateVector3fcolor;

privateVector3fdirection;

privatefloatintensity;

publicDirectionalLight(Vector3fcolor,Vector3fdirection,floatintensity){

this.color=color;

this.direction=direction;

this.intensity=intensity;

publicDirectionalLight(DirectionalLightlight){

this(newVector3f(light.getColor()),newVector3f(light.getDirection()),light

.getIntensity());

//Gettersandsettesbeyondthispoint...

Asyoucansee,wearestillusingaVector3ftomodelthedirection.Keepcalm,wewilldealwiththewcomponentwhenwetransferthedirectionallighttotheshader.Andbytheway,thenextthingthatwewilldoistoupdatetheShaderProgramtocreateandupdatetheuniformthatwillholdthedirectionallight.

Inourfragmentshaderwewilldefineastructurethatmodelsadirectionallight.

structDirectionalLight

vec3colour;

vec3direction;

floatintensity;

WiththatdefinitionthenewmethodsintheShaderProgramclassarestraightforward.

publicvoidcreateDirectionalLightUniform(StringuniformName)throwsException{

createUniform(uniformName+".direction");

createUniform(uniformName+".intensity");

publicvoidsetUniform(StringuniformName,DirectionalLightdirLight){

setUniform(uniformName+".colour",dirLight.getColor());

setUniform(uniformName+".direction",dirLight.getDirection());

setUniform(uniformName+".intensity",dirLight.getIntensity());

Nowweneedtousethatuniform.WewillmodelhowthesunappearstomoveacrosstheskybycontrollingitsangleinourDummyGameclass.

Weneedtoupdatelightdirectionsowhenthesunit’satdawn(-90º)itsdirectionis(-1,0,0)anditsxcoordinateprogressivelyincreasesfrom-1to0andthe“y”coordinateincreasesto1asitapproachesmidday.Thenthe“x”coordinateincreasesto1andthe“y”coordinatesdecreasesto0again.Thiscanbedonebysettingthexcoordinatetothesineoftheangleandycoordinatetothecosineoftheangle.

Wewillalsomodulatelightintensity,theintensitywillbeincreasingwhenit’sgettingawayfromdawnandwilldecreaseasitapproachestodusk.Wewillsimulatethenightbysettingtheintensityto0.Besidesthat,wewillalsomodulatethecoloursothelightgetsmoreredatdawnandatdusk.ThiswillbedoneintheupdatemethodoftheDummyGameclass.

//Updatedirectionallightdirection,intensityandcolour

lightAngle+=1.1f;

if(lightAngle>90){

directionalLight.setIntensity(0);

if(lightAngle>=360){

lightAngle=-90;

}elseif(lightAngle<=-80||lightAngle>=80){

floatfactor=1-(float)(Math.abs(lightAngle)-80)/10.0f;

directionalLight.setIntensity(factor);

directionalLight.getColor().y=Math.max(factor,0.9f);

directionalLight.getColor().z=Math.max(factor,0.5f);

}else{

directionalLight.setIntensity(1);

directionalLight.getColor().x=1;

directionalLight.getColor().y=1;

directionalLight.getColor().z=1;

doubleangRad=Math.toRadians(lightAngle);

directionalLight.getDirection().x=(float)Math.sin(angRad);

directionalLight.getDirection().y=(float)Math.cos(angRad);

ThenweneedtopassthedirectionallighttoourshadersintherendermethodoftheRendererclass.

//Getacopyofthedirectionallightobjectandtransformitspositiontoviewcoord

inates

DirectionalLightcurrDirLight=newDirectionalLight(directionalLight);

Vector4fdir=newVector4f(currDirLight.getDirection(),0);

dir.mul(viewMatrix);

currDirLight.setDirection(newVector3f(dir.x,dir.y,dir.z));

shaderProgram.setUniform("directionalLight",currDirLight);

Asyoucanseeweneedtotransformthelightdirectioncoordinatestoviewspace,butwesetthewcomponentto0sincewearenotinterestedinapplyingtranslations.

Nowwearereadytodotherealworkwhichwillbedoneinthefragmentshadersincethevertexshaderdoesnotbemodified.Wehaveyetstatedabovethatweneedtodefineanewstruct,namedDirectionalLight,tomodeladirectionallight,andwewillneedanewuniformformthat.

uniformDirectionalLightdirectionalLight;

Weneedtorefactorourcodealittlebit,inthepreviouschapterwehadafunctioncalledcalcPointLightthatcalculatethediffuseandspecularcomponentsandalsoappliedtheattenuation.Aswehaveexplaineddirectionallightalsocontributestothediffuseandspecularcomponentsbutisnotaffectedbyattenuation,sowewillcreateanewfunctionnamedcalcLightColourthatjustcalculatesthosecomponents.

vec4calcLightColour(vec3light_colour,floatlight_intensity,vec3position,vec3to_

light_dir,vec3normal)

vec4diffuseColour=vec4(0,0,0,0);

vec4specColour=vec4(0,0,0,0);

//DiffuseLight

floatdiffuseFactor=max(dot(normal,to_light_dir),0.0);

diffuseColour=diffuseC*vec4(light_colour,1.0)*light_intensity*diffuseFact

//SpecularLight

vec3camera_direction=normalize(camera_pos-position);

vec3from_light_dir=-to_light_dir;

vec3reflected_light=normalize(reflect(from_light_dir,normal));

floatspecularFactor=max(dot(camera_direction,reflected_light),0.0);

specularFactor=pow(specularFactor,specularPower);

specColour=speculrC*light_intensity*specularFactor*material.reflectance*

vec4(light_colour,1.0);

return(diffuseColour+specColour);

ThenthemethodcalcPointLightappliesattenuationfactortothelightcolourcalculatedinthepreviousfunction.

vec4calcPointLight(PointLightlight,vec3position,vec3normal)

vec3light_direction=light.position-position;

vec3to_light_dir=normalize(light_direction);

vec4light_colour=calcLightColour(light.colour,light.intensity,position,to_li

ght_dir,normal);

//ApplyAttenuation

floatdistance=length(light_direction);

floatattenuationInv=light.att.constant+light.att.linear*distance+

light.att.exponent*distance*distance;

returnlight_colour/attenuationInv;

WewillcreatealsoanewfunctiontocalculatetheeffectofadirectionallightwhichjustinvokesthecalcLightColourfunctionwiththelightdirection.

vec4calcDirectionalLight(DirectionalLightlight,vec3position,vec3normal)

returncalcLightColour(light.colour,light.intensity,position,normalize(light.di

rection),normal);

Finally,ourmainmethodjustaggregatesthecolourcomponentsoftheambientpointanddirectionallightstocalculatethefragmentcolour.

voidmain()

setupColours(material,outTexCoord);

vec4diffuseSpecularComp=calcDirectionalLight(directionalLight,mvVertexPos,mvV

ertexNormal);

diffuseSpecularComp+=calcPointLight(pointLight,mvVertexPos,mvVertexNormal);

fragColor=ambientC*vec4(ambientLight,1)+diffuseSpecularComp;

Andthat’sit,wecannowsimulatethemovementofthe,artificial,sunacrosstheskyandgetsomethinglikethis(movementisacceleratedsoitcanbeviewedwithoutwaitingtoolong).

SpotLightNowwewillimplementspotlightswhichareverysimilartopointlightsbuttheemittedlightisrestrictedtoa3Dcone.Itmodelsthelightthatcomesoutfromfocusesoranyotherlightsourcethatdoesnotemitinalldirections.Aspotlighthasthesameattributesasapointlightbutaddstwonewparameters,theconeangleandtheconedirection.

Spotlightcontributioniscalculatedinthesamewayasapointlightwithsomeexceptions.Thepointwhichthevectorthatpointsfromthevertexpositiontothelightsourceisnotcontainedinsidethelightconearenotaffectedbythepointlight.

Howdowecalculateifit’sinsidethelightconeornot?Weneedtodoadotproductagainbetweenthevectorthatpointsfromthelightsourceandtheconedirectionvector(bothofthemnormalized).

ThedotproductbetweenLandCvectorsisequalto: ⋅ = ∣ ∣ ⋅ ∣ ∣ ⋅ Cos(α).If,inourspotlightdefinitionwestorethecosineofthecutoffangle,ifthedotproductishigherthanthatvaluewewillknowthatitisinsidethelightcone(recallthecosinegraph,whenαangleis0,thecosinewillbe1,thesmallertheanglethehigherthecosine).

Theseconddifferenceisthatthepointsthatarefarawayfromtheconevectorwillreceivelesslight,thatis,theattenuationwillbehigher.Thereareseveralwaysofcalculatethis,wewillchoseasimpleapproachbymultiplyingtheattenuationbythefollowingfactor:

1 − (1 − Cos(α))/(1 − Cos(cutOffAngle)

(Inourfragmentshaderswewon’thavetheanglebutthecosineofthecutoffangle.Youcancheckthattheformulaaboveproducesvaluesfrom0to1,0whentheangleisequaltothecutoffangleand1whentheangleis0).

Theimplementationwillbeverysimilartotherestoflights.WeneedtocreateanewclassnamedSpotLight,setuptheappropriateuniforms,passittotheshaderandmodifythefragmentshadertogetit.Youcancheckthesourcecodeforthischapter.

Anotherimportantthingwhenpassingtheuniformsisthattranslationsshouldnotbeappliedtothelightconedirectionsinceweareonlyinterestedindirections.Soasinthecaseofthedirectionallight,whentransformingtoviewspacecoordinateswemustsetwcomponentto0.

L C L C

MultipleLightsSoatlastwehavefinallyimplementedallthefourtypesoflight,butcurrentlywecanonlyuseoneinstanceforeachtype.Thisisokforambientanddirectionallightbutwedefinitivelywanttouseseveralpointandspotlights.Weneedtosetupourfragmentshadertoreceivealistoflights,sowewillusearraystostorethatinformation.Let’sseehowthiscanbedone.

Beforewestart,it’simportanttonotethatinGLSLthelengthofthearraymustbesetatcompiletimesoitmustbebigenoughtoaccommodatealltheobjectsweneedlater,atruntime.Thefirstthingthatwewilldoisdefinesomeconstantstosetupthemaximumnumberofpointandspotlightsthatwearegoingtouse.

constintMAX_POINT_LIGHTS=5;

constintMAX_SPOT_LIGHTS=5;

Thenweneedtomodifytheuniformsthatpreviouslystorejustasinglepointandspotlighttouseanarray.

uniformPointLightpointLights[MAX_POINT_LIGHTS];

uniformSpotLightspotLights[MAX_SPOT_LIGHTS];

Inthemainfunctionwejustneedtoiterateoverthosearraystocalculatethecolourcontributionsofeachinstanceusingtheexistingfunctions.Wemaynotpassasmanylightsasthearraylengthsoweneedtocontrolit.Therearemanypossiblewaystodothis,oneistopassauniformwiththeactualarraylengthbutthismaynotworkwitholdergraphicscards.Insteadwewillcheckthelightintensity(emptypositionsinarraywillhavealightintensityequalto0).

for(inti=0;i<MAX_POINT_LIGHTS;i++)

if(pointLights[i].intensity>0)

diffuseSpecularComp+=calcPointLight(pointLights[i],mvVertexPos,mvVertexNor

for(inti=0;i<MAX_SPOT_LIGHTS;i++)

if(spotLights[i].pl.intensity>0)

diffuseSpecularComp+=calcSpotLight(spotLights[i],mvVertexPos,mvVertexNorma

NowweneedtocreatethoseuniformsintheRenderclass.Whenweareusingarraysweneedtocreateauniformforeachelementofthelist.So,forinstance,forthepointLights

arrayweneedtocreateauniformnamedpointLights[0],pointLights[1],etc.Andofocurse,thistranslatesalsotothestructureattributes,sowewillhavepointLights[0].colour,pointLights[1],colour,etc.Themethodstocreatethoseuniformsareasfollows.

publicvoidcreatePointLightListUniform(StringuniformName,intsize)throwsException

for(inti=0;i<size;i++){

createPointLightUniform(uniformName+"["+i+"]");

publicvoidcreateSpotLightListUniform(StringuniformName,intsize)throwsException

for(inti=0;i<size;i++){

createSpotLightUniform(uniformName+"["+i+"]");

Wealsoneedmethodstosetupthevaluesofthoseuniforms.

publicvoidsetUniform(StringuniformName,PointLight[]pointLights){

intnumLights=pointLights!=null?pointLights.length:0;

for(inti=0;i<numLights;i++){

setUniform(uniformName,pointLights[i],i);

publicvoidsetUniform(StringuniformName,PointLightpointLight,intpos){

setUniform(uniformName+"["+pos+"]",pointLight);

publicvoidsetUniform(StringuniformName,SpotLight[]spotLights){

intnumLights=spotLights!=null?spotLights.length:0;

for(inti=0;i<numLights;i++){

setUniform(uniformName,spotLights[i],i);

publicvoidsetUniform(StringuniformName,SpotLightspotLight,intpos){

setUniform(uniformName+"["+pos+"]",spotLight);

FinallywejustneedtoupdatetheRenderclasstoreceivealistofpointandspotlights,andmodifyaccordinglytheDummyGameclasstocreatethoselisttoseesomethinglikethis.

GameHUDInthischapterwewillcreateaHUD(Heads-UpDisplay)forourgame.Thatis,asetof2Dshapesandtextthataredisplayedatanytimeoverthe3Dscenetoshowrelevantinformation.WewillcreateasimpleHUDthatwillserveustoshowsomebasictechniquesforrepresentingthatinformation.

Whenyouexaminethesourcecodeforthischpater,youwillseealsothatsomelittlerefactoringhasbeenappliedtothesourcecode.ThechangesaffectespeciallytheRendererclassinordertoprepareitfortheHUDrendering.

TextrenderingThefirstthingthatwewilldotocreateaHUDisrendertext.Inordertodothat,wearegoingtomapatexturethatcontainsalphabetcharactersintoaquad.Thatquadwillbedividedbyasetoftileswhichwillrepresentasingleletter.lateron,wewillusethattexturetodrawthetextinthescreen.Sothefirststepistocreatethetexturethatcontainsthealphabet.Youcanusemanyprogramsouttherethatcandothistask,suchas,CBG,F2IBuilder,etc.Inthiscase,WewilluseCodehead’sBitmapFontGenerator(CBFG).

CBGletsyouconfiguremanyoptionssuchasthetexturesize,thefonttype,theanti-aliasingtobeapplied,etc.Thefollowingfiguredepictstheconfigurationthatwewillusetogenerateatexturefile.InthischapterwewillassumethatwewillberenderingtextencodedinISO-8859-1format,ifyouneedtodealwithdifferentcharactersetsyouwillneedtotweakalittlebitthecode.

WhenyouhavefinishedconfiguringallthesettingsinCBGyoucanexporttheresulttoseveralimageformats.InthiscasewewillexportitasaBMPfileandthentransformittoPNGsoitcanbeloadedasatexture.WhentransformingittoPNGwewillsetupalsotheblackbackgroundastransparent,thatis,wewillsettheblackcolourtohaveanalphavalueequalto0(YoucanusetoolslikeGIMPtodothat).Attheendyouwillhavesomethingsimilarasthefollowingpicture.

Asyoucansee,theimagehasallthecharactersdisplayedinrowsandcolumns.Inthiscasetheimageiscomposedby15columnsand17rows.Byusingthecharactercodeofaspecificletterwecancalculatetherowandthecolumnthatisenclosedintheimage.The

columncanbecalculatedasfollows:column = codemodnumberOfColumns.Wheremod

isthemoduleoperator.Therowcanbecalculatedasfollows:row = code/numberOfCols,inthiscasewewilldoaintegerbyintegeroperationsowecanignorethedecimalpart.

WewillcreateanewclassnamedTextItemthatwillconstructallthegraphicalelementsneededtorendertext.Thisisasimplifiedversionthatdoesnotdealwithmultilinetexts,etc.butitwillallowustopresenttextualinformationintheHUD.Hereyoucanseethefirstlinesandtheconstructorofthisclass.

importjava.nio.charset.Charset;

importjava.util.ArrayList;

importjava.util.List;

importorg.lwjglb.engine.graph.Material;

importorg.lwjglb.engine.graph.Texture;

publicclassTextItemextendsGameItem{

privatestaticfinalfloatZPOS=0.0f;

privatestaticfinalintVERTICES_PER_QUAD=4;

privateStringtext;

privatefinalintnumCols;

privatefinalintnumRows;

publicTextItem(Stringtext,StringfontFileName,intnumCols,intnumRows)throws

Exception{

super();

this.text=text;

this.numCols=numCols;

this.numRows=numRows;

Texturetexture=newTexture(fontFileName);

this.setMesh(buildMesh(texture,numCols,numRows));

AsyoucanseethisclassextendstheGameItemclass,thisisbecausewewillbeinterestedinchangingthetextpositioninthescreenandmayalsoneedtoscaleandrotateit.Theconstructorreceivesthetexttobedisplayedandtherelevantdataofthetexturefilethatwillbeusedtorenderit(thefilethatcontainstheimageandthenumberofcolumnsandrows).

IntheconstructorweloadthetextureimagefileandinvokeamethodthatwillcreateaMeshinstancethatmodelsourtext.Let’sexaminethebuildMeshmethod.

privateMeshbuildMesh(Texturetexture,intnumCols,intnumRows){

byte[]chars=text.getBytes(Charset.forName("ISO-8859-1"));

intnumChars=chars.length;

List<Float>positions=newArrayList();

List<Float>textCoords=newArrayList();

float[]normals=newfloat[0];

floattileWidth=(float)texture.getWidth()/(float)numCols;

floattileHeight=(float)texture.getHeight()/(float)numRows;

Thefirstlinesofcodecreatethedatastructuresthatwillbeusedtostorethepositions,texturecoordinates,normalsandindicesoftheMesh.Inthiscasewewillnotapplylightingsothenormalsarraywillbeempty.Whatwearegoingtodoisconstructaquadcomposedbyasetoftiles,eachofthemrepresentingasinglecharacter.Weneedtoassignalsotheappropriatetexturecoordinatesdependingonthecharactercodeassociatedtoeachtile.Thefollowingpictureshowsthedifferentelementsthatcomposethetilesandthequad.

So,foreachcharacterweneedtocreateatilewhichisformedbytwotriangleswhichcanbedefinedbyusingfourvertices(V1,V2,V3andV4).Theindiceswillbe(0,1,2)forthefirsttriangle(thelowerone)and(3,0,2)fortheothertriangle(theupperone).Texturecoordinatesarecalculatedbasedonthecolumnandtherowassociatedtoeachcharacterinthetextureimage.Texturecoordinatesneedtobeintherange[0,1]sowejustneedtodividethecurrentroworthecurrentcolumnbythetotalnumberofrowsorcolumnstogetthecoordinateassociatedtoV1.Fortherestofverticeswejustneedtoincreasethecurrentcolumnorrowbyoneinordertogettheappropriatecoordinate.

Thefollowingloopcreatesallthevertexposition,texturecoordinatesandindicesassociatedtothequadthatcontainsthetext.

for(inti=0;i<numChars;i++){

bytecurrChar=chars[i];

intcol=currChar%numCols;

introw=currChar/numCols;

//Buildacharactertilecomposedbytwotriangles

//LeftTopvertex

positions.add((float)i*tileWidth);//x

positions.add(0.0f);//y

positions.add(ZPOS);//z

textCoords.add((float)col/(float)numCols);

textCoords.add((float)row/(float)numRows);

indices.add(i*VERTICES_PER_QUAD);

//LeftBottomvertex

positions.add((float)i*tileWidth);//x

positions.add(tileHeight);//y

textCoords.add((float)col/(float)numCols);

textCoords.add((float)(row+1)/(float)numRows);

indices.add(i*VERTICES_PER_QUAD+1);

//RightBottomvertex

positions.add((float)i*tileWidth+tileWidth);//x

positions.add(tileHeight);//y

textCoords.add((float)(col+1)/(float)numCols);

textCoords.add((float)(row+1)/(float)numRows);

//RightTopvertex

positions.add((float)i*tileWidth+tileWidth);//x

textCoords.add((float)(col+1)/(float)numCols);

textCoords.add((float)row/(float)numRows);

//Addindicesporlefttopandbottomrightvertices

Thearesomeimportantthingstonoticeinthepreviousfragmentofcode:

Wewillrepresenttheverticesusingscreencoordinates(rememberthattheoriginofthescreencoordinatesislocatedatthetopleftcorner).Theycoordinateoftheverticesontopofthetrianglesislowerthantheycoordinateoftheverticesonthebottomofthetriangles.

Wedon’tscaletheshape,soeachtileisataxdistanceequaltoacharacterwidth.Theheightofthetriangleswillbetheheightofeachcharacter.Thisisbecausewewanttorepresentthetextassimilaraspossibleastheoriginaltexture.(AnywaywecanlaterscaletheresultsinceTextItemclassinheritsfromGameItem).Wesetafixedvalueforthezcoordinate,sinceitwillbeirrelevantinordertodrawthisobject.

Thenextfigureshowsthecoordinatesofsomevertices.

Whydoweusescreencoordinates?Firstofall,becausewewillberendering2DobjectsinourHUDandoftenismorehandytousethem,andsecondlybecausewewilluseanorthographicprojectioninordertodrawthem.Wewillexplainwhatisanorthographicprojectionlateron.

TheTextItemclassiscompletedwithothermethodstogetthetextandtochangeitatruntime.Wheneverthetextischanged,weneedtocleanupthepreviousVAOs(storedintheMeshinstance)andcreateanewone.Wedonotneedtodestroythetexture,sowehavecreatedanewmethodintheMeshclasstojustremovethatdata.

publicStringgetText(){

returntext;

publicvoidsetText(Stringtext){

this.text=text;

Texturetexture=this.getMesh().getMaterial().getTexture();

this.getMesh().deleteBuffers();

this.setMesh(buildMesh(texture,numCols,numRows));

Nowthatwehavesetuptheinfrastuctureneededtodarwtext,Howdowedoit?Thebasisisfirsttorenderthe3Dscene,asinthepreviouschapters,andthenrenderthe2DHUDoverit.InordertorendertheHUDwewilluseanorthographicprojection(alsonamedorthogonalprojection).AnOrthographicprojectionisa2Drepresentationofa3Dobject.Youmayalreadyhaveseensomesamplesinblueprintsof3Dobjectswhichshowtherepresentationofthoseobjectsfromthetoporfromsomesides.Thefollowingpictureshowstheorthographicprojectionofacylinderfromthetopandfromthefront.

Thisprojectionisveryconvenientinordertodraw2Dobjectsbecauseit"ignores"thevaluesofthezcoordinates,thatis,thedistancetotheview.Withthisprojectiontheobjectssizesdonotdecreasewiththedistance(asintheperspectiveprojection).Inordertoprojectanobjectusinganortographicprojectionwewillneedtouseanothermatrix,theorthographicmatrixwhichformulaisshownbelow.

Thismatrixalsocorrectsthedistortionsthatotherwisewillbegeneratedduetothefactthatourwindowisnotalwaysaperfectsquarebutarectangle.Therightandbottomparameterswillbethescreensize,theleftandthetoponeswillbetheorigin.Theorthographicprojectionmatrixisusedtotransformscreencoordinatesto3Dspacecoordinates.Thefollowingpictureshowshowthismappingisdone.

Thepropertiesofthismatrix,willallowustousescreencoordinates.

WecannowcontinuewiththeeimplementationoftheHUD.Thenextthingthatweshoulddoiscreateanothersetofshaders,avertexandafragmentshaders,inordertodrawtheobjectsoftheHUD.Thevertexshaderisactuallyverysimple.

#version330

outvec2outTexCoord;

uniformmat4projModelMatrix;

voidmain()

gl_Position=projModelMatrix*vec4(position,1.0);

Itwilljustreceivetheverticespositions,thetexturecoordinates,theindicesandthenormalsandwilltransformthemtothe3Dspacecoordinatesusingamatrix.Thatmatrixisthemultiplicationoftheortographicprojectionmatrixandthemodelmatrix,projModelMatrix = ortographicMatrix ⋅modelMatrix.Sincewearenotdoinganythingwiththecoordinatesinmodelspace,it’smuchmoreefficienttomultiplybothmatricesinjavacodethanintheshadere.Bydoingsowewillbedoingthatmultipliaztiononceperiteminstedofdoingitforeachvertex.Rememberthatourverticesshouldbeexpressedinscreencoordinates.

Thefragmentshaderisalsoverysimple.

#version330

invec2outTexCoord;

invec3mvPos;

outvec4fragColor;

uniformvec4colour;

voidmain()

fragColor=colour*texture(texture_sampler,outTexCoord);

Itjustusesthetexturecoordinatesandmultiplesthatcolourbyabasecolour.Thiscanbeusedtochangethecolourofthetexttoberenderedwithouttheneedofcreatingseveraltexturefiles.NowthatwehavecreatedthenewpairofshaderswecanusethemintheRendererclass.But,beforethat,wewillcreateanewinterfacenamedIHudthatwillcontainalltheelementsthataretobedisplayedintheHUD.Thisinterfacewillalsoprovideadefaultcleanupmethod.

publicinterfaceIHud{

GameItem[]getGameItems();

defaultvoidcleanup(){

GameItem[]gameItems=getGameItems();

gameItem.getMesh().cleanUp();

ByusingthatinterfaceourdifferentgamescandefinecustomHUDsbuttherenderingmechanismdoesnotneedtobechanged.NowwecangetbacktotheRendererclass,whichbythewayhasbeenmovedtotheenginegraphicspackagebecausenowit’sgenericenoughtonotbedependentonthespecificimplementationofeachgame.IntheRendererclasswehaveaddedanewmethodtocreate,linkandsetupanewShaderProgramthatusestheshadersdescribedabove.

privatevoidsetupHudShader()throwsException{

hudShaderProgram=newShaderProgram();

hudShaderProgram.createVertexShader(Utils.loadResource("/shaders/hud_vertex.vs"));

hudShaderProgram.createFragmentShader(Utils.loadResource("/shaders/hud_fragment.fs"

hudShaderProgram.link();

//CreateuniformsforOrtographic-modelprojectionmatrixandbasecolour

hudShaderProgram.createUniform("projModelMatrix");

hudShaderProgram.createUniform("colour");

TherendermethodfirstinvokesthemethodrenderScenewhichcontainsthecodefrompreviouschapterthatrenderedthe3Dscene,andanewmethod,namedrenderHud,torendertheHUD.

publicvoidrender(Windowwindow,Cameracamera,GameItem[]gameItems,

SceneLightsceneLight,IHudhud){

clear();

renderScene(window,camera,gameItems,sceneLight);

renderHud(window,hud);

TherenderHudmethodisasfollows:

privatevoidrenderHud(Windowwindow,IHudhud){

hudShaderProgram.bind();

Matrix4fortho=transformation.getOrthoProjectionMatrix(0,window.getWidth(),win

dow.getHeight(),0);

for(GameItemgameItem:hud.getGameItems()){

//SetortohtaphicandmodelmatrixforthisHUDitem

Matrix4fprojModelMatrix=transformation.getOrtoProjModelMatrix(gameItem,ort

hudShaderProgram.setUniform("projModelMatrix",projModelMatrix);

hudShaderProgram.setUniform("colour",gameItem.getMesh().getMaterial().getAmbi

entColour());

//RenderthemeshforthisHUDitem

mesh.render();

hudShaderProgram.unbind();

Thepreviousfragmentofcode,iteratesovertheelementsthatcomposetheHUDandmultipliestheorthographicprojectionmatrixbythemodelmatrixassociatedtoeachelement.Theorthographicprojectionmatrixisupdatedineachrendercall(becausethescreendimensionscanchange),andit’scalculatedinthefollowingway:

publicfinalMatrix4fgetOrthoProjectionMatrix(floatleft,floatright,floatbottom,

floattop){

orthoMatrix.identity();

orthoMatrix.setOrtho2D(left,right,bottom,top);

returnorthoMatrix;

InourgamepackagewewillcreateaHudclasswhichimplementstheIHudinterfaceandreceivesatextintheconstructorcreatinginternallyaTexIteminstance.

packageorg.lwjglb.game;

importorg.lwjglb.engine.GameItem;

importorg.lwjglb.engine.IHud;

importorg.lwjglb.engine.TextItem;

publicclassHudimplementsIHud{

privatestaticfinalintFONT_COLS=15;

privatestaticfinalintFONT_ROWS=17;

privatestaticfinalStringFONT_TEXTURE="/textures/font_texture.png";

privatefinalGameItem[]gameItems;

privatefinalTextItemstatusTextItem;

publicHud(StringstatusText)throwsException{

this.statusTextItem=newTextItem(statusText,FONT_TEXTURE,FONT_COLS,FONT_R

this.statusTextItem.getMesh().getMaterial().setColour(newVector4f(1,1,1,1)

gameItems=newGameItem[]{statusTextItem};

publicvoidsetStatusText(StringstatusText){

this.statusTextItem.setText(statusText);

@Override

publicGameItem[]getGameItems(){

returngameItems;

publicvoidupdateSize(Windowwindow){

this.statusTextItem.setPosition(10f,window.getHeight()-50f,0);

IntheDummyGameclasswecreateaninstanceofthatclassaninitializeitwithadefaulttext,andwewillgetsomethinglikethis.

IntheTextureclassweneedtomodifythewaytexturesareinterpolatedtoimprovetextreadibility(youwillonlynoticeifyouplaywiththetextscaling).

Butthesampleisnotfnishedyet.Ifyouplaywiththezoomsothetextoverlapswiththecubeyouwillseethiseffect.

Thetextisnotdrawnwithatransparentbackground.Inordertoachievethat,wemustexplicitlyenablesupportforblendingsothealphacomponentcanbeused.WewilldothisintheWindowclasswhenwesetuptheotherinitializationparameterswiththefollowingfragmentofcode.

//Supportfortransparencies

glEnable(GL_BLEND);

glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);

Nowyouwillseethetextdrawnwithatransparentbackground.

CompletetheHUDNowthatwehaverenderedatextwecanaddmoreelementstotheHUD.Wewilladdacompassthatrotatesdependingonthedirectionthecameraisfacing.Inthiscase,wewilladdanewGameItemtotheHudclassthatwillhaveameshthatmodelsacompass.

Thecompasswillbemodeledbyan.objfilebutwillnothaveatextureassociated,insteaditwillhavejustabackgroundcolour.SoweneedtochangethefragmentshaderfortheHUDalittlebittodetectifwehaveatextureornot.WewillbeabletodothisbysettinganewuniformnamedhasTexture.

#version330

invec2outTexCoord;

invec3mvPos;

outvec4fragColor;

uniformvec4colour;

uniforminthasTexture;

voidmain()

if(hasTexture==1)

fragColor=colour*texture(texture_sampler,outTexCoord);

fragColor=colour;

ToaddthecompassthetheHUDwejustneedtocreateanewGameIteminstance,tntheHudclass,thatloadsthecompassmodelandaddsittothelistofitems.Inthiscasewewillneedtoscaleupthecompass.Rememberthatitneedstobeexpressedinscreencoordinates,sousuallyyouwillneedtoincreaseitssize.

//Createcompass

Meshmesh=OBJLoader.loadMesh("/models/compass.obj");

Materialmaterial=newMaterial();

material.setAmbientColour(newVector4f(1,0,0,1));

mesh.setMaterial(material);

compassItem=newGameItem(mesh);

compassItem.setScale(40.0f);

//Rotatetotransformittoscreencoordinates

compassItem.setRotation(0f,0f,180f);

//CreatelistthatholdstheitemsthatcomposetheHUD

gameItems=newGameItem[]{statusTextItem,compassItem};

Noticealsothat,inorderforthecompasstopointupwardsweneedtorotate180degreessincethemodelwilloftentendtouseOpenGLspacecoordinates.Ifweareexpectingscreencoordinatesitwouldpointingdownwards.TheHudclasswillalsoprovideamethodtoupdatetheangleofthecompassthatmusttakethisalsointoconsideration.

publicvoidrotateCompass(floatangle){

this.compassItem.setRotation(0,0,180+angle);

IntheDummyGameclasswewillupdatetheanglewheneverthecameraismoved.Weneedtousetheyanglerotation.

//Updatecamerabasedonmouse

if(mouseInput.isRightButtonPressed()){

Vector2frotVec=mouseInput.getDisplVec();

camera.moveRotation(rotVec.x*MOUSE_SENSITIVITY,rotVec.y*MOUSE_SENSITIVITY,0)

//UpdateHUDcompass

hud.rotateCompass(camera.getRotation().y);

Wewillgetsomethinglikethis(rememberthatitisonlyasample,inarealgameyoumayprobablywanttousesometexturetogivethecompassadifferentlook).

TextrenderingrevisitedBeforereviewingothertopicslet’sgobacktothetextrenderingapproachwehavepresentedhere.ThesolutionisverysimpleandhandytointroducetheconceptsinvolvedinrenderingHUDelementsbutitpresentssomeproblems:

Itdoesnotsupportnonlatincharactersets.Ifyouwanttouseseveralfontsyouneedtocreateaseparatetexturefileforeachfont.Also,theonlywaytochangethetextsizeiseithertoscaleit,whichmayresultinapoorqualityrenderedtext,ortogenerateanothertexturefile.

Themostimportantone,charactersinmostofthefontsdonotoccupythesamesizebutwearedividingthefonttextureinequallysizedelements.Wehavecleverlyused“Consolas”fontwhichismonospaced(thatis,allthecharactersoccupythesameamountofhorizontalspace),butifyouuseanon-monospacedfontyouwillseeannoyingvariablewhitespacesbetweenthecharacters.

Weneedtochangeourapproachanprovideamoreflexiblewaytorendertext.Ifyouthinkaboutit,theoverallmechanismisok,thatis,thewayofrenderingtextbytexturingquadsforeachcharacter.Theissuehereishowwearegeneratingthetextures.WeneedtobeabletogeneratethosetexturedynamicallybyusingthefontsavailableintheSystem.

Thisiswherejava.awt.Fontcomestotherescue,wewillgeneratethetexturesbydrawingeachletterforaspecifiedfontfamilyandsizedynamically.Thattexturewillbeusedinthesamewayasdescribedpreviously,butitwillsolveperfectlyalltheissuesmentionedabove.WewillcreateanewclassnamedFontTexturethatwillreceiveaFontinstanceandacharsetnameandwilldynamicallycreateatexturethatcontainsalltheavailablecharacters.Thisistheconstructor.

publicFontTexture(Fontfont,StringcharSetName)throwsException{

this.font=font;

this.charSetName=charSetName;

charMap=newHashMap<>();

buildTexture();

Thefirststepistohandlethenonlatinissue,givenacharsetandafontwewillbuildaStringthatcontainsallthecharactersthatcanberendered.

privateStringgetAllAvailableChars(StringcharsetName){

CharsetEncoderce=Charset.forName(charsetName).newEncoder();

StringBuilderresult=newStringBuilder();

for(charc=0;c<Character.MAX_VALUE;c++){

if(ce.canEncode(c)){

result.append(c);

returnresult.toString();

Let’snowreviewthemethodthatactuallycreatesthetexture,namedbuildTexture.

privatevoidbuildTexture()throwsException{

//Getthefontmetricsforeachcharacterfortheselectedfontbyusingimage

BufferedImageimg=newBufferedImage(1,1,BufferedImage.TYPE_INT_ARGB);

Graphics2Dg2D=img.createGraphics();

g2D.setFont(font);

FontMetricsfontMetrics=g2D.getFontMetrics();

StringallChars=getAllAvailableChars(charSetName);

this.width=0;

this.height=0;

for(charc:allChars.toCharArray()){

//Getthesizeforeachcharacterandupdateglobalimagesize

CharInfocharInfo=newCharInfo(width,fontMetrics.charWidth(c));

charMap.put(c,charInfo);

width+=charInfo.getWidth();

height=Math.max(height,fontMetrics.getHeight());

g2D.dispose();

Wefirstobtainthefontmetricsbycreatingatemporaryimage.ThenweiterateovertheStringthatcontainsalltheavailablecharactersandgetthewidth,withthehelpofthefontmetrics,ofeachofthem.Westorethatinformationonamap,charMap,whichwilluseasakeythecharacter.Withthatprocesswedeterminethesizeoftheimagethatwillhavethetexture(withaheightequaltothemaximumsizeofallthecharactersanditswithequaltothesumofeachcharacterwidth).CharSetisaninnerclassthatholdstheinformationaboutacharacter(itswidthandwhereitstarts,inthexcoordinate,inthetextureimage).

publicstaticclassCharInfo{

privatefinalintstartX;

privatefinalintwidth;

publicCharInfo(intstartX,intwidth){

this.startX=startX;

this.width=width;

publicintgetStartX(){

returnstartX;

publicintgetWidth(){

returnwidth;

Thenwewillcreateanimagethatwillcontainalltheavailablecharacters.Inordertodothis,wejustdrawthestringoveraBufferedImage.

//Createtheimageassociatedtothecharset

img=newBufferedImage(width,height,BufferedImage.TYPE_INT_ARGB);

g2D=img.createGraphics();

g2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALI

AS_ON);

g2D.setFont(font);

fontMetrics=g2D.getFontMetrics();

g2D.setColor(Color.WHITE);

g2D.drawString(allChars,0,fontMetrics.getAscent());

g2D.dispose();

Wearegeneratinganimagewhichcontainsallthecharactersinasinglerow(wemaybearenotfulfillingthepremisethatthetextureshouldhaveasizeofapoweroftwo,butitshouldworkonmostmoderncards.Inanycaseyoucouldalwaysachievethatbyaddingsomeextraemptyspace).Youcanevenseetheimagethatwearegenerating,ifafterthatblockofcode,youputalinelikethis:

ImageIO.write(img,IMAGE_FORMAT,newjava.io.File("Temp.png"));

Theimagewillbewrittentoatemporaryfile.Thatfilewillcontainalongstripwithalltheavailablecharacters,drawninwhiteovertransparentbackgroundusingantialiasing.

Finally,wejustneedtocreateaTextureinstancefromthatimage,wejustdumptheimagebytesusingaPNGformat(whichiswhattheTextureclassexpects).

//Dumpimagetoabytebuffer

InputStreamis;

ByteArrayOutputStreamout=newByteArrayOutputStream()){

ImageIO.write(img,IMAGE_FORMAT,out);

out.flush();

is=newByteArrayInputStream(out.toByteArray());

texture=newTexture(is);

YoumaynoticethatwehavemodifiedalittlebittheTextureclasstohaveanotherconstructorthatreceivesanInputStream.NowwejustneedtochangetheTextItemclasstoreceiveaFontTextureinstanceinitsconstructor.

publicTextItem(Stringtext,FontTexturefontTexture)throwsException{

super();

this.text=text;

this.fontTexture=fontTexture;

setMesh(buildMesh());

ThebuildMeshmethodonlyneedstobechangedalittlebitwhensettingquadandtexturecoordinates,thisisasampleforoneofthevertices.

floatstartx=0;

for(inti=0;i<numChars;i++){

FontTexture.CharInfocharInfo=fontTexture.getCharInfo(characters[i]);

//Buildacharactertilecomposedbytwotriangles

//LeftTopvertex

positions.add(startx);//x

textCoords.add((float)charInfo.getStartX()/(float)fontTexture.getWidth());

textCoords.add(0.0f);

//..Morecode

startx+=charInfo.getWidth();

Youcanchecktherestofthechangesdirectlyinthesourcecode.ThefollowingpictureshowswhatyouwillgetforanArialfontwithasizeof20:

Asyoucanseethequalityoftherenderedtexthasbeenimprovedalot,youcanplaywithdifferentfontsandsizesandcheckitbyyourown.There’sstillplentyofroomforimprovement(likesupportingmultilinetexts,effects,etc.),butthiswillbeleftasanexerciseforthereader.

Youmayalsonoticethatwearestillabletoapplyscalingtothetext(wepassamodelviewmatrixintheshader).ThismaynotbeneedednowfortextbutitmaybeusefulforotherHUDelements.

WehavesetupalltheinfrastructureneededinordertocreateaHUDforourgames.Nowitisjustamatterofcreatingalltheelementsthatrepresentrelevantinformationtotheuserandgivethemaprofessionallookandfeel.

OSXIfyoutrytorunthesamplesinthischapter,andthenextonesthatrendertext,youmayfindthattheapplicationblocksandnothingisshowninthescreen.ThisisduetothefactthatAWTandGLFWdogetalongverywellunderOSX.But,whatdoesithavetodowithAWT?WeareusingtheFontclass,whichbelongstoAWT,andjustbyinstantiatingit,AWTgetsinitializedalso.InOSXAWTtriestorununderthemainthread,whichisalsorequiredbyGLFW.Thisiswhatcausesthismess.

InordertobeabletousetheFontclass,GLFWmustbeinitializedbeforeAWTandthesamplesneedtoberuninheadlessmode.Youneedtosetupthispropertybeforeanythinggetsintialized:

System.setProperty("java.awt.headless","true");

Youmaygetawarning,butthesampleswillrun.

Amuchmorecleanapproachwouldbetousethestblibrarytorendertext.

SkyboxAskyboxwillallowustosetabackgroundtogivetheillusionthatour3Dworldisbigger.Thatbackgroundiswrappedaroundthecamerapositionandcoversthewholespace.Thetechniquethatwearegoingtousehereistoconstructabigcubethatwillbedisplayedaroundthe3Dscene,thatis,thecentreofthecamerapositionwillbethecentreofthecube.Thesidesofthatcubewillbewrappedwithatexturewithhillsablueskyandcloudsthatwillbemappedinawaythattheimagelooksacontinuouslandscape.

Thefollowingpicturedepictstheskyboxconcept.

Theprocessofcreatingaskyboxcanbesummarizedinthefollowingsteps:

Createabigcube.Applyatexturetoitthatprovidestheillusionthatweareseeingagiantlandscapewithnoedges.Renderthecubesoitssidesareatafardistanceanditsoriginislocatedatthecentreofthecamera.

Then,let’sstartwiththetexture.Youwillfindthattherearelotsofpre-generatedtexturesforyoutouseintheinternet.Theoneusedinthesampleforthischapterhasbeendownloadedfromhere:http://www.custommapmakers.org/skyboxes.php.Theconcretesamplethatwe

haveusedisthisone:http://www.custommapmakers.org/skyboxes/zips/ely_hills.zipandhasbeencreatedbyColinLowndes.

ThetexturesfromthatsitearecomposedbyseparateTGAfiles,oneforeachsideofthecube.ThetextureloaderthatwehavecreatedexpectsasinglefileinPNGformatsoweneedtocomposeasinglePNGimagewiththeimagesofeachface.Wecouldapplyothertechniques,suchuscubemapping,inordertoapplythetexturesautomatically.But,inordertokeepthischapterassimpleaspossible,youwillhavetomanuallayarrangethemintoasinglefile.Theresultimagewilllooklikethis.

Afterthat,weneedtocreatea.objfilewhichcontainsacubewiththecorrecttexturecoordinatesforeachface.Thepicturebelowshowsthetilesassociatedtoeachface(youcanfindthe.objfileusedinthischapterinthebook’ssourcecode).

Oncetheresoureshavebeensetup,wecanstartcoding.WewillstartbycreatinganewclassnamedSkyBoxwithaconstructorthatreceivesthepathtotheOBJmodelthatcontainstheskyboxcubeandthetexturefile.ThisclasswillinheritfromGameItemastheHUDclassfromthepreviouschapter.WhyitshouldinheritfromGameItem?Firstofall,forconvenience,wecanreusemostofthecodethatdealswithmeshesandtextures.Secondly,because,althoughtheskyboxwillnotmovewewillbeinterestedinapplyingrotationsandscalingtoit.IfyouthinkaboutitaSkyBoxisindeedagameitem.ThedefinitionoftheSkyBoxclassisasfollows.

importorg.lwjglb.engine.graph.Material;

importorg.lwjglb.engine.graph.OBJLoader;

publicclassSkyBoxextendsGameItem{

publicSkyBox(StringobjModel,StringtextureFile)throwsException{

super();

MeshskyBoxMesh=OBJLoader.loadMesh(objModel);

TextureskyBoxtexture=newTexture(textureFile);

skyBoxMesh.setMaterial(newMaterial(skyBoxtexture,0.0f));

setMesh(skyBoxMesh);

setPosition(0,0,0);

Ifyoucheckthesourcecodeforthischapteryouwillseethatwehavedonesomerefactoring.WehavecreatedaclassnamedScenewhichgroupsalltheinformationrelatedtothe3Dworld.ThisisthedefinitionandtheattributesoftheSceneclass,thatcontainsaninstanceoftheSkyBoxclass.

publicclassScene{

privateGameItem[]gameItems;

privateSkyBoxskyBox;

privateSceneLightsceneLight;

returngameItems;

//Morecodehere...

Thenextstepistocreateanothersetofvertexandfragmentshadersfortheskybox.But,whynotreusethesceneshadersthatwealreadyhave?Theansweristhat,actually,theshadersthatwewillneedareasimplifiedversionofthoseshaders,wewillnotbeapplyinglightstotheskybox(ortobemoreprecise,wewon’tneedpoint,spotordirectionallights).Belowyoucanseetheskyboxvertexshader.

#version330

outvec2outTexCoord;

voidmain()

gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);

Youcanseethatwestillusethemodelviewmatrix.Atishasbeenexplainedbeorewewillscaletheskybox,soweneedthattransformationmatrix.Youmayseesomeotherimplementationsthatincreasethesizeofthecubethatmodelstheskyboxatstarttimeanddonotneedtomultiplythemodelandtheviewmatrix.Wehavechosenthisapproachbecauseit’smoreflexibleanditallowsustochangethesizeoftheskyboxatruntime,butyoucaneasilyswitchtotheotherapproachifyouwant.

Thefragmentshaderisalsoverysimple.

#version330

invec2outTexCoord;

invec3mvPos;

outvec4fragColor;

uniformvec3ambientLight;

voidmain()

fragColor=vec4(ambientLight,1)*texture(texture_sampler,outTexCoord);

Asyoucansee,weaddedanambientlightuniformtotheshader.Thepurposeofthisuniformistomodifythecolouroftheskyboxtexturetosimulatedayandnight(Ifnot,theskyboxwilllooklikeifitwasmiddaywhentherestoftheworldisdark).

IntheRendererclasswejusthaveaddedanewmethodtousethoseshadersandsetuptheuniforms(nothingnewhere).

privatevoidsetupSkyBoxShader()throwsException{

skyBoxShaderProgram=newShaderProgram();

skyBoxShaderProgram.createVertexShader(Utils.loadResource("/shaders/sb_vertex.vs")

skyBoxShaderProgram.createFragmentShader(Utils.loadResource("/shaders/sb_fragment.

fs"));

skyBoxShaderProgram.link();

skyBoxShaderProgram.createUniform("projectionMatrix");

skyBoxShaderProgram.createUniform("modelViewMatrix");

skyBoxShaderProgram.createUniform("texture_sampler");

skyBoxShaderProgram.createUniform("ambientLight");

Andofcourse,weneedtocreateanewrendermethodfortheskyboxthatwillbeinvokedintheglobalrendermethod.

privatevoidrenderSkyBox(Windowwindow,Cameracamera,Scenescene){

skyBoxShaderProgram.bind();

skyBoxShaderProgram.setUniform("texture_sampler",0);

Matrix4fprojectionMatrix=transformation.getProjectionMatrix(FOV,window.getWidt

h(),window.getHeight(),Z_NEAR,Z_FAR);

skyBoxShaderProgram.setUniform("projectionMatrix",projectionMatrix);

SkyBoxskyBox=scene.getSkyBox();

Matrix4fviewMatrix=transformation.getViewMatrix(camera);

viewMatrix.m30(0);

viewMatrix.m31(0);

viewMatrix.m32(0);

Matrix4fmodelViewMatrix=transformation.getModelViewMatrix(skyBox,viewMatrix);

skyBoxShaderProgram.setUniform("modelViewMatrix",modelViewMatrix);

skyBoxShaderProgram.setUniform("ambientLight",scene.getSceneLight().getAmbientLig

ht());

scene.getSkyBox().getMesh().render();

skyBoxShaderProgram.unbind();

Themethodaboveisquitesimilartotheotherrenderonesbutthere’sadifferencethatneedstobeexplained.Asyoucansee,wepasstheprojectionmatrixandthemodelviewmatrixasusual.But,whenwegettheviewmatrix,wesetsomeofthecomponentsto0.Whywedothis?Thereasonbehindthatisthatwedonotwanttranslationtobeappliedtotheskybox.

Rememberthatwhenwemovethecamera,whatweareactuallydoingismovingthewholeworld.Soifwejustmultiplytheviewmatrixasitis,theskyboxwillbedisplacedwhenthecameramovees.Butwedonotwantthis,wewanttostickitattheorigincoordinatesat(0,0,0).Thisisachievedbysettingto0thepartsoftheviewmatrixthatcontainthetranslationincrements(them30,m31andm32components).

Youmaythinkthatyoucouldavoidusingtheviewmatrixatallsincetheskyboxmustbefixedattheorigin.Inthatcasewhat,youwillseeisthattheskyboxwillnotrotatewiththecamera,whichisnotwhatwewant.Weneedittorotatebutnottranslate.

Andthat’sall,youcancheckinthesourcecodeforthischapterthatintheDummyGameclassthatwehavecreatedmoreblockinstancestosimulateagroundandtheskybox.Youcanalsocheckthatwenowchangetheambientlighttosimulatelightandday.Whatyouwillgetissomethinglikethis.

Theskyboxisasmallonesoyoucaneasilyseetheeffectofmovingthroughtheworld(inarealgameitshouldbemuchbigger).Youcanseealsothattheworldspaceobjects,theblocksthatformtheterrainarelargerthantheskybox,soasyoumovethroughityouwillseeblocksappearingthroughthemountains.Thisismoreevidentbecauseoftherelativesmallsizeoftheskyboxwehaveset.Butanywaywewillneedtoalleviatethatbyaddinganeffectthathidesorblurdistantobjects(forinstanceapplyingafogeffect).

Anotherreasonfornotcreatingabiggerskyboxisbecauseweneedtoapplyseveraloptimizationsinordertobemoreefficient(theywillbeexplainedlateron).

Youcanplaywiththerendermethodancommentthelinesthatpreventtheskyboxfromtranslating.Thenyouwillbeabletogetoutoftheboxandseesomethinglikethis.

Althoughitisnotwhataskyboxshoulddoitcanhelpyououttounderstandtheconceptbehindthistecnique.Rememberthatthisisasimpleexample,youcouldimproveitbyaddingothereffectssuchasthesunmovingthroughtheskyormovingclouds.Also,inordertocreatebiggerworldsyouwillneedtosplittheworldintofragmentsandonlyloadtheonesthatarecontiguoustothefragmentwheretheplayeriscurrentlyin.

Anotherpointthatisworthtomentioniswhenshouldwerendertheskybox,beforethesceneorafter?Renderingafterthescenehasbeendrawnismoreoptimal,sincemostofthefragmentswillbediscardedduetodepthtesting.Thatis,nonvisibleskyboxfragments,theones,thatwillbehiddenbysceneelementswillbediscarded.WhenOpenGLwilltrytorenderthem,anddepthtestisenabled,itwilldiscardtheoneswhicharebehindsomepreviouslyrenderedfragments,whichwillhavealowerdepthvalue.Sotheanswermightbeobvious,right?Justrendertheskyboxafterthescenehasbeenrendered.Theproblemwiththisapproachishandlingtransparenttextures.Ifwehave,inthescene,objectswithtransparenttextures,theywillbedrawnusingthe"background"colour,whichisnowblack.Ifwerendertheskyboxbefore,thetransparenteffectwillbeappliedcorrectly.So,shallwerenderitbeforethescenethen?Well,yesandno.Ifyourenderbeforethesceneisrenderedyouwillsolvetransparencyissuesbutyouwillimpactperformance.Infact,youstillmayfacetransparencyissueswithoutaskybox.Forinstance,let'ssaythatyouhaveatransparentitem,whichoverlapswithanobjectthatisfaraway.Ifthetransparentobjectisrenderedfirst,youwillfacealsotransperentissues.So,maybeanotherapproachcanbeto

drawtransparentitems,seperately,afteralltheotheritemshavebeenrendered.Thisistheapproachusedbysomecommercialgames.So,bynow,wewillrendertheskyboxafterthescenehasbeenrendered,tryingtogetbetterperformance.

SomeoptimizationsFromthepreviousexample,thefactthattheskyboxisrelativesmallmakestheeffectalittlebitweird(youcanseeobjectsappearingmagicallybehindthehills).So,ok,let’sincreasetheskyboxsizeandthesizeofourworld.Let’sscalethesizeoftheskyboxbyafactorof50sotheworldwillbecomposedby40,000GameIteminstances(cubes).

Ifyouchangethescalefactorandreruntheexampleyouwillseethatperformanceproblemstartstoariseandthemovementthroughthe3Dworldisnotsmooth.It’stimetoputaneyeonperformance(youmayknowtheoldsayingthatstatesthat“prematureoptimizationistherootofallevil”,butsincethischapter13,Ihopenobodywillsaythatthispremature).

Let’sstartwithaconceptthatwillreducetheamountofdatathatisbeingrendered,whichisnamedfaceculling.Inourexampleswearerenderingthousandsofcubes,andacubeismadeofsixfaces.Wearerenderingthesixfacesforeachcubeeveniftheyarenotvisible.Youcancheckthisifyouzoominsideacube,youwillseeitsinteriorlikethis.

Facesthatcannotbeseenshouldbediscardedimmediatelyandthisiswhatfacecullingdoes.Infact,foracubeyoucanonlysee3facesatthesametime,sowecanjustdiscardhalfofthefaces(40,00032triangles)justbyapplyingfaceculling(thiswillonlybevalidifyourgamedoesnotrequireyoutodiveintotheinnersideofamodel,youcanseewhylateron).

Facecullingchecks,foreverytriangleifitsfacingtowardsusanddiscardstheonesthatarenotfacingthatdirection.But,howdoweknowifatriangleisfacingtowardsusornot?Well,thewaythatOpenGLdoesthisisbythewindingorderoftheverticesthatcomposeatriangle.

Rememberfromthefirstchaptersthatwemaydefinetheverticesofatriangleinclockwiseorcounter-clockwiseorder.InOpenGL,bydefault,trianglesthatareincounter-clockwiseorderarefacingtowardstheviewerandtrianglesthatareinclockwiseorderarefacingbackwards.Thekeythinghere,isthatthisorderischeckedwhilerenderingtakingintoconsiderationthepointofview.Soatrianglethathasbeendefinedincounter-clockwiseordercanbeinterpreted,atrenderingtime,asbeingdefinedlockwisebecauseofthepointofview.

Let’sputitinpractice,intheinitmethodoftheWindowclassaddthefollowinglines:

glEnable(GL_CULL_FACE);

glCullFace(GL_BACK);

Thefirstlinewillenablefacecullingandthesecondlinestatesthatfacesthatarefacingbackwardsshouldbeculled(removed).Withthatlineifyoulookupwardsyouwillseesomethinglikethis.

What’shappening?ifyoureviewtheverticesorderforthetopfaceyouwillseethatishasbeendefinedincounter-clockwiseorder.Well,itwas,butrememberthatthewindingreferstothepointofview.Infact,ifyouapplytranslationalsototheskyboxsoyouareabletoseeitformtheupsideyouwillseethatthetopfaceisrenderedagainonceyouareoutsideit.

Let’ssketchwhat’shappening.Thefollowingpictureshowsoneofthetrianglesofthetopfaceoftheskyboxcube,whichisdefinedbythreeverticesdefinedincounter-clockwiseorder.

Butrememberthatweareinsidetheskybox,ifwelookatthecubeformtheinterior,whatwewillseeisthattheverticesaredefinedinclockwiseorder.

Thisisbecause,theskyboxwasdefinedtobelookedfromtheoutside.Soweneedtoflipthedefinitionofsomeofthefacesinordertobeviewedcorrectlywhenfacecullingisenabled.

Butthere’sstillmoreroomforoptimization.Let’sreviewourrenderingprocess.IntherendermethodoftheRendererclasswhatwearedoingisiterateoveraGameItemarrayandrendertheassociatedMesh.ForeachGameItemwedothefollowing:

1. Setupthemodelviewmatrix(uniqueperGameItem).2. GettheMeshassociatedtotheGameItemandactivatethetexture,bindtheVAOand

enableitsattributes.3. Performacalltodrawthetriangles.4. DisablethetextureandtheVAOelements.

But,inourcurrentgame,wereusethesameMeshforthe40,000GameItems,wearerepeatingtheoperationsfrompoint2topoint4againandagain.Thisisnotveryefficient,keepinmindthateachcalltoanOpenGLfunctionisanativecallthatincursinsomeperformanceoverhead.Besidesthat,weshouldalwaystrytolimitthestatechangesinOpenGL(activatinganddeactivatingtextures,VAOsarestatechanges).

WeneedtochangethewaywedothingsandorganizeourstructuresaroundMeshessinceitwillbeveryfrequenttohavemanyGameItemswiththesameMesh.NowwehaveanarrayofGameItemseachofthempointingtothesameMesh.Wehavesomethinglikethis.

Instead,wewillcreateaMapofMesheswithalistoftheGamItemsthatsharethatMesh.

Therenderingstepswillbe,foreachMesh:

1. Setupthemodelviewmatrix(uniqueperGameItem).2. GettheMeshassociatedtotheGameItemandActivatetheMeshtexture,bindthe

VAOandenableitsattributes.3. ForeachGameItemassociated:a.Setupthemodelviewmatrix(uniqueperGame

Item).b.Performacalltodrawthetriangles.

4. DisablethetextureandtheVAOelements.

IntheSceneclass,wewillstorethefollowingMap.

privateMap<Mesh,List<GameItem>>meshMap;

WestillhavethesetGameItemsmethod,butinsteadofjuststoringthearray,weconstructthemeshmap.

publicvoidsetGameItems(GameItem[]gameItems){

intnumGameItems=gameItems!=null?gameItems.length:0;

for(inti=0;i<numGameItems;i++){

GameItemgameItem=gameItems[i];

List<GameItem>list=meshMap.get(mesh);

if(list==null){

list=newArrayList<>();

meshMap.put(mesh,list);

list.add(gameItem);

TheMeshclassnowhasamethodtorenderalistoftheassociatedGameItemsandwehavesplittheactivatinganddeactivatingcodeintoseparatemethods.

privatevoidinitRender(){

Texturetexture=material.getTexture();

if(texture!=null){

//Activatefirstexturebank

//Bindthetexture

//Drawthemesh

privatevoidendRender(){

//Restorestate

glBindTexture(GL_TEXTURE_2D,0);

publicvoidrender(){

initRender();

endRender();

publicvoidrenderList(List<GameItem>gameItems,Consumer<GameItem>consumer){

initRender();

//SetupdatarequieredbygameItem

consumer.accept(gameItem);

//Renderthisgameitem

endRender();

AsyoucanseewestillhavetheoldmethodthatrenderstheaMeshtakingintoconsiderationthatwehaveonlyoneGameItem(thismaybeusedinothercases,thisiswhyithasnotbeenremoved).ThenewmethodrendersalistofGameItemsandreceivesasa

parameteraConsumer(afunction,thatusesthenewfunctionalprogrammingparadigmsintroducedinJava8),whichwillbeusedtosetupwhat’sspecificforeachGameItembeforedrawingthetriangles.Wewillusethistosetupthemodelviewmatrix,sincewedonotwanttheMeshclasstobecoupledwiththeuniformsnamesandtheparametersinvolvedwhensettingthesethingsup.

IntherenderScenemethodoftheRendererclassyoucanseethatwejustiterateovertheMeshmapandsetupthemodelviewmatrixuniformviaalambda.

for(Meshmesh:mapMeshes.keySet()){

sceneShaderProgram.setUniform("material",mesh.getMaterial());

mesh.renderList(mapMeshes.get(mesh),(GameItemgameItem)->{

Matrix4fmodelViewMatrix=transformation.buildModelViewMatrix(gameItem,viewM

atrix);

sceneShaderProgram.setUniform("modelViewMatrix",modelViewMatrix);

Anothersetofoptimizationsthatwecandoisthatwearecreatingtonsofobjectsintherendercycle.Inparticular,wewerecreatingtoomanyMatrix4finstancesthatholdsacopyathemodelviewmatrixforeachGameIteminstance.WewillcreatespecificmatricesforthatintheTransformationclass,andreusethesameinstance.Ifyoucheckthecodeyouwillseealsothatwehavechangedthenamesofthemethods,thegetXXmethodsjustreturnthestorematrixinstanceandanymethodthatchangesthevalueofamatrixiscalledbuildXXtoclarifyitspurpose.

WehavealsoavoidedtheconstructionofnewFloatBufferinstanceseachtimewesetauniformforaMatrixandremovedsomeotheruselessinstantiations.Withallthatinplaceyoucanseenowthattherenderingissmootherandmoreagile.

Youcancheckallthedetailsinthesourcecode.

HeightMapsInthischapterwewilllearnhowtocreatecomplexterrainsusingheightmaps.Beforewestart,youwillnoticethatsomerefactoringhasbeendone.Wehavecreatedsomenewpackagesandmovedsomeoftheclassestobetterorganizethem.Youcancheckthechangesinthesourcecode.

Sowhat’saheightmap?Aheightmapisanimagewhichisusedtogeneratea3Dterrainwhichusesthepixelcolourstogetsurfaceelevationdata.HeightmapsimagesuseusuallygrayscaleandcanbegeneratedbyprogramslikeTerragen.Aheightmapimagelookslikethis.

Theimageaboveit’slikeifyouwerelookingatafragmentoflandfromabove.Withthatimagewewillbuildameshcomposedbytrianglesformedbyvertices.Thealtitudeofeachvertexwillbecalculateddependingonthecolourofeachoftheimagepixels.Blackcolourwillrepresentthelowestvalueandwhitethehighestone.

Wewillbecreatingagridofvertices,oneforeachpixeloftheimage.Thoseverticeswillbeusedtoformtrianglesthatwillcomposethemeshasshowninthenextfigure.

HeightMaps

Thatmeshwillformagiantquadthatwillberenderedacrossxandzaxisusingthepixelcolourstochangetheelevationintheyaxis.

Theprocessofcreatinga3Dterrainfromaheightmapcanbesummarizedasfollows:

Loadtheimagethatcontainstheheightmap.(WewilluseaBufferedImageinstancetogetaccesstoeachpixel).Foreachimagepixelcreateavertexwithitsheightisbasedonthepixelcolour.Assignthecorrecttexturecoordinatetothevertex.Setuptheindicestodrawthetrianglesassociatedtothevertex.

HeightMaps

WewillcreateaclassnamedHeightMapMeshthatwillcreateaMeshbasedonaheightmapimageperformingthestepsdescribedabove.Let’sfirstreviewtheconstantsdefinedforthatclass:

privatestaticfinalintMAX_COLOUR=255*255*255;

Aswehaveexplainedabove,wewillcalculatetheheightofeachvertexbasedonthecolourofeachpixeloftheimageusedasheightmap.Imagesareusuallygreyscale,foraPNGimagethatmeansthateachRGBcomponentforeachpixelcanvaryfrom0to255,sowehave256discretevaluestodefinedifferentheights.Thismaybeenoughprecisionforyou,butifit’snotwecanusethethreeRGBcomponentstohavemoreintermediatevalues,in

thiscasetheheightcanbecalculatedformarangethatgetsfrom0to255 .Wewillchoosethesecondapproachsowearenotlimitedtogreyscaleimages.

Thenextconstantsare:

privatestaticfinalfloatSTARTX=-0.5f;

privatestaticfinalfloatSTARTZ=-0.5f;

Themeshwillbeformedbyasetofvertices(oneperpixel)whosexandzcoordinateswillbeintherangefollowingrange:

[-0.5,0.5],thatis,[STARTX,-STARTX]forthexaxis.[-0.5,0.5],thatis,[STARTZ,-STARTZ]forthezaxis.

Don'tworrytoomuchaboutthosevalues,laterontheresultingmeshcanbescaledtoaccommodateitssizeintheworld.Regardingyaxis,wewillsetuptwoparameters,minYandmaxY,forsettingthelowestandhighestvaluethattheycoordinatecanhave.Theseparametersarenotconstantbecausewemaywanttochangethematruntime,independentlyofthescalingapplied.Attheend,theterrainwillbecontainedinacubeintherange[STARTX,-STARTX],[minY,maxY]and[STARTZ,-STARTZ].

ThemeshwillbecreatedintheconstructoroftheHeightMapMeshclass,whichisdefinedlikethis.

publicHeightMapMesh(floatminY,floatmaxY,StringheightMapFile,StringtextureFile,

inttextInc)throwsException{

HeightMaps

Itreceivestheminimumandmaximumvalefortheyaxis,thenameofthefilethatcontainstheimagetobeusedasheightmapandthetexturefiletobeused.ItalsoreceivesanintegernamedtextIncthatwewilldiscusslateron.

ThefirstthingthatwedointheconstructoristoloadtheheightmapimageintoaBufferedImageinstance.

this.minY=minY;

this.maxY=maxY;

PNGDecoderdecoder=newPNGDecoder(getClass().getResourceAsStream(heightMapFile));

intheight=decoder.getHeight();

intwidth=decoder.getWidth();

decoder.decode(buf,decoder.getWidth()*4,PNGDecoder.Format.RGBA);

buf.flip();

Then,weloadthetexturefileintoaByteBufferandsetupthevariablesthatwewillneedtoconstructtheMesh.TheincxandinczvariableswillhavetheincrementtobeappliedtoeachvertexinthexandzcoordinatessotheMeshcoverstherangestatedabove.

Texturetexture=newTexture(textureFile);

floatincx=getWidth()/(width-1);

floatincz=Math.abs(STARTZ*2)/(height-1);

List<Float>positions=newArrayList();

List<Float>textCoords=newArrayList();

Afterthatwearereadytoiterateovertheimage,creatingavertexpereachpixel,settingupitstexturecoordinatesandsettinguptheindicestodefinecorrectlythetrianglesthatcomposetheMesh.

HeightMaps

for(introw=0;row<height;row++){

for(intcol=0;col<width;col++){

//Createvertexforcurrentposition

positions.add(STARTX+col*incx);//x

positions.add(getHeight(col,row,width,buf));//y

positions.add(STARTZ+row*incz);//z

//Settexturecoordinates

textCoords.add((float)textInc*(float)col/(float)width);

textCoords.add((float)textInc*(float)row/(float)height);

//Createindices

if(col<width-1&&row<height-1){

intleftTop=row*width+col;

intleftBottom=(row+1)*width+col;

intrightBottom=(row+1)*width+col+1;

intrightTop=row*width+col+1;

indices.add(rightTop);

indices.add(leftBottom);

indices.add(leftTop);

indices.add(rightBottom);

indices.add(leftBottom);

indices.add(rightTop);

Theprocessofcreatingthevertexcoordinatesisselfexplanatory.Let’signoreatthismomentwhywemultiplythetexturecoordinatesbyanumberandhowtheheightiscalculated.Youcanseethatforeachvertexwedefinetheindicesoftwotriangles(exceptifweareinthelastroworcolumn).Let’svisualizeitwitha3 × 3imagetovisualizehowtheyareconstructed.A3 × 3imagecontains9vertices,andthus4quadsformedby2 × 4triangles.Thefollowingpictureshowsthatgrid,namingeachvertexintheformVrc(r:row,c:column).

HeightMaps

Whenweareprocessingthefirstvertex(V00),wedefinetheindicesofthetwotrianglesshadedinred.

Whenweareprocessingthesecondvertex(V01),wedefinetheindicesofthetwotrianglesshadedinred.But,whenweareprocessingthethethirdvertex(V02)wedonotneedtodefinemoreindices,thetrianglesforthatrowhavealreadybeendefined.

HeightMaps

Youcaneasilyseehowtheprocesscontinuesfortherestofvertices.Now,oncewehavecreatedalltheverticespositions,thetexturecoordinatesandtheindiceswejustneedtocreateaMeshandtheassociatedMaterialwithallthatdata.

float[]posArr=Utils.listToArray(positions);

int[]indicesArr=indices.stream().mapToInt(i->i).toArray();

float[]textCoordsArr=Utils.listToArray(textCoords);

float[]normalsArr=calcNormals(posArr,width,height);

this.mesh=newMesh(posArr,textCoordsArr,normalsArr,indicesArr);

Materialmaterial=newMaterial(texture,0.0f);

Youcanseethatwecalculatethenormalstakingasaninputthevertexpositions.Beforeweseehownormalscanbecalculated,let’sseehowheightsareobtained.WehavecreatedamethodnamedgetHeightwhichcalculatestheheightforavertex.

privatefloatgetHeight(intx,intz,intwidth,ByteBufferbuffer){

byter=buffer.get(x*4+0+z*4*width);

byteg=buffer.get(x*4+1+z*4*width);

byteb=buffer.get(x*4+2+z*4*width);

bytea=buffer.get(x*4+3+z*4*width);

intargb=((0xFF&a)<<24)|((0xFF&r)<<16)

|((0xFF&g)<<8)|(0xFF&b);

returnthis.minY+Math.abs(this.maxY-this.minY)*((float)argb/(float)MAX_C

OLOUR);

Themethodreceivesthexanzcoordinatesforapixel,thewidthoftheimageandtheByteBufferthatconatinsitandreturnstheRGBcolour(thesumoftheindividualR,GandBcomponents)andassignsavaluecontainedbetweenminYandmaxY(minYforblackcolourandmaxYforwhitecolour).

YoumaydevelopasimplerversionusingaBufferedImagewhichcontainshandyethodsdorgettingRGBvalues,butwewouldbeusingAWT.RememberthatAWTdoesnotmixwellwithOSXsotrytoavoidusingtheirclasses.

Let’sviewnowhowtexturecoordinatesarecalculated.Thefirstoptionistowrapthetexturealongthewholemesh,thetopleftvertexwouldhave(0,0)texturecoordinatesandthebottomrightvertexwouldhave(1,1)texturecoordinates.Theproblemwiththisapproachisthatthetextureshouldbehugeinordertoprovidegoodresults,ifnot,itwouldbestretchedtoomuch.

Butwecanstilluseasmalltexturewithverygoodresultsbyemployingaveryefficienttechnique.Ifwesettexturecoordinatesthatarebeyondthe[1, 1]range,wegetbacktooriginandstartcountingagainfromthestart.Thefollowingpictureshowsthisbehaviortiling

HeightMaps

thesametextureinseveralquadsthatextendbeyondthe[1, 1]range.

Thisiswhatwewilldowhensettingthetexturecoordinates.Wewillbemultiplyingthetexturecoordinates(calculatedasifthetexturejustwaswrappedcoveringthewholemesh)byafactor,thetextIncparameter,toincreasethenumberofpixelsofthetexturetobeusedbetweenadjacentvertices.

Theonlythingthat’spendingnowisnormalcalculation.Rememberthatweneednormalssolightcanbeappliedtotheterraincorrectly.Withoutnormalsourterrainwillberenderedwiththesamecolournomatterhowlighthitseachpoint.Themethodthatwewilluseheremaynotbethemostefficientforheightmapsbutitwillhelpyouunderstandhownormalscanbeauto-calculated.Ifyousearchforothersolutionsyoumayfindmoreefficientapproachesthat

HeightMaps

onlyusetheheightsofadjacentpointswithoutperformingcrossproductoperations.Neverthelesssincethiswillonlybedoneatstartup,themethodpresentedherewillnothurtperformancesomuch.

Let’sgraphicallyexplainhowanormalcanbecalculated.Imaginethatwehaveavertex

named .Wefirstcalculate,foreachofthesurroundingvertices( , , and ),the

vectorsthataretangenttothesurfacethatconnectsthesepoints.Thesevectors,( , ,

and ),arecalculatedbysubtractingeachadjacentpointfrom ( = − ,etc.)

Then,wecalculatethenormalforeachoftheplanesthatconnectstheadjacentpoints.Thisisdonebyperformingthecrossproductbetweenthepreviouscalculatedvectors.For

instance,thenormalofthesurfacethatconnects and (shadedinblue)iscalculated

asthecrossproductbetween and , = × .

P0 P1 P02 P3 P4

V 1 V 2

V 3 V 4 P0 V 1 P1 P0

V 1 V 2 V 12 V 1 V 2

HeightMaps

Ifwecalculatetherestofthenormalsfortherestofthesurfaces( = × ,

= × and = × ),thenormalfor willbethesum(normalized)ofall

thenormalsofthesurroundingsurfaces: = + + + .

Theimplementationofthemethodthatcalculatesthenormalsisasfollows.

privatefloat[]calcNormals(float[]posArr,intwidth,intheight){

Vector3fv0=newVector3f();

V 23 V 2 V 3

V 34 V 3 V 4 V 41 V 4 V 1 P0

N0^ V 12^ V 23^ V 34^ V 41^

HeightMaps

List<Float>normals=newArrayList<>();

Vector3fnormal=newVector3f();

for(introw=0;row<height;row++){

for(intcol=0;col<width;col++){

if(row>0&&row<height-1&&col>0&&col<width-1){

inti0=row*width*3+col*3;

v0.x=posArr[i0];

v0.y=posArr[i0+1];

v0.z=posArr[i0+2];

inti1=row*width*3+(col-1)*3;

v1.x=posArr[i1];

v1.y=posArr[i1+1];

v1.z=posArr[i1+2];

v1=v1.sub(v0);

inti2=(row+1)*width*3+col*3;

v2.x=posArr[i2];

v2.y=posArr[i2+1];

v2.z=posArr[i2+2];

v2=v2.sub(v0);

inti3=(row)*width*3+(col+1)*3;

v3.x=posArr[i3];

v3.y=posArr[i3+1];

v3.z=posArr[i3+2];

v3=v3.sub(v0);

inti4=(row-1)*width*3+col*3;

v4.x=posArr[i4];

v4.y=posArr[i4+1];

v4.z=posArr[i4+2];

v4=v4.sub(v0);

v1.cross(v2,v12);

v12.normalize();

v2.cross(v3,v23);

v23.normalize();

v3.cross(v4,v34);

v34.normalize();

v4.cross(v1,v41);

v41.normalize();

normal=v12.add(v23).add(v34).add(v41);

normal.normalize();

}else{

normal.x=0;

normal.y=1;

HeightMaps

normal.z=0;

normal.normalize();

normals.add(normal.x);

normals.add(normal.y);

normals.add(normal.z);

returnUtils.listToArray(normals);

Finally,inordertobuildlargerterrains,wehavetwooptions:

Createalargerheightmap.Reuseaheightmapandtileitthroughthe3Dspace.Theheightmapwillbelikeaterrainblockthatcouldbetranslatedacrosstheworldliketiles.Inordertodoso,thepixelsoftheedgeoftheheightmapmustbethesame(theleftedgemustbeequaltotherightsideandthetopedgemustbeequaltothebottomone)toavoidgapsbetweenthetiles.

Wewillusethesecondapproach(andselectanappropriateheightmap).Tosupportthis,wewillcreateaclassnamedTerrainthatwillcreateasquareofheightmaptiles,definedlikethis.

HeightMaps

packageorg.lwjglb.engine.items;

importorg.lwjglb.engine.graph.HeightMapMesh;

publicclassTerrain{

privatefinalGameItem[]gameItems;

publicTerrain(intblocksPerRow,floatscale,floatminY,floatmaxY,Stringheigh

tMap,StringtextureFile,inttextInc)throwsException{

gameItems=newGameItem[blocksPerRow*blocksPerRow];

HeightMapMeshheightMapMesh=newHeightMapMesh(minY,maxY,heightMap,texture

File,textInc);

for(introw=0;row<blocksPerRow;row++){

for(intcol=0;col<blocksPerRow;col++){

floatxDisplacement=(col-((float)blocksPerRow-1)/(float)2)*

scale*HeightMapMesh.getXLength();

floatzDisplacement=(row-((float)blocksPerRow-1)/(float)2)*

scale*HeightMapMesh.getZLength();

GameItemterrainBlock=newGameItem(heightMapMesh.getMesh());

terrainBlock.setScale(scale);

terrainBlock.setPosition(xDisplacement,0,zDisplacement);

gameItems[row*blocksPerRow+col]=terrainBlock;

returngameItems;

Let'sexplaintheoverallprocess,wehaveblocksthathavethefollowingcoordinates(forxandzandwiththeconstantsdefinedabove).

HeightMaps

Let'ssupposethatwearecreate¡ingaterrainformedbya3x3blocksgrid.Let'sassumealsothatwewont'scaletheterrainblocks(thatis,thevariableblocksPerRowwillbe3andthevariablescalewillbe1).Wewantthegridtobecenteredat(0,0)coordinates.

Weneedtotranslatetheblockssotheverticeswillhavethefollowingcoordinates.

ThetranslationisachievedbycallingsetPositionmethod,butrememberthatwhatwesetisadisplacementnotaposition.Ifyoureviewthefigureaboveyouwillseethatthecentralblockdoesnotrequireanydisplacement,it'salreadypositionedintheadequatecoordinates.

HeightMaps

Thevertexdrawningreenneedsadisplacement,forthexcoordinate,of−1andthevertexdrawninblueneedsadisplacementof+1.Theformulatocalculatethexdisplacement,takingintoconsiderationthescaleandtheblockwidth,isthisone:

xDisplacement = (col − (blocksPerRow − 1)/2) × scale× width

Andtheequivalentformulaforzdisplacementis:

zDisplacement = (row − (blocksPerRow − 1)/2) × scale× height

IfwecreateaTerraininstanceintheDummyGameclass,wecangetsomethinglikethis.

Youcanmovethecameraaroundtheterrainandseehowit’srendered.Sincewestilldonothaveimplementedcollisiondetectionyoucanpassthroughitandlookitfromabove.Becausewehavefacecullingenabled,somepartsoftheterrainarenotrenderedwhenlookingfrombelow.

HeightMaps

TerrainCollisionsOncewehavecreatedaterrainthenextstepistodetectcollisionstoavoidtraversingthroughit.Ifyourecallfrompreviouschapter,aterrainiscomposedbyblocks,andeachofthoseblocksisconstructedfromaheightmap.Theheightmapisusedtosettheheightoftheverticesthatcomposethetrianglesthatformtheterrain.

Inordertodetectacollisionwemustcomparecurrentpositionyvaluewiththeyvalueofthepointoftheterrainwearecurrentlyin.Ifweareaboveterrain’syvaluethere’snocollision,ifnot,weneedtogetback.Simpleconcept,doesit?Indeeditisbutweneedtoperformseveralcalculationsbeforeweareabletodothatcomparison.

Thefirstthingweneedtodefineiswhatweunderstandfortheterm"currentposition".Sincewedonothaveyetaplayerconcepttheansweriseasy,thecurrentpositionwillbethecameraposition.Sowealreadyhaveoneofthecomponentsofthecomparison,thus,thenextthingtocalculateisterrainheightatcurrentposition.

Asit'sbeensaidbefore,theterrainiscomposedbyagridofterrainblocksasshowninthenextfigure.

Eachterrainblockisconstructedfromthesameheightmapmesh,butisscaledanddisplacedpreciselytoformaterraingridthatlookslikeacontinuouslandscape.

So,whatweneedtodofirstisdetermineinwhichterrainblockthecurrentposition,thecamera,isin.Inordertodothat,wewillcalculatetheboundingboxofeachterrainblocktakingintoconsiderationthedisplacementandthescaling.Sincetheterrainwillnotbedisplacedorscaledatruntime,wecanperformthosecalculationsintheTerrainclassconstructor.Bydoingthiswayweaccessthemlateratanytimewithoutrepeatingthoseoperationsineachgameloopcycle.

Wewillcreateanewmethodthatcalculatestheboundingboxofaterrainblock,namedgetBoundingBox.

TerrainCollisions

privateBox2DgetBoundingBox(GameItemterrainBlock){

floatscale=terrainBlock.getScale();

Vector3fposition=terrainBlock.getPosition();

floattopLeftX=HeightMapMesh.STARTX*scale+position.x;

floattopLeftZ=HeightMapMesh.STARTZ*scale+position.z;

floatwidth=Math.abs(HeightMapMesh.STARTX*2)*scale;

floatheight=Math.abs(HeightMapMesh.STARTZ*2)*scale;

Box2DboundingBox=newBox2D(topLeftX,topLeftZ,width,height);

returnboundingBox;

TheBox2Dclassisasimplifiedversionofthejava.awt.Rectangle2D.Floatclass;createdtoavoidusingAWT.

Nowweneedtocalculatetheworldcoordinatesoftheterrainblocks.Inthepreviouschapteryousawthatallofourterrainmesheswerecreatedinsideaquadwithitsoriginsetto[STARTX,STARTZ].Thus,weneedtotransformthosecoordinatestotheworldcoordinatestakingintoconsiderationthescaleandthedisplacementasshowninthenextfigure.

Asit’sbeensaidabove,thiscanbedoneintheTerrainclassconstructorsinceitwon'tchangeatruntime.Soweneedtoaddanewattributewhichwillholdtheboundingboxes:

privatefinalBox2D[][]boundingBoxes;

IntheTerrainconstructor,whilewearecreatingtheterrainblocks,wejustneedtoinvokethemethodthatcalculatestheboundingbox.

TerrainCollisions

publicTerrain(intterrainSize,floatscale,floatminY,floatmaxY,StringheightMapF

ile,StringtextureFile,inttextInc)throwsException{

this.terrainSize=terrainSize;

gameItems=newGameItem[terrainSize*terrainSize];

PNGDecoderdecoder=newPNGDecoder(getClass().getResourceAsStream(heightMapFile))

intheight=decoder.getHeight();

intwidth=decoder.getWidth();

decoder.decode(buf,decoder.getWidth()*4,PNGDecoder.Format.RGBA);

buf.flip();

//Thenumberofverticespercolumnandrow

verticesPerCol=heightMapImage.getWidth();

verticesPerRow=heightMapImage.getHeight();

heightMapMesh=newHeightMapMesh(minY,maxY,buf,width,textureFile,textInc);

boundingBoxes=newBox2D[terrainSize][terrainSize];

for(introw=0;row<terrainSize;row++){

for(intcol=0;col<terrainSize;col++){

floatxDisplacement=(col-((float)terrainSize-1)/(float)2)*scal

e*HeightMapMesh.getXLength();

floatzDisplacement=(row-((float)terrainSize-1)/(float)2)*scal

e*HeightMapMesh.getZLength();

GameItemterrainBlock=newGameItem(heightMapMesh.getMesh());

terrainBlock.setScale(scale);

terrainBlock.setPosition(xDisplacement,0,zDisplacement);

gameItems[row*terrainSize+col]=terrainBlock;

boundingBoxes[row][col]=getBoundingBox(terrainBlock);

So,withalltheboundingboxespre-calculated,wearereadytocreateanewmethodthatwillreturntheheightoftheterraintakingasaparameterthecurrentposition.ThismethodwillbenamedgetHeightVectoranditsdefinedlikethis.

TerrainCollisions

publicfloatgetHeight(Vector3fposition){

floatresult=Float.MIN_VALUE;

//Foreachterrainblockwegettheboundingbox,translateittoviewcoodinates

//andcheckifthepositioniscontainedinthatboundingbox

Box2DboundingBox=null;

booleanfound=false;

GameItemterrainBlock=null;

for(introw=0;row<terrainSize&&!found;row++){

for(intcol=0;col<terrainSize&&!found;col++){

terrainBlock=gameItems[row*terrainSize+col];

boundingBox=boundingBoxes[row][col];

found=boundingBox.contains(position.x,position.z);

//Ifwehavefoundaterrainblockthatcontainsthepositionweneed

//tocalculatetheheightoftheterrainonthatposition

if(found){

Vector3f[]triangle=getTriangle(position,boundingBox,terrainBlock);

result=interpolateHeight(triangle[0],triangle[1],triangle[2],position.x,

position.z);

returnresult;

Thefirstthingthattowedointhatmethodistodeterminetheterrainblockthatwearein.Sincewealreadyhavetheboundingboxforeachterrainblock,thealgorithmissimple.Wejustsimplyneedtoiterateoverthearrayofboundingboxesandcheckifthecurrentpositionisinside(theclassBox2Dprovidesamethodforthis).

Oncewehavefoundtheterrainblock,weneedtocalculatethetrianglewhichwearein.ThisisdoneinthegetTrianglemethodthatwillbedescribedlateron.Afterthat,wehavethecoordinatesofthetrianglethatwearein,includingitsheight.But,weneedtheheightofapointthatisnotlocatedatanyofthoseverticesbutinaplaceinbetween.ThisisdoneintheinterpolateHeightmethod.Wewillalsoexplainhowthisisdonelateron.

Let’sfirststartwiththeprocessofdeterminingthetrianglethatwearein.ThequadthatformsaterrainblockcanbeseenasagridinwhicheachcellisformedbytwotrianglesLet’sdefinesomevariablesfirst:

boundingBox.xisthexcoordinateoftheoriginoftheboundingboxassociatedtothequad.boundingBox.yisthezcoordinatesoftheoriginoftheboundingboxassociatedtothequad(Althoughyouseea“y”,itmodelsthezaxis).boundingBox.widthisthewidthofthequadboundingBox.heightistheheightofthequad.

TerrainCollisions

cellWidthisthewidthofacell.cellHeightistheheightofacell.

Allofthevariablesdefinedaboveareexpressedinworldcoordinates.Tocalculatethewidthofacellwejustneedtodividetheboundingboxwidthbythenumberofverticespercolumn:

cellWidth =

AndthevariablecellHeightiscalculatedanalogous

cellHeight =

Oncewehavethosevariableswecancalculatetherowandthecolumnofthecellwearecurrentlyinwidthisquitestraightforward:

Thefollowingpictureshowsallthevariablesdescribedaboveforasampleterrainblock.

verticesPerColboundingBox.width

verticesPerRowboundingBox.height

boundingBox.widthposition.x−boundingBox.x

boundingBox.heightposition.z−boundingBox.y

TerrainCollisions

Withallthatinformationweareabletocalculatethepositionsoftheverticesofthetrianglescontainedinthecell.Howwecandothis?Let’sexaminethetrianglesthatformasinglecell.

Youcanseethatthecellisdividedbyadiagonalthatseparatesthetwotriangles.Thewaytodeterminethetriangleassociatedtothecurrentposition,isbycheckingifthezcoordinateisaboveorbelowthatdiagonal.Inourcase,ifcurrentpositionzvalueislessthanthez

TerrainCollisions

valueofthediagonalsettingthexvaluetothexvalueofcurrentpositionweareinT1.Ifit'sgreaterthanthatweareinT2.

Wecandeterminethatbycalculatingthelineequationthatmatchesthediagonal.

Ifyourememberyourschoolmathclasses,theequationofalinethatpassesfromtwopoints(in2D)is:

y − y1 = m ⋅ (x− x1)

Wheremisthelineslope,thatis,howmuchtheheightchangeswhenmovingthroughthexaxis.Notethat,inourcase,theycoordinatesarethezones.Alsonote,thatweareusing2Dcoordinatesbecausewearenotcalculatingheightshere.Wejustwanttoselectthepropertriangleandtodothatxanzcoordinatesareenough.So,inourcasethelineequationshouldberewrittenlikethis.

z − z1 = m ⋅ (z − z1)

Theslopecanbecalculateinthefollowingway:

Sotheequationofthediagonaltogetthezvaluegivenaxpositionislikethis:

z = m ⋅ (xpos− x1) + z1 = ⋅ (zpos− x1) + z1

Wherex1,x2,z1andz2arethexandzcoordinatesoftheverticesV 1andV 2respectively.

Sothemethodtogetthetrianglethatthecurrentpositionisin,namedgetTriangle,applyingallthecalculationsdescribedabovecanbeimplementedlikethis:

x1−x2z1−z2

TerrainCollisions

protectedVector3f[]getTriangle(Vector3fposition,Box2DboundingBox,GameItemterrai

nBlock){

//Getthecolumnandrowoftheheightmapassociatedtothecurrentposition

floatcellWidth=boundingBox.width/(float)verticesPerCol;

floatcellHeight=boundingBox.height/(float)verticesPerRow;

intcol=(int)((position.x-boundingBox.x)/cellWidth);

introw=(int)((position.z-boundingBox.y)/cellHeight);

Vector3f[]triangle=newVector3f[3];

triangle[1]=newVector3f(

boundingBox.x+col*cellWidth,

getWorldHeight(row+1,col,terrainBlock),

boundingBox.y+(row+1)*cellHeight);

boundingBox.x+(col+1)*cellWidth,

getWorldHeight(row,col+1,terrainBlock),

boundingBox.y+row*cellHeight);

if(position.z<getDiagonalZCoord(triangle[1].x,triangle[1].z,triangle[2].x,tr

iangle[2].z,position.x)){

boundingBox.x+col*cellWidth,

getWorldHeight(row,col,terrainBlock),

boundingBox.y+row*cellHeight);

}else{

boundingBox.x+(col+1)*cellWidth,

getWorldHeight(row+2,col+1,terrainBlock),

boundingBox.y+(row+1)*cellHeight);

returntriangle;

protectedfloatgetDiagonalZCoord(floatx1,floatz1,floatx2,floatz2,floatx){

floatz=((z1-z2)/(x1-x2))*(x-x1)+z1;

returnz;

protectedfloatgetWorldHeight(introw,intcol,GameItemgameItem){

floaty=heightMapMesh.getHeight(row,col);

returny*gameItem.getScale()+gameItem.getPosition().y;

Youcanseethatwehavetwoadditionalmethods.Thefirstone,namedgetDiagonalZCoord,calculatesthezcoordinateofthediagonalgivenaxpositionandtwovertices.Theotherone,namedgetWorldHeight,isusedtoretrievetheheightofthetrianglevertices,theycoordinate.Whentheterrainmeshisconstructedtheheightofeachvertexispre-calculatedandstored,weonlyneedtotranslateittoworldcoordinates.

TerrainCollisions

Ok,sowehavethetrianglecoordinatesthatthecurrentpositionisin.Finally,wearereadytocalculateterrainheightatcurrentposition.Howcanwedothis?Well,ourtriangleiscontainedinaplane,andaplanecanbedefinedbythreepoints,inthiscase,thethreeverticesthatdefineatriangle.

Theplaneequationisasfollows:a ⋅ x+ b ⋅ y + c ⋅ z + d = 0

Thevaluesoftheconstantsofthepreviousequationare:

a = (B −A ) ⋅ (C −A ) − (C −A ) ⋅ (B −A )

b = (B −A ) ⋅ (C −A ) − (C −A ) ⋅ (B −A )

c = (B −A ) ⋅ (C −A ) − (C −A ) ⋅ (B −A )

WhereA,BandCarethethreeverticesneededtodefinetheplane.

Then,withpreviousequationsandthevaluesofthexandzcoordinatesforthecurrentpositionweareabletocalculatetheyvalue,thatistheheightoftheterrainatthecurrentposition:

y = (−d− a ⋅ x− c ⋅ z)/b

Themethodthatperformsthepreviouscalculationsisthefollowing:

protectedfloatinterpolateHeight(Vector3fpA,Vector3fpB,Vector3fpC,floatx,float

//Planeequationax+by+cz+d=0

floata=(pB.y-pA.y)*(pC.z-pA.z)-(pC.y-pA.y)*(pB.z-pA.z);

floatb=(pB.z-pA.z)*(pC.x-pA.x)-(pC.z-pA.z)*(pB.x-pA.x);

floatc=(pB.x-pA.x)*(pC.y-pA.y)-(pC.x-pA.x)*(pB.y-pA.y);

floatd=-(a*pA.x+b*pA.y+c*pA.z);

//y=(-d-ax-cz)/b

floaty=(-d-a*x-c*z)/b;

returny;

Andthat’sall!wearenowabletodetectthecollisions,sointheDummyGameclasswecanchangethefollowinglineswhenweupdatethecameraposition:

y y z z y y z z

z z x x z z z z

x x y y x x y y

TerrainCollisions

//Updatecameraposition

Vector3fprevPos=newVector3f(camera.getPosition());

camera.movePosition(cameraInc.x*CAMERA_POS_STEP,cameraInc.y*CAMERA_POS_STEP,came

raInc.z*CAMERA_POS_STEP);

//Checkiftherehasbeenacollision.Iftrue,settheypositionto

//themaximumheight

floatheight=terrain.getHeight(camera.getPosition());

if(camera.getPosition().y<=height){

camera.setPosition(prevPos.x,prevPos.y,prevPos.z);

Asyoucanseetheconceptofdetectingterraincollisionsiseasytounderstandbutweneedtocarefullyperformasetofcalculationsandbeawareofthedifferentcoordinatesystemswearedealingwith.

Besidesthat,althoughthealgorithmpresentedhereisvalidinmostofthecases,therearestillsituationsthatneedtobehandledcarefully.Oneeffectthatyoumayobserveistheonecalledtunnelling.Imaginethefollowingsituation,wearetravellingatafastspeedthroughourterrainandbecauseofthat,thepositionincrementgetsahighvalue.Thisvaluecangetsohighthat,sincewearedetectingcollisionswiththefinalposition,wemayhaveskippedobstaclesthatlayinbetween.

Therearemanypossiblesolutionstoavoidthateffect,thesimplestoneistosplitthecalculationtobeperformedinsmallerincrements.

TerrainCollisions

FogBeforewedealwithmorecomplextopicswewillreviewhowtocreateafogeffectinourgameengine.Withthateffectwewillsimulatehowdistantobjectsgetdimmedandseemtovanishintoadensefog.

Letusfirstexaminewhataretheattributesthatdefinefog.Thefirstoneisthefogcolour.Intherealworldthefoghasagraycolour,butwecanusethiseffecttosimulatewideareasinvadedbyafogwithdifferentcolours.Theattributeisthefog'sdensity.

Thus,inordertoapplythefogeffectweneedtofindawaytofadeour3Dsceneobjectsintothefogcolouraslongastheygetfarawayfromthecamera.Objectsthatareclosetothecamerawillnotbeaffectedbythefog,butobjectsthatarefarawaywillnotbedistinguishable.Soweneedtobeabletocalculateafactorthatcanbeusedtoblendthefogcolourandeachfragmentcolourinordertosimulatethateffect.Thatfactorwillneedtobedependentonthedistancetothecamera.

Let’snamethatfactorasfogFactor,andsetitsrangefrom0to1.WhenfogFactortakesthe1value,itmeansthattheobjectwillnotbeaffectedbyfog,thatis,it’sanearbyobject.WhenfogFactortakesthe0value,itmeansthattheobjectswillbecompletelyhiddeninthefog.

Then,theequationneededtocalculatethefogcolourwillbe:

finalColour = (1 − fogFactor) ⋅ fogColour + fogFactor ⋅ framentColour

finalColouristhecolourthatresultsfromapplyingthefogeffect.fogFactoristheparametersthatcontrolshowthefogcolourandthefragmentcolourareblended.Itbasicallycontrolstheobjectvisibility.fogColouristhecolourofthefog.fragmentColour,isthecolourofthefragmentwithoutapplyinganyfogeffectonit.

NowweneedtofindawaytocalculatefogFactordependingonthedistance.Wecanchosedifferentmodels,andthefirstonecouldbetousealinearmodel.Thatisamodelthat,givenadistance,changesthefogFactorvalueinalinearway.

Thelinearmodelcanbedefinedbythefollowingparameters:

fogStart:Thedistanceatwherefogeffectsstartstobeapplied.fogF inish:Thedistanceatwherefogeffectsreachesitsmaximumvalue.distance:Distancetothecamera.

Withthoseparameters,theequationtobeappliedwouldbe:

fogFactor =

ForobjectsatdistancelowerthanfogStartwejustsimplysetthefogFactorto1.ThefollowinggraphshowshowthefogFactorchangeswiththedistance.

Thelinearmodeliseasytocalculatebutitisnotveryrealisticanditdoesnottakeintoconsiderationthefogdensity.Inrealityfogtendstogrowinasmootherway.Sothenextsuitablemodelisaexponentialone.Theequationforthatmodelisasfollows:

focFactor = e =

Thenewvariablesthatcomeintoplayare:

fogDensitywhichmodelsthethicknessordensityofthefog.exponentwhichisusedtocontrolhowfastthefogincreaseswithdistance

Thefollowingpictureshowstwographsfortheequationabovefordifferentvaluesoftheexponent(2forthebluelineand4fortheredone)

(fogF inish− fogStart)(fogF inish− distance)

−(distance⋅fogDensity)exponent

e(distance⋅fogDensity)exponent1

Inourcodewewilluseaformulawhichsetsavalueoftwofortheexponent(youcaneasilymodifytheexampletousedifferentvalues).

Nowthatthetheoryhasbeenexplainedwecanputitintopractice.Wewillimplementtheeffectinthescenefragmentshadersincewehavethereallthevariablesweneed.Wewillstartbydefiningastructthatmodelsthefogattributes.

structFog

intactive;

vec3colour;

floatdensity;

Theactiveattributewillbeusedtoactivateordeactivatethefogeffect.Thefogwillbepassedtotheshaderthroughanotheruniformnamedfog.

uniformFogfog;

WewillcreatealsoanewclassnamedFogwhichisanotherPOJO(PlainOldJavaObject)whichcontainsthefogattributes.

packageorg.lwjglb.engine.graph.weather;

publicclassFog{

privatebooleanactive;

privateVector3fcolour;

privatefloatdensity;

publicstaticFogNOFOG=newFog();

publicFog(){

active=false;

this.colour=newVector3f(0,0,0);

this.density=0;

publicFog(booleanactive,Vector3fcolour,floatdensity){

this.colour=colour;

this.density=density;

this.active=active;

//Gettersandsettershere….

WewilladdaFoginstanceintheSceneclass.Asadefault,theSceneclasswillinitializetheFoginstancetotheconstantNOFOGwhichmodelsadeactivatedinstance.

SinceweaddedanewuniformtypeweneedtomodifytheShaderProgramclasstocreateandinitializethefoguniform.

publicvoidcreateFogUniform(StringuniformName)throwsException{

createUniform(uniformName+".active");

createUniform(uniformName+".density");

publicvoidsetUniform(StringuniformName,Fogfog){

setUniform(uniformName+".activeFog",fog.isActive()?1:0);

setUniform(uniformName+".colour",fog.getColour());

setUniform(uniformName+".density",fog.getDensity());

IntheRendererclasswejustneedtocreatetheuniforminthesetupSceneShadermethod:

sceneShaderProgram.createFogUniform("fog");

AnduseitintherenderScenemethod:

sceneShaderProgram.setUniform("fog",scene.getFog());

Wearenowabletodefinefogcharacteristicsinourgame,butweneedtogetbacktothefragmentshaderinordertoapplythefogeffect.WewillcreateafunctionnamedcalcFogwhichisdefinedlikethis.

vec4calcFog(vec3pos,vec4colour,Fogfog)

floatdistance=length(pos);

floatfogFactor=1.0/exp((distance*fog.density)*(distance*fog.density));

fogFactor=clamp(fogFactor,0.0,1.0);

vec3resultColour=mix(fog.colour,colour.xyz,fogFactor);

returnvec4(resultColour.xyz,colour.w);

Asyoucanseewefirstcalculatethedistancetothevertex.Thevertexcoordinatesaredefinedintheposvariableandwejustneedtocalculatethelength.Thenwecalculatethefogfactorusingtheexponentialmodelwithanexponentoftwo(whichisequivalenttomultiplyittwice).WeclampthefogFactortoarangebetween0and1andusethemixfunction.InGLSL,themixfunctionisusedtoblendthefogcolourandthefragmentcolour(definedbyvariablecolour).It'sequivalenttoapplythisequation:

resultColour = (1 − fogFactor) ⋅ fog.colour + fogFactor ⋅ colour

Wealsopreservethewcomponente,thetransparency,oftheoriginalcolour.Wedon'twantthiscomponenttobeaffected,thefragmentshouldmantainitstransparencylevel.

Attheendofthefragmentshaderafterapplyingallthelighteffectswejustsimplyassignthereturnedvaluetothefragmentcolourifthefogisactive.

if(fog.activeFog==1)

fragColor=calcFog(mvVertexPos,fragColor,fog);

Withallthatcodecompleted,wecansetupaFogwiththefollowingdata:

scene.setFog(newFog(true,newVector3f(0.5f,0.5f,0.5f),0.15f));

Andwewillgetaneffectlikethis:

Youwillseethatdistantobjectsgetfadedinthedistanceandthatfogstartstodisappearwhenyouapproachtothem.There’saproblem,thoughwiththeskybox,itlooksalittlebitweirdthatthehorizonisnotaffectedbythefog.Thereareseveralwaystosolvethis:

Useadifferentskyboxinwhichyouonlyseeasky.Removetheskybox,sinceyouhaveadensefog,youshouldnotbeabletoseeabackground.

Maybenoneofthetwosolutionsfitsyou,andyoucantrytomatchthefogcolourtotheskyboxbackgroundbutyouwillendupdoingcomplexcalculationsandtheresultwillnotbemuchbetter.

Ifyoulettheexamplerunyouwillseehowdirectionallightgetsdimmedandthescenedarkens,butthere’saproblemwiththefog,itisnotaffectedbylightandyouwillgetsomethinglikethis.

Distantobjectsaresettothefogcolourwhichisaconstantandnotaffectedbylight.Thisfactproduceslikeaglowinginthedarkeffect(whichmaybeokforyouornot).Weneedtochangethefuncionthatcalculatesthefogtotakeintoconsiderationthelight.Thefunctionwillreceivetheambientlightandthedirectionallighttomodulatethefogcolour.

vec4calcFog(vec3pos,vec4colour,Fogfog,vec3ambientLight,DirectionalLightdirLi

vec3fogColor=fog.colour*(ambientLight+dirLight.colour*dirLight.intensity)

floatdistance=length(pos);

floatfogFactor=1.0/exp((distance*fog.density)*(distance*fog.density));

fogFactor=clamp(fogFactor,0.0,1.0);

vec3resultColour=mix(fogColor,colour.xyz,fogFactor);

returnvec4(resultColour.xyz,1);

Asyoucanseewiththedirectionallightwejustusethecolourandtheintensity,wearenotinterestedinthedirection.Withthatmodificationwejustneedtoslightlymodifythecalltothefunctionlikethis:

if(fog.active==1)

fragColor=calcFog(mvVertexPos,fragColor,fog,ambientLight,directionalLight);

Andwewillgetsomethinglikethiswhenthenightfalls.

Oneimportantthingtohighlightisthatwemustwiselychoosethefogcolour.Thisisevenmoreimportantwhenwehavenoskyboxbutafixedcolourbackground.Weshouldsetupthefogcolourtobeequaltotheclearcolour.Ifyouuncommentthecodethatrendertheskyboxandreruntheexampleyouwillgetsomethinglikethis.

Butifwemodifytheclearcolourtobeequalto(0.5,0.5,0.5)theresultwillbelikethis.

NormalMappingInthischapterwewillexplainatechniquethatwilldramaticallyimprovehowour3Dmodelslooklike.Bynow,wearenowabletoapplytexturestocomplex3Dmodels,butwearestillfarawayfromwhatrealobjectslooklike.Surfacesintherealworldarenotperfectlyplain,theyhaveimperfectionsthatour3Dmodelscurrentlydonothave.

Inordertorendermorerealisticsceneswearegoingtousenormalmaps.Ifyoulookataflatsurfaceintherealwordyouwillseethatthoseimperfectionscanbeseenevenatdistancebythewaythatthelightreflectsonit.Ina3Dsceneaflatsurfacewillhavenoimperfections,wecanapplyatexturetoitbutwewon’tchangethewaythatlightreflectsonit.That’sthethingthatmakesthedifference.

Wemaythinkinincreasingthedetailofourmodelsbyincreasingthenumberoftrianglesandreflectthoseimperfectionsbutperformancewilldegrade.Whatweneedisawaytochangethewaylightreflectsonsurfacestoincreasetherealism.Thisisachievedwiththenormalmappingtechnique.

Let’sgobacktotheplainsurfaceexample,aplanecanebedefinedbytwotriangleswhichformaquad.Ifyourememberformthelightningchapters,theelementthatmodelshowlightreflectsaresurfacenormals.Inthiscase,wehaveasinglenormalforthewholesurface,eachfragmentofthesurfaceusesthesamenormalwhencalculatinghowlightaffectsthem.Thisisshowninthenextfigure.

Ifwecouldchangethenormalsforeachfragmentofthesurfacewecouldmodelsurfaceimperfectionstorendertheminamorerealisticway.Thisisshowninthenextfigure.

NormalMapping

Thewaywearegoingtoachievethisisbyloadinganothertexturewhichstoresthenormalsforthesurface.Eachpixelofthenormaltexturewillcontainthevaluesofthex,yandzcoordinatesofthenormalstoredasanRGBvalue.

Let’susethefollowingtexturetodrawaquad.

Anexampleofanormalmaptexturefortheimageabovecouldbethefollowing.

Asyoucanseeisiflikewehadappliedacolourtransformationtotheoriginaltexture.Eachpixelstoresnormalinformationusingcolourcomponents.Onethingthatyouwillusuallyseewhenviewingnormalmapsisthatthedominantcolourstendtoblue.Thisisduetothefact

NormalMapping

thatnormalspointtothepositivezaxis.Thezcomponentwillusuallyhaveamuchhighervaluethanthexandyonesforplainsurfacesasthenormalpointsoutofthesurface.Sincex,y,zcoordinatesaremappedtoRGB,thebluecomponentwillhavealsoahighervalue.

So,torenderanobjectusingnormalmapswejustneedanextratextureanduseitwhilerenderingfragmentstogettheappropriatenormalvalue.

Let’sstartchangingourcodeinordertosupportnormalmaps.WewilladdanewtextureinstancetotheMaterialclasssowecanattachanormalmaptexturetoourgameitems.Thisinstancewillhaveitsowngettersandsettersandmethodtocheckifthematerialhasanormalmapornot.

publicclassMaterial{

privatestaticfinalVector4fDEFAULT_COLOUR=newVector3f(1.0f,1.0f,1.0f,10.f

privateVector3fambientColour;

privateVector3fdiffuseColour;

privateVector3fspecularColour;

privatefloatreflectance;

privateTexturetexture;

privateTexturenormalMap;

//…Previouscodehere

publicbooleanhasNormalMap(){

returnthis.normalMap!=null;

publicTexturegetNormalMap(){

returnnormalMap;

publicvoidsetNormalMap(TexturenormalMap){

this.normalMap=normalMap;

Wewillusethenormalmaptextureinthescenefragmentshader.But,sinceweareworkinginviewcoordinatesspaceweneedtopassthemodelviewmatrixinordertodothepropertransformation.Thus,weneedtomodifythescenevertexshader.

NormalMapping

#version330

outvec2outTexCoord;

outvec3mvVertexPos;

outmat4outModelViewMatrix;

voidmain()

outModelViewMatrix=modelViewMatrix;

Inthescenefragmentshaderweneedtoaddanotherinputparameter.

inmat4outModelViewMatrix;

Inthefragmentshader,wewillneedtopassanewuniformforthenormalmaptexturesampler:

Also,inthefragmentshader,wewillcreateanewfunctionthatcalculatesthenormalforthecurrentfragment.

vec3calcNormal(Materialmaterial,vec3normal,vec2text_coord,mat4modelViewMatrix)

vec3newNormal=normal;

if(material.hasNormalMap==1)

newNormal=texture(normalMap,text_coord).rgb;

newNormal=normalize(newNormal*2-1);

newNormal=normalize(modelViewMatrix*vec4(newNormal,0.0)).xyz;

returnnewNormal;

NormalMapping

Thefunctiontakesthefollowingparameters:

Thematerialinstance.Thevertexnormal.Thetexturecoordinates.Themodelviewmatrix.

Thefirstthingwedointhatfunctionistocheckifthismaterialhasanormalmapassociatedornot.Ifnot,wejustsimplyusethevertexnormalasusual.Ifithasanormalmap,weusethenormaldatastoredinthenormaltexturemapassociatedtothecurrenttexturecoordinates.

Rememberthatthecolourwegetarethenormalcoordinates,butsincetheyarestoredasRGBvaluestheyarecontainedintherange[0,1].Weneedtotransformthemtobeintherange[-1,1],sowejustmultiplybytwoandsubtract1.Then,wenormalizethatvalueandtransformittoviewmodelcoordinatespace(aswiththevertexnormal).

Andthat’sall,wecanusethereturnedvalueasthenormalforthatfragmentinallthelightningcalculations.

IntheRendererclassweneedtocreatethenormalmapuniform,andintherenderScenemethodweneedtosetituplikethis:

sceneShaderProgram.setUniform("fog",scene.getFog());

sceneShaderProgram.setUniform("texture_sampler",0);

sceneShaderProgram.setUniform("normalMap",1);

Youmaynoticesomeinterestingthinginthecodeabove.Wearesetting0forthematerialtextureuniform(texture_sampler)and1forthenormalmaptexture(normalMap).Ifyourecallfromthetexturechapter.Weareusingmorethanonetexture,sowemustsetupthetextureunitforeachseparatetexture.

WeneedtotakethisalsointoconsiderationwhenwearerenderingaMesh.

NormalMapping

privatevoidinitRender(){

Texturetexture=material.getTexture();

if(texture!=null){

//Activatefirsttexturebank

//Bindthetexture

TexturenormalMap=material.getNormalMap();

if(normalMap!=null){

//Activatefirsttexturebank

//Bindthetexture

glBindTexture(GL_TEXTURE_2D,normalMap.getId());

//Drawthemesh

Asyoucanseeweneedtobindtoeachofthetexturesavailableandactivatetheassociatedtextureunitinordertobeabletoworkwithmorethanonetexture.IntherenderScenemethodintheRendererclasswedonotneedtoexplicitlysetuptheuniformofthetexturesinceit’salreadycontainedintheMaterial.

Inordertoshowtheimprovementsthatnormalmapsprovide,wehavecreatedanexamplethatshowstwoquadssidebyside.Therightquadhasatexturemapappliedandtheleftonenot.Wealsohaveremovedtheterrain,theskyboxandtheHUDandsetupadirectionallightwithcanbechangedwiththeleftandrightcursorkeyssoyoucanseetheeffect.Wehavemodifiedthebasesourcecodeabitinordertosupportnothavingaskyboxoraterrain.Wehavealsoclampedthelighteffectinthefragmentshaderintherang[0,1]toavoidoverexposingeffectoftheimage.

Theresultisshowninthenextfigure.

NormalMapping

Asyoucanseethequadthathasanormaltextureappliedgivestheimpressionofhavingmorevolume.Althoughitis,inessence,aplainsurfaceliketheotherquad,youcanseehowthelightreflects.But,althoughthecodewehavesetup,worksperfectlywiththisexampleyouneedtobeawareofitslimitations.Thecodeonlyworksfornormalmaptexturesthatarecreatedusingobjectspacecoordinates.Ifthisisthecasewecanapplythemodelviewmatrixtransformationstotranslatethenormalcoordinatestotheviewspace.

But,usuallynormalmapsarenotdefinedinthatway.Theyusuallyaredefinedinthecalledtangentspace.Thetangentspaceisacoordinatesystemthatislocaltoeachtriangleofthemodel.Inthatcoordinatespacethezaxisalwayspointsoutofthesurface.Thisisthereasonwhywhenyoulookatanormalmapitsusuallybluish,evenforcomplexmodelswithopposingfaces.

Wewillstickwiththissimpleimplementationbynow,butkeepinmindthatyoumustalwaysusenormalmapsdefinedinobjectspace.Ifyouusemapsdefinedintangentspaceyouwillgetweirdresults.Inordertobeabletoworkwiththemweneedtosetupspecificmatricestotransformcoordinatestothetangentspace.

NormalMapping

Shadows

ShadowMappingCurrentlyweareabletorepresenthowlightaffectstheobjectsina3Dscene.Objectsthatgetmorelightareshownbrighterthenobjectsthatdonotreceivelight.Howeverwearestillnotabletocastshadows.Shadowswillincreasethedegreeofrealismthat3Dscenewouldhavesowewilladdsupportforitinthischapter.

WewilluseatechniquenamedShadowmappingwhichiswidelyusedingamesanddoesnotaffectseverelytheengineperformance.Shadowmappingmayseemsimpletounderstandbutit’ssomehowdifficulttoimplementitright.Or,tobemoreprecise,it’sverydifficulttoimplementitinagenericwaysthatcoverallthepotentialcasesandproducesconsistentresults.

Wewillexplainhereanapproachwhichwillserveyoutoaddshadowsformostofthecases,butwhatit’smoreimportantitwillserveyoutounderstanditslimitations.ThecodepresentedhereisfarfrombeingperfectbutIthinkitwillbeeasytounderstand.Itisalsodesignedtosupportdirectionallights(whichinmyopinionisthemorecomplexcase)butyouwilllearnhowitcanbeextendedtosupportothertypeoflights(suchuspointlights).IfyouwanttoachievemoreadvancedresultsyoushouldusemoreadvancetechniquessuchasCascadedShadowMaps.Inanycasetheconceptsexplainedherewillserveyouasabasis.

Solet’sstartbythinkinginhowwecouldcheckifaspecificarea(indeedafragment)isinshadowornot.Whiledrawingthatareaifwecancastraystothelightsource,ifwecanreachthelightsourcewithoutanycollisionthenthatpixelisinlight.Ifnot,thenthepixelisinshadow.

Thefollowingpictureshowsthecaseforapointlight,thepointPAcanreachthesourcelight,butpointsPBandPCcan’tsotheyareinshadow.

Shadows

So,howwecancheckifwecancastthatraywithoutcollisionsinanefficientmanner?Alightsourcecan,theoreticallycastinfinitelyraylights,sohowdowecheckifaraylightisblockedornot?Whatwecandoinsteadofcastingraylightsistolookatthe3Dscenefromthelight’spersèctiveandrenderthescenefromthatlocation.Wecansetthecameraatthelightpositionandrenderthescenesowecanstorethedepthforeachfragment.Thisisequivalenttocalculatethedistanceofeachfragmenttothelightsource.Attheend,whatwearedoingisstoringtheminimumdistanceasseenfromthelightsourceasashadowmap.

Thefollowingpictureshowsacubefloatingoveraplaneandaperpendicularlight.

Thesceneasseenfromthelightperspectivewouldbesomethinglikethis(thedarkerthecolour,theclosertothelightsource).

Shadows

Withthatinformationwecanrenderthe3Dsceneasusualandcheckthedistanceforeachfragmenttothelightsourcewiththeminimumstoreddistance.Ifthedistanceislessthatthevaluestoredintheshadowmap,thentheobjectisinlight,otherwiseisinshadow.Wecanhaveseveralobjectsthatcouldbehitbythesameraylight.Butwestoretheminimumdistance.

Thus,shadowmappingisatwostepprocess:

Firstwerenderthescenefromthelightspaceintoashadowmaptogettheminimumdistances.Secondwerenderthescenefromthecamerapointofviewandusethatdepthmaptocalculateifobjectsareinshadowornot.

Inordertorenderthedepthmapweneedtotalkaboutthedepthbuffer.Whenwerenderasceneallthedepthinformationisstoredinabuffernamed,obviously,depth-buffer(alsoz-buffer).Thatdepthinformationisthezvalueofeachofthefragmentthatisrendered.Ifyourecallfromthefirstchapterswhatwearedoingwhilerenderingasceneistransformingfromworldcoordinatestoscreencoordinates.Wearedrawingtoacoordinatespacewhichrangesfrom0to1forxandyaxis.Ifanobjectismoredistantthanother,wemustcalculatehowthisaffectstheirxandycoordinatesthroughtheperspectiveprojectionmatrix.Thisisnotcalculatedautomaticallydependingonthezvalue,thismustbedoneus.Whatisactuallystoredinthezcoordinateitsthedepthofthatfragment,nothinglessbutnothingmore.

Besidesthat,inoursourcecodeweareenablingdepthtesting.IntheWindowclasswehavesetthefollowingline:

Bysettingthislinewepreventfragmentsthatcannotbeseen,becausetheyarebehindotherobjects,tobedrawn.Beforeafragmentisdrawnitszvalueiscomparedwiththezvalueofthez-buffer.Ifithasahigherzvalue(it’sfaraway)thanthezvalueofthebufferit’sdiscarded.Rememberthatthisisdoneinscreenspace,sowearecomparingthezvalueofafragmentgivenapairofxandycoordinatesinscreenspace,thatisintherange[0, 1].Thus,thezvalueisalsointhatrange.

Shadows

Thepresenceofthedepthbufferisthereasonwhyweneedtoclearthescreenbeforeperforminganyrenderoperation.Weneedtoclearnotonlythecolourbutthedepthinformationalso:

publicvoidclear(){

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

Inordertostartbuildingthedepthmapwewanttogetthatdepthinformationasviewedfromthelightperspective.Weneedtosetupacamerainthelightposition,renderthesceneandstorethatdepthinformationintoatexturesowecanaccesstoitlater.

Therefore,thefirstthingweneedtodoisaddsupportforcreatingthosetextures.WewillmodifytheTextureclasstosupportthecreationofemptytexturesbyaddinganewconstructor.Thisconstructorexpectsthedimensionsofthetextureandtheformatofthepixelsitstores.

publicTexture(intwidth,intheight,intpixelFormat)throwsException{

this.id=glGenTextures();

this.width=width;

this.height=height;

glBindTexture(GL_TEXTURE_2D,this.id);

glTexImage2D(GL_TEXTURE_2D,0,GL_DEPTH_COMPONENT,this.width,this.height,0,pix

elFormat,GL_FLOAT,(ByteBuffer)null);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_EDGE);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_EDGE);

WesetthetexturewrappingmodetoGL_CLAMP_TO_EDGEsincewedonotwantthetexturetorepeatincaseweexceedthe[0, 1]range.

Sonowthatweareabletocreateemptytextures,weneedtobeabletorenderasceneintoit.InordertodothatweneedtouseFrameBuffersObjects(orFBOs).AFrameBufferisacollectionofbuffersthatcanbeusedasadestinationforrendering.WhenwehavebeenrenderingtothescreenwehaveusingOpenGL’sdefaultbuffer.OpenGLallowsustorendertouserdefinedbuffersbyusingFBOs.WewillisolatetherestofthecodeoftheprocessofcreatingFBOsforshadowmappingbycreatinganewclassnamedShadowMap.Thisisthedefinitionofthatclass.

Shadows

publicclassShadowMap{

publicstaticfinalintSHADOW_MAP_WIDTH=1024;

publicstaticfinalintSHADOW_MAP_HEIGHT=1024;

privatefinalintdepthMapFBO;

privatefinalTexturedepthMap;

publicShadowMap()throwsException{

//CreateaFBOtorenderthedepthmap

depthMapFBO=glGenFramebuffers();

//Createthedepthmaptexture

depthMap=newTexture(SHADOW_MAP_WIDTH,SHADOW_MAP_HEIGHT,GL_DEPTH_COMPONENT

//AttachthethedepthmaptexturetotheFBO

glBindFramebuffer(GL_FRAMEBUFFER,depthMapFBO);

glFramebufferTexture2D(GL_FRAMEBUFFER,GL_DEPTH_ATTACHMENT,GL_TEXTURE_2D,dep

thMap.getId(),0);

//Setonlydepth

glDrawBuffer(GL_NONE);

glReadBuffer(GL_NONE);

if(glCheckFramebufferStatus(GL_FRAMEBUFFER)!=GL_FRAMEBUFFER_COMPLETE){

thrownewException("CouldnotcreateFrameBuffer");

//Unbind

glBindFramebuffer(GL_FRAMEBUFFER,0);

publicTexturegetDepthMapTexture(){

returndepthMap;

publicintgetDepthMapFBO(){

returndepthMapFBO;

glDeleteFramebuffers(depthMapFBO);

depthMap.cleanup();

Shadows

TheShadowMapclassdefinestwoconstantsthatdeterminethesizeofthetexturethatwillholdthedepthmap.Italsodefinestwoattributes,onefortheFBOandoneforthetexture.Intheconstructor,wecreateanewFBOandanewTexture.FortheFBOwewilluseasthepixelformattheconstantGL_DEPTH_COMPONENTsinceweareonlyinterestedinstoringdepthvalues.ThenweattachtheFBOtothetextureinstance.

ThefollowinglinesexplicitlysettheFBOtonotrenderanycolour.AFBOneedsacolourbuffer,butwearenotgoingtoneeded.ThisiswhywesetthecolourbufferstobeusedasGL_NONE.

glDrawBuffer(GL_NONE);

glReadBuffer(GL_NONE);

NowwearereadytorenderthescenefromthelightperspectiveintoFBOintheRendererclass.Inordertodothat,wewillcreateaspecificsetofvertexandfragmentsshaders.

Thevertexshader,nameddepth_vertex.fs,isdefinedlikethis.

#version330

uniformmat4modelLightViewMatrix;

uniformmat4orthoProjectionMatrix;

voidmain()

gl_Position=orthoProjectionMatrix*modelLightViewMatrix*vec4(position,1.0f);

Weexpecttoreceivethesameinputdataasthesceneshader.Infact,weonlyneedtheposition,buttoreuseasmuchascodeaspossiblewewillpassitanyway.Wealsoneedapairofmatrices.Rememberthatwemustrenderthescenefromthelightpointofview,soweneedtotransformourmodelstolight'scoordinatespace.ThisisdonethroughthemodelLightViewMatrixmatrix,whichisanalogoustoviewmodelmatrixusedforacamera.Thelightisourcameranow.

Thenweneedtotransformthosecoordinatestoscreenspace,thatis,weneedtoprojectthem.Andthisisoneofthedifferenceswhilecalculatingshadowmapsfordirectionallightsversuspointlights.Forpointlightswewoulduseaperspectiveprojectionmatrixasifwewererenderingthescenenormally.Directionallights,instead,affectallobjectsinthesame

Shadows

wayindependentlyofthedistance.Directionallightsarelocatedataninfinitepointanddonothaveapositionbutadirection.Anorthographicprojectiondoesnotrenderdistantobjectssmaller,andbecauseofthischaracteristicisthemostsuitablefordirectionallights.

Thefragmentshaderisevensimpler.Itjustoutputsthezcoordinateasthedepthvalue.

#version330

voidmain()

gl_FragDepth=gl_FragCoord.z;

Infact,youcanremovethatline,sinceweareonlygeneratingdepthvalues,thedepthvalueitwillbeautomaticallyreturned.

OncewehavedefinedthenewshadersfordepthrenderingwecanusethemintheRendererclass.Wedefineanewmethodforsettingupthoseshaders,namedsetupDepthShader,whichwillbeinvokedwheretheothersshadersareinitialized.

privatevoidsetupDepthShader()throwsException{

depthShaderProgram=newShaderProgram();

depthShaderProgram.createVertexShader(Utils.loadResource("/shaders/depth_vertex.vs"

depthShaderProgram.createFragmentShader(Utils.loadResource("/shaders/depth_fragmen

t.fs"));

depthShaderProgram.link();

depthShaderProgram.createUniform("orthoProjectionMatrix");

depthShaderProgram.createUniform("modelLightViewMatrix");

NowweneedtocreateanewmethodthatusesthoseshaderswhichwillbenamedrenderDepthMap.Thismethodwillbeinvokedintheprincipalrendermethod.

publicvoidrender(Windowwindow,Cameracamera,Scenescene,IHudhud){

clear();

//Renderdepthmapbeforeviewportshasbeensetup

renderDepthMap(window,camera,scene);

//Restofthecodehere....

Shadows

Ifyoulookattheabovecodeyouwillseethatthenewmethodisinvokedattheverybeginning,beforewehavesettheviewport.Thisisduetothefactthatthisnewmethodwillchangetheviewporttomatchthedimensionsofthetexturethatholdsthedepthmap.Becauseofthat,wewillalwaysneedtoset,aftertherenderDepthMaphasbeenfinished,theviewporttothescreendimensions(withoutcheckingifthewindowhasbeenresized).

Let’sdefinenowtherenderDepthMapmethod.ThefirstthingthatwewilldoistobindtotheFBOwehavecreatedintheShadowMapclassandsettheviewporttomatchthetexturedimensions.

glBindFramebuffer(GL_FRAMEBUFFER,shadowMap.getDepthMapFBO());

glViewport(0,0,ShadowMap.SHADOW_MAP_WIDTH,ShadowMap.SHADOW_MAP_HEIGHT);

Thenweclearthedepthbuffercontentsandbindthedepthshaders.Sinceweareonlydealingwithdepthvalueswedonotneedtoclearcolourinformation.

glClear(GL_DEPTH_BUFFER_BIT);

depthShaderProgram.bind();

Nowweneedtosetupthematrices,andherecomesthetrickypart.Weusethelightasacamerasoweneedtocreateaviewmatrixwhichneedsapositionandthreeangles.Asithasbeensaidatthebeginningofthechapterwewillsupportonlydirectionallights,andthattypeoflightsdoesnotdefineapositionbutadirection.Ifwewereusingpointlightsthiswouldbeeasy,thepositionofthelightwouldbethepositionoftheviewmatrix,butwedonothavethat.

Wewilltakeasimpleapproachtocalculatethelightposition.Directionallightsaredefinedbyavector,usually,normalized,whichpointstothedirectionwherethelightis.Wewillmultiplythatdirectionvectorbyaconfigurablefactorsoitdefinesapointatareasonabledistanceforthescenewewanttodraw.Wewillusethatdirectioninordertocalculatetherotationangleforthatviewmatrix.

Shadows

Thisisthefragmentthatcalculatesthelightpositionandtherotationangles

floatlightAngleX=(float)Math.toDegrees(Math.acos(lightDirection.z));

floatlightAngleY=(float)Math.toDegrees(Math.asin(lightDirection.x));

floatlightAngleZ=0;

Matrix4flightViewMatrix=transformation.updateLightViewMatrix(newVector3f(lightDire

ction).mul(light.getShadowPosMult()),newVector3f(lightAngleX,lightAngleY,lightAngl

Nextweneedtocalculatetheorthographicprojectionmatrix.

Matrix4forthoProjMatrix=transformation.updateOrthoProjectionMatrix(orthCoords.left,

orthCoords.right,orthCoords.bottom,orthCoords.top,orthCoords.near,orthCoords.far)

WehavemodifiedtheTransformationclasstoincludethelightviewmatrixandtheorthographicprojectionmatrix.Previouslywehadaorthographic2Dprojectionmatrix,sowehaverenamedthepreviousmethodsandattributes.Youcancheckthedefinitioninthesourcecodewhichisstraightforward.

ThenwerenderthesceneobjectsasintherenderScenemethodbutusingthepreviousmatricestoworkinlightspacecoordinatesystem.

Shadows

depthShaderProgram.setUniform("orthoProjectionMatrix",orthoProjMatrix);

Map<Mesh,List<GameItem>>mapMeshes=scene.getGameMeshes();

for(Meshmesh:mapMeshes.keySet()){

mesh.renderList(mapMeshes.get(mesh),(GameItemgameItem)->{

Matrix4fmodelLightViewMatrix=transformation.buildModelViewMatrix(gameItem,

lightViewMatrix);

depthShaderProgram.setUniform("modelLightViewMatrix",modelLightViewMatrix);

//Unbind

depthShaderProgram.unbind();

TheparameterizationoftheorthographicprojectionmatrixisdefinedinthedirectionalLight.Thinkoftheorthographicprojectionmatrixasaboundingboxthatcontainsalltheobjectsthatwewanttorender.Whenprojectingonlytheobjectsthatfitintothatboundingboxwillbebevisible.Thatboundingboxisdefinedby6parameters:left,right,bottom,top,near,far.Since,thelightpositionisnowtheorigin,theseparametersdefinethedistancefromthatorigintotheleftorright(x-axis)upordown(y-axis)andtothenearestorfarthestplane(z-axis).

Oneofthetrickiestpointsingettingshadowsmaptoworkisdeterminethelightpositionandtheorthographicprojectionmatrixparameters.ThisiswayalltheseparametersarenowdefinedintheDirectionalLightclasssoitcanbesetproperlyaccordingtoeachscene.

Youcanimplementamoreautomaticapproach,bycalculatingthecentreofthecamerafrustum,getbackinthelightdirectionandbuildaorthographicprojectionthatcontainsalltheobjectsinthescene.Thefollowingfigureshowsa3Dsceneaslookedformabove,thecamerapositionanditsfrustum(inblue)andtheoptimallightpositionandboundingboxinred.

Shadows

Theproblemwiththeapproachaboveisthatisdifficulttocalculateandifyouhavesmallobjectsandtheboundingboxisbigyoumaygetstrangeresults.Theapproachpresentedhereissimplerforsmallscenesandyoucantweakittomatchyourmodels(evenyoucanchosetoexplicitlysetlight’spositiontoavoidstrangeeffectsifcameramovesfarawayfromtheorigin).Ifyouwantamoregenericmodelthatcanbeappliedtoanysceneyoushouldextendittosupportcascadingshadowmaps.

Let'scontinue.Beforeweusethedepthmapstoactuallycalculateshadows,youcouldrenderaquadwiththegeneratedtexturetoseehowarealdepthmaplookslike.Youcouldgetsomethinglikethisforascenecomposedbyarotatingcubefloatingoveraplanewithaperpendiculardirectionallight.

Shadows

Asit'sbeensaidbefore,thedarkerthecolour,theclosertothelightposition.What’stheeffectofthelightpositioninthedepthmap?Youcanplaywiththemultiplicationfactorofthedirectionallightandyouwillseethatthesizeoftheobjectsrenderedinthetexturedonotdecrease.Rememberthatweareusinganorthographicprojectionmatrixandobjectsdonotgetsmallerwithdistance.Whatyouwillseeisthatallcoloursgetbrighterasseeninthenextpicture.

Doesthatmeanthatwecanchooseahighdistanceforthelightpositionwithoutconsequences?Theanswerisno.Iflightistoofarawayfromtheobjectswewanttorender,theseobjectscanbeoutoftheboundingboxthatdefinestheorthographicprojectionmatrix.Inthiscaseyouwillgetanicewhitetexturewhichwouldbeuselessforshadowmapping.Ok,thenwesimplyincreasetheboundingboxsizeandeverythingwillbeok,right?Theanswerisagainno.Ifyouchosehugedimensionsfortheorthographicprojectionmatrixyourobjectswillbedrawnverysmallinthetexture,andthedepthvaluescanevenoverlapleadingtostrangeresults.Ok,soyoucanthinkinincreasingthetexturesize,but,againinthiscaseyouarelimitedandtexturescannotgrowindefinitelytousehugeboundingboxes.

Soasyoucanseeselectingthelightpositionandtheorthographicprojectionparametersisacomplexequilibriumwhichmakesdifficulttogetrightresultsusingshadowmapping.

Let’sgobacktotherenderingprocess,oncewehavecalculatedthedepthmapwecanuseitwhilerenderingthescene.Firstweneedtomodifythescenevertexshader.Uptonow,thevertexshaderprojectedthevertexcoordinatesfrommodelviewspacetothescreenspaceusingaperspectivematrix.Nowweneedtoprojectalsothevertexcoordinatesfromlightspacecoordinatesusingaprojectionmatrixtobeusedinthefragmentshadertocalculatetheshadows.

Thevertexshaderismodifiedlikethis.

Shadows

#version330

outvec2outTexCoord;

outvec3mvVertexPos;

outvec4mlightviewVertexPos;

voidmain()

mlightviewVertexPos=orthoProjectionMatrix*modelLightViewMatrix*vec4(position

,1.0);

Weusenewuniformsforthelightviewmatrixandtheorthographicprojectionmatrix.

Inthefragmentshaderwewillcreateanewfunctiontocalculatetheshadowsthatisdefinedlikethis.

floatcalcShadow(vec4position)

floatshadowFactor=1.0;

vec3projCoords=position.xyz;

//Transformfromscreencoordinatestotexturecoordinates

projCoords=projCoords*0.5+0.5;

if(projCoords.z<texture(shadowMap,projCoords.xy).r)

//Currentfragmentisnotinshade

shadowFactor=0;

return1-shadowFactor;

Shadows

Thefunctionreceivesthepositioninlightviewspaceprojectedusingtheorthographicprojectionmatrix.Itreturns0ifthepositionisinshadowand1ifit’snot.First,thecoordinatesaretransformedtotexturecoordinates.Screencoordinatesareintherange[−1, 1],buttexturecoordinatesareintherange[0, 1].Withthatcoordinateswegetthedepthvaluefromthetextureandcompareitwiththezvalueofthefragmentcoordinates.Ifthezvalueifthefragmenthasalowervaluethantheonestoredinthetexturethatmeansthatthefragmentisnotinshade.

Inthefragmentshader,thereturnvaluefromthecalcShadowfunctiontomodulatethelightcolourcontributionsfrompoint,spotanddirectionallights.Theambientlightisnotaffectedbytheshadow.

floatshadow=calcShadow(mlightviewVertexPos);

fragColor=clamp(ambientC*vec4(ambientLight,1)+diffuseSpecularComp*shadow,0,1

IntherenderScenemethodoftheRendererclasswejustneedtopasstheuniformfortheorthographicprojectionandlightviewmatrices(weneedtomodifyalsothemethodthatinitializestheshadertocreatethenewuniforms).Youcanconsultthisinthebook’ssourcecode.

IftoruntheDummyGameclass,whichhasbeenmodifiedtosetupafloatingcubeoveraplanewithadirectionallightwhichanglecanbechangedbyusingupanddownkeys,youshouldseesomethinglikethis.

Althoughshadowsareworking(youcancheckthatbymovinglightdirection),theimplementationpresentssomeproblems.Firstofall,therearestrangelinesintheobjectsthatarelightenedup.Thiseffectiscalledshadowacne,andit’sproducedbythelimited

Shadows

resolutionofthetexturethatstoresthedepthmap.Thesecondproblemisthatthebordersoftheshadowarenotsmoothandlookblocky.Thecauseisthesameagain,thetextureresolution.Wewillsolvetheseproblemsinordertoimproveshadowquality.

ShadowMappingimprovementsNowthatwehavetheshadowmappingmechanismworking,let’ssolvetheproblemswehave.Let’sfirststartwiththeshadowacneproblem.Thedepthmaptextureislimitedinsize,andbecauseofthat,severalfragmentscanbemappedtothesamepixelinthattexturedepth.Thetexturedepthstorestheminimumdepth,soattheend,wehaveseveralfragmentsthatsharethesamedepthinthattexturealthoughtheyareatdifferentdistances.

Wecansolvethisbyincreasing,byalittlebitthedepthcomparisoninthefragmentshader,weaddabias.

floatbias=0.05;

if(projCoords.z-bias<texture(shadowMap,projCoords.xy).r)

//Currentfragmentisnotinshade

shadowFactor=0;

Now,theshadowacnehasdisappeared.

Shadows

Nowwearegoingtosolvedeshadowedgesproblem,whichisalsocausedbythetextureresolution.Foreachfragmentwearegoingtosamplethedepthtexturewiththefragment’spositionvalueandthesurroundingvalues.Thenwewillcalculatetheaverageandassignthatvalueastheshadowvalue.Inthiscasehisvaluewon’tbe0or1butcantakevaluesinbetweeninordertogetsmootheredges.

Thesurroundingvaluesmustbeatonepixeldistanceofthecurrentfragmentpositionintexturecoordinates.Soweneedtocalculatetheincrementofonepixelintexturecoordinateswhichisequalto1/textureSize.

InthefragmentShaderwejustneedtomodifytheshadowfactorcalculationtogetanaveragevalue.

floatshadowFactor=0.0;

vec2inc=1.0/textureSize(shadowMap,0);

for(introw=-1;row<=1;++row)

for(intcol=-1;col<=1;++col)

floattextDepth=texture(shadowMap,projCoords.xy+vec2(row,col)*inc).r;

shadowFactor+=projCoords.z-bias>textDepth?1.0:0.0;

shadowFactor/=9.0;

Theresultlooksnowsmoother.

Shadows

Nowoursamplelooksmuchbetter.Nevertheless,theshadowmappingtechniquepresentedherecanstillbeimprovedalot.Youcancheckaboutsolvingpeterpanningeffect(causedbythebiasfactor)andothertechniquestoimprovetheshadowedges.Inanycase,withtheconceptsexplainedhereyouhaveagoodbasistostartmodifyingthesample.

Inordertorendermultiplelightsyoujustneedtorenderaseparatedepthmapforeachlightsource.Whilerenderingthesceneyouwillneedtosampleallthosedepthmapstocalculatetheappropriateshadowfactor.

Shadows

Animations

IntroductionBynowwehavejustloadedstatic3Dmodels,inthischapterwewilllearnhowtoanimatethem.Whenthinkingaboutanimationsthefirstapproachistocreatedifferentmeshesforeachmodelpositions,loadthemupintotheGPUanddrawthemsequentiallytocreatetheillusionofanimation.Althoughthisapproachisperfectforsomegamesit'snotveryefficient(intermsofmemoryconsumption).

Thiswhereskeletalanimationcomestoplay.Inskeletalanimationthewayamodelanimatesisdefinedbyitsunderlyingskeleton.Askeletonisdefinedbyahierarchyofspecialpointscalledjoints.Thosejointsaredefinedbytheirpositionandrotation.Wehavesaidalsothatit'sahierarchy,thismeansthatthefinalpositionforeachjointisaffectedbytheirparents.Forinstance,thinkonawrist,thepositionofawristismodifiedifacharactermovestheelbowandalsoifitmovestheshoulder.

Jointsdonotneedtorepresentaphysicalboneorarticulation,theyareartifactsthatallowsthecreativestomodelananimation.Inadditiontojointswestillhavevertices,thepointsthatdefinethetrianglesthatcomposea3Dmodel.But,inskeletalanimation,verticesaredrawnbasedonthepositionofthejointsitisrelatedto.

InthischapterwewilluseMD5formattoloadanimatedmodels.MD5formatwascreatebyIDSoftware,thecreatorsofDoom,andit’sbasicallyatextbasedfileformatwhichiswellunderstood.AnotherapproachwouldbetousetheColladaformat,whichisapublicstandardsupportedbymanytools.ColladaisanXMLbasedformatbutasadownsideit’sverycomplex(Thespecificationforthe1.5versionhasmorethan500pages).So,wewillsticktoamuchmoresimpleformat,MD5,thatwillallowustofocusintheconceptsoftheskeletalanimationandtocreateaworkingsample.

YoucanalsoexportsomemodelsfromBlendertoMD5formatviaspecificaddonsthatyoucanfindontheInternet(http://www.katsbits.com/tools/#md5)

InthischapterI’veconsultedmanydifferentsources,butIhavefoundtwothatprovideaverygoodexplanationabouthowtocreateananimatedmodelusingMD5files.Thesessourcescanbeconsultedat:

http://www.3dgep.com/gpu-skinning-of-md5-models-in-opengl-and-cg/http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html

Animations

Solet’sstartbywritingthecodethatparsesMD5files.TheMD5formatdefinestwotypesoffiles:

Themeshdefinitionfile:whichdefinesthejointsandtheverticesandtexturesthatcomposethesetofmeshesthatformthe3Dmodel.Thisfileusuallyhasaextensionnamed“.md5mesh”.Theanimationdefinitionfile:whichdefinestheanimationsthatcanbeappliedtothemodel.Thisfileusuallyhasaextensionnamed“.md5anim”.

AnMD5fileiscomposedbyaheaderandifferentsectionscontainedbetweenbraces.Let’sstartexaminingthemeshdefinitionfile.IntheresourcesfolderyouwillfindseveralmodelsinMD5format.Ifyouopenoneofthemyoucanseeastructuresimilarlikethis.

Thefirststructurethatyoucanfindinthemeshdefinitionfileistheheader.Youcanseebelowheader’scontentfromoneofthesamplesprovided:

Animations

MD5Version10

commandline""

numJoints33

numMeshes6

Theheaderdefinesthefollowingattributes:

TheversionoftheMD5specificationthatitcompliesto.Thecommandusedtogeneratethisfile(froma3Dmodellingtool).ThenumberofJointsthataredefinedinthejointssectionThenumberofMeshes(thenumberofmeshessectionsexpected).

TheJointssectionsdefinesthejoints,asitnamesstates,theirpositionsandtheirrelationships.Afragmentofthejointssectionofoneofthesamplemodelsisshownbelow.

joints{

"origin"-1(-0.0000000.016430-0.006044)(0.7071070.0000000.707107)

"sheath"0(11.004813-3.17713831.702473)(0.307041-0.5786140.354181)

//origin

"sword"1(9.809593-9.36154940.753730)(0.305557-0.5781550.353505)

//sheath

"pubis"0(0.0140762.06444226.144581)(-0.466932-0.531013-0.466932)

//origin

……

AJointisdefinedbythefollowingattributes:

Jointname,atextualattributebetweenquotes.Jointparent,usinganindexwhichpointstotheparentjointusingitspositioninthejointslist.Therootjointhasaparentequalsto-1.Jointposition,definedinmodelspacecoordinatesystem.Jointorientation,definedalsoinmodelspacecoordinatesystem.Theorientationinfactisaquaternionwhosew-componentisnotincluded.

Beforecontinuingexplainingtherestofthefilelet’stalkaboutquaternions.Quaternionsarefourcomponentelementsthatareusedtorepresentrotation.Uptonow,wehavebeenusingEulerangles(yaw,pitchandroll)todefinerotations,whichbasicallydefinerotationaroundthex,yandzangles.But,Euleranglespresentsomeproblemswhenworkingwithrotations,specificallyyoumustbeawareofthecorrectordertoapplyderotationsandsomeoperationscangetverycomplex.

Animations

Thiswherequaternionscometohelpinordertosolvethiscomplexity.Asithasbeensaidbeforeaquaternionisdefinedasasetof4numbers(x,y,z,w).Quaternionsdefinearotationaxisandtherotationanglearoundthataxis.

YoucancheckinthewebthemathematicaldefinitionofeachofthecomponentsbutthegoodnewsisthatJOML,themathlibraryweareusing,providessupportforthem.Wecanconstructrotationmatricesbasedonquaternionsandperformsometransformationtovectorswiththem.

Let’sgetbacktothejointsdefinition,thewcomponentismissingbutitcanbeeasilycalculatedwiththehelpoftherestofthevalues.Youcancheckthesourcecodetoseehowit'sdone.

Afterthejointsdefinitionyoucanfindthedefinitionofthedifferentmeshesthatcomposeamodel.BelowyoucanfindafragmentofaMeshdefinitionfromoneofthesamples.

shader"/textures/bob/guard1_body.png"

numverts494

vert0(0.3945310.513672)01

vert1(0.4472660.449219)12

vert493(0.6835940.455078)8643

numtris628

tri0021

tri1013

tri627471479493

numweights867

weight051.000000(6.1757748.105262-0.023020)

weight150.500000(4.88017312.8052514.196980)

weight86660.333333(1.266308-0.3027018.949338)

Animations

Let’sreviewthestructurepresentedabove:

AMeshstartsbydefiningatexturefile.Keepinmindthatthepaththatyouwillfindhereistheoneusedbythetoolthatcreatedthatmodel.Thatpathmaynotmatchtheonethatisusedtoloadthosefiles.Youhavetwoapproacheshere,eitheryouchangethebasepathdynamicallyoreitheryouchangethatpathbyhand.I’vechosenthelatterone,thesimplerone.Nextyoucanfindtheverticesdefinition.Avertexisdefinedbythefollowingattributes:

Vertexindex.

Texturecoordinates.

Theindexofthefirstweightdefinitionthataffectsthisvertex.

Thenumberofweightstoconsider.Afterthevertices,thetrianglesthatformthismesharedefined.Thetrianglesdefinethewaythatverticesareorganizedusingtheirindices.Finally,theweightsaredefined.AWeightdefinitioniscomposedby:

AWeightindex.

AJointindex,whichpointstothejointrelatedtothisweight.

Abiasfactor,whichisusedtomodulatetheeffectofthisweight.

Apositionofthisweight.

Thefollowingpicturedepictstherelationbetweenthecomponentsdescribedaboveusingsampledata.

Ok,sonowthatweunderstandthemeshmodelfilewecanparseit.Ifyoulookatthesourcecodeyouwillseethatanewpackagehasbeencreatedtohostparsersformodelformats.There’soneforOBJfilesunderorg.lwjglb.engine.loaders.objandthecodeforMD5files

Animations

isunderorg.lwjglb.engine.loaders.md5.

AlltheparsingcodeisbasedonregularexpressionstoextracttheinformationfromtheMD5textfiles.TheparserswillcreateahierarchyofobjectsthatmimicthestructureoftheinformationcomponentscontainedintheMD5files.ItmaynotbethemostefficientparserintheworldbutIthinkitwillservetobetterunderstandtheprocess.

ThestartingclasstoparseaMD5modelfileisMD5Modelclass.ThisclassreceivesasaparameterinitsparsemethodthecontentsofaMD5fileancreatesahierarchythatcontainstheheader,thelistofjointsandthelistofmesheswithallthesubelements.Thecodeisverystraightforwardso,Iwon’tincludeithere.

Afewcommentsabouttheparsingcode:

ThesubelementsofaMesharedefinedasinnerclassesinsidetheMD5Meshclass.YoucancheckhowthefourthcomponentofthejointsorientationarecalculatedinthecalculateQuaternionmethodformtheMD5Utilsclass.

NowthatwehaveparsedafilewemusttransformthatobjecthierarchyintosomethingthatcanbeprocessedbythegameEngine,wemustcreateaGameIteminstance.InordertodothatwewillcreateanewclassnamedMD5LoaderthatwilltakeaMD5ModelinstanceandwillconstructaGameItem.

Beforewestart,asyounoticed,aMD5modelhasseveralMeshes,butourGameItemclassonlysupportsasingleMesh.Weneedtochangethisfirst,theclassGameItemnowlookslikethis.

privateMesh[]meshes;

privatefloatscale;

publicGameItem(){

scale=1;

Animations

publicGameItem(Meshmesh){

this();

this.meshes=newMesh[]{mesh};

publicGameItem(Mesh[]meshes){

this();

this.meshes=meshes;

returnposition;

this.position.x=x;

this.position.y=y;

this.position.z=z;

publicfloatgetScale(){

returnscale;

publicvoidsetScale(floatscale){

this.scale=scale;

returnrotation;

this.rotation.x=x;

this.rotation.y=y;

this.rotation.z=z;

publicMeshgetMesh(){

returnmeshes[0];

publicMesh[]getMeshes(){

returnmeshes;

publicvoidsetMeshes(Mesh[]meshes){

this.meshes=meshes;

publicvoidsetMesh(Meshmesh){

if(this.meshes!=null){

for(MeshcurrMesh:meshes){

Animations

currMesh.cleanUp();

this.meshes=newMesh[]{mesh};

WiththemodificationabovewecannowdefinethecontentsfortheMD5Loaderclass.ThisclasswillhaveamethodnamedprocessthatwillreceiveaMD5Modelinstanceandadefaultcolour(forthemeshesthatdonotdefineatexture)andwillreturnaGameIteminstance.Thebodyofthatmethodisshownbelow.

publicstaticGameItemprocess(MD5Modelmd5Model,Vector4fdefaultColour)throwsExcep

List<MD5Mesh>md5MeshList=md5Model.getMeshes();

List<Mesh>list=newArrayList<>();

for(MD5Meshmd5Mesh:md5Model.getMeshes()){

Meshmesh=generateMesh(md5Model,md5Mesh,defaultColour);

handleTexture(mesh,md5Mesh,defaultColour);

list.add(mesh);

Mesh[]meshes=newMesh[list.size()];

meshes=list.toArray(meshes);

GameItemgameItem=newGameItem(meshes);

returngameItem;

AsyoucanseewejustiterateoverthemeshesdefinedintotheMD5Modelclassandtransformthemintoinstancesoftheclassorg.lwjglb.engine.graph.MeshbyusingthegenerateMeshmethodwhichistheonethatreallydoesthework.Beforeweexaminethatmethodwewillcreateaninnerclassthatwillserveustobuildthepositionsandnormalsarray.

Animations

privatestaticclassVertexInfo{

publicVector3fposition;

publicVector3fnormal;

publicVertexInfo(Vector3fposition){

this.position=position;

normal=newVector3f(0,0,0);

publicVertexInfo(){

position=newVector3f();

normal=newVector3f();

publicstaticfloat[]toPositionsArr(List<VertexInfo>list){

intlength=list!=null?list.size()*3:0;

float[]result=newfloat[length];

inti=0;

for(VertexInfov:list){

result[i]=v.position.x;

result[i+1]=v.position.y;

result[i+2]=v.position.z;

returnresult;

publicstaticfloat[]toNormalArr(List<VertexInfo>list){

intlength=list!=null?list.size()*3:0;

float[]result=newfloat[length];

inti=0;

for(VertexInfov:list){

result[i]=v.normal.x;

result[i+1]=v.normal.y;

result[i+2]=v.normal.z;

returnresult;

Let’sgetbacktothegenerateMeshmethod,thefirstwedoisgetthemeshverticesinformation,theweightsandthestructureofthejoints.

Animations

privatestaticMeshgenerateMesh(MD5Modelmd5Model,MD5Meshmd5Mesh,Vector4fdefaultC

olour)throwsException{

List<VertexInfo>vertexInfoList=newArrayList<>();

List<Float>textCoords=newArrayList<>();

List<Integer>indices=newArrayList<>();

List<MD5Mesh.MD5Vertex>vertices=md5Mesh.getVertices();

List<MD5Mesh.MD5Weight>weights=md5Mesh.getWeights();

List<MD5JointInfo.MD5JointData>joints=md5Model.getJointInfo().getJoints();

Thenweneedtocalculatetheverticespositionbasedontheinformationcontainedintheweightsandjoints.Thisisdoneinthefollowingblock

for(MD5Mesh.MD5Vertexvertex:vertices){

Vector3fvertexPos=newVector3f();

Vector2fvertexTextCoords=vertex.getTextCoords();

textCoords.add(vertexTextCoords.x);

textCoords.add(vertexTextCoords.y);

intstartWeight=vertex.getStartWeight();

intnumWeights=vertex.getWeightCount();

for(inti=startWeight;i<startWeight+numWeights;i++){

MD5Mesh.MD5Weightweight=weights.get(i);

MD5JointInfo.MD5JointDatajoint=joints.get(weight.getJointIndex());

Vector3frotatedPos=newVector3f(weight.getPosition()).rotate(joint.getO

rientation());

Vector3facumPos=newVector3f(joint.getPosition()).add(rotatedPos);

acumPos.mul(weight.getBias());

vertexPos.add(acumPos);

vertexInfoList.add(newVertexInfo(vertexPos));

Let’sexaminewhatwearedoinghere.Weiterateovertheverticesinformationandstorethetexturecoordinatesinalist,noneedtoapplyanytransformationhere.Thenwegetthestartingandtotalnumberofweightstoconsidertocalculatethevertexposition.

Thevertexpositioniscalculatedbyusingalltheweightsthatisrelatedto.Eachweightshasapositionandabias.Thesumofallbiasoftheweightsassociatedtoeachvertexmustbeequalto1.0.Eachweightalsohasapositionwhichisdefinedinjoint’slocalspace,soweneedtotransformittomodelspacecoordinatesusingthejoint’sorientationandposition(likeifitwereatransformationmatrix)towhichitrefersto.

Tosumup,thevertexpositioncanbeexpressedbythisformula:

Animations

V pos = (Jt ×Wp ) b

Where:

Thesummationstartsfromws(Weightstart)uptowc(Weightcount)weights.

Jt isthejoint’stransformationmatrixassociatedtotheweightW .

Wp istheweightposition.

Wb istheweightbias.

Thisequationiswhatweimplementinthebodyoftheloop(wedonothavethetransformationmatrixsincewehavethejointpositionandrotationseparatelybuttheresultisthesame).

Withthecodeabovewewillbeabletoconstructthepositionsandtexturecoordinatesdatabutwestillneedtobuilduptheindicesandthenormals.Indicescanbecalculatedbyusingthetrianglesinformation,justbyiteratingthroughthelistthatholdsthosetriangles.

Normalscanbecalculatedalsousingtrianglesinformation.LetV ,V andV bethetrianglevertices(inobject’smodelspace).Thenormalforthetrianglecanbecalculateaccordingtothisformula:

N = (V − V ) × (V − V )

WhereNshouldbenormalizedafter.Thefollowingfigureshowsthegeometricinterpretationoftheformulaabove.

i=ws∑

i i W i

2 0 1 0

Animations

Foreachvertexwecomputeitsnormalbythenormalizedsumofallthenormalsofthetrianglesitbelongsto.Thecodethatperformsthosecalculationsisshownbelow.

for(MD5Mesh.MD5Triangletri:md5Mesh.getTriangles()){

indices.add(tri.getVertex0());

//Normals

VertexInfov0=vertexInfoList.get(tri.getVertex0());

Vector3fpos0=v0.position;

Vector3fnormal=(newVector3f(pos2).sub(pos0)).cross(newVector3f(pos1).sub(

pos0));

v0.normal.add(normal);

//Oncethecontributionshavebeenadded,normalizetheresult

for(VertexInfov:vertexInfoList){

v.normal.normalize();

ThenwejustneedtotransformtheListstoarraysandprocessthetextureinformation.

float[]positionsArr=VertexInfo.toPositionsArr(vertexInfoList);

float[]textCoordsArr=Utils.listToArray(textCoords);

float[]normalsArr=VertexInfo.toNormalArr(vertexInfoList);

int[]indicesArr=indices.stream().mapToInt(i->i).toArray();

Meshmesh=newMesh(positionsArr,textCoordsArr,normalsArr,indicesArr);

returnmesh;

Goingbacktotheprocessmethodyoucanseethatthere'samethodnamedhandleTexture,whichisresponsibleforloadingtextures.Thisisthedefinitionofthatmethod:

Animations

privatestaticvoidhandleTexture(Meshmesh,MD5Meshmd5Mesh,Vector4fdefaultColour)

throwsException{

StringtexturePath=md5Mesh.getTexture();

if(texturePath!=null&&texturePath.length()>0){

Texturetexture=newTexture(texturePath);

Materialmaterial=newMaterial(texture);

//HandlenormalMaps;

intpos=texturePath.lastIndexOf(".");

if(pos>0){

StringbasePath=texturePath.substring(0,pos);

Stringextension=texturePath.substring(pos,texturePath.length());

StringnormalMapFileName=basePath+NORMAL_FILE_SUFFIX+extension;

if(Utils.existsResourceFile(normalMapFileName)){

TexturenormalMap=newTexture(normalMapFileName);

material.setNormalMap(normalMap);

}else{

mesh.setMaterial(newMaterial(defaultColour,1));

Theimplementationisverystraightforward.Theonlypeculiarityisthatifameshdefinesatexturenamed“texture.png”itsnormaltexturemapwillbedefinedinafile“texture_normal.png”.Weneedtocheckifthatfileexistsandloaditaccordingly.

WecannowloadaMD5fileandrenderitaswerenderotherGameItems,butbeforedoingthatweneedtodisablecullfaceinordertorenderitproperlysincenotallthetriangleswillbedrawninthecorrectdirection.WewilladdsupporttotheWindowclasstosettheseparametersatruntime(youcancheckitinthesourcecodethechanges).

Ifyouloadsomeofthesamplemodelsyouwillgetsomethinglikethis.

Animations

Whatyouseehereisthebindingpose,it’sthestaticrepresentationoftheMD5modelusedfortheanimatorstomodelthemeasily.Inordertogetanimationtoworkwemustprocesstheanimationdefinitionfile.

AnimatethemodelAMD5animationdefinitionfile,likethemodeldefinitionone,iscomposedbyaheaderandifferentsectionscontainedbetweenbraces.Ifyouopenoneofthosefilesyoucanseeastructuresimilarlikethis.

Animations

Thefirststructurethatyoucanfindintheanimationfile,asinthecaseofthemeshdefinitionfile,istheheader.Youcanseebelowheader’scontentfromoneofthesamplesprovided:

Animations

MD5Version10

commandline""

numFrames140

numJoints33

frameRate24

numAnimatedComponents198

Theheaderdefinesthefollowingattributes:

TheversionoftheMD5specificationthatitcompliesto.Thecommandusedtogeneratethisfile(froma3Dmodellingtool).Thenumberframesdefinedinthefile.Thenumberofjointsdefinedinthehierarchysection.Theframerate,framespersecond,thatwasusedwhilecreatingthisanimation.Thisparametercanbeusedtocalculatethetimebetweenframes.Thenumberofcomponentsthateachframedefines.

Thehierarchysectionistheonethatcomesfirstanddefinesthejointsforthisanimation.Youcanseeafragmentbelow:

hierarchy{

"origin"-100//

"body"0630//origin(TxTyTzQxQyQz)

"body2"100//body

"SPINNER"2566//body2(QxQyQz)

Ajoint.Inthehierarchysection,isdefinedbythefollowingattributes:

Jointname,atextualattributebetweenquotes.Jointparent,usinganindexwhichpointstotheparentjointusingitspositioninthejointslist.Therootjointhasaparentequalsto-1.Jointflags,whichsethowthisjoint'spositionandorientationwillbechangedaccordingtothedatadefinedineachanimationframe.Thestartindex,insidetheanimationdataofeachframethatisusedwhenapplyingtheflags.

Thenextsectionistheboundsone.Thissectiondefinesaboundingboxwhichcontainsthemodelforeachanimationframe.Itwillcontainalineforeachoftheanimationframesanditlooklikethis:

Animations

bounds{

(-24.3102264404-44.2608566284-0.181215778)(31.086198806838.7131576538117.7

417449951)

(-24.3102283478-44.1887664795-0.1794649214)(31.180028915438.7173080444117.

7729110718)

(-24.3102359772-44.1144447327-0.1794776917)(31.204278945938.7091217041117.

8352737427)

Eachboundingboxisdefinedbytwo3componentvectorsinmodelspacecoordinates.Thefirstvectordefinestheminimumboundandthesecondonethemaximum.

Thenextsectionisthebaseframedata.Inthissection,thepositionandorientationofeachjointissetupbeforethedeformationsofeachanimationframeareapplied.Youcanseeafragmentbelow:

baseframe{

(000)(-0.5-0.5-0.5)

(-0.894733607870.7142486572-6.5027675629)(-0.3258574307-0.00830373540.0313

780755)

(0.00000014620.0539700091-0.0137935728)(000)

Eachlineisassociatedtoajointanddefinethefollowingattributes:

Positionofthejoint,asathreecomponentsvector.Orientationofthejoint,asthethreecomponentsofaquaternion(asinthemodelfile).

Afterthatyouwillfindseveralframedefinitions,asmanyasthevalueassignedtothenumFramesheaderattribute.Eachframesectionislikeahugearrayoffloatsthatwillbeusedbythejointswhenapplyingthetransformationsforeachframe.Youcanseeafragmentbelow.

frame1{

-0.927910089570.682762146-6.3709330559-0.3259022534-0.01005017380.0320306309

0.32590225340.0100501738-0.0320306309

-0.1038384438-0.1639953405-0.01525534880.0299418624

ThebaseclassthatparsesaMD5animationfileisnamedMD5AnimModel.Thisclasscreatesalltheobjectshierarchythatmapsthecontentsofthatfileandyoucancheckthesourcecodeforthedetails.ThestructureissimilartotheMD5modeldefinitionfile.Nowthatweare

Animations

abletoloadthatinformationwewilluseittogenerateananimation.

Wewillgeneratetheanimationintheshader,soinsteadofpre-calculatingallthepositionsforeachframeweneedtopreparethedataweneedsointhevertexshaderwecancomputethefinalpositions.Let’sgetbacktotheprocessmethodintheMD5Loaderclass,weneedtomodifyittotakeintoconsiderationtheanimationinformation.Thenewdefinitionforthatmethodisshownbelow:

publicstaticAnimGameItemprocess(MD5Modelmd5Model,MD5AnimModelanimModel,Vector4f

defaultColour)throwsException{

List<Matrix4f>invJointMatrices=calcInJointMatrices(md5Model);

List<AnimatedFrame>animatedFrames=processAnimationFrames(md5Model,animModel,i

nvJointMatrices);

List<Mesh>list=newArrayList<>();

for(MD5Meshmd5Mesh:md5Model.getMeshes()){

Meshmesh=generateMesh(md5Model,md5Mesh);

handleTexture(mesh,md5Mesh,defaultColour);

list.add(mesh);

Mesh[]meshes=newMesh[list.size()];

meshes=list.toArray(meshes);

AnimGameItemresult=newAnimGameItem(meshes,animatedFrames,invJointMatrices);

returnresult;

Therearesomechangeshere,themostobviousisthatthemethodnowreceivesaMD5AnimModelinstance.ThenextoneisthatwedonotreturnaGameIteminstancebutandAnimGameItemone.ThisclassinheritsfromtheGameItemclassbutaddssupportforanimations.Wewillseewhythiswasdonethiswaylater.

Ifwecontinuewiththeprocessmethod,thefirstthingwedoiscallthecalcInJointMatricesmethod,whichisdefinedlikethis:

Animations

privatestaticList<Matrix4f>calcInJointMatrices(MD5Modelmd5Model){

List<Matrix4f>result=newArrayList<>();

for(MD5JointInfo.MD5JointDatajoint:joints){

Matrix4ftranslateMat=newMatrix4f().translate(joint.getPosition());

Matrix4frotationMat=newMatrix4f().rotate(joint.getOrientation());

Matrix4fmat=translateMat.mul(rotationMat);

mat.invert();

result.add(mat);

returnresult;

ThismethoditeratesoverthejointscontainedintheMD5modeldefinitionfile,calculatesthetransformationmatrixassociatedtoeachjointandthenitgetstheinverseofthosematrices.ThisinformationisusedtoconstructtheAnimationGameIteminstance.

Let’scontinuewiththeprocessmethod,thenextthingwedoisprocesstheanimationframesbycallingtheprocessAnimationFramesmethod:

privatestaticList<AnimatedFrame>processAnimationFrames(MD5Modelmd5Model,MD5AnimMo

delanimModel,List<Matrix4f>invJointMatrices){

List<AnimatedFrame>animatedFrames=newArrayList<>();

List<MD5Frame>frames=animModel.getFrames();

for(MD5Frameframe:frames){

AnimatedFramedata=processAnimationFrame(md5Model,animModel,frame,invJoin

tMatrices);

animatedFrames.add(data);

returnanimatedFrames;

Thismethodprocesseachanimationframe,definedintheMD5animationdefinitionfile,andreturnsalistofAnimatedFrameinstances.TherealworkisdoneintheprocessAnimationFramemethod.Let’sexplainwhatthismethodwilldo.

Wefirst,iterateoverthejointsdefinedinthehierarchysectionintheMD5animatonfile.

Animations

privatestaticAnimatedFrameprocessAnimationFrame(MD5Modelmd5Model,MD5AnimModelani

mModel,MD5Frameframe,List<Matrix4f>invJointMatrices){

AnimatedFrameresult=newAnimatedFrame();

MD5BaseFramebaseFrame=animModel.getBaseFrame();

List<MD5Hierarchy.MD5HierarchyData>hierarchyList=animModel.getHierarchy().getHi

erarchyDataList();

intnumJoints=joints.size();

float[]frameData=frame.getFrameData();

for(inti=0;i<numJoints;i++){

MD5JointInfo.MD5JointDatajoint=joints.get(i);

Wegetthepositionandorientationofthebaseframeelementassociatedtoeachjoint.

MD5BaseFrame.MD5BaseFrameDatabaseFrameData=baseFrame.getFrameDataList().get

Vector3fposition=baseFrameData.getPosition();

Quaternionforientation=baseFrameData.getOrientation();

Inprinciple,thatinformationshouldbeassignedtothethejoint’spositionandorientation,butitneedstobetransformedaccordingtothejoint’sflag.Ifyourecall,whenthestructureoftheanimationfilewaspresented,eachjointinthehierarchysectiondefinesaflag.Thatflagmodelshowthepositionandorientationinformationshouldbechangedaccordingtotheinformationdefinedineachanimationframe.

Ifthefirstbitofthatflagfieldisequalto1,weshouldchangethexcomponentofthebaseframepositionwiththedatacontainedintheanimationframeweareprocessing.Thatanimationfarmedefinesabugafloatarray,sowhichIelementsshouldwetake.TheanswerisalsointhejointsdefinitionwhichincludesastartIndexattribute.Ifthesecondbitofthegalisequalto1,weshouldchangetheycomponentofthebaseframepositionwiththevalueatstartIndex+1,andsoon.Thenextbitsareforthezposition,andthex,yandzcomponentsoftheorientation.

Animations

intflags=hierarchyList.get(i).getFlags();

intstartIndex=hierarchyList.get(i).getStartIndex();

if((flags&1)>0){

position.x=frameData[startIndex++];

if((flags&2)>0){

position.y=frameData[startIndex++];

if((flags&4)>0){

position.z=frameData[startIndex++];

if((flags&8)>0){

orientation.x=frameData[startIndex++];

if((flags&16)>0){

orientation.y=frameData[startIndex++];

if((flags&32)>0){

orientation.z=frameData[startIndex++];

//UpdateQuaternion'swcomponent

orientation=MD5Utils.calculateQuaternion(orientation.x,orientation.y,orien

tation.z);

Nowwehaveallinformationneededtocalculatethetransformationmatricestogetthefinalpositionforeachjointforthecurrentanimationframe.Butthere’sanotherthingthatwemustconsider,thepositionofeachjointisrelativetoitsparentposition,soweneedtogetthetransformationmatrixassociatedtoeachparentanduseitinordertogetatransformationmatrixthatisinmodelspacecoordinates.

Animations

//Calculatetranslationandrotationmatricesforthisjoint

Matrix4ftranslateMat=newMatrix4f().translate(position);

Matrix4frotationMat=newMatrix4f().rotate(orientation);

Matrix4fjointMat=translateMat.mul(rotationMat);

//Jointpositionisrelativetojoint'sparentindexposition.Useparentmat

//totransformittomodelspace

if(joint.getParentIndex()>-1){

Matrix4fparentMatrix=result.getLocalJointMatrices()[joint.getParentInde

jointMat=newMatrix4f(parentMatrix).mul(jointMat);

result.setMatrix(i,jointMat,invJointMatrices.get(i));

returnresult;

YoucanseethatwecreateaninstanceoftheAnimatedFrameclassthatholdstheinformationthatwillbeuseduringanimation.Thisclassalsousestheinversematrices,wewillseelateronwhythisdonethisway.AnimportantthingtonoteisthatthesetMatrixmethodoftheAnimatedFrameisdefinedlikethis.

publicvoidsetMatrix(intpos,Matrix4flocalJointMatrix,Matrix4finvJointMatrix){

localJointMatrices[pos]=localJointMatrix;

Matrix4fmat=newMatrix4f(localJointMatrix);

mat.mul(invJointMatrix);

jointMatrices[pos]=mat;

ThevariablelocalJointMatrixstoresthetransformationmatrixforthejointthatoccupiestheposition“i”forthecurrentframe.TheinvJointMatrixholdstheinversetransformationmatrixforthejointthatoccupiestheposition“i”forthebindingpose.WestoretheresultofmultiplyingthelocalJointMatrixbytheinvJointMatrix.Thisresultwillbeusedlatertocomputethefinalpositions.Westorealsotheoriginaljointtransformationmatrix,thevariablelocalJointMatrix,sowecanuseittocalculatethisjointchildstransformationmatrices.

Let'sgetbacktotheMD5Loaderclass.ThegenerateMeshmethodalsohaschanged,wecalculatethepositionsofthebindingposeasithasbeenexplainedbefore,butforeachvertexwestoretwoarrays:

Anarraythatholdstheweightbiasassociatedtothisvertex.Anarraythatholdthejointindicesassociatedtothisvertex(throughtheweights).

Animations

Welimitthesizeofthosearraystoavalueof4.TheMeshclasshasalsobeenmodifiedtoreceivethoseparametersandincludeitintheVAOinformationprocessedbytheshaders.Youcancheckthedetailsinthesourcecode,butSolet’srecapwhatwehavedone:

Wearestillloadingthebindingposewiththeirfinalpositionscalculatedasthesumofthejointspositionsandorientationsthroughtheweightsinformation.ThatinformationisloadedintheshadersasVBOsbutit’scomplementedbythebiasoftheweightsassociatedtoeachvertexandtheindicesofthejointsthataffectit.Thisinformationiscommontoalltheanimationframes,sinceit’sdefinedintheMD5definitionfile.Thisisthereasonwhywelimitthesizeofthebiasandjointindicesarrays,theywillbeloadedasVBOsoncewhenthemodelissenttotheGPU.Foreachanimationframewestorethetransformationmatricestobeappliedtoeachjointaccordingtothepositionsandorientationsdefinedinthebaseframe.Wealsohavecalculatedtheinversematricesofthetransformationmatricesassociatedtothejointsthatdefinethebindingpose.Thatis,weknowhowtoundothetransformationsdoneinthebindingpose.Wewillseehowthiswillbeappliedlater.

Nowthatwehaveallthepiecestosolvethepuzzlewejustneedtousethemintheshader.Wefirstneedtomodifytheinputdatatoreceivetheweightsandthejointindices.

#version330

constintMAX_WEIGHTS=4;

constintMAX_JOINTS=150;

layout(location=3)invec4jointWeights;

layout(location=4)inivec4jointIndices;

Wehavedefinedtwoconstants:

MAX_WEIGHTS,definesthemaximumnumberofweightsthatcomeintheweightsVBO

Animations

(ansolothejointindices)MAX_JOINTS,definesthemaximumnumberofjointswearegoingtosupport(moreonthislater).

Thenwedefinetheoutputdataandtheuniforms.

outvec2outTexCoord;

outvec3mvVertexPos;

outvec4mlightviewVertexPos;

uniformmat4jointsMatrix[MAX_JOINTS];

YoucanseethatwehaveanewuniformnamedjointsMatrixwhichisanarrayofmatrices(withamaximumlengthsetbytheMAX_JOINTSconstant).Thatarrayofmatricesholdsthejointmatricescalculatedforallthejointsinthepresentframe,andwascalculatedintheMD5Loaderclasswhenprocessingaframe.Thus,thatarrayholdsthetransformationsthatneedtobeappliedtoajointinthepresentanimationframeandwillserveasthebasisforcalculatingthevertexfinalposition.

WiththenewdataintheVBOsandthisuniformwewilltransformthebindingposeposition.Thisisdoneinthefollowingblock.

vec4initPos=vec4(0,0,0,0);

intcount=0;

for(inti=0;i<MAX_WEIGHTS;i++)

floatweight=jointWeights[i];

if(weight>0){

count++;

intjointIndex=jointIndices[i];

vec4tmpPos=jointsMatrix[jointIndex]*vec4(position,1.0);

initPos+=weight*tmpPos;

if(count==0)

initPos=vec4(position,1.0);

Animations

Firstofall,wegetthebindingposeposition,weiterateovertheweightsassociatedtothisvertexandmodifythepositionusingtheweightsandthejointmatricesforthisframe(storedinthejointsMatrixuniform)byusingtheindexthatisstoredintheinput.

So,givenavertexposition,wearecalculatingit’sframepositionas

V fp = Wb Jfp × Jt ) × V pos

Where:

WfvpisthevertexfinalpositionWbisthevertexweightJfpisthejointmatrixtransformationmatrixforthisframe

Jt istheinverseofthejointtransformationmatrixforthebindingpose.ThemultiplicationofthismatrixandJfpiswhat'scontainedinthejointsMatrixuniform.V posisthevertexpositioninthebindingposition.

V posiscalcualtedbyusintheJtmatrix,whichisthematrixofthejointtransformationmatrixforthebindingpose.So,attheendwearesomehowundoingthemodificicationsofthebindingposetoapplythetransformationsforthisframe.Thisisthereasonwhyweneedtheinversebindingposematrix.

Theshadersupportsverticeswithvariablenumberofweights,uptoamaximumof4,andalsosupportstherenderingofnonanimateditems.Inthiscase,theweightswillbeequalto0andwewillgettheoriginalposition.

i=0∑

MAXWEIGTHS

i ( i i−1

Animations

Therestoftheshaderstaysmoreorlessthesame,wejustusetheupdatedpositiona

ndpassthecorrectvaluestobeusedbythefragmentshader.

vec4mvPos=modelViewMatrix*initPos;

mlightviewVertexPos=orthoProjectionMatrix*modelLightViewMatrix*vec4(position

,1.0);

So,inordertotesttheanimationwejustneedtopassthejointsMatrixtotheshader.SincethisinformationisstoredonlyininstancesoftheAnimGameItemclass,thecodeisverysimple.IntheloopthatrenderstheMeshes,weaddthisfragment.

if(gameIteminstanceofAnimGameItem){

AnimGameItemanimGameItem=(AnimGameItem)gameItem;

AnimatedFrameframe=animGameItem.getCurrentFrame();

sceneShaderProgram.setUniform("jointsMatrix",frame.getJointMatrices());

Ofcourse,yowillneedtocreatetheuniformbeforeusingit,youcancheckthesourcecodeforthat.Ifyouruntheexampleyouwillbeabletoseehowthemodelanimatesbypressingthespacebar(eachtimethekeyispressedanewframeissetandthejointsMatrixuniformchanges).

Youwillseesomethinglikethis.

Animations

Althoughtheanimationissmooth,thesamplepresentssomeproblems.Firstofall,lightisnotcorrectlyappliedandtheshadowrepresentsthebindingposebutnotthecurrentframe.Wewillsolvealltheseproblemsnow.

CorrectinganimationissuesThefirstissuethatwilladdressisthelightningproblem.Youmayhavealreadynoticedthecase,itsduetothefactthatwearenottransformingnormals.Thus,thenormalsthatareusedinthefragmentshaderaretheonesthatcorrespondtothebindingpose.Weneedtotransformtheminthesamewayasthepositions.

Thisissueiseasytosolve,wejustneedtoincludethenormalsintheloopthatiteratesovertheweightsinthevertexshader.

Animations

vec4initNormal=vec4(0,0,0,0);

intcount=0;

if(weight>0){

count++;

vec4tmpNormal=jointsMatrix[jointIndex]*vec4(vertexNormal,0.0);

initNormal+=weight*tmpNormal;

if(count==0)

initNormal=vec4(vertexNormal,0.0);

Thenwejustcalculatetheoutputvertexnormalasalways:

mvVertexNormal=normalize(modelViewMatrix*initNormal).xyz;

Thenextissueistheshadowproblem.Ifyourecallfromtheshadowschapter,weareusingshadowmapstodrawshadows.Wearerenderingthescenefromthelightperspectiveinordertocreateadepthmapthattellsusifapointisinshadowornot.But,asinthecaseofthenormals,wearejustpassingthebindingposecoordinatesandnotchangingthemaccordingtothecurrentframe.Thisisthereasonwhytheshadowdoesnotcorrespondstothecurrentposition.

Thesolutioniseasy,wejustneedtomodifythedepthvertexshadertousethejointsMatrixandtheweightsandjointindicestotransformtheposition.Thisishowthedepthvertexshaderlookslike.

Animations

#version330

constintMAX_WEIGHTS=4;

constintMAX_JOINTS=150;

layout(location=3)invec4jointWeights;

layout(location=4)inivec4jointIndices;

uniformmat4jointsMatrix[MAX_JOINTS];

voidmain()

intcount=0;

if(weight>0){

count++;

if(count==0)

gl_Position=orthoProjectionMatrix*modelLightViewMatrix*initPos;

YouneedtomodifytheRendererclasstosetupthenewuniformsforthisshader,andthefinalresultwillbemuchbetter.Thelightwillbeappliedcorrectlyandtheshadowwillchangeforeachanimationframeasshowninthenextfigure.

Animations

Andthat'sall,youhavenowaworkingexamplethatanimatesMD5models.Thesourcecodecanstillbeimprovedandyoucanmodifythematricesthatareloadedineachrendercycletointerpolatebetweeenframespositions.Youcancheckthesourcesusedforthischaptertoseehowthiscanbedone.

Animations

Particles

ThebasicsInthischapterwewilladdparticleeffectstothegameengine.Withthiseffectwewillbeabletosimulaterays,fire,dustandclouds.It’sasimpleeffecttoimplementthatwillimprovethegraphicalaspectofanygame.

Beforewestartit'sworthtomentionthattherearemanywaystoimplementparticleeffectswithdifferent,results.Inthiscasewewillusebillboardparticles.Thistechniqueusesmovingtexturequadstorepresentaparticlewiththepeculiaritythattheyarealwaysalwaysfacingtheobserver,inourcase,thecamera.YoucanalsousebillboardingtechniquetoshowinformationpanelsovergameitemslikeaminiHUDs.

Let’sstartbydefiningwhatisaparticle.Aparticlecandedefinedbythefollowingattributes:

1. Ameshthatrepresentsthequadvertices.2. Atexture.3. Apositionatagiveninstant.4. Ascalefactor.5. Speed.6. Amovementdirection.7. Alifetimeortimetolive.Oncethistimehasexpiredtheparticleceasestoexist.

ThefirstfouritemsarepartoftheGameItemclass,butthelastthreearenot.Thus,wewillcreateanewclassnamedParticlethatextendsaGameIteminstanceandthatisdefinedlikethis.

packageorg.lwjglb.engine.graph.particles;

importorg.lwjglb.engine.items.GameItem;

publicclassParticleextendsGameItem{

privateVector3fspeed;

*Timetoliveforparticleinmilliseconds.

privatelongttl;

Particles

publicParticle(Meshmesh,Vector3fspeed,longttl){

super(mesh);

this.speed=newVector3f(speed);

this.ttl=ttl;

publicParticle(ParticlebaseParticle){

super(baseParticle.getMesh());

Vector3faux=baseParticle.getPosition();

setPosition(aux.x,aux.y,aux.z);

aux=baseParticle.getRotation();

setRotation(aux.x,aux.y,aux.z);

setScale(baseParticle.getScale());

this.speed=newVector3f(baseParticle.speed);

this.ttl=baseParticle.geTtl();

publicVector3fgetSpeed(){

returnspeed;

publicvoidsetSpeed(Vector3fspeed){

this.speed=speed;

publiclonggeTtl(){

returnttl;

publicvoidsetTtl(longttl){

this.ttl=ttl;

*UpdatestheParticle'sTTL

*@paramelapsedTimeElapsedTimeinmilliseconds

*@returnTheParticle'sTTL

publiclongupdateTtl(longelapsedTime){

this.ttl-=elapsedTime;

returnthis.ttl;

Asyoucanseefromthecodeabove,particle'sspeedandmovementdirectioncanbeexpressedasasinglevector.Thedirectionofthatvectormodelsthemovementdirectionanditsmodulethespeed.TheParticleTimeToLive(TTL)ismodelledasmillisecondscounterthatwillbedecreasedwheneverthegamestateisupdated.Theclasshasalsoacopyconstructor,thatis,aconstructorthattakesaninstanceofanotherParticletomakeacopy.

Particles

Now,weneedtocreateaparticlegeneratororparticleemitter,thatis,aclassthatgeneratestheparticlesdynamically,controlstheirlifecycleandupdatestheirpositionaccordingtoaspecificmodel.Wecancreatemanyimplementationsthatvaryinhowparticlesandcreatedandhowtheirpositionsareupdated(forinstance,takingintoconsiderationthegravityornot).So,inordertokeepourgameenginegeneric,wewillcreateaninterfacethatalltheParticleemittersmustimplement.Thisinterface,namedIParticleEmitter,isdefinedlikethis:

publicinterfaceIParticleEmitter{

voidcleanup();

ParticlegetBaseParticle();

List<GameItem>getParticles();

TheIParticleEmitterinterfacehasamethodtocleanupresources,namedcleanup,andamethodtogetthelistofParticles,namedgetParticles.ItalsoasamethodnamedgetBaseParticle,butWhat’sthismethodfor?Aparticleemitterwillcreatemanyparticlesdynamically.Wheneveraparticleexpires,newoneswillbecreated.Thatparticlerenewalcyclewilluseabaseparticle,likeapattern,tocreatenewinstances.Thisiswhatthisbaseparticleisusedfor,ThisisalsothereasonwhytheParticleclassdefinesacopyconstructor.

InthegameenginecodewewillreferonlytotheIParticleEmitterinterfacesothebasecodewillnotbedependentonthespecificimplementations.Neverthelesswecancreateaimplementationthatsimulatesaflowofparticlesthatarenotaffectedbygravity.ThisimplementationcanbeusedtosimulateraysorfireandisnamedFlowParticleEmitter.

Thebehaviourofthisclasscanbetunedwiththefollowingattributes:

Amaximumnumberofparticlesthatcanbealiveatatime.Aminimumperiodtocreateparticles.Particleswillbecreatedonebyonewithaminimumperiodtoavoidcreatingparticlesinbursts.Asetofrangestorandomizeparticlesspeedandstartingposition.Newparticleswillusebaseparticlepositionandspeedwhichcanberandomizedwithvaluesbetweenthoserangestospreadthebeam.

Theimplementationofthisclassisasfollows:

Particles

importjava.util.ArrayList;

importjava.util.Iterator;

publicclassFlowParticleEmitterimplementsIParticleEmitter{

privateintmaxParticles;

privatebooleanactive;

privatefinalList<GameItem>particles;

privatefinalParticlebaseParticle;

privatelongcreationPeriodMillis;

privatelonglastCreationTime;

privatefloatspeedRndRange;

privatefloatpositionRndRange;

privatefloatscaleRndRange;

publicFlowParticleEmitter(ParticlebaseParticle,intmaxParticles,longcreationP

eriodMillis){

particles=newArrayList<>();

this.baseParticle=baseParticle;

this.maxParticles=maxParticles;

this.active=false;

this.lastCreationTime=0;

this.creationPeriodMillis=creationPeriodMillis;

@Override

publicParticlegetBaseParticle(){

returnbaseParticle;

publiclonggetCreationPeriodMillis(){

returncreationPeriodMillis;

publicintgetMaxParticles(){

returnmaxParticles;

@Override

Particles

publicList<GameItem>getParticles(){

returnparticles;

publicfloatgetPositionRndRange(){

returnpositionRndRange;

publicfloatgetScaleRndRange(){

returnscaleRndRange;

publicfloatgetSpeedRndRange(){

returnspeedRndRange;

publicvoidsetCreationPeriodMillis(longcreationPeriodMillis){

this.creationPeriodMillis=creationPeriodMillis;

publicvoidsetMaxParticles(intmaxParticles){

this.maxParticles=maxParticles;

publicvoidsetPositionRndRange(floatpositionRndRange){

this.positionRndRange=positionRndRange;

publicvoidsetScaleRndRange(floatscaleRndRange){

this.scaleRndRange=scaleRndRange;

publicbooleanisActive(){

returnactive;

publicvoidsetActive(booleanactive){

this.active=active;

publicvoidsetSpeedRndRange(floatspeedRndRange){

this.speedRndRange=speedRndRange;

publicvoidupdate(longellapsedTime){

longnow=System.currentTimeMillis();

if(lastCreationTime==0){

lastCreationTime=now;

Iterator<?extendsGameItem>it=particles.iterator();

while(it.hasNext()){

Particleparticle=(Particle)it.next();

if(particle.updateTtl(ellapsedTime)<0){

Particles

it.remove();

}else{

updatePosition(particle,ellapsedTime);

intlength=this.getParticles().size();

if(now-lastCreationTime>=this.creationPeriodMillis&&length<maxParticl

createParticle();

this.lastCreationTime=now;

privatevoidcreateParticle(){

Particleparticle=newParticle(this.getBaseParticle());

//Addalittlebitofrandomnessoftheparrticle

floatsign=Math.random()>0.5d?-1.0f:1.0f;

floatspeedInc=sign*(float)Math.random()*this.speedRndRange;

floatposInc=sign*(float)Math.random()*this.positionRndRange;

floatscaleInc=sign*(float)Math.random()*this.scaleRndRange;

particle.getPosition().add(posInc,posInc,posInc);

particle.getSpeed().add(speedInc,speedInc,speedInc);

particle.setScale(particle.getScale()+scaleInc);

particles.add(particle);

*Updatesaparticleposition

*@paramparticleTheparticletoupdate

*@paramelapsedTimeElapsedtimeinmilliseconds

publicvoidupdatePosition(Particleparticle,longelapsedTime){

Vector3fspeed=particle.getSpeed();

floatdelta=elapsedTime/1000.0f;

floatdx=speed.x*delta;

floatdy=speed.y*delta;

floatdz=speed.z*delta;

Vector3fpos=particle.getPosition();

particle.setPosition(pos.x+dx,pos.y+dy,pos.z+dz);

@Override

for(GameItemparticle:getParticles()){

particle.cleanup();

Nowwecanextendtheinformationthat’scontainedintheSceneclasstoincludeanarrayofParticleEmitterinstances.

Particles

//Importshere

publicclassScene{

//Moreattributeshere

privateIParticleEmitter[]particleEmitters;

Atthisstagewecanstartrenderingtheparticles.Particleswillnotbeaffectedbylightsandwillnotcastanyshadow.Theywillnothaveanyskeletalanimation,soitmakessensetohavespecificshaderstorenderthem.Theshaderswillbeverysimple,theywilljustrendertheverticesusingtheprojectionandmodelviewmatricesanduseatexturetosetthecolours.

Thevertexshaderisdefinedlikethis.

#version330

outvec2outTexCoord;

voidmain()

Thefragmentshaderisdefinedlikethis:

Particles

#version330

invec2outTexCoord;

invec3mvPos;

outvec4fragColor;

voidmain()

Asyoucanseetheyareverysimple,theyresemblethepairofshadersusedinthefirstchapters.Now,asinotherchapters,weneedtosetupandusethoseshadersintheRendererclass.TheshaderssetupwillbedoneinamethodnamedsetupParticlesShaderwhichisdefinedlikethis:

privatevoidsetupParticlesShader()throwsException{

particlesShaderProgram=newShaderProgram();

particlesShaderProgram.createVertexShader(Utils.loadResource("/shaders/particles_v

ertex.vs"));

particlesShaderProgram.createFragmentShader(Utils.loadResource("/shaders/particles

_fragment.fs"));

particlesShaderProgram.link();

particlesShaderProgram.createUniform("projectionMatrix");

particlesShaderProgram.createUniform("modelViewMatrix");

particlesShaderProgram.createUniform("texture_sampler");

AndnowwecancreatetherendermethodnamedrenderParticlesintheRendererclasswhichisdefinedlikethis:

Particles

privatevoidrenderParticles(Windowwindow,Cameracamera,Scenescene){

particlesShaderProgram.bind();

particlesShaderProgram.setUniform("texture_sampler",0);

Matrix4fprojectionMatrix=transformation.getProjectionMatrix();

particlesShaderProgram.setUniform("projectionMatrix",projectionMatrix);

Matrix4fviewMatrix=transformation.getViewMatrix();

IParticleEmitter[]emitters=scene.getParticleEmitters();

intnumEmitters=emitters!=null?emitters.length:0;

for(inti=0;i<numEmitters;i++){

IParticleEmitteremitter=emitters[i];

Meshmesh=emitter.getBaseParticle().getMesh();

mesh.renderList((emitter.getParticles()),(GameItemgameItem)->{

Matrix4fmodelViewMatrix=transformation.buildModelViewMatrix(gameItem,v

iewMatrix);

particlesShaderProgram.setUniform("modelViewMatrix",modelViewMatrix);

particlesShaderProgram.unbind();

Thefragmentaboveshouldbeselfexplanatoryifyoumanagedtogettothispoint,itjustrenderseachparticlesettinguptherequireduniforms.Wehavenowcreatedallthemethodsweneedtotesttheimplementationoftheparticleeffect.WejustneedtomodifytheDummyGameclasswecansetupaparticleemitterandthecharacteristicsofthebaseparticle.

Vector3fparticleSpeed=newVector3f(0,1,0);

particleSpeed.mul(2.5f);

longttl=4000;

intmaxParticles=200;

longcreationPeriodMillis=300;

floatrange=0.2f;

floatscale=0.5f;

MeshpartMesh=OBJLoader.loadMesh("/models/particle.obj");

Texturetexture=newTexture("/textures/particle_tmp.png");

MaterialpartMaterial=newMaterial(texture,reflectance);

partMesh.setMaterial(partMaterial);

Particleparticle=newParticle(partMesh,particleSpeed,ttl);

particle.setScale(scale);

particleEmitter=newFlowParticleEmitter(particle,maxParticles,creationPeriodMillis

particleEmitter.setActive(true);

particleEmitter.setPositionRndRange(range);

particleEmitter.setSpeedRndRange(range);

this.scene.setParticleEmitters(newFlowParticleEmitter[]{particleEmitter});

Particles

Weareusingaplainfilledcircleastheparticle’stexturebynow,tobetterunderstandwhat’shappening.Ifyouexecuteityouwillseesomethinglikethis.

Whysomeparticlesseemtobecutoff?Whythetransparentbackgrounddoesnotsolvethis?Thereasonforthatisdepthtesting.Somefragmentsoftheparticlesgetdiscardedbecausetheyhaveadepthbuffervaluehigherthanthecurrentvalueofthedepthbufferforthatzone.Wecansolvethisbyorderingtheparticledrawingsdependingintheirdistancetothecameraorwecanjustdisablethedepthwriting.

Beforewedrawtheparticleswejustneedtoinsertthisline:

glDepthMask(false);

Andwhenwearedonewithrenderingwerestorethepreviousvalue:

glDepthMask(true);

Thenwewillgetsomethinglikethis.

Particles

Ok,problemsolved.Nevertheless,westillwantanothereffecttobeapplied,wewouldwantthatcoloursgetblendedsocolourswillbeaddedtocreatebettereffects.Thisisachievedwithbyaddingthislinebeforerenderingtosetupadditiveblending.

glBlendFunc(GL_SRC_ALPHA,GL_ONE);

Asinthedepthcase,afterwehaverenderedalltheparticleswerestoretheblendingfunctionto:

Nowwegetsomethinglikethis.

Particles

Butwehavenotfinishedyet.Ifyouhavemovedthecameraoverthebluesquarelookingdownyoumayhavegotsomethinglikethis.

Theparticlesdonotlookverygood,theyshouldlookroundbuttheyresembleasheetofpaper.Atthispointsiswhereweshouldbeapplyingthebillboardtechnique.Thequadthatisusedtorendertheparticleshouldalwaysbefacingthecamera,totallyperpendiculartoit

Particles

asifittherewasnorotationatall.Thecameramatrixappliestranslationandrotationtoeveryobjectinthescene,wewanttoskiptherotationtobeapplied.

Warning:Mathsahead,youcanskipitifyoudon'tfeelcomfortablewiththis.Let’sreviewthatviewmatrixonceagain.Thatmatrixcanberepresentedlikethis(withoutanyscaleappliedtoit).

Theredelementsrepresentthecamerarotationwhiletheblueonesrepresentthetranslation.Weneedtocanceltheeffectoftheupperleft3x3matrixcontainedintheviewmatrixsoitgetstosomethinglikethis.

So,wehavea3x3matrix,theupperleftredfragment,let'snameitM andwewantittotransformittotheidentifymatrix:I .Anymatrixmultipliedbyitsinversewillgivetheidentify

matrix:M ×M = I .Sowejustneedtogettheupperleft3x3matrixfromtheviewmatrix,andmultiplyitbyitsinverse,butwecanevenoptimizethis.Arotationmatrixhasaninterestingcharacteristic,itsinversecoincideswithitstransposematrix.Thatis:

M ×M =M ×M = I.Andatransposematrixismuchmoreeasiertocalculatethantheinverse.Thetransposeofamatrixislikeifweflipit,wechangerowspercolumns.

Ok,let'ssummarize.Wehavethistransformation:V ×M ,whereV istheviewmatrixandM isthemodelmatrix.Wecanexpressthatexpressionlikethis:

Wewanttocanceltherotationoftheviewmatrix,togetsomethinglikethis:

⎣⎢⎢⎡r00r01r020

r10r11r120

r20r21r220

1 ⎦⎥⎥⎤

⎣⎢⎢⎡1000

1 ⎦⎥⎥⎤

r r−1

⎣⎡r00r01r02

r10r11r12

r20r21r22⎦⎤T

⎣⎡r00r10r20

r01r11r21

r02r12r22⎦⎤

⎣⎢⎢⎡v00v01v02v03

v10v11v12v13

v20v21v22v23

v30v31v32v33⎦⎥⎥⎤

⎣⎢⎢⎡m00m01m02m03

m10m11m12m13

m20m21m22m23

m30m31m32m33⎦

⎥⎥⎤

⎣⎢⎢⎡100

mv30mv31mv32mv33⎦

⎥⎥⎤

Particles

Sowejustneedtosettheupperleft3x3matrixforthemodelmatrixasthetransposematrixofthe3x3upperpartoftheviewmatrix:

But,afterdoingthis,wehaveremovedthescalingfactor,indeedwhatwedoreallywhanttoachieveissomethinglikethis:

Wheresx,syandszarethescalingfactor.Thus,afterwehavesetsettheupperleft3x3matrixforthemodelmatrixasthetransposematrixoftheviewmatrix,weneedtoapplyscalingagain.

Andthat'sall,wejustneedtochangethisintherenderParticlesMethodlikethis:

for(inti=0;i<numEmitters;i++){

IParticleEmitteremitter=emitters[i];

Meshmesh=emitter.getBaseParticle().getMesh();

Matrix4fmodelMatrix=transformation.buildModelMatrix(gameItem);

viewMatrix.transpose3x3(modelMatrix);

Matrix4fmodelViewMatrix=transformation.buildModelViewMatrix(modelMa

trix,viewMatrix);

modelViewMatrix.scale(gameItem.getScale());

particlesShaderProgram.setUniform("modelViewMatrix",modelViewMatrix);

WealsohaveaddedanothermethodtotheTransformationclasstoconstructamodelviewmatrixusingtwomatricesinsteadofaGameItemandtheviewmatrix.

Withthatchange,whenwelooktheparticlesfromabovewegetsomethinglikethis.

⎣ ⎦

⎣⎢⎢⎡v00v01v02v03

v10v11v12v13

v20v21v22v23

v30v31v32v33⎦⎥⎥⎤

⎣⎢⎢⎡v00v10v20m03

v01v11v21m13

v02v12v22m23

m30m31m32m33⎦

⎥⎥⎤

⎣⎢⎢⎡

mv30mv31mv32mv33⎦

⎥⎥⎤

Particles

Nowwehaveeverythingweneedtocreateamorerealisticparticleeffectsolet'schangethetexturetosomethingmoreelaborated.Wewillusethisimage(itwascreatedwithGIMPwiththelightsandshadowsfilters).

Withthistexture,wewillgetsomethinglikethis.

Particles

Muchbetter!Youmaynoticethatweneedtoadjustthescale,sinceparticlesarenowalwaysfacingthecamerathedisplayedareaisalwaysthemaximum.

Finally,anotherconclusion,togetperfectresultswhichcanbeusedinanysceneyouwillneedtoimplementparticleorderingandactivatedepthbuffer.Inanycase,youhavehereasampletoincludethiseffectinyourgames.

TextureAtlasNowthatwehavesetthebasicinfrastructureforparticleeffectwecanaddsomeanimationeffectstoit.Inordertoachievethat,wearegoingtosupporttextureatlas.Atextureatlasisalargeimagethatcontainsallthetexturesthatwillbeused.Withatextureatlasweneedonlytoloadalargeimageandthenwhiledrawingthegameitemsweselecttheportionsofthatimagetobeusedasourtexture.Thistechniquecanbeappliedforinstancewhenwewanttorepresentthesamemodelmanytimeswithdifferenttextures(thinkforinstanceabouttrees,orrocks).Insteadofhavingmanytextureinstancesandswitchingbetweenthem(rememberthatswitchingstatesarealwaysslow)wecanusethesametextureatlasandjustselecttheappropriatecoordinates.

Inthiscase,wearegoingtousetexturecoordinatestoanimateparticles.Wewilliterateoverdifferenttexturestomodelaparticleanimation.Allthosetextureswillbegroupedintoatextureatlaswhichlookslikethis.

Particles

Thetextureatlascanbedividedintoquadtiles.Wewillassignatilepositiontoaparticleandwillchangeitovertimetorepresentanimation.Solet’sgetonit.ThefirstthingthatwearegoingtodoismodifyingtheTextureclasstospecifythenumberofrowsandcolumnsthatatextureatlascanhave.

//..Importshera

publicclassTexture{

privateintnumRows=1;

privateintnumCols=1;

//Morecodehere

publicTexture(StringfileName,intnumCols,intnumRows)throwsException{

this(fileName);

this.numCols=numCols;

this.numRows=numRows;

Particles

Thedefaultcaseistohaveatexturewithanumberofcolumnsandrowsequalto1,thatis,thetextureswehavedealingwith.Wealsoaddanotherconstructortobeabletospecifytherowsandcolumns.

ThenweneedtokeeptrackthepositioninthetextureatlasforaGameItem,sowejustaddanotherattributetothatclasswithadefaultvalueequalto0.

privateinttextPos;

ThenwewillmodifytheParticleclasstobeabletoiterateautomaticallythroughatextureatlas.

publicclassParticleextendsGameItem{

privatelongupdateTextureMillis;

privatelongcurrentAnimTimeMillis;

TheupdateTextureMillisattributemodelstheperiodoftime(inmilliseconds)tomovetothenextpositioninthetextureatlas.Thelowestthevaluethefastesttheparticlewillrolloverthetextures.ThecurrentAnimTimeMillisattributejustkeepstrackofthetimethattheparticlehasmaintainedatextureposition.

Thus,weneedtomodifytheParticleclassconstructortosetupthosevalues.Alsowecalculatethenumberoftilesofthetextureatlas,whichismodelledbytheattributeanimFrames.

Particles

publicParticle(Meshmesh,Vector3fspeed,longttl,longupdateTextureMillis){

super(mesh);

this.speed=newVector3f(speed);

this.ttl=ttl;

this.updateTextureMills=updateTextureMills;

this.currentAnimTimeMillis=0;

Texturetexture=this.getMesh().getMaterial().getTexture();

this.animFrames=texture.getNumCols()*texture.getNumRows();

Now,wejustneedtomodifythemethodthatchecksiftheparticlehasexpiredtocheckalsoifweneedtoupdatethetextureposition.

publiclongupdateTtl(longelapsedTime){

this.ttl-=elapsedTime;

this.currentAnimTimeMillis+=elapsedTime;

if(this.currentAnimTimeMillis>=this.getUpdateTextureMillis()&&this.animFrame

this.currentAnimTimeMillis=0;

intpos=this.getTextPos();

pos++;

if(pos<this.animFrames){

this.setTextPos(pos);

}else{

this.setTextPos(0);

returnthis.ttl;

Besidesthat,wealsohavemodifiedtheFlowRangeEmitterclasstoaddsomerandomnesstotheperiodoftimewhenweshouldchangetheaparticle’stextureposition.Youcancheckitinthesourcecode.

Nowwecanusethatinformationtosetupappropriatetexturecoordinates.Wewilldothisinthevertexfragmentsinceitoutputsthosevaluestobeusedinthefragmentshader.Thenewversionofthatshaderisdefinedlikethis.

Particles

#version330

outvec2outTexCoord;

uniformfloattexXOffset;

uniformfloattexYOffset;

uniformintnumCols;

uniformintnumRows;

voidmain()

//Supportfortextureatlas,updatetexturecoordinates

floatx=(texCoord.x/numCols+texXOffset);

floaty=(texCoord.y/numRows+texYOffset);

outTexCoord=vec2(x,y);

Asyoucanseewehavenowthreenewuniforms.TheuniformsnumColsandnumRowsjustcontainthenumberofcolumnsandrowsofthetextureatlas.Inordertocalculatethetexturecoordinates,wefirstmustscaledowntheseparameters.Eachtilewillhaveawidthwhichisequalto1/numColsandaheightwhichisequalto1/numRowsasshowninthenextfigure.

Particles

Thenwejustneedtoapplyandoffsetdependingontherowandcolumn,thisiswhatismodelledbythetexXOffsetandtexYOffsetuniforms.

WewillcalculatetheseoffsetsintheRendererclassasshowninthenextfragment.Wecalculatetherowandcolumnthateachparticleisinaccordingtoitspositionandcalculatetheoffsetaccordinglyasamultipleoftile’swidthandheight.

intcol=gameItem.getTextPos()%text.getNumCols();

introw=gameItem.getTextPos()/text.getNumCols();

floattextXOffset=(float)col/text.getNumCols();

floattextYOffset=(float)row/text.getNumRows();

particlesShaderProgram.setUniform("texXOffset",textXOffset);

particlesShaderProgram.setUniform("texYOffset",textYOffset);

Notethatifyouonlyneedtosupportperfectlysquaretextureatlas,youwillonlyneedtwouniforms.Thefinalresultlookslikethis.

Particles

Nowwehaveanimatedparticlesworking.Inthenextchapterwewilllearnhowtooptimizetherenderingprocess.Wearerenderingmultipleelementsthathavethesamemeshandweareperformingadrawingcallforeachofthem.Inthenextchapterwewilllearnhowtodoitinasinglecall.Thattechniqueisusefulforparticlesbutalsoforrenderingsceneswheremultipleelementssharethesamemodelbutareplacedindifferentlocationsorhavedifferenttextures.

Particles

InstancedRendering

LotsofInstancesWhendrawinga3Dsceneisfrequenttohavemanymodelsrepresentedbythesamemeshbutwithdifferenttransformations.Inthiscase,althoughtheymaybesimpleobjectswithjustafewtriangles,performancecansuffer.Thecausebehindthisisthewaywearerenderingthem.

WearebasicallyiteratingthroughallthegameitemsinsidealoopandperformingacalltothefunctionglDrawElements.Asithasbeensaidinpreviouschapters,callstoOpenGLlibraryshouldbeminimized.EachcalltotheglDrawElementsfunctionimposesanoverheadthatisrepeatedagainandagainforeachGameIteminstance.

Whendealingwithlotsofsimilarobjectsitwouldbemoreefficienttorenderallofthemusingasinglecall.Thistechniqueiscalledinstancedrendering.InordertoacomplishthatOpenGLprovidesasetoffunctionsnamedglDrawXXXInstancedtorenderasetofelementsatonce.Inourcase,sincewearedrawingelementswewillusethefunctionnamedglDrawElementsInstanced.ThisfunctionreceivesthesameargumentsastheglDrawElementsplusoneadditionalparameterwhichsetsthenumberofinstancestobedrawn.

ThisisasampleofhowtheglDrawElementsisused.

glDrawElements(GL_TRIANGLES,numVertices,GL_UNSIGNED_INT,0)

Andthisishowtheinstancedversioncanbeused:

glDrawElementsInstanced(GL_TRIANGLES,numVertices,GL_UNSIGNED_INT,0,numInstances);

Butyoumaybewonderingnowhowcanyousetthedifferenttransformationsforeachofthoseinstances.Now,beforewedraweachinstancewepassthedifferenttransformationsandinstancerelateddatausinguniforms.Beforearendercallismadeweneedtosetupthespecificdataforeachitem.Howcanwedothiswhenrenderingallofthematonce?

Whenusinginstancedrendering,inthevertexshaderwecanuseaninputvariablethatholdstheindexoftheinstancethatiscurrentlybeingdrawn.Withthatbuilt-invariablewecan,forinstance,passanarrayofuniformscontainingthetransformationstobeappliedtoeachinstanceanduseasinglerendercall.

InstancedRendering

Theproblemwiththisapproachisthatitstillimposestoomuchoverhead.Inadditiontothat,thenumberofuniformsthatwecanpassislimited.Thus,weneedtoemplyanotherapproach,insteadofusinglistsofuniformswewilluseinstancedarrays.

Ifyourecallfromthefirstchapters,thedataforeachMeshisdefinedbyasetofarraysofdatanamedVBOs.ThedatastoreinthoseVBOsisuniqueperMeshinstance.

WithstandardVBOs,insideashader,wecanaccessthedataassociatedtoeachvertex(itsposition,colour,textue,etc.).Whenevertheshaderisrun,theinputvariablesaresettopointtothespecificdataassociatedtoeachvertex.Withinstancedarrayswecansetupdatathatischangedperinstanceinsteadofpervertex.IfwecombinebothtypeswecanuseregularVBOstostorepervertexinformation(position,texturecoordinates)andVBOsthatcontainperinstancedatasuchasmodelviewmatrices.

ThenextfigureshowsaMeshcomposedbythreepervertexVBOsdefinigthepositions,texturesandnormals.Thefirstindexofeachofthoseelementsistheinstancethatitbelongsto(inbluecolour).Thesecondindexrepresentsthevertexpositioninsideainstance.

TheMeshisalsodefinedbytwoperinstanceVBOs.Oneforthemodelviewmatrixandtheotheroneforthelightviewmatrix.Whenrenderingtheverticesforthefirsinstance(the1X,ones),themodelviewandlightviewmatriceswillbethesame(the1).Whenverticesofthesecondinstancearetoberenderedthesecondmodelviewandlightviewmatriceswillbeused.

InstancedRendering

Thus,whenrenderingthefirstvertexofthefirstinstance,V11,T11andN11wouldbeusedforposition,textureandnormaldataandMV1wouldbeusedasamodelviewmatrix.Whenrenderingthesecondvertexofthesamefirstinstance,V12,T12andN12wouldbeusedforposition,textureandnormaldaraandMV1woulsstillbeusedasamodelviewmatrix.MV2andLV2wouldnotbeuseduntilsecondinstanceisrendered.

InordertodefineperinstancedataweneedtocallthefunctionglVertexAttribDivisorafterdefiningvertexattributes.Thisfunctionreceivestwoparameters:

index:Theindexofthevertexattribute(asissuedintheglVertexAttribPointerfunction).

Divisor:Ifthisvalecontainszero,thedataischangedforeachvertexwhilerendering.Ifitissettoone,thedatachangesonceperinstance.Ifit’ssettotwoitchangeseverytwoinstances,etc.

So,inordertosetdataforainstanceweneedtoperformthiscallaftereveryattributedefinition:

glVertexAttribDivisor(index,1);

Let’sstartchangingourcodebasetosupportinstancedrendering.ThefirststepistocreateanewclassnamedInstancedMeshthatinheritsfromtheMeshclass.TheconstructorofthisclasswillbesimilartothesimilartotheMeshonebutwithanextraparameter,thenumberofinstances.

Intheconstructor,besidesrelyinginsuper’sconstructor,wewillcreatetwonewVBOs,oneforthemodelviewmatrixandanotheroneforthelightviewmatrix.Thecodeforcreatingthemodelviewmatrixispresentedbelow.

InstancedRendering

modelViewVBO=glGenBuffers();

vboIdList.add(modelViewVBO);

this.modelViewBuffer=MemoryUtil.memAllocFloat(numInstances*MATRIX_SIZE_FLOATS);

glBindBuffer(GL_ARRAY_BUFFER,modelViewVBO);

intstart=5;

for(inti=0;i<4;i++){

glVertexAttribPointer(start,4,GL_FLOAT,false,MATRIX_SIZE_BYTES,i*VECTOR4F_S

IZE_BYTES);

glVertexAttribDivisor(start,1);

start++;

ThefirstthingthatwedoiscreateanewVBOandanewFloatBuffertostorethedataonit.Thesizeofthatbufferismeasuredinfloats,soitwillbeequaltothenumberofinstancesmultipliedbythesizeinfloatsofa4x4matrix,whichisequalto16.

OncetheVBOhasbeenbondwestartdefiningtheattributesforit.Youcanseethatthisisdoneinaforloopthatiteratesfourtimes.Eachturnoftheloopdefinesonevectorthematrix.Whynotsimplydefiningasingleattributeforthewholematrix?Thereasonforthatisthatavertexattributecannotcontainmorethanfourfloats.Thus,weneedtosplitthematrixdefinitionintofourpieces.Let’srefreshtheparametersoftheglVertexAttribPointer:

Index:Theindexoftheelementtobedefined.Size:Thenumberofcomponentsforthisattribute.Inthiscaseit’s4,4floats,whichisthemaximumacceptedvalue.Type:Thetypeofdata(floatsinourcase).Normalize:Iffixed-pointdatashouldbenormalizedornot.Stride:Thisisimportanttounderstandhere,thissetsthebyteoffsetsbetweenconsecutiveattributes.Inthiscase,weneedtosetittothewholesizeofamatrixinbytes.Thisactslikeamarkthatpacksthedatasoitcanbechangedbetweenvertexorinstances.Pointer:Theoffsetthatthisattributedefinitionappliesto.Inourcase,weneedtosplitthematrixdefinitionintofourcalls.Eachvectorofthematrixincrementstheoffset.

Afterdefiningthevertexattribute,weneedtocalltheglVertexAttribDivisorusingthesameindex.

Thedefinitionofthelightviewmatrixissimilartothepreviousone,youcancheckitinthesourcecode.ContinuingwiththeInstancedMeshclassdefinitionit’simportanttooverridethemethodsthatenablethevertexattributesbeforerendering(andtheonethatdisablesthemafter).

InstancedRendering

@Override

protectedvoidinitRender(){

super.initRender();

intstart=5;

intnumElements=4*2;

for(inti=0;i<numElements;i++){

glEnableVertexAttribArray(start+i);

@Override

protectedvoidendRender(){

intstart=5;

intnumElements=4*2;

for(inti=0;i<numElements;i++){

glDisableVertexAttribArray(start+i);

super.endRender();

TheInstancedMeshclassdefinesapublicmethod,namedrenderListInstanced,thatrendersalistofgameitems,thismethodsplitsthelistofgameitemsintochunksofsizeequaltothenumberofinstancesusedtocreatetheInstancedMesh.TherealrenderingmethodiscalledrenderChunkInstancedandisdefinedlikethis.

InstancedRendering

privatevoidrenderChunkInstanced(List<GameItem>gameItems,booleandepthMap,Transfor

mationtransformation,Matrix4fviewMatrix,Matrix4flightViewMatrix){

this.modelViewBuffer.clear();

this.modelLightViewBuffer.clear();

inti=0;

Matrix4fmodelMatrix=transformation.buildModelMatrix(gameItem);

if(!depthMap){

Matrix4fmodelViewMatrix=transformation.buildModelViewMatrix(modelMatrix

,viewMatrix);

modelViewMatrix.get(MATRIX_SIZE_FLOATS*i,modelViewBuffer);

Matrix4fmodelLightViewMatrix=transformation.buildModelLightViewMatrix(model

Matrix,lightViewMatrix);

modelLightViewMatrix.get(MATRIX_SIZE_FLOATS*i,this.modelLightViewBuffer);

glBindBuffer(GL_ARRAY_BUFFER,modelViewVBO);

glBufferData(GL_ARRAY_BUFFER,modelViewBuffer,GL_DYNAMIC_DRAW);

glBindBuffer(GL_ARRAY_BUFFER,modelLightViewVBO);

glBufferData(GL_ARRAY_BUFFER,modelLightViewBuffer,GL_DYNAMIC_DRAW);

glDrawElementsInstanced(GL_TRIANGLES,getVertexCount(),GL_UNSIGNED_INT,0,gameIt

ems.size());

Themethodisquitesimple,webasicallyiterateoverthegameitemsandcalculatethemodelviewandlightviewmatrices.Thesematricesaredumpedintotheirrespectivebuffers.ThecontentsofthosebuffersaresenttototheGPUandfinallywerenderallofthemwithasinglecalltotheglDrawElementsInstancedmethod.

Goingbacktotheshaders,weneedtomodifythevertexshadertosupportinstancedrendering.Wewillfirstaddnewinputparametersforthemodelandviewmatricesthatwillbepassedwhenusinginstancedrendering.

layout(location=5)inmat4modelViewInstancedMatrix;

layout(location=9)inmat4modelLightViewInstancedMatrix;

Asyoucansee,themodelviewmatrixstartsatlocation5.Sinceamatrixisdefinedbyasetoffourattributes(eachonecontainingavector),thelightviewmatrixstartsatlocation9.Sincewewanttouseasingleshaderforbothnoninstancedandinstancedrendering,wewillmaintaintheuniformsformodelandlightviewmatrices.Weonlyneedtochangetheirnames.

InstancedRendering

uniformintisInstanced;

uniformmat4modelViewNonInstancedMatrix;

uniformmat4modelLightViewNonInstancedMatrix;

Wehavecreatedanotheruniformtospecifyifweareusinginstancedrenderingornot.Inthecaseweareusinginstancedrenderingthecodeisverysimple,wejustusethematricesfromtheinputparameters.

voidmain()

vec4initNormal=vec4(0,0,0,0);

mat4modelViewMatrix;

mat4lightViewMatrix;

if(isInstanced>0)

modelViewMatrix=modelViewInstancedMatrix;

lightViewMatrix=modelLightViewInstancedMatrix;

initNormal=vec4(vertexNormal,0.0);

Wedon’tsupportanimationsforinstancedrenderingtosimplifytheexample,butthistechniquecanbeperfectlyusedforthis.Finally,theshaderjustsetupappropriatevaluesasusual.

vec4mvPos=modelViewMatrix*initPos;

mvVertexNormal=normalize(modelViewMatrix*initNormal).xyz;

mlightviewVertexPos=orthoProjectionMatrix*lightViewMatrix*initPos;

Ofcourse,theRendererhasbeenmodifiedtosupporttheuniformschangesandtoseparatetherenderingofnoninstancedmeshesfromtheinstancedones.Youcancheckthechangesinthesourcecode.

Inadditiontothat,someoptimizationshavebeenaddedtothesourcecodebytheJOMLauthorKaiBurjack.TheseoptimizationshavebeenappliedtotheTransformationclassandaresummarizedinthefollowinglist:

Removedredundantcallstosetupmatriceswithidentityvalues.

InstancedRendering

Usequaternionsforrotationswhicharemoreefficient.Usespecificmethodsforrotatingandtranslatingmatriceswhichareoptimizedforthoseoperations.

ParticlesrevisitedWiththesupportofinstancedrenderingwecanalsoimprovetheperformancefortheparticlesrendering.Particlesarethebestusecaseforthis.

Inordertoapplyinstancerenderingtoparticleswemustprovidesupportfortextureatlas.ThiscanbeachievedbyaddinganewVBOwithtextureoffsetsforinstancedrendering.Thetextureoffsetscanbemodeledbyasinglevectoroftowfloats,sothere'snoneedtosplitthedefinitionasinthematricescase.

//Textureoffsets

glVertexAttribPointer(start,2,GL_FLOAT,false,INSTANCE_SIZE_BYTES,strideStart);

glVertexAttribDivisor(start,1);

InstancedRendering

But,insteadofaddinganewVBOwewillsetalltheinstanceattributesinsideasingleVBO.Thenextfigureshowstheconcept.WearepackingupalltheattributesinsideasingleVBO.Thevalueswillchangepereachinstance.

InordertouseasingleVBOweneedtomodifytheattributesizeforalltheattributesinsideaninstance.Asyoucanseefromthecodeabove,thedefinitionofthetextureoffsetsusesaconstantnamedINSTANCE_SIZE_BYTES.Thisconstantisequaltothesizeinbytesoftwomatrices(onefortheviewmodelandtheotheroneforthelightviewmodel)plustwofloats(textureoffesets),whichintotalis136.Thestridealsoneedstobemodifiedproperly.

Youcancheckthemodificationsinthesourcecode.

TheRendererclassneedsalsotobemodifiedtouseinstancedrenderingforparticlesandsupporttextureatlasinscenerendering.Inthiscase,there'snosenseinsupportbothtypesofrendering(noninstanceandinstanced),sothemodificationsaresimpler.

Thevertexshaderforparticlesisalsostraightfroward.

#version330

layout(location=5)inmat4modelViewMatrix;

layout(location=13)invec2texOffset;

outvec2outTexCoord;

uniformintnumCols;

uniformintnumRows;

voidmain()

//Supportfortextureatlas,updatetexturecoordinates

floatx=(texCoord.x/numCols+texOffset.x);

floaty=(texCoord.y/numRows+texOffset.y);

outTexCoord=vec2(x,y);}

Theresultsofthischanges,lookexactlythesameaswhenrenderingnoninstancedparticlesbuttheperformanceismuchhigher.AFPScounterhasbeenaddedtothewindowtitle,asanoption.Youcanplaywithinstancedandnoninstancedrenderingtoseetheimprovementsbyyourself.

InstancedRendering

ExtrabonusWithalltheinfrastructurethatwehaverightnow,I'vemodifiedtherenderingcubescodetouseaheightmapasabase,usingalsotextureatlastousedifferenttextures.Italsocombinesparticlesrendering.Itlookslikethis.

InstancedRendering

Pleasekeepinmindthatthere'sstillmuchroomforoptimization,buttheaimofthebookisguidingyouinlearningLWJGLandOpenGLconceptsandtechniques.Thegoalisnottocreateafullblowngameengine(andefinitelynotavoxelengine,whichrequireadifferentapproachandmoreoptimizations).

InstancedRendering

AudioUntilthismomentwehavebeendealingwithgraphics,butanotherkeyaspectofeverygameisaudio.ThiscapabilityisgoingtobeaddressedinthischapterwiththehelpofOpenAL(OpenAudioLibrary).OpenAListheOpenGLcounterpartforaudio,itallowsustoplaysoundsthroughandabstractionlayer.Thatlayerisolatesusfromtheunderlyingcomplexitiesoftheaudiosubsystem.Besidesthat,itallowsusto“render”soundsina3Dscene,wheresoundscanbesetupinspecificlocations,attenuatedwiththedistanceandmodifiedaccordingtotheirvelocity(simulatingDopplereffect)

LWJGLsupportsOpenALwithoutrequiringanyadditionaldownload,it’sjustreadytouse.ButbeforestartcodingweneedtopresentthemainelementsinvolvedwhendealingwithOpenAL,whichare:

Buffers.Sources.Listener.

Buffersstoreaudiodata,thatis,musicorsoundeffects.TheyaresimilartothetexturesintheOpenGLdomain.OpenALexpectsaudiodatatobeinPCM(PulseCodedModulation)format(eitherinmonoorinstereo),sowecannotjustdumpMP3orOGGfileswithoutconvertingthemfirsttoPCM.

Thenextelementaresources,whichrepresentalocationina3Dspace(apoint)thatemitssound.Asourceisassociatedtoabuffer(onlyoneattime)andcanbedefinedbythefollowingattributes:

Aposition,thelocationofthesource(x,yandzcoordinates).Bytheway,OpenALusesarighthandedCartesiancoordinatesystemasOpenGL,soyoucanassume(tosimplifythings)thatyourworldcoordinatesareequivalenttotheonesinthesoundspacecoordinatesystem.Avelocity,whichspecifieshowfastthesourceismoving.ThisisusedtosimulateDopplereffect.Again,whichisusedtomodifytheintensityofthesound(it’slikeanamplifierfactor).

Asourcehasadditionalattibuteswhichwillbeshownlaterwhendescribingthesourcecode.

Andlast,butnoleast,alistenerwhichiswherethegeneratedsoundsaresupposedtobeheard.TheListenerrepresentswerethemicrophoneissetina3Daudioscenetoreceivethesounds.Thereisonlyonelistener.Thus,it’softensaidthataudiorenderingisdoneform

thelistener’sperspective.Alistenersharessometheattributesbutithassomeadditionalonessuchastheorientation.Theorientationrepresentswherethelistenerisfacing.

Soanaudio3Dsceneiscomposedbyasetofsoundsourceswhichemitsoundandalistenerthatreceivesthem.Thefinalperceivedsoundwilldependonthedistanceofthelistenertothedifferentsources,theirrelativespeedandtheselectedpropagationmodels.Sourcescansharebuffersandplaythesamedata.Thefollowingfiguredepictsasample3Dscenewiththedifferentelementtypesinvolved.

So,let'sstartcoding,wewillcreateanewpackageunderthenameorg.lwjglb.engine.soundthatwillhostalltheclassesresponsibleforhandlingaudio.Wewillfirststartwithaclass,namedSoundBufferthatwillrepresentanOpenALbuffer.Afragmentofthedefinitionofthatclassisshownbelow.

packageorg.lwjglb.engine.sound;

//...Someinportshere

publicclassSoundBuffer{

privatefinalintbufferId;

publicSoundBuffer(Stringfile)throwsException{

this.bufferId=alGenBuffers();

try(STBVorbisInfoinfo=STBVorbisInfo.malloc()){

ShortBufferpcm=readVorbis(file,32*1024,info);

//Copytobuffer

alBufferData(buffer,info.channels()==1?AL_FORMAT_MONO16:AL_FORMAT_S

TEREO16,pcm,info.sample_rate());

publicintgetBufferId(){

returnthis.bufferId;

alDeleteBuffers(this.bufferId);

//....

Theconstructoroftheclassexpectsasoundfile(whichmaybeintheclasspathastherestofresources)andcreatesanewbufferfromit.ThefirstthingthatwedoiscreateanOpenALbufferwiththecalltoalGenBuffers.Attheendoursoundbufferwillbeidentifiedbyanintegerwhichislikeapointertothedataitholds.Oncethebufferhasbeencreatedwedumptheaudiodatainit.TheconstructorexpectsafileinOGGformat,soweneedtotransformittoPCMformat.Youcancheckhowthat'sdoneintesourcecode,anyway,thesourcecodehasbeenextractedfromtheLWJGLOpenALtests.

PreviousversionsofLWJGLhadahelperclassnamedWaveDatawhichwasusedtoloadaudiofilesinWAVformat.ThisclassisnolongerpresentinLWJGL3.Nevertheless,youmaygetthesourcecodefromthatclassanduseitinyourgames(maybewithoutrequiringanychanges).

TheSoundBufferclassalsoprovidesacleanupmethodtofreetheresourceswhenwearedonewithit.

Let'scontinuebymodellinganOpenAl,whichwillbeimplementedbyclassnamedSounSource.Theclassisdefinedbelow.

importstaticorg.lwjgl.openal.AL10.*;

publicclassSoundSource{

privatefinalintsourceId;

publicSoundSource(booleanloop,booleanrelative){

this.sourceId=alGenSources();

if(loop){

alSourcei(sourceId,AL_LOOPING,AL_TRUE);

if(relative){

alSourcei(sourceId,AL_SOURCE_RELATIVE,AL_TRUE);

publicvoidsetBuffer(intbufferId){

stop();

alSourcei(sourceId,AL_BUFFER,bufferId);

publicvoidsetPosition(Vector3fposition){

alSource3f(sourceId,AL_POSITION,position.x,position.y,position.z);

alSource3f(sourceId,AL_VELOCITY,speed.x,speed.y,speed.z);

publicvoidsetGain(floatgain){

alSourcef(sourceId,AL_GAIN,gain);

publicvoidsetProperty(intparam,floatvalue){

alSourcef(sourceId,param,value);

publicvoidplay(){

alSourcePlay(sourceId);

publicbooleanisPlaying(){

returnalGetSourcei(sourceId,AL_SOURCE_STATE)==AL_PLAYING;

publicvoidpause(){

alSourcePause(sourceId);

publicvoidstop(){

alSourceStop(sourceId);

stop();

alDeleteSources(sourceId);

Thesoundsourceclassprovidessomemethodstosetupitsposition,thegain,andcontrolmethodsforplayingstoppingandpausingit.Keepinmindthatsoundcontrolactionsaremadeoverasource(notoverthebuffer),rememberthatseveralsourcescansharethesamebuffer.AsintheSoundBufferclass,aSoundSourceisidentifiedbyanidentifier,whichisusedineachoperation.Thisclassalsoprovidesacleanupmethodtofreethereservedresources.Butlet’sexaminetheconstructor.ThefirstthingthatwedoistocreatethesourcewiththealGenSourcescall.Then,wesetupsomeinterestingpropertiesusingtheconstructorparameters.

Thefirstparameter,loop,indicatesifthesoundtobeplayedshouldbeinloopmodeornot.Bydefault,whenaplayactionisinvokedoverasourcetheplayingstopswhentheaudiodataisconsumed.Thisisfineforsomesounds,butsomeothers,likebackgroundmusic,needtobeplayedoverandoveragain.Insteadofmanuallycontrollingwhentheaudiohasstoppedandre-launchtheplayprocess,wejustsimplysettheloopingpropertytotrue:“alSourcei(sourceId,AL_LOOPING,AL_TRUE);”.

Theotherparameter,relative,controlsifthepositionofthesourceisrelativetothelistenerornot.Inthiscase,whenwesetthepositionforasource,webasicallyaredefiningthedistance(withavector)tothelistener,notthepositionintheOpenAL3Dscene,nottheworldposition.Thisactivatedbythe“alSourcei(sourceId,AL_SOURCE_RELATIVE,AL_TRUE);”call.But,Whatcanweusethisfor?Thispropertyisinterestingforinstanceforbackgroundsoundsthatshouldbeaffected(attenuated)bythedistancetothelistener.Think,forinstance,inbackgroundmusicorsoundeffectsrelatedtoplayercontrols.Ifwesetthesesourcesasrelative,andsettheirpositionto(0, 0, 0)theywillnotbeattenuated.

Nowit’sturnforthelistenerwhich,surprise,ismodelledbyaclassnamedSoundListener.Here’sthedefinitionforthatclass.

importstaticorg.lwjgl.openal.AL10.*;

publicclassSoundListener{

publicSoundListener(){

this(newVector3f(0,0,0));

publicSoundListener(Vector3fposition){

alListener3f(AL_POSITION,position.x,position.y,position.z);

alListener3f(AL_VELOCITY,0,0,0);

alListener3f(AL_VELOCITY,speed.x,speed.y,speed.z);

publicvoidsetPosition(Vector3fposition){

alListener3f(AL_POSITION,position.x,position.y,position.z);

publicvoidsetOrientation(Vector3fat,Vector3fup){

float[]data=newfloat[6];

data[0]=at.x;

data[1]=at.y;

data[2]=at.z;

data[3]=up.x;

data[4]=up.y;

data[5]=up.z;

alListenerfv(AL_ORIENTATION,data);

Adifferenceyouwillnoticefromthepreviousclassesisthatthere’snoneedtocreatealistener.Therewillalwaysbeonelistener,sononeedtocreateone,it’salreadythereforus.Thus,intheconstructorwejustsimplysetitsinitialposition.Forthesamereasonthere’snoneedforacleanupmethod.Theclasshasmethodsalsoforsettinglistenerpositionandvelocity,asintheSoundSourceclass,butwehaveanextramethodforchangingthelistenerorientation.Let’sreviewwhatorientationisallabout.Listenerorientationisdefinedbytwovectors,“at”vectorand“up”one,whichareshowninthenextfigure.

The“at”vectorbasicallypointswherethelistenerisfacing,bydefaultitscoordinatesare(0, 0,−1).The“up”vectordetermineswhichdirectionisupforthelistenerand,bydefaultitpointsto(0, 1, 0).SothetreecomponentsofeachofthosetwovectorsarewhataresetinthealListenerfvmethodcall.Thismethodisusedtotransferasetoffloats(avariablenumberoffloats)toaproperty,inthiscase,theorientation.

Beforecontinuingit'snecessarytostressoutsomeconceptsinrelationtosourceandlistenerspeeds.TherelativespeedbetweensourcesandlistenerwillcauseOpenALtosimulateDopplereffect.Incaseyoudon’tknow,Dopplereffectiswhatcausesthatamovingobjectthatisgettingclosertoyouseemstoemitinahigherfrequencythanitseemstoemitwheniswalkingaway.Thething,isthat,simplybysettingasourceorlistenervelocity,OpenALwillnotupdatetheirpositionforyou.ItwillusetherelativevelocitytocalculatetheDopplereffect,butthepositionswon’tbemodified.So,ifyouwanttosimulateamovingsourceorlisteneryoumusttakecareofupdatingtheirpositionsinthegameloop.

Nowthatwehavemodelledthekeyelementswecansetthemuptowork,weneedtoinitializeOpenALlibrary,sowewillcreateanewclassnamedSoundManagerthatwillhandlethis.Here’safragmentofthedefinitionofthisclass.

//Importshere

publicclassSoundManager{

privatelongdevice;

privatelongcontext;

privateSoundListenerlistener;

privatefinalList<SoundBuffer>soundBufferList;

privatefinalMap<String,SoundSource>soundSourceMap;

privatefinalMatrix4fcameraMatrix;

publicSoundManager(){

soundBufferList=newArrayList<>();

soundSourceMap=newHashMap<>();

cameraMatrix=newMatrix4f();

this.device=alcOpenDevice((ByteBuffer)null);

if(device==NULL){

thrownewIllegalStateException("FailedtoopenthedefaultOpenALdevice."

ALCCapabilitiesdeviceCaps=ALC.createCapabilities(device);

this.context=alcCreateContext(device,(IntBuffer)null);

if(context==NULL){

thrownewIllegalStateException("FailedtocreateOpenALcontext.");

alcMakeContextCurrent(context);

AL.createCapabilities(deviceCaps);

ThisclassholdsreferencestotheSoundBufferandSoundSourceinstancestotrackandlatercleanupthemproperly.SoundBuffersarestoredinaListbutSoundSourcesarestoredininaMapsotheycanberetrievedbyaname.TheinitmethodinitializestheOpenALsubsystem:

Opensthedefaultdevice.Createthecapabilitiesforthatdevice.Createasoundcontext,liketheOpenGLone,andsetitasthecurrentone.

TheSoundManagerclassalsohasamethodtoupdatethelistenerorientationgivenacameraposition.Inourcase,thelistenerwillbeplacedwheneverthecamerais.So,givencamerapositionandrotationinformation,howdowecalculatethe“at”and“up”vectors?Theanswerisbyusingtheviewmatrixassociatedtothecamera.Weneedtotransformthe“at”(0, 0,−1)and“up”(0, 1, 0)vectorstakingintoconsiderationcamerarotation.LetcameraMatrixbetheviewmatrixassociatedtothecamera.Thecodetoaccomplishthatwouldbe:

Matrix4finvCam=newMatrix4f(cameraMatrix).invert();

Vector3fat=newVector3f(0,0,-1);

invCam.transformDirection(at);

Vector3fup=newVector3f(0,1,0);

invCam.transformDirection(up);

Thefirstthingthatwedoisinvertthecameraviewmatrix.Whywedothis?Thinkaboutitthisway,theviewmatrixtransformsfromworldspacecoordinatestoviewspace.Whatwewantisjusttheopposite,wewanttotransformfromviewspacecoordinates(theviewmatrix)tospacecoordinates,whichiswherethelistenershouldbepositioned.Withmatrices,theoppositeusuallymeanstheinverse.Oncewehavethatmatrixwejusttransformthe“default”“at”and“up”vectorsusingthatmatrixtocalculatethenewdirections.

But,ifyoucheckthesourcecodeyouwillseethattheimplementationisslightlydifferent,whatwedoisthis:

Vector3fat=newVector3f();

cameraMatrix.positiveZ(at).negate();

Vector3fup=newVector3f();

cameraMatrix.positiveY(up);

listener.setOrientation(at,up);

Thecodeaboveisequivalenttothefirstapproach,it’sjustamoreefficientapproach.Itusesafastermethod,availableinJOMLlibrary,thatjustdoesnotneedtocalculatethefullinversematrixbutachievesthesameresults.ThismethodwasprovidedbytheJOMLauthorinaLWJGLforum,soyoucancheckmoredetailsthere.IfyoucheckthesourcecodeyouwillseethattheSoundManagerclasscalculatesitsowncopyoftheviewmatrix.ThisisalreadydoneintheRendererclass.Inordertokeepthecodesimple,andtoavoidrefactoring,I’vepreferredtokeepthisthatway.

Andthat’sall.Wehavealltheinfrastructureweneedinordertoplaysounds.Youcancheckinthesourcecodehowallthepiecesareused.Youcanseehowmusicisplayedandthedifferenteffectssound(ThesefileswereobtainedfromFreesound,propercreditsareina

filenameCREDITS.txt).Ifyougetsomeotherfiles,youmaynoticethatsoundattenuationwithdistanceorlistenerorientationwillnotwork.Pleasecheckthatthefilesareinmono,notinstereo.OpenALcanonlyperformthosecomputationswithmonosounds.

Afinalnote.OpenALalsoallowsyoutochangetheattenuationmodelbyusingthealDistanceModelandpassingthemodelyouwant('``AL11.AL_EXPONENT_DISTANCE,AL_EXPONENT_DISTANCE_CLAMP```,etc.).Youcanplaywiththemandchecktheresults.

3DObjectPicking

CameraSelectionOneofthekeyaspectsofeverygameistheabilitytointeractwiththeenvironment.Thiscapabilityrequirestobeabletoselectobjectsinthe3Dscene.Inthischapterwewillexplorehowthiscanbeachieved.

But,beforewestarttalkingaboutthestepstobeperformedtoselectobjects,weneedawaytorepresentselectedobjects.Thus,thefirstthingthatwemustdo,isaddanotherattributetotheGameItemclass,whichwillallowustotagselectedobjects:

privatebooleanselected;

Then,weneedtobeabletousethatvalueinthesceneshaders.Let’sstartwiththefragmentshader(scene_fragment.fs).Inthiscase,wewillassumethatwewillreceiveaflag,fromthevertexshader,thatwilldetermineifthefragmenttoberenderedbelongstoaselectedobjectornot.

infloatoutSelected;

Then,attheendofthefragmentshader,wewillmodifythefinalfragmentcolour,bysettingthebluecomponentto1ifit’sselected.

if(outSelected>0){

fragColor=vec4(fragColor.x,fragColor.y,1,1);

Then,weneedtobeabletosetthatvalueforeach.Ifyourecallfrompreviouschapterswehavetwoscenarios:

Renderingofnoninstancedmeshes.Renderingofinstancedmeshes.

Inthefirstcase,thedataforeachGameItemispassedthroughuniforms,sowejustneedtoaddanewuniformforthatinthevertexshader.Inthesecondcase,weneedtocreateanewinstancedattribute.Youcanseebellowtheadditionsthatneedtobeintegratedintothevertexshaderforbothcases.

3DObjectpicking

layout(location=14)infloatselectedInstanced;

uniformfloatselectedNonInstanced;

if(isInstanced>0)

outSelected=selectedInstanced;

outSelected=selectedNonInstanced;

Nowthattheinfrastructurehasbeenset-upwejustneedtodefinehowobjectswillbeselected.Beforewecontinueyoumaynotice,ifyoulookatthesourcecode,thattheViewmatrixisnowstoredintheCameraclass.Thisisduetothefactthatwewerrecalculatingtheviewmatrixsinseveralclassesinthesourcecode.Previously,itwasstoredintheTransformationandintheSoundManagerclasses.Inordertocalculateintersectionswewouldneedtocerateanotherreplica.Insteadofthat,wecentralizethatintheCameraclass.Thischangealso,requiresthattheviewmatrixisupdatedinourmaingameloop.

Let’scontinuewiththepickingdiscussion.Inthissample,wewillfollowasimpleapproach,selectionwillbedoneautomaticallyusingthecamera.Theclosestobjecttowherethecameraisfacingwillbeselected.Let’sdiscusshowthiscanbedone.

Thefollowingpicturedepictsthesituationweneedtosolve.

3DObjectpicking

Wehavethecamera,placedinsomecoordinatesinworld-space,facingaspecificdirection.Anyobjectthatintersectswitharaycastfromcamera’spositionfollowingcamera’sforwarddirectionwillbeacandidate.Betweenallthecandidateswejustneedtochosetheclosestone.

Inoursample,gameitemsarecubes,soweneedtocalculatetheintersectionofthecamera’sforwardvectorwithcubes.Itmayseemtobeaveryspecificcase,butindeedisveryfrequent.Inmanygames,thegameitemshaveassociatedwhat’scalledaboundingbox.Aboundingboxisarectanglebox,thatcontainsalltheverticesforthatobject.Thisboundingboxisusedalso,forinstance,forcollisiondetection.Infact,intheanimationchapter,yousawthateachanimationframedefinedaboundingbox,thathelpstosettheboundariesatanygiventime.

So,let’sstartcoding.Wewillcreateanewclassnamed CameraBoxSelectionDetector,whichwillhaveamethodnamedselectGameItem```whichwillreceivealistofgameitemsandareferencetothecamera.Themethodisdefinedlikethis.

publicvoidselectGameItem(GameItem[]gameItems,Cameracamera){

GameItemselectedGameItem=null;

floatclosestDistance=Float.POSITIVE_INFINITY;

dir=camera.getViewMatrix().positiveZ(dir).negate();

gameItem.setSelected(false);

min.set(gameItem.getPosition());

max.set(gameItem.getPosition());

min.add(-gameItem.getScale(),-gameItem.getScale(),-gameItem.getScale());

max.add(gameItem.getScale(),gameItem.getScale(),gameItem.getScale());

if(Intersectionf.intersectRayAab(camera.getPosition(),dir,min,max,nearFar

)&&nearFar.x<closestDistance){

closestDistance=nearFar.x;

selectedGameItem=gameItem;

if(selectedGameItem!=null){

selectedGameItem.setSelected(true);

Themethod,iteratesoverthegameitemstryingtogettheonesthatinteresectwiththeraycastformthecamera.ItfirstdefinesavariablenamedclosestDistance.Thisvariablewillholdtheclosestdistance.Forgameitemsthatintersect,thedistancefromthecameratotheintersectionpointwillbecalculated,Ifit’slowerthanthevaluestoredinclosestDistance,thenthisitemwillbethenewcandidate.

3DObjectpicking

Beforeenteringintotheloop,weneedtogetthedirectionvectorthatpointswherethecameraisfacing.Thisiseasy,justusetheviewmatrixtogetthezdirectiontakingintoconsiderationcamera’srotation.Rememberthatpositivezpointsoutofthescreen,soweneedtheoppositedirectionvector,thisiswhywenegateit.

InthegameloopintersectioncalculationsaredonepereachGameItem.But,howdowedothis?ThisiswherethegloriousJOMLlibrarycomestotherescue.WeareusingJOML’sIntersectionfclass,whichprovidesseveralmethodstocalculateintersectionsin2Dand3D.Specifically,weareusingtheintersectRayAabmethod.

ThismethodimplementsthealgorithmthattestintersectionforAxisAlignedBoxes.Youcancheckthedetails,aspointedoutintheJOMLdocumentation,here.

Themethodtestsifaray,definedbyanoriginandadirection,intersectsabox,definedbyminimumandmaximumcorner.Thisalgorithmisvalid,becauseourcubes,arealignedwiththeaxis,iftheywererotated,thismethodwouldnotwork.Thus,themethodreceivesthefollowingparameters:

Anorigin:Inourcase,thiswillbeourcameraposition.Adirection:Thisiswherethecameraisfacing,theforwardvector.Theminimumcornerofthebox.Inourcase,thecubesarecenteredaroundtheGameItemposition,theminimumcornerwillbethosecoordinatesminusthescale.(Initsoriginalsize,cubeshavealengthof2andasacleof1).Themaximumcorner.Selfexplanatory.Aresultvector.Thiswillcontainthenearandfardistancesoftheintersectionpoints.

Themethodwillreturntrueifthereisanintersection.Iftrue,wechecktheclosesdistanceandupdateitifneeded,andstoreareferenceofthecandidateselectedGameItem.Thenextfigureshowsalltheelementsinvolvedinthismethod.

3DObjectpicking

Oncetheloophasfinished,thecandidateGameItemismarkedasselected.

Andthat’s,all.TheselectGameItemwillbeinvokedintheupdatemethodoftheDummyGameclass,alongwiththeviewmatrixupdate.

//Updateviewmatrix

camera.updateViewMatrix();

//Updatesoundlistenerposition;

soundMgr.updateListenerPosition(camera);

this.selectDetector.selectGameItem(gameItems,camera);

Besidesthat,across-hairhasbeenaddedtotherenderingprocesstocheckthateverythingisworkingproperly.Theresultisshowninthenextfigure.

3DObjectpicking

Obviously,themethodpresentedhereisfarfromoptimalbutitwillgiveyouthebasicstodevelopmoresophisticatedmethodsonyourown.Somepartsofthescenecouldbeeasilydiscarded,likeobjectsbehindthecamera,sincetheyarenotgoingtobeintersected.Besidesthat,youmaywanttoorderyouritemsaccordingtothedistancetothecameratospeedupcalculations.Inadditiontothat,calculationsonlyneedtobedoneifthecamerahasmovedor.rotatedfrompreviousupdate.

MouseSelectionObjectpickingwiththecameraisgreat,butwhatifwewanttobeabletofreelyselectobjectswiththemouse?Inthiscase,wewantthat,whenevertheuserclicksonthescreen,theclosestobjectisautomaticallyselected.

Thewaytoachievethisissimilartothemethoddescribedabove.Inthepreviousmethodwehadthecamerapositionandgeneratedraysfromitusingthe“forward”directionaccordingtocamera’scurrentorientation.Inthiscase,westillneedtocastrays,butthedirectionpointstoapointfarawayfromthecamera,wheretheclickhasbeenmade.Inthiscase,weneedtocalculatethatdirectionvectorusingtheclickcoordinates.

But,howdowepassfroma(x, y)coordinatesinviewportspacetoworldspace?Let’sreviewhowwepassfrommodelspacecoordinatestoviewspace.Thedifferentcoordinatetransformationsthatareappliedinordertoachievethatare:

Wepassfrommodelcoordinatestoworldcoordinatesusingthemodelmatrix.

3DObjectpicking

Wepassfromworldcoordinatestoviewspacecoordinatesusingtheviewmatrix(thatprovidesthecameraeffect)-Wepassfromviewcoordinatestohomogeneousclipspacebyapplyingtheperspectiveprojectionmatrix.FinalscreencoordinatesarecalculateautomaticallybyOpenGLforus.Beforedointthat,itpassestonormalizeddevicespace(bydividingthex, y, zcoordinatesbythewcomponent)andthentox, yscreencoordinates.

Soweneedjusttoperformthetraversetheinevrsepathtogetfromscreencoordinates(x, y),toworldcoordinates.

Thefirststepistotransformfromscreencoordinatestonormalizeddevicespace.The(x, y)coordinatesintheviewportspaceareintherange[0, screenwith][0, screenheight].Theupperleftcornerofthescreenhasavalueof[0, 0].Weneedtotransformthatintocoordinatesintherange[−1, 1].

Themathsaresimple:

x = 2 ⋅ screen /screenwidth− 1

y = 1 − 2 ∗ screen /screenheight

But,howdowecalculatethezcoordinate?Theanswerissimple,wesimplyassignitthe−1value,sothattheraypointstothefarthestvisibledistance(RememberthatinOpenGL,−1pointstothescreen).Nowwehavethecoordinatesinnormaliseddevicespace.

Inordertocontinuewiththetransformationsweneedtoconvertthemtothehomogeneousclipspace.Weneedtohavethewcomponent,thatisusehomogeneouscoordinates.Althoughthisconceptwaspresentedinthepreviouschapters,let’sgetbacktoit.Inorderto

3DObjectpicking

representa3Dpointwejustneedthex, yandzcoordinates,butwearecontinuouslyworkingwithanadditionalcoordinate,thewcomponent.Weneedthisextracomponentinordertousematricestoperformthedifferenttransformations.Sometransformationsdonotneedthatextracomponentbutotherdo.Forinstance,thetranslationmatrixdoesnotworkifweonlyhavex, yandzcomponents.Thus,wehaveaddedthewcomponentandassignedthemavalueof1sowecanworkwith4by4matrices.

Besidesthat,mostoftransformations,ortobemoreprecise,mostofthetransformationmatricesdonotalterthewcomponent.Anexceptiontothisistheprojectionmatrix.Thismatrixchangesthewvaluetobeproportionaltothezcomponent.

Transformingfromhomogeneousclipspacetonormalizeddevicecoordinatesisachievedbydividingthex,yandzcoordinatesbyw.Asthiscomponentisproportionaltothezcomponent,thisimpliesthatdistantobjectsaredrawnsmaller.Inourcaseweneedtodothereverse,weneedtounproject,butsincewhatwearecalculatingit’saraywejustsimplycanignorethatstep,wejustsetthewcomponentto1andleavetherestofthecomponentswiththeiroriginalvalue.

Nowweneedtogobackyoviewspace.Thisiseasy,wejustneedtocalculatetheinverseoftheprojectionmatrixandmultiplyitbyour4componentsvector.Oncewehavedonethat,weneedtotransformthemtoworldspace.Again,wejustneedtousetheviewmatrix,calculateit’sinverseandmultiplyitbyourvector.

Rememberthatweareonlyinterestedindirections,so,inthiscasewesetthewcomponentto0.Alsowecansetthezcomponentagainto−1,sincewewantittopointtowardsthescreen.Oncewehavedonethatandappliedtheinverseviewmatrixwehaveourvectorinworldspace.Wehaveourraycalculatedandcanapplythesamealgorithmasinthecaseofthecamerapicking.

WehavecreatedanewclassnamedMouseBoxSelectionDetectorthatimplementsthesetpsdescribedabove.Besidesthat,wehavemovedtheprojectionmatrixtotheWindowclasssowecanusetheminseveralplacesofthesourcecodeandrefactroedalittlebittheCameraBoxSelectionDetectorsotheMouseBoxSelectionDetectorcaninheitfromitandusethecollisiondetectionmethod.Youcancheckthesourcecodedirectly,sincetheimplemenattionit’sverysimple.

Theresultnowlookslikethis.

3DObjectpicking

Youjustneedtoclickovertheblockwiththemouseleftbuttontoperformtheselection.

Inanycase,ifyoucanconsultthedetailsbehindthestepsexplainedhereinanexcellentarticlewithverydetailedsketechsofthedifferentstepsinvolved.

3DObjectpicking

HUDRevisited-NanoVGInpreviouschaptersweexplainedhowaHUDcanbecreatedrenderingsshapesandtexturesoverthetopofthesceneusinganorthographicprojection.InthischapterwewilllearnhowtousetheNanoVGlibrarytobeabletorenderantialiasedvectorgraphicstoconstructmorecomplexHUDsinaneasyway.

Therearemanyotherlibrariesouttherethatyoucanusetoaccomplishthistask,suchasNiftyGUI,Nuklear,etc.InthischapterwewillfocusonNanovgsinceit’sverysimpletouse,butifyou’relookingfordevelopingcomplexGUIinteractionswithbuttons,menusandwindowsyoushouldprobablylookforNiftyGUI.

ThefirststepinordertostartusingNanoVGisaddingthedependencesinthepom.xmlfile(oneforthedependenciesrequiredatcompiletimeandtheotheroneforthenativesrequiredatruntime).

<artifactId>lwjgl-nanovg</artifactId>

</dependency>

<artifactId>lwjgl-nanovg</artifactId>

<scope>runtime</scope>

</dependency>

BeforewestartusingNanoVGwemustsetupsomethingsintheOpenGLsidesothesamplescanworkcorrectly.Weneedtoenablesupportforstencilbuffertest.Untilnowwehavetalkedaboutcolouranddepthbuffers,butwehavenotmentionedthestencilbuffer.Thisbufferstoresavalue(aninteger)foreverypixelwhichisusedtocontrolwhichpixelsshouldbedrawn.Thisbufferisusedtomaskordiscarddrawingareasaccordingtothevaluesitstores.Itcanbeused,forinstance,tocutoutsomepartsofthesceneinaneasyway.WeenablestencilbuffertestbyaddingthislinetotheWindowclass(afterweenabledepthtesting):

glEnable(GL_STENCIL_TEST);

Hudrevisited-NanoVG

Sinceweareusinganotherbufferwemusttakecarealsoofremovingitsvaluesbeforeeachrendercall.Thus,weneedtomodifytheclearmethodoftheRendererclass:

publicvoidclear(){

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);

Wewillalsoaddanewwindowoptionforactivatingantialiasing.Thus,intheWindowclasswewillenableitbythisway:

if(opts.antialiasing){

glfwWindowHint(GLFW_SAMPLES,4);

NowwearereadytousetheNanoVGlibrary.ThefirsthingthatwewilldoisgetridofftheHUDartefactswehavecreated,thatistheshaderstheIHudinterface,thehudrenderingmethodsintheRendererclass,etc.Yocancheckthisoutinthesourcecode.

Inthiscase,thenewHudclasswilltakecareofitsrendering,sowedonotneedtodelegateittotheRendererclass.Let’startbydefiningthatclass,ItwillhaveaninitmethodthatsetsupthelibraryandtheresourcesneededtobuildtheHUD.Themethodisdefinedlikethis:

this.vg=window.getOptions().antialiasing?nvgCreate(NVG_ANTIALIAS|NVG_STENCIL

_STROKES):nvgCreate(NVG_STENCIL_STROKES);

if(this.vg==NULL){

thrownewException("Couldnotinitnanovg");

fontBuffer=Utils.ioResourceToByteBuffer("/fonts/OpenSans-Bold.ttf",150*1024);

intfont=nvgCreateFontMem(vg,FONT_NAME,fontBuffer,0);

if(font==-1){

thrownewException("Couldnotaddfont");

colour=NVGColor.create();

posx=MemoryUtil.memAllocDouble(1);

posy=MemoryUtil.memAllocDouble(1);

counter=0;

Hudrevisited-NanoVG

ThefirstthingwedoiscreateaNanoVGcontext.InthiscaseweareusinganOpenGL3.0backendsincewearereferringtotheorg.lwjgl.nanovg.NanoVGGL3namespace.IfantialiasingisactivatedwesetuptheflagNVG_ANTIALIAS.

Next,wecreateafontbyusingaTrueTypefontpreviouslyloadedintoaByteBuffer.Weassignitanamesowecanlateronuseitwhilerenderingtext.OneimportantthingaboutthisisthattheByteBufferusedtoloadthefontmustbekeptinmemorywhilethefontisused.Thatis,itcannotbegarbagecollected,otherwiseyouwillgetanicecoredump.Thisiswhyitisstoredasaclassattribute.

Then,wecreateacolourinstanceandsomehelpfulvariablesthatwillbeusedwhilerendering.Thatmethodiscalledinthegameinitmethod,justbeforetherenderedisinitialized:

@Override

hud.init(window);

renderer.init(window);

TheHudclassalsodefinesarendermethod,whichshouldbecalledafterthescenehasbeenrenderedsotheHUDisdrawnontopofit.

@Override

renderer.render(window,camera,scene);

hud.render(window);

TherendermethodoftheHudclassstartslikethis:

nvgBeginFrame(vg,window.getWidth(),window.getHeight(),1);

ThefirstthingthatwemustdoiscallthenvgBeginFrame``method.AlltheNanoVGrenderingoperationsmustbeenclosedbetweenanvgBeginFrameandnvgEndFramecalls.ThenvgBeginFrame```acceptsthefollowingparameters:

TheNanoVGcontext.Thesizeofthewindowtorender(widthanheight).Thepixelratio.IfyouneedtosupportHi-DPIyoucanchangethisvalue.Forthissamplewejustsetitto1.

Hudrevisited-NanoVG

Thenwecreateseveralribbonsthatoccupythewholescreenwith.Thefirstoneisdrawnlikethis:

//Upperribbon

nvgBeginPath(vg);

nvgRect(vg,0,window.getHeight()-100,window.getWidth(),50);

nvgFillColor(vg,rgba(0x23,0xa1,0xf1,200,colour));

nvgFill(vg);

Whilerenderingashape,thefirstmethodthatshallbeinvokedisnvgBeginPath,thatinstructsNanoVGtostartdrawinganewshape.Thenwedefinewhattodraw,arect,thefillcolourandbyinvokingthenvgFillwedrawit.

Youcanchecktherestofthesourcecodetoseehowtherestoftheshapesaredrawn.WhenrenderingtextisnotnecessarytocallnvgBeginPathbeforerenderingit.

Afterwehavefinisheddrawingalltheshapes,wejustcallthenvgEndFrametoendrendering,butthere’soneimportantthingtobedonebeforeleavingthemethod.WemustrestoretheOpenGLstate.NanoVGmodifiesOpenGLstateinordertoperformtheiroperations,ifthestateisnotcorrectlyrestoredyoumayseethatthesceneisnotcorrectlyrenderedoreventhatit'sbeenwipedout.Thus,weneedtorestoretherelevantOpenGLstatusthatweneedforourrendering.ThisisdelegatedintheWindowclass:

//Restorestate

window.restoreState();

Themethodisdefinedlikethis:

publicvoidrestoreState(){

glEnable(GL_STENCIL_TEST);

if(opts.cullFace){

glEnable(GL_CULL_FACE);

glCullFace(GL_BACK);

Andthat’sall(besidessomeadditionalmethodstoclearthingsup),thecodeiscompleted.Whenyouexecutethesampleyouwillgetsomethinglikethis:

Hudrevisited-NanoVG

Optimizations-FrustumCulling(I)Atthismomentweareusingmanydifferentgraphiceffects,suchaslights,particles,etc.Inadditiontothat,wehavelearnedhowtoinstancedrenderingtoreducetheoverheadofdrawingmanysimilarobjects.However,westillhaveplentyofroomforapplyingsimpleoptimizationtechniquesthatwillincreasetheFramesPerSecond(FPS)thatwecanachieve.

YoumayhavewonderedwhyarewedrawingthewholelistofGameItemseveryframeevenifsomeofthemwillnotbevisible(becausetheyarebehindthecameraortoofaraway).YoumayeventhinkthatthisishandledautomaticallyhandledbyOpenGL,andsomewayyouaretrue.OpenGLwilldiscardtherenderingofverticesthatfalloffthevisiblearea.Thiscalledclipping.Theissuewithclippingisthatit’sdonepervertex,afterthevertexshaderhasbeenexecuted.Hence,eventhisoperationsavesresources,wecanbemoreefficientbynottryingtorenderobjectsthatwillnotbevisible.WewouldnotbewastingresourcesbysendingthedatatotheGPUandbyperformingtransformationsforeveryvertexthatispartofthoseobjects.Weneedtoremovetheobjectsthatdoarenotcontainedintotheviewfrustum,thatis,weneedtoperformfrustumculling.

But,firstlet’sreviewwhatistheviewfrustum.Theviewfrustumisavolumethatcontainseveryobjectthatmaybevisibletakingintoconsiderationthecamerapositionandrotationandtheprojectionthatweareusing.Typically,theviewfrustumisarectangularpyramidlikeshowninthenextfigure.

Optimizations

Asyoucansee,theviewfrustumisdefinedbysixplanes,anythingthatliesoutsidetheviewfrustumwillnotberendering.So,frustumcullingistheprocessofremovingobjectsthatareoutsidetheviewfrustum.

Thus,inordertoperformfrustumcullingweneedto:

Calculatefrustumplanesusingthedatacontainedintheviewandprojectionmatrices.

ForeveryGameItem,checkifitscontainedinsidethatviewfrustum,thatis,comatinedbetweenthesizefrustumplanes,andeliminatetheonesthatlieoutsidefromtherenderingprocess.

Solet’sstartbycalculatingthefrustumplanes.Aplane,isdefinedbyapointcontainedinitandavectororthogonaltothatplane,asshowninthenextfigure:

Theequationofaplaneisdefinedlikethis:

Ax+By + Cz +D = 0

Optimizations

Hence,weneedtocalculatethesixplaneequationsforthesixsidesofourviewfrustum.Inordertotothatyoubasicallyhavetwooptions.Youcanperformtediouscalculationsthatwillgetyouthesixplaneequations,thatthis,thefourconstants(A,B,CandD)fromthepreviousequation.TheotheroptionistoletJOMLlibrarytocalculatethisforyou.Inthiscase,wewillchosethelastoption.

Solet’sstartcoding.WewillcreateanewclassnamedFrustumCullingFilterwhichwillperform,asitsnamestates,filteringoperationsaccordingtotheviewfrustum.

publicclassFrustumCullingFilter{

privatestaticfinalintNUM_PLANES=6;

privatefinalMatrix4fprjViewMatrix;

privatefinalVector4f[]frustumPlanes;

publicFrustumCullingFilter(){

prjViewMatrix=newMatrix4f();

frustumPlanes=newVector4f[NUM_PLANES];

for(inti=0;i<NUM_PLANES;i++){

frustumPlanes[i]=newVector4f();

publicvoidupdateFrustum(Matrix4fprojMatrix,Matrix4fviewMatrix){

//Calculateprojectionviewmatrix

prjViewMatrix.set(projMatrix);

prjViewMatrix.mul(viewMatrix);

//Getfrustumplanes

prjViewMatrix.frustumPlane(i,frustumPlanes[i]);

TheFrustumCullingFilterclasswillalsohaveamethodtocalculatetheplaneequationscalledupdateFrustumwhichwillbecalledbeforerendering.Themethodisdefinedlikethis:

//Getfrustumplanes

prjViewMatrix.frustumPlane(i,frustumPlanes[i]);

Optimizations

First,westoreacopyoftheprojectionmatrixandmultiplyitbytheviewmatrixtogettheprojectionviewmatrix.Then,withthattransformationmatrixwejustsimplyneedtoinvokethefrustumPlanemethodforeachofthefrustumplanes.It’simportanttonotethattheseplaneequationsareexpressedinworldcoordinates,soallthecalculationsneedtobedoneinthatspace.

NowthatwehavealltheplanescalculatedwejustneedtocheckiftheGameIteminstancesareinsidethefrustumornot.Howcanwedothis?Let’sfirstexaminehowwecancheckifapointisinsidethefrustum.Wecanachievethatbycalculatingthesigneddistanceofthepointtoeachoftheplanes.Ifthedistanceofthepointtotheplaneispositive,thismeansthatthepointisinfrontoftheplane(accordingtoitsnormal).Ifit’snegative,thismeansthatthepointisbehindtheplane.

Therefore,apointwillbeinsidetheviewfrustumifthedistancetoalltheplanesofthefrustumispositive.Thedistanceofapointtotheplaneisdefinedlikethis:

dist = Ax +By + Cz +D,wherex ,y andz arethecoordinatesofthepoint.

So,apointisbehindtheplaneifAx +By + Cz +D <= 0.

But,wedonothavepoints,wehavecomplexmeshes,wecannotjustuseapointtocheckifanobjectisinsideafrustumornot.YoumaythinkincheckingeveryvertexoftheGameItemandseeifit’sinsidethefrustumornot.Ifanyofthepointsisinside,theGameItemshouldbedrawn.ButthiswhatOpenGLdoesinfactwhenclipping,thisiswhatwearetyingtoavoid.Rememberthatfrustumcullingbenefitswillbemorenoticeablethemorecomplexthemeshestoberenderedare.

WeneedtoenclsoeeveyGameItemintoasimplevolumethatiseasytocheck.Herewehavebasicallytwooptions:

0 0 0 0 0 0

Optimizations

Boundingboxes.

BoundingSpheres.

Inthiscase,wewillusespheres,sinceisthemostsimpleapproach.WewillencloseeveryGameItemsintoasphereandwillcheckifthesphereisinsidetheviewfrustumornot.Inordertodothat,wejustneedthecenterandtheradiusofthesphere.Thechecksarealmostequaltothepointcase,exceptthatweneedtotaketheradiusintoconsideration.Aspherewillbeoutsidethefrustimifitthefollowingconditionismet:dist = Ax0 +By0 + Cz0 <= −radius.

So,wewilladdanewmethodtotheFrustumCullingFilterclasstocheckifaspphereisinsidethefrustumornot.Themethodisdefinedlikethis.

publicbooleaninsideFrustum(floatx0,floaty0,floatz0,floatboundingRadius){

booleanresult=true;

Vector4fplane=frustumPlanes[i];

if(plane.x*x0+plane.y*y0+plane.z*z0+plane.w<=-boundingRadius){

result=false;returnresult;

returnresult;

Then,wewilladdmethodthatfilterstheGameItemsthatoutsidetheviewfrustum:

Optimizations

publicvoidfilter(List<GameItem>gameItems,floatmeshBoundingRadius){

floatboundingRadius;

Vector3fpos;

boundingRadius=gameItem.getScale()*meshBoundingRadius;

pos=gameItem.getPosition();

gameItem.setInsideFrustum(insideFrustum(pos.x,pos.y,pos.z,boundingRadius));

Wehaveaddedanewattribute,insideFrustum,totheGameItemclass,totrackthevisibility.Asyoucansee,theradiusoftheboundingsphereispassedasparameterThisisduetothefactthattheboundingsphereisassociatedtotheMesh,it’snotapropertyoftheGameItem.But,rememberthatwemustoperateinworldcoordinates,andtheradiosoftheboundingspherewillbeinmodelspace.WewilltransformittoworldspacebyapplyingthescalethathasbeensetupfortheGameItem,WeareassumigalsothatthepositionoftheGameItemisthecentreofthespehere(inworldspacecoordinates).

Thelastmethod,isjustautilityone,thatacceptsthemapofmeshesandfiltersalltheGameIteminstancescontainedinit.

publicvoidfilter(Map<?extendsMesh,List<GameItem>>mapMesh){

for(Map.Entry<?extendsMesh,List<GameItem>>entry:mapMesh.entrySet()){

List<GameItem>gameItems=entry.getValue();

filter(gameItems,entry.getKey().getBoundingRadius());

Andthat’sit.Wecanusethatclassinsidetherenderingprocess.Wejustneedtoupdatethefrustumplanes,calculatewhichGameItemsarevisibleandfilterthemoutwhendrawinginstancedandnoninstancedmeshes.

frustumFilter.updateFrustum(window.getProjectionMatrix(),camera.getViewMatrix());

frustumFilter.filter(scene.getGameMeshes());

frustumFilter.filter(scene.getGameInstancedMeshes());

YoucanplaywithactivatinganddeactivatingthefilteringandcanchecktheincreaseanddecreaseintheFPSthatyoucanachieve.Particlesarenotconsideredinthefiltering,butitstrivialtoaddit.Inanycase,forparticles,itmaybebettertojustcheckthepositionoftheemitterinsteadofcheckingeveryparticle.

Optimizations-FrustumCulling(II)

Optimizations

Oncethebasisoffrustumcullinghasbeenexplained,wecangetadvatangeofmorerefinedmethodsthattheJOMLlibraryprovides.Inparticular,itprovdiesaclassnamedFrustumIntersectionwhichextractstheplanesoftheveiwfrustuminamoreefficientwayasdescribedinthispaper.Besidesthat,thisclassalsoprovidesmethodsfortestingboundingboxes,pointsandspheres.

So,let'schangetheFrustumCullingFilterclass.Theattributesandconstructoraresimplifiedlikethis:

publicclassFrustumCullingFilter{

privatefinalMatrix4fprjViewMatrix;

privateFrustumIntersectionfrustumInt;

publicFrustumCullingFilter(){

prjViewMatrix=newMatrix4f();

frustumInt=newFrustumIntersection();

TheupdateFrustummethodjustdelegatestheplaneextractiontotheFrustumIntersectioninstance.

//Updatefrustumintersectionclass

frustumInt.set(prjViewMatrix);

AndthemethodthatinsideFrustummethodisvenemoresimple:

publicbooleaninsideFrustum(floatx0,floaty0,floatz0,floatboundingRadius){

returnfrustumInt.testSphere(x0,y0,z0,boundingRadius);

WiththisapproachyouwillbeabletovenegetafewmoreFPS.Besidesthat,aglobalflaghasbeenaddedtotheWindowclasstoenable/disbalefrustumculling.TheGameItemclassalsohasaflagforenabling/disablingthefiltering,becausetheremaybesomeitemsforwhichfrustumcullingfilteringdoesnotmakesense.

Optimizations

CascadedShadowMapsIntheshadowschapterwepresentedtheshadowmaptechniquetobeabletodisplayshadowsusingdirectionallightswhenrenderinga3Dscene.Thesolutionpresentedthere,requiredyoutomanuallytweaksomeoftheparametersinordertoimprovetheresults.Inthischapterwearegoingtochangethattechniquetoautomatealltheprocessandtoimprovetherresultsforopenspaces.InordertoachievethatgoalwearegoingtouseatechniquecalledCascadedShadowMaps(CSM).

Let’sfirststartbyexamininghowwecanautomatetheconstructionofthelightviewmatrixandtheorthographicprojectionmatrixusedtorendertheshadows.Ifyourecallfromtheshadowschapter,weneedtodrawthesceneformthelight’sperspective.Thisimpliesthecreationofalightviewmatrix,whichactslikeacameraforlightandaprojectionmatrix.Sincelightisdirectional,andissupposedtobelocatedattheinfinity,wechoseanorthographicprojection.

Wewantallthevisibleobjectstofitintothelightviewprojectionmatrix.Hence,weneedtofittheviewfrustumintothelightfrustum.Thefollowingpicturedepictswhatwewanttoachieve.

CascadedShadowMaps

Howcanweconstructthat?Thefirststepistocalculatethefrustumcornersoftheviewprojectionmatrix.Wegetthecoordinatesinworldspace.Thenwecalculatethecentreofthatfrustum.Thiscanbecalculatingbyaddingthecoordinatesforallthecornersanddividingtheresultbythenumberofcorners.

Withthatinformationwecansetthepositionofthelight.Thatpositionanditsdirectionwillbeusedtoconstructthelightviewmatrix.Inordertocalculatetheposition,westartformthecentreoftheviewfrustumobtainedbefore.Wethengobacktothedirectionoflightanamountequaltothedistancebetweenthenearandfarzplanesoftheviewfrustum.

CascadedShadowMaps

Oncewehaveconstructedthelightviewmatrix,weneedtosetuptheorthographicprojectionmatrix.Inordertocalculatethemwetransformthefrustumcornerstolightviewspace,justbymultiplyingthembythelightviewmatrixwehavejustconstructed.Thedimensionsofthatprojectionmatrixwillbeminimumandmaximumxandyvalues.Thenearzplanecanbesetuptothesamevalueusedbyourstandardprojectionmatricesandthefarvaluewillbethedistancebetweenthemaximumandminimumzvaluesofthefrustumcornersinlightviewspace.

However,ifyouimplementthealgorithmdescribedaboveovertheshadowssample,youmaybedisappointedbytheshadowsquality.

CascadedShadowMaps

Thereasonforthatisthatshadowsresolutionislimitedbythetexturesize.Wearecoveringnowapotentiallyhugearea,andtexturesweareusingtostoredepthinformationhavenotenoughresolutioninordertogetgoodresults.Youmaythinkthatthesolutionisjusttoincreasetextureresolution,butthisisnotsufficienttocompletelyfixtheproblem.Youwouldneedhugetexturesforthat.

There’sasmartersolutionforthat.Thekeyconceptisthat,shadowsofobjectsthatareclosertothecameraneedtohaveahigherqualitythanshadowsfordistantobjects.Oneapproachcouldbetojustrendershadowsforobjectsclosetothecamera,butthiswouldcauseshadowstoappear/disappearaslongaswemovethroughthescene.

TheapproachthatCascadedShadowMaps(CSMs)useistodividetheviewfrustumintoseveralsplits.Splitsclosertothecameracoverasmalleramountspaceswhilstdistantregionscoveramuchwiderregionofspace.Thenextfigureshowsaviewfrustumdividedintothreesplits.

CascadedShadowMaps

Foreachofthesesplits,thedepthmapisrendered,adjustingthelightviewandprojectionmatricestocoverfittoeachsplit.Thus,thetexturethatstoresthedepthmapcoversareducedareaoftheviewfrustum.And,sincethesplitclosesttothecameracoverslessspace,thedepthresolutionisincreased.

Asitcanbededucedformexplanationabove,Wewillneedasmanydepthtexturesassplits,andwewillalsochangethelightviewandprojectionmatricesforeachofthe,Hence,thestepstobedoneinordertoapplyCSMsare:

Dividetheviewfrustumintonsplits.

Whilerenderingthedepthmap,foreachsplit:

Calculatelightviewandprojectionmatrices.

Renderthescenefromlight’sperspectiveintoaseparatedepthmap

Whilerenderingthescene:

Usethedepthsmapscalculatedabove.

Determinethesplitthatthefragmenttobedrawnbelongsto.

Calculateshadowfactorasinshadowmaps.

CascadedShadowMaps

Asyoucansee,themaindrawbackofCSMsisthatweneedtorenderthescene,fromlight’sperspective,foreachsplit.Thisiswhyisoftenonlyusedforopenspaces.Anyway,wewillseehowwecaneasilyreducethatoverhead.

Solet’sstartexaminingthecode,butbeforewecontinuealittlewarning,Iwillnotincludethefullsourcecodeheresinceitwouldbeverytedioustored.Instead,Iwillpresentthemainclassestheirresponsibilitiesandthefragmentsthatmayrequirefurtherexplanationinordertogetagoodunderstanding.Alltheshadingrelatedclasseshavebeenmovedtoanewpackagecalledorg.lwjglb.engine.graph.shadow.

Thecodethatrendersshadows,thatis,thescenefromlight’sperspectivehasbeenmovedtotheShadowRendererclass.(ThatcodewaspreviouslycontainedintheRendererclass).

Theclassdefinesthefollowingconstants:

publicstaticfinalintNUM_CASCADES=3;

publicstaticfinalfloat[]CASCADE_SPLITS=newfloat[]{Window.Z_FAR/20.0f,Window.

Z_FAR/10.0f,Window.Z_FAR};

Thefirstoneisthenumberofcascadesorsplits.Thesecondonedefineswherethefarzplaneislocatedforeachofthesesplits.Asyoucanseetheyarenotequallyspaced.Thesplitthatisclosertothecamerahastheshortestdistanceinthezplane.

Theclassalsostoresthereferencetotheshaderprogramusedtorenderthedepthmap,alistwiththeinformationassociatedtoeachsplit,modelledbytheShadowCascadeclass,andareferencetotheobjectthatwhillhostthedepthmapthinformation(tetxures),modelledbytheShadowBufferclass.

TheShadowRendererclasshasmethodsforsettinguptheshadersandtherequiredattributesandarendermethod.Therendermethodisdefinedlikethis.

CascadedShadowMaps

publicvoidrender(Windowwindow,Scenescene,Cameracamera,Transformationtransform

ation,Rendererrenderer){

update(window,camera.getViewMatrix(),scene);

//Setupviewporttomatchthetexturesize

glBindFramebuffer(GL_FRAMEBUFFER,shadowBuffer.getDepthMapFBO());

glViewport(0,0,ShadowBuffer.SHADOW_MAP_WIDTH,ShadowBuffer.SHADOW_MAP_HEIGHT);

depthShaderProgram.bind();

//Rendersceneforeachcascademap

for(inti=0;i<NUM_CASCADES;i++){

ShadowCascadeshadowCascade=shadowCascades.get(i);

depthShaderProgram.setUniform("orthoProjectionMatrix",shadowCascade.getOrthoP

rojMatrix());

depthShaderProgram.setUniform("lightViewMatrix",shadowCascade.getLightViewMat

rix());

glFramebufferTexture2D(GL_FRAMEBUFFER,GL_DEPTH_ATTACHMENT,GL_TEXTURE_2D,sha

dowBuffer.getDepthMapTexture().getIds()[i],0);

renderNonInstancedMeshes(scene,transformation);

renderInstancedMeshes(scene,transformation);

//Unbind

depthShaderProgram.unbind();

Asyoucansee,Isimilartothepreviousrendermethodforshadowmaps,exceptthatweareperformingseveralrenderingpasses,onepersplit.IneachpasswechangethelightviewmatrixandtheorthographicprojectionmatrixwiththeinformationcontainedintheassociatedShadowCascadeinstande.

Also,ineachpass,weneedtochangethetextureweareusing.Eachpasswillrenderthedepthinformationtoadifferenttexture.ThisinformationisstoredintheShadowBufferclass,andissetuptobeusedbytheFBOwiththisline:

glFramebufferTexture2D(GL_FRAMEBUFFER,GL_DEPTH_ATTACHMENT,GL_TEXTURE_2D,shadowBuffe

r.getDepthMapTexture().getIds()[i],0);

CascadedShadowMaps

Asit’sjusthavebeenmentioned,theShadowBufferclassstorestheinformationrelatedtothetexturesusedtostoredepthinformation.Thecodeitsverysimilartothecodeusedintheshadowschapter,exceptthatweareusingtexturearrays.Thus,wehavecreatedanewclass,ArrTexture,thatcreatesanarrayoftextureswiththesameattributes.Thisclassalsoprovidesabindmethodthatbindsallthetexturearraysforusingtheminthesceneshader.Themethodreceivesaparameter,withthetextureunittostartwith.

publicvoidbindTextures(intstart){

for(inti=0;i<ShadowRenderer.NUM_CASCADES;i++){

glActiveTexture(start+i);

glBindTexture(GL_TEXTURE_2D,depthMap.getIds()[i]);

ShadowCascadeclass,storesthelightviewandorthographicprojectionmatricesassociatedtoonesplit.Eachsplitisdefinedbyanearandazfarplandistance,andwiththatinformationthematricesarecalculatedaccordingly.

Theclassprovidedandupdatemethodwhich,takingasaninputtheviewnatrixandthelightdirection.Themethodcalculatestheviewfrustumcornersinworldspaceandthencalculatesthelightposition.Thatpositioniscalculatedgoingback,suingthelightdirection,fromthefrustumcentretoadistanceequaltothedistancebetweenthefarandnearzplanes.

CascadedShadowMaps

publicvoidupdate(Windowwindow,Matrix4fviewMatrix,DirectionalLightlight){

//Buildprojectionviewmatrixforthiscascade

floataspectRatio=(float)window.getWidth()/(float)window.getHeight();

projViewMatrix.setPerspective(Window.FOV,aspectRatio,zNear,zFar);

projViewMatrix.mul(viewMatrix);

//Calculatefrustumcornersinworldspace

floatmaxZ=-Float.MAX_VALUE;

floatminZ=Float.MAX_VALUE;

for(inti=0;i<FRUSTUM_CORNERS;i++){

Vector3fcorner=frustumCorners[i];

corner.set(0,0,0);

projViewMatrix.frustumCorner(i,corner);

centroid.add(corner);

centroid.div(8.0f);

minZ=Math.min(minZ,corner.z);

maxZ=Math.max(maxZ,corner.z);

//Gobackfromthecentroiduptomax.z-min.zinthedirectionoflight

Vector3flightDirection=light.getDirection();

Vector3flightPosInc=newVector3f().set(lightDirection);

floatdistance=maxZ-minZ;

lightPosInc.mul(distance);

Vector3flightPosition=newVector3f();

lightPosition.set(centroid);

lightPosition.add(lightPosInc);

updateLightViewMatrix(lightDirection,lightPosition);

updateLightProjectionMatrix();

Withthelightpositionandthelightdirection.wecanconstructthelightviewmatrix.ThisisdoneintheupdateLightViewMatrix:

privatevoidupdateLightViewMatrix(Vector3flightDirection,Vector3flightPosition){

floatlightAngleX=(float)Math.toDegrees(Math.acos(lightDirection.z));

floatlightAngleY=(float)Math.toDegrees(Math.asin(lightDirection.x));

floatlightAngleZ=0;

Transformation.updateGenericViewMatrix(lightPosition,newVector3f(lightAngleX,li

ghtAngleY,lightAngleZ),lightViewMatrix);

Finally,weneedtoconstructtheorthographicprojectionmatrix.ThisisdoneintheupdateLightProjectionMatrixmethod.Themethodistotransformtheviewfrustumcoordinatesintolightspace.Wethengettheminimumandmaximumvaluesforthex,y

CascadedShadowMaps

coordinatestoconstructtheboundingboxthatenclosestheviewfrustum.Nearzplanecanbesetto0andthefarzplanetothedistancebetweenthemaximumandminimumvalueofthecoordinates.

privatevoidupdateLightProjectionMatrix(){

//Nowcalculatefrustumdimensionsinlightspace

floatminX=Float.MAX_VALUE;

floatmaxX=-Float.MAX_VALUE;

floatminY=Float.MAX_VALUE;

floatmaxY=-Float.MAX_VALUE;

floatminZ=Float.MAX_VALUE;

floatmaxZ=-Float.MAX_VALUE;

for(inti=0;i<FRUSTUM_CORNERS;i++){

Vector3fcorner=frustumCorners[i];

tmpVec.set(corner,1);

tmpVec.mul(lightViewMatrix);

minX=Math.min(tmpVec.x,minX);

maxX=Math.max(tmpVec.x,maxX);

minY=Math.min(tmpVec.y,minY);

maxY=Math.max(tmpVec.y,maxY);

minZ=Math.min(tmpVec.z,minZ);

maxZ=Math.max(tmpVec.z,maxZ);

floatdistz=maxZ-minZ;

orthoProjMatrix.setOrtho(minX,maxX,minY,maxY,0,distz);

Rememberthattheorthographicprojectionislikeaboundingboxthatshouldenclosealltheobjectsthatwillberendered.Thatboundingboxisexpressedinlightviewcoordinatesspace.Thus,whatwearedoingiscalculatetheminimumboundingbox,axisalignedwiththelightposition,hatenclosestheviewfrustum.

TheRendererclasshasbeenmodifiedtousetheclassesintheviewpackageandalsotomodifytheinformationthatispassedtotherenderers.Intherendererweneedtodealwiththemodel,themodelview,andthemodellightmatrices.Inpreviouschaptersweusedthemodel–view/light–viewmatrices,toreducethenumberofoperations.Inthiscase,weoptedtosimplifythenumberofelementstobepassedandnowwearepassingjustthemodel,viewandlightmatricestotheshaders.Also,forparticles,weneedtopreservethescale,sincewenolongerpassthemodelviewmatrix,thatinformationislostnow.Wereusetheattributeusedtomarkselecteditemstosetthatscaleinformation.Intheparticlesshaderwewillusethatvaluetosetthescalingagain.

Inthescenevertexshader,wecalculatemodellightviewmatrixforeachsplit,andpassitasanoutputtothefragmentshader.

CascadedShadowMaps

for(inti=0;i<NUM_CASCADES;i++){

mlightviewVertexPos[i]=orthoProjectionMatrix[i]*lightViewMatrix[i]*modelMatr

ix*vec4(position,1.0);

Inthefragmentshaderweusethosevaluestoquerytheappropriatedepthmapdependingonthesplitthatthefragmentis.Thisneedstobedoneinthefragmentshadersince,foraspecificitem,theirfragmentsmayresideindifferentsplits.

Also,inthefragmentshaderwemustdecidewhichsplitweareinto.Inordertodothat,weusethezvalueofthefragmentandcompareitwiththemaximumzvalueforeachsplit.Thatis,thezfarplanevalue.Thatinformationispassedasanewuniform:

uniformfloatcascadeFarPlanes[NUM_CASCADES];

Wecalculatedesplitlikethis.Thevariableidxwillhavethesplittobeused:

intidx;

for(inti=0;i<NUM_CASCADES;i++)

if(abs(mvVertexPos.z)<cascadeFarPlanes[i])

idx=i;

break;

Also,inthesceneshadersweneedtopassanarrayoftextures,anarrayofsampler2D's,tousethedepthmap,thetexture,associatedtothesplitweareinto.Thesourcecode,insteadofusinganarrayusesalistofuniformsthatwillholdthetextureunitthatisusedtorefertothedepthmapassociatedtoeachsplit.

uniformsampler2DnormalMap;

uniformsampler2DshadowMap_0;

Changingittoanarrayofuniformscausesproblemswithothertexturesthataredifficulttotrackforthissample.Inanycase,youcantrychangingitinyourcode.

Therestofthechangesinthesourcecode,andtheshadersarejustadaptationsrequiredbythechangesdescribedabove.Youcancheckitdirectlyoverthesourcecode.

CascadedShadowMaps

Finally,whenintroducingthesechangesyoumayseethatperformancehasdropped.Thisisduetothefactthatwearerenderingthreetimesthedepthmap.Wecanmitigatethiseffectbyavoidingrenderingatallwhenthescenehasnotchanged.Ifthecamerahasnotbeenmovedorthesceneitemshavenotchangedwedonotneedtorenderagainandagainthedepthmap.Thedepthmapsarestoredintextures,sotheyarenotwipedoutforeachrendercall.Thus,wehaveaddedanewvariabletotherendermethodthatindicatesifthishaschanged,avoidingupdatingthedepthmapsitremainsthesame.ThisincreasestheFPSdramatically.Attheend,youwillgetsomethinglikethis:

CascadedShadowMaps

Assimp

StaticMeshesThecapabilityofloadingcomplex3dmodelsindifferentformatsiscrucialinordertowriteagame.Thetaskofwritingparsersforsomeofthemwouldrequirelotsofwork.Evenjustsupportingasingleformatcanbetimeconsuming.Forinstance,thewavefrontloaderdescribedinchapter9,onlyparsesasmallsubsetofthespecification(materialsarenothandledatall).

Fortunately,theAssimplibraryalreadycanbeusedtoparsemanycommon3Dformats.It’saC++librarywhichcanloadstaticandanimatedmodelsinavarietyofformats.LWJGLprovidesthebindingstousethemfromJavacode.Inthischapter,wewillexplainhowitcanbeused.

Thefirstthingisaddingassimpmavendependenciestotheprojectpom.xml.Weneedtoaddcompiletimeandruntimedependencies.

<artifactId>lwjgl-assimp</artifactId>

</dependency>

<artifactId>lwjgl-assimp</artifactId>

<scope>runtime</scope>

</dependency>

Oncethedependencieshasbeenset,wewillcerateanewclassnamedStaticMeshesLoaderthatwillbeusedtoloadmesheswithnoanimations.Theclassdefinestwostaticpublicmethods:

Assimp

publicstaticMesh[]load(StringresourcePath,StringtexturesDir)throwsException{

returnload(resourcePath,texturesDir,aiProcess_JoinIdenticalVertices|aiProcess

_Triangulate|aiProcess_FixInfacingNormals);

publicstaticMesh[]load(StringresourcePath,StringtexturesDir,intflags)throwsE

xception{

//....

Bothmethodshavethefollowingarguments:

resourcePath:Thepathtothefilewherethemodelfileislocated.Thisisanabsolutepath,becauseAssimpmayneedtoloadadditionalfilesandmayusethesamebasepathastheresourcepath(Forinstance,materialfilesforwavefront,OBJ,files).

texturesDir:Thepathtothedirectorythatwillholdthetexturesforthismodel.ThisaCLASSPATHrelativepath.Forinstance,awavefrontmaterialfilemaydefineseveraltexturefiles.Thecode,expectthisfilestobelocatedinthetexturesDirdirectory.Ifyoufindtextureloadingerrorsyoumayneedtomanuallytweakthesepathsinthemodelfile.

Thesecondmethodhasanextraargumentnamedflags.Thisparameterallowstotunetheloadingprocess.Thefirstmethodsjustinvokesthesecondoneandpassessomevaluesthatareusefulinmostofthesituations:

aiProcess_JoinIdenticalVertices:Thisflagreducesthenumberofverticesthatareused,identifiyingthosethatcanbereusedbetweenfaces.

aiProcess_Triangulate:Themodelmayusequadsorothergeometriestodefinetheirelements.Sinceweareonlydealingwithtriangles,wemustusethisflagtosplitallhefacesintotriangles(ifneeded).

aiProcess_FixInfacingNormals:Thisflagstrytoreversenormalsthatmaypointinwards.

Therearemanyotherflagsthatcanbeused,youchancheckthemintheLWJGLJavadocdocumentation.

Let’sgobacktothesecondconstructor.ThefirstthingwedoisinvoketheaiImportFilemethodtoloadthemodelwiththeselectedflags.

AISceneaiScene=aiImportFile(resourcePath,flags);

if(aiScene==null){

thrownewException("Errorloadingmodel");

Therestofthecodefortheconstructorisaasfollows:

Assimp

intnumMaterials=aiScene.mNumMaterials();

PointerBufferaiMaterials=aiScene.mMaterials();

List<Material>materials=newArrayList<>();

for(inti=0;i<numMaterials;i++){

AIMaterialaiMaterial=AIMaterial.create(aiMaterials.get(i));

processMaterial(aiMaterial,materials,texturesDir);

intnumMeshes=aiScene.mNumMeshes();

PointerBufferaiMeshes=aiScene.mMeshes();

Mesh[]meshes=newMesh[numMeshes];

for(inti=0;i<numMeshes;i++){

AIMeshaiMesh=AIMesh.create(aiMeshes.get(i));

Meshmesh=processMesh(aiMesh,materials);

meshes[i]=mesh;

returnmeshes;

Weprocessthematerialscontainedinthemodel.Materialsdefinecolourandtexturestobeusedbythemeshesthatcomposethemodel.Thenweprocessthedifferentmeshes.Amodelcandefineseveralmeshesandeachofthemcanuseoneofthematerialsdefinedforthemodel.

IfyouexaminethecodeaboveyoumayseethatmanyofthecallstotheAssimplibraryreturnPointerBufferinstances.YoucanthinkaboutthemlikeCpointers,theyjustpointtoamemoryregionwhichcontaindata.Youneedtoknowinadvancethetypeofdatathattheyholdinordertoprocessthem.Inthecaseofmaterials,weiterateoverthatbuffercreatinginstancesoftheAIMaterialclass.Inthesecondcase,weiterateoverthebufferthatholdsmeshdatacreatinginstanceoftheAIMeshclass.

Let’sexaminetheprocessMaterialmethod.

Assimp

privatestaticvoidprocessMaterial(AIMaterialaiMaterial,List<Material>materials,S

tringtexturesDir)throwsException{

AIColor4Dcolour=AIColor4D.create();

AIStringpath=AIString.calloc();

Assimp.aiGetMaterialTexture(aiMaterial,aiTextureType_DIFFUSE,0,path,(IntBuffer

)null,null,null,null,null,null);

StringtextPath=path.dataString();

Texturetexture=null;

if(textPath!=null&&textPath.length()>0){

TextureCachetextCache=TextureCache.getInstance();

texture=textCache.getTexture(texturesDir+"/"+textPath);

Vector4fambient=Material.DEFAULT_COLOUR;

intresult=aiGetMaterialColor(aiMaterial,AI_MATKEY_COLOR_AMBIENT,aiTextureType

_NONE,0,colour);

if(result==0){

ambient=newVector4f(colour.r(),colour.g(),colour.b(),colour.a());

Vector4fdiffuse=Material.DEFAULT_COLOUR;

result=aiGetMaterialColor(aiMaterial,AI_MATKEY_COLOR_DIFFUSE,aiTextureType_NON

E,0,colour);

if(result==0){

diffuse=newVector4f(colour.r(),colour.g(),colour.b(),colour.a());

Vector4fspecular=Material.DEFAULT_COLOUR;

result=aiGetMaterialColor(aiMaterial,AI_MATKEY_COLOR_SPECULAR,aiTextureType_NO

NE,0,colour);

if(result==0){

specular=newVector4f(colour.r(),colour.g(),colour.b(),colour.a());

Materialmaterial=newMaterial(ambient,diffuse,specular,1.0f);

material.setTexture(texture);

materials.add(material);

Wecheckifthematerialdefinesatextureornot.Ifso,weloadthetexture.WehavecreatedanewclassnamedTextureCachewhichcachestextures.Thisisduetothefactthatseveralmeshesmaysharethesametextureandwedonotwanttowastespaceloadingagainandagainthesamedata.Thenwetrytogetthecoloursofthematerialfortheambient,diffuseandspecularcomponents.Fortunately,thedefinitionthatwehadforamaterialalreadycontainedthatinformation.

Assimp

TheTextureCachedefinitionisverysimpleisjustamapthatindexesthedifferenttexturesbythepathtothetexturefile(Youcancheckdirectlyinthesourcecode).Duetothefact,thatnowtexturesmayusedifferentimageformats(PNG,JPEG,etc.),wehavemodifiedthewaythattexturesareloaded.InsteadofusingthePNGlibrary,wenowusetheSTBlibrarytobeabletoloadmoreformats.

Let’sgobacktotheStaticMeshesLoaderclass.TheprocessMeshisdefinedlikethis.

privatestaticMeshprocessMesh(AIMeshaiMesh,List<Material>materials){

List<Float>vertices=newArrayList<>();

List<Float>textures=newArrayList<>();

List<Float>normals=newArrayList<>();

processVertices(aiMesh,vertices);

processNormals(aiMesh,normals);

processTextCoords(aiMesh,textures);

processIndices(aiMesh,indices);

Meshmesh=newMesh(Utils.listToArray(vertices),

Utils.listToArray(textures),

Utils.listToArray(normals),

Utils.listIntToArray(indices)

Materialmaterial;

intmaterialIdx=aiMesh.mMaterialIndex();

if(materialIdx>=0&&materialIdx<materials.size()){

material=materials.get(materialIdx);

}else{

material=newMaterial();

returnmesh;

AMeshisdefinedbyasetofverticesposition,normalsdirections,texturecoordinatesandindices.EachoftheseelementsareprocessedintheprocessVertices,processNormals,processTextCoordsandprocessIndicesmethod.AMeshalsomaypointtoamaterial,usingitsindex.IftheindexcorrespondstothepreviouslyprocessedmaterialswejustsimplyassociatethemtotheMesh.

TheprocessXXXmethodsareverysimple,theyjustinvokethecorrespondingmethodovertheAIMeshinstancethatreturnsthedesireddata.Forinstance,theprocessprocessVerticesisdefinedlikethis:

Assimp

privatestaticvoidprocessVertices(AIMeshaiMesh,List<Float>vertices){

AIVector3D.BufferaiVertices=aiMesh.mVertices();

while(aiVertices.remaining()>0){

AIVector3DaiVertex=aiVertices.get();

vertices.add(aiVertex.x());

vertices.add(aiVertex.y());

vertices.add(aiVertex.z());

YoucanseethatgetgetabuffertotheverticesbyinvokingthemVerticesmethod.WejustsimplyprocessthemtocreateaListoffloatsthatcontaintheverticespositions.Since,themethodretyrnsjusstabufferyoucouldpassthatinformationdirectlytotheOpenGLmethodsthatcreatevertices.Wedonotdoitthatwayfortworeasons.Thefirstoneistrytoreduceasmuchaspossiblethemodificationsoverthecodebase.Secondoneisthatbyloadingintoanintermediatestructureyoumaybeabletoperformsomepros-processingtasksandevendebugtheloadingprocess.

Ifyouwantasampleofthemuchmoreefficientapproach,thatis,directlypassingthebufferstoOpenGL,youcancheckthissample.

TheStaticMeshesLoadermakestheOBJLoaderclassobsolete,soithasbeenremovedformthebasesourcecode.AmorecomplexOBJfileisprovidedasasample,ifyourunityouwillseesomethinglikethis:

Animations

Assimp

Nowthatwehaveusedassimpforloadingstaticmesheswecanproceedwithanimations.Ifyourecallformtheanimationschapter,theVAOassociatedtoameshcontainstheverticespositions,thetexturecoordinates,theindicesandalistofweightsthatshouldbeappliedtojointpositionstomodulatefinalvertexposition.

Eachvertexpositionhasassociatedalistoffourweightsthatchangethefinalposition,referringthebonesindicesthatwillbecombinedtodetermineitsfinalposition.Eachframealistoftransformationmatricesareloaded,asuniforms,foreachjoint.Withthatinformationthefinalpositioniscalculated.

Intheanimationchapter,wedevelopedaMD5parsertoloadanimatedmeshes.Inthischapterwewilluseassimplibrary.ThiswillallowustoloadmanymoreformatsbesidesMD5,suchasCOLLADA,FBX,etc.

Beforewestartcodinglet’sclarifysometerminology.Inthischapterwewillrefertobonesandjointsindistinguishably.Ajoint/boneisarejustelementsthataffectvertices,andthathaveaparentformingahierarchy.MD5formatusesthetermjoint,butassimpusesthetermbone.

Let’sreviewfirstthestructureshandledbyassimpthatcontainanimationinformation.Wewillstartfirstwiththebonesandweightsinformation.ForeachMesh,wecanaccesstheverticespositions,texturecoordinatesandindices.Meshesstorealsoalistofbones.Eachboneisdefinedbythefollowingattributes:

Aname.Anoffsetmatrix:Thiswillusedlatertocomputethefinaltransformationsthatshouldbeusedbyeachbone.

Assimp

Bonesalsopointtoalistofweights,eachweights.Eachweightsisdefinedbythefollowingattributes:

Aweightfactor,thatis,thenumberthatwillbeusedtomodulatetheinfluenceofthebone’stransformationassociatedtoeachvertex.Avertexidentifier,thatis,thevertexassociatedtothecurrentbone.

Thefollowingpictureshowstherelationshipsbetweenalltheseelements.

Hence,thefirstthingthatwemustdoistoconstructthelistofverticespositions,thebones/joints/indicesandtheassociatedweightsfromthestructureabove.Oncewehavedonethat,weneedtopre-calculatethetransformationmatricesforeachbone/jointforalltheanimationframesdefinedinthemodel.

AssimpsceneobjectdefinesaNode’shierarchy.EachNodeisdefinedbyanamealistofchildrennode.Animationsusethesenodestodefinethetransformationsthatshouldbeappliedto.Thishierarchyisdefinedindeedthebones’hierarchy.Everyboneisanode,andhasaparent,excepttherootnode,andpossibleasetofchildren.Therearespecialnodesthatarenotbones,theyareusedtogrouptransformations,andshouldbehandledwhencalculatingthetransformations.AnotherissueisthattheseNode’shierarchyisdefinedfrothewholemodel,wedonothaveseparatehierarchiesforeachmesh.

Ascenealsodefinesasetofanimations.Asinglemodelcanhavemorethanoneanimation.Youcanhaveanimationsforamodeltowalk,runetc.Eachoftheseanimationsdefinedifferenttransformations.Ananimationhasthefollowingattributes:

Aname.Aduration.Thatis,thedurationintimeoftheanimation.namemayseemconfusing

Assimp

sinceananimationisthelistoftransformationsthatshouldbeappliedtoeachnodeforeachdifferentframe.Alistofanimationchannels.Ananimationchannel,contains,foraspecificinstantintimethetranslation,rotationandscalinginformationsthatshouldbeappliedtoeachnode.TheclassthatmodelsthedatacontainedintheanimationchannelsistheAINodeAnim.

Thefollowingfigureshowstherelationshipsbetweenalltheelementsdescribedabove.

Foraspecificinstantoftime,foraframe,thetransformationtobeappliedtoaboneisthetransformationdefinedintheanimationchannelforthatinstant,multipliedbythetransformationsofalltheparentnodesuptotherootnode.Hence,weneedtoreordertheinformationstoredinthescene,theprocessisasfollows:

Constructthenodehierarchy.Foreachanimation,iterateovereachanimationchannel(foreachanimationnode):Constructthetransformationmatricesforalltheframes.Thetransformationmmatrixisthecompositionofthetranslation,rotationandscalematrix.Reorderthatinformationforeachframe:ConstructthefinaltransformationstobeappliedforeachboneintheMesh.Thisisachievedbymultiplyingthetransformationmatrixofthebone(oftheassociatednode)bythetransformationmatricesofalltheparentnodesuptotherootnode.

Solet’sstartcoding.WewillcreatefirsaclassnamedAnimMeshesLoaderwhichextendsfromStaticMeshesLoader,butinsteadofreturninganarrayofMeshes,itreturnsanAnimGameIteminstance.Itdefinestwopublicmethodsforthat:

Assimp

publicstaticAnimGameItemloadAnimGameItem(StringresourcePath,StringtexturesDir)

throwsException{

returnloadAnimGameItem(resourcePath,texturesDir,

aiProcess_GenSmoothNormals|aiProcess_JoinIdenticalVertices|aiProcess_T

riangulate

|aiProcess_FixInfacingNormals|aiProcess_LimitBoneWeights);

publicstaticAnimGameItemloadAnimGameItem(StringresourcePath,StringtexturesDir,i

ntflags)

throwsException{

AISceneaiScene=aiImportFile(resourcePath,flags);

if(aiScene==null){

thrownewException("Errorloadingmodel");

intnumMaterials=aiScene.mNumMaterials();

PointerBufferaiMaterials=aiScene.mMaterials();

List<Material>materials=newArrayList<>();

for(inti=0;i<numMaterials;i++){

AIMaterialaiMaterial=AIMaterial.create(aiMaterials.get(i));

processMaterial(aiMaterial,materials,texturesDir);

List<Bone>boneList=newArrayList<>();

intnumMeshes=aiScene.mNumMeshes();

PointerBufferaiMeshes=aiScene.mMeshes();

Mesh[]meshes=newMesh[numMeshes];

for(inti=0;i<numMeshes;i++){

AIMeshaiMesh=AIMesh.create(aiMeshes.get(i));

Meshmesh=processMesh(aiMesh,materials,boneList);

meshes[i]=mesh;

AINodeaiRootNode=aiScene.mRootNode();

Matrix4frootTransfromation=AnimMeshesLoader.toMatrix(aiRootNode.mTransformation

NoderootNode=processNodesHierarchy(aiRootNode,null);

Map<String,Animation>animations=processAnimations(aiScene,boneList,rootNode,

rootTransfromation);

AnimGameItemitem=newAnimGameItem(meshes,animations);

returnitem;

ThemethodsarequitesimilartotheonesdefinedintheStaticMeshesLoaderwiththefollowingdifferences:

Themethodthatpassesadefaultsetofloadingflags,usesthisnewparameter:aiProcess_LimitBoneWeights.Thiswilllimitthemaximumnumberofweightsthataffecta

Assimp

vertextofour(Thisisalsothemaximumvaluethatwearecurrentlysupportingfromtheanimationschapter).ThemethodthatactuallyloadsthemodeljustloadsthedifferentmeshesbutitfirstcalculatesthenodehierarchyandthencallstotheprocessAnimationsattheendtobuildanAnimGameIteminstance.

TheprocessMeshmethodisquitesimilartotheoneintheStaticMeshesLoaderwiththeexceptionthatitcreatesMeshespassingjointindicesandweightsasaparameter:

processBones(aiMesh,boneList,boneIds,weights);

Meshmesh=newMesh(Utils.listToArray(vertices),Utils.listToArray(textures),

Utils.listToArray(normals),Utils.listIntToArray(indices),

Utils.listIntToArray(boneIds),Utils.listToArray(weights));

ThejointindicesandweightsarecalculatedintheprocessBonesmethod:

Assimp

privatestaticvoidprocessBones(AIMeshaiMesh,List<Bone>boneList,List<Integer>bon

List<Float>weights){

Map<Integer,List<VertexWeight>>weightSet=newHashMap<>();

intnumBones=aiMesh.mNumBones();

PointerBufferaiBones=aiMesh.mBones();

for(inti=0;i<numBones;i++){

AIBoneaiBone=AIBone.create(aiBones.get(i));

intid=boneList.size();

Bonebone=newBone(id,aiBone.mName().dataString(),toMatrix(aiBone.mOffsetM

atrix()));

boneList.add(bone);

intnumWeights=aiBone.mNumWeights();

AIVertexWeight.BufferaiWeights=aiBone.mWeights();

for(intj=0;j<numWeights;j++){

AIVertexWeightaiWeight=aiWeights.get(j);

VertexWeightvw=newVertexWeight(bone.getBoneId(),aiWeight.mVertexId(),

aiWeight.mWeight());

List<VertexWeight>vertexWeightList=weightSet.get(vw.getVertexId());

if(vertexWeightList==null){

vertexWeightList=newArrayList<>();

weightSet.put(vw.getVertexId(),vertexWeightList);

vertexWeightList.add(vw);

intnumVertices=aiMesh.mNumVertices();

for(inti=0;i<numVertices;i++){

List<VertexWeight>vertexWeightList=weightSet.get(i);

intsize=vertexWeightList!=null?vertexWeightList.size():0;

for(intj=0;j<Mesh.MAX_WEIGHTS;j++){

if(j<size){

VertexWeightvw=vertexWeightList.get(j);

weights.add(vw.getWeight());

boneIds.add(vw.getBoneId());

}else{

weights.add(0.0f);

boneIds.add(0);

Thismethodtraversesthebonedefinitionforaspecificmesh,gettingtheirweightsandgeneratingfillingupthreelists:

boneList:Itcontainsalistofnodes,withtheiroffsetmatrices.Itwilluseslaterontocalculatenodestransformations.AnewclassnamedBonehasbeencreatedtoholdthatinformation.Thislistwillcontainthebonesforallthemeshes.

Assimp

boneIds:ItcontainsjusttheidentifiersofthebonesforeachvertexoftheMesh.Bonesareidentifiedbyitspositionwhenrendering.ThislistonlycontainsthebonesforaspecificMesh.weights:ItcontainstheweightsforeachvertexoftheMeshtobeappliedfortheassociatedbones.

TheinformationcontainedintheweightsandboneIdsisusedtoconstructtheMeshdata.TheinformationcontainedintheboneListwillbeusedlaterwhencalculatinganimationdata.

Let’sgobacktotheloadAnimGameItemmethod.OncewehavecreatedtheMeshes,wealsogetthetransformationwhichisappliedtotherootnodewhichwillbeusedalsotocalculatethefinaltransformatio.Afterthat,weneedtoprocessthehierarchyofnodes,whichisdoneintheprocessNodesHierarchymethod.Thismethodisquitesimple,Itjusttraversesthenodeshierarchystartingfromtherootnodeconstructingatreeofnodes.

privatestaticNodeprocessNodesHierarchy(AINodeaiNode,NodeparentNode){

StringnodeName=aiNode.mName().dataString();

Nodenode=newNode(nodeName,parentNode);

intnumChildren=aiNode.mNumChildren();

PointerBufferaiChildren=aiNode.mChildren();

for(inti=0;i<numChildren;i++){

AINodeaiChildNode=AINode.create(aiChildren.get(i));

NodechildNode=processNodesHierarchy(aiChildNode,node);

node.addChild(childNode);

returnnode;

WehavecreatedanewNodeclassthatwillcontaintherelevantinformationofAINodeinstances,andprovidesfindmethodstolocatethenodeshierarchytofindanodebyitsname.BackintheloadAnimGameItemmethod,wejustusethatinformationtocalculatetheanimationsintheprocessAnimationsmethod.ThismethodreturnsaMapofAnimationinstances.Rememberthatamodelcanhavemorethanoneanimation,sotheyarestoredindexedbytheirnames.WiththatinformationwecanfinallyconstructanAnimAgameIteminstance.

TheprocessAnimationsmethodisdefinedlikethis

Assimp

privatestaticMap<String,Animation>processAnimations(AISceneaiScene,List<Bone>bo

neList,

NoderootNode,Matrix4frootTransformation){

Map<String,Animation>animations=newHashMap<>();

//Processallanimations

intnumAnimations=aiScene.mNumAnimations();

PointerBufferaiAnimations=aiScene.mAnimations();

for(inti=0;i<numAnimations;i++){

AIAnimationaiAnimation=AIAnimation.create(aiAnimations.get(i));

//Calculatetransformationmatricesforeachnode

intnumChanels=aiAnimation.mNumChannels();

PointerBufferaiChannels=aiAnimation.mChannels();

for(intj=0;j<numChanels;j++){

AINodeAnimaiNodeAnim=AINodeAnim.create(aiChannels.get(j));

StringnodeName=aiNodeAnim.mNodeName().dataString();

Nodenode=rootNode.findByName(nodeName);

buildTransFormationMatrices(aiNodeAnim,node);

List<AnimatedFrame>frames=buildAnimationFrames(boneList,rootNode,rootTran

sformation);

Animationanimation=newAnimation(aiAnimation.mName().dataString(),frames,

aiAnimation.mDuration());

animations.put(animation.getName(),animation);

returnanimations;

Foreachanimation,animationchannelsareprocessed.Eachchanneldefinesthedifferenttransformationsthatshouldbeappliedovertimeforanode.ThetransformationsdefinedforeachnodearedefinedinthebuildTransFormationMatricesmethod.Thesematricesarestoreforeachnode.Oncethenodeshierarchyisfilledupwiththatinformationwecanconstructtheanimationframes.

Let’sfirstreviewthebuildTransFormationMatricesmethod:

Assimp

privatestaticvoidbuildTransFormationMatrices(AINodeAnimaiNodeAnim,Nodenode){

intnumFrames=aiNodeAnim.mNumPositionKeys();

AIVectorKey.BufferpositionKeys=aiNodeAnim.mPositionKeys();

AIVectorKey.BufferscalingKeys=aiNodeAnim.mScalingKeys();

AIQuatKey.BufferrotationKeys=aiNodeAnim.mRotationKeys();

for(inti=0;i<numFrames;i++){

AIVectorKeyaiVecKey=positionKeys.get(i);

AIVector3Dvec=aiVecKey.mValue();

Matrix4ftransfMat=newMatrix4f().translate(vec.x(),vec.y(),vec.z());

AIQuatKeyquatKey=rotationKeys.get(i);

AIQuaternionaiQuat=quatKey.mValue();

Quaternionfquat=newQuaternionf(aiQuat.x(),aiQuat.y(),aiQuat.z(),aiQuat.

transfMat.rotate(quat);

if(i<aiNodeAnim.mNumScalingKeys()){

aiVecKey=scalingKeys.get(i);

vec=aiVecKey.mValue();

transfMat.scale(vec.x(),vec.y(),vec.z());

node.addTransformation(transfMat);

Asyoucansee,anAINodeAniminstancedefinesasetofkeysthatcontaintranslation,rotationandscalinginformation.Thesekeysarereferredtospecificinstantoftimes.Weassumethatinformationisorderedintime,andconstructalistofmatricesthatcontainthetransformationtobeappliedforeachframe.ThatfinalcalculationisdoneinthebuildAnimationFramesmethod:

Assimp

privatestaticList<AnimatedFrame>buildAnimationFrames(List<Bone>boneList,Noderoot

Matrix4frootTransformation){

intnumFrames=rootNode.getAnimationFrames();

List<AnimatedFrame>frameList=newArrayList<>();

for(inti=0;i<numFrames;i++){

AnimatedFrameframe=newAnimatedFrame();

frameList.add(frame);

intnumBones=boneList.size();

for(intj=0;j<numBones;j++){

Bonebone=boneList.get(j);

Nodenode=rootNode.findByName(bone.getBoneName());

Matrix4fboneMatrix=Node.getParentTransforms(node,i);

boneMatrix.mul(bone.getOffsetMatrix());

boneMatrix=newMatrix4f(rootTransformation).mul(boneMatrix);

frame.setMatrix(j,boneMatrix);

returnframeList;

ThismethodreturnsalistofAnimatedFrameinstances.EachAnimatedFrameinstancewillcontainthelistoftransformationstobeappliedforeachboneforaspecificframe.Thismethodjustiteratesoverthelistthatcontainsallthebones.Foreachbone:

Getstheassociatednode.BuildsatransformationmatrixbymultiplyingthetransformationoftheassociatedNodewithallthetransformationsoftheirparentsuptotherootnode.ThisisdoneintheNode.getParentTransformsmethod.Itmultipliesthatmatrixwiththebone’soffsetmatrix.Thefinaltransformationiscalculatedbymultiplyingtheroot’snodetransformationwiththematrixcalculatedinthestepabove.

Therestofthechangesinthesourcecodeareminorchangestoadaptsomestructures.Attheendyouwillbeabletoloadanimationslikethisone(youneedyopressspacepartochangetheframe).

Assimp

Thecomplexityofthissampleresidesmoreintheadaptationsoftheassimpstructurestoadaptittotheengineusedinthebookandtopre-calculatethedataforeachframe.Beyondthat,theconceptsaresimilartotheonespresentedintheanimationschapter.Youmaytryalsotomodifythesourcecodetointerpolatebetweenframestogetsmootheranimations.

Assimp

Table of Contents - FITstaff.fit.ac.cy/.../3d-game-development-with-lwjgl.pdf · 2017-09-28 ·...

Documents

Data Communications & Computer Networks - FITstaff.fit.ac.cy/com.cl/04-TransmissionMedia.pdf · ACOE312 Transmission Media 1 1 Data Communications & Computer Networks ... Three primary

Need some Wide Game ideas?

The Witches' game draws on some of the characters and situations

LTEAsia Signaling Focus Day Opening Remarks with some Game of Thrones "quotes"

Some Studies in Machine Learning Using the Game of …evans/greatworks/samuel.pdf · Some Studies in Machine Learning Using the Game of Checkers. II-Recent Progress ... We will go

The Pirate Game - bruise-hound.angelfire.combruise-hound.angelfire.com/The_Pirate_Game.pdf · The Pirate Game Welcome aboard the Pirate Game Manual! Some of the parts of this manual

Some Game Theory and Baseball - WordPress.com€¦ · Some Game Theory and Baseball William Spaniel williamspaniel@gmail.com @gametheory101 wjspaniel.wordpress.com . Three Topics

At in on some any dice game [autoguardado]

More game theory Today: Some classic games in game theory

Algorithmic Game Theory: Some Greatest Hits and Future Directions

ASO and some thoughts about mobile game app puslishing in Vietnam

On Some Criticisms Of Game Theory - Princeton University

Techno Blabber Game Technology phrases Some are fake Guess which!

CS 4730 Game Design Patterns CS 4730 – Computer Game Design Credit: Some slide material courtesy Walker White (Cornell)

Game Theory and Econometrics: A Survey of Some Recent Research

Are you Ready for Some Handwriting!? - Tools To Grow, Inc. Handwriting Game… · Are you Ready for Some Handwriting!? How to Play: Variations: Game Set Up: 1. Print out game board

Some Studies in Mucki~ Using Game Checkers. Progress 1969... · 2015-11-24 · Some Studies in Mucki~ Learning Using the Game of Checkers. I&Recent Progress A. L. SAMUEL ABSTRACT.-A

Indeterminate Prestressed Structures - FITstaff.fit.ac.cy/eng.ma/.../Prestressed_Ideterminate_Structures.pdf · Indeterminate Prestressed Structures Introduction Use of continuous

Put Some Skin in the Game

Chris Hecker spyparty.com …plus some ranting. SpyParty A Game About AI…