Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: sirival on May 16, 2012, 08:11:45 AM

Title: Feature request - Alpha-tested magnification
Post by: sirival on May 16, 2012, 08:11:45 AM
Hi there,

I think it would be really awesome if you had an implementation of this paper:

http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf (http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf)

KvanteTore has already taken a shot at implementing this in Unity:

http://forum.unity3d.com/threads/68647-Scaling-Bitmap-Fonts (http://forum.unity3d.com/threads/68647-Scaling-Bitmap-Fonts)

Perhaps whenever you import fonts you could automatically generate the distance texture in your atlas maker, and all your text shaders could work with the Alpha Test Magnification shader ( which already exists in Unity ).

That would allow users to create 3d text that is very crisp at all distances and also automatically create outlines and shadows for it too. Imagine that you want to add some text on a wall like a WARNING sign. You could create a Label, put that on the wall in 3D and that would look really good at all distances instead of small and blurry like now.

I does require work of course, but it would be really nice!

Regards!
Title: Re: Feature request - Alpha-tested magnification
Post by: ArenMook on May 16, 2012, 03:03:45 PM
Yeeeah... except that there are no "text shaders". Fonts are generally a part of the atlas, and you can't apply that shader to the entire atlas or you will get some very weird results. I've looked into this before. It works well only in certain situations (font being in a separate texture, using a separate draw call, and pre-generated offline with plenty of padding in-between of characers). It's not a silver bullet.
Title: Re: Feature request - Alpha-tested magnification
Post by: sirival on May 17, 2012, 12:09:45 AM
Hey there - thanks for responding.

Well couldn't it work in a similar way to the way packed fonts work? You do need a different texture there and you are using a different material / shader to render packed fonts. So I would guess that your font maker could have an option to create a distance font texture instead of a 'normal' font texture  and add a shader that should be used to render text with this texture. It wouldn't work in every case of course but as packed fonts have their limitations so would that.

Let me know if I'm missing something!

Regards
Title: Re: Feature request - Alpha-tested magnification
Post by: ArenMook on May 17, 2012, 12:19:52 AM
Certainly can, and all you need to do is write a shader for it. No source code modifications necessary. :)

Keep in mind, font maker doesn't make textures. The font texture is created by an external program -- BMFont, bmGlyph, Glyph Designer, Hiero... I know at least one of them can make these maps already.
Title: Re: Feature request - Alpha-tested magnification
Post by: sirival on May 17, 2012, 07:33:56 AM
Cool!

I did that and it seems to work! Here is a screenshot:

(http://i48.tinypic.com/14abo89.png)
Title: Re: Feature request - Alpha-tested magnification
Post by: ArenMook on May 17, 2012, 03:15:35 PM
Nice! Share the shader and the process you've followed with the community for extra bonus points ;)
Title: Re: Feature request - Alpha-tested magnification
Post by: loopyllama on May 17, 2012, 03:36:29 PM
that is really cool!                                                                                                                             awesome work!
Title: Re: Feature request - Alpha-tested magnification
Post by: sirival on May 17, 2012, 03:46:09 PM
Well it took some time for me to end up with something that works and perhaps you might be able to help make this process a little more painless, if you are interested.

Here are the steps:
.

Messy but it worked for me. Let me know if it doesn't work for you!
Title: Re: Feature request - Alpha-tested magnification
Post by: ArenMook on May 17, 2012, 03:54:58 PM
Good stuff, thanks for sharing!
Title: Re: Feature request - Alpha-tested magnification
Post by: PixelEnvision on May 17, 2012, 07:49:21 PM
Nice work sirival, thx for sharing!  8)

Are you using this on a desktop project or mobile? I'm curious about the shader performance...
Title: Re: Feature request - Alpha-tested magnification
Post by: sirival on May 18, 2012, 01:54:15 AM
Hey there,

I've been working on a desktop - web player project so I haven't tested this on mobile. I think the shader should be pretty fast though.
Title: Re: Feature request - Alpha-tested magnification
Post by: rsoo on September 05, 2012, 06:35:49 PM
Quote from: sirival on May 17, 2012, 03:46:09 PM
Well it took some time for me to end up with something that works and perhaps you might be able to help make this process a little more painless, if you are interested.

Here are the steps:
  • Download this tool: http://bitsquid.blogspot.com/2010/04/distance-field-based-rendering-of.html (http://bitsquid.blogspot.com/2010/04/distance-field-based-rendering-of.html)
  • Download the shader found in this post:: http://forum.unity3d.com/threads/68647-Scaling-Bitmap-Fonts/page3 (http://forum.unity3d.com/threads/68647-Scaling-Bitmap-Fonts/page3)
  • Run BMFont ( I haven't used other font tools )
  • Make sure that you select an 8 bit depth!
  • Also select the XML option for the output file
  • Add  16-pixels padding to all sides of the characters
  • Select the white text with alpha preset
  • Save your settings and export the font
  • Open up the export settings again and select the text format for the output file
  • Export the font again with a different name ( we need both the XML and the text files )
  • Now run the tool you downloaded in step 1
  • Click File->Convert and select the .fnt file that was saved in step 8 ( the xml one ). This will create a new texture and a new .fnt file. Delete this new fnt file as it doesn't work for some reason
  • Time to import stuff in Unity. Import the shader from step 2. Import the texture created by the converter in step 12. Import the text fnt file created in step 10.
  • Change the extension of this fnt file to txt
  • Open the Font Maker and assign the font texture and the text file. Do not add them to your atlas just create a font without an atlas
  • Select the material of the font that was just created and change its shader to the one we downloaded
  • That should be enough. You can now create Labels with this font and your text should appear a lot sharper. Note that the default color of the new material is white and you cannot change that from the UILabel inspector. You need to go to your material and change the color there.
.

Messy but it worked for me. Let me know if it doesn't work for you!

which shader are you talking about in step 2? the one I tried did not work
Title: Re: Feature request - Alpha-tested magnification
Post by: sirival on September 06, 2012, 02:09:25 AM
Quote from: rsoo on September 05, 2012, 06:35:49 PM
which shader are you talking about in step 2? the one I tried did not work

Hey there - the one I tried was the shader named "Ippo/Font/Plain".
Title: Re: Feature request - Alpha-tested magnification
Post by: rsoo on September 06, 2012, 05:44:47 PM
Quote from: sirival on September 06, 2012, 02:09:25 AM
Hey there - the one I tried was the shader named "Ippo/Font/Plain".

Hi, thanks for the clarification!

Unfortunately I followed your exact steps a few times over and I couldn't get it to work as intended

I downloaded the tool and the shader, followed your BMFont export options, converted the xml .fnt file, deleted the converted xml .fnt, put the converted texture and txt .fnt file into the font maker, and applied the shader but my resulting label resulted nothing the font.  Any ideas on what I may have done wrong?

Thanks again!
Title: Re: Feature request - Alpha-tested magnification
Post by: sirival on September 07, 2012, 04:14:36 AM
Quote from: rsoo on September 06, 2012, 05:44:47 PM
Hi, thanks for the clarification!

Unfortunately I followed your exact steps a few times over and I couldn't get it to work as intended

I downloaded the tool and the shader, followed your BMFont export options, converted the xml .fnt file, deleted the converted xml .fnt, put the converted texture and txt .fnt file into the font maker, and applied the shader but my resulting label resulted nothing the font.  Any ideas on what I may have done wrong?

Thanks again!

Hi there,

I added a quick video showing this exact process. It doesn't have any sound but hopefully it will help you out a bit. Other than that I have no idea what might be wrong! Note that even though I managed to make this work I am not actually using these fonts in my game - it was more R&D so I'm not sure if it works fine in practice but at the moment I don't see a reason why it shouldn't.

Here's the link to the video: http://youtu.be/Jd7mqoOBkI0 (http://youtu.be/Jd7mqoOBkI0)

Regards!
Title: Re: Feature request - Alpha-tested magnification
Post by: mdeletrain on October 03, 2012, 04:40:48 AM
Quote from: sirival on May 18, 2012, 01:54:15 AM
Hey there,

I've been working on a desktop - web player project so I haven't tested this on mobile. I think the shader should be pretty fast though.

Actually, this method uses alpha tests which has a deep impact on PowerVR's GPU's, especially SGX one (used in a lot of mobile devices (http://en.wikipedia.org/wiki/List_of_PowerVR_products)) as it discards the texture cache of the cell being rendered. This should be really slow for example on iPhone 3GS / iPhone 4 / iPad 1.

For other mobile GPU's I don't know.
Title: Re: Feature request - Alpha-tested magnification
Post by: sirival on October 03, 2012, 04:42:47 AM
I haven't actually done any work on mobile devices yet so thanks for the heads up!