Unity Shaders for Stylized Scenes
Events
Subscribe:  iCal  |  Google Calendar
1, Jul — 1, Aug
Cambridge GB   13, Jul — 17, Jul
San Diego US   19, Jul — 23, Jul
Torino IT   25, Jul — 29, Jul
Shanghai CN   3, Aug — 7, Aug
Latest comments
by Don\'tLookAtMeI\'mBusy
3 hours ago

I would love to run Mobile Photoshop with Sculptris and Moi3D on my Surface Pro

by Don\'tLookAtMeI\'mBusy
3 hours ago

I'm sure it's spelled iTubs

by sipon
6 hours ago

Too bad I work 95% of texturing on SP now...

Unity Shaders for Stylized Scenes
26 September, 2017
Interview

Jonathan Van Immerzeel from Staggart Creations talked about some amazing tech that allows creating incredible scenes in Unity.

Introduction

I’ve been following 80 level for a couple of years now, happy to contribute! I’m a 26-year-old dude from The Netherlands. My interest in game development was sparked when I started exploring the editor that shipped with the original Unreal Tournament, powered by the first Unreal Engine. A natural curiosity drives me to understand the inner workings of things. In the context of game development, it ultimately brought me to where I am today.

Coming out of high school, there were no opportunities for me to pursue a career in the games industry, which lead me to the next best thing: programming. After obtaining my Associate’s Degree in 2013, I started the Game Creation & Production course at the Saxion University of Applied Sciences. During this time, I grew into recognizing, and defining, my role as a “Technical Environment Artist”.

I soon realized this role was not very common, but was mainly reserved for senior positions at AAA studios. Despite respecting their work, I had little desire to work for a large studio. I didn’t want to compromise on my desire to bring something of my own into the world. As I aspire to create meaningful, enriching experiences. And If anything — enable other, more capable, people to do so.

In my senior year, I started exploring the viability of publishing on the Unity Asset Store. It seemed like the perfect way for me to work on something I love, and hopefully use the revenue to continue to do so after I graduated. This led me to starting my company, Staggart Creations.


Stylized environments in Unity

About the time my minor term was around the corner. I had to decide how I was going the spent the next six months improving my skills as a Technical Environment Artist. I was curious about exploring Unreal Engine 4. I set out with the goal to make an adventure environment using the engine, with a secondary focus on designing a production pipeline. This ultimately led to my “Fantasy Adventure Environment”, which I later ported to Unity for the Asset Store.

It was heavily inspired by Dragon Quest XI and Breath of the Wild. At the time, there were only screenshots available of these games. And I just loved how with mere screenshots they managed to the convey the premise to a grand adventure. With summery landscapes, filled with lush vegetation and mountainscapes — ripe for exploring. It’s was a very positive note to me. Ever since, I’ve been aspiring to be able to convey the same.

I’ve never been very attracted the idea of achieving realism in game art. I believe people, in games, ultimately like to see something different from what they’re already familiar with. With stylized art, the abstraction has the viewer fill in the blanks, however they may see it. It lends it with a bit of a personal touch.

Vegetation

When I started learning the ins and out of 3D production, the programmer side of me always had its eye on automation. This was also reinforced by my lack of traditional art skills, and a reluctance to improve in that area. It led me to trying to find a streamlined procedural approach to art production. Effective cheating, so to speak.

One of my principles regarding production is that iteration should not be destructive. It’s far from ideal to finally bring an asset into your game and realize it visually doesn’t work out. Utilizing Substance materials elevates some of this frustration where textures are concerned. They enable you to fine tune part of the art in context. In a way, it’s like bringing a photoshop document into the engine, and allowing you to adjust its parameters there. Rather than constantly going back and forth.

Tools like Substance Designer and SpeedTree, are both procedural and node-based, which makes it easy to experiment. Where they allow you to propagate changes from the start of the node-chain all the way to the end result.

If you’re curious what your tree would look with thicker branches, you simply change a value and the effect carries through. You can imagine how painstaking that might be if you had to this manually. At which point you might even find out that it’s not an improvement after all.

Unfortunately, the week before I intended to submit the Fantasy Adventure Environment it was brought to my attention that the SpeedTree EULA does not allow you to distribute your productions outside of a game. You can imagine that put quite the damper on the project. I ended up using the Unity tree creator for the trunk and branches, and used 3DS Max to distribute branch meshes onto that mesh. It was painstaking work, and a prime reminder of why I don’t intend to do work a computer could do for me.

I would have loved to explore Houdini for this purpose, but I only have a smidge of experience with it. And I couldn’t afford to postpone the release for several months.

Grass

I didn’t want to spend a lot of time modeling high poly vegetation if the result was going to be an image anyway. I have done that in the past, and it took me several days to get the density just right.

So why not go directly for an image? For this purpose, I started experimenting in Substance Designer by distributing grass blades in a horizontal line. Soon after, I had the result I was looking for.

I used the same principle to create all the flower variations.

Naturally, since I utilize Substance for this, I could expose a lot of this kind of customization to the end-user in the final material.

Optimization

I did the best to my knowledge to optimize where I could, shader efficiency and LODs being the biggest part of it. Though, in the end, a lot of the optimization responsibility also lies with the users. Depending on how they utilize the assets, performance can either be great, terrible, or somewhere in between.

For that reason, I included an extensive demo scene with the package, in order to illustrate in which capacity the assets are best used. I also made use of Occlusion Culling by breaking the line of sight with other areas of the map frequently.

To make the LODs (and collision meshes) for the cliffs, I used Mesh Simplify from the Unity Asset Store. It is an excellent solution for decimating meshes without having to leave Unity.

For the trees however, I didn’t pan out right, often the tree trunk would be destroyed entirely, or the silhouette would differ too much. Making the LOD transitions painfully noticeable. I had much more success with swapping out the tree branch meshes with a lower poly version. It was a painstaking task to manage, but I couldn’t be happier with the result!

For the smaller assets such as the flowers I made the LODs manually. The polycount was already so low that it required precision work.

I also wanted to add billboards for the trees, most games utilize them, for good reason. But I had no means of creating these outside of SpeedTree. Most, if not all, of the trees offered on the Unity Asset Store do not offer this. Unless they were creating using the editor’s “Tree Creator” (personally, not a fan).

I ended up creating a solution where I create an orthographic camera, and fit it to encompass the bounds of a given tree prefab. The tree is rotated 90 degrees, four times, where at every turn a screenshot is captured. These screenshots are subsequently packed into a texture atlas.

Another pass like this is done, for the normal map, where the camera is set to render the tree’s depth normals instead. I found that when using a normal map on a tree billboard, it results in more believable lighting, and a much smaller discrepancy between the tree and its billboard.

There is a lot of wasted space in the texture atlas, which could be utilized with a top-down render of the tree, a point for improvement. Still, I’m very happy about the result and being able to provide billboards for the trees I will be adding in the future.

This method did pose another challenge though: tree branches in the Fantasy Adventure Environment are customizable through the shader and their corresponding Substance material.

So, if users were to change the color properties of one of the trees, its billboard would not match and render itself pretty useless.

To circumvent this, I switched to rendering the billboard as an RGB texture. I could utilize each color channel as a mask to match the color of the branch or trunk. Since the branch, trunk and billboard were housed under a “master” Substance material, I was able to tie most of the color parameters together.

Ultimately this does away with the long process of re-rendering a branch mesh with the adjusted leaf color, applying the new texture to the tree, and finally rendering out a new billboard. A process that would not be accessible to the end user unless they have the know-how and source files. Since I’m developing for the Unity Asset Store I always must keep things like this in mind.

Interchangeability and versatility

I believe using procedural methods in production will ultimately save you time. They will require some time to be set up, so it’s a consideration that must be made. In the end, if something is made easier and faster, it gives you a lot more freedom to experiment. For artists, being able to easily iterate is vital towards achieving the desired art direction.

Regarding customizability, I do always try to keep in mind that it should not come at a large cost. I could have easily added a wide range of color properties to the branch shader. However, once you’re satisfied with them, they will probably not change anymore. You’ll end up using a shader in your game that’s set up for customization, instead of functionality.

For the Fantasy Adventure Environment, I’ve set all Substance materials to “Bake and discard”. So, when you make a build of your project, all Substances are converted to regular texture maps. Making them purely editor-based tools. This avoids any added loading times the generation of the textures might otherwise incur.

Emulating nature

I find that a great deal of environment design is about emulating nature. The same laws that govern the growth of vegetation, or the scattering of rocks can be defined and translated to a simplified algorithm. The way Ubisoft approached their terrain in Ghost Recon Wildlands is probably the pinnacle of a non-destructive, procedural, approach to world-building.

Admittedly, I haven’t explored this subject as much as I should have. So far, I’ve been manually painting and placing all the assets. But I wouldn’t dare to do that for an open world environment.

Though, I’ve seen some promising things from GeNa, and the upcoming Vegetation Studio. With the addition of tree billboards, I’d be curious to try these out and see how far I can push an open world environment using the Fantasy Adventure Environment assets.

Shaders

My first foray into shaders was with Unreal Engine’s material editor. At the time, I found my knowledge of Substance Designer was somewhat transferable. In turn, Substance Designer shared some similarities to Photoshop. If you’re familiar with any of these tools, you’re off to a flying start!

The principles are much of the same, except with shaders you have access to the various aspects of a 3D mesh and game engine, such as the mesh’s vertex position or camera view direction. A lot of ingredients, that can be utilized in various mathematical methods, to do almost anything.

Once you start to understand that colors are simply a representation of values, a veil will be lifted, and it will all seem much less like black magic. Do keep in mind, this is coming from someone who struggles even with basic algebra.

I’ve come to recognize Amplify Shader Editor as the equivalent to Unreal Engine’s material editor in Unity. It is the golden screwdriver on my toolbelt and I could not recommend it enough! There are several tutorials available on the Amplify Creations YouTube channel to get started. Furthermore, the package also comes with a ton of example shaders, which you can open up and dissect.

I find that node-based shader editors are an ideal tool, for both artists and programmers, to prototype or develop a shader. As it allows you to quickly experiment with things without being confronted by any mishaps with language syntax.

Alternatively, if anyone wants to delve into ShaderLab, Unity’s shader language, my best advice is to start with writing “Surface Shaders”. This will familiarize you with the principles of composing a shader, without having to learn to how to write your own lighting models first.

I have some resources to share, which were (in order) very useful in helping me understanding Shader Lab:

Thank you for having me!

You can follow my future developments on Twitter or view my Asset Store catalog.

The Fantasy Adventure Environment has also been selected as a finalist for the Unity Awards 2017, if you think it deserves a vote, you can cast it here!

Jonathan Van Immerzeel, Staggart Creations

Interview conducted by Kirill Tokarev

Follow 80.lv on FacebookTwitter and Instagram

Comments

Leave a Reply

2 Comments on "Unity Shaders for Stylized Scenes"

avatar
Taha Salim Taha
Guest
Taha Salim Taha

Hey man, this work is amazing! We at Nyx Games love this, incredible work. Thanks for all the detailed information Jonathan!

Ricardo Teixeira
Guest
Ricardo Teixeira

We love your work at Amplify, thank you for using our editor!

wpDiscuz
Related articles