Faking 3D in Flutter — pair programming with Craig Labenz

hey everyone this is Phillip here and today is special because I didn't have time to record a snippet like I normally do because I was at a call at at like a stream with Craig Lain who is from the flut deil team and we had a lot of fun we actually implemented a 3D engine from scratch in 2 hours we didn't get to this point which is what you see here uh but we were very close we were this close and then the two hours were out and we couldn't uh really we were kind of stumped so you'll see that in the next in what's coming but anyway I just wanted to start the um the stream or the stream the this video with like showing you that Yes actually it's very much possible to use the tools that we were talking about in that stream and to get to something that's actually 3D and actually works like you'd expect from a 3D engine so it's all it's all possible anyway I hope you'll have fun and see you next week where hopefully I'll have time to actually make content for this channel cheers hello everyone and welcome to another episode of observable flutter my name is Craig B and I'm excited about today's episode uh I hope you are as well I'm coming into this with a particular level of ignorance myself but luckily Our Guest is uh well he insists that he's not an expert but he is at least that relative to me so we'll see what all we get through uh today so the quickest of housekeeping remember folks this is a flutter Community uh we've got a great reputation as this warm welcoming friendly Community uh we're I want us all to live up to that today remember we don't need to dunk on other Technologies other packages you know whatnot uh we're just here to kind of be excited about flutter okay so today's guest uh needs probably not a ton of introduction Phillip was one of the original uh actually I do this all the time I always try to steal their Thunder Phillip I'm going to let you introduce yourself and then if you sell yourself short then I'll talk more all right uh Phillip I'm so excited to have you here today would you please introduce yourself thanks for having me Craig it's great to see you and yes uh I'll introduce myself as the previous Craig F first of all I was on the flut team doing videos doing boring you know shows and stuff like this so that's uh that that that was for a long time but until two years ago that I moved back to where I'm now this is Prague CH Republic and I have been uh working on some open source stuff um I still do some cool things I think for flutter like you know uh different uh game game toolkits and stuff like this uh but my main order of business is making games in flut I have one that I released two years ago uh that's called nights of San Francisco with a K and I also am working on another game uh right now so that's that's my nice uh yeah that was pretty good um and that second game behind you you've got uh there's a big poster advertising a little bit Yeah giant robot game I've I've been enjoying your Dev updates obviously they're they're like half Dev half philosophy and that's that's a wonderful mix I it's actually I have almost no updates in the past few weeks you know because I work on something else so I'm like what am I going to talk about now and I actually I need a pretty decent amount of uh like pre you know existing things like you know philosophy so that people understand why I'm doing the kind of game that I'm doing so uh thanks for telling me that you enjoy it I yeah no I I absolutely do um got a an immediately funny comment uh in the chat but can it run crisis in terms of us uh for those who maybe don't understand this reference uh crisis was just a really really resource intensive game from I don't even know exactly when like 2010 or something thing yeah and it was just the the game that you know broke all hardware and people would would say this all the time like about consoles and and gaming PCs and what not but can it run crisis uh that's pretty funny okay so uh today Philip I didn't consult with you on how to name today's stream but we had of course agreed on the content whatnot and so and I was like shoot I need to make a thumbnail uh I just came up with faking 3D graphicss which is probably not a good name yeah I was I was going to complain about this actually because we are not faking anything this is actual 3D and uh it's I'm sorry I just jumped into your sentence but there like like why is this faking this is not this is actually 3D Graphics like proper 3D Graphics yes yeah so let me let me sell you on my line of thinking and then uh you can either say all right or you know still boo uh obviously you know monitor screens are only two Dimensions so in some sense anything that your brain perceives as 3D Graphics is as 3D as anything else because right it's all on a screen um but even though what we are going to do is uh create perspective you know the the the Stream name creating perspective might have been a little ambiguous we are going to add perspective to uh Cube and explore the math behind that and whatnot it's different than like loading in and rendering a blender model or something which Maybe by some definitions is like proper 3D Graphics right uh so but how uh no you're right you're right actually on on my Discord server someone made a funny comment guo Smo I just is uh the that person said oh oh Craig probably meant that in the far future we'll have actual 3D Graphics as in like they will be 3D uh and uh instead what we're doing is we're projecting 3D onto a t 2D surface and that's true yes um and also yeah we are not going to create a whole render you you know 3D engine in two hours I no expect so so yes uh okay I'll I'll allow it you're faking all right uh okay so uh I guess let's uh let's start let's get into it here so you have added or you have created a little starter project and so all the code that is on my screen now and everything until I start typing which probably won't be for a little bit Philip wrote recently and and then I'm I'm going to be driving and and Philip will Coach uh all of us through our goals today which will become more clear once we better explore what we even have to start so uh I presume you recently you know this was off of fresh flutter create and uh um I'll narrate a little bit and then just cut in at any point actually let's start with pubs speec I want to see what packages you've added yes I've not even looked at right I only edit Vector math because that's kind of uh um we we'll I probably think talk a lot about Vector math I I'm just gonna ask have you been able to run it oh yeah I have it running oh okay good good good good okay all right it is uh and I I didn't appreciate what I was looking at here until I uh clicked on a couple more files and then I was like oh I see what we're doing uh so let's take everyone through that so what we see when we run this as is is just four dots and if you uh you know observant viewers at home May notice that this project is called observable flutter Cube not Square so we're looking at just one side of a cube it turns out well kind of a a 3D rectangle I don't think it's a perfect Cube here but uh you let me slide on my definition of Faking 3D Graphics I'll let you slide on the side size and shape of this Cube actually so this is one thing that we'll need to figure out um and that's this is actually Cube uh but yes yes uh but well we somehow need to figure out how to um look like one how do how do you make a no no it's uh okay so normally you know what I'll shut up actually because when you get to project uh we'll understand more why the cube is not actually looking like a cube hopefully will in the future okay all right so we've got kind of standard boiler plate here we're just our scaffold blah blah blah and then there's a an interesting widget here 3D a view 3D that accepts an object which is a cube so first I'm going to look at what the cube is and that we'll kind of work backwards Cube and then I think the the thing so I'm going to click on Cube command click there we go all right so this is OB uh an instance of an object 3D class did you write this yes class object 3D yes okay command click that and seen it myself yes all right so yeah it just has a list of points great and they're in 3D space so wonderful and uh then we look at it here and we can now see yes this is in fact a cube CU because all the sides are of length one uh do do they call that like a unit cube you know there's like the unit circle and whatnot is I think so unit cube okay so definitely a cube even though it didn't look like that on the screen so there's some Shenanigans of foot and then we go back to the view 3D uh widget which was accepting that Cube and that is also your authorship and if we click into that it's a custom paint very quickly uh and then we've got our painter probably down below here it is and so let's see here you're caching a paint object that is just red there's some other colors some com I was I was just gonna at first it was just all red or blue or whatever uh but then I realized oh it's probably going to not be great when we try to figure out like what what the different which point is where yeah points yes so it's just going to like iterate through these three colors got it got it okay so we're not actually uh uncommenting these is not part of our journey today oh yeah yeah oh that that was another thing yeah so I just stole this palette from uh a website where I go when I want to steal pallettes and they had this amazing palette and then I realized part of it is too dark so I just selected the colors that look the best gotcha gotcha yeah you can delete them if you want to uh all right um well they're they're not weighing me down uh too badly uh looking over at question here or at chat we do have one pretty interesting question that Randall just asked uh looks like we're defining the vertices but not the edges what is our implied ordering yes uh there is zero ordering uh we are going to focus because we have two hours I thought that we would just like focus on rendering points which is pretty I think after we figure out how to actually see where the points go then afterwards we can go oh okay so there's like an edge or a triangle between these three points and then you can just fill it uh so so we're not going to do that I think today uh or ever but um but yeah we're just going to work work with points so far yeah could be a a homework assignment for the reader yeah as I was asking yes yes yes yes yes good perfect uh Randle I was actually thinking about like procedurally generating a c not a cube but like a sphere of points which would like look nicer but I think we'll start with a cube because it's um just nice like I mean it's easier it's just eight points yeah um y uh okay so it just had a little funny mental moment when you said it was eight points and I was thinking wait I was expecting nine and then I just pictured like a dice in my head and like oh yeah no there's only eight no I was also I I said eight and then I was like am I being stupid is is really eight it turns out it's yeah it is eight uh here's four and four more above um yeah I mean of course A A A Rec a cube is in some senses two 2D squares with some Z axis yeah between them um and you'd only get to eight points with that I don't know why we both thought there might be nine seems like there's there's gonna be more but no no right uh okay so that is everything and then there's this uh project uh not to be confused with project English quite a fun language uh project where you've got a function here that is going to turn a vector 3 into a vector 2 and project it onto the 2D plane I'm assuming uh there's some yourk code here that's going to happen oh I appear to have uh double clicked on this just in a way to ask Mac OS to look it up um this this function must be incomplete I'm guessing correct that's what we're we working on I hope um I think that well well right now it just discards the Z coordinate and just returns X and Y yeah so speaking of that the Z coordinate I'm guessing is like into the monitor right it's like into this world and uh X is the typical left right uh Y is the typical top down and yeah Z is going to be depth into this universe so this is this is a a you know point of contention if you you look at basically any game engine they all have it differently so like in some Z is depth in other Z is up then like why is it going there or there you know it's just like so I I'm pretty sure this is yet another way to do it I think Z is normally up uh so we would probably uh do something like what y equals point. z is probably the would be the normal way and why but who cares it's right yeah yeah it's it's a cube it it doesn't matter what which point we're looking at and the other thing that I wanted to talk about or to to cover is why is the square not a square on the screen and that's because project returns um it returns if you go back to view 2D and the custom painter there um I 3D or 2D oh 3D yes and yeah good and even more yeah the see that line 47 and up it says remaps coordinates from minus one to one to zero to viewport and so this is like a piece of magic code that you'll also find in all game development uh I mean game rendering engines where yes so where the pro project uh or the projection will give you back minus one to one for x and minus one to one for y and then it's your job to just basically say well my my X is this big and my Y is this big and and uh so you convert it with this simple math to to normal coordinates so that's why yeah if you exactly if you if you put it into a squarish uh window it will actually look like a square right no gosh that makes sense yep yes yeah we can I can either give you uh I can be a kind host and be like nice you're square is a square like oh now it's broken this way um we we've answered this already but I think it is worth revisiting folks will continue to kind of trickle in uh why what do you mean faking why are we faking 3D Graphics so the quick answer there is just uh we're not actually rendering like a blender model or a thing that is absolutely 100% no no other way to look at it 3D we're going to add some perspective uh we're going to project 3D points onto our 2D screen and create perspective so a thing will will look 3D uh and it will be 3D but it isn't like a 3D model it isn't 3D Graphics in the way that you might think so that's all I meant by that so maybe there's that's a I don't know want I don't know but but probably a good point to make is that that flutter is not meant to be a 3D engine and uh and so for example like 3D like the the reason I'm familiar with 3D is that my game is has some 3D objects in it but if I were to make an actual 3D game that has all everything in 3D then I would not probably use f you know so so like for some very I think interesting use cases flutter and art are fast enough to just make a 3D engine and and use 3D uh but please don't use flutter to you know recreate like uh unreal or anything like this because it's not going to be a fun experience and you're not going to go too far I think yeah um one of the goal I I think I I think everything you just said is uh totally true totally correct in my understanding of the universe my prediction is that in a few years that may change but it will be largely Community Driven I don't think the flutter team is ever going to be behind changing that but with impeller it is possible that the correct levers will be exposed such that adventurous Graphics programmers in the flutter Community will be able to uh write some pretty advanced stuff and then we might all build on top of that but this is this is in the future distinctly but also I I want to say it's like even with something like impeller you are probably using um like C++ code you you don't know it but but like impeller is probably mostly built with C++ I don't actually know but I'm I'm assuming any any bigger 3D engine will be built with with C++ or you'll be at least touching C++ in some way or another um so uh in the future there's definitely a possibility that flutter will have 3D capabilities but uh you're probably not going to build them from scratch today we're building them from scratch because I think it's interesting because I think it could be actually if I may I want to present my game just so that people know like what I'm talking about uh screen one and see so so like this is the kind of 3D that I am interested in you know I'm trying to make things that are um that are uh kind of 1970 style 3D and for that it's it's amazing like I can I can do all this and uh I can also do things that I wouldn't probably normally be able to do if I was um I want to show you some something else than than just this but but like uh notice how if I click the 3D thing kind of renders from top to down you see that hopefully this is actually this is actually pretty hard to do in or I don't know how I would do it in a normal 3D engine because you don't have that kind that level of control over which triangles you render but because I am building my own 3D engine or building I've it's done um it's it's easy for me to do things like this that are kind of like yeah retro you know so anyway so that that I I just wanted to to show people like yes there there are ways and this runs really smooth this is fine but again if I wanted the game to be completely 3D then it's it's a different story and I'm not using flut for that cool yeah yeah yeah yeah uh Philip you got to hurry up man your mission time is ticking down yeah yeah yeah come on look Al live yeah it's yeah it pretty pretty cool effects um and yeah that that really well summarized that's the goal that we're striving for here is understanding obviously we're not going to replicate Philip's game uh but like understanding how you would begin to build something like this what are just what knowledge do you need to have what techniques um and we're gonna we'll have the hello world of this at the end of the stream but uh this is kind of the space that we're in you know as opposed to making the next uh you know Call of Duty or something yep yep yep y you can uh um I was just gonna like you know but but you can remove me from the I mean my my game from the stream yep cool cool cool all right okay uh so let's talk through this paint method because this looks like the most interesting we already did somewhat here when we're talking about this remap block but I think this is probably the most interesting code so far and then as we mentioned we're going to doctor up this uh project method and and I've never appreciated the difference between project and project and that they're only differentiated by the emphasis in English um I'm gonna try to to keep getting it right but even my native speaker brain is taxed by this so philli you and every other non-native English speaker uh who runs your professional life in English you just have my respect um because can't be easy yeah okay oh little uh some some new Dart three goodness here yeah so we've got you're looping through the objects and the points and points was oh in the in the class right yeah that's just the list of them yes and indexed is this a thing where's this coming from oh this is in flutter I've not used this how new is this is this in flutter really no oh since 3.0 wow well no it says lib collection so it might not be from flutter I saw yes so this is normal Dart and it is uh just if you if if you're too lazy to do a for loop with uh VAR I equals zero to something and then you know you can just do uh uh this do index and it will give you a record that has the index and the thing together which is what I wanted here because I I want the index to select the color and of course the point to actually see where the point is yeah I've um I've had written extension methods that did this before so I was just really curious about where this came from and I commented out flutter material to see if that's you know if it was going to be underlined if that's where you were getting it from but no it really is just standard Library essentially yeah um great I've learned something already okay so uh the circles have a size I wonder if this is GNA change as they get further away interesting uh I don't think we I mean we could but uh yeah be a stretch B yeah St goal okay uh and then we project the 3D Point onto the screen and grab get the correct color for it and then update the paint object to use the correct color and then as we already talked about you map it to the you know to the aspect ratio of the screen and draw it yeah all right anything else before we start typing I think that's it so actually yeah I let me actually kind of uh sell you linear algebra right now because I I felt uh we're going to in in the end this is going to be a pretty simple hopefully pretty simple linear algebra thing and Vector maou the package that uh we are already importing already has uh classes for Vector uh but also for Matrix and it has classes even for projection and for multiplication you can multiply matrices to with vectors and so on so forth so it's all um pretty like hopefully there's not going to be too too much code but we'll see uh of course the devil is in the details the thing is that the kind of the the story here is that when I was a young boy whippers sniper is the correct thank you um word I wanted to be a game developer and uh for a for a while and so I started building games by myself this was the 90s so this was before like YouTube and you know stack Overflow and and even Google maybe I don't know but anyway I was I was young yeah things were different and and I remember remember to this day that I had this problem I didn't do 3D math but I do but I tried to do 2D math with like I needed to rotate something right in my game I don't remember what it was it could be like you know a space ship or a ball I don't know but I uh I I kind of had to figure it out myself and so so I just like had graph paper and then I would be like oh this point and then I want to uh you know move it by 30 degrees to the left around this you know rotate and so on and so forth and then I did like oh I know what s and cosign is so I tried to figure it out and then I failed I was just I I just couldn't do it I I I I figured it out for like going from right to left and then I was like oh great and then I tried it to on the other side and just like stopped working it's just just like and I just quit because back then really there was no like I couldn't just go like give up to yeah there was no one to ask so I just gave up so so just like to give you the kind of the idea of like just think about it like you have a point there's another point and then like how do you do it that that point goes there it's going to have some sign and like some trigonometry inside this right but it's not immediately obvious and then much later I mean not actually much later in University I learned about linear algebra and about the fact that you can have a like a bunch of like like something like um a rotation can be expressed with just one Matrix which is just a bunch of numbers and that's it right and then you just apply it like you you multiply the vector with this one piece of numbers I mean bag of numbers and that's it that like and it always works and it's just it's just infuriating that it's it's so simple in the end uh but of course you have to get there and and and so on and so forth so actually I may present again um from my computer so this is L Algebra I didn't I just wanted to show you if you if I tell you linear algebra and you see something like this if you're like me you're probably going to be a little intimidated you know but in in fact all that um linear algebra is it I'm going to simplify a lot okay so if there's mathematicians or people who actually know linear algebra they're going to scream into their into their like pillows what but but basically vectors so so linear algebra is like when you have bunch of numbers and you you combine them okay um and uh so you have vectors which are which is something like this and that's just basically points for example in 3D space uh it's or 2D space or 16d space you you don't care and then there is there there are these matrices uh which are also like bags of numbers it they are somehow you know they um they assorted in some way but what it really is is just numbers in rows and columns that's it and then you have ways to combine these things together and um like for example multiplying and that's just like oh you take you know for example multiplying this and this would be like take this number and multiply it with this number and then take I think this number and multiply it I I don't remember but it's it's just you know linear algebra anyway and then uh by itself it seems just overly complicated way to uh put some multiplication and addition together but then then you have things like the transformation matrix which is what we're going to do today and which also by the way you will find in flutter itself vanilla flutter will get to that but transformation matrix is this is again just a matrix right like this one just a bunch of number s or this one more generally and it that this thing if you take a vector which is just a point and you multiply it with a transformation matrix so just a special special bunch of numbers you will get different effects so for example here is how you do stretching uh so if like zooming basically right so you have a 2d point and you multiply it with this Matrix and then you get the point is now bigger right so that that's what transformation matrices do and the cool thing about this another cool thing about this is that you can combine transformation matrices together just by multiplying them so you have a stretching stretching uh transformation matrix and I don't know rotation transformation matrix by the way this is what what I quit about okay this is this is the the thing that that took me a day of my life broke you yes yes and and see how it's easy anyway so so so if you combine this guy with this guy you suddenly have a stretching rotation Matrix and this is where we go to something like uh flutter uh where if you do you probably know the or should I put it uh transform widget right Y and you have things like oh transform rotate and blah blah blah well guess what it's all I'm notar to make this guess ah ah this is all just Matrix for isn't that crazy transform uh whatever you do with transformation uh is actually is going to be uh uh I thought there is a matrix part of it or is it just this one yeah do you pass in yeah cuz the the transform pass yes yes yes yes okay so so uses this because then you have to know the Matrix yourself yes exactly yes but but the the cool thing is that that really like flutter is just uh whenever you do transform rotate transform scale or anything like this it will just take this transformation matrix uh and or it will generate it for you and then it will apply it and if you so it's very fast it's also like if you have you want to skew something and then you want to also rotate it you can also do this and this is also why for example it's possible for you to do like you know star the Star Wars scroll that like goes like this you know and it's like in perspective this is if you know what you're doing you can do it with transform Matrix 4 because again it's just another transformation matrix that you just have to know how to do it you know and that's what we're going to do today is basically just getting uh uh two a transformation matrix and just multiplying all the points with that transformation matrix and voila we have a uh rendering engine beginnings of a rendering engine dang what a what a primer uh my my history with linear algebra is one of just I think the same frustration that you had like I took a linear algebra class in college and I hope he never watches this stream the professor because I think it was the worst Professor I ever had in my life and I were just really soured on the topic and you know linear algebra all the operations felt like you know take a if it was cooking it would be like you know take a cucumber juggle two eggs look out the window and now you have a pie and I was just like how does how do this work what are you talking about uh and I understood nothing that was going on underneath those operations you know it's like I can remember this by this by this by this by this you but I don't understand any of it yeah uh same here by the way I I went to University we did the linear algebra and I was just like I I remember I was pretty good at like the computation part when I knew where to actually go and like how to do this but then but I nobody told me that this is so cool like if someone told me hey and by the way you can just do like rotations with this and this is how easy it is that I think I would know like I would be more motivated to actually like look at it more than just like oh it's another math thing that you have to do yeah but yeah it's very useful and it's going to be the basis of our uh work today uh my screen Shar R away I think I just times out I have to share my screen again here um clicking around I am clicking there we go uh all right and this is all gonna happen excuse me in the project method yes yes all right now I'm wondering if we're going to also add some parameters obviously we're going to have to add some parameter unless we hardcode the transformation matrix in here but then this can only project it in one way yes correct yes very good yes and I think for now we'll just hardcode it and then we can always give it as a as an argument okay I love it um is it time for us to type yep it's time I'm afraid we've tried to dodge it for long enough yeah any other philosophy we can cover here uh you know the biography of the people that discovered linear algebra you know what their Hobbies were yeah it's time okay um so I'm typing but you have to tell me what to type so I don't know which of us is more uh hosed here how do how do we get started when did I change so I am pretty sure that um yeah uh just start typing make view Matrix like okay yeah yep yep yep see this is this is just to me this is crazy so like this is coming from uh Vector math and it just takes three vectors uh one is the camera position uh second is the focus or like the target so we already know where the target is I think uh is that the center of the cube maybe yeah I think so and then up direction we we just decided I think we decided on why is up I'm not sure but that that's going to be Vector anyway let's let's go back to to the code um and Camera position let's let's just put it this will be a vector three yes and it will be probably some some space away from where where the the the cube starts at 0000 z uh and it doesn't matter where we put the camera because yeah because uh we're going to look at the cube so so why are we here and not like here how did we already get this far in how did this happen oh yeah I have a padding of 64 pixels I think oh this is a lot pixels no no no okay so so the yellow one ah this is why we have colors the yellow one is at 0000 Z and no no no no not this one the the one in the center yes so we are currently just we have it set up because in the end hopefully all the different Transformations will give us an actual like you know minus one to one but with the all the things that we need have there and so so this is the origin makes sense this is the origin either this is the origin or the one after it is the origin right so I mean the the the one beneath the yellow one in the center you know what I mean uh because all of these four red points are actually two points on top of each other yeah so I don't I don't actually know which one is which uh but we'll we'll have to we're about to find out once we have perspective yeah yes okay so how to think about and I think this is what you were just saying this Vector 3 the camera position so I'm gonna I'm G to use my hand here to try to uh illustrate perspective as we're going to visualize it for everyone and so there's a flat I'm gon to cover my face I that's what everyone wants um we've got a flat screen that is the the UI that's the actual Monitor and then the camera is going to what I think you're saying Philip is that we're going to define a space above the screen that is where the math will compute our camera perspective from is that correct I think that is correct yes okay so we can should we what what makes s like should we say the origin in terms of XY but uh in the depth perspective toward us or do you like a different point even Craig I have no idea I I really I literally have no idea where to put the camera and I'm sorry but uh I yeah but I think what uh what is the Saving Grace for us yeah exactly I would go farther away with the camera so like 10 let's do or five okay okay um then we have the camera Focus position and that should be I think 00 Z or if you want to be fancy 0. five55 for like the center of the cube yep oh fancy okay and the app Direction uh would be probably 0 one0 with Y is up but again that should yeah uh so so it needs to know like how the camera is rotated yeah so you have so I want to go I want to go back to the code and really drive home what all these values mean so obviously this is X Y is the second one and Z is the third I'm just going to have the most Elementary approach to this ever because I'm so uh so bad at all of this so X is the first parameter Y and Z of course so X is definitely left and right right Y is definitely up and down and is z uh Z is going to be depth for us am I correct on that uh might be yes yes I also go ahead there was also the camera up perspective and I'm wondering does this actually does what we put here Define these values like if we said oh no up isn't uh the Y up is actually X is that going to like rotate all of our stuff 90 degrees yes I guess we can test it and find out yes we we'll definitely do testing but but I think yes it's it's basically so like if you want to define a point in space and its rotation in all three uh you know rotation things I think one way to do it is to say where it is where it is looking at assuming of course it's not the same point uh and is the camera in this sentence right yes yes and then it is that's this where it's looking yes and then the the last one we you still need to even if you have two points in space you don't know how the camera is like this right is it is it looking down or or or you know like how how the yaw of the camera I guess so so uh for that we need to to tell it where it's where it's um oh could we conf could we maybe you know misconfigure this in such a way that we point the camera in the other direction and don't see anything is that possible think so I think that's possible I want to do that at some point okay yes so anyway you you want to uh you you made the Matrix you want to put put it into a v variable uh which would be the I guess V Matrix thank you yes and then this is the cool part uh where this is kind of the look at Matrix um and you just do uh we we don't have the projection Matrix yet but but we'll we'll see if we can do it without it right uh so you have this transform and then the vector the the three Vector um has a method on it called do apply Matrix 4 that's it so if you if you just do Point dot apply Matrix 4 okay and do the view Matrix is our view Matrix that is a matrix for yep that's what it returns we're yeah we're all yes all these things are Matrix 4 uh for I I can't explain it I don't know enough about this but but if you want to do 3D things Matrix 4 is so the four you need the 4x4 Matrix so that's so do we do this essentially oh yeah so I think oh is it uh I'm not sure if it modif it modifies yeah okay y void yes and so then we so the the code that was here before needs to be after what we just added I'm presuming and then we then we do this yes all right so Hal restart I think we need to Hal restart because for some reason uh oh yep what were you expecting I do know I don't know I was expecting to not show anything but this is better than what I was expecting all right so so that's the view Matrix now I think we ALS also need to create another uh and that one is the projection Matrix so uh okay and here this is where I I can't really pretend anymore that I understand like the the uh like why you need all of this right so so but but in 3D rendering engines you have the kind of the object Matrix which allows you to do things like rotate the object right then you have the look at Matrix which is like where you're looking at from I guess and then there's the projection Matrix which gives you a uh like a just projection uh like like what where do you where do you put it I I don't know uh anyway for that we have we can't use the view make view Matrix we need to do uh do a final projection Matrix yeah equals and now we use make frustrum frustum Matrix of course yes all right obviously it was G it was always going to be that so so first yes first them in if I understand it correctly is basically kind of the uh if you look at something through a screen right first is the is the 3D object that goes from the like this to there it's like it's like the I don't know how to call this it's it's not a TR like it's not a pyramid but it's a pyramid without this the top cut off yeah yes yes yes yes uh so I think that's that's what we we need uh but yeah uh hopefully we'll know more if you read the the API dot yeah so I was just skimming yeah it says left and right specify the coordinates for the left and right vertical clipping planes all right so that's that's this and this yeah yep and they're just doubles so how do we represent that whole plane as just a double do you know what that how does that work uh that's a good question so but I I totally had the same um opinion or same thought and then bottom top specify the coordinates so same thing but rotate your hands 90 degrees and then near and far specify the coordinates for the near and far clipping plane so this would be the bottom of the pyramid and where and the where the slice is on the top that prevents it com to a single point right so uh uh yes so we basically um you know what I'm going to cheat here and if you look into the private chat that nobody else sees you can just copy paste uh you can copy paste what what I just stole from flutter Cube by the way which is the flutter unor cube is a pop package that you can use for these things and uh that had has the not all of it not all not everything that we need but some of it and I think it it will help us explain what all this is right so you don't I don't think you need math uh with a prefix because we already oh we don't have math there okay I'll just add yep yep yep okay all right so uh then we uh the near one uh is just uh put something like 0.1 there like you know yes yes exactly yes uh fov is the field of view right so that that would be something like 60 uh so 60 what what does that mean uh that's I hope that's 60 degrees but that's weird because we're oh yeah we're actually converting into radians uh later so that's 60 Dees of so Phi of you is like like for example humans have I don't know 90 degrees or something like this of field of you but like you have Eagles who have much more focused field of view and then you have guinea pigs who have field of view like this uh where uh it's uh all around them right so 60 is I guess a just one possibility one yeah one possible okay okay right right Zoom can be Z 1.0 just like let's not uh do anything with that and then aspect ratio for now just do one uh 1.0 and we'll I'm pretty sure we'll find the aspect ratio from the size of the screen later or screen of the of the custom painter so I think now we have everything right oh far we missing far far let's just put like a thousand there or you know got it so now we have the first ter uh we have that that object in space and that and now if I if I remember correctly I guess uh we just need to create a new transformation mat so another one final transformation matrix that's the oh yeah yep and that is basically just if you do the which one was the first one the V mat Yes actually projection Matrix times no no no I'm sorry just just use the ones that we just made yes yes so so the view Matrix times the projection Matrix yes I think the order actually matters and I think it's the opposite way but let's see what what this gives us so V Matrix times that's what I wanted to do V Matrix and now now this is our only transformation MRI yes exactly and now use that instead of that and now let's see what it does for us the Arcane the Alchemy is getting uh hot [Laughter] already I'm very curious what what you're gonna oh man all right hard to know if this is what we expected or not it's not I thought that now we'd have a some kind of a perspect both like The Far Side in the middle right yeah so if we have our near Four the the close four dots and then the far four dots you know we want I'll do this from the camera's perspective we've got the close four points and then what we're looking for I think is the far Four Points to all be uh projected inside is that yes yes that's what you're expecting okay uh so okay time to just wiggle the numbers I love it so not these ones I think these are fine uh but uh what I me changed nothing yeah that changed nothing which is wait no it did change oh it just took a long time and that makes I don't know why it took a long time but that makes a lot of sense that now you are like if you change the field of view it should be smaller right like if you yeah make the field of view bigger the things Mak sense that we see more of the world yes yes yes so let that this part I think oh this collapsed into a singularity wow interesting yeah so I guess yeah that's like the speed of light you can't exceed 180 degree field of view maybe I don't know I don't know what any of this means but I I think yeah 6 is fine uh and let's do yeah it needs to be a double let's actually wiggle the other numbers the ones that are in the projection Matrix I think oh these ones The View Matrix oh make view Matrix all right so what happens if you change the up Vector to something like 0.5 0.5 Z or yeah like you know I want to I want to see if we rotate the view of the camera and we didn't I well I haven't done it yet because I want to propose that we start making predictions about what our code changes will do all right and some kind of rotation B I mean I'm just running on your explanation here but what I'm hearing is you know up for the camera if the camera is now facing a different way yeah on our screen everything should change so I agree with your prediction this time all right let's see we've also changed it's not a very fast restart here uh things really moved I don't know why it's being being so slow that's kind of weird uh I had also changed the field of view back so that's why the points expanded as they did right but they're now kind of off the screen what which is fine I mean I think you can change the field of you to like something like 90 or or 70 so that we always have the thing in inside uh but this actually makes a lot of sense right because we moved the app do 45 degrees so if you if you do something uh like um I'm thinking we give a non Z point5 value for this and then things should be wonky yeah it that they definitely should the hot restarts a little cold this morning yeah it's weird it's weird okay it didn't do anything oh yeah no I guess that that just changed nothing really though y I guess uh it makes I mean I don't know well this is this we said depth so does changing the in and outness of what's up matter I mean You' think it would otherwise this would be a vector two yeah the thing is like if you if you imagine if you have a camera like this and then you're like uh where where is the app for the camera and then what you did to right now I think you you said the app is not here but it's here which doesn't change anything about the camera's position I think because you are still looking at at at that Cube still looking in that because that all came from this code yeah right uh I'm not sure I'm not sure but uh but I think like since the camera is in the Z Direction uh changing the up position like the the Z direction of the up position is not going to change the the view of the camera but you know what I I think let's just put it uh put up to like either one z0 or 0 one 0 anything but 01 uh I think it's probably good for it to be a yes 010 to be a a unit vector and I think this this should kind of you know this should work I'm not sure why we see this though and so I wonder um what does if you scroll to the bottom of this function uh what if we using the wrong XY what if the transformation matrix actually like can you try y right yes yes I'm not sure I'm just you know they're gone they're gone they don't love us anymore this this was faster for some reason uh okay so it's been really inconsistent yeah I don't know okay so in that in this case I think we were right with point point point but Y is probably why huh all right so and the reason we tried that by the way is you were explaining this to me I think it was before the stream started but maybe you already explained it to everyone uh different different game engines different 3D rendering engines disagree on what X Y and Z even mean and so you were wondering if we had uh a mismatch there but that didn't fix anything right or if it did then we've got something else broken right uh so we have projection times vew right and not the other way around uh we do have projection times view yes all right okay I'm uh I'm just looking at okay so the change that we just made now one thing I was talking about was like pointing the camera in the wrong direction I I'd love to better understand what this means or no is this the wrong what is the third one oh yeah up Direction I guess I don't know what up Direction even means given that we're positioning the camera with the first two values and all of this stuff was supposed to be like the cone of you know this is almost like the field of view I mean we literally have field of view up here right and and then we changed you know some of the up values here changed nothing I I'm definitely not understanding this parameter in terms of you know what if if you have a camera and you have some stuff in front of it like what what are we doing with this parameter I don't know right well we're we're just saying uh if I have a camera like this and and like it's in position let's say this is minus 10 0 0 or something and I'm looking at you at at you all right uh then the two points themselves don't say anything but but then you need some kind of thing to say from here the vector where is the vector to the camera up so is if it's like this then I'm looking like at you like this if it's like this it's going to be like this right okay okay okay so we can actually so that this is this is why when we change it to 0.0.0 then we did this basically with a camera or maybe we did this I don't know but but we we did you know is having a zero Vector there almost undefined yeah I'm pretty sure it yeah it would be not good we can try it it's not that uh did we ever put zero there no they're back to just one point so yeah something right well we don't know if they're one point they could be stacked on top of each other or yeah they could be some somewhere else yes exactly so just yeah put put the yeah this is fine I think um I wonder if it would make us uh understand this better if we yeah this is what I was expecting they were going to rotate 45 degrees awesome yes thank you good explanation uh I wonder if we want to actually uh write code to rotate the cube uh so that we um so that we see what's happening because right now it's just like these eight points are taunting Us by being in the wrong place and we want to know what's going on right um so we've got some some folks in the chat who are really following the plot and uh seem to have played around with this stuff before muaz is yes is talking about the camera position being correct and uh H says isn't the perspective coming from the one in Vector 31010 yeah which is both correct and what just clicked for me after uh Philip's last demo and then that test Roa had a comment earlier that is um really ringing true right now after what you just said made that click as you're like holding your phone and tilting it yeah you got to have graphics and whatnot to learn this kind of crazy math uh so you can visualize what these numbers are doing um all right so what are you thinking for our next test so I still don't understand why the perspective doesn't work I thought that that's oh right that's why the far and so which code did you think it was this whole the projection Matrix right and the The frustrum Matrix which is frustrating us that's what was supposed to yeah yeah we call it a projection Matrix that's right that's the code that is currently not working for us so I'm going to play around with a few more numbers so near this is the top is this basically like anything closer than than this we can't see yeah so near is is if you if you like bump with your camera into something uh and you no longer want to see that uh right so that I don't think that's a the the problem that we have because we literally see all the all the things that we want to see they're just not in the right in perspective and I think that's what we're missing is perspective so I have an I want to like play with this a little bit too to make to see if I understand this so we positioned the camera that was the first parameter uh we positioned it okay go away tool tip in the center of the Left Right space and then 10 units away from that so it's almost like our camera is 10 units off the top of the monitor right and we're saying that the near point so anything closer or 10 away and anything closer than 0.1 getss cut off so we we definitely see everything if I'm understanding this right if we put 10 here in theory we would lose four of these squares and we would just see the the other four that are on the other side of the Matrix I would put 10.5 but yes I think so yeah because it could be uh just just on the on the FR so we I'm running it no change what what I you my suspicion grows that your theory of like this code just something ain't right uh is is potentially potentially correct um top times aspect ratio interesting so this kind of makes sense we calculate once we know one of them we can kind of deduce the other ones so it makes sense that all these values would only appear in the one calculation I think that makes sense but this this definitely busted my expectations I thought we were going to lose four of those points is it potentially and we're focusing on the middle of it I don't think this is going to change anything and it didn't all right what what happens with zoom can you zoom in or zoom out actually 0.5 yeah so everything should get half everything should get closer uh 0.5 should be smaller yes y oh yeah closer to each other not closer to us oh yeah yes yes yes yes all right yeah so that one is working and we already know field of view is working because we saw that aspect ratio will will I think work this will have some effect should stretch it stretched and so interestingly it's basically just this near value that well we don't know if it's doing nothing but this change didn't activate any let's try like let's try 100 or thousand however many zeros I might type no change again so near is really not doing anything yeah it's weird it's weird but I I don't think that's necessarily uh you know what what's our problem to be honest well we can look at this later but right now I wonder if we can just you know what uh we don't want to we we don't need to to rotate the actual uh Cube we can just rotate the camera around the cube I think and uh so that means that you have to go back to I think 3D view or view 3D and uh we need to add a well uh like uh what's the fastest way to add animation here can can you do it quickly or is it is it a force right no I think we could do it yeah okay yeah we can do it so like you probably want to change this view3d into a state full widget with a animation like a repeating animation yeah so uh so extend state with this is it yeah yes so we could have we can either use an animation controller or we could just have an animated container and we just oh have it do like one thing yep yep sorry I forgot about that that so you probably don't even need the state full widget then right well potentially the animate we need to get a value out of the animated container I guess so actually I don't know if that would make any sense maybe we need our own animation controller okay yes uh yes I I like this role yes yes nice all right now here comes the point where I have to Google this every single time oh no so it's extends with uh single ticker container uh single tick ticker provid vyn this and then vsync and then also uh not VC uh that's that's that's coming later that's that's flutter 4.0 uh but uh I think you need to give it a duration yeah the and I think that's it okay and now and start it just repeat controll repeat uh oh we need a listener as well oh that's right yes well actually no uh uh no no no no uh just controller. repeat I think is how you started no oh yeah okay and now uh that's the cool part H the if you go to the to the custom painter pass it in here yes custom painter actually no no actually the the painter itself NOP no no no the painter itself if you if you go to the yes uh and if you do on view 3D in the Constructor there's actually if uh s you know the super like custom painter itself the class itself has super dot listenable I think or something like this yep extends listenable oh repaint repaint yes so you need to like you basically oh nice yeah nice right so re or super repaint yep oh you can just do super paint yeah no have wait why is it why does it not like us no associ oh yeah yeah okay oh and now it says is never used okay well give us a second here linter so yeah we're working on it you go up and just do repaint equals the controller controller oh I never done that before yeah this is really cool and so now I think you probably have to re H restart whatever but we didn't even tell this to like go from zero to one yet does it know to do that on its own yeah from zero to one is fine yes uh so now we need to pass the value of the repaint uh to the project project sorry that's a terrible name for for that so yeah let's it's the correct name yeah all right yeah so this was oh just repaint repaint yes it yeah um so repaint Dov value I think oh because it's the whole controller makes sense yes is it an in that's int yeah we're both like that's ter uh what why is it an INT all right so we're gonna add a double to the method yes signature so it stops complaining about that and now we can come back and undefined name repaint okay what do you do with that value in the Constructor oh you know what uh okay so you need to actually create a underscore yeah so you don't you don't have access to it but you can true but that's we don't we don't need to do that so so what you need to do is you create your own um like uh you know final field on V 3D painter that's something like ideally something that that is a better name for example uh yeah like how about that animation all right animation and then uh assigned to that animation yep it's not super it's like this and it's required and then uh in in the initializer list oh yes thank you and so after like after the Constructor sorry and then uh do no no no uh with a colon you know y yeah and then Super I mean s oh how do how do you do this you want to set it to the repaint thing yeah yeah yeah I think how do you how do you do this like uh underscore we can't no but you can I think you can uh man you can uh um kind of call The Constructor of the super class but still hold on to the value uh you could just like um instead of dot if you put uh parenthesis is it possible but super parenthesis oh and then repaint oh I and then anim see yeah all right I'm glad that this worked because I was very unsure all right no the that's that's funny the Advent of the super parameters means I haven't actually explicitly called a super Constructor in so long I literally forgot it was a thing yep it it is a thing so the return of super so all right so now we have animation and that has a value it does actually no you you have it as a listenable so I think does it need to be animation I think it needs to be animation of double yes okay and now now that's all good and but we have a complaint up top which is what are you mad about late it's fin late final I think yep all right okay and now project right so this has to use its new parameter and what should we call this to be better than value uh rotation that's much better and now let's do some Trigon trionet I I think what we want to do now is instead of the the make view in the make view Matrix call uh the vector of where the camera is should be z z sign rotation or zero cosine rotation s rotation zero cosine rotation oh it's math dot I think set myself up for that headache and then math. sign rotation yeah yeah and probably times pi but we don't care about this now let's let's see what it what it does okay refresh no oh okay uh time 10 oh wait something just uh I don't know if it was on the screen time 10 time time 10 uh uh for both of those or just the last one uh for for both I think you can actually time stand with the the whole thing but it's doesn't matter okay right no well we will do that because 0 time 10 isn't going to come complain they they they just flew all over the place I'm going to extend the duration so they're more visible for everyone uh duration where are you here we go minutes now it's gonna move real slow wow or not at all this is amazing I love it okay so uh I don't see any perspective I don't days wow it's still not slowing down so okay what I think is happening is it's just buzzing by at like no crazy speed or it's something is something is weird with our uh with our go go go back please go back to two seconds because I'm uh I'm a little worried about that uh days thing there and uh let's go back to here why is this oh it's interesting idea something in degrees but not radians oh yeah but it's it's from zero to one right so I mean in in radian if it was in degrees okay you know what put the zero in the vector somewhere else than it is now like for to the yeah let's see if that changes s to think this is really scientific yes it did change something there's nothing on the screen now put the zero somewhere else now yeah yeah okay let's just do it let's just try different let's just get crazy let's just who yeah who knows right let's just try it didn't do anything still nothing render did nothing damn it all right okay so time to time to do something uh GPD in Hell uh so another thing is just to like okay so we had 0 minus 10 or 10 for which thing this value originally yeah originally it was 01 okay so let's just do 0 10 for now and let let's let's not use the rotation for now yes and I I think you need uh commas yes okay you know I won't be cute here because then this might get us later okay okay and we still don't see anything that's weird oh oh sorry what we see things what moving in the right direction no but what why is it's it's the same think why is it what this makes zero sense I we we're not it's a constant function right wait wait yeah we're not using rotation anymore yeah exactly nothing changing and now it just so oh okay so one one thing that that uh is uh I actually this is a great thing to to talk about because one thing that uh throws people including me off is that including me yes is that in flutter everything is um like declarative and immutable right here things are mutable so if you change something it's going to keep changing for for other things as well I'm pretty sure since we're like normally this should be a pure function right we're just like putting a you even yeah exactly half one yes so so we are changing something uh like on accident yes we're mutating something somewhere and that's not good so I don't know what that would be but man no it's it needs to be in the project me right but what are we this is a pure function oh I know I see it now I see it you do we are applying the Matrix to the point man we're applying the Matrix so we're changing the object my God yes why is this not why is copy not a thing uh that's clone yes yeah oh wait wait so and now you have to like you're not you're not actually using that now you're cloning it applying the Matrix to the Clone but you're not yeah y yep yep yep y yep and uh you probably need something there with like uh parents because you're dot clone dot dot dot apply do doly Matrix I think no no no no no no no wait sorry I was expecting this okay so oh I'm gonna go full screen here again no yes thank you no you know what you're doing it's like new point you need new point. clone dot do apply Matrix 4 and you don't need that thing in the you know because you are uh you are like apply Matrix 4 probably just returns void so new point was you're totally right you're totally right okay so let's see now I I'm I'm feeling good about this cool okay so now we're back I think it said we have an error uh is that eror yeah maybe but it didn't no it still says try again after fixing the above error it's just I'm gonna do a full thing it's like real confused here yes yes yeah so chocolate image says I think apply metrix 4 doesn't return anything exactly so that was the problem we had a null thing there and the Cascade operator we don't need to actually use it it's kind of a fancy thing we could just do new Point point. clone and then new point. apply Matrix would probably be a little bit more uh really why is the editor not sh I didn't save the file I'm sorry oh sorry all right what change do we want to make here sorry so point. clone gives us a new point and then we're cascading to apply it's it's fine it's fine I just like for more readability I would personally probably remove the um the Cascade and just do new point. apply Matrix 4 on an on a second line just you know yes four yes one of my least favorite things about [Music] um streamyard though I I don't know how they would fix it is like so often I'll try to click on a chat message right as a new one comes in and then I click on the one that was below it 100 milliseconds ago I meant to click on chocolate images thing that was the line you were trying to read and I clicked on a different message uh okay people people are actually save it save the project file people are screaming at their monitors like what I know I know folks like just just like uh I I see your frustration I we can see the frustration and I know how painful it is to see someone like fail so hard uh but also I've I've been there many times where I just did like some stupid things for 30 minutes and people were like screaming anyway oh gosh yes yeah let's see let's see where we are now oh cool cool cool cool cool so I think now we can reintroduce our animation which should be pretty easy uh so just like yep and uh are you actually putting it in as in the when you're calling project yeah I put it back in you are here we go oh nice all right so are we ready oh okay uh so uh line 65 times 2 pi so animation. value times math yes times math do PI * 2 or maybe not uh I actually yes sorry I thought I'm already importing m there but maybe not any um I'm not used to this big of font and only half my screen yeah um okay so we're just basically saying like go uh all 360 degrees right yep wow that that is a thing yeah it's rotating uh I wonder why we still don't see a lot of like perspective but uh I know it's beautiful verie I know it's the most beautiful thing I've ever seen actually yeah this is high quality Graphics y uh so we could we could just call it a day to be honest but I think uh I would like to see more perspective somehow yeah and also we could try another object but I'm not [Music] sure uh you want to try let's try an actual pyramid that'd be fun yeah so we got to go to where the points are defined which was in Maine right I think so or maybe pyramid with the top cut off so you've got this would be the correct base and then we just need to bring these points in right yes yes so just put uh I think it would be something something like 0.5 0.5 one or something instead of the Four Points at the top we need to oh yeah I'm trying to visualize actually what what's even what here so uh X was left right Y is oh that's right yes yes yes yes so you you actually want the the base of the pyramid to be the base which makes sense right so that would be uh that that's basically I'm thinking the bottom Four Points would be the base yes and I'm going to I want to reorganize I'm going to reorder these so that those y y is up so therefore I think yeah put all the Y's together where want don't we want the ones where Z is zero aren't these this these are now the bottom right okay I thought that for us y was Z is depth you're right yeah I think so so put together the ones that are where Y is zero and then just uh comment out the rest and put instead of there yep and now oh not what we expected yeah but it's fine I mean I mean we're I'm I'm not even sure how we rotating the the camera to be honest no one is no one is yes no one knows but uh okay okay yeah I kind of want to um create a like a ball in space but uh that's probably more more work well do you if you know how to do it uh I'm certainly open to it right I I would just go like like create a small dot function that just outputs a lot I mean no let's not do it that's that's going to be too much um yeah I think this is this is fine I just want to play around with oh yeah okay so this is not what I was expecting so X is up is top down maybe because of our camera rotation maybe anyway that's fine just put put a put a little top uh thing there you know all right so we want these are all going to be higher so oh which what are trying to do I'm I'm I thought like we would just have a pyramid with one point but you probably think uh like with oh we could do just one well one point where we won't see anything just uh well actually let's confirm that because we've been wrong about a lot of things so this would be 0.5 I think it would be one0 0.5 0.5 I think yeah yeah yeah yeah see wonderful ah gosh never in doubt never in doubt uh so now if we want four points they would all have the same height and then we could go uh like 04 would we just go kind of0 4.4 6.4 4.6 and 6.6 yeah I have no idea what you're doing that make any sense no it does oh nice check me out nice nice yeah we got a pyramid here now how else could we move this so uh Craig some some people are getting motion SED I'm pretty sure this is just just fun but I would if I were you I would change the second one to something like second 10 ah uh you know the animation speed I don't remember whatever that is yeah me NE yeah and yeah okay nice right that's satisfying yeah anyway so do you want to see if we can I still don't understand why we don't see any uh you know perspective I mean we we probably do if yeah I feel like we are seeing perspective why we didn't before the animation I also don't know but I mean we wait are we no we're not I no you're right we're not yeah I don't think we do because the the points should never both be over each other like there's a right now right or right now at the top both of them line up but should be centered the back one should be like this yes yes yes know why uh so one thing that I um see I don't see it actually used in the in the code that I've seen and the code that I'm using so I don't know why but uh apart from make view Matrix there's also uh make perspective Matrix oh uh so and again I think we could the theoretically just Che it out check it out or um even uh multiply it with what we already have what [Laughter] that's so funny and just a billion percent [Laughter] true oh gosh that's incredible all right what are you thinking about the uh perspective Matrix um so just like uh do another instead of V or next to the vew Matrix create a perspective Matrix so final perspective Matrix H equals make perspective s and now uh oh boy so uh fov y radians we actually know how to do so that's the F view yeah we we we already have it uh yeah we just that value to radians yes so conversion just Radiance just Radiance so Radiance 60 or whatever oh yeah oh you're up up yeah oh good point it I guess we'll put it all the way at the bottom yep okay uh Z near this looks like it's maybe near yeah just near and far and now I don't know if this goes instead of or all like try to yeah yep let's see exactly exactly like oh okay unexpected wait no expected because we just removed where we're using the rotation ah yes makes sense so instead of should we put rotation should we put the rotation into one of these oh no no no no no no so so in line 42 focus focus light 42 I think you want either both of them or instead of projection Matrix do the perspective Matrix yep and now try it is it better no it's not no change no which is a real surprise or at least no change that I can work out yeah yeah now your the other thought was that we might need all three but order matters so it does we I don't know I have no idea I've never y so many possibilities yes okay this one does nothing uhuh this [Music] one does nothing mhm and this one breaks everything oh I love it I love it we're inventing new new 3D uh you know ways to to to look at whoa It's like a carousal like hello yeah when it comes back the other way we only see I wonder gosh I want to know where the top four are oh I think they're just clipped off the top yeah maybe I think they're just clipped off the top so how would I can see like a little bit of do you also see kind of almost like a perspective there or is it just my imagination no I think you might be right I want to see the top ones when they come back so we've got we just worked out that X for some reason is top down okay I have no idea which of these is GNA do it but um lowers the whole thing so I I think we're like this is like literally broken I I don't think this is what it should work out and no amount of tweaking will make it uh correct but uh I think um I think some of it maybe it's just that we're looking at such a small thing with such I don't know I have no idea thinks there's perspective yes there is yeah but I think it's like inverse perspective so it's not good inverse perspective what does that mean I mean like it's it looks like to me that wait wait I screwed this up now that I'm full screen here I can see I've I've got projection after view that was never it okay yep I copied the wrong one we wanted to try this order and if you restart then we get weirdness kind of the same thing yes definitely very similar so this was adding projection in the no we added perspective at the end that's what we did yeah I think uh like we we we are using two things and both of them has fov and near and far so I'm pretty sure only one of them they're just trampling over each other yeah yeah uh so maybe I don't know how do how do we hey hey hey isn't it if you look at the base doesn't it look like no no really they're move okay so we're gonna add uh I'm gonna because it's easier for me to see than anyone else because I'm I get all the frames per second uh so we're going to add what's the easiest to do this in view 3D I'm going to add where's our state full widget U are this nope one day I'll find the stateful widget the codee's too big here we are great let's add a uh wrapping widget gesture detector on tap and this is going to be uh stop animation and stop animation is going to do controller. stop there we go a clever and now have to put focus on the window and then I'll tap when they're right up no didn't work tap oh no I shouldn't have to call set State what am I doing why isn't this working no no no no uh that should work uh where's the gesture oh yeah it's around the whole oh you know you know what you're uh you should probably call the stop animation you're only returning it you're right okay focus on the thing oh no it stopped already okay it took a second but uh I think we can see that they're all kind of equidistant here all right so next next my next next uh thing to try is uh have a look back to project yep yep yep everyone was correct except for crack gosh that's Story of My Life yeah mine too all right so um so I think uh I think you tweaked the frustrum a little bit and I I wonder if for example a far if you can just put instead of oh it's 1,000 that's not bad uh was there something that we yeah you were right near the only thing we've changed actually is near originally it was this but should be the same yeah it should be the same aspect ratio by the way aspect ratio we we could still fix but uh I think that's not what what's our problem um let's do can you just make fov something like 120 degrees I think that's something okay all the files are saved oh no we do have some red here what did I what did I do command Z what did I do oh near you made near into an in yeah 0.5 zero I think it's yeah or whatever yes all right so same same same here we can see the lack of perspective taunting us damn I have no idea yeah I don't I don't think I know what well no I know I don't know I'm quite certain that I have no idea uh we're not oh yeah we're not wait perspective Matrix we're not using it that's good um yeah because using it did absolutely nothing absolutely nothing same same again yeah oh my uh there we go apparently I just can't click good does anyone in the chat have ideas on how to fix this because we're at we're pretty desperate yes did you transform the camera I know that means in a way yes it's rotating we transformed its position that's the first parameter here is there anything else you think they might have meant Philip um oh do you want to put it closer like we're 10 units uh I'm I still think maybe there's some perspective there so so instead of 10 Vector 3 * 10 put it like five or maybe yeah two yep uh we're really close to the what yeah nothing no it's different is it it's tilting that or yeah it's it is tilting so like now it's kind of flat and now it's almost tilting down a little bit and now it's getting a little more flat right cuz the the dots are clipping each other on the top and then in a second now they're not clipping each other on the top oh yeah Bas as well for sure uh just a little more obvious to me on the top but I'm sure they're doing the same thing so that interesting so this is would be when when when if we didn't have just dots but instead Have Faces we would probably know what's right because right now like I'm not even sure if we're looking from a little bit below or from a little bit above oh yeah and and Chad is keep keeps being like connect the dots but I uh feel like we are out of time for that for that yes but uh by the way the Cod is in GitHub and anyone is uh very much it's public so everyone is very much invited to prove us terrible actually that would be amazing anyone who uh I'm I'm gonna add the the GitHub link to this I'll show it to everyone um I would love to be tagged on Twitter with the change that makes this do what we want uh I need to make a banner I think for this there we go paste in the value add the banner all right so this is where Philip put the starter code oh I should commit the changes that we've made today huh that would probably be helpful for everyone um all right I'm gonna make things smaller I I don't even know how to it's hard to look at this all right I'll just commit everything and fill up painstakingly telling me what to type uh you just yeah okay avoiding the blame I see I forgot that I went through that uh with with not even sharing my screen but yeah that was it that's our commit message so I'll even just kind of load that up myself and bring it in uh did that commit go through there was three commits before there's still any three commits did it oh Phil up you didn't Fork it okay I'll give it I'll give you since it's you and uh okay I'll give you access to my repo F what's it called observable flutter Cube flutter Cube yeah and then uh collaborators G two factor authenication sorry people um I'm I'm so I understand that like hackers honestly just ruin everything I understand that they're going to steal our identity and like buy themselves trips to Cancun on our credit cards and everything thing I just freaking hate how often I am logged out of everything oh my God I am so tired of it yep yep me too uh Craig what's your username or you can just send it if it's uh it's just my name Craig leens I have a real Deep Cover Alias uh that's you and you are invited sir brilliant all right uh I'll give you the link oh I'm probably gonna have to do the same headache to accept the invite yes you'll have to call with your passports the some someone and they'll be like are you sure you're cra dental records yeah uh okay so I just accepted so now I'm going to push this commit again get push uh um there we are all right so if I refresh here we will see we still don't see we yeah we we don't see your uh I I guess yes yeah I got rid of it because I thought I might have to two factor or something yeah true but there we are okay so today's chicken scratches are available for y'all to uh dissect and fix because they're kind of broken but man Phillip thank you for two hours of your time gosh I had a blast today that was very fun I still don't know any linear algebra but maybe that but but yeah it's I'm really like uh looking forward to do it one one time again uh because this was fun I think people in the comments also had fun hi everyone by the way I I see your comments I can't say hi to everyone there but but uh it's fantastic it's it's great to once in a while pop back and just you know uh fail in real time while being watched by people uh I know you invented failing in real time that was your this will be on my Tombstone inventor of [Laughter] failure oh man okay yeah well needless to say you know you've got you've got a kid this is in the evening for you so I don't want to be presumptuous about your time but you hit me up anytime you want to come here and not know what we're doing while people are watching uh I had a blast you too cool standing invite uh okay folks um man this was incredible I think I'm off next week because I have my first improv show in the evening and uh so I just need to be in the office and so I'm not not going to stream in the morning blah blah blah you're doing improv like is that like you're actually doing yeah yeah yeah nice yeah it's uh it's a it's a flutter devil tradition there's always got to be at least one improviser on the team true and when Emily left uh the you know the torch went a little cold but um yeah anyway so next week off and then we'll be back and then there's the American holiday Thanksgiving that's an a Thursday for reason so I'll definitely be off that day and then we'll we'll finish the year strong so I don't know how many weeks we got left and whatnot um but off next week then back Philip this was amazing any closing thoughts on your end I think we did a fantastic job I think we need the two three more comets and unreal is is shaking in fear uh unreal Unity uh you're you're going down this is you know we're we're going to figure out the projection Matrix at some point and then and then it's over for you okay we're so close so close oh gosh that's incredibly funny uh okay have a good one everybody see you

Channel: Filip Hráček

Views: 3,177

Keywords:

Id: DmId-KOgPkg

Length: 117min 7sec (7027 seconds)

Published: Thu Nov 09 2023