Don't blend a polygon that crosses itself

I'm drawing two polylines (which are lines in the sample) in webgl with enabled ... between those polylines, but don't want a polyline to blend with itself. English Deutsch 日本語 한국어 PortuguêsBrasileiro 简体中文 TableofContents WebGL2Fundamentals.org Fix,Fork,Contribute Don'tblendapolygonthatcrossesitself Question: I'mdrawingtwopolylines(whicharelinesinthesample)inwebglwithenabledblending. gl.uniform4f(colorUniformLocation,0,0,0,0.3); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE,gl.ONE_MINUS_SRC_ALPHA); gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array([0.2,-1,0.2,1,]),gl.STATIC_DRAW); gl.drawArrays(gl.LINE_STRIP,0,2); gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array([0,-1,0,1,0,-1,0,1]),gl.STATIC_DRAW); gl.drawArrays(gl.LINE_STRIP,0,4); Hereisthecodepensample. Theleftlinearecrossedwithitselfanditseemslikeitblendswithitself,soasresultitbecomesdarker. Iwouldliketheblendtoworkbetweenthosepolylines,butdon'twantapolylinetoblendwithitself.Isthereawaytodoit? Answer: Onewaywouldbetousethestenciltest.You'dsetwebglsothatthestencilstoresacertainvaluewhenapixelisdrawnandyou'dsetthestenciltestsoitfailsifitseesthatvalue. Firstanexamplethatdraws2setsof2overlappingtriangleswithblendingon.Thepairswillgetdarkerwheretheyoverlap clickheretoopeninaseparatewindow Thenthesameexamplewiththestencilteston Firstweneedtoaskforastencilbuffer constgl=someCanvas.getContext('webgl2',{stencil:true}); Thenweturnonthestenciltest gl.enable(gl.STENCIL_TEST); Setupthetestsoitonlydrawsifthestencilbufferiszero gl.stencilFunc( gl.EQUAL,//thetest 0,//referencevalue 0xFF,//mask ); Andsettheoperationsoweincrementthestencilwhenwedrawsotheywillnolongerbezeroandthereforefailthetest gl.stencilOp( gl.KEEP,//whattodoifthestenciltestfails gl.KEEP,//whattodoifthedepthtestfails gl.INCR,//whattodoifbothtestspass ); Betweenthefirstdrawandthesecondweclearthestencilbuffer gl.clear(gl.STENCIL_BUFFER_BIT); Example clickheretoopeninaseparatewindow Anothersolutionyoucouldalsousethedepthtestifyou'redrawing2Dstuff.Thedefaultdepthtestonlydrawsifthedepthisgl.LESSthanthecurrentdepthsojustturningthedepthtestonandsettingadifferentdepthbetweendrawswouldalsoworkifthedepthofthetrianglesisthesame.Youcouldcomputeadifferentdepthvalueforeachthingyoudraw,you'dneedtolookupthebitresolutionofthedepthbuffer.Or,youcouldusegl.polygonOffset gl.enable(gl.DEPTH_TEST); gl.enable(gl.POLYGON_OFFSET_FILL); ...then... for(leti=0;icodegoeshereforcodeblocks commentspoweredbyDisqus