I’m always looking for new ways to add interesting visual complexity to my projects.
Personally, I have a taste for abstract and geometric art that gives off an air of mysticism and mystery, stuff like fractals, alchemical symbols, runes and glyphs are things I find very visually stimulating, and pay special attention to.
Some examples I found noteworthy are below:
Making these symbols is often going to be a process that is completely dependent on what kind of game you are working on, what kind of world it is set in, what kind of feel you aim these symbols to convey and many other factors like this.
This blog post is not intended to address the semiotics and design portion of these symbols, that is a separate topic for another day.
What it IS intended to do, is to provide the reader with some idea of how they might achieve cool looking effects like this in their own projects.
For the purpose of this post I’m going to be using Unreal Engine 4, but in practice I believe all the knowledge would be entirely applicable to Unity or Godot, maybe even your own custom engine, really any system that has a renderer with alpha transparency.
Using photography of real life symbols:
Often the best inspiration is found in the real world. The metal plates you see above are used in rituals in Hindu culture, and have a very appealing geometric aspect to them in my opinion.
Here’s what the same symbols look like in UE4:
What I did was:
To take some high-contrast photos of these plates, trying to eliminate all shadow and light information from that photo.
Open up those photos in Photoshop, and edit the pictures with the objective of converting the image into what could be thought of as a mask or heightmap (if you’re familiar with terrain generation this’ll probably be more relevant).
This is what the output should look like:
Then just import the texture into Unreal/engine of your choice and setup the Material to look something like this:
Choosing to use this as a decal or just as a normal Surface material is up to you, but I personally find decals to work great for the use case of applying these glyphs/runes to the world.
Something to take advantage of as Unreal supports decal normals, is to generate a normal map from the mask output of Photoshop/Your-editing-software-of-choice, this adds a little more lighting info. and response for the decals.
I used an online normal map generator, but I’ve since found out that solutions like this (which also includes stuff like CrazyBump) are not advisable for generating textures for production, as the tangent spaces they operate in may or may not have any correlation with Unreal’s own MikkSpaceTangent implementation, and are generally just bad anyway.
This results in textures that will produce incorrect/inaccurate lighting responses, especially in a PBR setup.
(And if you aren’t using a PBR setup while working on Unreal or Unity right now, you should really be using a PBR setup. Even stylized aesthetics still gain a lot from respecting PBR rules)
That about covers this method though.
Use WeaveSilk to generate masks:
This next bit is pretty straightforward, but is also fun to do!
There’s an online interactive art generator called ‘WeaveSilk’ that allows users to generate complicated geometric art with just a few drags and clicks of the mouse using algorithmic generation from user input.
This lets you generate some very interesting looking patterns and symbols with minimal effort and a high iteration speed.
Saving these symbols out is also just a right-click operation away.
Once obtained, you can edit it to remove the color information and convert it into a proper mask. This mask is then used in a similar way as in the above material to create results like this in-engine:
And that’s about it for this post.
I hope that by sharing some unconventional ways to generate masks, I can give other people some ideas to help them start working on their own ways to create these cool geometric symbols and patterns we all love so much.
Hope this is helpful!
I’m on Twitter and you can reach me @nightmask3 if you need any help or have a clarification.
| Programmer | Technical Artist | 