 |
|
|
|
|
|
||
|
|
||
|
|
||
|
|
|
|
|
|
||
|
|
||
|
|
||
|
|
|
|
|
|||||||||||||||||
 GameDev.Net Discussion Forums  Image of the Day Distance field based Text renderingSend Topic To a Friend | View Forum FAQ | Track this topic | View Forum |
 Last Image Next Image  |
| Distance field based Text rendering |
|
 |
  Maddi Member since: 3/29/2005 From: Germany |
|||||||
|
|
||||||||
I recently came across the Valve article describing their method of converting decals to distance fields for high resolution rendering of much lower resolution input images. I thought that this may be interesting for font rendering in games and software to be able to easily scale fonts and add effects such as outlines and glow. I wrote a small proof-of-concept application with Qt to test the possibilities of the method. In the end I was a bit disappointed since the algorithm is quite slow ( although that may be improved ) and I find the result not really optimal for real text rendering. Especially sharp corners look a bit too much impure for my liking. ( It should be able to overcome this as seen at the end of the valve article, but I could not get my head around how to decide which second edge to use ). The text in the screen shots is generated via Qt in a very high resolution ( 8529x2048 ) and then scaled down to 533x128 with the algoritm, saving the distance to the next "in" pixel in the source image ( The feature image ). This Distance field image is then up-scaled to the destination resolution using simple bilinear filtering. The Luminance of the scaled version is then "pixelshaded" ( I did it in plain c++ code since I'm lacking a good opengl test app atm ) to add Outlines / smooth edges etc. If there is an interest I can clean up the code of the test app and post it too. Edit: I have put together a simple .qtz file to preview distance field images. You can get it here. Edit: I played around with it a bit more, and I got another nice shot of text. One major hint is never to use the highest distance value possible for the beginning of an outline. The part around the maximum is quite aliased.   [Edited by - Maddi on May 19, 2008 4:47:05 PM] |
||||||||
|
||||||||
|
Imgelling Member since: 2/17/2007 From: Lexington, KY, United States |
|||
Posted - 5/21/2008 12:18:31 AM |
||||
| Looks interesting. I noted that you said your/their/whatever's algorithm is too slow; was this just an exercise or do you plan on doing something with it? I am not saying what you did was trivial, I am just curious. As a side note, when I saw the IOTD in the side bar on the main page, I thought gamedev messed up with images or something, not sure why...just looked weird I guess. Eh, I'm rambling. |
||||
|
||||
|
skydave Member since: 7/5/2007 |
|||
|
Posted - 5/21/2008 5:22:55 AM |
||||
| Hi, very nice work! I read the article some days ago and I liked the idea. I would be interested in the source code since its on my to-implement-list. What do you mean with "slow" ? can you tell something about the fps-drop? And I think you are right, the solution seems only appropriate for roundish-cartoon style fonts, since the corners loose sharpness. Btw. seeing the images first time was the same experience for me as for Imgelling, I first thought there was some kind of error. Bye |
||||
|
||||
|
NineYearCycle Member since: 8/30/2004 From: Nottingham, United Kingdom |
|||
|
Posted - 5/21/2008 8:09:06 AM |
||||
| Instead of building a string and then making a signed distance image from the string why not composite individual letters that have already been made into signed-distance images onto a single texture? Would that improve the speed issues that you mention or are they unrelated? Nice work! by the way the images you've shown show a relly nice implmentation it seems. Lonesock made a tool for exporting character sets and I whipped up an OpenGL example for people to use in this thread a little while ago. NineYearCycle |
||||
|
||||
|
Maddi Member since: 3/29/2005 From: Germany |
|||
|
Posted - 5/21/2008 9:01:58 AM |
||||
| Imgelling: This was a proof of concept to check whether it would make sense to use it in one of my projects. ( I'm still not sure if I will use it ;) The Images are from the first version of the algo / output test app, therefor they are not very different. I should maybe have waited till I had the quartz preview app to have more interesting pictures. skydave: The algo that creates the low resolution distance field is quite slow, though I use a very brute force method. I can't say much about fps drop but I think its only marginal, depending on the complexity of the shader that is used in the end. Most of the shaders are so simply though that I think it should not make a big difference. NineYearCycle: Making individual letters is of course the way to go. Using a static string was just for the time being since I did not have a real Font renderer at the time. It will still be slow though, even a single letter takes quite some time to calculate with my brute force method, depending on the resulting quality you wish. The bigger problem is that I would like to generate the indiviual letters on the fly when they are needed, so that I don't have to supply prerendered versions for every character ( and I'm keen on having Unicode support, so that would be alot letters ;) and the algo is definetly to slow to do it in the background. |
||||
|
||||
|
Gowerlypuff Member since: 10/24/2004 From: United Kingdom |
|||
|
Posted - 8/15/2008 7:20:18 AM |
||||
| I've also seen this and am interested to know how to actually make the corners sharper. Looking at the Figure 8 in the doc it almost looks like they knew exactly which 2 edges to use to make the pointy corner. When you have a complex shape such as a font letter, you're going to have more than 2 edges, and I'm also confused as to how this will work with rounded edges also. Does anyone have any ideas based on how this would be done? |
||||
|
||||
All times are ET (US) |
Last Image Next Image |
|
