Mtg 21/25: Mon-20-Nov-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

Yeah so open AI the two board I was did Sam Altman and then
well, I should I should have more detail read more details
about it but so apparently Sam Altman is now going to
Microsoft, and maybe a bunch of people are going to go with him
in Windows Yeah, I don't know how much I trust Microsoft to to
do the right thing with technology. I mean
anyway.
Did anyone watch the Grey Cup game yesterday? Anyone know what
that is? I I was remiss and not telling you about it. That's it
was the 110. Time the chat, it's a championship of Canadian
football. So 100 and 10th.
Time they played for the cup. And it was a very good game.
Montreal Alouettes versus the Winnipeg Blue Bombers. And seven
out of eight panelists pick Winnipeg. To win and Montreal
and Montreal won.
And it was I was cheering for Montreal because the quarterback
in Montreal. Well the person who was the star for Montreal played
into Scotch played here last year. And he was he was treated
poorly
so I was glad to see that he won anyway.
Oh I should also
in summary
Okay, so any questions about assignment three.
Okay and assignment two marks have been posted
the signage
and I replied You see that I replied. Yeah.
Sorry. I know that he has something to say. So, I just
encourage him to Yeah.
Because I have an issue with the grades not happy with
Yeah, okay.
Everything was working
for Marx.
Okay, can I ask a question? Sure. Okay. So, the total
assignment is eight marks and there are two parts to it. So,
and then there is finally like a part where you're graded on
whether it works or and if there is adequate comments. Yeah,
right. So my both parts were both my parts were functioning
perfectly fine. The comments on the HTML side was perfectly
fine. Is the Jas side which I did not basically segregate as
to what I added into the code that is because, like I told you
like before the sufficient I was not willing to get that RCT done
and everything so I was doing it in a hurry. And I got deducted
2.6 marks for that out of a 2.4
I got six
it's one four of the talking
submission for comics.
Show so I was talking to him sorry. And you're sure it's not
something we can discuss in the beginning here.
I was saying that for the second part becoming Samsung something
like make your code different from that you understand?
Yeah. So I don't want to go into specifics in class. But if you
have a question about the assignment I will look at them
today. And I'll talk with the marker. And I'll deal with
issues Okay. So let's see. All right. Sounds good. Okay.
Okay. So
anything else?
All good.
Okay. So
Okay. So I want to go through we'll revisit the particle
diffusion example that we have that I didn't explain clearly,
on Wednesday. But we'll also go through a couple more examples
here.
So in the first example, from the text, it says cube
so some services are translucent and some are not. So this is
about blending and how to manage different values of alpha.
So let's look at the source for this.
So the shaders are fairly standard but let's take a look
at what.
Okay
so we're drying the cube so we have 36 vertices, two triangles
per face per six, six faces with two triangles each and each
triangle has three vertices so that makes me six. And then we
have the axes of rotation
and a very helpful name variable called flag and then HSR flag,
hidden surface removal flag. So whether or not we're going to
toggle or they're going to use hidden surface removal or not.
So we're going to enable blending here. So that's going
to allow us to see
a combination of colors.
So we've seen the colors here are.
So in the textbook they talk about a combination of
translucent and opaque polygons and the way.
way we can deal with that in the code is to turn on turn on and
off the depth test.
So we're gonna be enabled
then functions I'm good sorry.
Ready that smile?
A foolish thing to do.
Combining
selectively apply
so why do I say that is one second?
Select? selectively?
Selectively
so why should I write it again? No, no, no, it's
perfectly fine selectively. The word use
use. So what are some possible issues
so if we have
to think of a transparent or translucent polygon and an
opaque one.
Blending could just make it opaque.
Coffee for updating the depth buffer for the trans translucent
ones. Then that might come we have the risk of
having a drunk never show because it would not be possible
that it goes behind your vehicle
source Alpha. With reception in the code we subtract the source
alpha with one minus of source alpha
so we don't want
to blend function. Yeah.
We don't want that's not the case here. We're we're dealing
only with
it's about the optical yeah know. So this is how we're
blending.
The idea so let's look at running example again.
So for for us the depth buffer
so we're doing
we started
so we're gonna get in is we're using we're getting
I'm having trouble finding words today. Sorry. So if we have a
translucent polygon in front of another one we don't want we
want to blend what's behind it so we don't want to
have the forward polygon block the ones behind it. So we can
selectively we're doing opaque polygons we can use the depth
buffer as normal but then we can make it read only translucent
Yes. So this example
doesn't match the textbook. So I'm going how many people are
able to get the textbook and look at the eighth edition just
have the digital yeah that's that's all there is really.
Yeah. So they talk about making using the selective making it
making the depth buffer read only when we're dealing with
translucent polygon. So I'm going to update this code to
is the there's a line there that says if HSR flag and GL enable
depth test is disable the depth test.
Yes, so that's in service removal flag.
So that's
okay.
Okay.
So I went
sure another application from the text
so I don't know if this is very inspired example. But the idea
is rendering the triangle into a texture at a lower resolution.
So you can see the jaggies on the edges of the of the texture
so let's see if we can make that more pronounced.
Okay.
So the red triangle is a texture that we're using and we're
relying on the Render to the screen was the other things this
background square
so that's an example of a multi pass rendering so we can create
textures and then apply them to our images
so you can see we can generate texture to different resolution.
I'll update this one as well.
So this is a little better documented version of the pic
cube so the idea
be on a pic surfaces so if we click on a pixel location here
how do we decide which with this brightly colored cube we can't
really rely on
particular color to get us information, what's been clicked
and can't look for a single color to identify a face and the
keyboard the background so the idea here is that we're using an
off screen buffer a frame buffer object to render a simplified
version of the queue where each face gets a single color so we
don't have the blending. We don't have the interpolation
and then
we click that's background
so I'm getting colors. So this is just a variation. Building on
is code or the author's code in the text sound sample instead of
just relying on a console dot log statement putting into a
text area.
So we're creating a text additional frame buffer. A frame
buffer object we set up and then what happens is when we click on
this we have things is usually here that we add
so this is what I've added to display the text text area
and we attach a listener to the canvas so we can see when the
mouse is pressed. So when that happens, we bind to this off
screen frame buffer object we've created.
And we get rotation angles said that with a uniform the paths
are x y and Zed angles to the shader. So we're doing this for
each face. we're assigning a different color then we're
drawing those two triangles with color and then we're ever again
the most coordinates and we're reading the pixel value and that
was nice coordinates
so we're doing read green, blue, cyan, magenta yellow. As the six
colors and silver converting
so for its if it's a red, and we had the we had four to the name
index. If it's green, the Add green is set yet to to a name
index. The blue said three out of one. So that gives us an
index into the names of the pick colors or names of the colors
that we're using.
So background is zero. That means so we don't we haven't
detected any red, green or blue now. So think about the card
game card trick that I showed you. So we start with the guests
zero so if you say no to everything. You're You're my
your numbers zero. So the same way if we don't add any we
didn't detect any color and we've hit the background
so we're going to display. This line here is displaying the name
of the lowest tech and then we're switching back to our
regular frame buffer and we're setting the color index to be
zero. So then we draw our usual normal rendering after doing the
off screen rendering.
Exposition
sewers this way Alex
So the vertex shader is doing the rotation
and it's passing
so we're getting here in the vertex shader. We're passing
through the attribute color that we've set for the vertex
so then we're using the uniform for color index. So we're
defining first with the colors. We're using seven allocated an
array of seven spots. because zero is important and we're not
going to assign it of color index is zero, we're using the
vertex color that's passed through from the vertex shader.
Otherwise we're using the color from from here. So I've
organized them according to
know reg should know blue should be first but it's got red sets.
This is actually sciences that's magenta
because that's why blue doesn't show up and list here. Let's fix
that.
So here are index 1001 And next to is 010 which is 233 is 0112
plus 111011. Read the sets those far six.
Does that make sense?
No say there's good enough
okay let's see All right.
Today we'll look at the example I sent
so there's two things going on here right? I just won the
drawers the
drawers the point at the new position so you can see the
the points being drawn and then
and then the color is being diffused the neighboring cells
so those are the two rendering or two shader programs.
So the volume to diffuse that's that turns into the denominator
in the shader
look at the shaders again.
shader one is just passing the position a 2d position and
making it into a 3d position and then we're doing passing through
the texture coordinates
that were set by the.
End the attribute
so that's the first shader second one is doing the point,
drawing the points and the positions are determined here.
We're setting up the drawing two points.
In the fragment shader, the first one is doing the
diffusion. So it's getting the x&y coordinates the texture and
then we're dividing through by this by the scale which is the
fusion or the diffuse parameter in JavaScript
so we have four terms here. And defuses set to four so that just
doesn't average
second fragment shaders is taking.
color that we specify passing as a fragment, so that's program
two is doing. vertex and fragment shaders are drying the
points. program one is doing the diffusion. So the way we do this
is we're going to flipping between the textures that we're
creating.
So we said retexture the render texture so we're reading from
texture to begin with her reading from texture eight and
read rendering the texture B.
So we set up the frame buffer we create a frame buffer and bind
to it
we set the texture the render texture to be the color
attachment. The color buffer attachment for our frame buffer
object.
Your eyes added some documentation about using a
single array single data buffer for the background vertices and
particles and extra cores
so we're doing program to first we have to start are saying
things up we have to use do the use program.
Otherwise we can connect to give an error if we say if we haven't
selected to use program to what are trying to make assignments
to program to.
I was gonna say as I should find better names for the program.
One program to program one is the defusing
so using that we bind to the frame buffer. The frame buffer
is set up to use sorry, set up earlier and then we have read
texture. So we're going to flip between texture and texture be
rendered texture between extra B or texture a so based on the
value of the flag which we're changing the reader render we're
going to change that every time
surviving to the retexture and are attaching the render texture
is the output for that frame buffer.
So here we are trying to particles. So this is using the
off screen frame buffer object.
So we draw after them in one color, which is draw half and
kind of a yellowish color to draw the first half that way and
draw the second half with a bluish color
we start with four because the background squares vertices zero
through three
and we diffuse the articles and then we render to display
because we're we disconnect or we re establish our connection
to the display buffer here
so we're doing is rendering where the drawing the texture
was the rendered drawn into
so all it is is redrawing the background try background
square. It's a triangle strip from vertices starting at zero
and for more. And then that gives us the texture textured
background square and then we get ready for the next call by
moving the particles. wrap them around as needed. We substituted
the data in our buffer
and we swapped the buffers swapped the roles for the
textures
my explanation today so I'm seeing better if you have a
chance to look at the code earlier to make sense
So I'll do those
I'll do those modified versions of the code that we looked at
today to match up with a textbook and they're better
so we'll look at chapter nine starting tomorrow next day on
Wednesday.
So chapter eight is about certain GPU capabilities. So we
can do general purpose computing with a GPU or we can do other
more complicated effects using the facilities of the GPU. So
that particle diffusion one is an example of doing off screen
rendering. And because we're using it on the GPU, we're able
to do it much more quickly than otherwise would have been
possible. So there's a number of things that we can more advanced
things that we can do with the GPU, and frame buffer objects.
So that's that's the gist of this chapter. So he's given us
they've given us a number of examples of techniques that we
can use
Okay. Let's recall the day right. are right on time. Oh.
So you think it's more interesting with more points,
more particles or less particles, sorry.
More particles if it doesn't give you the range of colors in
the.
Anyway, it's just basically ruined yellow here. Anyway,
thank you for today. Thank you. We'll see you on Wednesday.
Okay, thanks again. Take care everyone.
Morning
Morning

Responses

What important concept or perspective did you encounter today?

is about the blending colours for assignments.
The most important thing the Learned in today's class was how we can blend colors based on a plane which is actually done by combining transparent and opaque polygons by applying depth buffer selectively.
How colour blending works based on alpha

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

in the ch 8 there is gpu capabilities, and methods to use with frame work, wouldmlike to know more about that.
I would like to know more about the color/texture of inner part of the tube which is transparent. And I would like to know more why the inner color is different from its’ outer color.

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