Mtg 19/25: Mon-13-Nov-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

Okay
I was I was just behind you when we came out of that research
presentation.
Oh, yeah.
I was in the presentation. Yeah,
I understood what you think
it was. It was good to the dogs and the comprehensiveness of the
topic. It was really like, complete in their mind. That's
what I think.
So reminds me of
back in the 60s there, chose Joseph Weizenbaum at MIT
and the program Eliza and Dr. Was just simulated, which gave
people prompts as a therapist might. And then people would
would tell the computer things that they wouldn't tell anybody
else
treating them dead pretty crazy which like conceding them they
friend like not sharing with someone else but with the
computer Yeah,
maybe. Anyway. So the experience of the people using that
program, convinced reasonbable to stop his work in AI it's more
subtle than that. But these issues have been around for a
long time and she was talking about people wanting to get
advice. Morning.
Okay, so we have including today we have six meetings.
So today let's talk about assignments. And.
Do some more texture mapping
then
morning
so the last two meetings
so, Karen had sent a link to an example he thought was
interesting with a cue
on the Apple logo. So we'll talk about that and some other things
that are of interest.
And then if you have questions, we'll incorporate the questions
in the review.
So we'll just we'll have focused on chapters one through nine
that seem okay okay.
Put this down so I don't
start writing behind on screen
Did you see assignment three
I thought I had everything turned on but the links on your
courses worried act so I think I've done that now.
Hi good morning
So my game ending an I gave you a link for inspiration
for assignment three but
that that may be a little bit more work than you need to get
through that example because it's using a different library
and setting things up different
So.
Just thought we'd take a minute to go through that
maybe we can even do an example.
Any comments for me
okay so I did say before, while I have this screen on that I'm
not showing to you
so I said we talked about assignments and I give me some
choice
so, I can be a bit flexible if you need
a bit more time with this one.
I think that can be arranged.
Fourth and fifth ones
are due on the
12th of December. You can submit them earlier but I did the
trials because the 13th is the final exam. So this will help
you in your preparation right. So I just I'll just make sure
that I have things set up
No
I was connected here you are courses and center responding so
I will fix that later.
I'm just deciding what to start with
Trouble with clicking and dragging.
Let's try that
okay, sorry for that pick up Okay, so how do you avoid it?
How can we? What's the strategy to a straightforward strategy to
get? Two cubes display at the same time
excuse me for a minute please?
To do this
any ideas about
so what are we doing to set up one display
viewport? Well, we create a canvas and then we get a Web GL
to context for the candidates. And then we compile the program
and so we're always dealing with or we're dealing with the
context that we get from the guy we associated with the canvas so
what if we just have two canvases? You just You think
I'm sorry. Can you repeat that? Can you repeat what you said? We
get really used to volcanoes Well, I don't. So what I'm
asking isn't to have a button to switch between them. But to draw
into them at the same time?
Let's make this a little simpler.
Sorry.
Let's use a descriptive name one shall count as one.
You have to do some work okay but so an HTML file we've
created two canvases.
Okay so we should be able to see a picture by the screen now
didn't catch all the I didn't check all the references for
Canvas
okay so I think that'll fix it
okay let's go back to the editor then. So what do we need to do?
To?
So if you want to
you want to draw on two canvases
so then we need to change the graphic GL the context for the
WebGL to that we get from the canvas. We want to associate
that with distinguish it from the first one the second one
okay. So
Still got things sorted here.
Change declaration
Okay, what color should you make the other Canvas
can you give me three numbers between zero and one?
point five?
So many guests that color is
maybe something like yeah
kind of a muted purple and magenta
that makes sense. So then the other part is we can then give
our shaders different names I don't want to spend more time
with you seeing watching me fumble on the keyboard
so let me create a program. We're doing a shader, the vertex
shader and the fragment shader so we can name those
differently. So our sample will have four two for each. And then
and then we can just apply the
rest I think is straightforward. You agree if you have questions
let me know.
seem alright for now. Okay.
So I've I have a fixed version of that.
I'll update to the assignment
so anyway, oh update the link for you to this version that
displays the figure
so this gives a way to manipulate the remodeling a
figure.
So you can see
we can control different aspects I don't try this at home
so basically the assignment four and five as they're together
they're working on this this piece of code, take this code
and
address some of the interface issues but then first to texture
and light the model that's one part and the second part is to
animate the figure.
So here's a simple alert.
It's a robotic arm that's gone crazy. Anyway, so that gives you
an idea of and I'll put the link I'll update the link for this
one too.
Okay, does that make sense?
All right, so as I mentioned, so the front flip assignment three
with the two canvases. That's a 24th that's the target if that's
comes in issue for somebody. We can have a bit of flexibility
there. Then, the last bit figure that was December 12, because
your final exam was on the 13th
and we a month from today
okay, so our last meeting I think is on the fifth well maybe
not. Maybe it's the fourth of December.
Anyway, we have six meetings left. I wrote it down. Post a
picture of the board afterwards
okay.
I want to show you a texture more complete texture mapping
sample
Okay, so that's so there's two textures here. The one is the
checkerboard and the other one is this the sign pattern
can you say so let's take a peek at the vertex shader.
So we're getting our vertex position, a vertex color and a
text texture coordinate. So these are all vertex attributes
here and we're putting out a vertex color and a vertex type
chord and we have a uniform for the angle of rotation.
So here, we're doing the rotation, rotation computation
inside the shader. We're just passing through the color and
the texture coordinate but the position is going to be
multiplying by the rotation matrices
in the fragment shader repeating the color, the texture
coordinates or printing out the fragment color and then the
uniform sampler 2d as well about sampling the textures
so we're gonna pass are different textures as uniforms
and they're going to be sampler 2d. So that means we're going to
sample the texture, the two dimensional texture
so these are shader GLSL commands
so we're solving the two textures and using that to
modulate the color and we get the fragment color out
so we're doing going to positions relate to the drawing
so we're going to draw 36 triangles because there's six
faces aren't we we're not drawing 36 triangles for drawing
12 triangles but the each so we need 36 vertices to specify
them.
Okay
so our texture is going to be 256 by 256 Restoring four bytes
for each element of the texture we're doing that for
for both textures.
So here we're setting up the image contents
I'm just thinking that it's not this could be written a little
bit more clearly. I've just
anything you want to comment about
anyway, so we're setting up the textures. So the type checker
squares, we're doing the image and then we're doing a checkers
in each direction
let's change it for the heck of it. Let's make it 10 No, let's
make it over. To you.
Thank you for and staff
right so we're creating textures buying the textures like we did
with the buffers.
Then we're working on texture one start with
this is setting up
for the for the display of the texture and then we create the
image for the second texture
and then do the same kind of thing. We set up the parameters
and create the texture
so we have then texture one and texture two which are available
to us to use for text for for the shader.
So here in our program we have the color buffer and vertex
buffer and then the texture buffer. So the texture
coordinates are pretty straightforward to just zero to
one zero to one.
And then here's here's a recall to configure textures the code
to configure the textures
and then we make the textures zero so we can
so we make one texture active and set that up
we associate the settings we've set up earlier in the Configure
texture routine.
So in our program we're dinners we're associating you tech zero
so I say Tech because I'm used to saying tech and Latech anyone
use Latech? Who says latex for that program?
No, that's I heard a voice. I didn't I wasn't misled.
Exploiting? Yeah. No, I thought somebody else had some other
comment. Anyway
so the etiquette is to say is pronounced as tech and Latech.
So that's why I'm saying tech urine stuff tax anyway that's an
aside so we're
so we're binding the textures
here and then we're setting the uniform really saying the
location
so then we can reference that texture.
So let's change this just a little bit by.
So in the fragment shader, we're just using one texture
so my performance wasn't the best today I guess.
It was in this anyway
is this helpful to go through these examples? Okay. So, as I
said, we'll talk about chapters eight and nine and the next
three meetings and then we'll leave our last week for
examples. If you'd like to discuss and some review for the
final
Okay. All right. Thank you very much for today. Have a great
day, everyone. We'll see you on Wednesday.
You're welcome.
You're welcome.

Responses

What important concept or perspective did you encounter today?

The most important thing that I learned is that about the assignment 3, 4 and 5. and also I learned about how to display two canvas within a one single canvas.
is how to get both the cubes disaplayed at same time
I learned how to display two canvas at the same time and also learned about the assignments sample code

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

Adding texture to shapes like different edges of a square is something i would like to know more and be able to adjust it.

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