set transparency of texture(image) on sphere primitive P3D

edited April 2018 in Questions about Code

I thought this could be done with tint() or setTint().... but I can't make it work. Can anyone help ?

I'm using setTexture() to apply a user choosen image to the sphere and would like the user to be able to change the transparency of this texture/image... as there are other 3D objects rendered within the sphere I would like to be able to see.

simple example from a question regarding setTexture but not about transparency:

PImage earth; 
PShape globe;

void setup() { 
  size(600, 600, P3D); 
  background(0); 
  earth = loadImage( "world32k.jpg");
  globe = createShape(SPHERE, 200); 
  globe.setStroke(false);
  globe.setTexture(earth);
}

void draw() { 
  translate(width/2, height/2);
  shape(globe);
}

where would you use tint() or setTint() in the above to make the globe semi transparent ?

Cheers, mala

Answers

  • Answer ✓

    From a fair bit of research, I've come to conclusion this is not possible using a 3D primitive, without actually editing the image to add an alpha channel in the first place...which is not really going to work long term I think. Maybe possible if I built my own sphere vert by vert and used tint(), but not sure ?

  • If only processing could add transparency to images...

  • @koogs Are you saying it IS possible to add an alpha channel or adjust transarency of a non alpha image (jpg for example) within Processing ? Perhaps by playing with the pixels[] ?

  • this should work

    PImage earth; 
    PShape globe;
    
    void setup() { 
      size(600, 600, P3D); 
      background(0); 
      earth = loadImage("http://" + "www.jbcse.com/images/reference/world32k.jpg");
      earth.loadPixels();
      for (int i = 0 ; i < earth.pixels.length ; i++) {
        // clear top half of alpha byte
        earth.pixels[i] &= 0xfffffff;
      }
      earth.updatePixels();
      globe = createShape(SPHERE, 200); 
      globe.setStroke(false);
      globe.setTexture(earth);
    }
    
    void draw() { 
      translate(width/2, height/2);
      shape(globe);
    }
    

    but it doesn't. it loads the file and clears the top half of the alpha byte, making it semi transparent. but it doesn't show up.

    have you tried it with a semi transparent image? a png?

  • there is another problem as well - you are only setting the background in setup. if you don't set it at the start of draw then any transparent picture will continually overdraw itself and the effects of the alpha will decrease - like painting lots of thin layers.

    but this isn't enough to fix the above.

    (the png does something, but i'm not sure it's what you want)

  • edited April 2018

    @koogs thanks for the effort. You can do something with a png image, but I don't really want to be using png images if at all possible. Was aware of background needing to be moved, sorry should have changed that in the posted code which I had just copy / pasted from as a simple example, as my code is rather more complex.

    What I'm trying to do is related to my other question here: https://forum.processing.org/two/discussion/27796/get-the-rgb-value-of-a-pixel-on-a-textured-sphere

    I am wanting to get the RGB (actually just greyscale would do to start) values at a given pixel on the (image)textured surface of a sphere. The actual pixel chosen (or hopefully in future an average of say 4x4) is determined by a vector from a cube positioned near the sphere's surface, this cube is orientated so it's z axis points exactly at the center of the sphere.

    The sphere is representation for the user, it can be rotated on 3 axis but does not move, the user can choose what image to texture the sphere with. These images in essence are HDR 360º panoramas shot and usually used as enviroments,etc for rendering in 3D Apps. They nearly always come with a hdr file and a full size jpeg version as well as a small jpg, the small jpg is handy for cheating envrionment lighting. They never seem to come with png files, though it's easy to convert first before loading into processing I would prefer not to if possible and instead use the jpg, cutting out a step.

    The reason I want transparency is only to make it easier for the user to interact with this image mapped sphere as there are other things in the scene they would want to see in relation to the rotation of the sphere. I have a camera that can rotate and zoom around this sphere but it would help a lot to be able to see what is behind the sphere as well at times.

    These other things that need to be seen include the cube (in fact many cubes), which do not move or rotate at all, all their positions are set from a fixed array.

    The cubes are representation of real world lights...I'm wanting to get the pixel RGB data from the chosen texture at the position associated with each cube, then map it to brightness of the real world lights. In other words, i'm wanting to map an image across a bunch of real world lights... would be easy if the lights were all just in a flat plane, but actually they are in a sphere.. and the texture sphere's rotation is not fixed !

    This does not have to happen at fast rates and in fact it will probably be down to the user to choose the image and set rotation then hit a button to 'set' the values, at which point the values are calculated and put in an array.

    sorry for the long winded explanation but perhaps the bigger picture, makes it easier to understand? ;)

    Cheers, mala

  • Got this working after some more research. Need to create an new ARGB image of the right size and copy pixels over and add alpha value:

    PImage img;
    PImage img_Alpha;
    int alpha;
    
      img = loadImage("http://" + "www.jbcse.com/images/reference/world32k.jpg");  
      alpha = 128;
      img_Alpha = createImage(img.width, img.height, ARGB);
      img_Alpha.loadPixels();
      for (int i = 0; i<img_Alpha.pixels.length; i++) { 
        img_Alpha.pixels[i] = (alpha<<24) | (img.pixels[i]&0xFFFFFF);
      }
      img_Alpha.updatePixels();
    
  • edited April 2018

    @mala this might be better making img_Alpha a PGraphics created with createGraphics()? You should then be able to draw the image into it with tint()

  • get the pixel RGB data from the chosen texture at the position associated with each cube, then map it to brightness of the real world lights

    So What I understand is that each cube should take the color of the texture of the sphere based on the position of the cube to the sphere (I have seen your post of the cubes and the sphere). Just to understand better, each cube also has a light parameter so the color displayed is based on the light parameter times the RGB color from the texture?

    Or maybe I can understand better if you explain what real world lights means.

    Kf

  • @neilcsmith_net
    I hadn't thought of that, will have to give it a try, Thanks!

  • @kfrajer Yes and no :) The cube does not have a light parameter, it's just a visual representation of a physical LED light in the real world.

    I'm wanting to get the RGB values from the texture based on the position of the cube to the sphere and store them in an array. After that, other parts of my sketch fire them out the serial port to the network of LED lights.

Sign In or Register to comment.