why is everything flat in video games?
VloĆŸit
- Äas pĆidĂĄn 22. 07. 2024
- Black Friday is here! Grab my Game Art courses 50% off: courses.stylizedstation.com/
--------------------------------------------
đ„ What I've created : / stylizedstation
đŁ What I'm working on : / stylizedstation
đž What my community is creating : / stylizedstation
đ Where you can support me: / stylizedstation
đš Where to hang out with me: / discord
đ What I'm selling: stylizedstation.com
Dont let flat-earthers know about this đ
Earth probably isn't flat. The thing is our 7 continents are only a small part of it.
@@NikitaGal31 fun but totally useless fact; in scale, the distance between the lowest and highest points on earth's surface is so small compared to the earth's size that it'd feel smooth if you were huge enough to swipe your finger across it. So you could argue that while the earth itself isn't flat, its surface almost is lol
@@Phyllion- fun fact, that has been proven wrong, our fingers are super sensitive
It would be as smooth a queue ball.
That would require them learning math, which is too tall of a task, especially given how math is created to control the population.
It might be too technical, but I'd love a video on why polygons are so expensive, but the light calculations that use normal maps are relatively cheaper.
The short version is that drawing an additional triangle involves a lot of math. You have to determine if the triangle should be drawn, whether it's facing the camera, and which pixels it should cover. You have to determine in what order it should be drawn so it gets drawn in front of the stuff that's further from the camera, and after the stuff that's closer. If you're using MSAA you have to do some of these computations repeatedly. You have to do all of this before you even *start* doing lighting calculations, and some of it has to be re-done for each light that touches it, depending on which overall rendering pipeline you're using.
In contrast, if you're already drawing a triangle, texturing it is pretty easy. You have three known points in a texture, three known points on a triangle, and you can just do some simple math to go grab the proper texel from the texture based on where you are on the surface of the triangle (mip levels / anisotropic filtering complicate this a little, but the point stands -- texturing is super cheap). So loading an extra texture map for the normals doesn't actually cost much. And then, when you light the mesh, instead of just using the geometry normal, you grab the texel from the normal map, apply it as an offset, and do exactly the same lighting calculation you were gonna do anyway. You still had to do the lighting calculations per pixel anyway, so adding a texture read and applying the offset costs very little.
Another way of thinking about it is that geometry is a much richer (and more costly) representation than normal maps are. Geometry has depth and form. It can occlude, it can be behind, or in front of things, it changes how it looks when your perspective changes, even in the absence of lighting. Its surface directional detail is only one element of a much larger whole. Normal maps are literally just "hey, pretend this bit is facing a different direction than it actually is when you light it." It works well for encoding subtle details on surfaces, but it's a fundamentally simpler representation. That's why it's cheaper.
Realized there's a bit of jargon here:
Texel = pixel in a texture (as opposed to onscreen)
MSAA = "A type of anti-aliasing where you re-do some of the math of drawing triangles repeatedly to avoid harsh jaggies around the edges"
Mip level / anisotropic filtering = You know how old PS1/PS2 games look super fizzy when looking at the horizon? That's because when a polygon is tilted away from the camera by still visible, it's easy to get into a situation where there's more than one texel per screen pixel, because they're jammed together by foreshortening. When you draw it, you get some arbitrary pixel from the set of potential options, and if the camera moves even a tiny bit, you get a different one, which causes an ugly, noisy, unstable appearance. In real life, you just see a weighted average of all the options -- no fizz. So mipmapping / anisotropic filtering is a way to store sort of "pre-blurred" versions of the textures alongside the originals, so when you get into that situation you can grab from the blurry version that already averages that information, which solves this problem.
@@AndreInfanteInc VERY informative. Thanks for sharing.
@@AndreInfanteInc thank you so much, this was all very clear and tremendously helpful
@@AndreInfanteInc I knew a few things you said but not all of it so very fascinating ! Thanks for sharing this knowledge ;D
The amount of normal mapping used in Nintendo Switch games like Mario Odyssey and BoTW is crazy, they achieve real looking 3D and are stunning yet can run small hardware.
The amount of normal mapping used in games.
nintendo is always a generation behind with graphic sucks that they force you to buy this shit plastic shit to play there good games
@@idontknowwhatnameshouldipu1864 đ€
@@idontknowwhatnameshouldipu1864 đ€
Someone should tell The Pokemon Company about normal mapping.
As a 3D texture student, the "this is normal" on a thumbnail of a normal map is such a clever pun. Take my like
As a random gamer that has math background... I've basically completely forgotten that normal means non-unnatural when looking at the thumbnail
As someone starting 3d modeling and vfx I also found it funny
as a person who just mods games and does 3D as something like a hobby . yeh it was indeed funny
tho I often am too lazy to add normal maps to the models used in my mods. sometimes I don't even have any normal maps and I gotta make my own which uhh pain so yeh lmao
As somone who is alive i find this funny
đŻđŻđŻ
I remember the first time I noticed the existence of a normal map. I was playing GTA V, doing donuts in grass or something, when I spotted strange shadows in my tread marks. They were angled the same direction all the other shadows around me were. Now I had pretty substantial knowledge on games and the techniques they imploy, however I had never even heard of a normal map before. For a bit I was _certain_ my vehicle was leaving behind a 3d imprint, but after closely examining the treads I realized they were, in fact, 2d. My mind couldn't wrap around how they could add shading to a 2d texture, and for the longest time I had no idea how they did it. In the time since I've learned of the existence of normal maps, but I'm glad to see a video going over all these details I was oblivious to.
It's normal to think that way.
The fact that you used genshin as an example for parallax mapping, is a great example. That game uses a lot of mapping methods to decrease processing cost. Normal maps, specular maps, parallax maps, you name it.
Yet it still only runs at 30 fps on the PS4.
Botw and half life alyx are insane for this
@@user-qw6ht7jw2b Ps4 only runs games at 30 fps
Yeah I really started to notice with the Liyue roof tiles
@@user-qw6ht7jw2b True, mindblowing that higher mid range phones run this game at 60 fps
Commenting on the last part of the video where you talked about depth on flat surfaces. The first time I actually noticed this was when I was playing Dark Souls on my Xbox. I was in Undead Purgatory and just so happened to look at the ground which was on a bricky surface. Seeing how they made what looked like hundreds of individual 3d bricks on a flat surface blew my mind. I knew about normal old normal maps but that... that is something that I really want to learn more about.
I guess he's talking about tesselation. As far as I know, this technique still uses the normal maps to fake details when you're away from the 3D object. But as soon as you get closer to it, the engine will use the normal map (or another depth/height map) to brake your object into smaller polygons and translate the height of these polygons according to the texture.
Basically, you're using a texture to "create details on the fly" only when needed. This cannot be confused with LODs. LODs do something similar, adding detail to the object, but in every direction and not specifically for height and depth. Also, your object need to have enough geometry for tesselation to work, so I guess it's common to combine both techniques.
@@luizfernandonoschang8298 the thing i was thinking of was parallax occlusion mapping. sisnce it looked more like that with what he showed. especially rooms inside a building.
those details can be faked without tessellation
hey i discovered it in dark souls also!! i noticed it when i was in the lava area, after the discharge guy gets rid of the lava, the walls looked so crazy so i got close to them and realised how undetailed the model was and was amazed
Thats something that i've always wondered about graphics in games, I would stand close to a wall in a game trying to see how the light was bouncing in some surfaces bout they only looked 2d lol.
I never expected this to somehow also explain Sims 4 custom content to me, but here we are. Thank you for teaching me what a normal map is!
Bro, telegram rlly seems to be popular among youtubers doing secret giveaways they never talked about in their channels
@@doodoo2065 ?
@@SimoneBellomonte i was replying to a bot impersonating this CZcamsr
I already had some minimal knowledge about how this kind of stuff (game graphics, engines, textures, etc) worked, but that image at 2:30 blew my freakin mind. It puts into perspective how awesome certain revolutionary techniques are (such as normal mapping)
What I love about your videos is the fact that you can manage to put 30min of knowledge in 5 minute videos đ
OMG, thats so true. This skill is priceless for CZcams blogger.
â@@Dany12156 Almost unprecedented đ
@ 1:54 "this line is affectionately called... the normal. Not the best name"
This is the mathematical term for it. It's not as if it were invented for video games. The normal direction is a pretty standard terminology. I wish more people would get used to it đ€Ł
"Normal" or " Surface Normal" it is the best name because it comes from Physics. "In mechanics, the normal force N is the component of a contact force that is perpendicular to the surface that an object contacts"
Just found your channel and I wanted to say this is exactly what Iâve been looking for: simple but still technical explanations of common video game and 3D dev techniques. Cheers!
Great video and explanation on normal maps! Normal maps and depth maps some of my favorite tricks when it comes to 3D modeling and they're really powerful. It's impressive how detail they can give without much impact.
It's so cool how almost everything in video games is an illusion. 3D looking textures look 2D, low poly models used to convey detail at distance, things tend to unload when not being looked at, etc
I recently started learning Blender, and some of the terms being thrown around were still very vague to me. This made me better understand what I'm actually doing. Great video!
I'm taking a computer graphics class currently and literally just completed an assignment where we implemented the Phong illumination model for our ray tracer. Cool video!
I clicked on the thumbnail for the normal pun and stayed for the content. Great stuff as always! Also excited for the hinted at parallax mapping episode coming up.
It would've been good to mention that for unreal specifically, the B channel (Depth) of the normal map gets entirely thrown away when using the Normal Map compression, then they get regenerated when used inside a material from the R and G channels.
So if using unreal, it isn't worth trying to get fancy with the B axis since it's just going to be thrown away anyway.
What possible reason does unreal have to do that?
@@kendarr The compression type for normal maps in UE repacks R+G into RG+BA, so you get 2x the bit depth so higher precision normals.
I forget the exact bit depth now, but it'll be 16 per channel instead of 8 for example, so you get might higher than 0-255 values, which creates a better overall normal but is still compressed nicely.
Since normals are normally normalized, you can calculate the missing channel if you know the other 2, so only 2 need to be stored which saves space. On the other hand, if you store all 3 channels, you can have a vector with variable length which determines light attenuation (or amplification), allowing you to do more fancy things with your normal map.
@@unrealization3332 I guess that's the reason we artists are not programers lol, thanks
@@user-qw6ht7jw2b Kinda makes sense, thanks, it's just wierd to think about it
I've done some texture mods for a game and normal mapping is something I've come across and had a very simple understanding of what they do, I'm glad I came across this in Recommended to get a higher understanding. Who knows? maybe it'll help me with my own future endeavors!
Since I work on Unity all the time to make stuff in VRChat like avatars and worlds I immediately recognized the thumbnail as a normal map lol
This video was recommended to me by youtube, and i can say this channel is a gold mine
As a 3d animation student, I never understood why normal maps. Looked like that until now: thank you for actually explaining it!
This explanation about how RGB converts to Direction is mindblowing, i always wondered but it never clicked
ive always wondered about the rooms in spiderman! I'm looking forward to the explanation
I am not an expert on this, but if I am correct...
I believe the rooms in spider man are done with parallax scrolling, which in the most basic sense is taking multiple images and making them move independently of one another, creating a 3d effect. That's just what it looks like to me, however I could be completely wrong,
I believe the main menu for Halo Reach actually did this.
@@gucenuckle you are right on the money mate
@@gucenuckle oh thats really interesting!
I love learning about the creative and genius ways that people learn how to solve problems. Itâs amazing to see how realistic graphics have become in video games
I already find this so amazing, I canât even prepare for what abnormal maps are capable of doing.
I really love the new direction of your channel!
I really like these short insights on the technical side of video game graphics from the recent videos!111
Iam already working quite awhile in industry, this is literally the best explanation of normal map to a lot general population
Great informative video explanation! This is the way a lot of games function. I would like to see texture displacement used more, especially for ground and turrain. It adds a whole new level of detailed environment.
I love the pun in the numbnail of "This is normal." Because, first of all, it's common practice, and second of all, the viewers of the thumbnail are looking at a normal map.
i saw the thumbnail and thought, 'very clever.' great video!
Cheers on a great video. I already knew everything. Yet thumbnail was so catching i had to see how you would talk about.
the parallax mapping in genshin impact at the very end of the video is 100% the reason i got so interested in tech art lmao
it's kinda sad they toned that down a lot in future updates. mondstadt is FULL of them, but they're few and far between in inazuma and pretty much gone in sumeru.
@@GraveUypo They'll probably use it more in Fontaine.
can't wait for the second part, about time this amazing trick has received some love!
2:09 Oh this is so cool. It's taught in science class (reflection from a normal). When I first noticed the 3d effects on a 2d plane in games, my first guess was "It's something to do with reflection and lighting"
Thank you for this well explained video
damn, what the heck? I had no idea this stuff was flat. I was completely convinced it was all just detailed 3d models. This is actually mind-blowing. This has to be the most incredible thing I've learned about in weeks
i love the videos you make. you keep things clear and concise and thats great for my smooth ADHD brain. i always feel like iâve learned something when it ends. youâre doin great man đ
Thanks, i was almost getting everything on normals just by reading docs and you pretty much gave me that 1% i was not being able to find!
What I think is really cool is how many of this game design can be actually used to understand our own mind. We are constantly doing these kind of tricks within our brain to compute the world and make sense of our surroundings
Instant Thumb-Up for the pun (is it one?) on the Thumbnail Image. đ€Ł
As a student studying game art I can confirm that normal maps are insane. They can make a model look ten times more detailed than it really is geometry wise.
Oh god yes please do the one with the rooms inside buildings without them actually being geometrically there. I'm a huge Flight Simulator guy and almost all the buildings un MSFS have rooms and interiors. How does it work? I can see it's a trick when moving the camera around and look closely but frol afar or at a quick glance, the illusion is perfect.
Love your videos, thank you.
it's a perspective-changing cube map projection (basically a fancy scrolling texture). valve games use those for reflections.
The pun in the miniature is incredible
Great video! Worth mentioning that UE5âs nanite aims to get rid of normal maps, it does some fancy geometry virtualisation that I wonât pretend to understand but it enables billions of triangles in a scene. Optimising meshes and authoring normal maps takes quite a lot of Artist time in game development so tech like this could be a very big deal when/if itâs fully adopted
My main concern with games using nanite is bloating file sizes. There is something to be said about Nintendo sticking with the aging switch hardware, it keeps file sizes small and fast to download and forceâs developers to actually optimize their games. That said, nanite is a impressive feat of technology for groundbreaking games
If you want to learn something also you dont need the blue channel. you can calculate the blue channel with the two others, most of time the engines are doing it via the sahder , if it's a custom engine it needs to be taken into account in the HLSL shader. Don't waste texture data using a useless blue channel for a normal map.
First time to your channel. Very informative, looking forward to more.
I've seen many game files and the most detailed one is TLOU2. Normal maps and bump maps for pores and fingerprints. Detailed like crazy.
I first noticed this when I played Dark Souls 2 years ago, everything was detailed and lighting reflected perfectly, but the surface was flat and always wondered how that worked. Thanks for the explanation!
The up/down channel is typically blue, not green.
Red is the direction of U texture coordinates, green is the direction of V texture coordinates (in the plane of the polygon.)
So what I'm getting from this is that everything is in another video for another time and/or on your Patreon. Neat.
Not even watched the video and I fully love and understand the thumbnail lmao
Cos flat is normal, amd that when they're not flat, they'll use a normal map đ€Ł
Looking forward to the video about parallax occlusion, as I have no idea how it is actually working :D
Why is everything flat in video games?
Me: Excuse me Mister! How dare you say my beloved Pong looks flat! I play it for over 40 years and it still astonishes me how much detail they packed in.
I love that the thumbnail is a normal map and it just says "normal"
I always tell my students its like 3D glasses for the renderer. Those old school red and blue glasses that create the illusion of depth from a 2d image are pretty close conceptually to tangent space normals.
I first noticed this on Geralts armor in witcher 3. It was chain mail and each ring caught the light correctly from every direction. I was like there must be a whole other texture for storing lighting information and I was right.
When I first started 3D modelling I had no idea what normal maps, height maps and ambient occlusion did... Thanks to our very impressive course syllabus, we skipped over substance painter entirely. Now I'm getting accustomed to Substance and planning to learn Mari
ok that thumbnail was actually funny lol
Looking forward to the cube map video
As a professional tech artist, I would approach the definition of normals in the same fashion as you just did. You do a great job of teaching + you made a pretty nice montage
Not going to lie. This has to be the best video I've seen for digesting the theory of normal maps. It took me a hot minute to learn all this on my own back when I started my 3d art journey. Very well made, with great visual examples. Bravo! đ
Great video. Simple and yet very instructive for noobies like me.
I remember doing some 3D animation class, when i learned about bump maps, my mind was blown đ€Żđ€Ż
Thank you for explanation! One question, why you won't show an example in GoW game if you already showing footage from it?
The thumbnail made me giggle. You get a like.
dude new patreon sub here love it . the video, the edit, all!
I absolutely love how the thumbnail says "this is normal".
Love the Idle Slayer sfx
What's the name of the background music? pls
Does anyone know what game this clip came from at 3:26
as a blender enjoyer, gotta love the pun on the thumbnail
4:19 wait until you arrive at Sumeru desert(or Sumeru in general)
Great hook, and really great thumbnail đđ
What is the background game?
So, speaking as someone who barely knows how game settings look after changing them, does anisotropic filtering control something in normal maps or is it a different thing? And how is it different from tesselation?
This was amazing! Subbed!
Wow, just found your stuff. Great idea for a channel!
Please guys do somebody know the name of the outro song?
What an excellent video. I've played video games for 30 years and never really knew how 2d shapes looked so 3d, but this makes total sense, even though I have no real 3d animation experience.
Normal mapping is a big part of what made Halo 1 on the OG xbox look SO much better than other games at the time.
Woah ur channel is underrated, glad I found it
great vids man, your learning and I am too.
top-tier thumbnail and title
SOO GLAD THIS SHOWED ON MY FEED! EASY SUB!
Can you include links to tutorials that show us parts of the process on your breakdowns?
IIRC putting 'details' to smaller polygons was called projection, then just before using them in in game, you bake some of the details like some shadows.
If I don't see some Orange Deus Ex game in the next video, I'm going to riot. On my own.
Because I'm pretty sure DE:HR was one of the first games that used cube maps to give those buildings some well needed depth. :D
I know how this stuff works to the tooth and nail but NEVER knew why the colors are the way they are. Pretty cool calculated stuff with just colors.
Colors are just numbers between 0 and 255. The shaders care about the numbers, not the colors. We only use those colors to visualize the numbers because our brains can interpret the 3d effect that way (and it looks pretty fancy, ngl).
Displacement maps are even cooler because it makes the edges look realistic while with normal maps, the edges remain smooth.
Exited for the depth video some day ;)
The more technology develops, the more optimizations like this become possible. For example, you probably know about how higher poly models are more taxing on the hardware, which is why normal maps are so useful. It allows you to use a lower poly model that looks like it has the detail of a higher poly one. What is somewhat newer technology that has appeared in a number of games recently follows a similar principle: Resolution scaling. Just as higher poly models are more taxing, so to is running a game at a higher pixel resolution. Resolution scaling allows you to reduce this cost by running the game at a lower resolution, but then scaling that lower resolution up to the size of the screen as a borderless window. From here, filters can be applied to help mask (or highlight, depending on the situation) the added pixelation. This results in you being able to use less resources and improve framerates with minimal visual reduction. Though, the lower you're scaling down from, the more apparent the loss of detail is.
Oh cool I had no idea this was happening. I wanna learn more!
Love the thumbnail lol
I don't know if you'll mention this game, but i remember giants: citizen kabuto being one of the first game to use something similar, and it looked awesome.
So, a vid about Parallax shaders coming soon?
not just normal maps but height maps also help
Is this different from tesselation?
I thought that was the ability to give 3d depth info to 2d shapes?
Is that an earlier technique or something else entirely?
all this crazy stuff and im over here glad my renders dont have any black spots on it đ