libgdx - GLSL ES - 使用重复将纹理从直角坐标映射到极坐标

标签 libgdx glsl opengl-es-2.0 shader glsles

我需要将矩形纹理扭曲为具有极坐标的纹理。为了阐明我的问题,我将说明它:

我有图像:
original image

我必须使用着色器将其变形为如下所示:
result

然后我要把它映射到飞机上。
我怎样才能做到这一点?任何帮助将不胜感激!

最佳答案

这不是特别难。您只需要将纹理坐标转换为极坐标,并使用纹理的半径 s方向,以及到 t 的方位角方向。

假设您想以这种方式对四边形进行纹理处理,并且还假设您为此使用标准 texcoords,那么左下角的顶点将具有 (0,0),右上角的 (1,1) 作为纹理坐标。

因此,在片段着色器中,您只需要将内插的 texcoords(为此使用 tc)转换为极坐标。由于中心将在 (0.5, 0.5),我们必须先抵消它。

 vec2 x=tc - vec2(0.5,0.5);
 float radius=length(x);
 float angle=atan(x.y, x.x);

现在您需要做的就是将范围映射回 [0,1] 纹理空间。此处的最大半径为 0.5,因此您只需使用 2*radiuss坐标,角度将在 [-pi,pi] 中,因此您应该将其映射到 [0,1] 以获取 t协调。

更新 1

到目前为止,我遗漏了一些细节。从您的图像中可以明显看出,您不希望将内圈映射到纹理。但这很容易被合并。我只是假设这里有两个半径:r_inner ,它是内圆的半径,而 r_outer,它是您要将外部映射到的半径。让我为此勾画一个简单的片段着色器:
#version ...
precision ...

varying vec2 tc; // texcoords from vertex shader
uniform sampler2D tex;

#define PI 3.14159265358979323844

void main ()
{
    const float r_inner=0.25; 
    const float t_outer=0.5; 

    vec2 x = v_tex - vec2(0.5);
    float radius = length(x);
    float angle = atan(x.y, x.x);

    vec2 tc_polar; // the new polar texcoords
    // map radius so that for r=r_inner -> 0 and r=r_outer -> 1
    tc_polar.s = ( radius - r_inner) / (r_outer - r_inner);

    // map angle from [-PI,PI] to [0,1]
    tc_polar.t = angle * 0.5 / PI + 0.5;

    // texture mapping
    gl_FragColor = texture2D(tex, tc_polar);
}

现在还缺少一个细节。上面生成的映射会为图像中有黑色的任何位置生成超出 [0,1] 范围的 texcoord。但是纹理采样不会在这里自动给出黑色。最简单的解决方案是使用 GL_CLAMP_TO_BORDER GL_TEXTURE_WRAP_S 的模式(默认边框颜色将为 (0,0,0,0),因此您可能不需要指定它,或者您可以将 GL_TEXTURE_BORDER_COLOR 显式设置为 (0,0,0,1),如果您使用 alpha 混合并且不希望那样透明)。这样,您将免费获得黑色。其他选项将使用 GL_CLAMP_TO_EDGE并在纹理的左端和右端添加一个黑色像素列。另一种方法是向着色器添加一个分支并检查 tc_polar.s低于 0 或高于 1,但我不建议在这个用例中使用它。

关于libgdx - GLSL ES - 使用重复将纹理从直角坐标映射到极坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25932175/

相关文章:

c++ - OpenGL 着色器编译错误 : unexpected $undefined at token "<undefined>"

java - 如何使用 OpenGL ES 2.0 和 Java (Android) 使用索引缓冲区绘制顶点

android - 什么表面用于 eglMakeCurrent 只呈现到 FBO 的上下文

ios - OpenGL ES 2.0 绘制不显示任何内容的简单三角形

java - LibGDX 打包 .tmx map

java - Libgdx 桌面启动器空白

android - libGDX:挂绳

java - 从 xml 文件解析/读取 öäü

opengl - 如何在 glsl 支持中使用#include ARB_shading_language_include

c++ - 从文件加载后,顶点着色器和片段着色器均未编译