Mtg 17/23: Wed-13-Nov-2024

Outline for Today

Texture Mapping

Administration

Today

  • midterm exam grades posted and the marked exams will be available on gradescope later today (you will receive an email)
  • Assignment 2 marks posted
  • Assignments 3 and 4 now available on UR Courses
  • 2 opportunities to give me feedback are open until 23:59 today
  • Chapter 7 code samples

For Next Meeting

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

  • That good. Hey, I
  • I didn't charge over the weekend,
  • so I'll see what that will help to plug in. I'll just stand
  • right here for the whole time I
  • may then get a few minutes worth of charge.
  • So have you found your midterm marks online? I
  • so I've adjusted them
  • so it's out of 15, so the lowest marks are between 7.5 and 15.
  • Does that make sense?
  • So what you'll get from grade scope will be a mark out of 77
  • and
  • I've done some adjustment from the grade, from the exam and
  • grade scope to your courses, acknowledging the fact that it
  • may have been a bit long. Who agrees with that statement? It
  • was too long.
  • Yeah. Well,
  • so I want everyone to not I don't want anyone to be
  • discouraged by the exam, but it's it's meant to be formative
  • feedback for You, and if you do better on the
  • final I will wave the final more heavily towards Your final
  • grade.
  • Any questions or concerns about that I
  • so also Simon
  • two has been created and marks release, and
  • I have assignments three and four posted as well. So the idea
  • is you'll build on the code from assignment Two. We'll talk about
  • that In just a second. I
  • so a reminder that there are two opportunities for feedback
  • to me about the mentoring plan and about me
  • that are going to close at midnight, one minute to midnight
  • tonight. So if you want to give your input, that would be much
  • appreciated. The one about the midterm exam, I'll count out
  • words of participation so it's not the feedback is anonymous,
  • But the forward evaluation of the class is anonymous.
  • Okay?
  • And thanks to the people who pointed out I had not had last
  • week's dates on the quiz,
  • so I hope everyone had A chance to complete it.
  • Okay, let's see whether I have enough battery
  • to last.
  • Oh, it says less than an hour. So,
  • okay, so,
  • based on the midterm I was, I've been thinking about assignments,
  • so I want to focus on the things that we've been doing.
  • So fly by this will give you some practice With specifying
  • camera coordinates and
  • so I'm asking for
  • A two things in terms of Flying Wild, smoking And
  • I will make,
  • I will prepare a version of assignment two code for
  • for those who have a chance To do
  • assignment reviews,
  • they've Got a starting point for
  • so fly by in two ways.
  • One, all the line, so
  • let's say we have
  • Looking at the plot of our assignment two and
  • this is the one that's a lid that opens,
  • but we might have
  • some other objects the
  • then we can specify a line.
  • Let's add
  • a reasonable height so We don't
  • hit The boxes and
  • so you
  • might say, here's The camera, and let's look at just a little
  • bit ahead of us, or
  • maybe look at 45 degrees
  • in front of us. Then as we step along the line, we're changing
  • the lookout point
  • so we'll see this
  • box first, And then this one and Then the Third One. The
  • Okay, does that make sense? So the look at point, it's fixed in
  • relation to the eye point. And as we move along the line,
  • removing the eye point, so that the look at point,
  • you can feel kind of imagine the piece of chalk pointing to The
  • place where we're looking.
  • Does that make sense? Do
  • This is the first way,
  • second way travel along. I
  • kind of along A circular, circular spiral and
  • so this time,
  • We're going to always look at the middle and
  • So we start out at
  • a point here and
  • and all the time we're looking at the middle.
  • So maybe that's enough. So do two rotations,
  • and at the starting point,
  • just a different height.
  • Does that make sense?
  • So it should spiral upwards,
  • not outwards. But should you be moving further away, like as
  • you're rotating around or just moving up? I
  • I was thinking of just moving up or down if you want to have an
  • option To fly closer, further away. You can do that. You
  • So that's assignment three and
  • so For fly by option one,
  • move The leg with The camera and
  • so the length can be stationary when we're going In the spiral.
  • So I do
  • I use the Same material and
  • same material For the whole scene And
  • so does that make sense? What I'm asking?
  • Okay,
  • so I think we can be flexible on the due dates.
  • I've said Monday the 25th for the for assignment Three and
  • Friday, December 6 for assignment four. You
  • I would say Friday, December 6. We don't want to make it later
  • than that. But if you wanted some flexibility to submit
  • assignment three later or closer to December 6, that would be
  • fine. Does that make sense? Does that seem like a good idea?
  • So I don't want to discourage you from the I'm submitting
  • assignment three on the 25th
  • but if you need some flexibility, I think we can
  • provide it. Does that seem okay? I
  • Okay, I
  • so let's take a look At the shaded cube.
  • Example,
  • chapter six and
  • so just
  • so Let's look at the shaders first and
  • so we have in we get the position of the vertices through
  • a position which we're connecting to our buffer in the
  • JavaScript,
  • then we're also getting a normal vector, not a single normal
  • vector, but a vertex attribute. So we get normal associated with
  • the vertex and then we have a vertex color that's passed on to
  • the fragment shader. So then we have uniform variables. So we
  • have the ambient product, the diffuse product and the specular
  • product. So these are the different contributions in our
  • lighting model. So ambient is just background light.
  • Diffuse
  • is the
  • light that gets scattered,
  • in general, and then the specular is when we're dealing
  • with a shiny surface, and we're close to the reflected ray of
  • the light, then we'll see a specular highlight.
  • So we have those terms to
  • configure into our computation, then we have the wall view
  • Matrix, projection matrix, light position and a shininess
  • coefficient and
  • B, so we compute the position,
  • so we get X, Y and Z of the position. That's what this
  • operator does at the end here, and we're changing the sign.
  • Then we get our fixed light position
  • that comes from the uniform of the JavaScript.
  • So we get
  • a vector l, which we normalize, is a difference between the
  • light and position, and
  • the i
  • vector is normalized minus pause and H, the half wave vector, The
  • half vector.
  • So we normalize L plus E.
  • Then
  • we take
  • the normal X, Y, Z,
  • and we add
  • a zero for w, and it's zero because It's a vector.
  • So we transform normal n of two I coordinates and
  • we compute our
  • illumination equation. We have ambient
  • and the diffuse and specular and
  • so we're testing here.
  • If the angle is greater than 90, we're not going to have
  • a color for specular.
  • Then the position
  • we take our vertex attribute multiply by our wall of V
  • matrix, then our projection matrix and our V color becomes
  • sum of ambient, diffuse and specular, and then we set so
  • that's three terms, and the Alpha we set to one. So that's
  • doing
  • the modified
  • the blin Fong using the
  • blin Fong model,
  • and then in the fragment shader, we're just passing through the
  • vertex color to the fragment color.
  • So we're getting the computation at the vertices with the
  • normals, and then we're interpolating the intensity
  • across,
  • in to the Vertice, to the fragments between the vertices.
  • We're just interpolating the intensities so we're not we're
  • we're not recomputing the lighting for every fragment.
  • So what
  • kind of shading is This?
  • No, it's not flat. I
  • There are two kinds,
  • anyone like a vowel or whatever It's called,
  • yes,
  • grow
  • and who's the other one? I've mentioned him already.
  • Yeah,
  • so in the row we're calculating, doing the calculation the
  • vertices and then interpolating the intensities of Quang
  • shading. We're interpolating the vector so we have, we can do the
  • full computation for each fragment. For
  • we're still doing an approximation to the normals,
  • but we it's a better approximation than we're Getting
  • with the Grow shading. Does that make sense? I
  • so we in our JavaScript, we have vertices for the cue, plate,
  • position, ambient, diffuse, specular, light parameters and
  • then we have the material specified in terms of ambient,
  • diffuse, specular and China's and
  • so we're computing the normal vectors For the triangles here,
  • so we get t1 is t,
  • is vertex B
  • and A and
  • vertex C and B And
  • anyway, he has strange ways of organizing parameters. Sometimes
  • these function calls, so we get two vectors based on the edges
  • of the triangle, and then the normal vector is the cross
  • product. We
  • so we push
  • the normal to our normal brain And so
  • he's assigning the same normal to the squad. So it's making the
  • assumption that it's flat, which may not be the case.
  • So we get the color cube.
  • So here's the new stuff with
  • the normal array.
  • Here we're doing three bytes or three values per normal vector.
  • We're
  • so we're doing the multiplication. Take the ambient
  • light, and we multiply it by the materials, ambient properties,
  • and the diffuse product is the diffuse light times the material
  • property diffuse properties of the material and the specular
  • product is the specular specular light times the specular
  • properties of the material.
  • Then we set the ambient, we set uniforms. We need a key here,
  • and
  • we flatten the matrix
  • pass associated with The projection matrix uniform in the
  • vertex shader, and we're
  • and we're changing the model V matrix based on The rotation
  • that we set. Does
  • that make sense? I
  • I wanted To
  • tell COVID.
  • So I thought maybe we could start by looking at some code
  • samples from chapter seven. I
  • so what is the purpose of texture mapping? Let's start
  • with that Question. I
  • any thoughts i
  • What if you want to capture
  • the details,
  • the feeling of a chalkboard that has that's been written on a Few
  • times and erased The
  • so we might take a picture, a picture of the board
  • that captures the
  • swirls of the eraser,
  • and We might map that on
  • to
  • polygon
  • for our small
  • that's going to represent the blackboard In our ball.
  • So we may do environment Mapping. I
  • So An environment man, I it
  • has anyone seen Terminator two? That was when the
  • first exam was on, because the robot
  • was sent to kill a Schwarzenegger. This robot,
  • there's a new version who can become liquid metal. So that's a
  • shiny blob. So then the details of the environment are visible
  • in that computer generated object.
  • So there is
  • a sense that we have involved
  • the environment that gets
  • mapped on to the the surface of the object. And then there's
  • also what's happening. And
  • so the idea is we can add complexity to
  • a smooth, polygonal surface
  • if we perturb the normal vectors and
  • is so instead of the normal vector being normal, we can
  • change the direction of the normal vectors and thereby
  • create the impression of a more complex surface and the idea is
  • that we're going to Get more complexity in the image in
  • inexpensive ways. And
  • so here's a Simple bump Mapping
  • example. I
  • so
  • we're creating a texture,
  • 256, So then we have the bump data to
  • it's basically creating a
  • two by two array, 256 by 256, of zeros and ones that correspond
  • to that shape.
  • If you can see the Can you see the inset
  • square?
  • So then we set the normals based on the data.
  • Then we have the idea of texture coordinates, which is going to
  • describe
  • how to
  • map the texture that we have the image that we want to paste onto
  • the model. How the texture gets mapped on to the surface. I
  • so we configure the texture, we pass the image, create a
  • texture, and we're
  • going to say it's active, the texture zero is active, and
  • we're going to make a texture imaged. So for the
  • mesh, we're putting the vertices as well as the texture
  • coordinates and
  • so here We have a texture coordinates array and we
  • have an attribute variable in the sheet that's connected to
  • the shader for The texture coordinates.
  • Then we have all the same uniform set up and
  • so the Configure texture normals, So we're passing
  • normals, and
  • we Set up here.
  • U n8
  • array and
  • so what is that? What is the effect of this?
  • So you end
  • eight array is an array of unsigned integers. So
  • eight bits,
  • 256, values, 255, character.
  • So yeah,
  • I don't know that they have
  • unsigned character. I
  • Yeah, it's one byte, eight bits. So we're allocating three bytes
  • for each point in the texture. So it's
  • we're creating, we're going to pass the normals
  • into
  • the Configure and
  • so the parameter in for the function configure
  • texture is an image.
  • So this is a line where we're converting the image into a
  • texture and
  • the generated bitmap. That's idea of having different
  • resolutions of the texture.
  • So we can choose the one that's more most appropriate for the
  • application. Let's go ahead
  • and see what
  • can you See The Light moving A little bit? I
  • me. So we had the impression of death because of the way that
  • the way that set up. So now, if we
  • change the light position, you
  • so first blush, that doesn't seem like a flat
  • surface, doesn't I
  • so here we're loading an image.
  • We're pasting it on to the queue. Let's
  • Take a quick look at this code. Hello.
  • So here we're passing.
  • So we're taking input of
  • the bay position,
  • which is x, y, z and w,
  • a color, which is RGBA, and text coordinate, which is s and t.
  • So it's two dimensional. The image is 2d so we're just
  • specifying coordinates and the image to
  • cube.
  • So you're doing rotation and we're saying texture coordinates
  • based on but we're doing a similar pass through we're doing
  • we're assigning
  • V color, the value of a color and assigning V tech quart,
  • value of A tech quart.
  • So then we have input
  • of the vertex color
  • and the texture coordinate,
  • then we have a sampler that
  • makes association between the texture map and the texture
  • coordinate,
  • so the fragrance color is texture is accessing the
  • texture, universal texture, uniform, texture map, texture
  • coordinate. Does that make sense? You?
  • Set up the image and
  • so here's Some of the image is loaded from H to ml so
  • right? So that's where the image is located. The
  • so when we're initializing or configuring the texture with the
  • image. Then the last line is the
  • tech texture map,
  • mutex map we're looking to our shading To
  • it seems to be a typo. Here
  • you text you tech map. Here you text your map in the
  • code, in the HTML, you
  • so I suspect it's doing some good defaults. I'll check on
  • that.
  • Report back.
  • Okay, we're out of time today. Any questions or concerns before
  • we say goodbye? I
  • it? No, I'm gonna, I just have to draft an email so it'll be
  • sent shortly. I
  • Okay, thank you for today. Have a great Wednesday and a good
  • weekend, and I'll see you on Monday.

Responses

What important concept or perspective did you encounter today?

  • Digital image representation seemed like an important topic
  • Today I learned about the importance of texture mapping. It allows for cool abd realistic effects when line shines on an object.
  • Different types of mapping to make the surface look more comlex than it actually is. Types we encountred were bump, texture, and environement mapping.
  • Texture mapping!
  • Assignment3,4 and Gouraud and phone Shading and Texture Mapping
  • Bump mapping essentially is perturbing the normal vector of a surface to be rendered
  • More samplw codes for textures
  • The concept of texture mapping provides a way to add rich surface details to 3D objects, achieving a sense of complexity that would be difficult to model directly. Environment mapping captures surrounding environmental details to simulate reflections, while bump mapping adds perceived depth and texture to surfaces.
  • learn assignment 3, 4 and bump mapping
  • the type of shading, flat, Gouraud shading and phong shading

Was there anything today that was difficult to understand?

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

      Site built: 2024-12-12 00:01 -0600  •  Give feedback about page