^ Back to Top

WPG: Tech art – The foliage of Ether… so far… and mostly the grass!

The next challenge of Ether was foliage, specifically the Grass. As always, the grass needed to be optimised to its full potential, and of course, not compromise the ether style at all.

The original approach I took was to create 3D blades of grass using planes, and then use those shapes to paint over in the texture. Since the blades of grass were going to be very thin, utilising the line-work and loose brush style of Ether wasn’t much of an option, and this was very obvious, especially when looking at the grass from close up. However, this first approach became a good starting point for the wind simulation and subsequent foliage approaches… at least now I knew what NOT to do! (in terms of texture and shape!)

And it is the wind expression that became very important. To bring life to the environments, we wanted the grass to move with the wind.

For this, I began using the same expression as I did with the ocean waves (the mesh would be pushed in different directions, but it’s the same basic concept)… the problem was that I needed the base of the grass to stay still and I wanted for us to be able to change the direction, strength and speed of the wind on the fly, without having to make major changes to the material. On another note, I needed this material to work across the board when it comes to foliage, so I began to put a system in place so that all foliage would work with these rules. It took a long time to get it to work, but I believe the amount of time it will save down the line will be priceless to a small studio with only 2 artists like WPG.

To get the wind to work, I needed to introduce “Wind Direction and Source” into the material. The basic concept is to convert this information into a vector (to specify the direction and strength of the wind) so that we could change it on the fly. This is multiplied by the wave expression and voila! It doesn’t work! … Sadly, one of the things I overlooked was the fact that doing the wind in this way would displace the whole mesh… so even the base of the grass was moving… this resulted in a very unconvincing, almost comical version of the grass that was floating and moving around the environment. The good news is that it was easily fixed! All I had to do was multiply that expression by a vertex colour… in this case, the red colour. This way, any verts in the mesh that are coloured in red will move, while black ones will stay still. This meant that I had to go back and edit all my grass plane meshes and vertex paint them accordingly. Once this was done, the result was much more convincing!

Now I had the grass working, however, I couldn’t get past the fact that the grass did not follow the Ether artistic style, so I had to take a new approach in terms of the type of mesh I used.

The new meshes were thick, had a much better view from above and allowed me to paint the textures following the artistic style of Ether…All of the vertex painting rules had to be followed, but knowing that in advance made the workflow that much faster… I’m really happy with the results and I think it does justice to Ether’s artistic direction.

Now, although the grass was looking good, and I had created a system that could be used across the board in all foliage, the actual meshes themselves weren’t too reusable… if we wanted to make an autumn scene, we had to repaint the textures all over again, costing us a lot of time and a lot of memory!… this needed to be fixed, not only on the grass level, but across all foliage.

Luckily, it was an easy fix, and a rather functional one! All I had to do was multiply our diffuse texture with a Vector Parameter… then we can create an instance of the material, and we have completely versatile grass colours on the fly.

Here is a video detailing the grass shader and its reusability, as well as other types of foliage:

Foliage in Ether (click)

Now we have the shader out of the way… now we can focus on the rest of the foliage…  Having discovered that thin shapes don’t go with “Ether” style, creating the rest of the foliage was an incredibly fun and enjoyable experience… I still haven’t finished, but a lot of it is in place!

Here are some pictures of some types of foliage and a video to see them in action:
In this edition of foliage, I have chosen not to put any trees in, although a more in depth explanation of how I am making the trees for Ether is coming very soon!

Although I feel that the grass shader is getting close to being finished, I still want to introduce some stuff for decay and burning foliage…

Thanks for taking the time to stop by and read! If you have any questions, please ask!

Next up: Particle Systems!!

Posted on by Pete Bottomley

Comments Off on WPG: Tech art – The foliage of Ether… so far… and mostly the grass!

WPG: Tech art – Water… a lot of it!!

The first challenge at White Paper Games came in the form of water. Replicating realistic water is quite a feat on its own, however, for Ether, we required the water to make sense with the world and follow the artistic style that we had already established for the game. This created a number of challenges that needed to be solved:

– How do we make the water hold up to the visual style of Ether?

– How can we make water using the minimum amount of resources possible?

– Can we make the water reusable and applicable to non-ocean instances?

– How can we animate the water without any physics simulations?

This set of questions had to be answered and here is the result we have come up with:

The first and foremost concern I had was to keep the visual style of Ether intact. Therefore, the normal map that would create the ripples would have to be hand painted.

I used Corel Painter for this instead of Photoshop. In Corel, you can adjust the amount of paint added to the brush and make it lit so that it feels thick and painted on canvas; I felt this was crucial in order to get a good painterly effect on the water. The result was pretty bad for the first set of tries but I ended up getting an effect that was quite nice:

Now I just had to mix a couple of sets of normal and pan them in different directions and a subtle effect was created!

Now that the ripples were sorted, I needed to focus on animation… an ocean has waves and this couldn’t be simulated with physics considering our limitations, so a workaround had to be found. I started doing a lot of research into how to solve this and began to create a solution to this problem.

Using the world displacement node in the material, I could displace certain parts of the mesh based on a mathematical expression. The fastest way to do this was using a Sine wave. In short, it creates a wave that varies from black to white, making everything that’s white push up, and everything that’s black go down. The good thing about this is that it’s extremely cheap (only 4 instructions in the material). The only downside to this is that it works based on the amount of verts the mesh has, so it meant our water shader had to be quite highpoly. In the end, we went with a 2048 triangle mesh, which is still pretty low poly for a whole Ocean!

The next problem was to make the oceans depth believable and also make the foam for the water when it hits other meshes.

For the foam, using a depth biased alpha with a foam texture worked fine. For the translucency, playing with a few values did the trick and the results were quite convincing.

Here is a picture of the full material expression and couple of videos, one explaining my approach, another just showing the wate rin action, inside the game:

Video of Ether water 01

Video of Ether water 02

This expression is highly reusable, in fact, it became the base for all foliage and wind based materials in the game! So I’m very happy I took the time to make sure this material was spot on and game ready as soon as possible.

Next, I will begin to talk about the foliage for Ether!

Stay tuned!!