Support per-map per-Material UV channels, UV offset/repeat and texel scale/offset

[bhouston]

This introduces the idea of TextureSlots to Materials in a fully backwards compatible fashion (excluding likely a bug here or there.) TextureSlots allow per-mat per-Material UV channels, UV offset/repeat, and texel scale/offset/invert.

This addresses the very common issue, see #5876, #7826, #7956 and #3549, besides just being broadlly useful. I have implemented something like this in the Clara.io private ThreeJS branch, this is my attempt to polish that code and bring it back into ThreeJS proper.

What this PR does is replace the direct maps on MeshStandardMaterial with TextureSlots. TextureSlot is a new class that can contain a texture as well as its UV Channel, an optional UV transform (offset, repeat) and an optional scalar Texel transform (scale, offset.)

This allows one to set the UV channel you want a map to follow. It defaults to the previously ThreeJS defaults.

This also allows one to set the UV offset/repeat on a per map basis, if TextureSlot.uvTransform is set to true. It no longer needs to be based on the textures repeat/offset. Although I have written it so that the per map UV offset/repeat is applied along with the per-texture offset/repeat so that the previous workflows still work.

It also allows one to offset, scale and invert the resulting texel value if TextureSlot.texelTransform is set to true. This is replaces the need for bumpScale, lightMapIntensity, displacementScale, displacementBias, and generally is very useful.

The idea of texture slots was relatively easy to support because it's uniform organization allows one to create for loops in various places in order to process them.

This PR is a rough one, and so far only applied to MeshStandardMaterial, but the design is there and if we can support getting this into dev this I can expand support of TextureSlots to the other materials.

This PR is smart about only including sampler2D, varyings, and uniforms into the resulting shaders if they are needed. Thus it is very efficient in that sense, and if TextureSlots capabilities are not used, they do not add any additional uniforms.

/ping @QuaziKb @huttarl @Monokai @jcarpenter @titansoftime @Zob1 @benaadams @endel @karimbeyrouti @rhys-vdw (You guys requested this feature previously)

[bhouston]

Proof of backwards compatibility:

http://ci.threejs.org/api/pullrequests/8278/examples/webgl_materials_standard.html
http://ci.threejs.org/api/pullrequests/8278/examples/webgl_materials_displacementmap.html
http://ci.threejs.org/api/pullrequests/8278/examples/webgl_materials_envmaps_hdr.html

I'll create an example that demonstrates independent map control (uv and texel) in the next day.

[bhouston]

New example that shows shows independent control of map, normalMap, emissiveMap and uvRepeat/uvOffset and texelScale/texelOffset/texelInvert:

http://ci.threejs.org/api/pullrequests/8278/examples/webgl_materials_slots.html

[dirtybluejeans]

+1 to that, for sure!

[cbravo]

any movement on this? I would love to generate pulses of light on my mesh by animating the offset of my emissive map without messing with the other maps on the object. this seems like it would work for that correct?

[errantspark]

I'm really interested in this feature, as far as I can tell it's just waiting for approval from @mrdoob? Is that correct? If not I'm down to do whatever it takes to bring it to that stage.

[EerikKivistik]

Any news on this @bhouston, ran into a similar issue, where I need to use the same texture in multiple contexts (different offset, tiling etc) and see no reason to implement the same thing in my codebase if you already have a working solution. Also 👍 for that.

[matthew-dean]

I don't really understand why offsets can't be different for texture clones. I hope this is merged soon.

[zellski]

I will add a strong +1 urge for this enhancement.

[titansoftime]

This is me voicing support for this.

[bhouston]

@mrdoob, any thoughts about merging this? It is not possible for Three.JS to conform to the official glTF specification unless we can do this. I do have some time (well, not really, but I will do it) to rebase this and merge it into the latest dev.

[tobiasbu]

+1. I support this feature too. It has been 3 years and I can not find a similiar solution for Three.js other than this one. If there is any workaround I would like to know.

[bhouston]

We are using node-materials in the three.js examples folder to get around this limitation.

[Mugen87]

Closing. As mentioned by the previous post, using the flexible NodeMaterial is the solution for this issue.

It is planned to stabilize the API and introduce a basic documentation for NodeMaterial so it's easier to get started. Keep an eye on the following issue for more information about this topic: #17971

[pailhead]

@tobiasbu

Have you seen this #14174 it’s a workaround for the old versions.