User Tag List

Results 1 to 10 of 10

Thread: SVG Asset Importer

  1. #1
    0

    SVG Asset Importer

    Get it now on the marketplace or on Gumroad!
    ---

    Since I use SVGs a lot and UE4 does not support them natively, I thought it would be a good idea to write my own importer
    Besides from creating textures from the SVGs, the plugin also allows to import them as distance fields, to create sharp masks in a material.
    See the video for a demonstration:




    Here is an example how the distance field importer works, the resulting texture has only 85 kB:

    Name:  Screenshot03-min.png
Views: 262
Size:  145.2 KB
    Name:  Screenshot04-min.png
Views: 254
Size:  385.3 KB
    Last edited by Cultrarius; 03-16-2017 at 04:39 PM.
    Particle Editor Extension: Marketplace Page | Documentation
    Code plugin which extends your particle effect toolbox with new possibilities.


    SVG Importer Plugin: Marketplace Page | Gumroad Page
    Import SVG (scalable vector graphics) files as rasterized rendering or as multi-channel signed distance field.

  2. #2
    0
    This is great! Nice work - distance fields are a bit black magic for me though - how in the blazes do they work?

  3. #3
    0
    Quote Originally Posted by Dannington View Post
    This is great! Nice work - distance fields are a bit black magic for me though - how in the blazes do they work?
    Thanks!
    This paper from Valve has is a very good explanation how they work. The multichannel part just takes the idea one step further and uses not just a greyscale image, but rather all colors to pack more information into the distance field (Valve also mentions this on the last page of their paper). This allows for example sharp corners in the result.

    Usually you would need a custom shader to convert the distance field back into a useable mask, but luckily EPIC already provides a "DistanceField" node in the material editor (as you can see in the screenshot). This is because they use the same technique to cache fonts you want to use in your game (because recreating a font character from a distance field is a lot cheaper than drawing it from its TTF outlines).
    Particle Editor Extension: Marketplace Page | Documentation
    Code plugin which extends your particle effect toolbox with new possibilities.


    SVG Importer Plugin: Marketplace Page | Gumroad Page
    Import SVG (scalable vector graphics) files as rasterized rendering or as multi-channel signed distance field.

  4. #4
    0
    The plugin is finally available on the marketplace!
    https://www.unrealengine.com/marketp...mporter-plugin
    Particle Editor Extension: Marketplace Page | Documentation
    Code plugin which extends your particle effect toolbox with new possibilities.


    SVG Importer Plugin: Marketplace Page | Gumroad Page
    Import SVG (scalable vector graphics) files as rasterized rendering or as multi-channel signed distance field.

  5. #5
    0
    Really cool plugin! Well done.

    I have some questions:
    1. Is color data taken from the SVG as well? For gradients, for example.
    2. Are non-square SVGs supported for distance field creation?
    Owner of VICO Game Studio LLC
    Twitter: @VICO_GameStudio
    Current Projects:
    CHIKARA: Action Arcade Wrestling in collaboration with Dave Horn (@Action937) and CHIKARA Pro Wrestling - WIP Thread
    VICO Dynamics Physics Library - Details: https://www.vicogamestudio.com/projects/vico-dynamics

  6. #6
    0
    Quote Originally Posted by VICOGameStudio View Post
    Really cool plugin! Well done.

    I have some questions:
    1. Is color data taken from the SVG as well? For gradients, for example.
    2. Are non-square SVGs supported for distance field creation?
    Thank you

    1. SVG color information is only taken into account if the SVG is imported as rasterized rendering. For distance fields only the SVGs path information is used.
    2. I don't know what you mean with non-square SVGs. The SVG paths are autoframed (scaled and moved) to completely fill a square texture object, but the SVG shapes/paths do not have to be squares themselves.
    Particle Editor Extension: Marketplace Page | Documentation
    Code plugin which extends your particle effect toolbox with new possibilities.


    SVG Importer Plugin: Marketplace Page | Gumroad Page
    Import SVG (scalable vector graphics) files as rasterized rendering or as multi-channel signed distance field.

  7. #7
    0
    Quote Originally Posted by Cultrarius View Post
    Thank you

    1. SVG color information is only taken into account if the SVG is imported as rasterized rendering. For distance fields only the SVGs path information is used.
    2. I don't know what you mean with non-square SVGs. The SVG paths are autoframed (scaled and moved) to completely fill a square texture object, but the SVG shapes/paths do not have to be squares themselves.
    1. I see, ok.
    2. Hmm, strange. Because we had tried it with a non-square SVG, an elongated graphic, and only the first quarter was put into the distance field texture. Any idea? I edited your source to see if creating/generating non-square distance field textures is possible and it works pretty well. There is only a small artifact I can't yet figure out.
    3. How would I go about adding an outline? From the Valve paper, it seems that checking the value after all of the min/max nodes and seeing if it's between a set threshold is the way. Is that correct here as well?
    Owner of VICO Game Studio LLC
    Twitter: @VICO_GameStudio
    Current Projects:
    CHIKARA: Action Arcade Wrestling in collaboration with Dave Horn (@Action937) and CHIKARA Pro Wrestling - WIP Thread
    VICO Dynamics Physics Library - Details: https://www.vicogamestudio.com/projects/vico-dynamics

  8. #8
    0
    Quote Originally Posted by VICOGameStudio View Post
    1. I see, ok.
    2. Hmm, strange. Because we had tried it with a non-square SVG, an elongated graphic, and only the first quarter was put into the distance field texture. Any idea? I edited your source to see if creating/generating non-square distance field textures is possible and it works pretty well. There is only a small artifact I can't yet figure out.
    3. How would I go about adding an outline? From the Valve paper, it seems that checking the value after all of the min/max nodes and seeing if it's between a set threshold is the way. Is that correct here as well?
    If you have a shape that you think should work but does not, feel free to send it to me and I will have a look at it. SVGs can be surprisingly complex and I could not test every possibility before releasing the plugin. I also plan to improve arc support for the plugin, because the current implementation does not seem to handle them correctly.

    As for the outline: that is a great idea that I did not consider before, thanks
    But I just tested it and it works exactly as you said!
    See the following material, as you increase the "Outline Threshold" parameter, the thickness of the outline increases. The thickness of the outline is also largely dependent on the "Pixel Range" import parameter - larger values create thicker outlines.

    Name:  MSDF_Outline_Mat.png
Views: 31
Size:  491.4 KB
    Particle Editor Extension: Marketplace Page | Documentation
    Code plugin which extends your particle effect toolbox with new possibilities.


    SVG Importer Plugin: Marketplace Page | Gumroad Page
    Import SVG (scalable vector graphics) files as rasterized rendering or as multi-channel signed distance field.

  9. #9
    0
    Sent you an email with the SVG in question.

    Ah, perfect! The outlines only go inwards though, correct? They don't add onto the outer edge?
    Owner of VICO Game Studio LLC
    Twitter: @VICO_GameStudio
    Current Projects:
    CHIKARA: Action Arcade Wrestling in collaboration with Dave Horn (@Action937) and CHIKARA Pro Wrestling - WIP Thread
    VICO Dynamics Physics Library - Details: https://www.vicogamestudio.com/projects/vico-dynamics

  10. #10
    0
    Quote Originally Posted by VICOGameStudio View Post
    Ah, perfect! The outlines only go inwards though, correct? They don't add onto the outer edge?
    Yes, exactly, they only go inwards. Also, after a certain thickness, all kinds of render artefacts start to appear, so it is only applicable for small outlines.
    Particle Editor Extension: Marketplace Page | Documentation
    Code plugin which extends your particle effect toolbox with new possibilities.


    SVG Importer Plugin: Marketplace Page | Gumroad Page
    Import SVG (scalable vector graphics) files as rasterized rendering or as multi-channel signed distance field.

Posting Permissions

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