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

**URL:** <https://discourse.threejs.org/t/how-to-use-and-blend-multiple-textures-with-custom-values-in-three-js/4017>\
**Category:** Questions\
**Tags:** materials\
**Created:** [September 5, 2018, 8:17am UTC](https://discourse.threejs.org/t/how-to-use-and-blend-multiple-textures-with-custom-values-in-three-js/4017 "2018-09-05T08:17:50Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [September 5, 2018, 8:17am UTC](https://discourse.threejs.org/t/how-to-use-and-blend-multiple-textures-with-custom-values-in-three-js/4017/1 "2018-09-05T08:17:50Z")

</div>

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)

: ![Nlx7w](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/f/f683574dbc2c134e8a453dec9073acc2c2cbf878.jpeg)

![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/e/ef56c729c5f95a98aac8f16f2ebc8499c5bc0873.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 5, 2018, 9:53am UTC](https://discourse.threejs.org/t/how-to-use-and-blend-multiple-textures-with-custom-values-in-three-js/4017/2 "2018-09-05T09:53:56Z")

</div>

> [@sandeep](#):
>
> 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?

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](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial) and a combination of roughness, metalness, normal and displacement maps.