Mtg 3/23: Wed-11-Sep-2024

Outline for Today

Chapter 1 Administration

Response to Responses

bitmap v. vector, discrete v. continuous

Today

Chapter 1

For Next Meeting

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

I should have caught the sample comment in my
recording.
Let me try and recreate it. So one person
said they were doing well. So therefore, with that one sample,
I'm saying everyone's doing well, maybe I should take a more
detailed sample to get a more accurate picture of the class
smooth.
But this is the way we think about with
computer graphics for sampling phenomena at a particular rate
resolution.
So the results we get are dependent on the
sampling we engage in.
So if we have more samples, then we get better credit results,
better reconstructions. Is
it better the first time that didn't get on the recording, or
better the second time? Or does someone have a better way to say
it than Like two tries?
Okay,
so the syllabus is online. I
so I've said it for october 23 but I realize there's a lab that
a week is older, the labs are very weak, and I was wondering
if there's some interest in changing it From the 23rd to the
28th or the 30th I
so I'll create a choice for your input on that. So
I could have made better use of my time
when,
When my colleague Lynn
mahanic, was talking to the students anyway.
So here's a way to get to the website the meeting today, and
then I realized I didn't get today's Meeting updated. So I
will update that later today.
Okay, so I want to
Talk about chapter one today. I'm
slides Out of post review our courses and
so what version of the textbook are people using? Or can you
give me an idea? How many people have got access to the eighth
edition?
Seven? I
You've got eight. Were the people holding their hands up?
Was that for eight? Seven?
Okay, so who has eight? I Okay, who has seventh, who has Six or
less, five or less? Good. I
I think that's the question I asked you, in addition to
conversion or condition number. So what is immediate? One
graphics
where the client basically takes versions and immediately throws
them
down. Yeah. So weird. You
so what's the alternative to immediate load graphics do?
I don't know if it was worth the talk to write out that
response. So is the answer, and I'll turn to the book graphics.
I'll get to the
later book graphics,
who says Yes?
Who says, Stop trying to make jokes.
You
so retain mode graphics. So that's because we have
GPUs. And GPUs were once, once upon a time when G's dirt for
graphics processing units. Now, I think it's more of a general
processing even, because GPUs are now being used for AI
applications a lot. I
but so the idea is we have memory and other capabilities on
the chip. So we send primitives and we work with them in buffers
on the GPU.
And so we have a up
the opportunity for a lot more a lot more
efficiencies, so we can get more polygons, more friends, frames
per second, and
just better gaming experience, or a better you. For a better
watching videos experience, or
doing data analysis or
what other kinds of things do
we do at the do we do with graphics,
design? That's another one that's mentioned in the book.
So does anyone have more direct experience with graphics?
Who has experience with graphics because of gaming platforms? I
I was talking to a friend who was an alumnus, and he and some
friends,
once they graduated from U of R computer science, he went to
Vancouver to work for Game Studios. He's
now not working
at a game studio. He's
doing AI for law legal
firms, and he
stood in people
who smart programmers, who would like to live in Vancouver, the
Rural mainland, the Lower Mainland, sorry, I don't know if
it's a Lower rain land anymore. You
so I'm not implying that just because you like to play games,
that
automatically, just by playing
games, that you get programming knowledge by association. But if
you're interested in
games,
there's opportunities for programming,
and if
you're adept at programming, graphics and animations do those
are the skills that other develop other
Other employers outside the games industry are Looking For.
I
So the meetings dot ICS file. If you want to put our meeting
schedule into your calendar, you can grab that file and download
it for your open it in your calendar. Here's the CS 315 lab
page,
and here's the website for the textbook.
So you can see that I'm in the process of creating introduction
to Web GL two assignment. I'll get that sorted you.
I find out,
is there a question back there? I
I've added more links here. I
here's a zoom link to my office. I
so set aside 1030, to 12 till noon for office hours. You can
come and see me in person, or I'll be on zoom as well. I'm not
sure what the fate of zoom will be now that we're also doing
Microsoft Teams. But I like zoom for
zoom is good for a bunch of things too. So anyway, I want to
mention that, and if we organize this a little bit, so there is a
comment about participation and doing the wiki so
so one way to participate is to take your attendance, record
Your attendance at the meeting. Another way is to make wiki
contributions.
So what I have in mind is thinking about presenting the
highlights of our class discussions. Use the raw
materials provided within a day of the meeting, so photos of the
board under media, the audio transcript and responses.
So you can create an edited and corrected version of the
transcript on the wiki page, copy and copy and paste the
transcript and edit the stuff that's not course related and
correct some sometimes humorous errors in transcription and
it. So you can also add links to resources that are hinted at in
the transcript or that seem appropriate as you create the
wiki page. Include questions where appropriate and ask me
when needed you Does that give a bit more information and
structure to the idea of creating these Wiki pages?
Anyone slightly more inclined to do it? I
Okay. Anyway, so involvement in class, and one other way to be
involved in class, Aside from the ones I've listed, there Is
To I
so When we create a bitmap image, We're
capturing samples continuous phenomenon. So
so if we have a vector graph, we're storing the description of
the shapes instead of the samples that We take at a
particular resolution or the image we
so we can describe Something with a mathematical formula that
lets us,
lets us generate or regenerate an image at any particular size
of the display. Because, in practice, we're working with
screens that
are and
I'll show you a couple pictures of those screens. One thing in
that mention about sampling so we have
spatial resolution and
then we also Have the precision with which You're storing the
information and
what happens if we store one Death per sound now,
you Know
shades of gray if
so how many distinct values. Do we get the name gets,
what's the precision? Which you can store or sample 256,
different colors.
Yeah,
so if the interpretation of color is
it could be colors, but if we're talking about grace together,
might talk About levels. So so that's
enough said about that. So
what if we have i
What if we store defense for red, green and blue channels? Is
everyone familiar with RGB as a concept.
So we have a tri stimulus model of colors that we'll talk about
in more detail later on.
But images are generally
expressed in terms of R, G and B.
Anyone know what 256 times 256? Times 256? Is? I
so that gives us the possibility of adding to 16 point 7 million
give or take colors in the image. So that gives us a lot of
precision compared to one bit, and we might end up there are
formats now that go beyond 24 bits we might also Have RGBA
delta, so that
would be three, two bits. Two bits per pixel. That gives us
much more flexibility. So the alpha channel controls the
transparency. So we can, when we're editing images, we have
very fine grained information
That lets us cause images
and do different effects you
Sorry, I Just want To Get I
so make these slides available And
So
how many people have dealt with WebGL? I forget too. How many
people have had experience with WebGL To outside of the lab this
Week?
Okay, I
so we create A canvas in HTML, html5, Perhaps. You.
So the HTML describes, describes the page, so we might have the
canvas and some controls.
So that's the
is so are you familiar with document object model as A way
to have JavaScript interact with HTML?
Okay? Do it.
So we talk about shaders. So the way the examples in the textbook
go, the shaders are put inside the HTML file. That's not the
only way it can be done.
I think it's a reasonably good way to do it, and it works, so
we'll stick with it. I
So JavaScript is running on the browser, and it's using local
resources than a local GPU.
So this gives you, if
you can see it, it gives you the address of the page at the top.
If interactive computer graphics.com/code/zero, two,
slash triangle at HTML.
So the shader,
so there's a vertex shader and there's a fragment shader.
The vertex shader deals with vertices, strangely enough, and
the fragment shader deals with the pixels apart from the
vertices. So we'll see
that distinction more clearly
later on in the semester. Right now, we use a script tag to
define the shader code so for the vertices we're getting the
input of a four position vector.
A position is its name and
so GL, underscore, position is a standard variable name,
so we're just assigning value
of the input variable to the GL position
fragment shader
we're dealing with the color.
We're using medium precision float. Now we're outputting a
four element vector for the fragment color. So all we're
doing in this shader is saying the fragment is what Color is
it?
Pardon me, yeah, it's red because I
so we have a one in the first position of the vector that says
red is one or full on. You
might also see red as 255, 004, 00, or i
Does anyone recognize that that location? Sorry, I think you
said
that's hexadecimal. So F, F means all ones and 0000, mean
all zeros. So we're getting red, but nothing else i
So in this next bit, we have some JavaScript to initialize
the shaders, then we have triangle.js to describe the
triangle and we want to draw. And in the HTML, we're
specifying a canvas as 512 by 512, and
this JavaScript is not current.
You can tell by the var i
anyway, so in our JavaScript,
this is
saying, when the page is loaded, we try and get the context for
the canvas. So the first thing is to
use the DOM interface to find the canvas in the HTML file. So
that's this first bit, and then do GL equals canvas. Dot get
context WebGL too, so that tries to create a context for the
canvas to draw on, and if that GL variable isn't initialized,
then we have a problem. And then the next part, we're specifying
three vertices for the triangle. So
then we open the viewport, where we set up a viewport, so from
zero to 512 and zero to 512 and We say clear color is, is what?
Yeah, white, I
so that we create a program
that combines the context
with the vertex shader and the fragment shader that we have,
and then we say to use that program.
So our first step, our next step, is to create a buffer and
load the data into the GPU, so we create a buffer, then we bind
it
to the as An array buffer, and then we put the data from those
from those three vertices for the triangle, into the array
buffer, and we say that we're going to use it for static
drawing. So later this semester, we'll see other examples of that
so then we have data in the buffer. So we're making now the
connection between the buffer and the variables.
So a position is get attribute attrip, location program a
position. So we're looking
to match up the a position in the shader with our
JavaScript,
then we get a point We make the connection.
So the data we have is two dimensional. That's what the two
is, GL fluid is a type, and then the other parameters are
important
for this use. Then we enable the attribute, enable vertex
attribute array a position. So we've analyzed the connection,
we've described the data that's there, and now we render. And
render is setting the color bit
it's the effect of the first line is to clear the screen to
white, and then we draw the arrays. We draw triangles based
on the data we've stored. So we start from index zero, and we
draw three vertices,
so we get a red triangle out of this. We can do more complicated
things. That gives you a structure for Web GL, two
programs and us. I apologize for not mentioning WebGL two until
today. You
so let's talk a bit about
computer graphics. So computer graphics is,
is all these things. So it's hardware and software and
applications. So we're dealing with all aspects of creating
images with a computer. I
What do you think about this image?
Anyone impressed? I
does it look photo realistic?
Yeah, maybe gender or anything.
Yeah, we can. I
we can think of a number of applications. Lender is nice
because it's Open Source,
so We can If
so this is a computer generated image, in case anyone was not
sure about that. I it.
So there are different elements. So what do we have to do to come
up with a polished image like that? What are the elements or
the steps we need to do to create an image like that?
Yeah, we can just make a shape like this thing first, like just
like Bob after, we can just add the layer of texture on it, the
Golden type of image. What we are seeing here this
Yeah, so we have the model
texture.
More material.
What else is missing? Lady, yeah,
sorry about that. I didn't need to scratch my nail chalkboard. I
anything else that's missing part B,
background, I'll
say we can put that here. I
The viewing we have to set up. We need to also make virtual
camera to record the scene I
so here's an outline of the basic graphic system. We have
input devices, then we have a CPU and then the GPU, then we
have a frame buffer that gets The contents of which get
displayed on the screen. So
so a friend buffer is, in a way, like a piece of film that we're
exposing in a camera,
so the frame buffer stores the image
that we're Creating the recreation.
Does that make sense.
So we talked a bit about this other days. So here's what a
cathode ray tube looks in a schematic form. I
so we can have a vector display,
or we can impose scanning. We time, we can write the contents
of a frame buffer to a display like this, but it's need to
refresh the picture on the display before it starts to
fade. So that's a limitation of graphic systems.
And here's a depiction of the shadow mass we talked about last
day. And
so we have a red, green and blue dots on the inside of the
screen, and we have three electron guns that are aimed to
excite the phosphor on the inside of the screen, and to
pick those dots of color, the red, green and blue colors are
close enough together so that we perceive a single color at that
spot.
So that's that's the way we get a bitmap displaying on the CRT.
So we can talk. So here's a wireframe model of that object
that we have
pictured a couple of screens ago. I
Has anyone ever heard of Sketchpad before? And it's quite
cool if
So WebGL, two came from OpenGL, which came from efforts in
European efforts, there was GKs and there was the core standard
in North America,
here's an ensemble. When we zoom in on the left, it looks like a
very nice, high resolution picture, but if we zoom in, we
can see the pixels, those individual samples that make up
the image.
So here's an advancement as well, going from wireframe to
polygonal models. I
it so we can,
from that polygonal model, we can make it look much smoother,
and we'll talk about that later this semester. Environment
mapping, Does anyone see Terminator two? That's an old
one. I mean, there's so many Terminator movies now it's hard
to keep track of them. But he the Terminator that was sent to
get the Arnold Schwarzenegger Terminator looked like he was
made of mercury. He could transform himself. He so that
was using environment mapping to make it look that much more
realistic.
Yeah, my examples are a bit old, but I
Okay, so we can do bump mapping, so we have the same surface, but
we treat the information on it differently so we can create
more interesting effects. So we're not adding complexity to
the model, but we're using it in different ways. We're
I'll just here's a picture of a flat panel display so that we
have the light emitting elements sandwiched between the vertical
grid and a horizontal grid. So if we send a value along a
vertical and a horizontal wire, then we activate the.at the
intersection. Now I've kept you for two minutes longer than a
lot of I apologize. Please stop so we can finish this off on
Monday. Thank you for today.
Have a good rest of your week, and I'll be around tomorrow for
office hours if you want to come and see me. I Evening.
Which one is like your office for
dropping an office hours.
College West 308.22

Responses

What important concept or perspective did you encounter today?

I feel like Graphic systems, APIs and color knowledge was important concept
WebGL2 code snippets
Some important topics I encountered were immediate-mode graphics, retained-mode graphics, when A1 is due tentatively, office hours, info about wiki contributions, amount of bits per sample for storing colour (1 bit is black and white, 8 bit is greyscale, 3x 8 bit is rgb, and 32 bit is rgba), programming with WebGL2, and sample code from textbook slides.)
How computer generated images are made. I wasnt aware of the process/components.
Discrete vs Continous
An important concept I encountered today was vertex shaders, fragment shaders and how we can make a virtual image to look super realistic with modelling, texture/material, lighting and viewing. Another important thing mentioned today was the GEneric Flat Panel Display and how there are 3 types. the vertical grid, light emitting element, and the horizontal grid.
programming pipelines
WEB GL
An important perspective for me today, was the components of a computer generated image
Setup of WebGL
I loved the example of that ball you gave
We learned about the immediate-mode graphics, color space from number of bits, WebGL, and frame buffer.
Chapter 1
Today, I encountered the difference between immediate mode graphics and retained-mode graphics. Immediate mode draws things quickly and doesn’t save any information for later use, while retained mode stores the geometry information in the GPU. I also learned about the difference between bitmaps and vector graphics, and how we handle colors and precision in digital images, and how to program with WebGL2.
i became to know about WebGL 2 today. We will program with WebGL2 using html5, javascript and dom. I think we are kind of drawing some shape/image using WebGL2.
the difference between immediate mode and retained mode graphics, and how the retained graphics using GPUs, allow for more efficient rendering and better performance in games

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