Techniques for improved font rendering?
Moderator: Moderators
Techniques for improved font rendering?
I read this thread on stackoverflow and it provides an interesting discussion on how to render nice fonts in OpenGL:
http://stackoverflow.com/questions/5262 ... ersion-4-1
It mentions this paper which describes a technique of rendering fonts using a signed distance field with superb results:
http://www.valvesoftware.com/publicatio ... cation.pdf
And there is a tool that helps creates distance fields textures for fonts:
http://www.gamedev.net/topic/491938-sig ... font-tool/
Anyone up for attempting this in ZGE?
http://stackoverflow.com/questions/5262 ... ersion-4-1
It mentions this paper which describes a technique of rendering fonts using a signed distance field with superb results:
http://www.valvesoftware.com/publicatio ... cation.pdf
And there is a tool that helps creates distance fields textures for fonts:
http://www.gamedev.net/topic/491938-sig ... font-tool/
Anyone up for attempting this in ZGE?
Never mind, guess it really depends on the resolution of the original source how well the scaling performs ( makes sense ). Screenshots use a 128x128 distance field again, but this time with anti-aliasing.
I'll try the double distance field to preserve sharp edges trick some other time.
K
- Attachments
-
- 02.png (23.05 KiB) Viewed 14157 times
-
- 01.png (22.37 KiB) Viewed 14158 times
Sure,
There's not a whole lot to it ( for the aliased shaderless effect ). Most of the work is being done by the distance field generator ( which basically "abuses" bilinear filtering ).
K
There's not a whole lot to it ( for the aliased shaderless effect ). Most of the work is being done by the distance field generator ( which basically "abuses" bilinear filtering ).
K
- Attachments
-
- Outrun.zgeproj
- (12.28 KiB) Downloaded 627 times
For those looking at Kjells example, notice how low resolution that bitmap really is by setting Bitmap.Filter to Nearest.
Even though I've read the paper and examined your implementation I still don't understand why this is working. When the texture is rendered the alpha values through bilinear filtering extrapolates towards the higher resolution image that is the source of the alpha?
Even though I've read the paper and examined your implementation I still don't understand why this is working. When the texture is rendered the alpha values through bilinear filtering extrapolates towards the higher resolution image that is the source of the alpha?
@Ville
Bilinear filtering uses the nearest pixels to determine the interpolated value, so if you calculate / abuse those nearest values to give you the desired value ( stroke angle / gradient determined by analyzing the high resolution source ) as a result of this calculation, you get the results that you're getting* It's quite clever
*Classic case of knowing the desired result + knowing the calculation .. just need to feed it the correct input.
K
Bilinear filtering uses the nearest pixels to determine the interpolated value, so if you calculate / abuse those nearest values to give you the desired value ( stroke angle / gradient determined by analyzing the high resolution source ) as a result of this calculation, you get the results that you're getting* It's quite clever
*Classic case of knowing the desired result + knowing the calculation .. just need to feed it the correct input.
K
- jph_wacheski
- Posts: 1005
- Joined: Sat Feb 16, 2008 8:10 pm
- Location: Canada
- Contact:
Cool!
Yes, this is rather interesting,. it is a strange method to work with, but the results are looking quite good.
Some searching points to using the Distance Fields for mesh generation.., could also be interesting to try that.
I will see if I can get a grip on using this method for text rendering,. as well it could be useful as an interesting rendering method for sprite based game setups..,
Some searching points to using the Distance Fields for mesh generation.., could also be interesting to try that.
I will see if I can get a grip on using this method for text rendering,. as well it could be useful as an interesting rendering method for sprite based game setups..,
iterationGAMES.com
Very neat technique that produces accurate distance fields at much lower resolutions using anti-aliased input ( instead of binary ).
http://webstaff.itn.liu.se/~stegu/aadis ... eprint.pdf
Still wouldn't recommend generating them in real-time, but it does speed up the process quite a bit ( when using a significantly smaller image ).
K
Hi Kjell, because I want to produce some nice looking fonts and other textures for my projects, I returned to this interesting topic with a couple of questions: How did you produce the final bitmap for your Outrun.zgeproj demo? What tools and settings you used? I think SDFont supports just square png images, what's the best way to produce non-square images, are there some pitfalls? Tanks in advance for sharing your know-how.
In my trial produced a distance map from hi-res font bitmap, downscaling it to 25% of original size and replaced RGB with 255; alpha channel remained the same as in distance map. Problem was that after importing the png file to ZGE, pixels were not white, but there was applied some automatic antialiasing... so I was not able to reproduce your result without usage BitmapExpression for "post-processing".
P.S. I maybe could read the papers and try to reproduce your result by myself, but I think it is more effective to learn from somebody with know-how and experience like you.
In my trial produced a distance map from hi-res font bitmap, downscaling it to 25% of original size and replaced RGB with 255; alpha channel remained the same as in distance map. Problem was that after importing the png file to ZGE, pixels were not white, but there was applied some automatic antialiasing... so I was not able to reproduce your result without usage BitmapExpression for "post-processing".
P.S. I maybe could read the papers and try to reproduce your result by myself, but I think it is more effective to learn from somebody with know-how and experience like you.
Hi Rado1,
In case you have any further questions, let me know.
K
I actually used Photoshop, which works well enough for 1D distance fields ( 2D is a little tricky though ). You can find the required steps here.Rado1 wrote:How did you produce the final bitmap for your Outrun.zgeproj demo? What tools and settings you used?
In case you have any further questions, let me know.
K
Thanks Kjell. However, I have the final question: how did you achieve that importing a png file to ZGE did not change RGB colors of pixels according to Alpha? See the attached project and bitmap I used. BTW if you enable disabled BitmapExpression the result is correct; but I would like to avoid it.
- Attachments
-
- demo.zip
- demo project and bitmap with distance field
- (55.67 KiB) Downloaded 356 times
-
- imported bitmap - original RGB values (255,255,255) were replaced by values from apha channel by ZGE
- scr1.jpg (21.58 KiB) Viewed 11411 times