处理:在透明3D对象中持久化

问题描述 投票:1回答:1

之前定义的形状(三角形)出现但不会在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

graphics processing p5.js
1个回答
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);
}

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

© www.soinside.com 2019 - 2024. All rights reserved.