5 ms·

Show HN: SVG Triangulation for WebGL

94 points by mattdesl 11y ago

m1el 11y ago
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/LoopBlinn05.pdf http://www.msr-waypoint.net/en-us/um/people/cloop/LoopBlinn0... ?
- mandeepj 11y ago
  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.
- deleted 11y ago
  [deleted]
- mattdesl 11y ago
  > 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 11y ago
    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/outline.js#L84-L140 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 https://github.com/kovasb/gamma for the ClojureScript analogue.
    - mattdesl 11y ago
      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 11y ago
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 11y ago
  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 11y ago
    > 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/opengl/specs/GL_NV_framebuffer_mixed_samples.txt https://developer.nvidia.com/sites/default/files/akamai/open...
    - mattdesl 11y ago
      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 11y ago
Is that written with the new JS standard? I have not seen much code in it.
- Kiro 11y ago
  https://github.com/mattdesl/svg-mesh-3d/blob/master/demo/index.js https://github.com/mattdesl/svg-mesh-3d/blob/master/demo/ind... is at least.

94 points by mattdesl 11y ago

m1el 11y ago

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

mandeepj 11y ago
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.
deleted 11y ago
[deleted]
mattdesl 11y ago
> 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 11y ago
  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/outline.js#L84-L140 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 https://github.com/kovasb/gamma for the ClojureScript analogue.
  - mattdesl 11y ago
    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 11y ago

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 11y ago
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 11y ago
  > 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/opengl/specs/GL_NV_framebuffer_mixed_samples.txt https://developer.nvidia.com/sites/default/files/akamai/open...
  - mattdesl 11y ago
    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 11y ago

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

Kiro 11y ago
https://github.com/mattdesl/svg-mesh-3d/blob/master/demo/index.js https://github.com/mattdesl/svg-mesh-3d/blob/master/demo/ind... is at least.