Announcement

Collapse
No announcement yet.

SVG Asset Importer

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [PLUGIN] 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:

    Click image for larger version

Name:	Screenshot03-min.png
Views:	1
Size:	145.2 KB
ID:	1208496
    Click image for larger version

Name:	Screenshot04-min.png
Views:	1
Size:	385.3 KB
ID:	1208497
    Attached Files
    Last edited by Cultrarius; 03-16-2017, 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
    This is great! Nice work - distance fields are a bit black magic for me though - how in the blazes do they work?

    Comment


    • #3
      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.

      Comment


      • #4
        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.

        Comment


        • #5
          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

          Comment


          • #6
            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.

            Comment


            • #7
              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

              Comment


              • #8
                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.

                Click image for larger version

Name:	MSDF_Outline_Mat.png
Views:	1
Size:	491.4 KB
ID:	1125012
                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.

                Comment


                • #9
                  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

                  Comment


                  • #10
                    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.

                    Comment


                    • #11
                      Besides outlines, you can easily do drop shadows too with distance fields. That Valve paper linked here earlier had example for that too. You basically just offset the same distance field a bit and draw the shadow if the main shape isn't drawing anything there already

                      Comment


                      • #12
                        Originally posted by 0lento View Post
                        Besides outlines, you can easily do drop shadows too with distance fields. That Valve paper linked here earlier had example for that too. You basically just offset the same distance field a bit and draw the shadow if the main shape isn't drawing anything there already
                        That is also a great idea
                        Here is an example material that achieves this effect:

                        Click image for larger version

Name:	TX4mB8t.jpg
Views:	1
Size:	461.7 KB
ID:	1125864


                        Also, one user noticed that UI materials may create pixelized icons when used with very small icons. The solution is to increase the edge softness, but that of course makes the large icons look blurry.
                        His solution is to adjust the edge softness with this addition to the material:

                        Click image for larger version

Name:	DU72RkF.png
Views:	1
Size:	590.2 KB
ID:	1125865
                        Attached Files
                        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.

                        Comment


                        • #13
                          Hi, am looking at getting into UE and came across your plugin. I'm trying to understand if your import process treats SVGs as actual vector objects, or is the content converted to bitmap once imported? Is it only when the imported object is used as a mask that you get the value of the vector data?

                          I'm asking because I've spent a long time looking for a reasonably priced game development tool that supports display of real vector objects (and is able to colorize/affect them via script or code). The game I'm looking to do relies on a lot of primitive shape assets that need to scale and recolor, and building them all as images would seemingly be inefficient.

                          Thanks in advance for your response!

                          Comment


                          • #14
                            Originally posted by netdzynr7 View Post
                            Hi, am looking at getting into UE and came across your plugin. I'm trying to understand if your import process treats SVGs as actual vector objects, or is the content converted to bitmap once imported? Is it only when the imported object is used as a mask that you get the value of the vector data?

                            I'm asking because I've spent a long time looking for a reasonably priced game development tool that supports display of real vector objects (and is able to colorize/affect them via script or code). The game I'm looking to do relies on a lot of primitive shape assets that need to scale and recolor, and building them all as images would seemingly be inefficient.

                            Thanks in advance for your response!
                            During the import process, the SVG is rendered as image - so there is no way to access the SVG information at runtime. If you choose to import the SVG as distance field (probably what you mean with 'mask') then you get several benefits: very small texture sizes and infinite up-scaling with sharp edges. The disadvantage is that does not work well for complex shapes, but for simple shapes it is perfect.
                            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.

                            Comment

                            Working...
                            X