Day 25: Water texture

Reference

I did a quick tiling water surface texture earlier this morning and wanted to share a walkthrough on the process.

The first image is photo reference taken from cgtextures.com - This was 600 px by 600 px originally, then resized to 512 px by 512 px, all textures obviously need to be in sizes with the power of 2 (i.e 128x128, 256x256, 512x512 or 1024x1024 etc.)

(EDIT: Meanwhile, i've also cracked the nut of having a fake animated water volume for now - I've made a box with only a front and top, the player won't be able to see sides nor bottom anyway.

To the box i've attached the Unity3d simplewater4 shader, which fakes depth with color in the z.

The surface with the texture is another object though, since the water shader doesn't support just inputting a simple diffuse texture with an alpha mask.

I know the planes aren't perfectly aligned yet, it has something to do with scaling which isn't as important as just getting the damn visual effect in, which is now by far 90% achieved - WIN for me)

Step 1

Here i've just desaturated the original reference image and adjusted some levels to increase the level of contrast between white and black (though not too harshly at this point).

Step 2

 Afterwards i use a quick photoshop filter to get a little cartoony feel out of it - the smart filter has alot of uses for bringing together shades of grey or the same color family, it sort of smooth out areas that might be too noisy.

Step 3

 Here i've chosen a spot in the texture to use and scaled it up to cover the canvas - i could've used the original 1 to 1, without choosing a piece...but its good to go ahead and choose an area that has a good mix of detail and overall "calm" areas. Noisy textures are a big no no because too many small details makes a texture look confusing visually to the player.

Step 4

 After step 4, i'll take the texture in and work on the tiling, using a photoshop filter called offset, you're able to offset the texture and mimicking tiling.
Say if you want a 512x512 px texture to tile in any direction you'll just put in a - or +256 in the horizontal and vertical directions to tile.

Step 5

 Step 5 is more about cleaning up and connecting the lines, going through and double checking the tiling.

Step 6

Last step is adjusting levels so the black and white is clearer and edges harder - this is a matter of preference of course. You could leave it at step 5 but if the texture has grey values and you then make a mask out of that then most of the texture will have transparency - i only want transparency on the blacks.

And here it is in-game - it still needs tweaking, but the texture itself took no more than 10-15 minutes to make, so there's obviously alot of small details that could be cleaned up.