处理:透明3D对象的持久性

时间:2019-04-20 09:06:29

标签: graphics processing p5.js

出现先前定义的形状(三角形),但不会保留在3D对象(球体)中,而是保留在外部。

三角形出现在透明球体中,但在下一次渲染时消失。为了透明起见,我使用了启用的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);
}

result

1 个答案:

答案 0 :(得分:3)

隐藏三角形堆栈的问题是由于每次调用绘制时都会绘制球体引起的。即使将透明度设置为40,重复的球体加起来也会使除最近的球体之外的最新三角形遮盖。

要查看球体的累积效果如何隐藏三角形堆栈,请将alpha设置为较小的数字。通过将alpha设置为5而不是40,我们可以看到三角形堆栈的一小段轨迹:

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

如果我们将alpha更改为2,则会得到一小段线索,并且三角形堆栈似乎永远不会被完全遮盖。

Sphere and triangles at alpha of 2

另一种不覆盖三角形堆栈的绘制方法是只绘制一次球体。

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);
}

这将使三角形的堆栈可见,但可能不会为您提供所需的视觉效果,因为这两个三角形似乎位于球体的前面而不是球体的内部。

第三种方法是从下到上重新绘制整个三角形堆栈,直到当前的y位置,然后在每次调用绘制时绘制球体。

我已修改您的代码以采用这种方法:

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);
}

我相信这最后一种方法最接近于模拟一个透明的物理球体和一堆完全不透明的三角形的视图。视觉效果并不像第一种方法那样令人兴奋,因为第一种方法将alpha设置为一个较低的数字,因为我们没有看到三角形堆栈是空心的。