Mtg 10/25: Wed-04-Oct-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

Okay
How's everybody doing today?
I see you embracing the winter now.
I've got a sweater. Yeah. It's not my park. That will come hopefully not too soon
so happy Wednesday everybody. So this is our last day before the fall break after years of fall break has been around Remembrance Day so it was much later in the semester so first time for everything
okay, so midterm is on Monday, October 23. So that's Monday is one week after we come back from our break.
So I will post
last year is
likely today this week
so we were talking last day where we looked at a program to draw a cube and spin it around.
One of them had a Call of Duty fix it. Yeah. It was pretty easy. It was pretty easy to find.
So we'll look at some code for that
so how do we go
about constructing a cube
so why don't we start with Nick.
Even before that, how do we make a square or? Yeah, so start with vertices.
Did you see points or parts? I just said God's point. Okay.
We'll give you half a plan for that.
Points positions
vertices
Okay, so then what can we do? From that? You know, we don't see points very easily
so we make a
point about the points.
Unless you're drawing points
so we have to say we're drawing and we're going we're going to use draw, draw mode, set the points and we have to have a point size
one
instead of interrupting the class or whatever that is across the hallway, just easier to close the door. You seem to be playing a video quite loud
next
Okay, does that make sense?
So the one where I have all the input rectangles code from in chapter three, I have the way to select the menu to select the different kinds of drawing modes. So in our code, you'll notice in the shader it has a line to set the point size to four.
So you get this we can see them
if we don't set if we don't have a Value for points size. We won't see them even if we have drawing mode set to be fights.
Anyway, so let's
see the points but drawing points isn't a very good way to get a sense of geometry.
And doesn't scream out a cube desert. Or even Raven's speaks say it softly it doesn't say cube.
Sorry, that's my sense of humor.
And if we connect, we draw the thesis. And because it's a cube just consider that
these are all square
so that says more of a cuboid helped to make this more of a cube still.
Or give the impression of a cube instead of a collection of lines.
missing one edge
will that do it? Does that say cube now or does it still say some lines? Some point maybe parallel lines
okay, what what way could I improve it still?
So I don't want to see this line
because that's blocked by the face. So again, just consider these little squares I'm drawing
It's better. It's a little more rectangular cubish Right. So we could if we do if we set the depth buffer been suffering for keeping track of the depth, so we're doing some hidden surface elimination this gives us a better sense of the geometry of the cube
so to draw squares and WebGL
because surfaces
we're going to use triangles. So why are triangles better than planes or quadrilaterals or rectangles is a guaranteed that we can put up
is a guaranteed that for dry wreck if we specify a rectangle that all points are going to be coplanar
well, we might wish it to be that way but it doesn't have to be right
me say explain to you.
Lines and rectangles quadrilaterals are not necessarily.
Right. So if we specify two points, what does what a two points specify for us?
Two points.
Two points are in basically a line. Thanks. I heard that a few few different people. So that's a line. So
if we specify a line
we have a choice of all if the line is like this than the planes that we specify can be anywhere that passes through that line.
So we specify a third point that fixes the orientation of the plane. So the third point is it makes the triangle so
so triangles are coplanar. So if we have a rectangle or face it isn't coplanar we have to make a choice of how to triangulate it. So if
I mean, another circle I want to do another circle they're looking for my camera
so the idea is we can use triangles to represent a face. Q But in general,
if the four points aren't
the same plane then we have to make a decision about how to break it into two triangles.
Soon as we have
definitely not keeping them up
so we can break up
so we can see three phases here. So, that's six triangles, but altogether there'll be 12 I want to see if I can draw
draw something that's clearly not
in the plane.
So the idea is this one is higher, the second is higher than that and
so if we do it this way
the center line is the lower altitude.
We can maybe think of it
like this
but then if we divide it the other way.
Then we're getting
that kind of shaped twice
Does that make sense?
We should write some code like this
should we take that on today? Okay.
Okay
so before that
let's think about the queue.
So we can in WebGL we can draw triangles
so the basic approach you can do is just give the coordinates of each of these vertices and say, here are the triangles
and together they make up the cube
but that's not terribly efficient.
So you can do
so instead of a face
I mean draw a bigger fan.
FBI says a circle
if you squint a little
Sabian Nightingale rows of data plot.
Anyway the idea is so we have
one vertex here. So we specify the center and then we say make a triangle. So this is C was called C for center
and then.
So we
you can specify
the fan as see
and the way we understand that as role is using C
then we're using D and E
and E and F
then she and so on
So, for doing a face
square
we do this triangle, so,
see
and we use those two and then we use the last two
so what does it say? Triangle? Tangent
fan
fans
alternatively we can do triangle strip
what is the upper line triangle? That the
triangles detached separately
with three words are defined
Thank you My apologies.
I was listening to a story of what how teachers have had to buy news supplies for the students every year and out of their own pocket and when school board and told the teachers to try to get the students not to sharpen their pencils too. Often because he only had one for the year. Anyway, that reminds me of sharpening my piece of chalk. So I might have an easier time writing on the board.
Although I'm not sure that I would have an easier time so long as I'm not testing it with having access to a chalk sharpener I'll just say that's that's the magic solution. And my handwriting would be wonderfully legible that okay, triangle strips so
I'm gonna take a cube
and make it look like an elephant a little bit or a letter T.
So there's a way to make a cube from a single triangle strip.
So the idea is I'm not sure let me try
so we start here
don't know why they had to make the line squeak?
So this is much more efficient I think that comes
so that's 14
So that's 14 indices to specify an ordering for the eight vertices. So we don't have let's write some other fakery.
On the board here.
Illustration there so
six faces times two triangles per face
three
C's
So, that means we have
12 times 12 144
Now if we just specify the vertices once
so, we have eight vertices
scratch my nail on the chalkboard just ever so slightly so, it gave me I got the Harrison I got them back my neck, my neck. I hope it didn't extend far into the audience was just a very localized effect eight vertices trying in the cube pardon me.
Is enough just specify the eight vertices
do we
have the saving of
about 75% is do we have enough information to draw the cube with this
oh
okay, we're drawing two squares, which we said isn't a good way to proceed. And we're not drawing squares or drawing triangles. triangles
so we can get
if we specify indices
let's just start
if we say
okay, we'll do that
so we can think of this as
I'm Fred face zero
then connected to two three. And let's label these 4567.
So two, three are connected to six seven
and then six,
seven are connected to four, five and four five are connected to 01.
And then one three are connected 257
and
02 are connected to four six.
So if we
use this path
then you can specify indices
0123
So got to three and then go across to seven
and then why one,
five
and you see here we've got one five or connecting to one five there
think it's 1404
Isn't the Zealand?
No, I drew this this one the other way.
Here we're connecting to four zero
and then we get to
23456 7/14 14.
Okay,
so I'm gonna give you I'll send this post a link to the paper where this triangle strip came from. They have different numbers. I'm not sure why they started where they did. Anyway
so there's 14
If we're going to specify a triangle strip, we need to specify 14 indices.
Now for us an unsigned in like a one one bite
I guess. Unsigned character. So how many indices can represent using one byte?
No
no
one day test for
memory space know as a four
in the CFA so.
Do for each in this index
I didn't follow
if there are eight memory spaces in one byte and we take two for each index. So, is it four indices?
So,
using one byte to store one index value so, using one byte how many values can I represent
one byte how many values of it any other questions
anyone else be able to restate the question so it's more clear
so, as an aside, we talked about colors being
what color is that?
Yeah, let's read so we have.
So,
the hexadecimal digit can represent 16 values because we're doing
so we have
four beds. A hexadecimal digit means regrouping four bits. So that means we can have between we have value 01 all the way to 15 because we have capacity for 16 values in four bits
What do you think about that
so, remember card trick for bits for yes or no questions? I guess quote unquote your number that was between zero and six between zero and 15 inclusive.
So, 16 times 16
is how many values
256 Yeah.
So, in this case, we don't need more than eight index values so 256 is fine. If we needed more than 256 indices, we could use a 216 bit storage or two bytes
so,
we're adding 14 here
so this
requires 47 Pardon me 46 By switches about a third of the costs. If we just did it
plainly.
Just didn't triangles
triangle fan is a bit more because we need to specify the fan for each.
And for each face.
So each face
so
six times
for indices. Plus we need Sony say don't make the whole thing into it's not just one triangle fan because we need to change the center of the fan from each face. So we need to
so
six times four that's 24 529
So we had that
that makes sense.
So we're going to use element arrays to give the extra information about the indices you that we need to construct the geometric primitive so if we're talking about bytes, but maybe megabytes then these differences are more important.
So let me go to the two examples
no that's not the one I wanted.
May be it is.
Let's see.
Okay,
let's do the plane
so the colors are not
gonna say very helpful for interpreting the shape
but anyway that we
let's just, yeah, that's the technical problem. I had.
Go away. Go away.
Okay. So.
Okay, so this first one we're defining a function called Color Cube and we're drying the six quad six faces
and then we have indices
so the indices say how to make the two triangles out of the quadrilateral. That we've input. And so we're putting the positions together according to the indices.
So we're drawing arrays. Using draw arrays, which are drawing triangles. Zero to the we were drawing all 36 triangles. Does that make sense?
That's what we've done before.
Now to draw the triangle fans. So we can see triangle fan and we're doing num elements but instead here we're specifying the right hand side unsigned unsigned bytes. So this, they can store up to 246 values and serve draw arrays reusing draw elements Does that make sense?
So to go up to the top here.
So
you are the vertices and I've indicated the index value for each of them.
And then
I have indicated the plane that they represent. So we have four indices to specify the face of the cube and then a fifth one to say that's the end of the triangle fan. So we're specifying six fans and we don't need this the Terminator at the end
so in order to enable this understanding of the 255 in the data here, we enable primitive restart fixed index
so we're creating a third buffer for the indices and we're making it unsigned int eight bit array
we're making a color buffer which is pretty standard, and then our vertex array. So we're just storing the eight vertices, not 36 vertices. So just the eight there
and then we have
dry elements triangle fan, number of elements. So we have num elements is 29. We're using that.
Size of our element is an unsigned byte. So specify those parameters. And we draw again
now let's go to let's show
first.
So you can see it's fixed.
There's no hole here. We'll take a look at the original in a second. Here.
But our third example
is.
I've
worked on the interface a little bit here. You can tell me what you think about it.
Basically
I reordered the vertices a little bit. But the indices that we have
in the code
I think they should have been similar to the ones we came up with.
So we don't need any
and he breaks in that triangle strip. Because we're just specify as opposed to the Triangle, triangle strip are just see sequencing them. So we use the first three vertices, or the first three indices to draw a triangle and then we use the next V and the next three and the next three. So that's a distinction. Like with the drawing modes, we have lines and line loops, or line strip. So if we're drawing triangles, we take three vertices and then we want the next three vertices. We don't overlap. So for drawing lines compared to a line strip, taking two vertices drawing the line, then moving on to the next two, with a blind strip between two and then moving. One doing those two vertices moving one doing the next two vertices Does that make sense?
Either
that makes sense. Okay. All right. Any questions about that?
Know it's not my one.
Okay, triangle strip
elements.
leaves a little bit to be desired, but
here we go.
So what I've done here is I colored one face read from the initial from the initial eight vertices I did. One face red and one face blue and then as a go between them is blending.
was working for me to begin with and then start have some problems.
So you can
think about this as well?
So whichever one I type into them becomes the one that's animated the X who gets animated
let's see if that's true.
Yeah
oh
okay so we
have here the vertices of vertex colors
and then the indices
Can you see where the problem is?
Compare the first and second triangle fan specifications here
what do you notice about these four numbers compared to these four numbers
is the repetition of this number. Yeah 372
That's the problem
that was the one that was creating the whole yeah
I'm
over time here. So, I don't want to keep you but the thought I had was just to modify one of these faces to not not be coplanar
you can experiment with that over the break any questions? This makes sense about the geometry and how we can specify geometry and the trade offs we get.
Okay, well,
I won't keep you any longer. Thank you very much for today and have a good break. And need to get in touch with me. I'm available. Thank you. You're welcome. Happy Thanksgiving. Thanks. Yeah. So there's Thanksgiving. And then my 40th high school reunion.
Okay, and maybe against
my better judgment. I decided to go.
Before you go since you
know 40 Since I graduated high school
was 48 years I'd really be old.
Thank you, Doctor have a good
Thank you, Doctor have a good

Responses

What important concept or perspective did you encounter today?

The most important thing that I learned toaday is creating a cube using a triangles. and also I learn about triangle fan and triangle trips.
is about the geometric transformation (cube from rectangle)
The most important thing I learned in today's class was all the animations we can do via rectangle and triangle. More specifically cube drawn using triagnle fans in Webgl.
Discussed the code furthermore as compared to the last lecture and discussed the assignment.
Making a cube out of triangles can be done by using single triangle strips. Each face of the cube can be broken down into two triangles.
I learned about the converting a cube using a triangle in webgl.
Was about geometries and how triangle strips are more efficient than triangle fans

Was there anything today that was difficult to understand?

It was difficult for me to understand how can we make cube out of triangle fan. Apart from that it was okay.

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

I did notice that when a cube is rotating Y, the lines between vertices seems incorrect. Since it is in 3D, I think that the lines (vertical) behind should be shorter than the lines (vertical) in front.

Site built: 2025-05-06 13:52 -0600 • Give feedback about page