The secrets of rendering guild emblems

[codemasher]

So there's the v1/guild_details API that enables us to render guild emblems on the fly - the question still is: how? The results have been mediocre at best (chance hit) because none of us knows the secrets of postprocessing these images.

So would it be possible for you to give us an example how to properly render guild emblems? (preferably in a language thats read- and/or usable for most of us (PHP! :P) The example above has been created by this cheap examply example code.

See also this thread: https://forum-en.guildwars2.com/forum/community/api/API-Suggestion-Guilds/page/2#post2155863

[ghost]

In my experience, PHP brings wrong color values in conjunction with Imagick.

Here PHP / Imagick: https://apps.teufelspack.de/graph/emblems_imagick.php?guild_name=Teufelspack

Here JS: http://emblems.gw2-tools.com/guilds/teufelspack

It can also be due to the ImageMagick version that the colors do not match.

[lye]

Yeah, I should dig out the foreground/background images and put 'em into /v2/files or something. IIRC the reason some of the renders are mediocre is because the official foreground/background source files are fairly low-res. From what I recall, node-gw2guilds went through and vectored all the low-res rasters, which is why those look really nice.

As for post-processing, I think there might be a per-material shader applied in-game depending on where the emblem is rendered but I'm not sure that makes a huge difference. Probably won't be exposing shaders, in any case (dump 'em yourself if you want 'em).

[codemasher]

In my experience, PHP brings wrong color values in conjunction with Imagick.

No, it's about the post processing. I had the same result at first, using the GD library.

Yeah, I should dig out the foreground/background images and put 'em into /v2/files or something.

This would be great! (but i guess it'd blow up /v2/files with ~200 additional items)

IIRC the reason some of the renders are mediocre is because the official foreground/background source files are fairly low-res.

As for my example, it may also be PHP's imgantialias() which maybe decreased the quality, but mostly the guessed post processing.

Btw. I've pulled together that above example script and cleaned it a bit up to a single file /w no dependencies: https://gist.github.com/codemasher/1cf2a5b0c323b0e67aef

[tivac]

This would be great! (but i guess it'd blow up /v2/files with ~200 additional items)

Good news, /v2/files supports pagination & IDs just like all the other endpoints so adding a bunch of content to it isn't much of a problem. One of the benefits of a unified pagination format.

https://api.guildwars2.com/v2/files?page=1 https://api.guildwars2.com/v2/files?ids=map_crafting_huntsman,map_crafting_cook etc.

[codemasher]

Maybe split the files API in a way? Like

/v2/files/map
/v2/files/wvw
/v2/files/guild_emblems
/v2/files//...

(Thats enough for another PR :D )

[tivac]

@codemasher The standard way to expose sub-endpoints like that would break back-compat on /v2/files, so I think that's a non-starter.

[lye]

@tivac, funnily enough, the background/foreground images are stored as an ordered list, and the /v1/guild_details endpoint returns the index into those lists. Also each background/foreground is a composite of multiple images (one for each color channel -- though I think all the backgrounds only have one).

Given this, I think it may make more sense to provide a /v2/guild/emblems endpoint that dumps all this out.

[tivac]

@lye I'm fine w/ adding another endpoint, I just don't want to add sub-endpoints to /v2/files :)

[fooey]

@tivac Any chance this is a thing that could happen?

I took a look at all the new emblems and I'm pretty pessimistic about being able to get them added to node-gw2guilds so that I can render them on guilds.gw2w2w.com

I got the SVG data from gw2emblem but I don't have any idea how @mtodor originally produced them.

[lye]

IIRC, didn't someone hand-create all the SVGs in node-gw2guilds?

The good news is that I've got some supporting code already in to dump out emblems. The bad news is that it doesn't have the new emblems (and I just missed the cutoff for making the Dec. 1st release) and ... the emblems are in a raster format.

[fooey]

My node-gw2guilds code has always used the svg path data originally published at https://github.com/mtodor/gw2emblem. I really don't have any idea how @mtodor pulled it off, but I've reached out to him to see about doing an update.

I played with a bunch of png => svg converters but I can't get good results, and for me at least, it looks like hours of work per image to do it manually

[lye]

So uhh, I might actually be able to get an endpoint out sooner than expected. What I've got right now is:

// GET /v2/emblem

[ "foregrounds", "backgrounds" ]

// GET /v2/emblem/foregrounds
// GET /v2/emblem/backgrounds

[ 1, 2, 3, ... ]

// GET /v2/emblem/foregrounds/1

{
    id : 1,
    layers : [
        "https://render.guildwars2.com/...",
        "https://render.guildwars2.com/...",
        "https://render.guildwars2.com/..."
    ]
}

// GET /v2/emblem/backgrounds?page=0&page_size=1

[
    {
        id : 1,
        layers : [
            "https://render.guildwars2.com/..."
        ]
    }
]

The catch is that the rasters tied to each foreground/background are used (by the game) as shader texture inputs. That means roughly that there's some preprocessing required to render them -- pretty sure nothing that can't be done in a canvas -- but you won't be able to plop 'em in an <img> element. The preprocessing bit is something I'd like to do in the future, but right now our rendering bits require a graphics context which is unavailable on the servers (because they're running as Windows services or something; I'm not too graphics-saavy).

[lye]

Slightly better example:

{
    "id": ​3,
    "layers": [
        "1.png",
        "2.png",
        "3.png",
        "4.png"
    ]
}

1. 
2. 
3. 
4. 

(note the alpha channels; it's really hard to see on github, but it makes compositing them super easy).

[codemasher]

Wow, that's super awesome! Gonna dig into it as soon as i've got time on my hands!

[mtodor]

I didn't know anyone used: https://github.com/mtodor/gw2emblem

Short description what I did to generate SVG paths for it. I used tool to convert PNG files into SVG - I think it was http://vectormagic.com. Mac OS X version.

1. I fetched all images from: https://wiki.guildwars2.com/wiki/Gallery_of_guild_emblems
2. batch converted them to SVGs (with restriction to number of colors used in exported SVG, otherwise I would not be able to change color in SVG to defined color)
3. I wrote script to generate wanted paths and export to JS format - so that I can handle shade and color overlapping nicely. (fe. example with shade: http://wiki.guildwars2.com/wiki/File:Guild_emblem_001.png or example overlap: https://wiki.guildwars2.com/wiki/File:Guild_emblem_127.png)

Rest is easy and result was better then I have expected. I always looked at: https://wiki.guildwars2.com/wiki/File:Guild_emblem_151.png - because it was one with most details. There was a lot more space for improvement, but for 8-10 hours project result was good enough.

I have tried to generate PNGs based on SVGs that I had, but result wasn't good enough for me. :)

I don't know how new emblems look like, so I don't know, can vector graphic be used for that or not.

[lye]

Okay, the new endpoint is up:

• All foregrounds
• All backgrounds

This also includes the new stuff, so post-processing is go.

[darthmaim]

Perfect timing, we've got all weekend to play around with this :+1:

[fooey]

Fantastic, thank you @lye!

And thank you too @mtodor for the original svgs, I'll give VectorMagic a look to see if I can figure it out.

[hackedd]

The example /v2/emblem/foregrounds/1 does not actually work (but /v2/emblem/foregrounds?id=1 does)...

[lye]

The example /v2/emblem/foregrounds/1 does not actually work (but /v2/emblem/foregrounds?id=1 does)...

Forgot to update; that should be fixed as of awhile ago.

Gonna close out this issue since everything should be working now.

[codemasher]

The main question still hasn't been answered:

So would it be possible for you to give us an example how to properly render guild emblems?

Especially the "properly" in there. So all we have now is basically the same we had before, just from offcial sources - thanks for that one - but can't you just poke your gfx people, engine programmers or whoever is responsible for that kind of rendering stuff to get a hint how to properly put these pieces together? Thanks!

[lye]

Ah, that's fair. I'll leave this open and see if I can get a better description of how those textures are composited.