omz:forum

    • Register
    • Login
    • Search
    • Recent
    • Popular

    Welcome!

    This is the community forum for my apps Pythonista and Editorial.

    For individual support questions, you can also send an email. If you have a very short question or just want to say hello — I'm @olemoritz on Twitter.


    Weird behavior of alpha transparency

    Pythonista
    3
    6
    3448
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Mederic
      Mederic last edited by Mederic

      Hi,

      While exploring the scene module, I noticed that the transparency of SpriteNodes, using the BLEND_NORMAL mode, doesn’t behave the same way as in other apps (like Procreate).

      Basically, when I use a SpriteNode with a png texture with an alpha channel going continuously from alpha=1 to alpha=0, the picture is always darkened in the intermediate values of alpha.

      I took a screen capture but I don’t know how to insert it in the post.

      Essentially, I took a white image with a blurry alpha contour and used it as a SpriteNode’s texture in Pythonista. The background was white as well. When I do the same thing in Procreate, the image is still completely white, but when I do it in Pythonista, there is a very noticeable seam around the alpha contour (the parts where alpha is strictly between 0 and 1).

      This is strange because I thought the blending formula was (1-alpha)xbackground_color + alphaxfront_color

      So if both background_color and front_color are white (=1), the result should still be 1 regardless of the value of alpha.

      cvp 1 Reply Last reply Reply Quote 0
      • cvp
        cvp @Mederic last edited by

        @Mederic I don't have any answer but here you have a little script to:

        • pick a picture from your camera roll
        • send it to imgur
        • get in the clipboard the url where you can find it
          You still have to paste this url in this forum and we will see it.
        import pyimgur,photos,clipboard,os,console
        i=photos.pick_image()
        print(i.format)
        format = 'gif' if (i.format == 'GIF') else 'jpg'
        i.save('img.'+format)
        clipboard.set(pyimgur.Imgur("303d632d723a549").upload_image('img.'+format, title="Uploaded-Image").link)
        console.hud_alert("link copied!")
        os.remove('img.'+format)
        
        1 Reply Last reply Reply Quote 0
        • omz
          omz last edited by

          I think this may have to do with whether or not the alpha channel of your image is pre-multiplied or not, but frankly, I don't remember the details off-hand.

          1 Reply Last reply Reply Quote 0
          • Mederic
            Mederic last edited by Mederic

            Thank you for your answers,

            @cvp I tried your script but I get the error “No module named pyimgur”

            @omz I thought this as well, the thing is I exported the image out of Procreate in the .png format and also imported it in an app called “Animation and Drawing by Do Ink” and the issue wasn’t there. So the problem definitely is about how Pythonista handles the image. Maybe the solution would be that I write a custom shader.

            1 Reply Last reply Reply Quote 0
            • Mederic
              Mederic last edited by Mederic

              Here is my custom shader. It’s not very clean since it basically divides by alpha to cancel the premultiplication... so it lowers the image’s quality for small alphas, but it’s okay for my current purpose.

              Ideally though, I would like to prevent OpenGL from premultplying by alpha in the first place.

              precision highp float;
              varying vec2 v_tex_coord;
              // These uniforms are set automatically:
              uniform sampler2D u_texture;
              uniform float u_time;
              uniform vec2 u_sprite_size;
              
              void main(void) {
              		vec4 tex=texture2D(u_texture,v_tex_coord);
              		if(tex.a>0.05){
                  	gl_FragColor = vec4(min(tex.rgb/tex.a,1.0), tex.a);
              		}
              		else{
              			gl_FragColor = vec4(tex.rgb,0.0);
              		}
              }```
              cvp 1 Reply Last reply Reply Quote 0
              • cvp
                cvp @Mederic last edited by

                @Mederic I'm very sorry but I forgot to answer 😢
                You can find pyimgur here

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post
                Powered by NodeBB Forums | Contributors