Mtg 13/23: Mon-28-Oct-2024
Outline for Today
Assignment 2, Chapter 5, and Midterm on Wednesday
Administration
- Happy Monday
- Attendance (there are 2 – one for today and one for last meeting)
- Class calendar for today
- Upcoming events
Today
- Sample output for Assignment 2 – courtesy of Alex Clarke (CS 315 Lab Instructor) – no lighting used
- Slides from textbook
- Previous midterms: 1 and 2
- matrices.pdf
- MDN WebGL2 Model View Projection
For Next Meeting
Wiki
Link to the UR Courses wiki page for this meeting
Media
Transcript
Audio Transcript
- Happy Monday you
- so for those of you who are eligible, this is the election
- day, I encourage you to take time to cast your vote if
- anyone a Saskatchewan Rough Rider? Fan? Yeah. Me, too.
- Anyway, there was about 10 seconds in the game between
- Montreal and Winnipeg that changed the outcome the outlook
- for Saturday's match against Calvary here and
- hope it's All for The Best. I
- so I didn't have the attendance set up for the last meeting the
- 23rd because that was supposed to be our mentor when I set
- things up and I fixed in some places, but not another. So when
- you go to that link now to do attendance, there are two of
- them, so you can record your own attendance.
- If you were here on the 23rd or
- you had the opportunity to say you were here on the 23rd
- so there's that.
- So any questions or concerns about assignment two,
- here's a sample from code. Alex car, those of you are in 733
- he's the lab instructor for 315 I
- so here's the little video I
- so there's no blading. Used it's just you get
- the colors from the vertex attributes in the East in The
- JavaScript file.
- So here the
- the box is made out of six cubes that are squished. That's one
- approach. There are others that seem okay? Okay,
- So I have updated the links. I
- and I created a class discussion about
- it, And here's the link to submit a newer courses and
- so here the collection of the PowerPoint slides that you can
- reference.
- We'll look at seven, 7.3 here today, and
- That will be the extent
- of our discussion You
- so should we go through
- No Winter. I
- screen, you can see a pixel of the smallest person moving.
- So each pixel on the display shows a sample how
- so we don't think of pixels having shapes, not a square or
- rectangle, but each point on the display is showing a sample of
- the that we're representing,
- starting from Black. Describe or sketch how you would get the
- color white using the three primitive colors. How would it
- differ if you started From white and went to black? I
- so if we start from black, we
- have certain values of
- zero for red, zero for green,
- and zero for Blue. And
- same so
- this is red and
- This is green. I'm
- this is blue. I
- so green plus blue is
- yellow And
- yeah, well, it's actually cyan. I
- red plus green, yellow.
- And then blue plus red
- is Bucha in General, and then,
- style, okay, it's
- not Adding the
- no less,
- anyway we have
- what Can we say about RGB or going from. So that's the color
- we use on our displays. Start from black or nearly black. So
- what can we what adjective can we use for RGB? Additive, yeah,
- additive, I
- so if we start from white, let's say we're printing something,
- then we can apply cyan, magenta and yellow inks to get The
- colors by subtracting from White.
- So CMY
- is
- subtractive i
- If we look
- at this cube on its diagonal,
- so we go From zero to 00, to
- I'm not Doing very well Here with My I
- so we'll See the colors
- of around the edge of the
- circle. So
- I was trying to draw a hexagon. I
- so we have a way to think about colors, which is a bit more
- intuitive and
- it's not perfect, though. So this axis from left to Lake is
- the valley and
- in the distance from the center
- to the edge
- as we're moving out, as we move along that
- path, we change the saturation. So we go from white
- if we're doing yellow. So this is white with a little tinge of
- yellow. This is yellow with a tinge of white,
- and then you get full on Yellow at the edge. So if the
- value is
- zero, doesn't matter what the other
- other parameters are. So
- this is an angle and
- this is just a value between zero and one,
- Displaying two. Represented that way. Does that make sense? I
- so I brought in the hue saturation value. That's not
- necessarily part of that question. I
- so
- maybe it's a good idea to Well, I
- maybe a good question is, use these four words In a sentence.
- What do You think about That? I
- we can take discrete take samples of A continuous
- phenomena to Create a discrete representation. We
- So What other variable do we have to intend that when We're
- creating this discrete representation of a continuous
- phenomenon?
- I The precision
- of The representation and
- so the precision of the representation is determined By
- the precision with which we store each sample and
- one bit doesn't give us very much precision. Black or
- white, two bits give us a bit More and
- 4s that
- gives us
- 16
- levels and
- so we need to save this to store information about the red, green
- and blue values. So
- that gives us $16.7 million
- i Does that seem okay? I
- how do we represent A point in homogeneous coordinates?
- How about A manager? I
- a TLA is a three letter acronym or abbreviation, because It's
- not really acronym, can't pronounce it. You
- You don't have to worry about me asking that. You don't have to
- Write
- that One down. You
- What's
- a feature of using WebGL two
- when it comes to interaction,
- we don't have to specify our own And our own witches and so on
- and
- we're able to associate covad functions with events. So when
- something's clicked, we
- take the appropriate action. A
- long time ago, interaction was done by poly, had a big loop,
- and you just test that this happened or that happened, and
- it would just go on And on or
- there's a typo there.
- So let's Think about
- the case
- of code in the textbook. What do we have if we have a
- graphics programs and we have a we have
- graphics dot HTML and graphics.js and
- there could be more, but let's Stick with these two.
- Anyone like to buy a vowel or make a guess or a consonant? Are
- there any ease I
- one.
- Ah, yes,
- we have two shaders, vertex and fragment,
- and we put them in the HTML file
- what else is there? Wow, you're good. I
- Yeah, so we set up the canvas in the HTML file, and we're going
- to connect to it. We're going to create a contact, a web GL, two
- rendering context attached to the canvas.
- So what's In the graphics.js file? So
- and set up offers and
- that Just go off So
- so there's a question about grow and Fauci that We're going to
- cover next chapter so You can
- ignore that On the screen. I
- Are you seeing a little flashing up? Yeah, I wonder if
- that was well timed with the flash. I wonder if there's
- something wrong with the projector okay,
- why are triangle strips
- important? The computationally, the most efficient
- represents about any kind of
- objects.
- It. I heard most of that it's computationally efficient. It's
- the most computationally efficient way to
- represent any kind of object, as opposed to using the context of
- concave, which is
- at the context, which is a
- disgusting community, yeah, so they're good because we know a
- triangle lies in the plane so We don't have to worry about
- quadrilateral not being a
- not being
- in the same plane, you get that for free with triangles. You
- We don't want three points on a line,
- though, so that's the only case,
- and we don't want to really thin triangles either, but we can
- create a mesh
- With triangle strips,
- and we don't Have we can
- specify vertices. We
- so we get a large triangle, Maybe
- 1v 2v 3f, v2 v3 v4 then
- So we get four triangles from six vertices and
- as opposed to
- more triangles and
- each with three vertices.
- So we're saving 50% on storage, because we're not
- duplicating values
- from
- we're not repeating vertex values. So there are many ways
- that we can we
- and make our representations more efficient. And it's not so
- important
- when we have six or eight triangles, but when we have a
- million or so, then it's
- more of an issue.
- Does that make sense?
- Why is the flattened function required in The code from the
- tax code You
- extra JavaScript and
- capabilities and just creates account remember the exam i
- Three, two, I would have to check that. Does anyone know
- offhand? I
- Okay, well, I'll check that.
- Turn the projector off and now it comes back on this screen.
- See whether
- it would be happy again.
- So how do we get
- any seeing in term,
- say we have world coordinates that deal with kilometers? How
- do we make that huge scene that we've modeled? How do we make it
- so it fits into the minus one, minus one, minus one to 111,
- cube.
- Does that make sense? I
- So, Oh, okay,
- it's happy again. I
- Does That make sense? Do
- we do transformations.
- We transform the walls
- with you. And
- then we apply the projection and
- what is that buffer? Why is it useful? Or how it is used?
- What's another name for it?
- Yeah, can We also talk about depth buffer? I
- so restoring
- for each pixel
- value we update we store a Z value
- and we test whether, before we make a change
- to the
- the image that's displayed, we test whether the new value at
- the depth is closer to the viewer than the one that's there
- already. So if the depth is less with the new value than the
- update pixel, if it's Not closer, you don't if
- Does that make sense? I
- anything else that Come comes to mind so
- it. So We can design our own path here and
- so that's a lot of the code In Chapter five in the book is
- great meshes, and If
- you're familiar with Triangle strips, that idea of ink. We
- can make a surface, okay,
- I think we're at the end of
- the day today. Thank
- you very much for your
- participation and
- otherwise,
- we have office hours tomorrow, in person
- or On zoom. I Move And
- or On zoom. I Move And
Responses
What important concept or perspective did you encounter today?
- The important concept I learned from the meeting was the review about the midterm. I learned and understood from what I did not understand from when we first talked about it such as the importance of flatten float32, sketching the color white using the 3 primitives, relation between window and viewport, etc.
- Homogeneous coordinates and its uses
- Going through prior midterm exam questions in preparation for our midterm exam next class
- Some important concepts I encountered in class today are the Assignment 2 sample video provided by Alex Clarke, then we went over questions from a previous midterm, and did a quick demo of hat.html code.
- Some practice questions from the midterm; how colours (RGB+CMY) work, display terminology, and a few other general CG questions.
- Midterm review go brrrt
- Discrete, sampling quantization and continuous also about colors and midterm
- Clip space
- Geometry of a pixel
- We discussed the previous midterm exams, including pixel, colors, etc.
- saturation value
- we reviewed former midterm questions which was really beneficial to knowing what to study and the format of the upcoming exam
- We reviewed the midterm topics, including the pixel as the smallest addressable unit on a display, the RGB additive and CMYK subtractive color models, triangle strips, the Z-buffer, and the advantages of WebGL2, such as HTML5 compatibility and the use of callback functions and event listeners for interaction.
- learn about midterm question. pixe, additive color mixing, subtractive color mixing, depth buffer, homogeneous coordinate
- about exam
- Review of a old midterm, we use it to study for the current midterm