Webgl tileable非重复纹理

时间:2012-02-25 14:10:17

标签: random textures webgl three.js repeat

我是否可以在WebGL(使用MrDoob使用Three.js)中使用的技术覆盖大面积。石墙或鹅卵石地板,随机纹理看起来不像重复?我在http://www.timeref.com/webgl_house_test2.html有一个例子。我可以使用着色器来执行此操作吗?

1 个答案:

答案 0 :(得分:3)

首先,好的演示!

关于你的问题:自从时间开始以来,这就让发动机程序员在夜间保持活力。 :)

您可以采取一些措施来减轻重复纹理的可见性。第一个也是最明显的就是不要使用重复纹理!被称为虚拟纹理,这在一般情况下有点棘手(RAGE的Megatexture是我所知道的唯一商业实现之一)但是如果你有一个更受限制的用途,比如纹理化景观,它可以变得更容易一些。我认为这种方法对于大多数需求来说都是过度的。

但是,有一些更简单的方法可以帮助解决这个问题。如果你想完全在着色器中生成表面细节的路线(这可能很昂贵),那么你可以通过将各种分形应用到输出中来获得很多里程。 (想想Mandelbrot集合之类的东西),但艺术家通常难以控制。那里有一些interesting resources关于如何混合重复纹理以使它们看起来不那么重复的方法,但它们倾向于使用非常有序的图案(如砖块或瓷砖)来破坏纹理。

然而,我所知道的最适合艺术家的路线可能是使用细节纹理。这些可以有两种方式:它们可以将fine grained detail添加到更大的重复模式中,或者可以在重复模式的顶部添加larger layer of variance以打破单调。 (这就是你想要的那个。)在这两种情况下,混合都非常简单,不会造成很大的运行时间。

如果所有其他方法都失败了,您可以继续使用重复纹理,但只需使基础纹理更大,更多样化。从遥远的地方可能仍然看起来很有趣,但这实际上取决于你正在制作的应用程序的类型。如果目的是让用户以第一人称的角度走动,那么这可能就足够了。如果你正在飞行,它可能更容易被注意到。 (但在这种情况下,你可能不需要像你的示例节目那样需要很多重复的小纹理。)当然,这里的权衡是使用更多纹理内存和随之而来的性能命中。

你现在可能已经意识到,对于这个问题,没有任何银弹解决方案。它主要是关于平衡应用程序的视觉需求和性能要求,而且几乎每个项目都会有所不同。