Water Caustics are those bright, streaky highlights that appear in water, especially visible in swimming pools and beaches. The photo below (from the Unreal Forums) shows what were trying to recreate.
![](https://static.wixstatic.com/media/9a1cbf_83b429ea8ddc42f390d43a00a45da6f1~mv2.png/v1/fill/w_980,h_378,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9a1cbf_83b429ea8ddc42f390d43a00a45da6f1~mv2.png)
Making a water material is fairly complex, but one particular area of trouble is in producing a texture map for those caustic light effects. In this tutorial, we are going to create the map below in photoshop, which will give a fairly convincing effect:
![](https://static.wixstatic.com/media/9a1cbf_1ad7726e6e0b4067b79b65866070d467~mv2.png/v1/fill/w_980,h_980,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9a1cbf_1ad7726e6e0b4067b79b65866070d467~mv2.png)
1: Open photoshop, and open a new image with the settings shown:
![](https://static.wixstatic.com/media/9a1cbf_811885267cd242c3b334cff3cd7e2b79~mv2.jpg/v1/fill/w_305,h_465,al_c,q_80,enc_auto/9a1cbf_811885267cd242c3b334cff3cd7e2b79~mv2.jpg)
2: Add a clouds filter by going to Filter > Render > Clouds, to get the result below.
![](https://static.wixstatic.com/media/9a1cbf_3621949b8bd845f98c5f74eb7aad167d~mv2.jpg/v1/fill/w_545,h_538,al_c,q_80,enc_auto/9a1cbf_3621949b8bd845f98c5f74eb7aad167d~mv2.jpg)
3: This is a bit noisy. To get a nice caustics image we want to smooth it out a bit. Filter > Blur > Gaussian Blur.
![](https://static.wixstatic.com/media/9a1cbf_6b1a1e72709747799f1cd9d657a3ef18~mv2.jpg/v1/fill/w_542,h_540,al_c,q_80,enc_auto/9a1cbf_6b1a1e72709747799f1cd9d657a3ef18~mv2.jpg)
4: Now, we need to get those fine, streaky lines - Go to Image > Adjustments > Curves, and set up the curves graph as shown below - add a node to the centre, pull it to the top. move the original left and right nodes to the bottom middle.
![](https://static.wixstatic.com/media/9a1cbf_d76ccd14e5f4498390507bea6e249688~mv2.jpg/v1/fill/w_980,h_460,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/9a1cbf_d76ccd14e5f4498390507bea6e249688~mv2.jpg)
5: It looks good, but we need to make sure it tiles correctly. We can check the tiling by using Filter > Other > Offset. This will roll the image along the canvas and loop it, making the edges meet in thE middle. As you can see, our edges dont line up correctly. (NB - Set the offset distance to be half the canvas size, so the seams cut through the middle.
![](https://static.wixstatic.com/media/9a1cbf_f8efa3a1bff741b9a40001e28f6218ae~mv2.jpg/v1/fill/w_912,h_557,al_c,q_85,enc_auto/9a1cbf_f8efa3a1bff741b9a40001e28f6218ae~mv2.jpg)
6: Using the smudge tool, set to about 50% strength, smudge the areas where the lines dont match up correctly, they should blend in quite nicely without much effort. Here again we see the finished result:
![](https://static.wixstatic.com/media/9a1cbf_463ed371fd7a43dda661581d443ec01d~mv2.jpg/v1/fill/w_540,h_549,al_c,q_80,enc_auto/9a1cbf_463ed371fd7a43dda661581d443ec01d~mv2.jpg)
7: Save this out as a png, and it is ready to be imported into your game engine! Cheers!
Comments