Animated lines with WebGL | Sample Code - ArcGIS Developer

... polyline graphics. This description assumes familiarity with WebGL and custom WebGL layer views. ... This sample instead uses polyline triangulation. ArcGISAPIforJavaScriptSampleCodeOverviewSampleCodeAPIReferenceShowcaseBlogMenuGetstartedLatestsamplesMappingandviewsLayersFeatureLayerSceneLayerBuildingSceneLayerCSVandGeoJSONRasterlayersElevationLayerIntegratedMeshLayerVoxelLayerMediaLayerMapImageLayerOGCLayersPointCloudLayerVectorTileLayerRouteLayerSubtypeGroupLayerCustomlayersCustomTileLayerCustomDynamicLayerCustomLERCLayerCustomBlendLayerCustomElevationLayer-ExaggeratingelevationCustomElevationLayer-ThematicdataaselevationCustomWebGLlayerviewsAnimatedlineswithWebGLTessellationhelpersforcustomWebGLlayerviewsTilingsupportforcustomWebGLlayerviewsMaskingeffectusingacustomlayerviewBuildacustomlayerviewusingdeck.glOthertiledlayersLivefeedsQueryEditingLabelsDrawVisualizationPopupsGraphicsRoutingSearchTimeAnalysisWidgetsOtherNavigationMenuAnimatedlineswithWebGLExploreinthesandboxOpeninCodePenViewliveImportantnotes:Thissampleshowsexperimentalfunctionality,pleasereadthedocumentationcarefullybeforeusingitinaproduct.ThissampleiswrittenforexpertdevelopersfamiliarwithWebGLandhardware-acceleratedrendering.Thissampledemonstrateshowtoimplementananimatedtrail(orflow)effectforpolylinegraphics.ThisdescriptionassumesfamiliaritywithWebGLandcustomWebGLlayerviews.It'ssimilartotheCustomWebGLlayerviewsample,whichtriangulatespointsintoquads.Thissampleinsteadusespolylinetriangulation.TheupdatePositions()methodhasbeenmodifiedtoconvertthegeometryofpolylinegraphicsintotrianglemeshes.Specialper-vertexattributesarecomputedandstoredontheGPUandthenusedinconjunctionwithper-frameuniformvaluestoimplementanefficientanimationsystemthatcansupportthousandsoftrailsatthesametime.Inthissamplewetessellatedpolylinesusingcustomcode;version4.14oftheArcGISAPIintroducesgenerictessellationroutinesthatthedevelopercanusetotessellatearbitrarygeometries;seetheSDKtessellationsampleformoredetails.CreatingthemeshWebGLdrawcallsoperateongeometricprimitives.WhileinWebGLthereissupportforthegl.LINESprimitive,thisisnotveryflexibleandcannotbeusedtoimplementadvancedeffectssuchastheoneshowcasedinthissample.Themostflexibleprimitiveistheindexedtrianglelist,whichcanberenderedusinggl.drawElements(gl.TRIANGLES,...).Thesampleapplicationrendersallpolylinesintheviewusingonesinglesuchcall.Tofeedtherasterizationweneedtosetupappropriatevertexattributesandanindexbuffer.TriangulatinglinesApolylinecanberepresentedusingtriangles.AsimpletriangulationschemeistheoneinwhicheveryvertexoftheoriginalpolylineisextrudedintotwoGPUverticesinoppositedirections.GroupsoffourGPUverticesarethenconnectedusingtwotrianglesforatotalofsixindices.Thegeometryoftheextrusionisexemplifiedbythefigurebelow.Letαbetheangleofaturn,andwthewidthofthepolylineonscreen,inpixels.Theextrusiondirectionformsanangleofα/2witheachofthenormalstothesegments;theamountoftheextrusionisw/(2cos(α/2)). Weusevectoralgebratostudyvertexextrusion.Let'sconsiderthreeconsecutiveverticesa,bandcofapolylineandsupposethatwewanttocomputetheoffsetvectorthatdrivestheextrusionofpointb.Let'sconsidersegmentsabandbcseparately.WecomputethevectorthatgoesfromatobasΔ1=b-a;let(dx,dy)=Δ1/||Δ1||bethenormalizedvectorthatexpressesthedirectionofsegmentab;thenn1=(-dy,dx)isthenormaltothesegment.Normaln2canbecomputedinthesamewayforsegmentbc.Thedirectionoftheoffsetvectorcanthenbecomputedasthenormalizedaverageofn1andn2,i.e.offsetDir=(n1+n2)/||n1+n2||. Wehavecharacterizedthedirectionoftheextrusion,butnotitsamount;intuitively,asharpturnshouldresultinalargerextrusionthanashallowone;also,weshouldextrudemoreifwewantthepolylinetoappearthicker.Let'snormalizethewidthofthepolylineto2sothatitsedgesjusttouchthetipsofthenormalvectors.Considertherighttrianglethathasn1(orn2)andoffsetassides.Itiseasytoseethatoffsetcos(α/2)mustequal1becausethenormalisunitlength;fromthiswecanconcludethelengthoftheoffsetvectorisexactly1/cos(α/2).Forapolylineofwidthwwehavetoscaletheoffsetbyafactorofw/2,whichleadstothew/(2cos(α/2))factorweintroducedatthebeginningofthissection. Eachpolylinegraphicisprocessedonce,andtheextrusioninformationiscapturedinattributesstoredinavertexbuffer.Theextrudedverticesareconnectedintotrianglesusinganindexbuffer.Thesegeneratedbuffersdrivetherasterizationprocessanddonotneedtoberegeneratedateachframe.Weregeneratethemonlywhentheviewbecomesstationarytoaccountforthelimitedprecisionoffloating-pointnumbersonGPUs.SeeCustomWebGLlayerviewforadiscussionofthistechnique.VertexformatEachvertexoftheoriginalpolylineresultsintwoGPUvertices.Thesehaveapositionattribute,whichisthesameasthevertextheyoriginatefromandusethesameunitsofthespatialreference.GPUverticesalsohaveanoffsetattribute,whichisaunitvectorthatpointstowardtheextrudedGPUvertex.Thetwooffsetvectorsinapairareoppositeofeachother.Notethatwestore_normalized_offsetvectors.Thesearetheoffsetsthatwouldmakeapolylineappearhavingwidthequalto2pixels.Thevertexshaderisresponsibleforscalingtheoffsetattributesothepolylinerendersthicker. Toapplyatexturetotheline,weneedtobuildaUVspaceonit.Thisrequirestwonewattributes:distance-Definesacoordinatethatincreasesalongtheline.Itismeasuredinthespatialreferenceunitsandstartsa0onthefirstvertexandincreaseswitheachpolylinesegment.side-Thisissetto+1or-1dependingontheedgeoftheextrudedpolylinetheGPUvertexbelongsto.Wewanteverylinetobeofadifferentcolor.Wecoulduseauniformtostorethecolor,butthiswouldpreventusfromdrawingalllinesusingasinglecall.Therefore,weencodethecolorasa32-bitRGBAattribute. ThetriangulationalgorithmThepolylinetriangulationalgorithmisimplementedintheupdatePositions()methodandassumesthatallgraphicsstoredonthelayerhavepolylinegeometries.Westartbycountingthenumberofverticesandindicesrequired,whichwedobyiteratingonallgraphics.Forsimplicity,weonlytriangulatethefirstpathofeachgraphic.ApolylinewithNverticeshasN-1segments.Foreachvertexweneed2GPUverticesextrudedinoppositedirections.Foreachsegmentweneedtwotriangles(i.e.6indices).UsedarkcolorsforcodeblocksCopy          1 2 3 4 5 6 7 8 9 10 letvtxCount=0; letidxCount=0; for(leti=0;i