C++/OpenGL/GLSL 混合两个纹理边缘

Question

首先是截图：

我正在尝试根据网格上点的高度混合网格上的多个纹理。

现在我想要实现的是边界处的平滑混合（不像目前的锐线）。

我还希望边框稍微随机，并有一个控制随机性的因素。

这是我当前的代码：

#version 430 core
out vec4 FragColor;

#define NUM_TEXTURE_LAYERS 8

uniform vec3 _LightPosition;
uniform vec3 _LightColor;

in float height;
in vec3 FragPos;
in vec3 Normal;
in vec2 TexCoord;

uniform sampler2D  _DiffuseTextures[NUM_TEXTURE_LAYERS];
uniform vec3  _DiffuseTexturesHeights[NUM_TEXTURE_LAYERS];

vec4 GetTextureColorBasedOnHeight(vec2 coord){
    for(int i=0;i<NUM_TEXTURE_LAYERS;i++){
        if(height > _DiffuseTexturesHeights[i].x && height < _DiffuseTexturesHeights[i].y){
            return texture(_DiffuseTextures[i], coord*_DiffuseTexturesHeights[i].z);
        }
    }
    return vec4(0.0f);
}

void main()
{   
    vec3 objectColor = vec3(1, 1, 1);
    objectColor = GetTextureColorBasedOnHeight(TexCoord).xyz;
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(_LightPosition - FragPos);
    float diff = max(dot(norm, lightDir), 0.0f);
    vec3 diffuse = diff * _LightColor;
    vec3 result = (vec3(0.2, 0.2, 0.2) + diffuse) * objectColor;
    FragColor = vec4(result, 1.0);
} 

我确实尝试了随机边界，但这不是很好，问题仍然是混合！

这里是随机的代码：

vec2 hash( vec2 p ) // replace this by something better
{
    p = vec2( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)) );
    return -1.0 + 2.0*fract(sin(p)*43758.5453123);
}

float noise( in vec2 p )
{
    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
    const float K2 = 0.211324865; // (3-sqrt(3))/6;

    vec2  i = floor( p + (p.x+p.y)*K1 );
    vec2  a = p - i + (i.x+i.y)*K2;
    float m = step(a.y,a.x); 
    vec2  o = vec2(m,1.0-m);
    vec2  b = a - o + K2;
    vec2  c = a - 1.0 + 2.0*K2;
    vec3  h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
    vec3  n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));
    return dot( n, vec3(70.0) );
}


vec4 GetTextureColorBasedOnHeight(vec2 coord){
    for(int i=0;i<NUM_TEXTURE_LAYERS;i++){
        float nv=noise(coord*0.01f);
        if(height+nv > _DiffuseTexturesHeights[i].x && height+nv < _DiffuseTexturesHeights[i].y){
            return texture(_DiffuseTextures[i], coord*_DiffuseTexturesHeights[i].z);
        }
    }
    return vec4(0.0f);
}

Answer 1

一般来说，您需要进行多次纹理查找并将结果组合在一起，很可能是通过加权平均。

一种简单的方法来始终对所有可用的纹理进行采样（对于影响为 0 的纹理，可以选择提前输出）。这样，“组合”逻辑和“影响确定”逻辑就被完全分开了。这是非常灵活的，因为它不会限制您创建平滑的边缘。您可以使用任何您想要的组合逻辑，例如使用影响图。

float getTextureInfluence(int tex_id, vec2 coord) {
  // have fun!
}

vec4 GetTextureColor(vec2 coord) {
    vec4 accum = vec4(0.0);
    float total_influence = 0.0;
    
    for(int i = 0; i < NUM_TEXTURE_LAYERS ; i++) {
      float texture_influence = getTextureInfluence(i, coord);

      // This if is optional. 
      // It may help or hurt performance depending on what 
      // percentage of samplers are used on average per sample.
      if(texture_influence > INFLUENCE_MIN) {
        total_influence += texture_influence;
        accum += texture(_DiffuseTextures[i], coord) * texture_influence;
      }
    }

    if(total_influence > 0.0) {
      accum /= total_influence ;
    }
    return accum;
}

跟进：至于使用它来创建模糊边缘：

您当前的代码实际上与以下配置文件相同：在每一点上，一个纹理得到完全影响，而所有其他纹理都没有。这会创建一个像这样的方形台阶：

influence
^
|           Sharp edge
|                |
|                v
| |--------------||--------------|
| |              ||              |
| |     Tex[0]   ||   Tex[1]     |
| |              ||              |
+-----------------------------------> Height

相反，像以下模式一样重叠纹理的影响将使您从一个纹理平滑过渡到下一个纹理。

influence
^
|           Blurred edge
|                |
|                v
|      ---------    -----------
|     /         \  /           \
|   /   Tex[0]   /\    Tex[1]    \
| /            /    \              \
+-----------------------------------> Height

使用多项式或指数衰减代替线性也会给出不同的结果，找到将导致您喜欢的结果的确切数学需要进行实验。

Answer 2

感谢弗兰克的回答，我终于可以拥有我喜欢的东西了，

结果如下：https://youtu.be/DSkJqPhdRYI

代码：

#version 430 core
out vec4 FragColor;

#define NUM_TEXTURE_LAYERS 8

uniform vec3 _LightPosition;
uniform vec3 _LightColor;

in float height;
in vec3 FragPos;
in vec3 Normal;
in vec2 TexCoord;

uniform sampler2D  _DiffuseTextures[NUM_TEXTURE_LAYERS];
uniform vec3  _DiffuseTexturesHeights[NUM_TEXTURE_LAYERS];


vec2 hash( vec2 p ) // replace this by something better
{
    p = vec2( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)) );
    return -1.0 + 2.0*fract(sin(p)*43758.5453123);
}

float noise( in vec2 p )
{
    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
    const float K2 = 0.211324865; // (3-sqrt(3))/6;

    vec2  i = floor( p + (p.x+p.y)*K1 );
    vec2  a = p - i + (i.x+i.y)*K2;
    float m = step(a.y,a.x); 
    vec2  o = vec2(m,1.0-m);
    vec2  b = a - o + K2;
    vec2  c = a - 1.0 + 2.0*K2;
    vec3  h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
    vec3  n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));
    return dot( n, vec3(70.0) );
}


float getTextureInfluence(int i, vec2 coord) {
float h = height + noise(coord*5)*2;
  float midVal = (_DiffuseTexturesHeights[i].x + _DiffuseTexturesHeights[i].y)/2;
  float p = 0;
  if(height < midVal)
    p = _DiffuseTexturesHeights[i].x - height;
  if(height >= midVal)
    p =height -  _DiffuseTexturesHeights[i].y;
  
  return pow(2.713, -1.0*p);
}

vec4 GetTextureColorBasedOnHeight(vec2 coord){
    vec4 accum = vec4(0.0);
    float total_influence = 0.0;
    
    for(int i=0; i < NUM_TEXTURE_LAYERS ; i++){
        float texture_influence = getTextureInfluence(i, coord*_DiffuseTexturesHeights[i].z);

        total_influence += texture_influence;
        accum += texture(_DiffuseTextures[i],  coord*_DiffuseTexturesHeights[i].z) * texture_influence;
    }

    if(total_influence > 0) {
      accum /= total_influence ;
    }
    return accum;
}


void main()
{   
    vec3 objectColor = vec3(1, 1, 1);
    objectColor = GetTextureColorBasedOnHeight(TexCoord).xyz;
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(_LightPosition - FragPos);
    float diff = max(dot(norm, lightDir), 0.0f);
    vec3 diffuse = diff * _LightColor;
    vec3 result = (vec3(0.2, 0.2, 0.2) + diffuse) * objectColor;
    FragColor = vec4(result, 1.0);
} 

如果您对完整源代码感兴趣：https://github.com/Jaysmito101/TerraGen3D