Code-It-Yourself! 3D Graphics Engine Part#2 - Normals, Culling, Lighting & Object Files
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2018
- In Part #2 of this series, I setup more fundamentals, including triangle culling if it can't be seen, surface illumination and a quick way to import Object files from 3D modelling software.
Source: github.com/OneLoneCoder/Javid...
Discord: / discord
Blog: www.onelonecoder.com
Twitter: @javidx9
Twitch: javidx9 - วิทยาศาสตร์และเทคโนโลยี
![500 บาท สุ่มกินสตรีทฟู้ดริมทะเล หาดจอมเทียนพัทยา 8K [HDR]](http://i.ytimg.com/vi/aZLagyZyQE4/mqdefault.jpg)
The 's off' in the obj file, describes if smooth shading should be used or not.
she s off when she see my smoothe model
To anyone who wants to understand the math/maths better I raccomend 3blue1brown's "the essence of linear algebra" series.
It basically gives a geometric intuition to a lot of the linear algebra operations that are very weird untill you understand at least a little about them like why on earth does the dot product have anything to do with similatity or why the cross product it's that vector or how a matrix is a guide for a transformation ecc...
also, nice video as always, I still didn't know how to read files and finally I do, I thought it was going to be something really hard but in the end it wasn't, thanks.
Ah, I see you're a man of culture as well.
At this point, combined with school physics work I’m diving into such a massive maths sinkhole that I’m considering watching through the entire video list of all those good maths channels to learn all of maths
Yeah, 3blue1brown is an amazing channel. The animated graphics used to make the concepts more accessible are mind-blowing.
Khan Academy course on linear algebra is good too. (in my opinion easier to understand than 3b1b)
One of the best tutorials I've ever seen. Excellent balance between, detail, simplicity and clarity.
It was absolutely cool that you had mentioned the way of inputting more complex models into the engine. Thank you.
I quite like this Developer version of Russel Crowe
Are you not entertained?? XD
Indeed. Captain of Master and Commander: The far side of Z-axis .
OMG hahahah. Made my day ;)
This is the most interesting programming video I've ever watched. Thanks so much for making it!
This is great, I absolutely love this series because as soon as you mention something about some method that we have used in my linear algebra class, it's like it just clicks how useful it was that I learned it. I am completely astonished by how many problems are able to be solved by simply using the cross product of dot products.
This series is great. I'd had a curiosity about this type of engine ever since I first played Elite on the BBC Micro in 1985. Thanks for making it.
That is the best explanation of the dot product I've seen yet. Really helps give you an intuition for what the dot product _means_
This is the most easily digestible video about 3d I've ever seen. Thankyou for your video.
I’m a software engineer who works in health insurance, and I’m mostly baffled at the complexity of 3D calculations. Maybe it’s because I was bad at trigonometry.
Thats good honest work though Brian, the complexity of insurance baffles me 😁
@javidx9 eqww🎉 we w 🎉w 😢w😢😢😢😢😢🎉🎉🎉🎉😢😢😢🎉🎉🎉w🎉e and 🎉🎉ww🎉😢🎉w😢
Finding out that the Blender software exist is a massive relieve! I was getting worried that I would have to work the coordinates out for every shape :) Going from learning C++ to actually using it to make something animate across the screen is making everything that I have learnt so far, click into place. It has given me an even bigger list of things to learn as well. Thanks Javid.
I'm starting a new personal project with the goal of writing virtually everything myself, so when I saw this, it was the perfect thing to check out. This series is a fun little refresher as I haven't really written graphics code this low level since learning to code. Going back to basics, and really diving into some of the low level stuff like rendering, networking, etc. rather than simply relying on existing libraries is a welcome break from focusing on the game logic side of things. A wire-frame isn't necessarily as exciting to show off as a more complete project, but there's a different kind of satisfaction from building it, along with the understanding gained.
You are a blessing to a student studying graphics.
This has taught me so much.
Without a doubt, the best coding channel on TH-cam, in terms of topics, content and presentation.
Progress going well so far in rewriting your 3D application in C with standard libraries! Great videos by the way. You are very well mannered, entertaining, and most importantly, an extremely good teacher.
Stunning, Javidx9, simply stunning. I'm in awe of your way of explaining this. Can't wait until I have 6 free hours to transcribe this code into VS and watch it come together. Much appreciated.
lol thanks jockinafrock, 6 hours? I wish I had a free 6 hours to just code :D
Oh man that rotating cube takes me back to the first program I made on my Sinclair spectrum back in 1982 (ish).
23:14 Minecraft players unsubscribed.
No big loss... XD
Hahahh
you wouldn't say that if you play minecraft the way I do!
They are too stupid to deal with anything tougher than their cubed crap anyway. Sh, I still have no idea why, should you want to _build_ something, wouldn't you simply choose some CAD of your choice over this crap...
Gamers must rise up!
HOLY CRAP! BLENDER IS AMAZING!
Just brilliant. You are to coding what Paul Sellers is to woodworking. Incredibly high quality stuff.
Best explanation of dot product I've ever seen! I finally understand it intuitively!
Thanks David!
It’s normally normal to normalize the normal! Wish we were friends, again thank you for this, it really helps me grasp cpp more then just plain generic tutorials, just mwah
Huh. This is what the creators of the universe must have felt like in their early days. Thanks Javid.
Hey javidx9. Thanks for another great video. I learned a lot about 3d engines and how they work from within the code which is something I have been wondering about for a long time.
Thanks Lucas, my implementation is one of many ways of doing this
I've successfully made a rotating cow! This is awesome.
Didn't even know I was interested in this stuff - and now I'm hooked!
Thanks a lot for this video! :)
Just started learning C++ and this has blown my mind. You are a wizard.
I always love it when I give myself challenges such as the "Try to Convert the Old ConsoleGameEngine Code Into PixelGameEngine Code". The GetColor(float lum) function is kicking my ass lmao
Heh. When you get that one, you'll kick yourself 😉
Really amazing series, thanks for creating such an interesting content.
By the way, I was also surprised that you used the left-hand rule for vector direction when explaining the cross-product!!
Just found your channel today from some guy recommending it in comments. Anyway, I rarely comment but I have to say that your content is amazing, so it's an easy sub from me. Keep up the good work!
Hey Vladimir, thats really nice of you to say so, so thank you!
awesome！I am a Chinese student, and I'm so excited to watch this video! Thank u! 谢谢
You deserve to be a much bigger channel, keep up the amazing work.
Hey thanks MuckyMcFly! So long as people find the content useful - I'm happy.
The more closer we get into the nature of reality the math becomes more alien and beautiful.Nice explanation as always !
Thanks Robert - another original lone coder! Quite a few in this thread now
these videos are fun to watch, bit of a nostalgia trip for me - my last 3d coding was when I was in my mid 20's (almost 20 years ago!) :) - Thanks for making them, your explanations are extremely clear and no doubt will help lots of people get their head around the subject!
nostalgia? This is cutting edge stuff isn't it?? :D Thanks jponter!
Frankly, this tutorial series contain as much information as a university semester. Congratulations, and thanks for providing this tutorial...
not rly, math semester material at uni makes you wanna quit at finals sometimes, it pays off later though
These videos are so relaxing. I love following along with the explanations, it's not so slow that I get bored, and it isn't so fast I can't follow along. Great videos!
Thank you for EXPLAINING THE MATH! And actually walking through it, explaining it, and telling us why and how it works. I've been jumping through hoops in TH-cam as people kept sayin WHAT to do, then when it didn't work, I didn't know WHY it didn't work.
Such cumbersome code. You can make your life easier after defining simple operations under vectors and triangles.
I was thinking for couple of years to make video on this. But you did it.
This is incredible. Thanks so much for sharing, I'm learning a lot by following along. Really interesting.
Thanks man!
WOhoo! shwishing through this with you. And yes, I am encapsulated =)) Thanks again.. again
I heard "unfortunately" twice till what I've seen so far. Both times meant "and fortunately".
Thank you! I already learned a lot from your tutorials!
This series is golden, and so is the content of this video
I'm pleased you're enjoying it! If you fancy giving it a go, the console game engine has been replaced with the olcPixelGameEngine now, but they are 99% compatible so you can still follow along.
@@javidx9 I will be giving this a go, but I’ll start with Tetris and some of the easier games you have videos for. Thank you for sharing your knowledge, skills, and experience!
@@javidx9 I am learning C++ first, then I am definitely going to watch these. I'm a hobby programmer in C# using Unity, I'd like to get into making my own game engines with C++ for retro game creation
I think it is one of the best 3D game engine creating video
Sir, you deserve more suscribers, your content is amazing!
Here, have 1 more.
25:03 When tutor looks up tutorial. Amazing video as always.
Javid is like a father figure introducing me to complex things in a fun way
I went from not knowing anything about C++ to at least knowing how to implement simple things, purely because of your videos! :D
I knew some java before, that obviously helped. But operator overloading alone is enough to make me like C++ more than Java XD
I actually have an addiction to it now
Great stuff, I found this video when trying to find how to fill triangles, the only part you didn't write from scratch!!
Hi Jon, thanks buddy - I do talk about filling triangles from scratch in a later part of this series when it comes to texturing the triangles.
@jon slaco did you ever find a good way to fill out those triangles?
It's like watching Picasso paint!
I'm in awe! :O
Excellent! I ported an old, OLD 3d engine (Michael Abrash's early Doom stuff) to c# . The engine couldn't deal with complex shapes. Your z-sorting was a great help!
Thanks David, my Z-sorting only works well for small polygons though, so be careful if using large ones.
@@javidx9 not a problem. When I say complex, that engine couldn't handle your space fighter...
Okay, the past days I was making a 2d "paint" like application in Java for a university assignment. When I finished the project I was surprised with how much actually Java offers as far as graphics go! (yes you can connect it with OpenGL etc.). But the spark came when I thought "hey how hard could it be to make primitive" first person shouter " type of game. I searched an I knew that unity and blender for models was basically what I would need, but I wanted to furthermore explore how game engines work. So what better start to learn from these videos. Nice understandable math, clean code and pretty good explanation. Time to implement the theory in Java
Alright, now to simulate protein folding.
Now it got sense ( ͡° ͜ʖ ͡°)
Nah, the next logical step in complexity would nuclear reactors simulations. I'm sure @javidx9 is already working on it lol
@@luisendymion9080 the next step is to simulate an entire universe.
@@user-dh8oi2mk4f He already started doing that!
So far so good.
Lol @ 2:13 that minecraft roast!
Great video, I appreciated every second of it :)
This is incredibly cool man
You don't need normals for culling triangles. It can be done in window coordinates after projection. There is formula for calculating signed area of a triangle:
A = 1/2 * (x1*y2 - x2*y1 + x2*y3 - x3*y2 + x3*y1 - x1*y3)
You need only a sign:
front_ccw = ((xw_1*yw_2 - xw_2*yw_1 + xw_2*yw_3 - xw_3*yw_2 + xw_3*yw_1 - xw_1*yw_3) > 0) ? true : false;
// xw, yw - points in window space
for 3 vectors [v1,v2,v3], front_ccw face is visible when normal vector is pointing towards camera and vertex are in Counter-Clock-Wise (CCW) direction. CCW order determines direction of the normal as well:
normal = cross( v2 - v1, v3 - v1 )
ps. if area is 0, then triangle is thin and you decide how to draw it. For less than 0, back of a triangle can be drawn with darker colour or rejected.
Hi voytechj, no I dont need normals for culling, but I do need normals, and since I generate them anyway I just kept it simple.
Hi, that "Shoelace formula" came from glspec33.core.pdf (chapter 3.6.1 Basic Polygon Rasterization, page 116). Its good to know that clipping in OpenGL and graphics cards happen in rasterization step. It always works and don't depends on how crazy camera and projection transformation you have :-). Of course in own renderer everything is permitted.
In addition I want to say, that lots of things depends on what kind of normals you calculate: per-vertex or per-triangle. Per-vertex usually are for lighting purposes and they don't have to be perpendicular to a triangle (its a useful feature for grass, tree branch lightning, smooth shading, etc.). For that reason visibility can't rely on that kind of normals.
Per-triangle are perpendicular but they don't fit well in VertexBuffer that can be sent to GPU (if used of course). You have to store them 3 times with each vertex in triangle or probably calculate in geometry shader. Sometimes this can be a problem.
Don't remember if You mention that but normals have an extra feature:
Ax + By + Cz + D = 0
vector [A,B,C] from that plane equation is a normal to that plane. I used them while ago for simple collision detection for convex objects. Just solve Ax+By+Cz+D>0 for checking if a point (x,y,z) is in front of a plane.
Ps. I can not wait for next episode about camera projections. So far great series
hmm... Wouldn't doing it before projection save on the matrix multiplication on all verticies of all back-facing triangles?
Sounds like doing it after projection would be more expensive - especially considering that he needs the normals anyway...
This is how I did it on my Speccie in the early '80s in BASIC. I knew what normals were but I never grokked vectors, which seemed too obvious to require their own concept, and matrices still baffle me with how they make sin and cos vanish. Hidden surface removal was as far as I got. I wanted hidden line removal but that became pointless once filled polys and then texture mapping came along. I stuck with convex models because I foresaw the problems with z-sorting to render from back to front, but I couldn't foresee the solution. I always hated breaking everything down into triangles. Too much practical, not enough interesting, and for hidden line removal you have to distinguish explicit and implicit edges. But without them you have to deal with concave polys. Don't mess with raw concave polys (-:
Thank you Javid, very cool
Thanks dayyan, np!
I just watched ep1 and was asking myself when ep2 would come.
I hit refresh and *boom* there it was.
Also it was a long time since I last commented but I was focusing on my studies lately so I didn't really have time to watch all of your videos, but now that i'm on holydays, i'll take care of changing that
I realised I keep commenting like this channel was still no more than a few hundred subs, but you have multiple thousands now. Congrats !
(See, I told you you'd have a lot more subs)
Hi Jean-Nay, long time! Studies are more important than these videos, but its nice to hear from you again. One of the first Lone Coders!
*/me blushes*
Also I must say I really enjoy videos going into details like that (also like the 1st episode).
I really think that deriving the formulas and what not is what makes you have a strong understanding of what you're doing (with practice of course), even if the math seems harsh at first. Just to give my opinion
Another excellent video! Very helpful!
Thanks Code Master!
I sat here beating my head against a wall for 2 hours because my triangle culling code wasn't working. The triangles would pop in and out of existence seemingly at random!
Turns out I was summing the x component of vectors in my vector subtraction method instead of subtracting them.
In the interim, though, I improved a lot of risky code and even wrote a quick surface normal visualization tool, so all in all I think it was time well wasted!
Thank you for these guides and everything in your channel. I truly feel like I'm learning so much more about programming in c++ than I ever have from a book or typical guide.
Hey Jacob, thanks man, sounds like you fixed a bug you'll never make again :D
Where are the mecha unicorns?
I always wanted to program my own graphics engine in BASIC on a commodore plus/4, my first computer. I realized my little dream now, because of your great programming series. I really enjoy them. Thank you so much!
I used assembler on the C64 but used a completely different approach to wring every last CPU cycle and memory location out of it.
Many thanks for these videos!
You definitely deserve a like, bro!
Great video series...keep up the good work, I want to make a T-shirt with the words: "It's normally normal to normalize a normal"
Thanks jolesco!
Very nicely explained. Took me a long time to understand all this stuff. I'm still having problems loading textured 3D models using modern OpenGL. I have often thought about implementing a classic 3D game, without textures. The type of things we seen before Wolf3D and Doom. If you ever played around with the Virtual Reality studio from a lonnng time ago, you know what I mean. Flat shaded 3D graphics like you have created. Loved them back in the day.
Thanks Roy - I know the Virtual graphics you are referring too, and those massive headsets XD
Whoops, Neil, lol, my bad XD
wow, you make it look so simple :)
Hi Damjan, I appreciate that, but that's the curse of TH-cam! Everything looks simple when condensed to a short video. The subject matter is complicated to those who have never considered before.
You are insane. Thank u for ur videos!
just implemented this in rust, and it is amazing indeed
Best Vimto-ad... ever... :)
when he said especially games made from cubes are boring. it hit me hard cuz we have minecraft. yeah now it is boring but it certainly wasnt back then. great tut btw. helped me a lot.
calc3 coming back to me now.. good stuff.
Excellent video
I don't program on that language at all, but it's gonna be helpful in the day I'll start learning it, thanks for the awesome video!
Hey thanks Roddy! I try to make my videos "reasonably" language independent, its more about the method than the syntax, so hopefully people can still take ideas from them.
If you're a total newbie to this but opting to use PixelGameEngine instead of the ConsoleGameEngine, simply put this argument in FillTriangle function you called for rastering the triangles:
olc::Pixel(dp*255, dp*255, dp*255)
As you've might guess, this'll do the shaded coloring job without the console's limitation.
Thank you so much ! You rock!
marvelous!
paused this to just start getting good at math on some weird website thank you for finally giving me a reason
Amazing video!
Good job
I'm remaking quake 1 engine through this series :)))
Hi Hide, lol, I dont think we'll get very far with texturing, but you never know!
Ur a legend mate
YOU'RE AWESOME!
Lol 🙂
You are my hero.
I don't know why, but you have used the "right-handed" definition of the cross product, but you drew all your coordinate systems as a left-handed ones... A part from this minor feature I really enjoy your videos, keep up the good work!
Hey thanks luigi! You know, I never considered that - and it goes someway to explaining a few things too, lol :D
I didn't know you could do a painter algorithm sort like that. That pretty cool. I would suggest implementing a depth buffer because it would make sorting of triangles easier and its cheap and all of the glitches would disappear.
You can get away with it "to a certain extent", and providing your polygons are small enough. You'll see I address the issues in a later part of this series.
@@javidx9 Sorry for the late reply. Yes I saw it. It was quite informative. Thanks for the series keep up the good work.
Thank you very much!
"We'll have to use a hack to render our triangles without a depth buffer"
[The PS1] has entered the chat
Oh man what a headache! I started part one and got a bit into part 2 on my pc. I prefer my mac. So after hours of screwing around to figure out how to get SDL to work, I started coding along again. However my cube wouldn't form up right. Just figured it out... on the windows machine, I didn't have to initialize the camera with { 0,0,0 } but I did on my mac!
death buffer, it sounds so cool, i wanna be programmer now!
Programming around mid-day?! Clearly you are not a real programmer, but an imposter. No, but in all seriousness this is really great. Learning a lot, thank you!
Nice work, but I have a couple of optimisation points: one very minor, one potentially major but only a vague memory.
The first, rather pedantic point, is that if you're simply going to compare the magnitude of two numbers (for the sorting) you don't need to divide both of them by 3 o.O I know that in this case the extra division might not be massively expensive but it all adds up;-)
The second is a dim recollection of reading a journal article years (decades) ago describing an algorithm for pre-processing an object made up like yours to sort the facets into the appropriate order so that regardless of orientation the later ones never obscure the earlier ones: it included a procedure for splitting up facets which "cross" each other to eliminate possible intersections. So providing you check the normals for whether the face is actually pointing towards the camera, you never have to sort the faces dynamically, just fire them off in the same order each time.
If I knew the name of the algorithm I would give it you, but all I can do is google and hope: possibly someone will recognise my description and find it quicker (or at all ;-)for the edification of the OLC Gang ^_^
Hi Phil, you're right, and I think the algo you are looking for is Binary Space Partition trees!
This is what i looking for since one year ago.
your videos are awsome
Great,now i can make own game engine now
I seem to have a good understanding of the 3D rasterization pipeline and have written a few software renderers with lighting, shadow mapping, and texturing... but triangle clipping is something I can't seem to understand/haven't figured out how to do properly yet. Can't wait for next video!
lol Ruxify, clipping is a little confusing, hopefully I can demonstrate an algorithm that clears it up...
Well I'll be damned, I think I just figured it out; and of course it would be insanely simple.
You don't need to view the normals in blender, you can just enable backface culling in the viewport options, clockwise is the industry standard so it'll match.
Note: the calculation you do for normals can be reasonably simplified by calculating a normal in screen-space, and looking at its Z component. Projective geometry is nice like that.
EDIT: this only makes limited sense mathematically, for example, if you'd need the non-normalized normal, it wouldn't really work. But it's apt enough for this case; after all, the Z direction in screen space is exactly line of sight.
"Fill Triangle" is a very interesting problem. It would be nice to go over it sometime.
...aaaaaand I just noticed you went over it in a later video. Thanks. :)