Agnostic Transparencies

Processing Coding Questions
1

Hi there. Is there any way to draw transparent objects that allow them to stay transparent no matter which order they’re drawn?

Here’s a gif demonstrating how the order in which they’re drawn affects an object’s transparency relative to ones drawn after it:

TransparencyTest

Is there any straightforward way to draw the red & blue shapes that allow both to be transparent? Since they’re both the same distance from camera we can’t use any depth sorting, nor Comparable.compareTo() since I won’t be able to privilege one dimension or field over another.

Here’s the code in its entirety:


// TEST SURFACE TRANSPARENCIES BASED ON CREATION ORDER //

PShape psRed, psBlu;

void setup(){
  size(300,300,P3D);
  //hint(ENABLE_DEPTH_SORT); doesn't apply
  psRed = surf(150, 100, -50, color(255, 0, 0, 80), color(255, 255, 0, 150), 5);
  psBlu = surf(150, 100,  50, color(0, 0, 255, 80), color(0, 255, 255, 150), 5);
  fill(0, 255, 0, 100); noStroke();
}

void draw(){
  background(255);
  pushMatrix(); translate(width/2, height/2);
  rotateY(frameCount*.01);
  
  // upper sphere visible because drawn first
  pushMatrix(); translate(0, -25); sphere(10); popMatrix(); 
  
  shape(psRed, 0, 0); // red obscures blue because red drawn first
  shape(psBlu, 0, 0);
  
  // lower sphere obscured because drawn last
  pushMatrix(); translate(0, 25); sphere(10); popMatrix(); 
  
  popMatrix();
}


PShape surf(float dim1, float dim2, float dist, color fcol, color scol, float sw){
  // build surface on YZ plane //
  PShape ps = createShape();
  ps.beginShape();
  ps.fill(fcol);
  ps.stroke(scol);
  ps.strokeWeight(sw);
  ps.vertex(dist , -dim1/2 , -dim2/2);
  ps.vertex(dist ,  dim1/2 , -dim2/2);
  ps.vertex(dist ,  dim1/2 ,  dim2/2);
  ps.vertex(dist , -dim1/2 ,  dim2/2);
  ps.endShape(CLOSE);
  return ps;
}
1 Like
2

Hello,

I do not have an answer to your question but I did learn a new term:

:)

2 Likes
3

Transparency does not seem to properly be applied in your example. You find a slightly improvement by adding in setup:

hint(DISABLE_DEPTH_TEST);
hint(ENABLE_DEPTH_SORT);

image
Now you can see the top sphere shows transparency but the bottom sphere does not have any. I do not have an immediate solution but I would like to record the next two post for reference:

Kf

2 Likes
4

Thanks, @kfrajer, most grateful! :grinning:

I didn’t know about the first hint, thanks for sharing it, as well as the links.

I mostly care about the PShapes; the spheres were used for illustration purposes. But I was interested to see if the spheres were affected by the surface’s colors.

Here’s a gif of the original with the new hint:

TransparencyTest.2

Here’s a gif where I make both surfaces red (though they don’t seem like the same color due to the simultaneous contrast of their frames:

TransparencyTest.3

Seems the spheres use a different shading strategy…

Thank you again! Life can now continue…

Adding a couple more pertinent links Kf’s links led to:

2 Likes