› › ›

black edges when saving for transparent pngs with P2D/P3D

EvilnescuEvilnescu
edited May 2016 in GLSL / Shaders

Hi all, My goal is outputting to a big image, so i'm working in a PGraphics that is "m" times larger than what the size() uses, and that gets rendered at the end of the draw() with a image(big,0,0,big.width,big.height). I have a class of snow-flake thingies, that get picked up from the data folder, and are in fact transparent pngs with everything white or transparent (no black in there whatsoever). It all looks fine, until i see the result of big.save(); The resulting png has black edges wherever the transparency layer is fuzzy. This happens in P2D and P3D, if i leave the default shader, it slows down horribly, but the result is fine. Look: colaj_000 the above is with P2D and the below is without specifying anything, just big = createGraphics(widthm,heightm); colaj_000-default

Tagged:

Best Answers

Answers

  • EvilnescuEvilnescu
    edited July 2014

    What I've tried so far, but doesn't work:

    1. big.blendMode(ADD) right before drawing the image in the class' draw method , then switching back to a normal blendmode. It however sums up the transparencies and I don't get the effect I'm looking for.

    2. big.blendMode(LIGHTEST) sounded good but it totally ignores alpha on the images

    3. right after big.beginDraw(), i do a big.background(255,0) or with my own color (like that yellow over there). Does nothing.

    4. now i'm thinking of somehow re-initializing the big PGraphics in default-shader, when i hit "S" to save the frame, drawing the frame on it, and switching back to P2D for speed/framerate.

    Having said that, I am quite desperate.

  • koogskoogs
    Answer ✓

    are these things moving or otherwise interactive? if not try adding noLoop().

    the above sounds a lot like what happens when you continually draw items with alpha without background() or noLoop() and the alpha values build up.

  • amnonamnon
    Answer ✓

    You option 4 may be a good workaround. This issue may be something for GitHub. For that you need a small runnable example and an example png. If you have those, perhaps you can post them on the forum first, to doublecheck if the problem arises for others as well.

  • EvilnescuEvilnescu

    Oh crap i've accidentally voted both replies as valid answers. Is there a way to undo that? Embarassing......

    @koogs - it is interactive , but the result is an image. Weirdly, it doesn't look like that (with the black edges) during normal operation, just when i save the scaled-up png. I guess the antialiasing that's happening naturally keeps it from showing. The thing is, it's not gradually multiplied alpha, because at the beginning of each draw loop I do a big.background()

    @ amnon - i am trying option 4 now, to see where it gets me. i'm also uploading the sketch. There are some links that might get broken, you have to fix them to run it, other than that i'm sure it will replicate my problem on a different machine as well. Here it is: https://dl.dropboxusercontent.com/u/16077822/circle_pack_rooms.zip

  • EvilnescuEvilnescu

    @amnon - fixed it with option 4. it now creates a duplicate buffer, big2, where just the drawing method gets called. But i still can't sleep easy knowing that png alpha is causing problems like that in P2D and P3D. If you could give the code i've attached in the previous comment a quick gander, i'd be much in your debt. Thanks!

  • EvilnescuEvilnescu
    edited July 2014

    sorry for the duplicate posting. i really am a certified noob i guess.

  • amnonamnon

    You can't withdraw accepted answers, but I have deleted the duplicate post.

    I have also tested your uploaded sketch and the saved file does not contain black edges, with the P2D renderer on my computer. Perhaps you need to update your Processing version? I used Processing 2.2.1 with a NVIDIA GeForce GTX 770 under Win8-64bit.

    By the way, really nice sketch so far! With regard to quality, you might also consider using SVG's and PDF export (aka 100% vector) instead of PNG's.

  • koogskoogs

    i too am not seeing this with the code you posted, perhaps that's the fixed version

    (linux, processing 1.5.1, nvidia gtx130(?))

    (you don't supply the .png file for the palette. and your use of paths makes things harder than they could've been to run this.)

  • EvilnescuEvilnescu

    You're right! I've updated to 2.2.1 and that fixed it for me. Thanks so much! Also for the compliment, that made my day.

    truth be told, i've always been a bit scared of PShapes/svgs, since i've had some difficulties with manipulating them. Maybe i'll re-adress those sketches and if i still don't get what's wrong, i'll ask for help here. Anyway, yeah, i'll definitely try to work with vector graphics, thanks for the tip.

    As for the paths, i'm supplying the palette from another sketch that extracts colors from a given image and outputs a 1 pixel high and n pixels wide png, so i can quickly pick and change the overall mood of the drawing. That's why I had to use external paths, sorry about the hassle.

Sign In or Register to comment.