Mtg 17/25: Mon-06-Nov-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

So what's your class in the midterm? Which one is more
completing? Now Good luck on that everyone
so I have to confess that I spent a long time trying to
provide a simple mistake and shader example I was doing for
you. So that kind of put me off on getting some other things
done. Anyway, so here we are meeting.
Sitting 17 of 25 Right I think so.
It's big for me and I was I was worried about getting out my
store steps that anyway. So no freezing rain. So we're just put
off again for another day or two. I hope. Freezing rain isn't
usually a wet sign of winter here. But it's as climate
changes then. You get stranger stranger. Events.
vertex and fragment shader examples
show you those examples that I'll talk about.
Following up today I asked this question on Stack Overflow about
this. So hopefully I got a response
so look at that today
That's chapter seven.
Let's talk about midterm exams on Wednesday.
Meeting 18.
When you say assignments is the response to the assignments or
the next assignments?
Well, I was I was gonna write some more then I heard you
talking so I thought I'd come over here the same question
so lots of assignment. to
It was a tough one.
Savor and say tough, too tough. Yes.
Okay, I just have this
Okay, so I'm gonna talk to the marker about when we can do
assignments three, four, and five. All right. So would you
have three Well, yeah. Not even half. Okay, I'll take in
consideration the two tough comment. Thank you so much. Much
appreciated. I hope to talk to him today. So.
Sir, noted there beside the too tough
I think you should write don't make it too tough. Because that
could be it could still be
Yep, that makes sense. Okay.
Yeah, I guess we should just go go home. Today. Just excuse me
for a minute please.
Hi, I totally prepared for the day I wanted to go okay. Well,
this afternoon we'll go one
data.
Supply
chain the percent so 1% for
30 days she sits next to me and you say I don't know what do
you.
Wear we use it what do you do for me? What do you think is
happening
because we didn't do it. I'm just gonna start the exam from
the back Okay, so here's our vertex shader example we had
last week.
She knows I don't know here's the fragment shader version
should you notice a difference
overnight or hence not so much
okay. So here
to there?
So I believe they're using the same JavaScript code but it's
difficult to get them.
To have the same viewing parameters
anyway, so what do you notice it's different between them?
The the this one has a diffused light which is basically the
other one has a more direct you know, central point base Okay,
let me show you the code for both.
Okay, so we're using shader Q dot j s here for the fragment
one we're using shader cube.js. I'm using the web version of
other libraries under the common
Okay, so that's not they're both using the same
so we both have the late position is that one in Zed?
direction. So that should be just in front
let's remove it a little bit. Here. To be. Point five and
five.
Can see this a little brighter now with the vertex shader right
so let's look at what happens with the fragment shader.
Okay, so the layout is the same so, just just changed the light
position in both of them. So the light is actually the same light
is the diffusion the lights
Yeah, so it's the same code so to light light the diffuse
component
so let's
go so we have a white light for the diffuse and for specular
let's maybe change the color of the specular highlight the light
for the specular component what color would you like to see?
Magenta okay I can do agenda
see magenta There
you go because it is okay let's change the color up and
let's make it a gray cube
so, all of the material is great but not quite full well. It's
full gray and be white. So this is a little bit less than white.
It's kind of anyway, it's 80% White. Okay, see if we can see
the agenda now.
Can you see magenta their eyes are playing tricks on me. Okay,
so what difference did we talk last week about in terms of
vertex and fragment shaders so when is each being called
so we call it vertex shader once per vertex, and we call the
fragment shader once per pixel
and so what did we talk about the difference between grow and
farm shading?
On shading to calculation Eggman
Yeah, so
started I took a picture this maybe I should just double check
mix
so for just doing the cooking the color computations in the
vertex shader. What are we getting? Out of? So we get a
vertex color which the fragment shader can interpolate but it
can't it's not doing any more calculations.
Okay so that that means if the light isn't above one of the
vertices we're not going to see a bright highlight
why about fragment shaders
so we're calculating colors based on interpolating.
Information
from the vertices
right so if we determine the light, the light vector the
viewer position so in the vertex shader, we get the information
about where the layout is, where the viewer is, and where the
vertex is. We can calculate those three vectors. So the
normal for the surface pardon me so we calculate that in our
JavaScript actually pass it as an attribute to the vertex
shader. So we access that and calculate the late vector as a
different difference between the light position on the vertex and
the viewer vector. Difference between the viewer position and
the vertex and we do that in world coordinate space using the
modelview matrix. So if we have those three vectors then we can
we have this information then we can do the calculation to work
with you and I can't wait. Sorry. My bad
so this is the information we're going to send from the vertex
shader to the fragment shader. So based on that we can get we
can calculate the intermediate highlights or the highlights
that occur not at the vertices. Does that make sense?
So let me I'll show you the corrected version, but I'll tell
you what mistake I made and I couldn't see maybe you can guess
what I did.
Okay, so vertex fragment shader, we're just doing fragment color
is based on vertex color which gets interpolated between the
values by the vertex shader.
So in our shader, so we have an input is a for for vector for
position. So it's x y Zed w. And we have the three vector three
dimensional vector for the normal. And then we're
specifying the vertex color as an output from the shader. So
those are the in and out declarations and then we have
uniform values, things that don't change between vertices.
So these are all things that are calculated in our JavaScript
model view and the projection matrix are matrices pardon me
and if your position and the late position
so the first one is to make the normal vector into a four
dimensional vector by adding zero in the W position. So then
we transform it to the model to our world coordinate space and
we just take the x, y and z components of it. And then the
position is, so this is the vertex.
We do the same thing. transform it to world coordinates. And
take the take X, Y and Zed components and the light vector
and normalize it and we get L so those are the two of the three
that we're interested in your position x, y Zed of view, take
the x y Zed components of the viewer vector
viewer position pardon me. And then we this is the calculation
that saves us some time. That's why it's called the blend blend
Phong shading our reflection model and then we're doing
product so we compute the Ambien component
we're actually doing the computation here. We've done it
in the JavaScript server, we're just and it's a uniform value.
So that's just what's been computed.
So here for the diffuse color. We're calculating a constant
here based on the angle between the late vector and the normal
vector. So it's the K D is going to be the highest value when
they're aligned so as the noonday sun so to speak. Does
that make sense? And then specular.
So we're doing a power based on the angle between the normal and
the half halfway vector and we're raising that so it might
be zero if bless you.
So we're really going to have a specular component if if the
angles less than 90 degrees.
So we added the three components together to get together to get
the root text color. And we determine the position of the
vertex in our clip coordinates after doing the projection
matrix. So we have calculated Vertex Color and we've set the
position of the point using the GL position variable.
And then the fragment shader is just doing a pass through so
just as the interpolation of intensities from the vertices in
the triangle so that makes sense.
Okay, so in the fragment version, we're going to
calculate the we're going to take as input the position of
the vertex and the normal at the vertex. And we're going to
output nl And B is three dimensional vectors.
And we have matrices is that as uniform pieces, and a Layton
viewer position that we're going to access here so we do the same
computations.
Okay, so we're getting just those three bits of information,
the normal vector at the vertex, the lighting vector at the
vertex and the normal vector at the vertex
and then we're doing we're deferring the calculation to to
the shader to the fragment shader. So we say input was
three vectors, and we're going to output the fragment color. So
you can see that the computations are very similar.
So now what was the mistake I made? What happens if I do this
what does that do?
Vector four.
So here I'm declaring vectors NLV and again here, oh, you have
to find them. And
so the effective mice, the version I was puzzling over was
that I created local variables and the error message was
couldn't find the attribute and couldn't find this attribute.
No, not that attribute. This one could find the position vector
okay. Not Not this one, because what happens then, if I declared
a local copy?
So I have a local copy that I'm working with here. And so this
is the only place that a marble is used. So what happens is the
compiler optimizes the the way.
So I was looking, I understood that this might have I
understood the issue, but I didn't understand the symptom or
the cause that I had created here. So someone pointed out
that I I didn't verbally created local copies of the variables.
Say when ever had that happen? We've done programming Okay, so
let me be a cautionary tale to you. I'll put a link to my
StackOverflow question.
candled save
Okay.
Start again here on writing large at the top of the board
Okay, so before we do you understand the difference
between those two? The two shaders fragment vertex shaders
with the cue says nothing about nothing about the light position
or the quality of the light is the same information. But it's
just interpreting us differently. So instead of doing
one calculation of the vertices, we're doing a calculation of
interpolated vectors. Along get converted into pixel level Okay.
You get more complex appearances. Does that make
sense? Should have something more complicated in our images
that are generated without sacrificing too much? Processing
Time and complexity?
So what are some ways you can
what are some ways you're familiar with or you might think
of, maybe up to the task of adding some complex visual
complexity without adding computational complexity. Or
data complexity?
That's just what I said. It's easier to read a fight no
unsaid.
Anyway, any ideas about how we can do that?
Well plants
Okay, and how can we do that?
can do something called bump mapping
remember getting normals for the cube so, what if we didn't give
the real normals of the cube
What if we perturb them what do we still have something that
looks
Awesome? So, we can use an image for that as well
okay. So we might use an image two as a basis for modifying
vectors on the surface or we might just map an image onto a
model maybe I'll just show some examples of that.
See if I can get them to cooperate.
This may be a little hard to see is the images changing a little
bit?
Okay, so let me show you the other one and then we can look
at the code a bit.
clearly haven't got the trackpad set up properly because I keep
getting these menus
so, the idea there as you can see that it's just a it's a
square. It's not a it's not a relief map of Honolulu.
Okay,
swear so similarly we have
well
so, we have something new here we have an input of a texture
coordinate attribute and then it was on as well as the position
of the vertex.
So, we're going to output the light vector and the view vector
and texture space coordinates.
And then we'll get into the math a bit more in detail and so
so we're getting
our country vectors of light and using vector in texture space
So then here's another. So we have the texture coordinate from
the Vert. So we have Ellen v. And the texture coordinates.
Then we have a these are related to textures the sampler 2d is a
shader. This is part of the shader GLSL graphics library
Shading Language
so the fragment color is based on
was determined by the diffuse portion here.
Recruiting it is recruiting a texture of 256 by 256 and then
we're
printing preparing them just a little bit here.
mixing this up and before we talk to you again about it
I wanted to show you a couple other examples
so yeah, so that's we're setting up the normals to be different.
In that first example, the first one was just putting the square
in and the second one, the other one was including some more data
about well the hot Honolulu Harbor I think this one is
you're taking an image and pasting it onto the sides of a
cube
you have to take into consideration the description of
the images and the size and I see a gap but that cap is more
every inch
Yeah, that's I think that's
I'm not sure that's caused by the the image or
for the image
so let's look at the image that we're mapping onto here.
So it's 256 by 256.
Let me see if we can put a different image in here.
This is once more.
Me see if we can put a different image on see if we have the same
issue
So I've I feel like maybe that's an artifact of the image colors
it's
so you can see this is really current 2011.
So what happens if we want to map an image onto a sphere?
Here's an answer
so it looks okay in some spots
not great. And some other ones.
Looks like a face with a pair of eyes anyway
so I just kind of alluded to these idea of texture
coordinates
so we have a texture that's in two dimensions whether it's a
square or something more
rendition of the Tiger
so the idea is how do we make the transition between these
textures and the three dimensional objects
so it's one thing to do that. Another thing to have a strange
shape strange shape as a sphere
so we have this issue when we try and make maps from the globe
and we have to decide how we're going to do the projection. So
that's similar issue here. How do we assign coordinates are
going to last to transfer the image onto the object sometimes
straightforward like the cube root, if we have a square image
and pretty much a cube that's easy to do. Now there's other
times it's a little more complicated so we'll talk about
that next day
let's see all right
let's talk about the Wednesday. Any questions for ago
did I spend too much time on the vertex and fragment shaders
next Okay, anyway thanks again for today. Have a great day and
we'll see you Wednesday thanks
thanks
the process of
the process of

Responses

What important concept or perspective did you encounter today?

learned about vertex and fragment shaders

Was there anything today that was difficult to understand?

I think applying texture (specific image with square shape) to a sphere is quite difficult, but I think applying to a tube is visually appealing.

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