Text for Three.js

[zz85]

I'm currently trying to add 3d text support for three.js, and while I've made some progress with importing typeface.js fonts using some Polygon Triangulation algorithm, there's a couple of questions I have.

Here's is a sample geometry class for the letter Z
https://gist.github.com/985108

1. There's seems only to be 1 side of the faces rendered. Do I need to add another face even if its a same plane?
2. What are UV vertices for, and how can I map them?
3. Are there any significant differences between Face3 and Face4 other than 1 contain more than 1 vertex than another?
4. Any techniques to allow holes in the polygons. Any union/subtract methods available in three.js?

Joshua

[525c1e21-bd67-4735-ac99-b4b0e5262290]

What is your use case for this? Generally, rendering the text using the Canvas2D API and then using that as a texture on a plane is a simpler and arguably better solution.

Nevertheless...

1. Setting doubleSided to true on the mesh should bypass backface culling; causing the mesh to be visible from both sides.
2. UV coordinates are for texture mapping. In this case you would want to map to the 0,0 to the top left and 1,1 to the bottom right of the "bounding plane" of the text so that you could apply textures and other shader effects to the text.
3. A Face3 is a triangle and a Face4 is a quad. For usage, see
   • https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/Cube.js
   • https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/Cylinder.js
   • https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/Plane.js
4. "Holes" are exactly that; space that simply isn't covered by a polygon. This should be considered during the triangulation process of the text. I'm not aware of any routines in three.js for, say, triangulating a mesh to form a circular hole in the triangle. Although I consider this to be something quite useful.

[mrdoob]

Uhm, I know @doug managed to get some dynamic 3d text working on three.js already, I wonder where he left it. As far as I remember I was working on MacOS only. Maybe we could take a look at it again.

[zz85]

thank you for the responses. being new to computer graphics, i've alot to pick up along the way :)

the main use case is allow easy creation of 3d (or 2d) text objects. this would be useful for 3d typography or creating dynamic text easily. it seems such features exists in both pv3d and away3d.

i've considered rendering text as a texture, but is it possible to create extrude 3d text objects from it - perhaps as a depth map? in the process attempting my approach (with paths and polygon triangulation), it seems that it would be possible to abstract another feature for three.js - a drawing path. that means that one could have drawing context similar to canvas 2d context, with moveTo, lineTo, quadraticCurveTo, bezierCurveTo etc before extruding the shapes. this feature seems to exist in away3d too.

1. doubleSided works. I supposed I should switch it off once I added the bottom face so that performance is better?
2. This is a still a little over my head now. will come back to this.
3. Actually I'm trying to know whether there are reasons to use one over another (for example is Face4 more expensive if it gets converted into 2 Face3), or just use which ever is more convenient (triangles when u need them, and quads when u can have them)
4. I'll look into the triangulation algorithm to see if it can be extend for holes

One last point about dynamic 3d fonts is that users can plugin typeface.js fonts they have to be rendered http://typeface.neocracy.org/fonts.html otherwise, its also possible like pv3d to ship with a default font. (away3d seems to use a font parser instead).

[zz85]

@pyrotechnick, I've added 3d character generation although there are still having some holes despite creating a complete 3d model (plane plus extrusion). could it be that some vertices are not in the correct clockwise order, causing backface culling to interpret the sides incorrectly? I notice using doubleside solves this problem but I'm not sure if its the correct method to rectify this.

see https://gist.github.com/988576

In addition to include js file, you need a font file

<script type="text/javascript" src="THREE.FontText.js"></script>


<script type="text/javascript" src="http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/helvetiker-normal-normal.js&quot;&gt;&lt;/script>

use
var text3d = new THREE.Text("&", 100, 50, 8);
to create a 3d geometry.

[alteredq]

I've added 3d character generation although there are still having some holes despite creating a complete 3d model (plane plus extrusion). could it be that some vertices are not in the correct clockwise order, causing backface culling to interpret the sides incorrectly?

Yes, holes that go away with doubleSided seems like wrong vertex order in faces.

One thing you could try is to check where face normal is pointing to and if it seems wrong then change the order of vertices. Though it can be tricky to figure out where the normal should point to for sides of the letter.

[zz85]

thank you @alteredq.

i realized that i've mixed up the top and bottom faces, an fixing the order fixed the problems. :) the sides weren't too difficult, since the font paths actually did a good job at ordering the points correctly (CW for outer edges and CCW for holes).

Now what's left with is adding UV coordinates are for texture mapping (still figuring this thing out).

Just curious, using MeshBasicMaterial with the CanvasRenderer I see the polygon outlines while the WebGLRenderer doesn't show these lines.. (check some screenshots below) Is this something to do with the renderer or something I might have missed out?

Wireframe Mode
http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash4/247037_10150182222598302_724118301_6882919_2093065_n.jpg

CanvasRenderer
http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc6/249908_10150182218368302_724118301_6882868_208464_n.jpg

WebGLRenderer
http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc6/250268_10150182218398302_724118301_6882869_5689785_n.jpg

[mrdoob]

Looking good!

The lines thingie is something to do with the renderer. CanvasRenderer needs a mesh.overdraw = true; to "fix" these.

[zz85]

thank you @mrdoob!

was playing around with that option when i realized i didn't turn that back on :)

http://jabtunes.com/labs/3d/canvas_geometry_text.html#hello.mr.doob

what's left still's UV mapping... :P

[mrdoob]

Nice! :D