User Tag List

Results 1 to 7 of 7

Thread: Vector Upscaler

  1. #1
    No Products Registered

    Join Date
    Sep 2007
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vector Upscaler

    Hello again :3

    This shader will be extremely useful to you guys who are designing elements for your game that need to scale up (such as HUD elements, stencil shapes, and glyphs), but don't want to waste lots of disk space or texture memory to store super-high resolution versions of the elements. The algorithm is based on a technique used extensively in Valve's TF2 game for stenciled graphics and described in further detail here.

    How it works: A distance map is 'baked' inside the alpha channel, which when a threshold filter is applied to, gives a crisp outline for the texture. Since the GPU upscales using bilinear filtering, nearby pixels are used to smoothly interpolate the distance value automatically, at virtually no cost. A smoothstep() function is used to further improve the effect by taking the resulting outline's alpha value and interpolating slight variations of the threshold value against the distance map.

    I've taken the basic premise behind the algorithm and incorporated it into an HLSL shader. Right now, the only parameter that is possible to alter is the threshold level, which allows for a bit of fudge factor when creating the distance maps manually in Photoshop rather than writing a program to generate the maps automatically. Because Photoshop messes with the curves when in Grayscale mode, this might produce some unexpected results when working in (or converting to) grayscale. I'm not sure if this can be fixed with an appropriate color profile, but the effect seems to avoid being munged when it's stored in the alpha channel. Later on, I might implement some of the other tricks Valve suggested in the paper, such as Drop Shadow and Outer Glow, directly into this shader.

    How to create a distance map:

    First, you need a crisp outline at a large resolution of the image you wish to scale (I recommend at least 1024x1024). Preferably, the alpha channel is already loaded into photoshop, and not separate from the image. If they are separate, merge them so you have an alpha-blended image.

    Now, clone the layer and add the following effects:

    Outer Glow:
    Blend: Normal
    Opacity: 100%
    Color: (128,128,128)
    Technique: Precise
    Spread: 0%
    Size: 150 (Essentially, Width/8 with a little extra)

    Inner Glow:
    Blend: Normal
    Opacity: 100%
    Color: (255,255,255)
    Technique: Precise
    Source: CENTER
    Size: 128-150

    Color Overlay:
    Blend: Normal
    Color: (128,128,128)


    This will give us the distance map needed for the shader. Now, we need to copy it to the alpha channel. One way to do this is to go into Channels, and click the "Load Channel as Selection" button. From here, you have the alpha component as a selection. By clicking Select->Inverse and hitting the Del key on your RGB map, you should get something like this:



    Now, simply scale it down to the size you want (I chose 128x128 for my example MFA), and import it into MMF and activate the shader. If you're lucky, you won't have to adjust the threshold level at all. However, if the outlines seem too small/large, simply adjust the threshold level using the parameter.


    I've included an example with the shader to show that you can use this for multi-colored images, and not just stencils, but where this effect is most impressive is for things like HUDs, trees and foliage on multiple parallax scrolling layers, and especially text. You can get near-perfect scaling up to HD levels from a distance map as small as 64x64 (!), but you can go even smaller than that if you don't plan on scaling up too big (for example, resizing hud elements based on display resolution).


    Enjoy! And, now that I think about it, wouldn't it be cool if Actives' "Anti-Alias" option actually did something like this in HWA automatically instead of what it does right now?

    Attached files Attached files

  2. #2
    No Products Registered

    Join Date
    Sep 2007
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Vector Upscaler

    A screenshot for comparison purposes


  3. #3
    Clicker Multimedia Fusion 2 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleUnicode Add-on
    iamjot's Avatar
    Join Date
    Nov 2008
    Location
    Austria
    Posts
    718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Vector Upscaler

    wow! this is pretty impressive. i try to fool around with it a bit. nice

  4. #4
    Clicker Fusion 2.5 DeveloperSWF Export ModuleUnicode Add-on
    Looki's Avatar
    Join Date
    Aug 2006
    Location
    Karlsruhe, Germany
    Posts
    3,739
    Mentioned
    4 Post(s)
    Tagged
    1 Thread(s)

    Re: Vector Upscaler

    Wow, really cool. Never seen this technique before!

  5. #5
    Clickteam Clickteam
    Nico's Avatar
    Join Date
    Jun 2006
    Location
    France
    Posts
    2,541
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Re: Vector Upscaler

    impressive, wow!
    --------------------------------------
    Nicolas "Nico" Sourdeval
    Clickteam

  6. #6
    Clicker Multimedia Fusion 2 DeveloperSWF Export Module

    Join Date
    Aug 2006
    Posts
    2,335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Vector Upscaler

    I made a slightly modified alternative version -

    Code:
    sampler2D img;
    sampler2D bkd : register(s1); 
    float fBlend;
    
    float4 ps_main( in float2 texCoord : TEXCOORD ) : COLOR
    {
        float4 Color = tex2D(img, texCoord.xy);
        float4 alpha = float4(Color.rgb, smoothstep(fBlend - 0.01,fBlend + 0.01,Color.a));  // Anti-aliasing blend value
    
        return alpha;
    }
    
    // Effect technique
    technique tech_main
    {
    	pass P0
    	{
    		// shaders
    		VertexShader = NULL;
    		PixelShader  = compile ps_2_0 ps_main();
    	}
    }
    It does not use the shadow bits and sends the alpha directly to the return, the in and out is edited a bit also. I tested with a regular up-scaled image rather than a distance map and it seemed to work the same with my side by side effect toggle test.

    This is a great effect, it gives a nice sharp edge even scaled up high and is very useful. Thanks

  7. #7
    No Products Registered

    Join Date
    Sep 2007
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Vector Upscaler

    good modifications; originally, I had some code which did drop shadows in this (and also manual stencil coloring), but I hacked it out and left the leftover code as-is in case I wanted to add it back later. This simplification definitely improves readability.

    The regular trick without the distance maps is normally called "alpha-testing" and it works great in most cases. What the distance map does to improve the edge readability is most apparent when upscaling super tiny textures (like 64x64 or smaller) to super large size, like fonts or foliage. "Plateau steps" can appear when scaling using alpha-testing under those circumstances, but can be mitigated with the smoothstep() function by baking even a small amount of distance mapping into the alpha channel.

    Example of "Plateau steps":

    See full image and look carefully at the edges of the circles...

Similar Threads

  1. Vector bounce?
    By MostDreaded in forum Multimedia Fusion 2 - Technical Support
    Replies: 6
    Last Post: 16th January 2011, 08:31 PM
  2. Vector Art/Drawing?
    By JGooler in forum Hardware Accelerated Runtime
    Replies: 8
    Last Post: 14th July 2010, 04:02 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •