Mtg 23/25: Mon-27-Nov-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

Questions about
any questions about assignment three?
Let's do tonight.
So it did say like, make changes to the material like parameters
of the, the rendering. So how many parameters were supposed to
be changed because I just added to changed the way that the
light diffusers with the cube and I also changed the angle of
collect that hits the cube. Okay but there are like shininess and
specular or ambient light or do we have to we have to change
everything or was to just enough
so I guess I would say it's up to you. So so maybe things that
will highlight the difference between the two shaders.
If you if you think Gee, I wonder what would happen if I
did this?
I did. Most of them were working but some of them were just too
difficult. To get them running.
Using a judgment about how many parameters
you expose in the interface
maybe think about
shows off
the differences
so it shows up the differences between the shaders.
So, remember to document and explain your code
use Bootstrap and WebGL to.
Follow instructions
in the assignment.
Include a readme file
that explains
how to use your code
so maybe we'll say that a readme file is not just for the marker
for me but for people who might come across your code and say
some make the descriptions clear enough and detailed enough so
that people who don't have specific background I was late
to
welcome everyone
Okay, so I'm going assignment three is due tonight. Use your
judgment about how many parameters to expose in the
interface. If you think about what shows off the differences
between the shaders. Document and explain your code. use
Bootstrap and letter WebGL to follow instructions in the
assignment description and include a readme file that
explains how to use your code to anyone so people who might just
come across your your code and say so give them enough details
that they can run your code and if you have questions about
the questions about how to do avoid pitfalls from assignment
to maybe if you have time you can stop and talk to me after
class
and
yeah, okay.
So these are some general things to keep in mind. So it makes
sense.
So I thought about trying to fix the tea pot and
I thought that was not a good use of my time. Especially after
reading a common for Americans who seems to supply the
the data for
every every
no skin
Changes.
Made some major change Isn't.
Okay, so these are a couple teapot examples which are I
think using Eric Haynes data set. Sara Caine's has a long
history in computer graphics and he teaches or he taught you
Udacity course.
Anyway, so this is using
so originally the teapot didn't have a bottom Oh yeah. So this
was added color by hurricanes was that the bottom is a flat
so there might be not a
transcription error by the authors of our text but it may
just be a part of the dataset anyway
so that's this is one example using
this is using three js
here's an example in three Jas,
so this is what the teapot looked like originally.
Then as a demonstration of how they could manipulate the model
by scaling it they flattened it out a little bit and this is
decided like this one better than the original teapot. So
history of computer graphics
anyway,
so we looked at last day three cubes
Why is not working it wasn't working.
Like a couple of designs, even for sign for.
The entered shaders weren't available.
I tried it as it was
I just don't know. Right WT X only created a folder for the
same folder. It's still empty
so do i do i need to do something different to encourage
communication about issues like this.
I did. I did it very late in the night
because I realized the sample that I put into the directory
didn't wasn't I didn't have all the pads Correct. Yeah, I guess
that could be for the robotic arm. For example.
So if you are telling me and I'm not responding us another issue.
I think it's set up your course and stuff is set up so that I
see everything that comes in
but maybe not make complete sense
make the nation
humans
so I'm not sure when I introduced that error but I'll
I'll post it again after class
so this is an example where we're using that cube data
we're just creating different instances of the cube where
we're creating three separate cubes by three separate calls to
the cube functions that are in the cube data.
See if this one works better Okay, so there's
anyone getting a seizure?
I close my eyes. Nice to see you
Okay, so what I've done here, so the text has instance t pods.
But the code for the T pod is beyond our beyond what we're
covering so I wanted to make it with
to build on the Cube example. So what I've done here is created
one so we have one copy of the cube and we're instancing it
several times.
So this involves a change to the vertex shader
so what what do we notice? About this vertex shader? Can you you
want to say anything that's
different from what we've done before.
About the
vertex attributes are the instance attributes
protects vertex attributes that's
so position and color are usually the taking the A matrix
that's a new matrix
Okay, so that's one thing
and what else so you have GL position that's familiar. What
about GL instance? Id
used here for laugh.
fragment shader doesn't have much to do. It's just doing a
pass through the vertex color but certain GL instant ID
identify which instance sense which instance so we're
so the instance part will be used in the visible here more
clear here.
So give me a number of essences more than 36 for you.
Not nothing bigger than that. 4096
Okay, let's try 4096
implemented
much more simplistic, more restrained one. This should turn
out to be a cube
cube of cubes
okay
so we're just we're not making 4096 or 216 copies of the data
we're using the same data over and over again.
Okay, so we're setting up the cube
we're setting up the callbacks. Initializing the ship program
with the shaders.
So we're creating the vertex buffer.
And the color buffer
and then
creating matrix data. So we're just allocating space. So that's
so we're doing we're creating a matrix for each instance. So we
take the number of instances multiply by 16. So that's the
number of float values that we're going to add per matrix.
So I took this example from a modified example for Web GL two
fundamentals
and I
combined it with libraries that we're using what the textbook
anyway, so we're creating that space for beta.
matrix structure and binding to it. We're using a different
usage here. Same dynamic draw to indicate that this data will be
changing
now here's something else that's new. Because we have seen the
matrix as an attribute. We need to use four indices instead of
just one to encode or connect the matrix attribute to the
data.
Is when we get these locations the matrix lock or the position
lock or the color lock. Those are all indices. So those come
up as integers.
So we're using frozen indices to make the connection between the
program and the shader. So for the matrix, we need to have many
to use for indices. So loop is dry equals zero, i less than
four. So then, we're taking the original matrix location based
on the variable names that we locate a matrix
individually, enabling the vertex attribute array for
logical for the next one location or lock
so we're setting up that connection. And then the other
thing that we're doing here is using vertex attribute divisor
so we're saying
the attribute changes once per instance.
So here, we're going through the instances and we're updating the
matrix at random
and then we're we're updating the buffer with the new matrix
and then here we're going back to the vertex buffer. So here we
say, start at zero. Draw 36 vertices in here the number of
instances. So the difference is draw arrays instanced instead of
just draw arrays.
Okay, so let me show you one other thing that we can do.
Okay, so this is going to say
now, we're going to use one color the color that we're going
to use is going to change with every instance.
So we're having an air here
vertex buffers not big enough for the draw call. So we changed
it so we're using one color per instance.
So what's the issue
so we have 36 vertices 36 colors
so it's running out of colors
which took me a little bit to put together
so if we have 216 instances 36 colors
let's change this to six
six times 36 should be to 16 So we should see a result here
this is less seizure inducing.
Okay, so that's.
It that's drying instanced.
Arrays
questions rather
similar right
so now I have the robotic arm working
so the geometry.js file is not in common directory it's in
chapter nine.
So I correct that
it seems like it would be a good place to put it in the common
directory. So I should I'll make a copy of it there as well.
The figure dot HTML is also is not happy you can choose to
choose but
yeah
bye Okay, let
me go to that one first.
Thought
I posted corrections to this
it let me see.
I'm not sure why I didn't update maybe I hadn't saved before. I
published it posted again after class.
Remember the original one to the one that I showed you last time.
These were squares instead or cubes instead of cylinders
she'll get to know.
So here we just have our usual
vertex shader.
And fragment shader.
Okay, so here we're just specifying some constants for
the shape of robotic arm
indicating so we have three angles for the base for the
lower arm and for the upper arm
so I didn't change the name of my cube Let change into a
cylinder here so we can change it back to cube and see.
John tree we also have these materials so we can access let's
look at the geometry js file.
So now I have gold to find
I think there's only one life yes.
They also have a texture to find.
Switching to the cylinder margin since we have a different number
of vertices are the object
so we got the length of the triangle vertices so this is a
feature of each primitive
so we can even change to the sphere here let's try that.
Looks better than I thought it would.
Okay, so we're getting the data from
data structure here. Sorry, surgery in one cube
we're setting a setting of the uniforms
shader
render we're doing this rotation on we're changing the angles
displaying angles on the sliders. So we
change the modelview matrix to be to do the rotation around the
Y axis and then we call the base function when you're under the
lower arm we're changing
we're updating the slider and then the modelview matrix
includes so we're doing a translation and then the
rotation. So situating the lower arm on top of the vase and then
rotating and then drying the lower arm. And then last part
we're updating the model view matrix again by translating
floor arm height and rotating the upper arm and then the drive
the upper arm.
So we've got the modelview matrix that sort of sets up the
base the starting point and then we're drawing in. We're doing a
matrix to describe the instance and that's based on the
parameters so the width and the height.
So then we multiply the incidence matrix with the
modelview matrix that's passed. Along that's current. And then
we update the uniform matrix in the shader this product instance
matrix and model the matrix when we're drawing the vertices that
are required.
So each time we render we start with a ModelView matrix based on
the rotation of the base around the Y axis
so if we change the order of these drawings, pieces and they
would be
there would be a problem they wouldn't be connected anymore
so that's the idea of
of working with matrices to do transformation so we can start
with single primitive and transform it and that's the same
idea that's in the figure that HTML file
so in both those examples today with the robotic arm and
instance cubes, we're working with one set of data and we're
transforming it so we can get more complexity.
And when without,
with some efficiency as well.
Does that make sense? Any questions?
Okay, thank you for today.
Okay, thank you for today.

Responses

What important concept or perspective did you encounter today?

For me the most important thing for me in today's class was the difference of vertex shaders for the instance cube HTML and the vertex shaders of previous programs. Actually we are using matrix as an attribute in it and for that we need to use 4 indices instead of just one to make a connection between program and shades.

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

I would like to know more about how I can use more indices to make a connection between program and shaders because today's example vertex shader was different from the other.
Robotic Arm's body has a lighting shininess. Is it possible to add shininess in arm as well. The reason is I noticed that tea pot 1 lid has that shininess.

Site built: 2025-05-06 13:52 -0600 • Give feedback about page