Working with multiple workflows

Article / 16 March 2019

Working on spirits has brought a lot of new technical challenges. Solutions have ranged from creating shaders to diving into C# and even a brief look at entity-component systems. But there are also smaller, more day to day challenges, like choosing the right workflow for your models.

There are 3 main workflows I am familiar with, each one is more efficient than the others at a certain distance – or with certain hardware -, than the last.

I would group them as such:

Close up/ Next-Gen graphics: Custom Normal workflow

Close-ish/Modern console or high-end mobile: Smooth shaded with high fidelity materials.

Far away/any system any time: ‘Normal’ modeling, hard edges are built into the mesh with physically separated faces. Lower poly is better poly.

These are some pretty simplified and slightly exaggerated examples, and in the last few weeks, I have used all of those on Spirits. Each of these styles has its place in modern game development, and sometimes even in the same model.

[Image: Star-citizen spacestation]

Low-Poly

If I wanted to, our camera setup and overall game would not be hurt going with the ultra low-poly setup and I have begun to use it for many backgrounds and ceiling models. It’s hard to beat the simplicity of a 1 face wall. The main reason I would avoid this workflow is to get nice bevel reflections on the edge of a hard surface. I chose to use this workflow because bricks don’t reflect that well anyways, and it gets much easier to work with non-beveled geometry. The time savings alone of not dealing with bevels, doubled up edges, modifier weights, or where the place a material transition or UV seam makes it the best choice for these assets that build the world up but don’t necessarily hold the spotlight.

[Image: Bevel vs hard edge]

Mid-Poly

This is sort of where the game industry is now, although more and more games are releasing with more advanced tricks up their sleeve. Mid poly is what most models are used to, making a low poly mesh that has a good silhouette, then making a high poly to bake a nice normal map from.

The workflow is simple and easy to break down into individual tasks. It’s also very universal familiar making it a safe bet on most teams. Tools like substance painter excel with this workflow! I used this kind of workflow on some of our facades and plants. This workflow gives nicer looking results but still has the easy user experience like the previous lower poly workflow. Unfortunately up close the model’s reliance on textures can break down showing lots of pixels. For Spirits (and for most 3rd person games) our camera never gets close enough to show the pixels in the texture, so we are relatively safe here.

[Image: Texture pixels]

Custom Normal Beveled

The highest poly workflow, made famous by games like star citizen, relies on some more advanced techniques to work. It essentially operates on the philosophy that modern games can afford to define normals through geometry, not just through textures.

Custom nor male really shine with any tillable texture. By leaving it to the mesh to add the edge details, a very cheap flat texture can be tiled many more times giving a much crisper look.

[Image: Starcitizenship]

[Image: Spidermanplaygorund]

I use this workflow on the back room kit. I chose this for two main reasons: The back rooms are not a priority like a mall, so if worst comes to worst I can fall back to a try-planar shader to texture them; The back rooms are also much tighter, meaning the camera is a lot closer to our edges,

[Image: Backroom kit]

And that is how I choose and use various modeling workflows in Spirits! I hope this had some useful information, and that you can go on and apply some of this reasoning to your own projects!

Happy arting, sincerely,

Matt

Portfolio: portfolio.mattmurch.com

Find me on Artstation as mattmurch!

Twitter: @Murch_Matt

Code free interactive water!

Tutorial / 01 February 2019

After talking with our art mentor, Jonathan, our team began looking into adding water to get some of the beautiful reflections back into our level. We have a few options,  decal based puddles, or splat shaders with a height blend. Each of those give us our reflections, but they don’t add a sense of life to the scene. If we can have real time interaction between objects, players and the water, then we can also use the water to sell the time freeze effect!

This is a technique I have wanted to work out for a long time, but I was always missing a sage or two. With a pointer by our tech mentor Andrew I found this tutorial:

https://www.patreon.com/posts/24192529 – by Minions Art

 

He uses a lot of shader code, but If we take that technique and apply it to Unity’s Scriptable Render Pipeline with Shadergraph we can do the entire thing code free.

Step 1: Basic Setup

All we need in the scene are one Particle System (Visual Effects Graph now), Orthographic Camera, Our water and Ground planes, and our Player Object.

A plane for the Water, a plane for the ground, and an orthographic camera.
A plane for the Water, a plane for the ground, and an orthographic camera.

We’ll create a Render Texture, a Material and a PBR Graph.

Assets we create for the water system.

I also created a water ripple texture, you can make them easily in Photoshop/Gimp, here is the one I used for my first attempt.

A particle for water ripples. It is partly transparent and white, so may be hard to see.

Step 2: Shader Setup

The shader is really simple, we can use ShaderGraph to make our water without any code!

The Shadergraph for water interaction.

This node graph has three major parts:

The fist part is to get the water interaction in, we’ll do this by sampling our render texture. Our render texture can be treated like any other texture:

The nodes to bring in our interaction texture.

The first node is just a texture node but turned into a Property. You can find those over in the blackboard:

The blackboard with all of our shader parameters.

With the sample 2D node we want to take only the red channel. This lets us use the other 3 channels (G, B, & A) for other types of interaction (footsteps, tire imprints, craters/impact marks).

The next few nodes are some math to make our water particle more interesting, it is not essential to the shader, I remade the simple gradient for opposite and exaggerated black and white maps. Then by multiplying them we get a more detailed ripple.

The other node group deals with some simple waves:

The nodes to make up some procedural waves.

Game water is often just a water texture scrolling in two directions, for our shader I used two noise textures but you can substitute water textures, a properly flow-mapped water texture or any other method you prefer. The tilling and time nodes are what make the scrolling effect work.

The final set of nodes merges our interaction with our waves as a height map (Black and White) and generates a base colour, and most importantly a normal map. The normal map will let us see the interaction through the reflections on the waters surface!

The node group to get our waves and interaction to mix.

We bring in the interaction texture and add it to the wave texture, then we split it into colour and normal. The colour just lightens our black and white map with a light blue for our water tint, It will be barley noticeable, but it will highlight the waves a bit.

The important part is the ‘Normal form Height’ node. It will take our height map and generate a normal map, essentially converting our elevation (white is high, black is low) to angles (blue is up, red is right/left, green is up/down in the image space). This the works with unity to create nice smooth reflections on the water.

The last two Properties let you control the transparency of the water int he editor! Each one is a Vector 1.

Now we have a functioning water shader, but we need data to interact with.

Step 3: Building the interaction elements

The interaction elements are very simple, you need a particle system and a layer for that system! Then with some camera adjustments we are good to go!

First well add our interaction layer:

The layers dialogue, with our water layer added.

With our WaterInteraction layer added we can create a particle system parented to the player/interacting object.

The ripple particle system in the viewport.

When we create our water particle system we need to make sure it is on the WaterInteraction layer, so that we can use a mask on our cameras to make sure it only shows up in our RenderTexture.

Our interaction particles need to be in the WaterInteraction layer.

Here are the settings for the particle material, we will be using the legacy/Particles/Additive shader that comes with unity. Most shaders are not compatible between default unity and the new Scriptable Render Pipelines, luckily some unlit shaders still work, and the Additive Particle Shader works really well with our particle system controls for tint and opacity.

The first settings for our particle, the red colour lets us isolate water interaction to the red channel in our Render Texture.
The emission settings will make sure that there is always interaction around the player, and that there are enough particles when they move.
By having the smallest possible emission area we can control the particles more accurately.
Over time we want our particles to fade out, a feature uniquer to the additive shader in HDRP. This will clean up any jarring transitions from our ripples to the waves.
Using the size curve we can control how the ripples spread out.
Adding some rotation to the particles can give us a more realistic and random result without needing multiple textures or flip books.
In the renderer we want to make sure we are using our particle material (the one with the legacy additive shader on it) and that our ripples are horizontal billboards. This way they will always be perfectly flat.
The shader settings for our material, the shader is legacy/particles/additive and our ripple texture has been connected.

Finally we need to change our main camera to ignore our water interactions, and our orthographic camera to only see our interactions.

Our main camera can see every layer except the Interaction ones.
Our Interaction camera can only see the interaction layers.

Now we are all set to mix it together!

Step 4: Adding it all together

Add our Render Texture to the output of the interaction/orthographic camera:

The Render Texture should be the target for the camera output.

Then add our shader to our Water material, add the interaction Render Texture to the texture input.

The water material should have the WaterShader and the Interaction Render Texture.

Done!

With those setup your water should be ready! Hit play and walk around a bit to see the interaction take effect!

For more Unity experiments and game art, checkout Portfolio.MattMurch.com!

Block outs for feeling

Article / 03 December 2018

It’s been 12 weeks since we started this semester, 8 weeks (approximately) of development towards our Alpha for Spirits. We got a block out early on, grey blocks that marked the space that would become our deserted mall.

An early grey box of Spirits

As an environment artist this was fun to make, but it din’t satisfy the needs of our team to visualize our retro look. There was speculation that we could make this into an ancient temple.

It wasn’t until I watched Emilia Schatz’s 80 Level article on Uncharted’s block-mesh process (https://80.lv/articles/defining-environment-language-for-video-games/) that I considered adding more character to our own blockouts.

I went all out, with Unity 2018’s new graphics and tools it took only a few hours to turn that blockout into a space that truly feels like a deserted mall.

Above you can see the result of my endevours. If it weren’t for the amazing tools I had to work with then this very well could have been a waste of valuable design time. Instead, using the HDRP Triplanr Shaders, Pro Builders modeling tools, and the amazing realtime lighting each piece of that blockout essentially manages it’s self.

Using the Substance in Unity plugin I was able to find materials directly on Substance Source, modify the .sbs in Substance Designer, and connect them directly to HDRP Lit materials. By enabling triplanar projection I skipped any UVing time and got instantly tiled, high detail textures.

On Substance Source I looked for four distinct materials to create the feel of our game, while still maintaining the readability of the environment : floor, ceiling, walls, and decorative materials.

Testing shaders and textures to block out the ‘visual feel’

We took this approach to blocking out the ‘mood’ or feel a step farther by developing simple, but distinct, shaders based on the work of Ciro Continisio. With the feel really coming together we just had to enable volumetric fog, and we had a level that not only represented our metrics, but also FELT right.

Our lattest video, showing our block out progress.

Sense of space

Making Of / 10 November 2018

 

Our first Blockout of the level.

 

Our second blockout focused on getting the ‘mall’ feeling’ and working out our metrics.


This phase of our blockout was a coordinated effort to begin introducing the technology we need for our final product. Here I have introduced Cinemachine and Timeline to bridge cut-scenes and gameplay. We also converted our old camera system to be a cinemahcine enhanced version.

 

Continuing our tech push, I integrated Unities HDRP package. This will give us much more advance graphics features. These include volumetric lighting, beer decals, shader graph support and many other items.


Our most recent version is back to pushing the lighting and feel of the space. We have decided to embrace a night time setting, so I have implemented a skybox to support that mood. One thing I found in the process is that moonlight is significantly more yellow/orange than sunlight by several hundred kelvin. So far the best solution seems to be colour grading for a more familiar nighttime look.


Tool highlight: Windows 10 Photos App

General / 12 October 2018

When trying to crop the concept render for the Void environment, I stumbled onto some new features for the windows image viewer. The viewer can haw add “3D” effects like muzzle flash and rain to an image, and saves it as an mp4.

Here is an example made as a quick experiment to test the tool:


That was a completely unexpected feature in a software I normally avoid, it just goes to show you always be on the lookout for new tools and ideas even in the last place you would expect to find them.

Starting Spirits: New team, new game, new art!

Work In Progress / 11 October 2018

Who am I?

I’m Matthew, the environment artist with Open Door Games. I make 3D art and most of the supporting assets for the team.

What are we making?

We’re making a game called ‘Spirits’ its essentially a combat demo where we want our player to experience telekinesis and other mental powers.

Where I am so far.

This week was all about defining our environment for me. I’m newer to this team, so I’ve taken some time to get a feel for what we already have, and what we need to be doing now.

I have pretty consistent workflow, I almost always begin a project on paper. I also really like using the guideline of thirds to organize things other than composition.

So I developed 3 concepts to build from:

The 80s Mall

The sketches for my 80s mall concept.

This is hands down my favourite concept because it is much more anchored in reality, this will make designing each piece of art significantly easier.

A balcony in swapbox, even the hand rails are engineered to look organic, but also fit our cubic collision.

I recently finished crunching on Swapbox (Exhibiting at ImagineNative October 20th!), we went all out on originality and abstract design….and  it was so brutally excusing to sustain that level of creativity, very much the hardest art I have ever worked on. So right now, being able to draw more form historic reference is massively attractive.

The great thing about using a mall is that it gives us instant access to the 80s nostalgia we where looking to harness, and it  gives us dozens of simple objects we can give to the player to throw around with their powers. In the sketch I have added some props that are easy to model but can also be enhanced with simple effects (simple cloth sim of the hanging clothing, sparks on TVs).

Since I could call on reality it was really easy to identify some basic zoning for the level, to start thinking about art can help the player stay oriented in the level.

The Falling City

A sketch of the up side down city with a relatively simple level.

The city upside down came out of conversation with our character artist, a way of hinting that this is a battle in the mind of our protagonist character. It also gives some neat possibilities for introducing new props over time. I’ve drawn potential things that can fall from the city in the sketch. The map is very poorly defined here, without a well defined enemy it can be hard to build an arena to fight in.

The looped arena is similar to the design of the mall concept, where the enemy stays in the centre of them map.

The Void

Concept render for an environment

This one is the most minimal, and the most abstract. The sketch I had didn’t seem to convey what I was going for so I took them into blender and whipped up a render.

The Void concept is a isolated dream world made up of select elements form our characters normal world. Anything form trees to cars could be put into this environment without really messing up anything.

A nice feature of this sparser environment is that it can be laid out any way we want. This concept is better suited for an enemy that can travers the environment in some way.

My sketch of the ‘void’ inspired level

Here are the initial sketches to, with sketching you have more freedom to scribble in details that take time to make in 3D, so I think sketches convey the feeling of a finished environment much more efficiently (general). In order to keep my modeling time under 30 min for that render I had to limit what props I put in, focusing on big pieces (ground, 2 trees, 3 rocks, sky swirl, and a 45 frame water sim for the ripples.).

 

With these three concepts we have a lot of room to develop. These aren’t final by any means, but more of a jumping of point. With a second round of iteration we got to a neat mashup environment that seems a bit more promising:

The Compilation Enviroment

This environment came about after presenting the other concepts to the team.

This design features the dream like elements of the upside down city, set int he more grounded mall environment, and has a lower level that acts as mid combat progression taken form the void. The idea would be to have the player enter the mall, fight the boss for a bit, then fall through the floor to the void/arcade area.

In the sketches I have also been working out technical problems as well, such as how to effectively ‘sell’ the upside down city without using up our effects budget.