How to make a Triplanar Shader in Godot

Here's how to make a simple triplanar shader that blends textures based on the surface angle (normal). You can find the full code at the end of this article.

Initialization

To make texture mapping UV-independent we needed to find some sort of alternative coordinates space. We've decided to use world-space vertex coordinates, initialized like so:

uniform vec3 _triplanar_pos;

void vertex()
{
  // initialize the world space sampling coordinate by 
  // rotating, scaling and offsetting the vertex position.
  _triplanar_pos = rotate(triplanar_angle) * VERTEX;
  _triplanar_pos *= triplanar_scale;
  _triplanar_pos += triplanar_offset;
  
  //...
}

Considering that triplanar mapping projects textures along three axes, to avoid over-saturation we also calculate some blending weights as shown:

uniform vec3 _triplanar_weight;

void vertex() 
{
  //...
  // compute the weights that will be used to get the correct
  // final color after sampling the texture
  vec3 _triplanar_weight = pow(abs(NORMAL), vec3(triplanar_sharpness));
_triplanar_weight /= dot(result, vec3(1.0));
}

Texture sampling

Texture mapping uses only two coordinates (u and v) but the _triplanar_pos is a vec3! However, if we use only two components per time, we are actually projecting the texture on a plane aligned with each axes (up, right and forward).

void fragment()
{
  vec4 color = vec4(0.0);

  // sample the texture three times, one for each axes in world space,
  // and multiply each axes with the relative weight
  color += texture(sampler, _triplanar_pos.xy) * _triplanar_weight.z;
  color += texture(sampler, _triplanar_pos.xz) * _triplanar_weight.y;
  color += texture(sampler, _triplanar_pos.zy * vec2(-1.0, 1.0))  * _triplanar_weight.x;
  color *= triplanar_strength;

  //...
}

Mixing

Finally, we can transition between two different textures based on the surface normal like so:

void fragment()
{
  //...

  // calulate the angle between up-vector and surface normal
  float transition = dot(vec3(0.0, 1.0, 0.0), normal);
  
  // calculate interpolation factor
  float threshold = cos(degToRad(_Angle));
  float interpolation = 1.0 - smoothstep(
                                threshold - _Transition, 
                                threshold + _Transition, 
                                transition);
  
  // transition between two textures
  vec3 color = mix(first_triplanar_texture.rgb,
  		second_triplanar_texture.rgb,
  		interpolation);

  ALBEDO = color;
}

Putting it all together