Previous | Next
The original idea was to procedurally create a wood texture, it ended up being the base for building ShaderTexture, a THREE.Texture that helps creating procedural textures using fragment shaders.
Click here or press space to generate a new texture.
More details...
Using ShaderTexture to create a diffuse texture (using TruchetFlip's implementation of Wang Tiles) and a roughness texture (using the diffuse texture to modulate some noise), then again using the diffuse texture as a height map to turn it into a normal map (using a shader based on NormalMap Online).
The maps are then used as diffuse, roughness, metalness, bump and normal maps of a THREE.MeshStandardMaterial.
Credits
Tiles shader from TruchetFlip by jt from ShaderToy.
Heightmap to normal shader adapted from NormalMap Online
Coded using WebGL with three.js, isMobile.js and Maf.js