I have a hexagonal grid of fields, each field has a certain terrain type. I assign every vertex of hexagon with terrain type and pass it as attribute to vertex and then fragment shader. Then I use the extrapolated value to blend terrain textures together.
For instance: 1 is grassy, 2 is desert.
Vertex shader:
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;
}
Fragment shader:
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;
}
Implementation is WebGL, if it makes any difference.
The result looks really unnatural, so is there any way to make it smoother and rounder?
