使用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步：創建一個小的草圖，該草圖僅在要占用的整個空間上顯示一個三角形帶（沒有任何紋理）。 這是一個顯示整個屏幕的示例：

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之間的關系。 一旦了解了這種關系，就可以根據需要以編程方式計算它們。