How do shaders work

The first generations were basically boosting the triangles generation. A shader is a small piece of program, written in a low-level language that looks like C, compiled into a native binary executed by the GPU.

A more detailed schema found in GPU Performance for Game Artists will help you better understanding the complete process:. Still, this is important to understand that in 3D engines, a lot of the job is also done on the CPU side.

Alongside the game logic AI, input, animations , the CPU is also doing the matrix computation to update the 3D positions of every objects as well as preparing the textures to send to the GPU memory. I highly recommend you reading the complete article. Draw calls are often a very important metric to pay attention to. Too many draw calls will put a high pressure on the CPU and will lower down the frame rate. There are various optimizations to be done to reduce the draw calls explained in the article.

A 3D artist must understand this while creating his assets. You should now have a basic understanding on how a pixel and vertex shader work. The Vertex Shader is called first to act on the geometry and do the rasterization job. You still need to understand the basics of 3D shared in my previous tutorial series , but it makes stuff so much simpler.

A couple of cool YouTube videos to watch to learn more:. Think about it. Simulating water is not something that easy. You need to compute the reflection, refraction, transparency, deformation of the light going through it and potentially interactions with other objects! Open this sample in another tab:. Those properties will configure the pixel shader used behind for you. Fun fact, there is no 3D geometry generated by this water material.

You can check it by opening the inspector as seen in the previous article and display the wireframing. Remember, I told you 3D engines were cheating with optical tricks? The spoon deformation was probably done by changing the properties of the associated pixel shader rather than really bending it! This cool and simple Babylon. But as I told you, you can build more complex shader to achieve even better photorealistic results.

Modern computers usually have groups of four processors that work like these pipes, completing tasks one after another to keep things running smoothly.

Each pipe is also known as a thread. Video games and other graphic applications require a lot more processing power than other programs. Because of their graphic content they have to do huge numbers of pixel-by-pixel operations. Every single pixel on the screen needs to be computed, and in 3D games geometries and perspectives need to be calculated as well.

Let's go back to our metaphor of the pipes and tasks. Each pixel on the screen represents a simple small task. Individually each pixel task isn't an issue for the CPU, but and here is the problem the tiny task has to be done to each pixel on the screen! That means in an old x screen, , pixels have to processed per frame which means 14,, calculations per second! In a modern x retina display running at 60 frames per second that calculation adds up to ,, calculations per second.

How do graphics engineers solve this problem? This is when parallel processing becomes a good solution. Instead of having a couple of big and powerful microprocessors, or pipes , it is smarter to have lots of tiny microprocessors running in parallel at the same time.

Picture the tiny microprocessors as a table of pipes, and the data of each pixel as a ping pong ball. But a table of x tiny pipes receiving 30 waves of , pixels a second can be handled smoothly. Vertex shaders manipulate coordinates in a 3D space and are called once per vertex.

Everything inside void main will be executed by the vertex shader. A vertex shader yields a variable containing how to project a vertex's position in 3D space onto a 2D screen.

Fragment or texture shaders define RGBA red, green, blue, alpha colors for each pixel being processed — a single fragment shader is called once per pixel. Let's build a simple demo to explain those shaders in action.

Be sure to read Three. Note: Remember that you don't have to use Three. We've used Three. Before reading on, copy this code to a new text file and save it in your working directory as index.

We'll create a scene featuring a simple cube in this file to explain how the shaders work. Instead of creating everything from scratch we can reuse the Building up a basic demo with Three. Most of the components like the renderer, camera, and lights will stay the same, but instead of the basic material we will set the cube's color and position using shaders.

Go to the cube. Save and load index. Note: You can learn more about model , view , and projection transformations from the vertex processing paragraph , and you can also check out the links at the end of this article to learn more about it. Both projectionMatrix and modelViewMatrix are provided by Three.