Mtg 4/23: Mon-16-Sep-2024

Outline for Today

Graphics Programming

Administration

Response to Responses

  • see Meeting 2 for a detailed response to responses
  • for those interested in a career in film and games – Tim Belsher video
  • what was missing from our discussion of the parts involved in generating a high quality graphics image?

Today

For Next Meeting

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

  • How's that for sound good? Okay, I I
  • better get The screen up here. I
  • Okay, here We are meeting for you.
  • Okay, so we're going to look at a graph that's programming in
  • more detail today. Okay,
  • so first of all, happy Monday, there's a link there for you to
  • take attendance. You can check the past calendar for today and
  • see the upcoming events. I wanted to just comment about the
  • responses to responses on meeting two, as I made a more
  • detailed discussion here, where there are questions and
  • difficulties.
  • So if you have
  • you might want to take a peek at that if you have some questions,
  • and if you have questions about stuff is going on in class, if
  • you're comfortable ask them in class. If you're not comfortable
  • asking them in class, send me an email or post to the class
  • discussion forum you
  • Okay, let's see where did that go? I
  • so we have class discussions here under the general area of
  • your courses
  • and I have office hours, 1030 to noon, Tuesdays and Thursdays.
  • So let me know if you have problems getting in touch with
  • me. Oh, I'll try to be on Zoom during my office hours as well.
  • Does that seem okay? I
  • so part of the answers to reviewing the comments I made in
  • response to a question, I suggested a video that I made
  • with a presentation by a friend of mine from SFU his career in
  • games and film. So that's the video here.
  • Computer Science alumni and Friends and
  • so What was missing? I
  • so we talked about having A model, texture or material
  • laying and viewing and
  • So when the queue
  • What if We don't want To See through
  • so these are two sides of the same coin,
  • visible surface determination and hidden surface removal.
  • So there are different ways we can approach it. If we have a
  • complicated shape, a complicated model, then it might be
  • worthwhile to remove from processing the side the pieces
  • that aren't going to be visible.
  • But we can also draw everything into the frame buffer and
  • just show the stuff that's closest to the Camera.
  • Has anyone heard of A Z buffer before so
  • I don't Want to confuse that with Zed butter.
  • I've been watching master chef with my wife, and sometimes in a
  • compound butter. So maybe that would be Zed butter. Could
  • be
  • the next greatest thing, perhaps anyway, said buffer keep track
  • of distances. So really drawing the closest thing. We'll talk
  • about that more later on. I
  • so if we want to remove hidden, hidden surfaces, what are,
  • what's some intuition about how we might do that, like Castle
  • rays on
  • the camera, if
  • it hits the surface before it touches the surface that you're
  • trying to reach, then it's behind something else. Make
  • sense?
  • Yeah. I
  • I don't
  • that's a bit more like Zed buffer. I think I
  • it so we'd like to simplify the model before we do processing.
  • So thanks for your comment.
  • Let's look at the cube again. I
  • so what information can we
  • Let's say we're looking at I
  • so we're looking From here, and we see the cube. What I
  • What can we say about this surface so
  • so the surfaces can have normal vectors, and if the
  • I realize I'm not going to be able To see this side from Where
  • I'm viewing position I
  • I'll leave it there For now, But Okay.
  • I So this is a comment. Let's start by looking at the
  • assignment one. So this is a common for people in 733 to take
  • a look at the lab the instructions For lab one,
  • setting up the Common folder, etc. So
  • a little
  • bit so there are some bug fixes there and some good information
  • in the lab. Notes,
  • CS, 315, students. Do you agree that the lab I
  • the lab is good.
  • Okay, so there are two versions of the code, the jarpinski
  • gasket. I
  • Has anyone ever heard of Benoit Mandelbrot?
  • I He's the
  • father of fractal geometry.
  • So there's a couple things here. So now, with UTF eight encoding
  • for your web pages,
  • you can put the accent on the end like should be
  • sipinski was a Polish mathematician. So if you hold
  • down the anarchy, you'll see a bunch of options.
  • So
  • don't forget to spell things properly with the proper
  • accents. Now that you have the available ability to do it.
  • The Mammoth road called it the gasket as a joke. Do you know
  • what? Well, here we have Mr. Pinsky gasket. He
  • so what's the gasket use for
  • seal things? And
  • I wouldn't be a very good protection. Or wouldn't seal
  • much here.
  • This one looks a bit better. I
  • so it's a it's a fractal, and we can construct from an
  • equilateral triangle, and we subdivide the triangle into
  • three, well,
  • four pieces.
  • But we don't. I,
  • if we add let's not add another transformation, but if we
  • accounted for the space in the middle, we could generate a
  • triangle in you. An inefficient way
  • we can keep going to Do this.
  • So you see how we're getting
  • the shape. So the first one, the gasket one, is using something
  • called The Chaos gain and
  • so we can generate the shape starting From a point anywhere
  • that we Want To I
  • so we just keep applying transformations At random till
  • we get enough points. What are enough points? You
  • maybe more than that. I'll
  • let you think about that. We can talk about it if we have some
  • questions.
  • So let's say this is transformation. One, it shrinks
  • by a half and centered there. T2 shrinks by a half and centered
  • here, and t3 shrinks by half and centered There,
  • here's our starting point. Which transformation should we apply?
  • Pick an arm between one and 311, okay.
  • So let's, let's just mark our transformations here
  • so We scale by half and
  • next
  • to two i
  • Next,
  • another 2k and
  • should We do a three and
  • then One and then a one and
  • so drive this code.
  • It's in the textbook and it's linked to
  • watch how it the shame takes.
  • The shape takes shame and
  • does that make sense?
  • Yes or no. Okay, let's take a look at the code for
  • here is that UTF eight specification,
  • so everything we're going to do require shaders, so we don't
  • have a default shader we're going to going to start with a
  • simple one, perhaps, and make it more complex As we go through
  • the semester.
  • So the fragment shader here, we're specifying the color red,
  • and we assign that to F color, for fragment color, And then the
  • vertex shader.
  • We have a point size set, and then we're also
  • sending GL position. So that's
  • the that specifying coordinates where we're going to draw the
  • point. So we get GL position from a position which is a
  • variable that we connect in the JavaScript and
  • Okay,
  • Let's see.
  • So we're going to generate 5000 points for
  • this onload is going to tell us when we're ready to start our
  • code so we don't start executing before things are available.
  • That's also a bit dated in this example, so I
  • the code might be from 2020, or earlier. Anyway, you can tell
  • it's not the latest version of JavaScript. I
  • so we're getting the canvas, creating the context. If we
  • can't get the context, then we throw an error and
  • so we say vertices minus one minus 101, And one minus One I.
  • Know That's wrong Because
  • so in 2d We're concerned with this. We're
  • so anything that's inside this window be drawn. Anything
  • outside will be not drawn. I
  • so when we get and in 3d we'd extend it to minus one and plus
  • one in z, we
  • so we can see here the shapes are drawn so they're touching
  • the edge and the Left and the top. If we had a different
  • background color, we could see
  • that the right is touching the shape The Edge as well. And
  • so we specify the vertices, then we add the vertices,
  • so the comment about the point must lie inside Any set of three
  • vertices.
  • Is misleading. I think I
  • So,
  • so we're adding that first position to our array of points,
  • and then We're doing selection of the transformation at random.
  • So math dot, four three times. Math dot random gives us a
  • number between zero and two,
  • and then we add the
  • now. So we apply, in fact, as we apply this transformation at
  • that vertex J and B and then we add The point to the positions
  • array.
  • So when we configure web, GL,
  • I Think we
  • have 512, ask.
  • I Want,
  • so the
  • space minus one, one minus one, minus one to plus one plus one
  • is mapped onto this area on the display.
  • So we create the buffer, bind the buffer and and
  • then
  • we transfer the data from our JavaScript array, and that's why
  • we have flattened to remove the extra stuff that's in the
  • JavaScript array. And and
  • then we say it's going to be used for static drawing. And
  • then the last bit, get that duplication a position. So this
  • is going to associate the positions that you just put into
  • the buffer with the name a position so we can access it in
  • the shader, the vertex shader, if you remember that line, I so
  • the first one is a position block. So we're going to get a
  • location for the attribute, a position, and then we're going
  • to make a pointer.
  • Was position locked,
  • it's going to be
  • two bytes or two elements under each GL float, so two elements
  • of Four ways, each store coordinates
  • and then the render function. We clear the color bit where we
  • clear the buffer according to the color we've set. And then we
  • draw a raise so we're going to draw points,
  • and we're going to start at zero, and we're going
  • to positions on length. So the number of positions we've
  • created, which is 5000
  • Does that make sense? So
  • if you try, I might you
  • could try different ways to see the planes fill in one by one in
  • the gasket, line, dots, dot, HTML or JS example. So barnacle
  • described it as a
  • hitting the ball thrown in to the soccer field, and then
  • skilled players will pass between themselves,
  • and then you get some fancy gasket shape.
  • So really, after we're finding these
  • transformations and the
  • ball gets arbitrarily close to the shape we're trying to
  • approximate to.
  • I want to go through his slides a little bit.
  • So amongst the things of that response to responses on for
  • meeting two is the location of the
  • slides from the textbook. Do
  • any questions about what we've talked about already.
  • So gasket one deals with points and gasket two deals with
  • triangles. I
  • So this gives us a little bit of
  • an idea how things are working. We're using the GPU rather than
  • the CPU. GPU.
  • It's controlled through programs called shaders. So
  • we have the vertex and the fragment shader,
  • that's where the action happens, and
  • then we see the
  • I don't want to switch back.
  • There's GL use program, which is
  • called in the JavaScript to
  • Make use of the shaders to create the graphics I
  • array. So we're working with contain mode graphics and put
  • all the vertices into an array and send the array to the GPU to
  • be rendered.
  • So we're storing the array on
  • the GPU, so we don't have to
  • keep incurring the cost of sending it from the CPU to the
  • GPU.
  • And GP, so
  • GL 3.1, WebGL is based on OpenGL, 3.3 point zero. Es and
  • for the embedded systems, we don't have a lot of state
  • information. We
  • let me see if
  • so that's the Code he's talking about as an example.
  • So these are very straightforward.
  • Just pass through to here. It's not even getting color
  • specified. It's just sending a solid color, in this case,
  • white, and we're passing getting the position from the JavaScript
  • the
  • so we make the vertices clear. The background is black. We do
  • the init shaders, and then we the init shaders in is a
  • function in his common directory, and then We do a GL
  • use program with the result so
  • so we pass those four vertices, set up a position For those four
  • vertices,
  • and then You draw a Triangle fan and
  • so We have minus 1n
  • minus Five, I,
  • so A triangle fan takes the first point as the center, and
  • then next two points makes one triangle, and then with the next
  • two points and makes another one. So that's a simple, simple
  • way we can make it more efficient.
  • There are a number of ways to interpret the data in The buffer
  • So I
  • this is why you don't deal with PowerPoint a lot, but
  • if they're helpful,
  • for reference, then we can Get some guiding out of
  • so we have a few examples of a complete first program, the
  • square in gasket one and gasket two. So the viewing is
  • simplified, because we're going to be dealing with that minus
  • one, minus one, minus one to plus one plus one area and
  • so the five steps describe The page in HTML,
  • and then we're going to include the shader code there. It's not
  • the only way that we can do it, but it's
  • it works for us,
  • so we don't
  • tinker with that. So we specify the canvas and the other HTML
  • elements that we're going to access the JavaScript through
  • the DOM and we're going to load specify the necessary files and
  • JavaScript common libraries, MV new.js and so on. Then define
  • shaders in the HTML file and
  • so we're going to use script tags to do that.
  • Then the JavaScript file, we're going to compute or specify
  • data,
  • send it to the GPU. That's what the Create buffers and so on.
  • And then we render the data also in the JavaScript file.
  • So these are just doing the pass through.
  • So we're we're passing the position
  • setting, the
  • ver setting, the position variable that's built in, and
  • here we're specifying the Color. The fragment color is going to
  • be white and
  • I Think I've got
  • separated both shaders are full programs do
  • so the thing with WebGL two we have that version 300 BS to
  • specify
  • what version we're using, So things go smoothly. And
  • there's A picture of a triangle fan. I
  • so there's a difference between whether we do triangles,
  • triangle fans or strips.
  • So that's a triangle fan.
  • These are triangles,
  • and this one is a Triangle strip. I
  • any questions or comments I
  • okay Thank you.
  • Anyone's name,
  • Anyone's name,

Responses

What important concept or perspective did you encounter today?

  • The important concept I learned in the meeting was the terms hidden surface removal and visible surface. These are algorithms used so that the objects are drawn and in the correct position depending on the viewers. An example we discussed is a triangle. It needs to use these two algorithms so that the faces are clearly seen by the viewers. Another term we briefly mentioned was the Z-buffer which according to the textbook, it is also reated to the hidden-surface removal algorithm.
  • Looking and dissecting code files for WebGL2
  • Although only briefly mentioned, the concept of using Computer Graphics with Filmography shows that having a deep understanding of the technology and programming practices that go behind the scenes to develop the rendering engines that major studios use for their VFX and Computer Generated Imagery goes a long way in furthering the quality and realism that it can provide to the artist.
  • Vertex Shader, Fragment Shader and Vertex Position
  • WEBGL
  • Sierpinski’s triangle gaskets. It seems like quite an interesting task to take on. I plan to take a look at the code and maybe try to write it on my own to help me better learn the concept and implementation.
  • The topic of coordinates is something which I felt was important in last meeting.
  • The Hidden Surface Removal, Visible Surface Determination, Sierpinski Gasket, and Triangle Fan.
  • The main consept was about Sierpinski Gasket and difference between both the gaskets
  • Hidden Surface Removal/Visible surface detection, Z buffer, Sierpenski Gasket and the steps to create it
  • we learnt a bit about Sierpiński triangles/gaskets and the code needed to generate them, which will be what are our assignments are on
  • The concepts of hidden surface removal and visible surface determination should be considered when generating high-quality graphic images. The idea of the Sierpinski Gasket and how to program it using points and triangles is interesting. I have learned how to use square.js to draw shapes like triangles, triangle fans, and triangle strips.

Was there anything today that was difficult to understand?

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

      Site built: 2024-10-28 00:18 -0600  •  Give feedback about page