How to make a ceramic tile floor material

anonymous_user_54cde890 · December 16, 2016, 7:04pm

Hello guys!

How can I create a ceramic tile floor material, for my goom floor?

Using one image like this one:

An make a tile like this:

KemalGunel89 · December 16, 2016, 7:55pm

Open your image in Photoshop or some software which able to create same effects like Photoshop. And Follow These steps.

Open your image and be sure it’s power of two(32x32,64x64…8192x8192). If it’s not resize it by changing image size. Then apply.
In Photoshop: go to filter, go other tab under filter, and select offset. Change the offset values in vertical and horizontal like this

If your texture size(the image size that you changed at the beginning) is 1024x1024 just write 512x512 for Horizontal and Vertical. Then hit OK.
You should see 4 squares that divided with barely visible edges.

Use that edges and draw lines on them. By using brush or pencil.
Save your image.

RyanB · December 16, 2016, 8:27pm

This function has been in engine for a while. Gives you randomized tiles and macro UVs. Note the use of DDX,DDY to fix mip filtering. The tiling of the UVs must match there.

You could then use “boxmask 3d” using frac of UV*Tiles, and append 0 to the input. Then set the edge with to be the bevel width and use that for AO or grout etc.

Sotalo · December 17, 2016, 5:37am

Wow! I didn’t know the engine had an official material function to handle this! I did go through the trouble of making a very intricate shader to solving this problem, though. The difference is my solution uses textures and nearest neighbor filtering while Epic’s solution uses procedural methods. Procedural methods can expand near-infinitely with precise detail and do not require hardly any memory, but they can become very expensive. My solution would be to use a noise texture to shift the UVs of the ceramic texture along perfect squares and mask the seams with a grout mask.

Make a noise map in Photoshop. Each pixel should be a different color. Ideally, the red and green channels should be different. Import into the engine either as an uncompressed map (vector displacement compression settings), and under the filtering options, choose Nearest. Next, make a mask, normal map, and displacement map for a single tile, or a set of tiles. The mask should cover the grout. Make all the textures you want to use seamless. In your material, what you want to do is lerp between the tile color and grout color. Then, add the noise map (masked RG) to a standard texture coordinate and plug that into the UVs of your ceramic texture. The ceramic texture will distort along the pixels of the noise map. Resize it so the grout can mask the seams. You can make the grout whatever color or texture you want. If you wanted to take this to the extreme, constant bias scale the noise map to -1:1 as if it was a normal map, then multiply it by a random “seed” value to get the most bang for your buck.

I did make a material solution to handling this problem on the Marketplace. It supports everything from tessellation and parallax occlusion to mobile-ready materials. Check it out!

anonymous_user_f3a948cb · January 13, 2017, 5:35pm

Can you tell me where to locate “BrickandtileUVs” node? Im trying to create grout setup without modifying texture maps directly. Im using 4.12.5.

RyanB · January 13, 2017, 7:05pm

I think that function was actually added in 4.13. If you hang tight I can post a link to a project I have that has all of it set up that should open in 4.12. edit, sorry, turns out I actually did resave the function in 4.13.

anonymous_user_f3a948cb · January 14, 2017, 2:39pm

Ah okay. Thanks for reply. I will update the lastest version soon. Can you be specific about your function in 4.13 for me plz? This is what I want to achieve. Btw is there any chance to apply a simple grout frame in 4.12?

RyanB · January 14, 2017, 7:39pm

It is a material setup that can let you make everything in this video:

A few of the ‘starter content’ materials were created using this material (the 2nd brick mat is one of them), but backed down to simple textures so the procedural instructions are gone. Generally you want to and up baking your procedural material to a regular texture to get things like Mip maps, or to be able to do bump offset or POM which are not really feasible with procedural setups (in most cases).

The node looks like this. Tile shift makes it do alternating like bricks. Macro texture gives tile variation. Pattern Distortion roughens up the shape of the edges based on an input V2 noise.

You could replicate it in 4.12 of course. You would need to use the UVs to extract the mathematical gradients. To support things like edge AO and normals like the above video is a lot of work.

anonymous_user_d7116d47 · December 25, 2017, 9:05am

Is there no documentation on the brickandtileuvs node?