程序纹理与opengl

我有一个六角网格的字段,每个字段都有一定的地形types。 我将地形types的六边形的每个顶点分配,并将其作为属性传递给顶点,然后将其作为片元着色器。 然后我使用外推值将地形纹理混合在一起。

比如:1是草地,2是沙漠。

顶点着色器:

varying vec2 vUv; attribute float terrainType; varying float vTerrainType; void main() { vUv = uv; vTerrainType = terrainType; vec4 mvPosition; mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_Position = projectionMatrix * mvPosition; } 

片段着色器:

 uniform vec3 diffuse; uniform float opacity; varying vec2 vUv; varying float vTerrainType; uniform sampler2D map; uniform sampler2D map1; void main() { gl_FragColor = vec4( diffuse, opacity ); vec4 texelColor = texture2D( map, vUv ) * (2.0 - vTerrainType) + texture2D( map1, vUv ) * (vTerrainType - 1.0); gl_FragColor = gl_FragColor * texelColor; } 

实现是WebGL,如果有什么区别的话。

结果看起来非常不自然,那么有什么办法可以使它更平滑和圆滑?

在这里输入图像说明

正如你所看到的,artifact来源于你的vTerrainType的三角形变化的插值。

因此,解决这个问题的一种可能性是将六边形细分成具有一致厚度的更好的边界区域。

另一个更复杂但更强大的方法是计算每个像素到其六边形边界的距离。 但是,为此,您需要大量的关于字段本身的信息 – 每个像素需要确定它属于哪个六边形以及它的边界在哪里。 一旦你有距离,你可以用它来执行混合。 对这个函数应用像clamp(pow(borderDistance, someExponent)*someScale, 0.0, 1.0)这样的函数可以让你更平滑的过渡。