22
\$\begingroup\$

I'm new in Game development and probably this is a silly question. I had a look online but haven't found a clear answer, I did it bit quick but enough to evaluate that this is a confusing topic without prior experience.

The most topic I found regarding normals in game development they assume you already know what they talk about, but I don't.

I found this --> https://relativity.net.au/gaming/java/normals.html which is helpful already but I'd like a more in depths explanation.

  • What is a "normal" in game development?
  • Why do we need it?

For context, I'm using Three.js which uses normals, here a 'helper' where you can visualize these 'normals arrows' https://threejs.org/docs/#examples/en/helpers/VertexNormalsHelper ThreeJs uses WebGL (OpenGL) and when setting a triangle manually, if you don't set the normals and add a material that is supposed to reflect the light it appears black. Well now that I think maybe, is because it needs to know what is up and what is down? Bit confused

\$\endgroup\$
3
  • 2
    \$\begingroup\$ It couldn't be simpler. Triangles obviously have two sides, a front and a back. The normal is pointing upwards from the front. \$\endgroup\$
    – Fattie
    Nov 22, 2023 at 20:54
  • \$\begingroup\$ Normal is 90 degrees to the tangent. You probably learned this in school but forgot \$\endgroup\$
    – slebetman
    Nov 23, 2023 at 7:03
  • 2
    \$\begingroup\$ @slebetman maybe, but I am also a non-native English speaker so maybe we called it something else in school. \$\endgroup\$ Nov 23, 2023 at 12:59

2 Answers 2

45
\$\begingroup\$

Direct Answer

I see that other answer going into technical details, but I don't know if that hits the spot for answering "What are even normals" - so here's a plain English answer for contrast:

A normal is the direction that a surface is facing.

Why does it not just use both sides?

A 3D model consists of points in 3D space (= "vertices"), 3 or more of which can be combined to form a surface that we can see (= "face").

In reality, if you have a surface-like-thing, like a sheet of paper, you can see it from both sides. But for the faces in 3D rendering, that would be a waste. Consider a 3D model of, let's say, a person: The faces on the back side, we only see from the back - because if we look at that model from the front, they are blocked by the faces that form that person's front side.

A normal allows us to easily identify those we don't need to render: Calculate the angle between the direction of your "camera" and a normal, and if it's smaller than 90°, you can skip it while rendering. Compared to other stuff, that angle calculation is such simple, fast math that we just saved roundabout half the effort - or in other words, doubled our performance.

Use Case: Glass Shader

Consider a sheet of glass.

Glass has a certain visual effect (in real life) that I was never really aware of, until someone explicitly told me: If you look at that sheet "head-on", it's transparent. The more angled of a viewpoint you take, the less transparent it becomes - for example, becoming more and more green.

I'm spelling it out for completeness' sake, because you probably already see where this is going: A glass shader usually gradually replaces transparency with some green-ish or blue-ish colour, the smaller the angle between the camera and the glass normal gets.

Use Case: Normal Map

Thing of the grooves in a brick wall: If you just make it a box with a texture, it will look very, well, flat. If you create a little 3D cube for every brick in there, the rendering engine will have to do a lot of extra work to calculate all that geometry, for something that's literally just a wall.

A "normal map" takes the x,y,z parts of a normal direction, and stores them in the r,g,b data of a pixel. That way, you get an "image" that looks kinda ugly 😁, but where every pixel stores information about at which "angle" that part of the texture is:

Brick wall normal map

A normal map can give it the illusion of it being 3D, because of the way the shadows move around the bricks when the light source moves. On the other hand, computationally it's extremely cheap: The renderer needs to draw every pixel anyway, it just uses the pixel-specific normal instead of the "global" normal for that surface - and the geometry is nothing more than a box.

The illusion of normal maps doesn't work at extreme angles, because then it becomes obvious that the thing is flat in 3D space. But for things like e.g. the floor, which you usually don't see that way, it adds a lot for little cost.

Summary

There are other, and much more advanced things that people do with normals. However, those can fill whole books. In the same vein, some things in this answer are a bit simplified.

As a general summary, I would say rendering is simulating how light bounces off of things and then reaches our virtual camera, and it is very helpful to know which way something is facing, when we want to simulate light reflecting off of it.

\$\endgroup\$
5
  • 2
    \$\begingroup\$ You may want to edit in an example of a brick normal map ... i.imgur.com/1w5HSpX.png \$\endgroup\$
    – Basic
    Nov 21, 2023 at 23:19
  • 1
    \$\begingroup\$ My first thought about glass stuff is that transmittance decreases while reflectance increases (easily noticeable at large angles, eg 70+ deg), while the second is that stuff behind glass block shifts slightly when turning the glass (easily noticeable when you are steady and tilt the glass slab, not noticeable when you move). I haven't noticed this color tilt effect yet except in cover glass that looks slightly greenish even up front, but it seems interesting and I will be looking for it in normal glass. ((a side note, you mixed it up - you need more color for larger angle)) \$\endgroup\$ Nov 22, 2023 at 8:41
  • 1
    \$\begingroup\$ @Basic Nice idea, makes it a bit more visual, thank you, I added it! \$\endgroup\$ Nov 22, 2023 at 14:34
  • \$\begingroup\$ @ZizyArcher I have considered having an own explanation about what means bigger or smaller regarding angles, but in the end I thought I can just use one word and people will still intuitively understand what is meant (after all, it's not a technical document). \$\endgroup\$ Nov 22, 2023 at 14:40
  • 1
    \$\begingroup\$ Just for clarity OP, it's totally commonplace to make or use a renderer that DOES show both sides of a triangle. But even in that case you - of course, naturally, obviously - have to know which side is the front, which side is up. That's what the normal is. \$\endgroup\$
    – Fattie
    Nov 22, 2023 at 21:02
34
\$\begingroup\$

In the context of geometry, a normal is a vector that is oriented perpendicular to a given object. It is commonly used for lighting calculations, but it can also be used to for calculating visibility, collision or situations where you need to know which way something is facing.

image of normals for a curved mesh

The article you linked also mentions the counter clockwise order of the points. That's also known as the winding & it's important because there's two vectors that are perpendicular to a plane:

two normals to a plane

The winding follows the handedness of the coordinate system. GPU pipelines use winding to perform backface culling and explicit normal data for shading.

Computationally, the normal to any two non zero vectors \$p\$ and \$q\$ is equal to their cross product \$p \times q\$. It's also possible to have vertex normals. Typically a vertex normal is computed as the normalized average of the surface normals of the polygons that contain that vertex.

vertex normals computed as average of face normals

But those aren't the only options and sometimes it's useful to use normals that differ from the geometry. For instance a normal map uses the RGB components of pixel within a texture to represent the XYZ components a normal. These can then be used in lighting calculation to simulate small displacements details without adding additional geometry.

As a corollary, if you have a model that renders incorrectly in a weird inside out sort off way, or the surface details look inverted, check the format for the normals and possibly the order of the points - using the wrong normals can cause things to point in the opposite of the intended direction.

\$\endgroup\$
2
  • \$\begingroup\$ I normally don't say thank you because of meta.stackoverflow.com/questions/269681/… but i had to give accepted to the other answer because is closer to what i asked which is "wha'ts a normal in game dev for a simple human being like me :D" however i really i have to thank you directly and I would accept both answer if there was this feature. Good quality , with picture and, actually your answer is more question than answer. I mean I am learning a lot in each phrase. \$\endgroup\$ Nov 22, 2023 at 9:49
  • 1
    \$\begingroup\$ I have to read it veeery is sloowly because is knew stuff. probably i gonna open more questions related to what you wrote because you wrote other things that I dont know. Anyway this is good. \$\endgroup\$ Nov 22, 2023 at 9:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .