Extrude on Svg data

Using Cinder
1

Hey Embers,

I’ve got a question about the extrude function. I’m currently using it on a number of shapes loaded from SVG files. I render the extruded shapes and find that some of the extruded surfaces (i.e. the sides of the shape if that makes sense) don’t seem render properly.

I realized that it’s most likely the normals facing the wrong way, and this would seem to be confirmed by the fact that when I flip the art upside down (which I need to do be cause 2D art more or less has the Y-axis going downwards, where as I want it going upwards) the bad/good surfaces flip.

I was about jump on this forum and ask for help, when I realized it’s probably the winding order of the contours. Does anyone have any advice on how to determine what the proper winding should be? I’ve got both simple shapes, as well as convex ones with ‘carved holes’ in them.

Cheers,

Gazoo

2

I thought some additional information would be helpful. In the simplest case I’m rendering contours read from an svg file representing a simple logo of mine - I’ve added the exact data at the end of this post if anyone is interested.

If load the data and extrude a shape from the unmodified data, I end up with the followin result. Not exactly what I want as all the newly created sides likely have their normals flipped inward.

extrude-bad

Given that (0,0) is in the top-left of a general 2D plane, and (0,0,0) is the ground in general 3D graphics, I flip the entire y-axis and extrude again, yielding this outcome:

extrude-good

This looks great! But… Not all the svg files seem to be wound the same way. Flipping some of them actually causes the problem instead :confused:

Here’s the logo’s svg data in-case that’s of interest:

 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Main_layer"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="451.613px"
	 height="307.618px" viewBox="200.127 97.362 451.613 307.618" xml:space="preserve">
<path d="M425.803,97.362c-80.449,0-145.666,45.368-145.666,101.333h20.69c5.597-44.657,59.471-79.691,125.116-79.691
	c65.646,0,119.521,35.034,125.115,79.691h20.409C571.469,142.73,506.253,97.362,425.803,97.362z"/>
<path d="M282.982,296.728c-11.267,0-19.004-2.447-23.218-7.345c-3.82-4.408-5.731-10.382-5.731-17.924
	c0-7.443,2.181-13.394,6.539-17.851c4.36-4.456,11.781-6.686,22.264-6.686h17.478v-41.895H269.56
	c-23.534,0-41.405,6.878-53.613,20.631c-10.547,11.806-15.82,26.875-15.82,45.213c0,18.047,4.248,32.972,12.744,44.777
	c11.037,15.316,29.347,22.973,54.933,22.973h32.51v-41.895h-17.331V296.728z"/>
<polygon points="521.073,205.029 499.541,205.029 469.219,205.029 426.45,311.669 386.015,205.029 352.344,205.029 334.599,205.029 
	310.545,205.029 310.545,404.98 352.344,404.98 352.47,404.98 369.446,289.843 415.54,404.98 436.176,404.98 484.467,289.843 
	499.247,404.98 499.541,404.98 541.344,404.98 541.344,205.029 "/>
<path d="M635.919,225.66c-12.209-13.753-30.08-20.631-53.613-20.631h-30.75v41.895h17.475c10.484,0,17.904,2.229,22.265,6.686
	c4.356,4.457,6.538,10.407,6.538,17.851c0,7.542-1.909,13.516-5.729,17.924c-4.215,4.898-11.953,7.345-23.219,7.345h-17.328v41.895
	h32.508c25.584,0,43.896-7.655,54.932-22.973c8.496-11.805,12.744-26.729,12.744-44.777
	C651.738,252.536,646.466,237.466,635.919,225.66z"/>
</svg>

Cheers,

Gazoo

3

For anyone following along at home still, I believe I’ve found a fairly helpful answer on stack overflow.

Note that the solution is intended for actual points in a polygon, so if you intend to apply the method to a Shape2d object containing a series of Path2d objects, I recommend looking into (and using) the subdivide function in the Path2d object, as that will generate the actual points along the polygon, as opposed to the more abstract (but generally more useful) representation in the Path2d object.

If you don’t know what I mean or still have issues, feel free to put that in a response below.

Unfortunately, in my instance I believe I’ve run into a bug with getting Shape2d objects from Svg data in Cinder which I’ll be posting about, and linking to here once complete.

Cheers,

Gazoo