WebGL2 Points, Lines, and Triangles

WebGL2 Points, Lines, and Triangles · POINTS. For each clip space vertex output by the vertex shader draw a square centered over that point. · LINES. For each 2 ... English Deutsch 日本語 한국어 PortuguêsBrasileiro 简体中文 TableofContents WebGL2Fundamentals.org Fix,Fork,Contribute WebGL2Points,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 Deutsch 日本語 한국어 PortuguêsBrasileiro 简体中文 Fundamentals HowtouseWebGL2 Fundamentals HowItWorks ShadersandGLSL WebGL2StateDiagram WebGL2vsWebGL1 What'snewinWebGL2 MovingfromWebGL1toWebGL2 DifferencesfromWebGLFundamentals.orgtoWebGL2Fundamentals.org ImageProcessing ImageProcessing ImageProcessingContinued 2Dtranslation,rotation,scale,matrixmath 2DTranslation 2DRotation 2DScale 2DMatrices 3D Orthographic3D 3DPerspective 3D-Cameras 3D-MatrixNaming Lighting DirectionalLighting PointLighting SpotLighting StructureandOrganization LessCode,MoreFun DrawingMultipleThings SceneGraphs Geometry 3DGeometry-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 GPGPU GPGPU Tips SmallestPrograms DrawingWithoutData Shadertoy PullingVertices Optimization IndexedVertices(gl.drawElements) InstancedDrawing Misc SetupAndInstallation Boilerplate ResizingtheCanvas Animation Points,Lines,andTriangles MultipleViews,MultipleCanvases VisualizingtheCamera WebGL2andAlpha 2Dvs3Dlibraries Anti-Patterns WebGL2MatricesvsMathMatrices PrecisionIssues Takingascreenshot PreventtheCanvasBeingCleared GetKeyboardInputFromaCanvas UseWebGL2asBackgroundinHTML CrossPlatformIssues QuestionsandAnswers Reference Attributes TextureUnits Framebuffers readPixels References HelperAPIDocs TWGL,AtinyWebGLhelperlibrary github Issue/Bug?Createanissueongithub. Use

codegoeshere