I’ve been working with SVGs in a 2D project recently, and have been wanting to add an outline to some of the geometry I’ve imported. Been reading a lot about the different ways of adding an outline in OpenGL or with shaders. One technique uses a distance field texture to determine any single fragment’s distance from an alpha fragment in a shader to make it a different color. It seems as though you need to generate this distance field ahead of time however, and combine it with another color texture, not the vertex based geometry I’m drawing with my SVG data. Another technique I’ve seen a few times is the simpler idea of just drawing the geometry once, in the color of the border, then scaling it down from the center by some amount that equals the size of the desired outline, then drawing it again in the color of the fill. In theory this sounded perfect, and I’ve definitely used this technique when drawing simple shapes before, but I’m running into issues with my SVG imported geometry. I have saved the imported SVG vertex info to a
BatchRef instance by triangulating the
DocRef->getShapeAbsolute() object. Now this batch object has all of the SVG shapes in a single Vbo, so scaling down from center doesn’t really work. Hopefully these images help explain:
Draw a red rectangle, scale down a little and draw a black rectangle to get an outline result - perfect. Draw a red SVG document of some text, scale down a little and draw again in black to (ideally) get an outline result - not so perfect:
You can see what happens is that the Vbo for the batch object is made up of several disconnected shapes, so scaling and redrawing doesn’t work that way.
Do I need to break down my SVG document into separate shapes? Is there another ‘magic’ border shader that I haven’t run into yet to accomplish this? FWIW - I can call
gl::draw(*mSvgDoc) and it will only draw the outline of my document, however in a very thin line that I can’t seem to figure out how to make any thicker. (Have seen notes about GL_LINE_WIDTH being deprecated, not sure if that’s it either).
Also, I’m drawing these shapes many times in a single frame, so ideally the solution isn’t just
gl::draw(), gl::scale(), gl::drawSolid(), but perhaps that’s the only way?.
Any help is always appreciated, you guys are awesome!