Mtg 5/23: Wed-18-Sep-2024

Outline for Today

Graphics Programming

Administration

Response to Responses

Response to responses

Today

move the midterm?

3D Gasket - gasket4.html
WebGL2 - How it Works[{:target=’_blank’}

For Next Meeting

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

I'm turning on the audio recording a bit late
today.
Sorry about that.
We've decided that the midterm will be moved to October 30. I
and the graphics programming assignment one should use nine
colors
to
to display the gasket images
not 12,
I will Make an addition to the assignment description for that.
So we mentioned a little bit about the Z buffer last day, so
we have to enable it and
so let's take A peek at the code for this And
so vertex shader
taking in the
position determined by vertices that we compute the geometry and
so in and
the type, Back, three, a position. In fact, three, in
color.
So three
position vector for color means, what are we passing?
RGB
and a, no, a, i,
so this shape vertex shader is doing very little, but it's
taking care of the fact that we passing a three RGB, and we're
adding alpha and Alpha.
So
in the vertex share, we're
storing the
chord. Coordinate the position of our vertices in GL,
underscore position
and
we're creating For output, the V color. With that simple
transformation, we're
graphics library, Shading Language is what We're writing
in. It's like C
so the convention
The convention used By the textbook And
so the variables that deal with attributes start with a, those
that deal with vertex shader variables start with V and deal
with the fragment shape and start with the f, i,
so we can specify a single
color For our gasket, and we could use a uniform very
variable. Attributes are written. Attributes can vary
with the primitives, with the vertices the
so we can see in the fragment shader code, we do an in VEC for
for V color, passing that through from the vertex shader
we say, out of that 4v color, and then in that form, V color
in the fragment
shader. So
then, from the fragment shader, we're the passing along F color.
Does that make sense?
It's a way to keep things a little bit more organized. Do
Are you feeling it at all?
Okay, let's look at the gasket for js file and
so we want to self divide Three times, get our canvas from the
HTML file, get a context for WebGL two.
Then we specify a gasket four vertices on the unit circle,
initial tetrahedron
with equal length side, so
you might call it Sierpinski tetrahedron. You I
did an image back in 1991 on The desktop tetrahedron.
Would you like to see it? If
I have yet to use a make a 3d printed version of that
one day. Anyway, I
so
tetrahedron inscribed in a sphere. So we have four
equilateral triangles on the faces, and then we do the
subdivision. So so
we
pass the vertices the number of times subdivide and
so here's the part with the Z
buffer, we enable GL depth test, and that turns on the capability
and all web, web GL,
2.0 implementations must support the sin but the death test,
because it's a fundamental property
that's used in so many
things. So So we
set up our prayer program with the
shaders.
So instead of just a buffer for vertices, we're creating a
buffer for colors as well. We
so
we create buffer called C buffer and bind it,
and then
we go the color beta, and we have to flatten it, because
we're we may be using,
we may not just have the float 32 format, so make sure we get
just, just the data we have the flatten function, which I
believe is an envy new may in zone file I
so then the next bit specify we're
going to
we have to Connect the color in the shader to the program
so that's what this block and lines does, And then do the same
with the position data. So we have a position,
and we're in 3d so we have three data points per position, and I
and there are flows So three times, four bytes, and then we
render and
so we just Have four colors here, red, green, blue and Black
and
so we're using color
as a
as an index into the space colors, and we're assigned the
same color for each With three vertices of the triangle of the
face if
we wanted to change it so that we would have different colors
on the face, then we could,
we could do color, color plus one mod four, color plus two mod
four,
to get
three different colors on the vertices. So thus, so we're
creating the color buffer of this the same size as positions
buffer. So whatever we put into the color buffer, the individual
data points, the positions, get us a color from the color
buffer, so that gives us some control Over the coloring the
shape. Does that make sense? I
so here's a function to draw the tetrahedron. So the triangle
draws the triangle face. Tetra draws four triangles make a
tetrahedron, and then this one does the subdivision, so we get
the fractal shape.
So in the render, we do a clear, GL clear, and we do the color
buffer red, so that restores us to the background color. And
then we do a logical or to say we should also clear the depth
buffer bit
so we don't carry
over information from the previous display. We're not
moving this tetrahedron, so that's less important. But if we
were, if we were rotating it, that might cause problems.
Does that make sense? I
Okay, Let's talk about Color. I
All So I mentioned coordinates because we have some choices In
the way we represent Colors and positions and
so that say
the red axis is aligned with what we normally think of as the
x axis. So we go from zero to one if we're looking for an
eight bit, if we're storing eight bits of precision for the
red value,
we go from zero to 255,
Okay, so then Let's do green. I'm
so I've drawn the blue axis going into the board. The
positive direction is going into the board.
So what other way could I have drawn the blue axis
that could have come out of the board
too, right?
I could say blue is this way. I
I have an eternal drawing queue here so it's not more
complicated diagram. I just want you to remember that
we have that decision to make
when we're doing three dimensional We're drawing things
in three dimensions.
Okay, imagine these are parallel lines
and their squares and
try And fix you
that's better than I thought.
Okay, so we have
red, green and blue and zero. How do we also know that? I of
the other name do we have for absence of color?
Yes, you might even go so far as to say black. That might be a
history. Yeah, that
might be history, yeah, well, display is not really black
because,
because the display is on and there's some light, so it's not
it's not
going to completely black, and When you do printing. So this is
an additive i
So we start from black and we add to it, and
so If we add red, just red and
this is green and this is blue in the corner here. So what
happens if we add green and blue and
it starts with a c3,
letter three blanks fall in the C higher.
The Yes, but not like the pepper
or cyan. Yeah,
I would say cyan.
It's interesting. How some people, I don't I think there's
only one way you pronounce things, but there's choices
about whether It's a hard sea
or soft sea.
So cyan, I
What other choices do? What other mixes do we have? Red and
green? I
six letters. I'm not going to give you any hints other than
those six letters. What's that? Yellow? Yeah, yellow. I
And what about blue and red? Purple?
Yes, but we have a fancier name for it,
fancy for all.
Magenta, yeah, so I'm not a good person to be saying whether
magenta is a cool version of purple, because I'm a little bit
colorblind. I
and so in the opposite corner here, where we have full red,
full green and full blue, what does that give us?
Good answer. We have maxed out the color so
we see what on the screen.
The opposite of black. Yeah, I
so you can see there. I hope you can see that there's a diagonal
there, connecting black and white.
And then we get a
it so I might see a color picker that looks like
so around the edges Are the hues, then we
can think about
saturation. If
So we can see six
colors come out in so
so this is a bit easier way to pick colors than
use
RGB. So the idea is
the flavor. Bottom of the cone here, value zero, then we only
have black. So if we turn the value of the color down to zero,
we're just going to get blacks. And if we turn it up to one.
Then we get,
get weights here, and then we Add, if you venture out from the
center, and
so the center of this cone is gives us gray scale from black
to white. So we can,
we can feel in grays here. And then, if we go out, we go
to saturate. So regardless of
So, we specify colors based on hue, saturation and volume and
so we specify an angle here gives the color
to Hue
and saturation goes from white for the top and
so it goes from a gray value to a fully a bright color. So if we
have saturated, if we have value turned up to one, then we get
the bright colors, red, green, blue, cyan, magenta, yellow that
are at the corners of The Cube.
So for any color, then we Have a
so this is value, 01,
so we can get tints and tones of the color of a particular angle
that we've chosen for hue based on manipulating the Saturation
and Value of parameters. If we fix the hue the angle around the
circle, then we can get a variety of variations of tints
and tones those colors. Does that make sense? So the text, it
has a nicer
rendition of the
cube tipped on its end, so you see the white
corner and then the other vertices arranged around. So I
said there's an additive color model, or RGB is additive. I
Is there a possibility For a different color model? I
subtractive like paint on canvas, yes, So we can Talk
about subtractive. You.
So the idea is you start From white and
so from RGB I
I think I should go up on that piece of chalk
anyway. So for printing, we
use cyan, jet yellow, and we use a K. WHAT WOULD LIKE A?
K, B, yeah, so we can use black as well.
So we use K for black
because they're using B for blue.
So we use black a because
sometimes black
comes up in printing. A lot of black gets printed. So instead
of having to make black by I
so this might end up being a bit the paper might be a bit soggy
after getting three coats of three different inks and and it
may be not convincingly black, either might be a little mighty.
So it's
it's nice to use black ink as well, in addition to sandwich
and the yellow and out. So the idea is the ink
subtracts
from the white so we get color image. So we're doing the same
thing in two different ways. So we build up an image on a
display from black, and then we print it on a piece of paper.
We're subtracting color from white. Does that make sense? I
Okay, so
maybe I can show you a version of I
So this is a serpent ski gasket with a CHAOS game. So we could
change the point size and
so If you can do two, I
There we go. I so here's an interface element to choose A
color and
you can choose The desaturation value.
So that's, that's
container. Continuing from my board diagram the other day
where I drew a few dots. You see that it doesn't take long before
the professional athletes who are passing the ball around
get control. That makes a
very good approximation
to the fractal shape that we're after.
Does that make sense? I
i pray now, harm set of time, but I wanted to mention
coordinates again. I
so if we're describing three dimensional space, start with x
and y. We can agree on what X and Y, X and Y, other range,
percent do you ever need? You don't normally think
I can deal with this now, that's not typical,
and I suppose you could think of doing this as well. And all,
it's also not difficult.
So then we have a triumph. So which way it's positive?
So how do we deal with these two choices? I
so the way, I know we
can make this shape as well, but I think
that x cross y and
the thumb points in the direction
of the positive z.
So when it's going away,
so X cross Y and Z comes out of the board. So this is a
any ideas for anyone familiar with this? I
Yes, where it's the right hand corner system. And then if we do
if my left hand X, cross Y, Z is pointing away. So this would be
for the left handed system. Another hand.
System is the choice of systems kind of arbitrary, as long as we
have three intersection planes,
all like normal. If
Yeah, so
there's a variation set up. I think what MGM is kind of
neutral on the subject. I
is something where and so we
can, when I was introducing we can use the X cross Y idea to
decide what hidden surfaces for this
physical surface determination.
I'll talk about that later, but if we agree on which to
orientate. Orientation of the vertices and the triangles that
we use in the models, then we can make use that information to
decide which faces are visible
on a minute late, minute over, anyway, was that a helpful
discussion today?
So I'll ask a question about using orthogonal in the
sentence. Anyway, thank you for today. Take care and see you on
Monday.

Responses

What important concept or perspective did you encounter today?

A true understanding on how saturation and hue make up different colour's.
I found the explanantions of simple color theory and how that worked very helpful along with the quick explanation of right hand versus left hand coordinate systems
Some important concepts that I encountered in the last meeting were the updated date of the Midterm Exam, some errors in the description of assignment 1, what we are supposed to do for assignment 1, how hidden surface removal/ visible surface determination work and the z-buffer work, how variables are named in the textbook, we looked at and discussed gasket4 code, how colour and coordinates are related and some colour diagrams, what is additive and subtractive colour.
I realized that colour can be plotted down on a 3D vector with red, green, and blue as the three axis.
Colors and Coordinate
Color aggregation
The concept of Colour and Coordinates and how we can find out what the colours of the different parts of the cube will be.
Programming Graphics, Color and Coordinates (Additive color model, which is RGB, and Subtractive color model, which is CMYK).
we learned about webgl2 and 3d gasket
Co-ordinates and about assignment 1
Working of Z-Buffer, Generating 3d Sierpenski Gasket, Variables in GLSL, Colors and Coordinates, Types of color models
Today, the professor explained Assignment 1, the rescheduled exam date, and discussed the code from gasket4 that utilizes the Z-buffer and variable names in GLSL. An interesting part of the lecture focused on color, including the additive color model, where we start from black and add colors, and the subtractive color model, where we begin with white and subtract colors, as well as the concept of coordinates.

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