Procedurally generating a "Trencadís"-like texture.
Using the ShaderTexture from the Procedurally Textured Torus and some voronoi functions by iq from Shadertoy, several maps are generated: diffuse, roughness and metalness; height and ao; and normal.
Click here or press space to generate a new texture.
More details...
The process is very similar to the Procedurally Textured Torus. The shader that creates the base for the texture combines basic voronoi to simulate the different shards, modulated with iq's voronoise to replicate some of the waviness of traditional tile. Everything is blurred a bit with a gaussian blur, and then a normal map is calculated from the height map. The normal map is then blurred a bit more.
The scene has two lights and a plane, using the procedural maps on a THREE.MeshStandardMaterial, plus a panorama converted to a cubemap to use as environment map.
Credits
Inspired by Gaudí's work and
this picture
Voronoi - basic
and Voronoise by
iq
Gaussian Blur by
mrharicot
Heightmap to normal shader adapted from
NormalMap Online
Casa Milà "La Pederera" panorama by
Zeljko Soletic
Coded using WebGL with three.js, isMobile.js and EquirectangularToCubemap