Legacy ImageMagick Discussions Archive

Hello all you happy people.

I'm trying to enable front to back rendering on my webgl game engine. But I need two separate sets of geometry data associated with each sprite. Right now the best I can do is one geometry containing everything. But overdraw really kills browser performance, especially on mobile devices.

The issue and solution is detailed here:
https://community.arm.com/graphics/b/bl ... -opengl-es

I've looked through the ImageMagic command line options related to working with geometry, but I couldn't find anything that fits what I'm trying to do. So my question is, can Image Magic do this? Did I miss something noted somewhere detailing how to get both sets of data? And if it can, can someone give me some help setting up a basic export example? f.ex like the one with the shield illustrated in the link I listed above.

Thanks a bunch to anyone taking the time to read this, and potentially helping me figure out a way to make my games run better. Cheers!

In the linked blog, each shield image has pixels that are fully opaque, pixels that are fully transparent, and pixels that are partly transparent. IM can easily divide these into separate images.

The ordinary method using IM to build the final image would be to list the wall and shield images in back-to-front order, and "-layers flatten" them.

The blog suggests a more complex but 35% faster method: copy the opaque parts of the top-most shield, then the opaque parts of the next shield where a pixel hasn't already been drawn, and keep going to the bottom layer. Then use the ordinary back-to-front method but only on the semi-transparent parts of the shield images.

IM doesn't have a built-in "-compose" method that would do this. One could be written, or the process could be simulated in a script (but the script would almost certainly be slower than the ordinary method).

Hello snibgo,

Thanks for answering. I'm already using a tool that can extract geometry data in json format from any given sprite. And I also already have the final image. But something you said struck me as potentially very useful. You said IM can divide a png into multiple images containing only the wanted level of transparency. Does that mean you could split f.ex the shield into an image that has only the center opaque pixels, and another separate image that has only the shield border, where the pixels with transparency are?

If that's possible, I could extract the geometries separately from each resulting image, and then try to use them on the original png.

As a sample input, mt_shield.png is a crude shield drawn in Gimp. The size is 300x200 pixels:



We make two versions of this (Windows BAT syntax, IM v6):

mt_opaque is fully opaque where mt_shield.png is fully opaque, and fully transparent elsewhere.

mt_trans is partly opaque where mt_shield.png is partly opaque, and fully transparent elsewhere.

The images are trimmed eg to 63x63 pixels, but the PNG contains metadata that can reconstruct the original.