How to use and blend multiple textures with custom values in Three.js?

In Three.js, is it possible to create a material (shader?) containing a number of textures, each one with its own specifics, blend them together and assign to geometry? I’d like to simulate paper surface with multiple finishing techniques applied like foil embossing or spot UV varnishing.

What I’d like to achieve is a material that would have the following characteristics:

  1. ‘Base’ layer:
  • paper colour (e.g. white, off white, beige, etc)
  • specularity
  • reflectivity
  • bump (smooth or textured paper)
  1. ‘Image’ layer (optional):
  • image texture (artwork printed on paper, multiply-blended with ‘Base’ colour)
  1. ‘Foil’ layer (optional):
  • b/w image texture to control layer transparency
  • colour (overlapping ‘Base’ layer)
  • specularity
  • reflectivity
  1. ‘Emboss/Deboss’ layer (optional):
  • bump texture (raising or lowering ‘Base’ bump)
  1. ‘Varnish’ layer (optional):
  • b/w image texture to control layer transparency
  • specularity
  • reflectivity
  • bump (slightly raising ‘Base’ bump)

The reason for all the separate layers is I’d like to control them individually (replace different textures and change values at runtime). Apart from the ‘Image’ layer, I’m not sure what blend values I should use for the other layers to achieve realistic looking simulation.

To illustrate the finishing techniques applied to paper, take a look at the following photographs (courtesy of PrintHouse Corporation)


No, you have to write a custom material via ShaderMaterial or RawShaderMaterial.

Before doing this, you should test if you can achieve a similar visual output with MeshStandardMaterial and a combination of roughness, metalness, normal and displacement maps.