[{"data":1,"prerenderedAt":202},["ShallowReactive",2],{"project-10328448":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":15,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":33,"aspects":34,"strip":38,"post_text":28,"what":41,"said":67,"maker_in_thread":129,"shape":138,"grid":142,"attempts":163,"same_week":164,"maker_shows":194,"maker_hidden":195,"reader_version":196,"card":197},"10328448","svg-mesh-3d","SVG Triangulation for WebGL","title","Show HN: SVG Triangulation for WebGL","http:\u002F\u002Fmattdesl.github.io\u002Fsvg-mesh-3d\u002F","mattdesl.github.io","mattdesl",1443985718,2015,94,11,263,2565,"notable","languages","graphics library","library",[23,24,25,26],"svg","webgl","triangulation","mesh","quiet",null,{"positive":30,"neutral":31,"mixed":30,"critical":32},1,2,0,4,{"execution":35,"performance":36,"docs":37},{"positive":32,"critical":32},{"positive":32,"critical":32},{"positive":30,"critical":32},[39,32,32,32,32,39,32,32,32,39,40],3,5,{"problem":42,"audience":28,"pricing":28,"motivation":28,"time_to_build":28,"stack":52,"openness":65,"stage":66,"team_size":66},{"value":43,"source":44,"evidence":45},"Turning SVG paths into triangle meshes for WebGL","inferred",[46,48],{"id":47},"post",{"id":49,"by":50,"text":51},"10329054","m1el","That's cool. As far as I can tell, you are approximating bezier curves with line segments. It is a valid solution in many cases, but I would not use this technique for anything…",[53,61],{"value":54,"source":55,"evidence":56},"JavaScript","commenter",[57],{"id":58,"by":59,"text":60},"10330263","Kiro","https:\u002F\u002Fgithub.com\u002Fmattdesl\u002Fsvg-mesh-3d\u002Fblob\u002Fmaster\u002Fdemo\u002Findex.js is at least.",{"value":62,"source":44,"evidence":63},"WebGL",[64],{"id":47},"open_source","unknown",{"praise":68,"objections":77,"requests":93,"questions":101,"alternatives":113},[69],{"value":70,"source":55,"evidence":71},"Cool visualizations and demos",[72,76],{"id":73,"by":74,"text":75},"10329316","pcwalton","Sweet visualizations! Have you measured the performance of this form of tessellation vs. using GL_INVERT on the stencil buffer to implement the even-odd fill rule? I've always…",{"id":49,"by":50,"text":51},[78,82],{"value":79,"source":55,"evidence":80},"Approximates Bezier curves with line segments, fine only for aesthetics",[81],{"id":49,"by":50,"text":51},{"value":83,"source":55,"evidence":84},"Stencil buffer approach may be faster but loses MSAA in WebGL",[85,86,90],{"id":73,"by":74,"text":75},{"id":87,"by":88,"text":89},"10330392","exDM69","> Unfortunately you lose MSAA with the stencil buffer approach. I don't think that's the case. Depth and stencil buffers are multisampled too. This makes e.g. stencil shadow…",{"id":91,"by":11,"text":92},"10331478","Ah, I was referring to WebGL specifically. From what I've seen, you lose AA with stencil polygon approach. https:\u002F\u002Fgithub.com\u002Fpixijs\u002Fpixi.js\u002Fissues\u002F1011",[94],{"value":95,"source":55,"evidence":96},"Loop-Blinn curve rendering in WebGL",[97,98],{"id":49,"by":50,"text":51},{"id":99,"by":11,"text":100},"10329639","> I would not use this technique for anything but aestetics. I agree Loop-Blinn produces better results, and I would like to see it implemented in WebGL, but it adds a great deal…",[102,106],{"value":103,"source":55,"evidence":104},"Performance compared to stencil buffer even-odd fill",[105],{"id":73,"by":74,"text":75},{"value":107,"source":55,"evidence":108},"Is it written in modern JavaScript",[109],{"id":110,"by":111,"text":112},"10329900","Nican","Is that written with the new JS standard? I have not seen much code in it.",[114,118,125],{"value":115,"source":55,"evidence":116},"Loop-Blinn curve rendering",[117],{"id":49,"by":50,"text":51},{"value":119,"source":55,"evidence":120},"Lux, MathBox, gamma",[121],{"id":122,"by":123,"text":124},"10329899","cscheid","You can write composable WebGL, but it takes more work. Here's my Loop-Blinn example: http:\u002F\u002Fcscheid.github.io\u002Flux\u002Fdemos\u002Floopblinn\u002Floopblinn.html The bits that do Loop-Blinn are…",{"value":126,"source":55,"evidence":127},"Stencil buffer fill approach",[128],{"id":73,"by":74,"text":75},{"comments":33,"answered":31,"key":130},[131,132,135],{"id":99,"text":100},{"id":133,"text":134},"10330023","Nice demo! And thanks for the code reference. :) It seems very tightly coupled to Lux; it would have to be re-implemented for ThreeJS, StackGL, MathBox, Pixi, etc. Gamma and…",{"id":136,"text":137},"10329510","I haven't benchmarked but I suspect the stencil buffer would be better. But the time is so small that for static meshes (as in this demo) it is negligible. Unfortunately you lose…",{"commenters":139,"max_depth":33,"maker_replies":33,"first_comment_mins":140,"lifespan_hours":141},8,194,18,[143,145,149,151,152,153,155,156,158,159,161],[49,32,39,144,50,32],"project\u002Fmixed\u002Fexecution",[146,32,32,147,148,32],"10329139","commenter\u002Fneutral\u002Fnone","mandeepj",[99,32,32,150,11,30],"project\u002Fneutral\u002Fexecution",[122,32,32,147,123,32],[133,32,32,147,11,30],[73,30,39,154,74,32],"project\u002Fneutral\u002Fperformance",[136,30,32,154,11,30],[87,30,32,157,88,32],"commenter\u002Fneutral\u002Fperformance",[91,30,32,157,11,30],[110,31,39,160,111,32],"project\u002Fneutral\u002Fnone",[58,31,40,162,59,32],"project\u002Fpositive\u002Fdocs",[],[165,170,175,180,185,190],{"id":166,"name":167,"points":168,"category":169},"10320509","Air Paper",386,"web_saas",{"id":171,"name":172,"points":173,"category":174},"10319289","Dtab",229,"data",{"id":176,"name":177,"points":178,"category":179},"10330335","Someone.io",151,"productivity",{"id":181,"name":182,"points":183,"category":184},"10330331","YouTransfer",133,"infrastructure",{"id":186,"name":187,"points":188,"category":189},"10346585","Venture Dealr",118,"learning_science",{"id":191,"name":192,"points":193,"category":179},"10348433","Bort.io",105,6,false,"v2",{"id":198,"name":5,"line":6,"ai":195,"cat":19,"year":13,"points":14,"comments":15,"rec":27,"s":28,"top":15,"kw":199,"maker":11,"domain":10,"tier":18,"attempts":32,"strip":200,"url":9,"mix":201,"praise":70,"objection":79,"sub":20},10328448,[23,24,25,26],"30000300035",[30,31,30,32],1793990931466]