# Procedural texturing with opengl

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.

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;
}


Implementation is WebGL, if it makes any difference.

The result looks really unnatural, so is there any way to make it smoother and rounder?

• This is not procedural texturing. This is usually called terrain blending. Sep 8 '15 at 17:36

Another more complicated but more powerful method would be to compute the distance of each pixel to the border of its hexagon. However, for this you need a lot of information about the field itself - each pixel needs to determine to which hexagon it belongs and where its borders are. Once you have the distance, you can use it to perform blending. Applying functions like clamp(pow(borderDistance, someExponent)*someScale, 0.0, 1.0) to this function would allow you even smoother transitions.