Procedural texture or layered texture for art canvas effect

Questions
1

I was wondering if someone might be able to suggest a simple and fast way to apply a “paper canvas” like texture on my model. If you’ve ever purchased a stretched canvas, it has a fabric/rough feel and look to it. I couldn’t find many examples/close-ups but without any paint on it this is an example: https://cdn.shopify.com/s/files/1/0114/7722/products/Rug_Berber_Beige_Jute_9x12_-3110-_FULL_600x.jpg?v=1378495832

I have artwork textures coming from a URL and would like to maybe layer the textures. I’ve experimented with two methods unsuccessfully:

1 - Emissive Procedural Noise

Not my best idea but to give you a chuckle this was my first attempt:

    const artMaterial = new StandardMaterial('AM', this._scene);
    artMaterial.emissiveColor = Color3.White();
    artMaterial.roughness = 1;
    artMaterial.diffuseTexture = new Texture(url, this._scene);
    const noise = new NoiseProceduralTexture("perlin", 256, this._scene);
    noise.octaves = 10;
    noise.persistence =4;
    noise.animationSpeedFactor = 0;
    artMaterial.emissiveTexture = noise;
    artMaterial.emissiveColor = Color3.Black();

Which resulted in:

Screen Shot 2020-07-06 at 4.48.14 PM
Screen Shot 2020-07-06 at 4.48.14 PM1496×1500 661 KB

Sigh. Noise procedure animated was stopped then when I realised this isn’t a good use of noise. lol. It’s probably rather heavy from a performance perspective.

2 - MultiMaterial Method With Alpha Layer

The method I’m now considering but am having some trouble with is MultiMaterial. I found a texture online (it’s non-repeating) and I was going to have two layers for the artwork and one for this material. When I attempted adding them together though only the texture appeared even though I added the proper hasAlpha and transparency values. Here’s the asset I used which is an alpha PNG.

canvas

Once I failed at that I got frustrated and even concerned that I’d be depending on an external asset for something this simple. Procedural would be more elegant but if I used a texture I could just base64 encode it into the application.

Here’s my working model: Babylon.js Playground. The artwork material is what I’ve been working on adjusting if anyone has any ideas/suggestions. Trying to avoid anything too complex, just something simple and fast to render.

2

Something along these lines perhaps Apply Bumps, Opacity, Tiling and Detail Maps - Babylon.js Documentation

3

I kind of ignored it at first as an option but now that you mentioned it, I gave it a shot quickly: https://www.babylonjs-playground.com/#8IIUY3#1

Some weird things happening on the texture but I’m going to try a few other types of normal maps.

4

You can try the new detail map feature:

https://www.babylonjs-playground.com/#8IIUY3#2

It’s described in the same doc linked to by @JohnK: Apply Bumps, Opacity, Tiling and Detail Maps - Babylon.js Documentation

2 Likes
5

Thanks @Evgeni_Popov and @JohnK. I have a habit of making my life harder than it needs to be :-p the DetailMap, bumpLevel and a few other minor details did the job perfectly.

Loving how my project’s coming along.