I've periodically thought about what Uru might look like in a more modern engine, with higher-fidelity graphics that still retain the same strength of art direction and charm. A lot of this ties into the game design work I do on SAND, but also I think it'd just be neat to see. Well, today I'm officially going to be starting a project to re-imagine Eder Kemo. I'll be using modo 701 for modeling, Substance Designer 2018 for material development, and Unity 2020.1 for the engine and assembly (with the Universal Render Pipeline). I'll also be using ZBrush Core Mini to sculpt some of the more complex organic shapes needed for the environment.
My goal is to create as much of the Age from scratch on my own as possible, taking inspiration from the original design's models and textures without re-using them in any way. However, there are some aspects of the Age that will be generated using third-party components simply because it's faster and easier to use them than to try and accomplish the same task with my own code. A brief list of additional components can be found below, and I'll do my best to keep it updated as I proceed. Most of these are Unity Asset Store packages that extend the functionality of the Unity engine or provide shaders that I'm not currently equipped to build on my own.
Asset Store Packages Used
- Enviro (for sky, time of day, environmental effects)
- RTPv3 (for terrain shader and blending objects into the terrain)
- Stylized Water for URP (for the lake)
- Dreamteck Splines (for paths etc.)
With all of that out of the way, I decided last night to start trying to re-create the wildflowers scattered throughout the Age in Substance Designer with much greater fidelity than the original texture resolution of roughly 120x120 pixels allowed. This is a 1024x1024 texture. The normal and height maps still need a bit of fine-tuning, but overall I'm quite pleased with how it's coming along so far.
For those curious, this is what the graph looks like in Substance Designer:
For those who might be unfamiliar with how Substance Designer works, it's essentially a non-destructive node-based material generator. What that means is it uses a collection of "nodes" including grunge maps, noise maps, shapes, filters, effects, blending tools, and so on to "build up" a final material through a workflow that the computer follows each time it needs to create the material's outputs. This means it's easy to tweak and adjust each step of the process at any time, enabling you to do everything from change the color to completely alter the shape or even composition of a material. Even better, you can create control knobs for any of the parameters on any of these nodes, giving you the ability to affect the material in real time inside the game engine itself while the player is interacting with it. It's extremely powerful, and this graph isn't even remotely close to the most complex sorts of things you can do with it.
I probably won't do this for every material I make, but I thought folks might find it interesting to read about how I made this one, in a tl;dr sort of way.
The flower is built up from basic shapes like circles and squares using a bunch of "Transform 2D" nodes to warp, scale, and resize them into the desired outline. I then apply a couple of "Directional Warp"s to break up the edges and create a more natural appearance to the petals. After that I layer on some directional noise to give the petals a bit of a ribbed/rippled appearance, followed by some shadowing to create a good gradient for the coloration steps. Along the way I also isolate some of the elements of the petal, like the edges and the stems, so that I can apply color to them separately.
Once I have the shapes I want, I use a "Splatter Circular" node to tile the petals around a central point, set their size, and so on. With the overall shape of the entire flower now set, I can start to apply color.
One of Substance Designer's coolest nodes is called the "Gradient Map". Essentially, it lets you replace every color in a grayscale image with a color of your own choosing. This is a great way to create tons of detail and variation in your coloration for very little work. It's especially easy to do that by finding a photo of something that has the colors you want, then using the "gradient picker" tool to draw a line across that photo. The picker will sample colors along the entire line and turn it into a gradient. This makes it really easy to get a ton of color stops and variation in your gradient in just a couple of seconds, and I use it a lot when it comes time to create base color texture maps. Along the top right of the substance graph, you can see me blending the various colorized gradient maps together using a collection of masks and blending techniques to build up the final color.
In addition to color, the render pipeline I'm using calls for a number of other texture maps to create a complete material. This pipeline is called a "physically based renderer", or PBR for short, and it better emulates the way that light interacts with physical objects in the real world by defining how rough and metallic each pixel is, in addition to what color it is, how it faces the camera, how opaque it is, and how much it lifts up off the surface of the mesh itself. In order, these maps are called roughness, metallic, color, normal, opacity, and height. You can also bake other maps like ambient occlusion, but that's not part of this graph.
To create the normal map, I took the petals from the stage where I added the directional noise and ran that through a Splatter Circular node to create a new set of petal shapes that didn't have the grayscale gradient on them. I combined the two petal shapes using a blend node and then converted that grayscale image into a normal map. The normal map can be used to create the illusion of additional surface detail without having to physically model each individual bump or crack on an object. This way, the petals of this flower can appear to have tiny ridges running along their length without me having to dump a massive number of polygons into the meshes. I used a similar approach for the roughness map, fine-tuning the levels a bit to reduce the intensity. For the height map, I added a new gradient to the center of the image to create the effect of having the petals bend down as they approached the center of the flower, though this effect is difficult to see on a flat overhead render like the one above. Finally, I took the shape I made for the normal map and blew out all of the detail so it became a crisp black-and-white mask. I fed this into the opacity map, which converts white areas into ones that are fully opaque, and black areas into ones that are fully transparent, with shades of gray being levels of opacity in-between.