将纹理映射到双曲三角形


9

我一直在如何解决这个问题上停留了一会儿,所以任何建议将不胜感激!

我想以右下欧氏三角形的形式将纹理映射到Poincare磁盘上的双曲三角形。

这是纹理(纹理的左上角三角形是透明的且未使用)。您可能会认识到这是Escher's Circle Limit I的一部分

抱歉,看到评论,因为我似乎不允许张贴两个以上的链接!

这就是我的多边形的样子(它以原点为中心,这意味着两个边都是直线,但是通常所有三个边都是圆弧):

线框多边形

多边形的中心是由其顶点形成的欧几里得三角形的中心,我正在使用UV的中心对贴图进行UV映射,将其划分为与多边形具有相同数量的面,并将每个面映射到相应的多边形面上。但是结果看起来像这样:

纹理多边形

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

由于AB,AC,BC线实际上可能是弧线而不是线,因此对@Nathan的答案进行了一些改进。

方法:选择最长的边,例如BC,然后将其细分为偶数个部分。将另外两个侧面细分为相同数量的零件。那么连接它们的线(下面答案中的DE)实际上也必须是弧线,而不是直线。根据需要细分这些新弧,添加新三角形作为面,然后将纹理的右下三角形UV映射到这些新面。

简单?一点也不。但这行得通。 鱼1 鱼2


这是我正在使用的纹理: i.stack.imgur.com/SEi0G.png
路易·蓝

1
我认为问题是图像的剪切?我看到这种情况发生在三角形细分的顶点之间的间距不一致的情况下。我的猜测是您正在对UV映射使用一致的步骤,从而产生剪切效果。
Daniel M Gessel '16

实际上,我在发布此内容后不久通过使细分保持一致和较小来修复了该问题,它在某种程度上修复了剪切(尽管不是完全修复)。但是,纹理仍然非常失真。我正在下面的@nathan建议中,该建议至少将允许进行更精细的细分。
路易·布鲁

1
@Looeee能否请您传递代码,我对图形领域非常感兴趣
x-rw

是的,您可以在这里找到我的代码:github.com/looeee/blackthread-heroku/tree/master/assets/js/src / ... 实时版本:blackthread.io/experiments/eschersketch 老实说,自从我看了很久因此,我不记得解决该问题的代码在代码中的什么位置,但是如果您在理解它时遇到麻烦,请在此处给我另一条评论,我来看一下。
路易·布鲁

Answers:


8

我的猜测是,要使纹理看起来正确,还必须细分三角形的内部,并近似其内部的非线性UV贴图。

目前,看起来您正在围绕三角形的边缘进行细分,并在边缘和中心之间形成了一个较小三角形的扇形。如果您只是用纯色渲染三角形,那会很好。但是,当应用纹理时,您会在这些细分的边界处获得不连续性,因为纹理只是在每个细分的三角形上线性地拉伸,并且没有正确地沿径向近似于双曲映射。

您需要沿两个轴细分,如下所示:

在此处输入图片说明

并将所有顶点适当地放置在屏幕空间和UV空间中,以近似三角形内部的双曲线坐标。如果细分得足够细,这会产生连续弯曲纹理贴图的错觉。


1
谢谢,我会尝试的。这是我最初构建多边形的方法之一,但是数学上要复杂得多,所以我选择了更简单的方法。我会再给它一个镜头并报告。
路易·布鲁

谢谢。我能够将您的建议修改为解决方案。请参阅上面的编辑。
路易·蓝
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.