着色器创建弯曲的纹理

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;