3 ms·

You're missing a <title> tag. Otherwise very nice. I've been meaning to get into this webgl neo-demoscene stuff. Does anyone know about text/vector rendering i

You're missing a <title> tag. Otherwise very nice. I've been meaning to get into this webgl neo-demoscene stuff. Does anyone know about text/vector rendering in webgl? Would I have to construct a 2d mesh manually? Ideally I'd like a logo in vector form to make some kind of "mask layer" inside the thing. What would I search to find out how to do that?

exDM69 11y ago
> Does anyone know about text/vector rendering in webgl? There's three commonly used methods for this: 1) Tesselate your vector shapes to triangles. This is quite tricky to get right if you have concave polygons with holes in them. You can try to find the old GLU tesselator source and port that. 2) Use the stencil-then-cover trick, which is somewhat similar to stencil shadow volumes but in 2D. This is what the nanovg [0] library does (also NV_path_rendering). 3) Use signed distance fields, which is the best way to get good looking text/vector art if you project that into a 3d surface. You either need to pre-process your vector shapes into 2d distance field textures off-line or build a custom tesselator w/ a pixel shader that does this. WebGL is not special in this, the same tricks apply as normal OpenGL (ES). [0] https://github.com/memononen/nanovg https://github.com/memononen/nanovg
- JonnieCache 11y ago
  What I want is 3d stuff whizzing round, interacting in "impossible" escher-esque ways with the 2d text. I think the stencil buffer is what I need. I wish I could describe what I'm talking about better...
  - exDM69 11y ago
    The stencil-then-cover trick only works if you're displaying on a flat surface. If you want to have your vector art in 3d, you need to use some other method or render vector shapes to texture first.
    - JonnieCache 11y ago
      Yeah, thats the idea. The vector art would be 2d, hanging in space and then the 3d stuff would move "through" it in contradictory ways. I'm pretty sure buffer trickery is the way to go. Thanks for your advice.
zurn 11y ago
Check out the text and shapes/extrude examples at http://threejs.org/examples/ http://threejs.org/examples/
- JonnieCache 11y ago
  I always forget that three.js is a thing. That's totally what I should start with, otherwise I'll be here forever. Thanks.

exDM69 11y ago

> Does anyone know about text/vector rendering in webgl? There's three commonly used methods for this: 1) Tesselate your vector shapes to triangles. This is quite tricky to get right if you have concave polygons with holes in them. You can try to find the old GLU tesselator source and port that. 2) Use the stencil-then-cover trick, which is somewhat similar to stencil shadow volumes but in 2D. This is what the nanovg [0] library does (also NV_path_rendering). 3) Use signed distance fields, which is the best way to get good looking text/vector art if you project that into a 3d surface. You either need to pre-process your vector shapes into 2d distance field textures off-line or build a custom tesselator w/ a pixel shader that does this. WebGL is not special in this, the same tricks apply as normal OpenGL (ES). [0] https://github.com/memononen/nanovg https://github.com/memononen/nanovg

JonnieCache 11y ago
What I want is 3d stuff whizzing round, interacting in "impossible" escher-esque ways with the 2d text. I think the stencil buffer is what I need. I wish I could describe what I'm talking about better...
- exDM69 11y ago
  The stencil-then-cover trick only works if you're displaying on a flat surface. If you want to have your vector art in 3d, you need to use some other method or render vector shapes to texture first.
  - JonnieCache 11y ago
    Yeah, thats the idea. The vector art would be 2d, hanging in space and then the 3d stuff would move "through" it in contradictory ways. I'm pretty sure buffer trickery is the way to go. Thanks for your advice.

zurn 11y ago

Check out the text and shapes/extrude examples at http://threejs.org/examples/ http://threejs.org/examples/

JonnieCache 11y ago
I always forget that three.js is a thing. That's totally what I should start with, otherwise I'll be here forever. Thanks.