GET ADVICE<\/a><\/p>\n\nHistory of the emergence of shaders<\/h2>\n\n When computers learned to display more than two colors on the screen, game developers got serious about graphics. At first, they applied color filters and non-standard video effects to change the color of pixels or an entire sprite. Algorithms were then used to create a transparency effect and the ability to dynamically change the texture. <\/p>\n\n
Video cards from the 90s didn’t have separate shader units yet. The video cards themselves were able to execute limited sets of commands. Because of this, non-standard algorithms had to be executed on the CPU. <\/strong>These effects made some older games look better when the graphics were rendered by the CPU rather than an expensive graphics card.<\/p>\n\nFor example, in Quake 2, there were two ways to display water:<\/p>\n\n
\nhardware rendering – the video card rendered the water as a static blue light filter;<\/li>\n\n\n\n program rendering – the processor rendered water as a dynamic texture with a splash effect.<\/li>\n<\/ul>\n\nShaders in Quake 2<\/em><\/p>\n\nVideo card developers in the late 90’s introduced shader blocks into video cards to execute special algorithms<\/strong>. First they tried to stitch standard sets of algorithms into the blocks, like they did with video memory and the central video chip. But then they realized that game developers want to invent something of their own, and allowed games to execute any scripts in shader blocks. <\/p>\n\nShaders first appeared in Quake 1, where they were responsible for dynamic lighting.<\/strong> The script received information about the coordinates of the light source, calculated the distance from the light source to the nearest polygons and lightened their texture pixels during frame rendering.<\/p>\n\nThe lighting system in Quake 1<\/em><\/p>\n\nShaders were then used to create dynamic lighting and textures, water, fog and fire effects, and grass.<\/strong> Video card maker NVidia has come up with a shader to simulate hair behavior that was used in The Witcher 3 and Tomb Raider games.<\/p>\n\nWhat shaders are<\/h2>\n\n There are these basic types of shaders:<\/p>\n\n
\nVertex (Vertex)<\/strong> – works with vertices of objects or separate points in space;<\/li>\n\n\n\nGeometric<\/strong> – working with lines and triangles;<\/li>\n\n\n\nfragment<\/strong> – work with pixels, change their color depending on what is happening in the scene.<\/li>\n<\/ul>\n\nPrior to 2006, video cards had separate shader processors for each type of shader. But thanks to advances in technology, video card manufacturers have replaced the three types of blocks with universal processors of the same type. Such a universal block can handle any kind of shader script. <\/p>\n\nThe 2007 graphics card has 17 shader processors, the modern RTX 2080 has 3072 shader processors<\/em><\/p>\n\nWhat you can do with vertex shaders<\/h2>\n\n Vertex shaders are used to change the vertex coordinates of 3D objects. <\/strong>For example, a vertex shader allows you to get the coordinates of the vertices of a sphere, and then change them to make a cube. The 3D model itself in the game files does not change – only the coordinates of its vertices are changed when rendering the image. <\/p>\n\nThe most popular task of vertex shaders is skinning or skeletal animation.<\/strong> The developer makes a skeleton inside the 3D model and uses the vertex shader to bind the skin to the skeleton. A skin is a group of model vertices that are arranged around a single bone. When the bone moves, so do the vertices attached to it. The texture between the tops of the different bones is stretched, but it’s better than the “ripped off” arms from early 3D games.<\/p>\n\nThe second popular task is real-time deformation of objects.<\/strong> It used to be that shaders like this were used to make realistic waves on water. Now warping is being used to create realistic snow, mud, dents on cars and bullet marks. <\/p>\n\nThe third task is the algorithmic animation of objects.<\/strong> For example, you can use vertex shaders to make low-polygon grass or triangular leaves and make them move with gusts of wind. You can also make realistic animations of ropes or fabric. <\/p>\n\nIt took 137 lines of code to create this herb using the Unity 3D shader<\/em><\/p>\n\nAnd then there are particles – individual moving points.<\/strong> Shader particles require fewer resources than if the engine rendered them in the same way as 3D objects or sprites. <\/p>\n\nWhat you can do with geometric shaders<\/h2>\n\n Geometry shaders allow you to create or destroy primitives in real time. Roughly speaking, you can control the number of polygons in a 3D model on the fly. <\/strong><\/p>\n\nMost often geometric shaders are used for tessellation – adjusting the complexity of the displayed model depending on the distance to it.<\/strong> For example, let’s take a sphere that consists of 10,000 polygons. If you move it away from the camera so that it occupies a 10×10 pixel square, the graphics card will still calculate 10,000 polygons and waste resources. If you bring the sphere closer to the camera, the player will see the angular edges of a seemingly round sphere. <\/p>\n\nThe geometry shader removes or adds polygons on its own<\/em><\/p>\n\nGeometric tessellation shaders allow you to do just that: <\/p>\n\n
\nWhen the camera is distant, the shader removes some polygons so that the sphere looks round at a distance, but does not overload the graphics card;<\/li>\n\n\n\n When the camera zooms in, the shader “squeezes” 2-4 more triangles out of each polygon to make the sphere appear round even if you look at it closely. <\/li>\n<\/ul>\n\nAlso geometric shaders can be used to enhance rocks, walls, fabric and any uneven surfaces. If you need to add irregularities – geometric shader will push in or push out polygons according to the specified algorithm. <\/strong><\/p>\n\nIn addition to triangles, geometry shaders can generate straight lines. It is possible to customize the shader so that it generates additional lines only on the faces of the object. This way you can make the edges of objects rough or smooth depending on the type of object.<\/strong><\/p>\n\nWhat fragment shaders do<\/h2>\n\n Fragment or pixel shaders modify the color of the displayed pixels. <\/strong>Pixel shaders and algorithms can be used to make gradient filters, screen edge vignettes, noise and image graininess. <\/p>\n\nFragment shaders work the same way as pixel shaders, but they can be applied to fragments of bitmap images and textures. For example, add a glow effect, blur an out-of-focus object, or generate a texture using an algorithm. <\/p>\n\nA typical example of using fragment shaders is multitexturing. <\/strong>Multitexturing is necessary for lightmaps (lightmap) and simulation of the lighting system. It works like this: a transparent lightmap – an additional texture that describes the object’s luminosity – is overlaid on top of the object’s texture. When the game engine realizes that light is falling on an object, it commands the shader to “manifest” the lightmap in the illuminated areas. <\/p>\n\nThe second example is pixel-by-pixel lighting. Such a pixel shader collects information about the illumination of the model and manually changes the brightness of each pixel of the object texture. <\/strong>Popixel lighting allows you to achieve realistic lighting on dynamic objects, as well as make dynamic shadows. <\/p>\n\nDoom 3 is the first game with pixel shader lighting<\/em><\/p>\n\nThe third example is post-processing effects.<\/strong> For example, halo from a light source, blurring of distant objects, fog or cloudy glass effect. The fragment shader processes objects in the player’s field of view, counts the depth of the scene, and manually paints the necessary pixels to create any effect.<\/p>\n\nHow to write shaders <\/h2>\n\n Shader processors work with a limited instruction set, so simplified programming languages are used to write shaders. Every major game platform or rendering technology has its own shader language.<\/strong> For example, XBOX, PlayStation, NVidia and Apple have their own shader languages. <\/p>\n\nDue to the simple syntax of shader programming languages, their creation can be brought into the visual editor. That’s what the developers of the Unity3D engine did. Unity3D shaders can be made in the Shader Graph visual interface and see the result in real time. <\/strong><\/p>\n\nShaderGraph interface in Unity3D<\/em><\/p>\n\nConclusions<\/h2>\n\n If it weren’t for shaders – modern games would look like Wolfenstein 3D with detailed models. Shaders are what make games beautiful:<\/p>\n\n
\ncreate lighting and other graphic effects;<\/li>\n\n\n\n simulate the behavior of water, cloth, snow, and other materials;<\/li>\n\n\n\n ensure that the particle system works;<\/li>\n\n\n\n make the animations more realistic.<\/li>\n<\/ul>\n\nWorking with shaders requires a good math background: you need to understand math functions, matrix transformations, graphs, and more.<\/strong> Shader specialist is a separate profession with a high threshold of entry. <\/p>\n\nIf you need to create graphic effects (VFX) for a game – contact us. We have VFX specialists with extensive experience creating a wide variety of effects using shaders. <\/p>\n","protected":false},"featured_media":13625,"parent":0,"menu_order":0,"template":"","categories":[116],"tags":[],"services_cat":[183],"class_list":["post-18687","services","type-services","status-publish","has-post-thumbnail","hentry","category-apps-web-dev-ux-ui","services_cat-website-and-app-development-ui-ux-design"],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/services\/18687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/services"}],"about":[{"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/types\/services"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/media\/13625"}],"wp:attachment":[{"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/media?parent=18687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/categories?post=18687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/tags?post=18687"},{"taxonomy":"services_cat","embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/services_cat?post=18687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"example](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d435075fb7.png\" "\\"example")
<\/figure>\n\n![\"The](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d4389bef57.png\" "\\"The")
<\/figure>\n\n![\"water](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d43d3128ea.png\" "\\"water")
<\/figure>\n\n![\"quake](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d44011445c.png\" "\\"quake")
<\/figure>\n\n![\"The](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d44203587f.png\" "\\"The")
<\/figure>\n\n![\"skinning](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d443bed16e.png\" "\\"skinning")
<\/figure>\n\n![\"grass](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d445bf2758.png\" "\\"grass")
<\/figure>\n\n![\"example](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d44b89362c.png\" "\\"example")
<\/figure>\n\n![\"geometric](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d44d7df366.png\" "\\"geometric")
<\/figure>\n\n![\"example](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d450dcfc34.png\" "\\"example")
<\/figure>\n\n![\"doom](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d452b0d6c6.png\" "\\"doom")
<\/figure>\n\n![\"ShaderGraph](\"https:\/\/koloro.ua\/public\/files\/images\/content\/5f2d454973462.png\" "\\"ShaderGraph")
<\/figure>\n\n