WebGL Points, Lines, and Triangles

As mentioned in the first article WebGL draws points, lines, and triangles. It does this when we call gl.drawArrays or gl.drawElements . English Français 日本語 한국어 Polski Portuguese Русский 简体中文 TableofContents WebGLFundamentals.org Fix,Fork,Contribute WebGLPoints,Lines,andTriangles Themajorityofthissitedrawseverything withtriangles.Thisisarguablythenormalthing that99%ofWebGLprogramsdo.But,forthesake ofcompletenesslet'sgooverafewothercases. Asmentionedinthefirstarticle WebGLdrawspoints,lines,andtriangles.Itdoesthis whenwecallgl.drawArraysorgl.drawElements. Weprovideavertexshaderwhatoutputsclipspace coordinatesandthen,basedonthefirstargument togl.drawArraysorgl.drawElementsWebGLwill drawpoints,lines,ortriangles. Thevalidvaluesforthefirstargumenttogl.drawArrays andgl.drawElementsare POINTS Foreachclipspacevertexoutputbythevertexshaderdrawasquare centeredoverthatpoint.Thesizeofthesquareis specifiedbysettingaspecialvariablegl_PointSize insidethevertexshadertothesizewewantforthissquareinpixels. Note:Themaximum(andminimum)sizethatsquarecanbe isimplementationdependentwhichyoucanquerywith const[minSize,maxSize]=gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE); Alsoseeanotherissuehere. LINES Foreach2clipspaceverticesoutputbythevertexshader drawalineconnectingthe2points.IfwehadpointsA,B,C,D,E,Fthen we'dget3lines. Thespecsayswecansetthethicknessofthisline bycallinggl.lineWidthandspecifyingawidthinpixels. Inrealitythoughthemaximum widthisimplementationdependentandforthemajority ofimplementationsthemaximumwidthis1. const[minSize,maxSize]=gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE); Thisismostlybecausevalues>1havebeendeprecated incoreDesktopOpenGL. LINE_STRIP Foreachclipspacevertexoutputbythevertexshader drawalinefromthepreviouspointoutputbythevertex shader. So,ifyououtputclipspaceverticesA,B,C,D,E,Fyou'llget5lines. LINE_LOOP ThisisthesameasLINE_STRIPexampleonemoreline isdrawnfromthelastpointtothefirstpoint. TRIANGLES Forevery3clipspaceverticesoutputbythevertexshader drawatrianglefromthe3points.Thisisthemostusedmode. TRIANGLE_STRIP Foreachclipspacevertexoutputbythevertexshader drawatrianglefromthelast3vertices.Inotherwords Ifyououtput6pointsA,B,C,D,E,Fthen4triangleswillbe drawn.A,B,CthenB,C,DthenC,D,EthenD,E,F TRIANGLE_FAN Foreachclipspacevertexoutputbythevertexshader drawatrianglefromthefirstvertexandthelast2 vertices.Inotherwordsifyououtput6pointsA,B,C,D,E,F then4triangleswillbedrawn.A,B,CthenA,C,Dthen A,D,EandfinallyA,E,F I'msuresomeotherswilldisagreebutinmyexperience TRIANGLE_FANandTRIANGLE_STRIParebestavoided. Theyfitonlyafewexceptionalcasesandtheextracode forhandlingthosecasesisnotworthjustdoingeverything intrianglesinthefirstplace.Inparticularmaybeyou havetoolstobuildnormalsorgeneratetexturecoordinates ordoanyothernumberofthingswithvertexdata.By stickingtojustTRIANGLESyourfunctionswilljustwork. AssoonasyoustartaddinginTRIANGLE_FANandTRIANGLE_STRIP youneedmorefunctionstohandlemorecases. You'refreetodisagreeanddowhateveryouwant. I'mjustsayingthat'smyexperienceandtheexperienceof afewAAAgamedevsI'veasked. SimilarlyLINE_LOOPandLINE_STRIParenotsouseful andhavesimilarissues. LikeTRIANGLE_FANandTRIANGLE_STRIPthesituations tousethemarerare.Forexampleyoumightthinkyou wanttodraw4connectedlineseachmadefrom4points. IfyouuseLINE_STRIPyou'dneedtomake4callstogl.drawArrays andmorecallstosetuptheattributesforeachlinewhereasifyou justuseLINESthenyoucaninsertallthepointsneededtodraw all4setsoflineswithasinglecalltogl.drawArrays.Thatwill bemuchmuchfaster. Further,LINEScanbegreattousefordebuggingorsimple effectsbutgiventheir1pixelwidthlimitonmostplatforms it'softenthewrongsolution.Ifyouwanttodrawagridforagraphor showtheoutlinesofpolygonsina3dmodelingprogramusingLINES mightbegreatbutifyouwanttodrawstructuredgraphicslike SVGorAdobeIllustratorthenitwon'tworkandyouhave torenderyourlinessomeotherway,usuallyfromtriangles. English Français 日本語 한국어 Polski Portuguese Русский 简体中文 Fundamentals Fundamentals HowItWorks ShadersandGLSL WebGLStateDiagram ImageProcessing ImageProcessing ImageProcessingContinued 2Dtranslation,rotation,scale,matrixmath 2DTranslation 2DRotation 2DScale 2DMatrices 3D Orthographic3D 3DPerspective 3DCameras Lighting DirectionalLighting PointLighting SpotLighting StructureandOrganization LessCode,MoreFun DrawingMultipleThings SceneGraphs Geometry Geometry-Lathe Loading.objfiles Loading.objw.mtlfiles Textures Textures DataTextures Using2orMoreTextures CrossOriginImages PerspectiveCorrectTextureMapping PlanarandPerspectiveProjectionMapping RenderingToATexture RendertoTexture Shadows Shadows Techniques 2D 2D-DrawImage 2D-MatrixStack Sprites 3D Cubemaps Environmentmaps Skyboxes Skinning Fog Picking(clickingonstuff) Text Text-HTML Text-Canvas2D Text-UsingaTexture Text-UsingaGlyphTexture Textures RampTextures(ToonShading) GPGPU GPGPU Tips SmallestPrograms DrawingWithoutData Shadertoy PullingVertices Optimization IndexedVertices(gl.drawElements) InstancedDrawing Misc SetupAndInstallation Boilerplate ResizingtheCanvas Animation Points,Lines,andTriangles MultipleViews,MultipleCanvases VisualizingtheCamera WebGLandAlpha 2Dvs3Dlibraries Anti-Patterns WebGLMatricesvsMathMatrices PrecisionIssues Takingascreenshot PreventtheCanvasBeingCleared GetKeyboardInputFromaCanvas UseWebGLasBackgroundinHTML CrossPlatformIssues QuestionsandAnswers Reference Attributes TextureUnits Framebuffers readPixels References HelperAPIDocs TWGL,AtinyWebGLhelperlibrary github Questions?Askonstackoverflow. Issue/Bug?Createanissueongithub. Use

codegoeshere

forcodeblocks commentspoweredbyDisqus