Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question
This is an awesome project, IMHO. @mrdoob, any ideas? I expect [at]alteredq could do this in his sleep. :-) – WestLangley Sep 19 '12 at 18:17
1  
There is the MeshLayerMaterial system that would allow this kind of materials, but it's still a bit to early for me to get working on it. You could do this with a custom shader and ShaderMaterial though. – mrdoob Sep 19 '12 at 19:09
1  
Thanks for the info and looking forward to MeshLayerMaterial thing. Is there an example of a custom shader code with similar complexity to my question and some explanation how to use/blend multiple uniforms? Cheers! – Aleksander Lenart Sep 20 '12 at 13:49

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.