Instanced Line Rendering Using WebGL - Hacker News

If like me you're also rendering lines with perspective, you want to also look at ... When we wrote the instanced WebGL line renderer for ... HackerNews new|past|comments|ask|show|jobs|submit login InstancedLineRenderingUsingWebGL(wwwtyro.net) 107pointsbyotherjasononMay24,2021|hide|past|favorite|34 comments mtsronMay24,2021|next[–] Iwroteanimplementationbasedonthisafewweeksback.ItworksreallynicelyandIcanrendersome2Mlinesegmentsat60fps.Onethingyoushoulddoistrytolimitveryshortandsmallsegments,asGPUsdon’tlikerendering1pxtriangles.Still,I’vebeenleadtounderstandthattheinstancedrenderingdoneinthisarticleissuboptimalonmostGPUs.Abetterwaytodoitisapparentlytoputthepointsintoa(non-vertex)bufferanddo(batched)drawcallsforlargenumbersofverticeswithakindofmanualinstancing.Basicallylookingupwhatamountstoinstancedatausinggl_VertexInput/6andvertexdatausinggl_VertexIndex%6(or4insteadof6forindexesrendering).UnfortunatelyIhaven’thadthetimetoimplementandtestthisyet.Iflikemeyou’realsorenderinglineswithperspective,youwanttoalsolookatFreyaHolmer'swork.Particularlylinethinnessfadingisimportanttoreduceshimmer/aliasing.Thismeansbasicallykeepthewidthataminimumof1pxandadjustingopacitybelowthatinstead.Edit:Forthoseinterested,mineisimplementedasaplugintotheBevygameengine,writteninRust.Bevycanbefoundherehttps://github.com/bevyengine/bevy.Thepluginishttps://github.com/ForesightMiningSoftwareCorporation/bevy_p.... TazeTSchnitzelonMay24,2021|parent|next[–] >Still,I’vebeenleadtounderstandthattheinstancedrenderingdoneinthisarticleissuboptimalonmostGPUs.Abetterwaytodoitisapparentlytoputthepointsintoa(non-vertex)bufferanddo(batched)drawcallsforlargenumbersofverticeswithakindofmanualinstancing.Basicallylookingupwhatamountstoinstancedatausinggl_VertexInput/6andvertexdatausinggl_VertexIndex%6(or4insteadof6forindexesrendering).Notethatyoucan'tdothisinWebGL,atleastWebGL1.0.(Also,becarefulaboutassumingthingsapplyto“most”GPUs!) mtsronMay25,2021|root|parent|next[–] Idon'tmeantobesnarky,butWebGL1.0is10yearsoldasofMarch.Soyeah,ifyouneedtosupportthatthere'salotofextraworkyouneedtodo,forallkindsofthings. TazeTSchnitzelonMay26,2021|root|parent|next[–] WebGL2isstillnotinnon-previewSafari,andofcourseittookalongwhileforwidesupportofWebGL1.Webgraphicsmovesalotslowerthannativegraphics. hughesonMay24,2021|prev|next[–] Loveinteractivearticleslikethis.Unfortunately“mouseovertoanimate”reallydoesn’tworkonmobile. comexonMay24,2021|parent|next[–] Tappingworkedforme. JyaifonMay24,2021|prev|next[–] Oneadvantageofrenderingyourownlinesisthatitallowsyoutocreatecooleffects. Forinstance,ifyouchangetheopacityandwidthoflinesdependingonhowfarawaytheyarefromagivenplane,youcansimulateadepthoffieldeffectthatrunsevenonlow-enddevices:https://www.youtube.com/watch?v=tWh6pX4r5nE jonplackettonMay24,2021|prev|next[–] It’skindaofbafflingthatittakessomuchextraefforttojustrendersomelinesinWebGL skrebbelonMay24,2021|parent|next[–] Rendering"justsome"linesiseasy.Renderingnicelinesishard.OpenGLisaprettylowlevelabstraction,don'texpecttogetthesamekindofstuffforfreeasyoudoinCanvasortheDOM. uytonMay24,2021|root|parent|next[–] Idon'tgetwhythehigherlevelframeworkscan'tmakeiteasierthough.I'veusedthree.jsbefore(withoutknowinganywebgl)andwasburnedbythefactthatlinescan'tevendisplayconsistentlyacrossdevices.Forexamplethelinewidthswouldbeignoredinsomecasesbutnotothers:https://threejs.org/docs/?q=line#api/en/materials/LineBasicM... mattdeslonMay24,2021|root|parent|next[–] Becausethisislargelyoutsidethescopeofmost3Dgameengines.Renderingcrisp2Dlines(oranyanti-aliasedcomplexvectorpolygon)ontheGPUishard:itinvolvesalotofhighleveldecisionsabouthowtoprocess,structure&submitthedatatothegraphicspipeline.Dependingontheapplication,oneapproachmaybevastlysuperiortotheother.IdothinkThreeJSshouldincludebasicthickscreenspacelinesupport,though,asitcoversmostusecasesanddoesn’taddalotofbloat/complexitytothecoreframework. jmiskoviconMay24,2021|root|parent|next[–] ThreeJSinfacthasimplementationforscreenspace'fatlines'.[0]https://threejs.org/examples/webgl_lines_fat.html mattdeslonMay24,2021|root|parent|next[–] True.It'spartoftheirexamples,butwouldbeworthhavingincoreIfeel,asmostpeopleareusingTHREE.Linefortheirapps/designswhichisunreliable. jonplackettonMay24,2021|root|parent|prev|next[–] Doyouknowifthesedisplaythesameacrossdevices?Andalsoifthe10pxlimitisahardlimitorjustofthisdemo? jmiskoviconMay24,2021|root|parent|next[–] Ididn'tactuallyusedthree.js,juststudiedtheimplementationabit.ItcreatestrianglegeometrysoIwouldexpectittoworkacrossallsupporteddevices.The10pxisjustthelimitofdemoslider. skrebbelonMay24,2021|root|parent|prev|next[–] Ithinkit'sbecausenicelinesaren'tasuperbigusecaseforWebGL.Mostpeopleuseitfor3dscenes,3dobjects,etc.Inotherwords,Isupposethatthree.jsdoesn'thavenicelinesbecausenobodycontributedit,whichisusuallyasignoflow-ishdemand.(Iknownothingaboutthree.jsgovernanceandgoalssoImightbemistaken) jasmcoleonMay24,2021|prev|next[–] Nicearticle!WhenwewrotetheinstancedWebGLlinerendererforhttps://count.cooneofthetrickypartswasswitchingbetweenmitreandbeveljoinsbasedonthejoinangle-forveryacuteanglesthemitrejoinshootsofftoinfinity.Anotherniceextension(thatweareyettoimplement)isanti-aliasing,butIthinkthatrequiresextrageometrytovarytheopacityover. paulgbonMay24,2021|parent|next[–] >Anotherniceextension(thatweareyettoimplement)isanti-aliasing,butIthinkthatrequiresextrageometrytovarytheopacityover.There’sawaytodoitwhereyoupassoneextravec2fromthevertexshaderandusethattodeterminehowmuchofthepixeliscoveredbythelines.(Thishastheeffectofthinningtheline,soyoumaywanttothickenittocompensate)Here’sanexampleofapairofshadersthatdothis:https://github.com/paulgb/experiments/tree/master/2021-05-20...Here’sademo:https://twitter.com/paulgb/status/1394824275635408907 thomasikzelfonMay24,2021|parent|prev|next[–] Youcandoantialiasinginthefragmentshaderusing4verticespersegment.See: Shader-BasedAntialiasedDashedStrokedPolylines-NicolasRougierAnd:https://blog.mapbox.com/drawing-antialiased-lines-with-openg...Iamalsorenderingroundcapsinthefragmentshader.Youcanthenrendermultiplelineswith1drawcall.Theonlyproblemisdrawingtransparentlines,becauseoftheoverlapbetweensegments. mtsronMay24,2021|parent|prev|next[–] Whatdidyouendupusingtochoosethejoin?I’malsointerestedinaddinganti-aliasingtomyimplementation.Maybewideningthelinebyabitandfadingopacityoverthat?Butyeah,extrageometry,itseems. EverlagonMay24,2021|prev|next[–] Headsupforanyonereadingthisonchrome,theexamplesmaynotrenderwitha`Cannotreadproperty'_gl'ofnull`exception;firefoxworkedfinewhenItriedit. exikyutonMay24,2021|parent|next[–] Hmmmmm,that'skindofinteresting.You'reseeingthesortofcrashyougetwhenthebrowser'sdecidedyoursystemcan'thandleWebGL,andturneditoff.Normallythatwouldtranslateto"whatGPUareyouusing,it'sprobablytooold"--exceptFirefoxisapparentlyfine.I'llbetchrome://gpueithershows"WebGL:disabled"or"WebGL:enabled;WebGL2:disabled".Ithink`ignore-gpu-blocklist`inchrome://flagsshouldaffectWebGL.FWIWI'mrunningChromeonLinuxwithhardwarerenderingforce/explicitlyenabledforbothvideoandrasterization(`enable-gpu-rasterization`inchrome://flags-don'tthinkthisaffectsWebGL),anditallworksgreat(notwithstandingterriblethermaldesign)onthisfairlyoldHPlaptopw/i5+HDGraphics4000.(TheGPUprocessdoesadmittedlyoccasionallyhangandneedkillingsoitrestarts,butthat'saboutit.)Gettingvideodecoderequires--enable-features=VaapiVideoDecoderonthecommandlineaswell,oratleastitdidinthelastversionofChrome,Ihaven'tcheckedifthisisnolongerrequired.Ifpoking`ignore-gpu-blocklist`doesn'twork,whatdoeschrome://gpushowinChrome,whatdoesabout:support(andpossiblyabout:gpu?notsure)showinFirefox,andwhatGPUandOSareyouusing? kevingaddonMay24,2021|parent|prev|next[–] IhaditfailonfirstvisitinFirefox,soIthinkthepageisjustbuggy.ItworkedwhenIrefreshedit unwindonMay24,2021|root|parent|next[–] Samehere,Firefox88.0.1onLinuxx86-64.Thanksformentioningthis,soIcouldgiveitasecondtry. sleepy_keitaonMay24,2021|parent|prev|next[–] WorksForMe(tm)onchrome90,macOS artifact_44onMay24,2021|prev|next[–] Whatagorgeouswriteup.Loveit.Gonnagomakesomelinesnow. ognarbonMay24,2021|prev|next[–] Missing2019inthetitle asiachickonMay24,2021|prev[–] Nit,ThearticlementionsthingslikeGL_LINES,GL_LINE_STRIP.ThoseareOpenGLnotWebGL.ItmightseemunimportanttosomeonethatknowsbothAPIsbuttosomeonethatonlyknowsorislearningWebGLitcanbeextremelyconfusing Jasper_onMay24,2021|parent|next[–] WebGLsupportsgl.LINESandgl.LINE_STRIPjustfine. asiachickonMay24,2021|root|parent|next[–] Whoosh... TazeTSchnitzelonMay24,2021|parent|prev|next[–] WebGLisjustaconstrainedversionofOpenGLES.PeoplewillinevitablyrefertothingswiththeirOpenGLESnamessometimes. asiachickonMay24,2021|root|parent|next[–] OnlyiftheyalreadyknowOpenGL.Ifthey'rewebprogrammerswithnoOpenGLexperiencethenno,theywillnotrefertoOpenGLESnames mtsronMay24,2021|parent|prev[–] Thoseareonlyusedtocomparewith.Themaincontributionfromthearticledoesn’tusethose. asiachickonMay24,2021|root|parent[–] Toapersonreadingthearticle,iftheydon'talreadyknowOpenGLthenit'sjustconfusing. ApplicationsareopenforYCWinter2023 Guidelines |FAQ |Lists |API |Security |Legal |ApplytoYC |ContactSearch: