Opengl es 将纹理映射到双曲三角形上

我想将右下角欧几里德三角形形式的纹理映射到庞加莱圆盘上的双曲三角形，如下所示：

这是纹理（纹理左上角的三角形是透明的，未使用）。您可能会认识到这是埃舍尔的一部分：

这就是我的多边形看起来的样子（它以原点为中心，这意味着两条边是直线，但通常所有三条边都是曲线，如第一张图所示）：

多边形的中心是由其顶点形成的欧几里德三角形的中心，我使用它的中心对纹理进行UV映射，将其划分为与多边形相同数量的面，并将每个面映射到相应的多边形面上。但是，结果如下所示：

---

如果有人认为使用UV贴图可以解决这个问题，我很乐意提供一些示例代码，但是我开始认为这可能不可能，我必须编写自己的着色器函数。

UV贴图是一种将纹理映射到OpenGL多边形上的方法。纹理始终在欧几里德空间中使用（0，1）范围内的xy坐标进行采样

要将纹理覆盖到庞加莱圆盘上的三角形上，请保持顶点中的欧几里德坐标，并使用这些坐标对纹理进行采样

以下代码对OpenGL 3.0 ES有效

顶点着色器：

#version 300 es

//these should go from 0.0 to 1.0
in vec2 euclideanCoords;
in vec2 hyperbolicCoords;

out vec2 uv;

void main() {
   //set z = 0.0 and w = 1.0
   gl_Position = vec4(hyperbolicCoords, 0.0, 1.0);

   uv = euclideanCoords;
}

片段着色器：

#version 300 es

uniform sampler2D escherImage;

in vec2 uv;
out vec4 colour;

void main() {
   colour = texture(escherImage, uv);
}

---

我也在computergraphics.stackexchange上问了这个问题，并在那里得到了一个答案，这很好。您是否有机会提供一个更详细的示例，说明您是如何完成此任务的？欢迎您在此处查看代码。在绘制多边形方面，大多数代码都在elements.js Polygon类中，该类将网格传递给threejs.js中的Polygon（）方法进行绘制。我还在eschersketch.com上直播一个工作快照。