将纹理映射到双曲三角形答案

【问题标题】：Map a texture onto a hyperbolic triangle将纹理映射到双曲三角形
【发布时间】：2016-06-12 23:19:56
【问题描述】：

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

这是纹理（纹理的左上角三角形是透明的且未使用）。您可能会认为这是 Escher 的 Circle Limit I 的一部分：

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

多边形的中心是由其顶点形成的欧几里得三角形的incentre，我使用它的中心对纹理进行UV映射，将其划分为与多边形相同数量的面并将每个面映射到对应的多边形面。然而结果看起来像这样：

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

【问题讨论】：

我也在 computergraphics.stackexchange 上问过这个问题，并在那里收到了答案 computergraphics.stackexchange.com/questions/2117/…
这很整洁。你有没有机会提供一个更详细的例子来说明你是如何做到的？
欢迎您在这里查看代码github.com/looeee/hyperbolic-tiling/tree/master/es2015。在绘制多边形方面，大多数代码都在 elements.js Polygon 类中，该类将网格传递给 threejs.js 中的 polygon() 方法进行绘制。我也在 eschersketch.com 上实时保存工作快照。

标签： opengl-es textures webgl texture-mapping uv-mapping

【解决方案1】：

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);
}

【讨论】：