使用 triangle_strip 模式处理形状的纹理

Question

我想在每个扇区构建具有不同纹理的 TRIANGLE_STRIP 形状。在这种情况下是否可以使用 TRIANGLE_STRIP 形状？我不明白如何在这种形状模式下设置纹理映射的水平和垂直坐标，因为每个三角形彼此共享顶点，因此我只能为一个图像设置纹理映射的水平和垂直坐标。

PImage img1, img2, img3, img4, img5;
void setup() {
  size(800, 300, P3D);
  img1 = loadImage("img1.png");
  img2 = loadImage("img2.png");
  ....
  textureMode(NORMAL);
 // textureWrap(REPEAT);
}
void draw(){
  background(0);
  stroke(255);
   beginShape(TRIANGLE_STRIP);
   texture(img1);
    vertex(30, 286,0,1);
    vertex(158, 30, 0.5, 0);
    vertex(286, 286,1,1);
    texture(img2);
    vertex(414, 30, ?, ?);
    texture(img3);
    vertex(542, 286, ?, ?);
    texture(img4);
    vertex(670, 30,?,?);
    texture(img4);
    vertex(798, 286,?,?);
    endShape();
}

UPD

我想要实现类似于该动画的结果： https://mir-s3-cdn-cf.behance.net/project_modules/disp/7d7bf511219015.560f42336f0bd.gif

首先我想根据TRIANGLE_STRIP或QUAD_STRIP形状模式构建复杂的对象，然后改变顶点的z坐标。

所以我只是拍摄了带有这种题词的图像，并针对每个形状的扇形将其切割在不同的图像上。

如果有人知道如何以更简单的方式制作它，我将非常感谢您的帮助。

Answer 1

第 1 步： 创建一个小草图，在您要占据的整个 space 上简单地显示一个三角形条带（没有任何纹理）。这是一个充满整个屏幕的示例：

void setup() {
  size(300, 200);
}
void draw() {
  background(0);
  stroke(0);
  beginShape(TRIANGLE_STRIP);

  vertex(0, 200);
  vertex(0, 0);
  vertex(50, 200);
  vertex(100, 0);
  vertex(150, 200);
  vertex(200, 0);
  vertex(250, 200);
  vertex(300, 0);
  vertex(300, 200);

  endShape();
}

目标是确保您的顶点覆盖您希望图像覆盖的区域。你想要这样的东西：

这也将使将顶点坐标映射到图像纹理坐标变得更加容易。

步骤 2： 创建要用作纹理的图像。我会用这个：

第 3 步： 对于您在屏幕上绘制的每个顶点，找出该点在图像中的位置。如果一个点在屏幕中间，那么你需要弄清楚图像中间的位置。这是 u 和 v 的值。

或者，您可以使用 textureMode(NORMAL)，这样您就可以将 u 和 v 指定为 0 和 1 之间的标准化值。图片中间变成点(.5, .5).

采用哪种方法取决于您，但无论哪种情况，您都必须将屏幕顶点位置映射到图像 u, v 位置。我将在此处使用标准化值：

PImage img;

void setup() {
  size(300, 200, P3D);
  img = loadImage("test.png");
  textureMode(NORMAL);
}
void draw() {
  background(0);
  stroke(0);
  beginShape(TRIANGLE_STRIP);

  texture(img);
  vertex(0, 200, 0, 1);
  vertex(0, 0, 0, 0);
  vertex(50, 200, .16, 1);
  vertex(100, 0, .33, 0);
  vertex(150, 200, .5, 1);
  vertex(200, 0, .66, 0);
  vertex(250, 200, .83, 1);
  vertex(300, 0, 1, 0);
  vertex(300, 200, 1, 1);

  endShape();
}

第 4 步：现在您可以修改其中一个顶点的位置，并且您将变形绘制在屏幕上的图像：

PImage img;

void setup() {
  size(300, 200, P3D);
  img = loadImage("test.png");
  textureMode(NORMAL);
}
void draw() {
  background(0);
  stroke(0);
  beginShape(TRIANGLE_STRIP);

  texture(img);
  vertex(0, 200, 0, 1);
  vertex(0, 0, 0, 0);
  vertex(50, 200, .16, 1);
  vertex(100, 0, .33, 0);
  vertex(mouseX, mouseY, .5, 1);
  vertex(200, 0, .66, 0);
  vertex(250, 200, .83, 1);
  vertex(300, 0, 1, 0);
  vertex(300, 200, 1, 1);

  endShape();
}

您可以尝试使用它以获得您正在寻找的确切效果，但遵循这些步骤应该是您的一般方法。请注意，您只需要使用一个图像，并且需要计算出您在屏幕上绘制的每个顶点的 u 和 v 值。从正常显示图像的三角形网格开始，然后修改它以变形图像。

另请注意，我本可以通过编程方式完成大量此类计算。例如，我可以使用 width/2.0 而不是硬编码值 150。但首先你需要了解屏幕上的 x,y 和纹理中的 u,v 之间的关系。理解了这种关系后，您可以根据需要以编程方式计算它们。

使用 triangle_strip 模式处理形状的纹理

processing texture for shape with triangle_strip mode

java

processing