Extrude Text into 3D

[NickHardeman]

Hello,

I am trying to extrude a individual letters from a font into 3D. Right now I can get the triangulation of the 2D text and it works great thanks to this post. (See attached F)
http://forum.openframeworks.cc/index.php?topic=547.0

Extruding the outside path of the letters should not be a problem. However, I can not seem to find a way to access/determine if one of the ofPolylines are inside the polygon, like in openCV. In the O image attached, how do I access the red line? Once I can do this, I can extrude from the inside as well. Any thoughts?

[jefftimesten]

Hey Nick,

I googled "openFrameworks extrude text 3d" and it seems that you already figured it out, but I couldn't find your code, so for the benefit of anyone else who is trying to do this, here is what I did.  I'm no 3D expert, so any optimizations are very welcome.  If you just want to see it working, you can download an example here:
http://4u.jeffcrouse.info/of/ofxExtrudedText.zip


I'm drawing the wireframe of the top/bottom here just for illustration

Step 1: Load your font and get the paths of each letter (ofTTFCharacter is actually ofPath)

Code:

ofTrueTypeFont font;
font.loadFont("Arial.ttf", 72, true, true, true); // make sure you set that last 'true' to load outlines
vector<ofTTFCharacter> letterPaths = font.getStringAsPoints("Test String");
ofRectangle bbox = font.getStringBoundingBox("Test String", 0, 0); // you'll want this later

Step 2: You are going to have 1 mesh for the front of each letter, 1 for the back of each letter, and one for the strip that connects the front and back.  So make a vector to hold all of those meshes. For each letter, you can easily make the front and back this way.

Code:

vector<ofMesh> meshes;

int depth = 50;
for(int i=0; i<letterPaths.size(); i++)
{
    ofMesh front = letterPaths[i].getTessellation();
    ofMesh back = front;
    ofVec3f* v = back.getVerticesPointer();

    // push the vertices of the back face back by depth
    for(int j=0; j< back.getNumVertices(); j++)
    {
        v[j].z += depth;
    }

    meshes.push_back( front );
    meshes.push_back( back );
}

Step 3: To make the top/bottom strip that connects the front and back, get a bunch of ofPolylines from the ofPath and make triangles.

Code:

for(int i=0; i<letterPaths.size(); i++)
{
     vector<ofPolyline> lines = letterPaths[i].getOutline();
    for(int j=0; j<lines.size(); j++)
    {
        ofMesh side;
        vector<ofPoint> points = lines[j].getVertices();
        int k;
        for(k=0; k<points.size()-1; k++)
        {
            ofPoint p1 = points[k+0];
            ofPoint p2 = points[k+1];
            
            side.addVertex(p1);
            side.addVertex(p2);
            side.addVertex(ofPoint(p1.x, p1.y, p1.z+depth));
            
            side.addVertex(ofPoint(p1.x, p1.y, p1.z+depth));
            side.addVertex(ofPoint(p2.x, p2.y, p2.z+depth));
            side.addVertex(p2);
        }
        
        // Connect the last to the first
        ofPoint p1 = points[k];
        ofPoint p2 = points[0];
        
        side.addVertex(p1);
        side.addVertex(p2);
        side.addVertex(ofPoint(p1.x, p1.y, p1.z+depth));
        
        side.addVertex(ofPoint(p1.x, p1.y, p1.z+depth));
        side.addVertex(ofPoint(p2.x, p2.y, p2.z+depth));
        side.addVertex(p2);
    }
    meshes.push_back( side );
}

Step 4: Draw them!

Code:

ofPushMatrix();
    ofTranslate(60, ofGetHeight()/2.0);
    ofRotateX(ofGetFrameNum() * 3);
    ofTranslate(0, bbox.height/2.0);
    for(int i=0; i<meshes.size(); i++)
    {
        meshes[i].draw();
    }
ofPopMatrix();

[kylemcdonald]

rick also made an addon for this during art&&code https://github.com/companje/ofProjects

[NickHardeman]

this line is great: ofMesh front = letterPaths.getTessellation();

I used ofxDealunay to triangulate the letters and drew the letter into a FBO. I then check to see if the point is inside the polygon by checking against the FBO and removing the triangle if not. My approach seems more complicated than it needs to be, but it worked fairly well. :/



The link below has a more thorough description and a link to the 007 project.
http://nickhardeman.com/481/extrude-any-font-into-3d/

[arturo]

this line is great: ofMesh front = letterPaths.getTessellation();

you can also do:

Code:

ofVboMesh front = letterPaths.getTessellation();

to get it in a vbo ; )