着色器创建弯曲的纹理

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;

着色器创建弯曲的纹理

Shaders create curved texture

opengl

shader

opengl-es

glsl