![\"20190114_finalMixing\"](\"https:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2019\/01\/20190114_finalMixing.gif\")
<\/a><\/p>\nThe final foam rendering in my game.<\/em><\/p>\n Here, I use Unity as a game engine, Blender for modeling and texturing, and Krita to paint textures.<\/p>\n My\u00a0game takes place in an ocean-covered world, so having foam on the shores seems necessary. My biggest problem here is that my game is still being modified and island shapes may change or new islands may appear. So, I want to find a way to create foam easily and fast enough.<\/p>\n Moreover, I may change the designs many times for a single island, and I don’t want to have to re-create foam meshes from scratch\u00a0every\u00a0time.<\/p>\n <\/p>\n A while ago, some friends pointed to me the Rime VFX breakdown video<\/a> by Simon Tr\u00fcmpler. There are many incredible tricks in this one. The foam in particular is very well crafted, and the effect is stunning (as long as you go for a stylized rendering of course).<\/p>\n The only problem I saw with this approach is that it is a bit daunting to create seamless uv maps for each foam mesh. Indeed, in Blender, when you want a ring\/circular mesh to have a seamless mapping, you need to\u00a0 perfectly align\u00a0manually the uvmap so that the image repeats itself without breaking the pattern. It’s OK for a single asset, but for many unique islands and rocks in my game, it’s more than I can handle. In addition, with cyclic seamless uv mapping, if you need to tweek the wave length afterwards, you can’t scale texture coordinates as you want; you are limited to integer multiples. I have to find something else.<\/p>\n Process of scaling uv map to get rid of the seam. Perfectly matching both sides of the seam\u00a0can be quite long for many assets.<\/em><\/p>\n Ideally, I aim at:<\/p>\n As usual, my approach is far from perfect and is only a compromise between what matters to me and what is technically reachable (to me too :p).<\/p>\n My first idea was to use automatic uv coordinates, such as vertex world coordinates, which works pretty well\u00a0for my procedural terrain mapping (which I might explain too one day, hopefully). However, world coordinates do not embed any kind of information about an hypothetical “privileged” direction.<\/p>\n This means I can’t have a “classical” foam texture with “lines” along the shore edge like the one below, because it would be OK on some sides of an island, but not on the other sides:<\/p>\n In this texture there is a strong global direction (horizontal). The corresponding\u00a0ingame look with world coordinates doesn’t work.<\/em><\/p>\n When I use automatic mapping, I must have some neutral\/uniform texture (direction wise) for example something like this:<\/p>\n A simple foam texture with no\u00a0main direction. The corresponding\u00a0ingame look \u00a0is a\u00a0bit better…<\/em><\/p>\n OK, this is better, but it’s still a bit stiff and disappointing, but that’s the price to pay for an automatic method.\u00a0Anyways, it doesn’t seem to be enough to get visually interesting foam.<\/p>\n Now, if I want some lines along the shore, or the foam moving towards (or away from) the shore, it is\u00a0absolutely mandatory that I have an additional “direction” information embedded in the mesh. This is also necessary to make the foam “vanish” when it is far away from the shore. This specific direction changes for each rendered triangle, so I need to encapsulate it in a way or another\u00a0on\u00a0the mesh vertices.<\/p>\n Thus, I guess I still need to use a basic uv mapping to specify this “shore direction”. To achieve this, I only need 1 texture coordinate, which I choose to set to v (see picture below). The idea is to have v<\/strong>=0 on the outer edge loop of the foam (the “sea side”), v<\/strong> = 1 on the\u00a0middle edge loop of the foam (the “ground side”), and v<\/strong> = 2 for the edge loop that will be “inside” the island.<\/p>\n The basic texture mapping. Here I don’t really care about the seam problem (you can see it at the bottom of the mesh). I only work on the v<\/strong> coordinate.<\/em><\/p>\n So the movement towards or away from the shore will be built from this simple texture coordinate. The easiest way to create the famous “foam lines” is so use a sinus<\/strong> of v<\/strong>.\u00a0To make it move, I offset it depending on the current time<\/strong> and the wave speed<\/strong>.<\/p>\n sinus(frequency*v + speed*time)<\/strong> ; clipped<\/strong> at 0<\/em><\/p>\n Keep in mind that, in order to get sharp edges, I clip any fragment\u00a0value below a certain threshold.<\/p>\n Changing the clipping<\/strong> threshold creates larger or smaller waves<\/em><\/p>\n Changing the\u00a0frequency<\/strong> creates more or less waves<\/em><\/p>\n Now if I want the sinus foam to wash away as it enters the sea, I need to raise the sinus\u00a0<\/strong>according to the v<\/strong> coordinate, like this for example:<\/p>\n sinus(frequency*v + speed*time)+v<\/strong> ; clipped<\/strong> at a good threshold t<\/strong>. Waves get thinner as they vanish in the sea<\/em><\/p>\n Now let’s have fun a little bit by adding noise to this initial shader, in order to make it more “natural”. As a noise-based texture, I use a simple RGB seamless noise texture that I made with GIMP using the “solid noise” generator:<\/p>\n Seamless noise made with GIMP.<\/em><\/p>\n From this, I can randomize the speed,<\/strong>\u00a0the frequency<\/strong>\u00a0or any other parameter of the sinus. Randomizing the frequency<\/strong> is quite interesting; it is a way to locally add more or less wave lines like this:<\/p>\n Adding (world) noise to frequency: sinus((frequency+noise(xz))*v + speed*time)+v;<\/strong>\u00a0where\u00a0xz<\/strong> are the world horizontal coordinates. See how some zones get more foam lines, while other zones get fewer.<\/em><\/p>\n The generated sinus part seems\u00a0to work quite OK, but I think it still misses some “connections” betweens the foam lines, and, to add them, I need to rely on\u00a0world coordinates. I could use world noise to add these connections, but I wanted to try a more controled approach by using my handmade texture on top of it.<\/p>\n Mixing the sinus procedural waves and the hand painted texture.<\/em><\/p>\n But if I use a pure binary texture for foam connection on top of the generated sinus waves, I have no control at all on the “vanishing” of this texture. That’s why I chose to use a distance transform texture.<\/p>\n Distance transform images are created from a pure black or white base pattern. Each pixel of the distance transform image represents the distance to the nearest white pixel in the base pattern, like this:<\/p>\n Well, actually, I used an inverted distance transform here, because it’s more convenient for the clipping phase, but you get the idea \ud83d\ude09 And yes, I used a different pattern than the previous one.<\/em><\/p>\n Distance transform images are just a way of seeing the data. You might also interpret it as a height map (even if the meaning is slightly different, it might help to grasp the concept). The basic idea is to have an image that embeds some kind of “evolution\/animation” of the base pattern.<\/p>\n Distance transform images may be generated through filters, but generally, these filters don’t handle very well (or even not at all) seamless images. Another way is to paint some pseudo distance transform image directly. Of course, it won’t be mathematically accurate, but\u00a0as a benefit, we can create more custom animation patterns. An acceptable way I found, is to use the unusual following settings in Krita, (the painting software I use):<\/p>\n which results in this:<\/p>\n Directly painting a seamless distance transform texture.\u00a0Notice the “X”\u00a0pattern appearing on the intersection, this is typical of a distance transform image.<\/em><\/p>\n <\/p>\n Of course, this is a very “mathematical” way of approaching this idea. You can always draw with the default soft brush and get something totally OK (even more natural I think), but you have to always keep in mind that you are “painting an animation” (never thought I\u00a0would\u00a0say that one day).<\/p>\n Now, I have more control on the rendering of my hand painted foam texture:<\/p>\n tex(xz)<\/strong>; clipped<\/strong> at a certain threshold t<\/strong>; Now I can control the width of the pattern by changing the clipping threshold for my hand painted foam texture.<\/em><\/p>\n Of course, I used a few tricks to make it more interesting:<\/p>\nI – Problem<\/h3>\n
<\/a><\/p>\nII – What I want<\/h3>\n
\n
<\/a><\/p>\nIII – Base texture with\u00a0world coordinates<\/h3>\n
<\/a> <\/a><\/div>\n<\/a> <\/a><\/div>\nIV – Adding procedural\u00a0\u00a0waves from v coordinate<\/h3>\n
<\/a><\/p>\n<\/a> <\/a><\/div>\n<\/a><\/p>\n<\/a><\/p>\n<\/a> <\/a><\/div>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nV – Distance transform textures<\/h3>\n
<\/a><\/p>\n\n
<\/a><\/p>\nVI – Tweaking and mixing<\/h3>\n
<\/a><\/p>\n\n