Mtg 20/25: Wed-15-Nov-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

  • Okay, so we're at meeting 20 of 25. Yes, time flies when you're
  • having fun right yesterday
  • so I've done some updating on the website.
  • So when we create a web GL to context we get a frame buffer
  • but we can declare additional lengths or use additional lens
  • to do different things, so I thought I would take a look at a
  • few examples from Chapter Eight
  • Good morning
  • so you can make use of additional frame buffers to
  • create
  • interesting effects
  • so the memory for the frame buffers and the textures these
  • are on the GPU.
  • Morning
  • So maybe let's start looking at some things I'm gonna do start
  • with an interesting example. I think
  • so another thing
  • morning
  • so we'll look at look at a few examples. That illustrate these
  • different things.
  • So I look interesting
  • Okay, so
  • J I can still see it
  • okay
  • so let's look at the code so we have two shader, two sets of
  • shaders and lead program. Pardon me. We have two sets of shaders
  • are going to have two programs that are going to switch between
  • them.
  • So the first vertex shader takes a two dimensional position which
  • is an attribute of vertex attributes. So we're going to
  • get a position in 2d and then put it into 3d homogeneous
  • coordinates. So we have a four four dimensional or a four bit
  • for Apple or for vector x y Zed w. And then we're passing a pass
  • through for the texture coordinate. That's one shader
  • vertex shader and the other vertex shader is setting the
  • point size based on the uniform that's passed, and then we're
  • doing the same with a position
  • fragment shader one is taking
  • texture coordinate from
  • first vertex shader
  • and then creating a fragment color based on texture mapping.
  • So we're going to supply it with a texture map in 2d and we're
  • going to sample and then we have a couple other parameters and
  • we're going to apply use those in determining the fragment
  • color now the second fragment shader is just a pass through
  • it's not actually passing through. We're setting the color
  • in our Java Script. And we're assigning that to the fragment
  • color does that make sense generally.
  • Karen said seem
  • I missed the last point.
  • So we're talking about two sets of shaders. The first fragment
  • shaders during the texture mapping based on the vertex
  • extra coordinates and then we're using the texture function in
  • GLSL. To determine the fragment color, and then the fragment
  • shader to we're taking the color from a uniform that's passed in
  • our JavaScript and we're using that to set the fragment color
  • so with that, yes CMRA.
  • Okay, so we're setting up
  • or making a texture size of 1024 and 24 by 1024 texture
  • coordinates golf between zero and one or vertices. So r
  • squared is minus one minus one, two plus one plus one. You have
  • to frag two programs. Two textures one frame buffer we're
  • going to use
  • so the first few lines are as we would expect them to be
  • so these are referencing texture registers on the GPU. So you can
  • query your own setup to see what your capability is for my
  • computer there are 16 vertex 16 threads.
  • Extra registers
  • so we go from zero to 31 so we can start with zero and
  • these turn out into an index so he can do textures zero plus I
  • for example, select different textures
  • so, the main texture one creating texture one and
  • assigning it to texture zero. I think it would be more
  • straightforward to call this texture zero but I'm strange
  • that way I guess so, we're going to create the first texture
  • and finding the texture so we're going to be working with texture
  • one to start with
  • so then we're talking about data the RGB a format so for use for
  • each element of the array, so text size, so 1024 by 1024.
  • And then we're setting different parameters for the texture or
  • texture to D can use.
  • Filters for magnifying and minifying. And then, this is
  • this talks about how we can wrap the texture. So here we're
  • clapping to the edge so stretches we're ending right on
  • the edges will do you could do a repeat and there's another
  • option as well.
  • Gmail dot text image today we are taking RGB values twice in
  • that was the second time and it's both of them are the exact
  • same
  • yeah
  • let me consult the manual page for that.
  • So we have a target. So, texture, texture 2d level zero
  • internal format it's RGBA with a border format. So that is why it
  • appears again. And then the internal the type is unsigned
  • byte. And we're not passing data to it at this point. So pixels
  • are null.
  • So the level talks about mipmaps and we haven't mentioned that
  • really so the idea of providing texture images. So we're going
  • to create a hierarchy of levels. So level zero is the base so
  • that's 1024 by 1024. And level one would be a 512 by 512 256 or
  • creating a range of resolutions to with the goal of improving
  • the quality of the texture mapping
  • Okay, so.
  • We're setting up texture one with these parameters and then
  • we're setting up texture to with the same parameters.
  • So we're going so we're binding so when we're talking about a
  • texture 2d we're binding it to this one. So that's what we're
  • working on. Here, we're specifying that again, and then
  • we're creating the two programs. Vertex one shader fragment one
  • shader. fragment shader one. program two has vertex shader to
  • fragment shader two and then we're creating a frame buffer
  • now the framebuffer texture 2d We're setting up
  • genetic color or attaching
  • me like a straw. Man feature and best
  • Yeah, so we're using
  • so we're saying what we're going to do with texture two, in this
  • case is attach it or use it to modify the color values in the
  • frame buffer. So we're doing a status check to make sure the
  • frame buffer is complete. There weren't any problems
  • I didn't looking at his code, the author's code here
  • I will work on a better version for you to look at.
  • So the number of points we're dealing with is 1000.
  • So this is Creating.
  • So I'm gonna say that this is adding to the vertices surging
  • for plus I make sure we're not overriding these initial values
  • and then we're creating so in these extra positions, we're
  • assigning points randomly
  • within the
  • within the space range of minus one to plus one.
  • Okay, so buffer we're going to create a buffer so many use
  • program to pass
  • a color, the point size and the color
  • so this color is a bluish one
  • we're going to use program one and we're
  • binding to create a buffer here. We're binding it.
  • Now we're setting up the size of the data.
  • So let's check the math here.
  • So we had four vertices.
  • Okay, so if there are four vertices
  • they each have to VAT two values x and y.
  • Snap makes eight and if there
  • math seem right
  • so 64 would mean we have eight bytes per values which seems to
  • be.
  • So I have to check this by the 64 here and 32 here
  • could be a typo Should we try changing that
  • So, the rest of it makes sense because we're doing eight times
  • number of points
  • to float values four bytes each.
  • Okay we'll go through the rest of it. First.
  • They may be putting
  • the two sets of data together that's fine
  • looks like they're doing
  • because when you set the position or the attributes
  • we're doing
  • during the same buffer
  • know it's different offsets
  • So when it comes to rendering
  • so we're going to switch between programs. So here's program one.
  • And we're going to bind our frame buffer to the one we've
  • created with a texture you were going to switch between texture
  • one and texture two.
  • Now we're going to use program
  • we're going to.
  • Switching between so using program to set the attribute,
  • location and then send it to color which is red and green so
  • that's yellow
  • and we're drawing the points
  • switching colors so drawing half the points and switching colors
  • and then we're switching to using program one regenerating
  • the map for texture
  • This is still in there rendering or running program and we're
  • changing the values
  • minds
  • are swapping the textures and we're getting a new frame to
  • render
  • I apologize I got thrown by that putting two two sets of data in
  • one array
  • just correcting a mistake there it looks like referencing the
  • variable you texture here
  • in the shader is texture map.
  • Change the day of scale and texture
  • okay
  • I apologize for the slow pace today. So I'm trying to make
  • sense of they're not very readable code. I thought I had
  • it figured out but then. Anyway, the buffer mask sidetrack me a
  • little bit. Anyway, I'm going to create a better version of this
  • and I'll post it online. I'll let you know when I've gotten a
  • better version available. So let me show a couple other examples
  • so this one is doing some image processing.
  • So here was the vertex shaders passing through the vertex, the
  • texture coordinates we're getting the position as soon as
  • position is an X and Y then we're adding Zed and W for GL
  • position and then we're taking the texture coordinate from the
  • vertex or creating a fragment color the idea here is we're
  • doing some edge enhancement.
  • Here's the image data
  • you're using
  • This is not illustrating frame buffers as much as it is
  • textures and processing in GPU
  • last one I want to look at picking
  • let's do a different one that has a better display
  • so they can see where it is. We're clicking and we're seeing
  • which phase we're in
  • first one was just doing console log messages.
  • So what we're doing with picking is recruiting the image in a
  • separate buffer
  • so we're rendering into this other frame buffer. And then
  • when we're reading pixels, we're testing the value returned by
  • color so we can decide. Bottom left, front back
  • top bottom left, right back and then we can also see it for the
  • background.
  • So if you look at the shader again
  • so we have these
  • values are we're setting
  • so that's what we're accessing in the Excellent
  • so it's allowing us to create some extra data
  • and access it with the mouse can read the pixels and then based
  • on what the pixel value says we
  • have to take this call sorry
  • yeah
  • I will also fix this one up
  • so I think you can wrap it up there. I don't know if I've
  • helped your understanding about these things yet or not. So
  • thanks for your attention today. You're gonna say something
  • carefully but
  • I was a little confusing right now. Probably just go through
  • it.
  • Okay, so I'll fix up these the codes to make them a little more
  • readable and to add some documentation
  • anyway, thank you for your attention today. And marks for
  • assignment two will be posted today. And regrade requests I'll
  • deal I'm dealing with them so don't worry about that. Okay.
  • Thanks again.
  • Everyone
  • Everyone

Responses

What important concept or perspective did you encounter today?

  • The most important thing that I learned is frame buffer and in the today's code I understand the functions of fragments and vertex shaders.
  • The most important thing about today's lecture was the new chapters itself. It was really interesting for me to get to know what we can do more with the Frame buffers and not just simple they can also be used to do additional interesting effects. So basically it was really interesting and exciting to know that frame buffers can be used for interactions as well.
  • I found the class active today. The code was explained by shaders and fragments.
  • today i learned about the gl.texture and also learned about the framebuffer use in interaction.
Site built: 2025-06-20 12:45 -0600  •  Give feedback about page