着色器创建弯曲纹理

Question

我想要创建半圆形的矩形，当我向这个窗体添加纹理时，它会有弯曲的纹理。我创建了一个简单的矩形，它看起来像下面的图像（如果从高处看，它就是右边的形状）：  

通过顶点着色器我尝试弯曲这个形状。我尝试创建这个形状

我使用了这个顶点着色器

attribute vec4 vPosition;
attribute vec4 vTexCoordinate;
uniform mat4 u_MVP;
uniform mat4 textureTransform;
varying vec2 v_TexCoordinate;
void main() {
    v_TexCoordinate = (textureTransform * vTexCoordinate).xy;
    vec4 try = vPosition; 
    if(try.x > 0.0  ){
       try[2] =  try.x - 100.0;
    } else {
       try[2] = 100.0 - try.x ;
    }
    gl_Position = u_MVP * try;
}

但是我没有看到Z坐标有任何变化，也没有看到任何形状的角度。谁能说我做错了什么？

Answer 1

您误解了顶点着色器在渲染管道中的作用。顾名思义，顶点着色器对每个输入顶点执行一次。在您的情况下，您有4个顶点定义您的四边形，因此顶点着色器将只执行4次。或者可能是6次，如果你指定两个三角形共享的顶点两次。

然后在三角形中插入顶点着色器（varying变量）的输出值，这些插值成为片段着色器的匹配输入。

如果要在顶点着色器中变形几何体，最直接的方法是指定更多顶点。您可以将四边形细分为顶点网格。 3x3细分看起来像这样：

 ___________
|\  |\  |\  |
| \ | \ | \ |
|__\|__\|__\|
|\  |\  |\  |
| \ | \ | \ |
|__\|__\|__\|
|\  |\  |\  |
| \ | \ | \ |
|__\|__\|__\|

这只是为了说明，实际上你很可能需要更精细的细分，这取决于你想要实现的曲率，以及最终渲染的大小。

为此计算顶点坐标是微不足道的。它们只是整个四边形范围的一小部分，所有这些都在同一平面上。

使用相对较新版本的桌面OpenGL，您可以使用曲面细分着色器生成内部顶点，同时仍然只指定4个原始顶点。但曲面细分着色器仅作为OpenGL ES中的扩展，并且尚未得到广泛支持。

如果我正确理解您的绘图，我认为您的计算中也存在一个小错误。我相信它应该是这样的：

if(try.x > 0.0  ) {
   try[2] =  try.x - 100.0;
} else {
   try[2] = -try.x - 100.0;
}

或者更容易：

try[2] = abs(try.x) - 100.0;