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值。从三角形网格开始，正常显示图像，然后修改它以变形图像。

另请注意，我可以以编程方式完成大量此计算。例如，我可以使用150而不是对值width/2.0进行硬编码。但首先，您需要了解屏幕上的x,y与纹理中的u,v之间的关系。一旦你理解了这种关系，你就可以编程地计算它们。如果你愿意的话。

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

1 个答案: