
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...](http://www.msr-waypoint.net/en-
us/um/people/cloop/LoopBlinn05.pdf) ?

~~~
mattdesl
> 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](https://github.com/mattdesl/adaptive-bezier-curve)

~~~
cscheid
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](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...](https://github.com/cscheid/lux/blob/master/src/lux/text/outline.js#L84-L140),
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](https://github.com/kovasb/gamma) for the
ClojureScript analogue.

~~~
mattdesl
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.

------
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
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
> 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...](https://developer.nvidia.com/sites/default/files/akamai/opengl/specs/GL_NV_framebuffer_mixed_samples.txt)

~~~
mattdesl
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](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
[https://github.com/mattdesl/svg-
mesh-3d/blob/master/demo/ind...](https://github.com/mattdesl/svg-
mesh-3d/blob/master/demo/index.js) is at least.

