Mtg 11/25: Mon-16-Oct-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

  • saw the riders last again no good news with that team this year thinking I watched just a few minutes I watched this before half and I saw that they were had so that was maybe my mistake and watching and thinking that they got under control.
  • By the end they had given away they heard me this word just you that cricket is going to be its 2028 Olympic Games
  • Okay, so here we are. What's that? Like? We also had one game in the house is Pakistan.
  • The university it was streaming we gave in the morning to watch
  • did your team win?
  • Okay, so
  • everything goes well I should have my computer back later today. My new one so I can show it off to you next. Next meeting
  • have the new video adapter in preparation
  • here's the one I want
  • everyone see that I posted the exams from last year.
  • Face to
  • face too okay
  • so on the page for the course. zimpler for anyone else? Yes. Okay, it's not just me.
  • Let's see if this helps any.
  • Says Sony, but I don't think it's remote for the projector.
  • Let me see if I can get open
  • Yeah, so DVD Okay, so we'll leave it with so these are, these are in alphabetical order. So there's the midterm from last year and the final exam from last year. So anyone had chance to look at them yet? And what do you think?
  • Know? sites.
  • So we can discuss the old exam and what you'd like to suggest to be on the new exam. We can do that on Wednesday. Okay.
  • So let's say that the second one is going to be reviewed. So some people had some concerns about their marks and I had some other concerns about the instructions and whether they were anyway so stay tuned for assignment one.
  • So I'll post the second assignment. Later today okay.
  • Turning questions or dance or we did last last days before the break
  • making sure we can have
  • so I said that was a shorter exam last year, but I was wrong. It was Tuesday Thursday class it was 75 minutes as well. But the midterm last year was a month later. So we won't be doing the same things. We're going to focus on chapters one through five.
  • Okay
  • so I want to look at a couple examples. Example codes here
  • and then we can critique critique the code that the author wrote are included with the textbook materials so, these last four buttons controlled to view that receipts we can make
  • we can increase or change the aspect ratio can make it
  • I can do the opposite here
  • have two angles that we can play with all right, thank you very much
  • so, now we're now we're looking down on flatten at somebody stepped in the hat and then we can increase the sample.
  • impression that it's floating away here
  • least I have that impression anyway. So we can do a bit of controls that way.
  • Let's see if I can display at the same time
  • so how would you rate this interface
  • so now we can see. So what is Zed? Likely controlling as we see this picture changing?
  • So how about the depth and we were talking about rendering within Cuba minus one plus one minus one to plus one minus one to plus one so if we set it up so that we're changing those front and back lanes and we get a portion only a portion of the out here so that makes sense.
  • So here's the lesson JavaScript. Here's the HTML file
  • so we have the two shaders. Our vertex shader is going to determine the new position based on it's going to take the position we get from the vertex buffer.
  • Right that's, that's what's stored in a position multiply by the modelview matrix. And then by the projection matrix to get the new position.
  • And the fragment shader is just speced is just assigning the frag color to whatever assigning the fragment color as whatever we pass it in this uniform color which is a vector with four positions so we're still we're passing our GPA
  • so the, in their wisdom, their footing 12 Buttons named one through 12 Is that a mnemonic aid?
  • Seven familiar with the word mnemonic. It's about helping with memory
  • so that's all it's in the HTML file
  • call the JavaScript files. Well, that's here.
  • So Oh, sure.
  • Better You're welcome
  • so they have a function had to create the data for the for that shape we looked at we're looking at so we're filling the array data
  • that's the first bit is for know how you would you think this is in terms of readable JavaScript code
  • so he said near and far plane so near is minus 10 far as plus 10. So 10 is sort of sad is going into the it's going away from us. So that's the left hand and right because we're doing x times y.
  • And Zed is away from us. Do you remember left and right handed you don't necessarily have to do this for you. You can also Well, there are other gestures you can make everyone. But that's the idea. That's the distinction because because with three dimensions we have a decision to make which way the positive set direction is going.
  • And it's not like the WebGL is one or the other. It's it's flexible in terms of we're not required to think of things in terms of left handed or right handed coordinate systems. But we just need to be aware of what what we're doing. So that they all all our calculations fit together
  • scores are set up, left and right
  • then the radius is used to specify is used in a calculation of the eye position. of two angles theta and fee.
  • To callers so we have red and black so red for the triangles and black for the outline of the faces of the quadrilateral faces.
  • And we're saying we're looking at the origin here x y Zed is 000 and up is the positive y direction. So x 010. So this is the point. This is a vector. So that makes sense.
  • And we're specifying the coordinates of our left to right and top and bottom of the viewport. They're centered around the origin. And then we have matrices that we're going to build in our JavaScript code, and then we're going to pass to our shaders. So this is the first line is defining the matrix storage or variables for the matrices. And this is going to be the location that we can access them with our GF or their WebGL program or make them available to the shaders to share between the shaders and JavaScript. So then we do the net function after we've loaded everything.
  • So we're going to we're going to do a depth test and the function we're going to use is less than or equal. Let me just bring up that web page and bring it up before.
  • We can say options we have are never so they'll never pass the test. I can use less of if an incoming value is less than that depth buffer value equal surpasses if the incoming value equals the buffer value. greater or less than or equal. So that's the one we're choosing here.
  • Far as far as Greer's and near so less than or equal is going to sort of values with a less lesser depth are going to be closer to the eye position.
  • So polygon offset fill is another mode we can enable and that means that we're going to be able to see the polygons in red and the outlines in black.
  • So we're going to take the data and transform it into an array of positions.
  • There we're going to associate that positions array with our vertex buffer
  • and make that connection with the variable in our shader a position. Then here is a uniform color. So we're going to use that location to pass color information from our JavaScript to our shaders.
  • And then, here's the part about saying that. naming things buttons, one to 12 doesn't really help us understand what's going on in the code.
  • So button one is clicked. year is going to be increased and far is going to be increased as well. So what's button one? Anyone remember what button was labeled?
  • Increase it.
  • Okay, so increase, increase in decrease, increase our decrease our so that's the radius that's going to affect the eye position. And then we have these two angles, theta and fee can increase and decrease them. And the last four buttons are changing the shape of the viewing area.
  • So if we're increasing our and then we're doubling it and for decreasing our than we're having here and then we're incrementing. Some var is the increment in the angle. So we're adding an increment or subtracting an increment. Adding an increment or subtracting and increment here.
  • So what is Dr?
  • So is that about five degrees
  • anyway
  • so we're gonna calculate the IP so when we render it we're gonna calculate the eye position based on the radius and the angles
  • and then we're going to set them the modelview matrix by using this look at function, so that's the eye position is the position we're looking at which is the origin here is the positive y direction. And then the projection matrix is an orthographic projection left right bottom top near far so it's a parallel projection. And then we're going to pass
  • going to connect the data from the matrix and the JavaScript to the matrix in the shader. Because of all of you and for the projection, and then we draw the color draw the red triangles and the black outlines of the quadrilateral phases.
  • Don't have this set up here? For editing sorry give me a second.
  • You suspect something's wrong here. Let's see what
  • All right
  • Okay. Sorry for that. Delay
  • so what are the changes will be interesting to make here?
  • We just changed the up should be off to how we make it upside down.
  • What else would be one of the comments you have about this interface
  • Okay, so what if I make the abstract vector this vector instead what's going to happen if I make the effect your 110
  • was going to be on the exam for sure
  • anyone smile but that
  • they're still looking nervous so what
  • so we're gonna have the eye position somewhere I'm gonna be looking at something
  • right so this is here I'm determining. If I'm looking at the chair in front of the front row here. There's a line between my eye the eye point and the point I'm looking at. So that defines one axis for the coordinate system of our synthetic camera. So what's another way that I can control the camera so imagine I'm still holding the chalk. And there's still that line from the high point to the look at point the point I'm looking at. Then I can go from landscape to portrait or I can do some some different angles so I can rotate around the axis from the eye point to the lookout point. Right. So that's what I'm specifying with up is which of these possible directions is going to be up for the camera? So does that make sense? So this is one vector here. And then I'm specifying which direction is up
  • so I've, I've drawn this from the side so it's hard to tell but let's draw a version the same
  • is if I have a project prospective projection, I can I wouldn't mind seeing the other the up vector come up like this. If I have an orthographic projection I won't see it. I'll just see what's in the plane. And in the exit plane. I know that it's coming out. By default the way we specified it as a positive y factor, positive y direction. It's going to be coming out of the of the accent plane like this
  • Okay, so if not 010.
  • We take that to be true does that seem like I'm telling the truth?
  • Okay, I'm not lying. So what about what happens if you say this is the vector?
  • So it doesn't matter that this is a longer vector. It's just the direction that's important. So what's the direction if we're looking at if we're looking at
  • into the screen, so this is x and this is y. So we have a unit vector x needed vector and y.
  • Okay, so let's, let's see what the result is. Can you make a prediction where's the hat going to be pointing
  • is it going to be okay? Let's see.
  • So we're saying instead of up being here
  • you are still looking at the screen as being up. So we're looking at this direction being up, sort of rotate it so that this is pointing up on the screen then we get had been tipped over by 45 degrees.
  • It was like if I took a picture with this being up and when I see it I'm rotating the whole thing by 45.
  • So this means so what I'm looking at I have another when I bring it back to the viewing position because this was up I'm then putting in another rotation from
  • this rotation appears as the effect of having vectors so you the F factor is looking. In the original data, the architecture is like this right because it's pointing off direction of the 45 degrees. Next and Zed so that's when we know that's where where it is relative to the hat. Then this axis becomes alignment, positive y axis or display so that makes sense.
  • To me, that would be a nice a more meaningful one to manipulate was the interface because then you would see the impact of it
  • so if we decrease our bridges, so we started a distance of one How much are we decreasing it by?
  • Decreasing it by half. So quite quickly, we should get into the middle of.
  • One This is the one we have modified
  • the console Okay, so for going to decrease our then what do we think is going to happen?
  • What's gonna happen to the picture?
  • Shouldn't be nothing
  • you so another thing would be helpful some feedback about what's happening with these controls. So we could see what the values are.
  • Okay now decreasing sets or cutting, cutting off some of the
  • so now we're left with just the strip in the middle
  • so to me it seems like our should have if the if really decreasing, decreasing our than it should have gotten closer and closer to the to the hat
  • Okay, let's let's look at a couple other ones. Here.
  • Let's try also one more buttons to deal with
  • so you can see here we're only seeing one toward the queue. So if we increase our
  • it's moving. We're moving further away. So that seems to be working okay. Because then if we increase that we should see more of the cue.
  • So this is an orthographic projection so we're having projectors parallel to the viewing plane and then we can look at perspective one for perspective viewing projection let's zoom out a little bit here. So you can see the whole thing
  • it's changed your view a little bit
  • so you can see that we're or we need to increase the Zed to see the whole thing or if we decrease that we're going to decrease what we can see
  • can see them all cube
  • I hate a feature on the Mac if I accidentally touch with two fingers that like switch between it's like a back button
  • so you decrease our seems to work a little more
  • so here we go from nothing. A little closer there it is the cube a little closer still. And then what happens here and they see the blue square instead of the Red Square
  • and it's gonna guess we're inside the cube
  • everyone
  • seven comes around
  • there it is again.
  • So we're not looking at the center of the cube anymore
  • that's another issue I want to make this about usability of the program the sample code He gives us because sample code is intended to demonstrate the WebGL functions.
  • But we should also always think about for assignments for example, and how we're going to make the code available for the instructor for the instructor and for the marker to look at and to grade and to give the most clear experience of what we're trying to demonstrate in the code.
  • Okay, any questions or comments? About that?
  • So, the functions to create the matrices are in that MV new dot j s. So we'll look at that on Wednesday as well as discuss exams. Okay, throughout if we leave a few minutes early today. We're all finished there and then if there are questions or comments we can have a bit of a discussion now.
  • Any questions or comments?
  • For the slides that you provide from chapter one to five, she could cover the question
  • Yeah, so what we've discussed in class, chapters one through five are fair game.
  • Review, we can can we just study those slides?
  • Sure, but I would say also look at what we've discussed in class. Okay. So, I look forward to your input about the kinds of questions that will be a fair assessment of what we've done so far. Do you have a question for the whole group? No.
  • Does that seem okay? think I'm being too hard on the textbook textbook author for his JavaScript and HTML coding.
  • Who says yes, I am too hard on the author who says no, I'm not too hard. Okay, so no, who just doesn't want to hear me at all? And participate in these questions? Yeah, I figured that
  • wants to leave early. Just still early
  • Okay, thank you for your content, attentive listening. And we'll see you on out so I have available tomorrow for office hours if you have questions, and then we'll discuss them Wednesday in class and then Thursday and even Friday. Also be available to answer questions. Okay. You're very welcome. Have a great day. Thanks.
  • Again,
  • Again,

Responses

What important concept or perspective did you encounter today?

  • Most important thing that I learned in today's lecture is about the assignment 2 ,increasing or decreasing a radius , theata and mant more create an impact on the visual object, and also I like the way doctor illustrating about the camera position is very easy to understandable for me.
  • Covered about ortho code in today’s lecture.
  • is what are the changes in animation when there is an increase and decrease in the R and theta
  • Today was n amazing lecture. We went through the codes and discussed that sir will share the assignment 2 for submission.
  • I learned about the code of the animation when increasing the theda and increasing and decreasing of the r.
  • How changing the vertices can show different angles of cube

Was there anything today that was difficult to understand?

  • Today's class for really difficult for me to comprehend in a way that at the end I was really not able to conclude it.

Was there anything today about which you would like to know more?

  • Handling how to change the camera position from the point of view and also changing the different axis and see the changes in the result like the hat that we discussed today is something that I want to know about it and explore more by doing it by my selfand discover.
  • I would like to know more and I will try to find out why increasing or decreasing phi become irregular shape.
Site built: 2025-05-06 13:52 -0600  •  Give feedback about page