The Math of Computer Graphics - TEXTURES and SAMPLERS

Patreon: / floatymonkey
Discord: floatymonkey.com/discord
Instagram: / laurooyen
00:00 Intro
00:12 Color
01:05 Texture
02:14 UV Mapping
04:01 Samplers
04:21 Adressing
07:37 Filtering
12:46 Mipmapping
#math #computergraphics

[@FloatyMonkey]

A late Merry Christmas and an early Happy New Year everyone! This video wasn't supposed to turn out this mathematical but I couldn't resist ;) Was there to much math or do you want more in future episodes?

[@camillebrugel2988]

You don't have a lot of views but your content is amazing. Thanks. :)

[@YugeCheng]

Very clear explanation together with vivid animation. Thanks for your efforts!

[@citanool]

I've been looking for this kind of channel for sooo long. Thank you for breaking down the process into simpler algebraic explanations that don't go way over my head! Would love to see something regarding 3D color lookup tables :)

[@soumyajeet7809]

Wow these Graphics videos are so informative! I would really learn a lot if you continue the series. Thank you.

[@Seilor_12]

the best explanation that i happened to find, thank you so much for your content.

[@gutzimmumdo4910]

underrated channel very good explanations and visualizations.

[@linelogic1699]

Your graphics videos are excellent . Explains the concept well with nice animations. Pls make more of these. Say on 'Graphics Pipeline'

[@CosmicComputer]

I never understood how clamp worked, now I think I do, awesome! Thank you, happy new year!

[@aydaryakup4540]

Damn, so great channel, I can't even describe how grateful I am to you

[@no-lifenoah7861]

You have made a subject I previously found completely arcane and incomprehensible and made it as close to easy as it can possibly get. Thank you

[@Yuvaraj-pd6ng]

The best video on textures on KZbin

[@D3lor34n]

Well explained, thank you

[@guilhermecampos8313]

Man, just found your video and it is really good. I'm learning graphics programmin and this info will be very useful for me in the future. Thanks man, excellent explanation,

[@ClutchGen]

Seriously, your content is awesome. Thank you!

[@FloatyMonkey]

Haha, guess someone's binge-watching. Thank you, means a lot!

[@ClutchGen]

@@FloatyMonkey Oh, I am! I have an interview for my dream job on Monday where experience with Graphics Programming is a big plus. Moving on to your Vectors video next.

[@FloatyMonkey]

Wow, exciting, hope you get the job, good luck!

[@santerisuomi9063]

Great series. Especially liked the ones on vectors and trigonometry, they were great refresher videos. I hope you'll make a video on matrices and their operations and such at some point :D

[@FloatyMonkey]

Thanks. A video on matrices is definitely coming! You can expect it within 3 to 4 weeks.

[@chadyonfire7878]

brilliant thx

[@Phostings1]

OH WOW! I know i'm late on this, but you literally explained how the N64 generated its graphics! I always wanted to know how it works. As you started to explain the process, I could piece together my thoughts. Nice job!

[@michaelmclean2363]

What an amazing way to learn math. I would definitely buy a course like this on Udemy or something for beginners

[@princedeka6054]

New subscriber 😎👍.... I am also a programmer and specifically interested in Graphics programming!!

[@sherineabdelhak35]

excellent series. would be awesome if it explores the new technologies in this pipeline now, esp with AI

[@dustinthompson8600]

I have 2 questions: 1. UV Mapping - If we need to store a vertex multiple times in the Vertex Buffer when it has multiple UV coordinates, then wouldn't this invalidate the use of an Index Buffer? 2. Mipmapping - If we only have the mipmap texture files (in powers of 2) like the 4x4 and the 8x8, what is the reason we would query for a non-existent 5x5 texture instead of using the files we already have? Thank you, your series on mathematics and game engines has really helped me progress as a new game developer.

[@FloatyMonkey]

Great questions, I've done my best to answer them: 1. That would be true if a large amount of vertices or even every vertex needs its own uv-coordinate. In practice though, that's almost never the case. It basically comes down to how many 'cuts' you need to make in the model to unwrap it into the UV map. For a cube that amount is relatively high, for large and complex models however, the amount of 'cuts' is very low compared to the total amount of edges. As always, any optimization like the use of an index buffer depends on the specific use case. 2. The reason we query a 5x5 texture or any arbitrary size for that matter is because it's the 'area' the texture covers on the screen. Before a texture gets sampled, the gpu figures out how many pixels it occupies in the render target. Based on this number it wel then take the mipmap that's smaller and larger and interpolate between them. In the case of 4, 5 and 8 the difference is not too big but lets say a texture takes up 1500 pixels on your screen, then the nearest mipmaps (1024 & 2048) are almost 500 pixels too small or too large. To reduce artifacts we therefore interpolate between them based on whose size is closest to 1500. I'm glad my series is helpfull to you.

[@anonymoussloth6687]

what software do you use to make these animations and amazing depictions?

[@FloatyMonkey]

I use PowerPoint. The morph transition does a lot of the work.

[@_b7090]

13:00 where's the blue?

[@4AneR]

You have superb visualisations, but please use more contrast colors. When you refer to 'blue' pixels, and there are 3 arguably different blue colors, then it's disturbing

[@FloatyMonkey]

Thanks, I'll definitely take that into account. I am colourblind though. For me there was only one color that was 'obviously' blue. Haha, I guess I'm going to anoy family or friends to check that for me in the future.

[@4AneR]

@@FloatyMonkey wow I appreciate your efforts to explain graphics then. You may just straight use rainbow colors, since they're hard to mess up, but I assume it's harder for you to distinguish them while editing ;)

[@djaccount5458]

Even simply example code is better than this PowerPoint presentation.

[@ZachAbueg]

exercise: how do we know that 4 and 8 are the dimensions we want for interpolating a 5x5 mipmap? i first noticed that 2^(log₂ 5) = 5, by the property that a^(logₐ x) = x. from here, i wanted to understand why 4 needed the floor of the log and why 8 needed the ceiling of the log. i had an intuitive sense that 4 is what happens when you "round down" and 8 is what happens when you "round up", but it didn't satisfy me so i sought to make it precise. first, what does log₂ 5 even mean? let's set x = log₂ 5. then by the definition of logarithms, we have the equivalent question "what number x satisfies 2ˣ = 5?". this sets the scene. then, i notice that 2² = 4 ≤ 5 ≤ 8 = 2³. using the above question, i reformulated this as 2² ≤ 2ˣ ≤ 2³. hence, 2 ≤ x ≤ 3. finally, i used my intuition of floors and ceilings. with the inequality above, rounding x down gives x = 2 and rounding x up gives x = 3. with all this intuition, we can see why it makes sense to use 2^⌊log₂ x⌋ and 2^⌈log₂ x⌉ to find the dimensions of the two grids right before and right after the x by x grid we are using.