Extrude, or, make 2d SVG path into 3d

Question

I am wondering if anyone has heard of some javascript which can take a simple SVG path that took maybe 30 seconds to create in illustrator or something and convert it into something that looks 3d. There is an extrude function in illustrator which does this. It is also called polling in sketchUp.

I am using Raphael.js now, but am open to other suggestions. A simple solution would be to make a copy of the path and move it a couple pixels down and to the right and give it a darker color behind the original path, but I am looking for something that might have a little more shading.

Thanks!

Answer 1

There is always a possibility to use three.js for extruding the path for use in webGL in browser:

http://alteredqualia.com/three/examples/webgl_text.html#D81F0A21010#23a

(More samples here:http://stemkoski.github.io/Three.js/)

It uses js-fonts and parses the path commands on them, extrudes the paths and renders the scene. In the same way it should be possible to take an SVG path and extrude it. Raphael has Raphael.parsePathString() which gives you the path segments as an array of individual segments. If you first convert the path commands to cubic curves using Raphael.path2curve() and Raphael._pathToabsolute(), you have only only one segment type so you can use three.js:s BEZIER_CURVE_TO command. If you have transformations applied on the path (which is usually the case in Illustrator export) you can flatten them using function from here: https://stackoverflow.com/a/13102801/1691517.

One possible starting point is here (click the fiddle of the answer): Extruding multiple polygons with multiple holes and texturing the combined shape

Three.js supports few path commands, but have not tested all of them ( http://threejsdoc.appspot.com/doc/three.js/src.source/extras/core/Path.js.html, see below).

THREE.PathActions = {

    MOVE_TO: 'moveTo',
    LINE_TO: 'lineTo',
    QUADRATIC_CURVE_TO: 'quadraticCurveTo', // Bezier quadratic curve
    BEZIER_CURVE_TO: 'bezierCurveTo',       // Bezier cubic curve
    CSPLINE_THRU: 'splineThru',             // Catmull-rom spline
    ARC: 'arc'                              // Circle

};

I have used a custom rather complex function to polygonize SVG path, so was no need to rely to other commands than moveto and lineto.

The downside is of course rather low support level for webGL, 31-53%: http://caniuse.com/webgl

---

Other more cross-browser solution is this SVG3d library if lesser quality and slowness is not an issue:

http://debeissat.nicolas.free.fr/svg3d.php https://code.google.com/p/svg3d/

Answer 2

I think this resource could be helpful to you, he uses d3 to generate 2D visualization and then uses d3-threeD to extrude.

Answer 3

Sounds like you want to use svg filters. Webplatform.org has a pretty good tutorial about that. Scroll down a bit and you'll find some lighting filters that looks like 3d.

Raphaël doesn't support filters though, so either you'll need to extend it, or just use svg directly.