Export opaque and transparent geometry data for png

Questions and postings pertaining to the usage of ImageMagick regardless of the interface. This includes the command-line utilities, as well as the C and C++ APIs. Usage questions are like "How do I use ImageMagick to create drop shadows?".
Post Reply
Atomic Orange
Posts: 2
Joined: 2018-03-01T07:18:14-07:00
Authentication code: 1152

Export opaque and transparent geometry data for png

Post by Atomic Orange »

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!
snibgo
Posts: 12159
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

Re: Export opaque and transparent geometry data for png

Post by snibgo »

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).
snibgo's IM pages: im.snibgo.com
Atomic Orange
Posts: 2
Joined: 2018-03-01T07:18:14-07:00
Authentication code: 1152

Re: Export opaque and transparent geometry data for png

Post by Atomic Orange »

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.
snibgo
Posts: 12159
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

Re: Export opaque and transparent geometry data for png

Post by snibgo »

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

Image

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

Code: Select all

%IM%convert ^
  mt_shield.png ^
  ( -clone 0 -alpha extract ^
    -fill Black +opaque White ^
  ) ^
  -alpha off ^
  -compose CopyOpacity -composite ^
  -trim ^
  mt_opaque.png
Image
mt_opaque is fully opaque where mt_shield.png is fully opaque, and fully transparent elsewhere.

Code: Select all

%IM%convert ^
  mt_shield.png ^
  ( -clone 0 -alpha extract ^
    ( +clone -fill Black +opaque White ^
      -negate ^
    ) ^
    -compose Darken -composite ^
  ) ^
  -alpha off ^
  -compose CopyOpacity -composite ^
  -trim ^
  mt_trans.png
Image
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.

Code: Select all

identify mt_opaque.png
mt_opaque.png PNG 63x63 300x200+103+60 8-bit sRGB 3.57KB 0.000u 0:00.000

identify mt_trans.png
mt_trans.png PNG 73x76 300x200+98+54 8-bit sRGB 5.65KB 0.000u 0:00.000
snibgo's IM pages: im.snibgo.com
Post Reply