Mtg 6/25: Wed-20-Sep-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

How's everyone doing today? Better
How's everyone doing today
felt cold when I left the house this morning but now it's not bad I
go to bed weather alert on my phone day before yesterday that temperature the temperatures gonna drop and I really wasn't expecting it to go down to three while we were down three yesterday
dad was like 30
Okay
Okay, so we're
gonna continue on chapter two in the theme of graphics programming today
actually a little bit cooler in here.
So
please remember to record your attendance. I'm not going to from now on I'm not going to really remind you or good morning or marquee present after the fact
okay
so there's a comment about summarizing what we've discussed in the meeting. So I'm going to try and do that
so I'm
so I've added a heading for that purpose. So today we're going to look at the basic structure of what the WebGL programs and we're going to look at 2d and 3d, Sir Pinsky triangles tetrahedrons.
So this is kind of this isn't a great picture, but this is what I have on the web
I should have a bigger maybe this is done in 1990.
What's the ray tracing program so you can see reflections so you can see this weird green surface that's very polished because we have a reflection and shadows and we have a perspective you
the dots so the tetrahedron
has four triangles put together
so there's two basic triangles a bit the base is a triangle. And there's one, two and three on the other side.
So that's what circusy gasket looks like in 3d.
So, over the semester, we'll
be adding we'll be able to make more complex images like this. Today, we're not going to consider all the bells and whistles that are in that image.
So I've
renamed these files, so they were gasket one through four in the interactive computer graphics.com website.
And then Sue is
So that's one we looked at last day
so
I just want to mention about the coordinates that the world coordinates that we're dealing with. As part of the pipeline
So
So remember we define these vertices at vertices as minus one minus one one minus one and 01
So we have
these two coordinate systems
and
what's important is the relative position of the camera and our
gasket in this case.
So we're not dealing
we have
we're using love defaults here for the viewing we'll get into more details about that. But the clipping coordinates what's inside those coordinates will be displayed
so I'm going to try editing some code
I didn't rehearse this. So
we'll see how that goes.
Okay.
So if I'm changing one vertex
to be not minus one to minus two.
That's going to stretch out the triangle
and it should also be partially obscured.
That make sense
what we're seeing here
so by default we're looking to regional that we're looking at display is minus one to plus one minus one to plus one. Originally, the triangle was defined in those coordinates. So we saw the whole thing
now it's not so we see the the change in the shape of the triangle and also part of it is clipped
so it's
not part of the image.
So here's an example where
so we've changed the coordinates so there contained within the clipping so we see the whole thing
and I'm gonna change this back before I wonder what happened to it.
Up Okay, any other
changes to test on this one
so just to go through the JavaScript here so we
have
JL is going to be it's going to hold the context for the web. GL version two. And we use it not just in a net but in render. So that's why it's
it's defined in that scope
and then we have an array for the positions so we're getting the canvas from the HTML file
and then regenerating the data
so we're going to set up a number of positions. So the number of points is going to be 500,000.
So here I've
set the starting point as one of the vertices.
Storing
that initial point in the array of positions
and we're doing the transformation and adding subsequent points. To the array of positions. So that's the data
so under setting up
the web GL so viewport is
is taking the
clip coordinates minus one plus one minus one two plus one and mapping it into
the screen our campus.
Clear color we're setting it to be white
so I went
and added a bit more documentation
to this example.
So when array buffer
means that the buffer contains vertex attributes such as vertex coordinates, texture coordinate data or vertex color data.
So we
are creating a vertex or an array buffer getting the ID
and
the usage of the buffer is static draw, which means that we generate the points once and draw them multiple times.
So whenever
we're getting the position location
some
in the documentation sometimes it says index and also refers to location so, this is the way they've done it in the
in the sample code so, I kept that naming
So, the program has the shaders. So, we're finding
variable from the shader.
And then we're enabling it. So we're making that connection with the shader and then in the render.
For clearing to wait and then drying the points drying the contents of the array of the buffer as points.
So here's the
the variable in the shader
so we're looking up and making the connection to
let's try
let's try this with a bigger point. Size
let's go bigger still
okay
now let's look at
evening let me show up
right
so we're doing the same kinds of things here
so
now we start with a triangle with the vertices as we had them before
we have a function divide triangle. So we take the three vertices and then
we pass a number of times to subdivide.
Let's do
it three which is a little bit easier to see, maybe
you're all just like I wanted to take one
so dividing the triangle
I feel like I could improve this code a little bit
so we're dividing the triangle. So
count is the number of times to subdivide.
So if our count is zero as then we've reached the end and we're going to create a triangle
never passing the
the vertices of a triangle and then the work
to try and go function will push the coordinates into the position array
so if we're not finished subdividing.
Divide the triangle
make three smaller triangles reduce the count and then we divide each of those three triangles until we get to the lower limit of recursion.
So this time instead of points we're drawing triangles
so we're
doing the same things in terms of setting up the buffer to hold the positions. The only difference is we're interpreting the contents of the buffer as triangles
and we're doing the red color
so everything is colored red, so there's no
just a very simple fragment shader here
okay.
So let's look at
does that look like a 3d object?
Okay, let's look at
what we see colors are changing here
let's look at the JavaScript first.
So we have the same
the same setup we get the graphics context
so I notice
that they're using different vertices then. Then the recursive 3d example.
Let me update
Does that look more?
More interesting.
Okay. I just
so we're doing the same thing we're picking transformations at random based on the vertex or picking a vertex 012 or three and then
and then doing the transformation and saving the point
so we're one thing that's different here is we're enabling a depth test. So we're keeping track of the positions have pixels of the point so we're drawing
we're displaying the nearest points
so after covering
ones further away, you don't see the ones that are further away. Okay, let's turn that off and see what the difference
changed. A bit.
So let's look at
the shaders. So we have
are taking in the position and we're passing out a vertex color.
So we're
not computing the color based on geometry. We'll see an example of how the color gets
assigned.
We can do a color buffer with our next example. Here we're doing a computation based on the position
fragment shader is just taking the vertex color and passing it to the fragment color or assigning it to the fragment color.
So this is a way
that we can change colors without using a color buffer, we can
just do the computation in the shader.
Before we have to leave
look worse to 3d Guess
so here
we're using a color buffer
yes thank
you have a nice day thank you okay
now
so use the same
coordinates with vertices as
as the 3d Chaos game.
So, we're doing the same kind of approach instead of dividing a triangle. We're dividing a tetrahedron. So we have four vertices.
And then we have a number of times to subdivide so let's change that. From four.
That's maybe a little
makes the structure a little bit easier to see.
So
what's different here? We're doing colors.
But we're using a color buffer.
So we're creating an array buffer
so I've
used the Canadian spelling of color in the JavaScript file, but got it
I use the American spelling kept the American spelling in the shader so that's why I'm looking for a color because that's that's the variable name and the shader.
So
we have a buffer for colors information and we have a buffer for vertex information.
Should we change the
colors okay, what instead of red?
How will we do yellow
and instead of green
we can
I would say
that should be magenta the fourth color is black but we don't see any of the black.
Okay
so we have triangles and then the color
so the tetrahedron
with these four vertices is made into four triangles and we're assigning a color to them
so,
if we've reached the depth of recursion, then we create a tetrahedron which is made up of triangles. Otherwise, we subdivide
again
so, we're drawing
triangles again, for the positions
so
let's see
the free turn off.
So
if again unexpected results
I'm gonna try this once. More
change this color to red
and let's
go think I'll make a difference
so does this make sense?
So we're drying the front facing triangles
so we have the yellow,
cyan and magenta but we don't have the sense of a 3d structure because
we haven't got
we haven't preserved the depth information here
so by moving so when it
came in is all black or all red
the back facing triangle was drawn last
so that
overrode because because we're not using the depth information and overrode.
These triangles which were
closer
I think that's all you need to say about that. If that makes sense.
What we're seeing
thought I'd put the assignment yeah
so I will I'll get that sorted out.
So basically, it's going to be
making some changes to the example code and we have
discussed already adding some
features so I'll get that posted and
posted here and linked on your courses shortly after class today
I didn't
put this into
our exam. Or the code examples that I
updated
here's an example of
using a
slider
so this is the subdivision level
very
much example of how to use adding some controls in HTML and connecting them to
JavaScript
Okay, so we've talked
about
some structures so are using
we are using
to find colors in the shaders and they are excited for this but you're like well listen to an album like in a row on my drive home like
in chaos 3d We did the color based on the shader only. And then in the 3d example we did colors based on a color buffer
and we also looked at the
using hidden service eliminate removal by keeping track the depth
so I'll add some more comments to those those code examples
any questions or concerns?
I know we're out of time here so
if anything comes up, let me know. Post in the question post in the class discussions.
So that was
a good way to go through things okay. It just occurred to me that anyway
I didn't this is the first time I've tried it this way. So I welcome your feedback about things and how to do things more effectively. And
so I didn't put it here, but if you want to take a look at chapter three.
We'll get into those things next week.
Okay, thanks again for today. Have a great Wednesday and a great weekend and I have office hours tomorrow as anyone tried to reach me in office hours and not been able to okay
I'm not I'm not always good at turning on the Zoom to try and get me by zoom. But anyway,
don't have to be shy about getting a hold of me if you need to. Okay.
Have a good rest of your day?
Have a good day. Thanks you too. Thanks, you too.
This company thanks you too.
This company thanks you too.

Responses

What important concept or perspective did you encounter today?

Learned about the the 2D gaskets as well as graphics pipeline and also about the camera coordinates and clipping coordinates
I learned how to add a slider in Sierpiński Gasket.
The most captivating aspect of today's class was hands-on exploration of 3D depictions of Sierpinski Gaskets. What made it particularly intriguing was the ability to alter the camera's position, providing with a dynamic perspective and enhancing our understanding of the subject.
I learned about the Graphics pipeline, 2D gasket also learned about the vertex shaders and fragment shaders.
The Depth-Buffer and how it is used for detecting obscured surfaces in a 3D space for the Sierpenski Pyramid.

Was there anything today that was difficult to understand?

The code for graphics

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

Would love to know about graphics pipeline.
is creating 2D and 3D structure of Sierpiński Gasket using WebGL
The triangle for Sierpinski Gasket with 2D slider made me understand more and more clearly. Is there something like 2D slider for the chaos algorithm? I found this one (https://www.youtube.com/shorts/QK2SJo-AxT4) but it only provides a few iterations. What will happen to a very first POINT if we put it in the center of the equilateral triangle?

Site built: 2025-06-20 12:45 -0600 • Give feedback about page