How to use and blend multiple textures with custom

2019-02-10 09:12发布

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)
  2. 'Image' layer (optional):
    • image texture (artwork printed on paper, multiply-blended with 'Base' colour)
  3. 'Foil' layer (optional):
    • b/w image texture to control layer transparency
    • colour (overlapping 'Base' layer)
    • specularity
    • reflectivity
  4. 'Emboss/Deboss' layer (optional):
    • bump texture (raising or lowering 'Base' bump)
  5. '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):

Blind embossing (pattern) & gold foil debossing (logo, title) Blind embossing (pattern) & gold foil debossing (logo, title)

Silver foil debossing (logo) and spot UV varnish (photos) Silver foil debossing (logo) and spot UV varnish (photos)

Spot UV varnish (lines) Spot UV varnish (lines)

Is it at all possible? I couldn't find any Three.js example that would use such complex materials. If you could point me to one or explain how to approach this programmatically, I'd be grateful.

0条回答
登录 后发表回答