Processing: persistence in transparent 3D object

Question

Previously defined shape (triangle) appears but does not persist in 3D object (sphere) but does outside.

The triangle appears in the transparent sphere but vanishes at the next rendering. For transparency, I used enabled DEPTH_SORT.

// Aim of program: draw a stack of triangles that goes through a transparent 3D sphere
// Problem: stack not visible inside the sphere

float y;
float x;
float r_sphere = 200;
float up_down = -0.5;

void setup() {

  size(1100, 800, P3D);
  background(0);
  hint(ENABLE_DEPTH_SORT); // option that allows transparency
  fill(0, 40); // alpha parameter for transparency

  x = width/2;
  y = height/2+r_sphere+20;
}

void draw() {

  // 1. draw stack of triangles in new referential
  pushMatrix();

  // define new referential for the triangle at each rendering
  translate(x, y);
  y = y+=up_down;
  // draw the triangle that should persist
  stroke(220, 150, 25);
  strokeWeight(2);
  triangle(0, 0, 90, 0, 70, 30);

  popMatrix();

  // 2. draw the transparent sphere in the initial referential

  translate(width/2, height/2);
  strokeWeight(0.1);
  stroke(155, 220, 220);
  sphere(r_sphere);
}

Charlie Wallace · Answer 1 · 2019-04-20T15:54:57.633

The issue with the hidden triangle stack is caused by the sphere being drawn every time draw is called. Even though transparency is set to 40 the repeated spheres add up to obscure all but the latest triangle which is drawn on top of all but the latest sphere.

To see how the cumulative effect of the spheres hides the triangle stack set alpha to a lower number. By setting alpha to 5 instead of 40 we see a short trail of the triangle stack:

fill(0, 5); // alpha parameter for transparency

If we change alpha to 2 we get a short trail and the triangle stack appears to never become completely obscured.

Another approach to drawing without covering the triangle stack is to only draw the sphere one time.

if (frameCount < 2){
  // 2. draw the transparent sphere in the initial referential 
  translate(width/2, height/2);
  strokeWeight(0.1);
  stroke(155, 220, 220);
  sphere(r_sphere);
}

This will make the stack of triangles visible but probably does not give you the visual effect you are looking for as the two triangles appear to be in front of the sphere instead of inside it.

A third approach is to redraw the entire stack of triangles from the bottom up to the current y position and then draw the sphere every time draw is called.

I have modified your code to take this approach:

float y;
float x;
float r_sphere = 200;
float up_down = -0.5;

void setup() {

  size(1100, 800, P3D);
  background(0);
  hint(ENABLE_DEPTH_SORT); // option that allows transparency
  fill(0, 40); // alpha parameter for transparency
  x = width/2;
  y = height/2+r_sphere+20;
}

void draw() {

    if (frameCount > height + r_sphere+20){
      noLoop();
    } else {
     background(0);
    }

  // 1. draw stack of triangles in new referential
  // define new referential for the triangle at each rendering
  y = height/2+r_sphere+20;
  for (int i = 0; i < frameCount; i++){
    pushMatrix();
    translate(x, y, 0);
    y = y+=up_down;
    // draw the triangle that should persist
    stroke(220, 150, 25);
    strokeWeight(2);
    triangle(0, 0, 90, 0, 70, 30);
    popMatrix();
  }
  // 2. draw the transparent sphere in the initial referential
  translate(width/2, height/2);
  strokeWeight(0.1);
  stroke(155, 220, 220);
  sphere(r_sphere);
}

I believe this last approach is closest to simulating a view of a physical sphere that is transparent and a stack of fully opaque triangles. The visual effect is not as exciting as the first approach where alpha is set to a low number as we don't see the triangle stack as a hollow.

Note that we can also enhance the view by moving the triangle stack in the z direction. Calling translate(x, y, -100); before drawing the triangle will move the triangle stack back and give a nice effect. — Charlie Wallace, Apr 20 '19 at 15:58

Processing: persistence in transparent 3D object

1 Answers1