Game Shaders Creation

All services

Game shaders are the scripts meant to improve graphics of the game. Shaders are used to simulate particles, to make simple animation of 3D objects and enhance visuals with a post-processing. We will tell you how it works and how we use shaders in games.

Minecraft with some shaders

Basic: How does graphics card work with shaders

A graphics card is a complex of computing blocks. Every block have particular task to do:

  • graphic chip is exchanging information between graphic card’s computing blocks and CPU;
  • geometry blocks are calculating and building 3D objects;
  • shader blocks are calculating and apply shaders to textures and objects;
  • rasterization blocks are getting data from other blocks and rasterize it into pixels you see on the screen.

At first the graphics card forms the geometry of the objects, which will be displayed on screen. Then it wraps the objects in the textures. At this moment the scene looks flat, because the textures do not react to the lightning and the objects do not drop any shadows. This effects can be added with the shaders.

The Witcher 3 without shaders

Here is The Witcher 3 without shaders. Yeah, Geralts head is missing becouse his hair is made with shaders. Roughly speaking, the shaders are something like Instagram filters but for video games. 

Do you need to create characters which look good without shaders? We can do it!

The history of shaders

When old computers learned to display more than two colors, game developers started to improve the video games visuals. They tried applied color filters and self-made special effects to change color of particular pixels or whole 2D sprites. In the 90s they learned how to make the object transparent and dynamically change its texture, which helped them to create glass, water and animated textures.

Graphics cards from 90s did not have shaders blocks. The graphics cards themselves could do only a limited list of commands. The game developers were forced to execute non-standard effects algorithms on CPU. And because of those limitations old games looks better with software render and custom games shaders than GPU render.

For example, Quake 2 had two separate water effects:

  • hardware render — GPU displayed water as static blue color filter;
  • software render — CPU displayed water as semi transparent texture with animated waves.

Water effects proto-shader in Quake 2

First real shaders have appeared in Quake 1 (1996). They provided simple dynamic lightning from shots and explosions. Shader script collected light sources coordinates and lighted up corresponding pixels at the end of frame rendering.

Quake 1 dynamic lightning

In the end of 90s the graphics cards manufacturers had implemented separate shader blocks for non-standard algorithms execution. At first they tried to built-in fixed command list like they did in graphics chips and video-memory. Later the realized that game developers want to make something unique rather than use standard commands. And the manufacturers had to unblock the shaders blocks and allow them to execute any custom scripts.

Game developers started to use shaders for dynamic lightning and dynamic textures, water, fire and fog effects, even for moving grass and leafs. Now we use shaders for hair physics simulation and real time ray-tracing.

3 types of game shaders

There are 3 main shaders types:

  • vertex — work with object’s vertexes or individual points of space;
  • geometrical — work with lines and triangles;
  • pixel — change pixel color correspondingly to the scene.

Graphics cards made before 2006 had separate shader processors for every shader type. Thanks to the technology development manufacturers replaced three types of shader processors with the universal type. Those universal shaders processors can handle any shader script no matter what type it is.

Comparison of an old and new graphics cards

The graphics card from 2006 has 17 separate shader processors. And modern RTX 2080 Super has 3072 of them.

What we can do with vertex game shaders

Vertex shaders can change coordinates of 3D objects vertices. For example, we can extract the coordinates of a spherical object and with help of some vertex shader turn it into a cube. The spherical 3D model in game files does not change — vertex shader only changes its form in process of rendering.

The most popular use of vertex shaders is enhanced model skinning. 3D artist make a simple skeleton inside 3D model and ties the model’s polygons to the bones. Because of skinning the model moves with its bones. But there can be some tears between polygons that are tied to different bones. 3D artists can get rid of this flaws with help of vertex shaders: they just tie vertexes to each other to make model stretch and not tear. You can see the difference between early 3D games without shaders and ones which were using vertex shaders.

Skinning in CoD and Virtua Fighter

Second popular use — real time object deformation. In old times developers used vertex shaders to make waves and splashes on the water. Now we use them to create realistic tracks on snow, sand and dirt. They also can be used to simulate car wrecks and bullet holes.

Third popular use — algorithmic animation of simple objects. For example, we can create low-poly grass or leafs and make them move like it’s windy just with vertex shaders. We can also use this technology to animate ropes and cloth.

Shader grass

A cherry on top — particles. Particles made with shaders need less resources than fully 3D snowflakes, sparks and raindrops.

What we can do with geometrical shaders

Geometrical shaders are capable to create or destroy primitives in real time. With help of geometrical shaders we can control the amount of polygons in 3D model on the run.

The most common use of geometrical shaders is tessellation — dynamical adjustment of how many polygons needs to be rendered in particular object. For example, we need to render a sphere which consists of 10 000 polygons. We place it far away from our point of view so that sphere takes little square of 10×10 pixels on the screen. Normally the graphics card would still build the sphere of 10 000 polygons. And if we place the sphere close to POV, we will be able to see sharp edges of supposedly round object.

With help of geometrical shaders we can enable tessellation process:

  • when the sphere is far the shader will destroy some polygons to reduce graphics card load and make the sphere look round from the distance;
  • when the sphere is near the shader will add more polygons to make the edges less rough.

Tessalation game shaders example

Also geometrical shaders can be used to improve quality of walls, stones, clothes and other grainy models. When we need to add more details we can use geometrical shader to push polygons in or out according to given algorithm.

Aside of triangle polygons geometrical shaders can generate flat lines. It is possible to make the shader to generate additional lines on the edges of an object. Using this technology we can adjust edges to be more rough or smooth with minimum load of graphics card. For example, the cylinder below is flat but tessalation shaders make it to look very detailed.

A cylinder imroved with shaders

What can we do with fragment game shaders

Fragment of pixel game shaders can modify color of particular pixels. With pixel shaders we can make gradient and vignette filters, generate noise and grain in real time.

With fragment shaders we can apply color-changing effects to fragments of screen image or texture. For example, we can create glow effect, blur objects out of focus or generate a texture with algorithm.

Shader effects in The Witcher 2

Common use of fragment shaders is multitexturing. It is vital technology for lightmaps and dynamic lightning systems. Game engine lay lightmap texture over the original texture. When engine understands that texture is under the light it commands fragment shader to reduce transparency of lightmap on illuminated fragments.

Other great use of pixel shaders is per-pixel lightning. Such shader collects data about illumination and manually changes brightness of every pixel which represents illuminated part of an object. It is one of the best tools to make realistic lightning and shadows with moving objects and light sources.

Per pixel lightning

And the last most popular case is post-processing effects like glow, blur, fogginess or cloudy glass. Fragment shader detects the objects in the field of view, calculates depth of field and manually changes color of every rendered pixel to apply post-effects.

How to make game shaders

Shader processors work with limited list of commands. There are some simplified programming languages which were created especially for writing shaders. Almost every major gaming platform (XBOX, PlayStation, NVidia and Apple) or game engine has its unique shader language.

Because of short list of commands and simplified syntax of shader programming languages it is possible to make specialised visual editor. Unity3D has its own editor Shader Graph which can be used to create game shaders with mouse.

Shader Graph in Unity 3D

Conclusions

If there were no shaders modern games would be like Wolfenstein 3D but with detailed textures. We should thank the shaders for all the beauty they do:

  • dynamic lightning and shadows;
  • water, dirt, cloth and other material simulation;
  • particles effects;
  • realistic animation of complex models.

To create the game shaders one must have good mathematical basis: different functions, matrix transformation, mathematical graphs and more. Shader programming specialist is a difficult profession with high entry threshold.

We have such specialists in our team and can develop most kinds of shaders for beautiful graphic effects. Write us if you need to enhance your game visuals with shaders.

Keep in touch:
hi@kreonit.com
+44 7 44 55 3 66 31
GET A TOUCH

Send us a message via messenger or email