![]() ![]() Seeing this thing in action makes me feel like there's nothing Desmos can't do - so who knows? Maybe in a year's time I'll have made an entire game in here. But it's a testament to the power of Desmos that it can support this kind of project at all. It may even show things behind the camera as upside down. The final product has some other functions to help build our big list of points, and a bunch of things to draw the controls on the screen, but the meat of it is all in those crazy sums that took me so long to explain.Īt this point, the Desmos pretty much speaks for itself. Rotation, transformation, projection - we pretty much just do all our transformations in order and plot the result. The master formula can be easily adapted to do any transformation we want. But the important thing is that we've finally come up with a way to do the math we need. It may be a complete abuse of the features Desmos has provided. We'll stick to two dimensions for the sake of this example, but the technique we're about to explore works for vectors of any length.Įvery 2D matrix-vector multiplication looks like the following: Now we need to figure out what it looks like to do multiplication with a giant, packed list of points. Luckily, it turns out that this will work! The simplest way would be to simply go \(\). So it sounds like we need a way of packing all of our x's, y's, and z's into a single list. Workaround 2: pack everything into one big listįollowing from the last workaround, we know that the result of our functions has to be a single value. ![]() If Desmos allowed lists of lists, we could return a list containing all three. A matrix-vector multiplication function would need to take separate lists of x, y, and z, but also produce three lists with the x, y, and z results. The reason why is pretty simple - mathematical functions can take many values as input, but produce only one value as output. Unfortunately, this doesn't work because we actually end up with a list of lists again as soon as we try to use these. For example, a 3D point with an X position of 1, a Y position of 2, and a Z position of 3 would look like: The last component of the vector will just be the number 1. The first three components will be the x, y, and z of the point as you would expect. Although our points are all three-dimensional, we actually will be using four-dimensional vectors to represent them. We'll use vectors to represent the points of our model. But here's my whirlwind summary of the parts we'll be using: You really should watch those videos they explain the basics far better than I can. For what we're doing, you only need the information from the first four videos, which should take you less than an hour to get through. If you've never encountered vectors before, the best way to get up to speed is 3blue1brown's excellent Essence of Linear Algebra series on Youtube. In our case, we use vectors to represent the points of our model and matrices to represent ways of transforming them. Graphics math is all about vectors and matrices. Now let's get into the nitty-gritty of how to do this. The camera will have its own position and rotation, plus some camera-specific stuff like a field of view. We're also going to have a camera, which defines the point of view of the image.(In my renderer, I only have controls for rotation.) The model can have its own position and rotation in the scene that we're going to render. For me, the model is just a list of points in 3D space. We're going to have a model to render, like the cube in my example.Before we can dig into the details of each transformation, though, we need to look at the big picture. We want to take a set of points in 3D space and move, rotate, stretch, and flatten them until they're all where we want them in a 2D image. How does the math work?Īt a high level, 3D rendering is just a long series of transformations. In this article I want to give a more detailed breakdown of how it's done.īefore we get into Desmos itself, we need to cover the math of 3D rendering. Making this happen pushed the features of Desmos to the absolute limit. ![]()
0 Comments
Leave a Reply. |