Show HN: SVG Triangulation for WebGL

[mattdesl]

http://mattdesl.github.io/svg-mesh-3d/

[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 but aestetics.

Have you seen this paper: http://www.msr-waypoint.net/en-us/um/people/cloop/LoopBlinn0... ?

[mattdesl → m1el]

> 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 of complexity and tightly couples the code with the rendering engine (eg: ThreeJS, stackgl).

The curve approximation is done here:

https://github.com/mattdesl/adaptive-bezier-curve

[cscheid → mattdesl]

You can write composable WebGL, but it takes more work. Here's my Loop-Blinn example: http://cscheid.github.io/lux/demos/loopblinn/loopblinn.html

The bits that do Loop-Blinn are here, https://github.com/cscheid/lux/blob/master/src/lux/text/outl..., while the bits that decide the color of the text go elsewhere.

Look at 'unconed's MathBox for this kind of thing taken to incredible heights, or https://github.com/kovasb/gamma for the ClojureScript analogue.

[mattdesl → cscheid]

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 glslify are great ways of modularizing GLSL. I don't feel that modular WebGL is a solved problem, though.

[mandeepj → m1el]

Thanks for sharing the paper. I am not sure how to interpret those mathematical formulas presented in these papers otherwise they are great resources.

I am working on rendering a human body in a web app. I think I can take little help from this paper.

[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 been curious about the relative performance of the two approaches when you have to tessellate at runtime.

[mattdesl → pcwalton]

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 MSAA with the stencil buffer approach.

[exDM69 → mattdesl]

> 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 volumes look really good on new hardware. The edges are sharp but there's no pixelation artifacts.

Additionally, there's a new GL extension in Nvidia Maxwell GM204, which allows using more stencil samples to get prettier filled paths or shadow volumes: https://developer.nvidia.com/sites/default/files/akamai/open...

[mattdesl → exDM69]

Ah, I was referring to WebGL specifically. From what I've seen, you lose AA with stencil polygon approach.

https://github.com/pixijs/pixi.js/issues/1011

[Nican]

Is that written with the new JS standard? I have not seen much code in it.

[Kiro → Nican]

https://github.com/mattdesl/svg-mesh-3d/blob/master/demo/ind... is at least.