GPUs, Shaders and OpenGL

This past week I've gone on an adventure learning OpenGL, WebGL, GLSL and more all in an effort to get a fast Mandelbrot Set render. It's been a ton of fun and I share my experience with Huiqi and you. Here is my repo learn-opengl where I've posted a curated list of learning resources for OpenGL: https://github.com/airportyh/learn-opengl.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : the the this mandelbrot set app that
00:03 : i've been working on
00:06 : um
00:07 : i have this user interface
00:09 : where you're able to like zoom in and
00:13 : pan like in google earth but this is not
00:17 : fast enough for me
00:19 : i want i want this to be faster it's
00:22 : okay
00:23 : like you can see it takes a while to get
00:26 : a high resolution image here
00:29 : i if there's a way to make this better
00:33 : then i wanna
00:35 : then i wanna make this faster
00:37 : more responsive
00:39 : [Music]
00:40 : and i know
00:43 : a thing that can do it
00:46 : and that's that's the
00:49 : gpu graphics
00:51 : accelerator
00:53 : that's on most computers nowadays
00:56 : have you heard about the gpu
00:58 : you're not a gamer but gamers would know
01:01 : what this is i'm i'm not a gamer either
01:04 : so i only have
01:07 : cursory knowledge
01:09 : of the gpu
01:11 : but um
01:12 : actually on your computer
01:15 : it's basically a separate cpu in your
01:17 : computer other than other than your main
01:20 : cpu
01:21 : and
01:23 : it it's
01:24 : it's it's a cpu that's designed to for
01:28 : graphics designed to speed up your
01:30 : graphics and it doesn't have only one
01:34 : cpu it's actually got tons of
01:37 : little cpus on it so it's like i
01:41 : remember when i was in college one one
01:43 : of my professors would say the cpu is
01:45 : like a hungry hungry horse
01:48 : and and you want to
01:51 : you want to feed it
01:52 : as much as it can eat
01:56 : to keep the throughput of the computer
01:58 : going um a gpu is like
02:01 : you got a herd of horses
02:04 : there
02:05 : waiting to do work
02:07 : and
02:08 : it is targeted for doing
02:11 : it's targeted for doing computations
02:13 : that get rendered directly on the screen
02:17 : although it can be repurposed to do
02:19 : other things as well
02:22 : about this mac thing
02:25 : and you can see that
02:27 : on my mac
02:29 : my graphics processor my gpu is the
02:33 : intel irish iris graphics
02:37 : 6100 chip
02:39 : um
02:40 : so
02:42 : um
02:42 : and i've i've never learned that much
02:45 : about my
02:46 : gpu chip
02:48 : but uh
02:49 : i did a google search the other day
02:53 : and uh
02:54 : i looked up some specs on it so this is
02:57 : the graphics chip that's inside my
02:59 : computer
03:02 : and
03:04 : and uh the gpu name is actually
03:07 : broadwell gt3 but but this is a pretty
03:10 : crappy graphics chip because the the
03:13 : gamers
03:15 : like because because this is
03:17 : my mac is a
03:18 : like i have like a five-year-old
03:21 : macbook pro
03:23 : people who
03:25 : are into gaming they would buy
03:28 : a
03:29 : nvidia
03:31 : graphics chip a gpu
03:34 : from
03:35 : like like if you
03:37 : google for best
03:39 : gpu
03:41 : um
03:42 : oh that's expensive
03:45 : wow
03:46 : thousand dollars for a graphics card so
03:49 : so yeah yeah so gamers with uh what's
03:52 : the best one there's the radeon it's got
03:54 : two fans because it's gonna get so hot
03:57 : you know uh or these they have um
04:02 : they're like some of these have a
04:04 : thousand cpus on the graphics like a
04:07 : thousand tiny
04:09 : processors on the graphics trip
04:12 : and that's pretty insane considering
04:14 : that your main your main cpu
04:17 : uh maybe you have dual core or quad core
04:20 : has two or four cpus on your main chip
04:24 : the graphics card
04:26 : has
04:27 : a thousand chips i looked up the spec of
04:30 : mine
04:32 : and it seems to say that mine has 384
04:38 : they're called shaders
04:40 : um
04:41 : and a shader is a cpu that's dedicated
04:45 : to
04:46 : doing computation
04:48 : to calculate the color
04:51 : of a particular pixel on your screen
04:54 : and
04:55 : the the reason we need this is because
04:57 : if you want the smooth scrolling
05:00 : that you see
05:02 : it's pretty smooth uh or uh on an iphone
05:06 : um that was one of the major selling
05:09 : points of the iphone that like the first
05:11 : very first iphone that came out it has
05:14 : smooth scrolling
05:15 : like it's it was very responsive the
05:18 : graphics was very fast
05:20 : and
05:22 : the reason they were able to do that is
05:23 : because they have a they had a gpu
05:27 : that can
05:29 : calculate
05:31 : the the
05:32 : image that needs to go on your screen at
05:34 : any moment
05:36 : using extra processors like it's the cpu
05:39 : has got extra help basically
05:42 : to calculate the image that needs to go
05:44 : on the screen
05:46 : so how do you make this
05:48 : work or do you have to like how do you
05:51 : interact with their api or do you need
05:54 : to
05:55 : in order to calculate faster
05:57 : yes
05:58 : in order to write programs that run on
06:01 : the gpu
06:03 : typically
06:04 : this is not the only way but this is the
06:07 : typical way
06:08 : um you use
06:10 : uh first of all you use a
06:12 : framework called opengl so it open just
06:15 : been around for many many years uh like
06:18 : i i
06:19 : play with it in college
06:21 : um
06:22 : in computer graphics class
06:25 : uh it has evolved and changed a lot
06:27 : since that time
06:29 : um
06:30 : and
06:31 : what
06:32 : and nowadays
06:34 : in modern opengl
06:36 : one part
06:38 : one very big part of opengl is shaders
06:42 : which which is you know these shaders on
06:45 : your gpu and there's a shader language
06:50 : called glsl
06:54 : that you would code in
06:56 : uh to write programs that would run on
06:59 : your gpu
07:00 : and this is usually the domain of game
07:03 : developers
07:05 : um however any anyone interested in uh
07:10 : computer graphics might get into this
07:12 : but uh this is
07:14 : glsl code
07:16 : um
07:18 : it looks
07:19 : mostly like c so it shouldn't be that
07:22 : foreign
07:24 : and it wasn't too hard to pick up
07:26 : for me
07:27 : um
07:28 : it has these types that has these vector
07:31 : types and matrix types
07:34 : um that are built in
07:36 : and uh and the the page i'm looking at
07:39 : right now is actually a documentation
07:42 : for webgl which is
07:44 : opengl for the web
07:46 : uh which is possible as well
07:50 : and and that that's what i want to use
07:52 : for for my my thing
07:55 : questions well how can that
07:57 : glsl shaders
07:59 : like integrate with the web
08:02 : so the short answer i'll go to the short
08:05 : answer first the short answer is uh the
08:08 : canvas
08:10 : i'll go to the can i use
08:13 : page to show you the
08:16 : browser support for webgl
08:19 : okay so basically all the major browsers
08:22 : even ie
08:24 : has support for webgl and the way you
08:27 : use webgl is a webgl is part of
08:30 : the
08:31 : canvas api
08:33 : normally when you use the canvas api
08:35 : you're like can does that get context
08:39 : 2d
08:40 : and then you get a context right and
08:43 : then you can draw your stuff yeah but
08:45 : now you instead of doing that you say
08:47 : get context webgl
08:50 : and you get a handle that's gl
08:53 : and
08:54 : the gl api is
08:56 : substantial completely different
08:59 : from from your normal 2d context
09:02 : and the way you interact with this geo
09:05 : uh
09:06 : [Music]
09:07 : there is a bit of a learning curve i
09:09 : have to say uh but but it's very similar
09:11 : to opengl and and if if you have learned
09:15 : opengl this will be very familiar to you
09:19 : but if you haven't then you have to go
09:21 : through that learning curve
09:22 : um
09:24 : uh i think i want to draw some diagrams
09:26 : to give you a big picture of how things
09:29 : work
09:31 : first of all i have to admit i'm very
09:33 : much a beginner at this stuff so i don't
09:36 : claim to be authoritative on this
09:39 : but um the way i understand it is
09:43 : you have a gpu
09:46 : but on the inside there is hundreds
09:50 : or even a thousand
09:52 : tiny cpus in here
09:54 : okay
09:56 : there's a there's a lot of workers
09:58 : we want to get these workers to work
10:01 : basically we want to give them jobs
10:05 : too
10:06 : so one of the problem of generating this
10:08 : mandelbrot set is
10:10 : you saw what we would like even in the
10:13 : little demo that we did
10:14 : it was very slow right
10:17 : um and basically we have to go through
10:19 : every pixel on the screen
10:22 : and do this loop
10:23 : and you can choose how many iterations
10:26 : you want to go
10:27 : but if you want to get you know higher
10:30 : iteration to get more detail it's going
10:32 : to take longer right
10:34 : um
10:35 : and here i chose to go 100 1000
10:38 : iterations
10:40 : with with a sort of high resolution
10:43 : image i'm generating
10:44 : it's a lot of work
10:46 : so
10:48 : so what we're able to do with a gpu is
10:51 : those work because the calculation for
10:54 : every single pixel is completely
10:56 : independent of the calculation for a
10:58 : different pixel so they're completely
11:01 : independent work we can do all of them
11:03 : in parallel
11:05 : if we want
11:06 : if we wanted to
11:08 : and so the trick is like hey i'm going
11:10 : to package up this program
11:12 : you know i'm gonna
11:14 : have this draw i'll call this program
11:17 : draw
11:20 : mendo
11:22 : pixel
11:24 : a practical program just to draw one
11:27 : pixel on the screen
11:29 : and then
11:30 : it's gonna have inputs and it's gonna
11:33 : have outputs and the inputs will
11:35 : probably be you know
11:37 : for which pixel on the screen
11:39 : am i drawing this
11:41 : for right and the outputs would just be
11:44 : a color
11:45 : like the inputs would be like the
11:47 : location probably just the location
11:50 : probably maybe some other stuff
11:53 : like the number of iterations maybe or
11:56 : the color what
11:58 : color color palette if you want to
12:01 : change color palettes
12:03 : whatever input you want to give to it
12:05 : you can define them
12:07 : and then pass them in
12:10 : number of iterations
12:12 : um and then you pack it you write this
12:15 : program
12:16 : and it's going to be written in
12:19 : glsl
12:21 : or also called the shader
12:25 : the shader language
12:29 : i guess sl
12:31 : it means shader language
12:36 : so you write this program and use you
12:40 : you you create a job
12:42 : running this program
12:43 : for every pixel
12:46 : that you want it to render on the screen
12:49 : and we just dispatch this program to
12:53 : every available tiny cpu that's in your
12:56 : gpu and have them work on it all at the
12:59 : same time
13:01 : and so
13:03 : before if you don't do this
13:05 : what is the current uh way of work the
13:09 : gpu working um i guess the same thing
13:12 : needs to be done so do they down
13:14 : are they done like one by one that's why
13:16 : it's slower
13:17 : oh the the implementation that we did it
13:21 : does not use the gpu at all
13:24 : uh okay so the g in this case the gpu
13:27 : would wouldn't be used at all
13:29 : or
13:30 : okay
13:31 : so the gpu only comes to work when you
13:34 : write specific program to make it work
13:36 : it does not tap into the operating
13:38 : system okay exactly so the last time we
13:41 : did this right we have a nested for loop
13:43 : and then
13:44 : each pixel we have to call this function
13:47 : and then it's doing this for loop here
13:52 : all of this stuff is running on your cpu
13:56 : and so
13:58 : and it's in javascript is single
13:59 : threaded which means it's only using one
14:02 : of your cpus even if you have dual core
14:05 : or quad core it's still only using one
14:07 : of those
14:08 : two or four
14:10 : and all the work is happening on that
14:13 : cpu um if you're able to employ the gpu
14:17 : you're like calling in the cavalry it's
14:19 : it's like
14:21 : it's like
14:22 : one of those um
14:23 : i don't know
14:24 : the gangster versus police movies
14:28 : you know it is the one like the police
14:31 : infiltrates the gang and then like the
14:34 : cavalry is coming and then all these
14:36 : police cars come rushing in um
14:39 : like
14:40 : we have hundreds or thousands of workers
14:44 : that will work on your job in parallel
14:48 : so instead of instead of you
14:51 : going through here when you're doing it
14:53 : for the you're doing one after another
14:57 : but we're saying no do all of for every
15:00 : xy
15:01 : make that a job
15:03 : and send it out
15:05 : send it out to these tiny processors and
15:08 : have them come back with the color
15:11 : and then the color will go into this
15:13 : buffer that becomes an image buffer and
15:16 : when it's all done it gets splattered
15:18 : onto the screen right away
15:21 : okay so this can only do like rendering
15:24 : related stuff you wouldn't um no you can
15:28 : repurpose it to do
15:30 : other things such as mine mine bitcoins
15:34 : or anything or any computationally
15:37 : expensive thing because you could have
15:39 : it compute
15:41 : the graphics buffer and then you you
15:43 : have other code read the data back out
15:46 : from the buffer to do other stuff if you
15:48 : want to
15:49 : so you can repurpose it to do other
15:52 : computing intensive things
15:54 : but uh it it it was designed for the
15:57 : graphics case though
15:59 : so i guess this is a very simplified
16:02 : picture um
16:04 : of
16:05 : this
16:06 : but uh
16:07 : to get more detail
16:09 : there's actually this first of all this
16:12 : program that you're writing is called a
16:14 : shader
16:15 : right
16:16 : we're writing a shader
16:18 : um and if you google for shader
16:21 : there's plenty of
16:23 : info on the internet about shader stuff
16:26 : there are two types of shaders
16:30 : the one is the vertex shader
16:35 : and the second one is the fragment
16:37 : shader
16:40 : and
16:41 : the fragment shader is the one we we
16:44 : would use
16:45 : um
16:47 : because the fragment shader is the one
16:49 : that will
16:50 : work on every single pixel that we're
16:53 : rendering
16:55 : the vertex shader is
16:57 : used for
17:01 : marking
17:02 : regions that are to be
17:05 : that are to be painted by the front so
17:08 : so
17:09 : the front the fragment shader is like
17:11 : the bucket fill tool in your image
17:14 : program
17:15 : it's it's like
17:16 : uh
17:18 : hey draw a region for me
17:21 : and then
17:22 : if you have a region for me and tell my
17:25 : fragment shader
17:27 : to paint it i'll go to each pixel
17:30 : and and use this program to to color
17:33 : each pixel within the region okay
17:37 : uh the job of the vertex shader is to
17:40 : define what these regions are
17:42 : so so the job of the vertex
17:45 : shader is because usually in your
17:47 : program you have a representation of
17:50 : objects in the world and and
17:53 : and the locations
17:54 : and size of each object
17:57 : and usually that's different like if you
17:59 : have um
18:00 : a
18:02 : box
18:05 : then you have you probably represent
18:08 : that as hit this point and this point
18:10 : and this point and this point and this
18:12 : point in this point and this point etc
18:16 : in in your program you have those data
18:18 : structures representing those points
18:20 : and a vertex is saying
18:23 : hey i would like i don't care what your
18:26 : 3d world is i just want you to tell me
18:30 : the visual representation of your box
18:34 : and and usually you just describe it as
18:37 : a series of triangles
18:39 : because in computer graphics we have
18:41 : invented
18:43 : fast algorithms for dealing with
18:45 : triangle so if you have a box like that
18:47 : you would separate it out into these
18:50 : triangles
18:52 : yeah i know i know it's kind of crazy it
18:56 : you would you just represent your box as
18:58 : triangles
19:00 : and a vertex is a vertex of a triangle
19:03 : usually so you you send for each
19:07 : point in a triangle
19:10 : you would package that as theta like the
19:13 : coordinate of this is x
19:15 : y
19:17 : x one y one and the coordinate of this
19:21 : is x
19:23 : 2 y 2 etc you would package these
19:27 : coordinates this is like this is vertex
19:30 : 1
19:31 : this is vertex 2. this is vertex 3 this
19:35 : is
19:36 : vertex
19:37 : 4 etc so for each of these vertexes
19:41 : you send it into a vertex shader program
19:44 : and the vertex and then the vertex
19:46 : shader program can do a translation for
19:49 : you if it's needed because you can't
19:51 : because you depending on which
19:53 : perspective you're looking at this
19:56 : object
19:57 : from
19:58 : you might need to translate this
20:01 : the location of the
20:03 : object onto a corresponding pixel on the
20:06 : screen so you're like this should map to
20:08 : here this should map to here
20:11 : this should map to here and that's my
20:14 : first triangle so so the job of the
20:17 : vertex shader is to translate the
20:19 : coordinate in your 3d world to the
20:22 : coordinate system on the screen
20:25 : and then once the vertex shader has
20:27 : decided what those what that region is
20:31 : based on these vertexes are
20:33 : on the screen and then it sends it over
20:35 : to the fragment shader and go through
20:37 : each pixel within the region and decide
20:40 : a color for that pixel
20:44 : okay so basically the idea is
20:49 : you tell them
20:51 : uh the
20:52 : the x and y
20:54 : of well i guess the accent
20:56 : that you tell
20:57 : [Music]
21:00 : in the context in the canvas context
21:02 : would that be the canvas uh
21:06 : coordinate x and y or
21:09 : like how do you define the x and y in
21:11 : that in opengl
21:13 : dx and y is usually scaled so that the
21:16 : viewable portion
21:18 : on the screen
21:20 : has a zero zero
21:23 : in the center
21:25 : it does just you can always scale it to
21:28 : your liking but
21:31 : uh
21:33 : but there's a standard
21:34 : uh viewable part
21:37 : that so so the x and y is based on that
21:39 : standard viewable part
21:42 : and then you have you have to take care
21:44 : of scaling it
21:46 : to and from the screen coordinates
21:49 : but but when you're sending the x and y
21:51 : coordinates to the vertex shader
21:54 : it's based on the coordinates in this
21:57 : world
21:58 : okay i see that's the high level concept
22:02 : i'll just briefly show you some code we
22:04 : don't have to go too deep into it it's a
22:07 : bit much
22:08 : for
22:09 : for someone who's new to it i really
22:11 : felt like i was like in a foreign
22:14 : country for a week
22:16 : coding this thing because it's so
22:18 : different from what i normally do
22:20 : um
22:22 : so uh yeah so here's my canvas and this
22:26 : is nothing different from what you've
22:28 : seen before
22:30 : but the part that is different is
22:33 : first of all you you when you get
22:35 : context you get a webgl context and then
22:38 : you have this geo object to work with
22:41 : okay this is the setup code
22:43 : um
22:45 : i create a vertex shader
22:48 : and i compile it
22:50 : and here is where i
22:52 : give the source code
22:54 : to the vertex shader
22:56 : and the source code
22:58 : why did i even make oh i i use someone
23:01 : else's code so
23:03 : so this vertex shader code i have it as
23:07 : an import
23:08 : from here
23:10 : so
23:11 : this is my geo sl code
23:14 : and in my case the vertex shader is
23:17 : extremely
23:18 : simple all i had to do was define a
23:21 : rectangle that covers the entire screen
23:24 : and then get the fragment shader just to
23:26 : paint every single pixel right
23:29 : so
23:29 : so this is basically saying
23:32 : and
23:32 : each vertex is going to get sent into
23:36 : this program and that vertex is going to
23:38 : be this position here
23:40 : and i'm just saying
23:42 : just take the position as this i'm not
23:44 : going to do anything different to it
23:47 : back here so i compile the vertex shader
23:50 : and if there's a problem i'll print an
23:52 : error message
23:54 : that's important because otherwise it
23:56 : was hard to figure out what went wrong
23:59 : and then i do the same thing with the
24:00 : fragment shader
24:02 : the fragment shader source
24:05 : uh
24:06 : i'm using this one i'll show you the
24:08 : simple one
24:10 : like like like uh so i could change it
24:12 : to the single
24:16 : there's another story too
24:18 : which we don't have time to go into
24:21 : this is a the program that paints one
24:23 : pixel of the mandelbrot set
24:25 : and and the coordinate is
24:28 : given by this gl point chord this geo
24:31 : point chord is the location of the pixel
24:34 : that i'm painting
24:36 : and then i have the transform matrix
24:38 : to
24:39 : uh to scale it
24:42 : because in that's for the user to pan
24:45 : and zoom so this the matrix has
24:47 : information about how much to scale down
24:50 : into
24:51 : and how much
24:52 : left and
24:54 : up down offset to to apply to that point
24:57 : before going into it
24:59 : and then this this is the iteration i'm
25:02 : iterating a thousand times
25:04 : and then i'm doing that calculation in
25:06 : terms of their vector and then at the
25:09 : end i'm doing a coloring
25:11 : scheme
25:13 : i think i might show you this
25:16 : so this is yeah more or less what i had
25:19 : before but you can see i'm zooming in is
25:23 : it's not perfectly smooth but it's
25:26 : pretty responsive and definitely much
25:28 : faster
25:29 : than my version like with more
25:33 : with still high quality of detail even
25:35 : as it's zooming in
25:38 : um so so
25:40 : but the problem is now we're starting
25:43 : getting pixelated
25:45 : um and that's that's the other story
25:47 : maybe i'll save that for another time
25:50 : okay
25:51 : because that's a long story and of
25:52 : itself
25:54 : so yeah you have to do this stuff
25:55 : compiling the two shaders you do that
25:58 : programmatically and then you plug it
26:00 : into the program you create the program
26:03 : attach the shaders to the program and
26:04 : say link the program that's like
26:06 : compilation compiling the program and
26:10 : and then you and then you tell gl to use
26:13 : this program and then and then the way
26:15 : you
26:16 : actually draw to it
26:18 : you say
26:19 : draw a race
26:21 : that's that's this is the actual draw
26:24 : command
26:24 : and what draw arrays does
26:27 : is
26:29 : plot the points
26:30 : we we actually set up the points earlier
26:34 : these are the points we set up these
26:36 : points to be the vertexes
26:38 : that they get sent to the vertex shader
26:41 : negative 1
26:43 : 1 is here
26:45 : 1 1 is here
26:47 : negative 1 negative 1 is here
26:50 : so the this is the first triangle
26:54 : the first three points we're using the
26:56 : triangle mesh
26:58 : which means um
27:00 : then the next point after this is one
27:03 : negative one which is here
27:05 : we're using the triangle mesh method
27:07 : which will automatically
27:09 : infer the second triangle to be that so
27:12 : we have the two triangles
27:14 : uh that fill out this rectangle which is
27:17 : basically the whole screen
27:19 : and and that's how i am supposed to
27:23 : sort of
27:24 : specify this region
27:26 : and then each of these vertex points go
27:29 : to the vertex shader
27:31 : the vertex shader just pass them right
27:33 : through it doesn't do anything to it
27:36 : just pass these points right through and
27:38 : that defines the region
27:40 : and then the fragment shader starts
27:41 : going through every pixel and painting
27:43 : them
27:44 : do you have to do any sort of
27:46 : translation between the your coordinate
27:50 : with the coordinate that the vertex
27:52 : shader used oh in this one i didn't do
27:55 : it it was implicitly done because opengl
27:58 : always
27:59 : chooses
28:01 : that
28:02 : yeah it always chooses that standard
28:04 : like this standard like oh so it's the
28:06 : same as your uh coordinate yeah so so i
28:10 : i don't have to care about what the
28:12 : canvas size is whereas in like in our
28:16 : coding like our mandelbrot set exercise
28:19 : we explicitly converted that whereas
28:22 : with opengl it does that for you
28:25 : okay sure
28:27 : but probably still have to think about
28:28 : it if you're going to build ui around
28:31 : that stuff right because i have to
28:32 : convert the mouse coordinates et cetera
28:35 : but yeah i just i just want to give you
28:38 : like a
28:39 : introduction to it
28:41 : yeah i think the graphic stuff is really
28:43 : fun
28:44 : it's like
28:46 : mass
28:47 : yeah that does uh um a while back
28:51 : i'll share this as well um
28:54 : i was learning opengl at one point using
28:58 : some of these resources so so this is a
29:00 : curated list of resources that you can
29:03 : use
29:04 : and and this is some of my code
29:07 : that i ended up making
29:09 : there's a lot of good resources there
29:10 : are some new ones that i found the other
29:12 : day that i might add to this list
29:15 : but um
29:17 : yeah just a final word about the stuff
29:20 : the mental model of
29:22 : how you program this stuff
29:24 : is very different and there's a
29:26 : different language to learn so there's
29:29 : also yeah good good learning resources
29:31 : for webgl but but then again like the
29:33 : the web geo resources
29:37 : they
29:38 : kind of assume you have done opengl
29:40 : before
29:42 : no they won't go to the
29:45 : you know
29:46 : the basic concepts
29:48 : as much probably
29:50 : one thing about webgl is they use opengl
29:55 : es
29:56 : instead of
29:57 : the normal opengl
30:00 : and opengl es
30:02 : means embedded systems
30:05 : and
30:06 : the embedded system means your mobile
30:10 : phones
30:11 : so
30:12 : most of our mobile phones that we use
30:14 : have a gpu inside of it
30:17 : and and that's what
30:19 : that's what allows the scrolling to be
30:21 : smooth
30:22 : among other things
30:26 : so so basically webgl wants wants to
30:30 : sort of
30:31 : normalize itself
30:33 : so that it can work for mobile phones
30:37 : so so it so it's not the bleeding edge
30:40 : because the the desktop version of
30:43 : opengl is more bleeding edge and has
30:45 : more advanced feature
30:47 : etc but webgl uses a sort of a smaller
30:50 : version which works on the mobile
30:52 : devices
30:54 : in my z-plus flex we had the exercise of
30:58 : like uh translating a picture like a png
31:01 : ad like watermark and change like the
31:04 : color scheme
31:07 : well it's not
31:08 : it's not this but it's
31:11 : it's simpler it's it's just translating
31:13 : like pixel by pixel but
31:16 : but it's interesting i think it's fun
31:19 : yeah yeah yeah you can you can do that
31:22 : using a shader actually
31:25 : so yeah what you could do
31:27 : it might be an exercise later down the
31:30 : road where
31:32 : uh you will need to
31:34 : uh put your image in as a texture
31:37 : actually
31:38 : like like that's how you work with image
31:40 : fragments
31:42 : you make the image a texture
31:44 : send it to opengl and then you say hey
31:47 : uh you do the vertex shader to just draw
31:50 : a rectangle like i did and then in your
31:53 : fragment shader that's when you do the
31:55 : translation
31:57 : you read in the pixel from your texture
32:01 : and then you do any calculation needed
32:04 : to change the color
32:06 : in the fragment shader and then if you
32:08 : do that
32:09 : it'll be much faster because it's doing
32:11 : it using the gpu processors
32:15 : all right maybe
32:16 : that's something that
32:18 : it would be a cool thing to learn for me
32:20 : because i did the normal way if i can do
32:23 : it this way the same thing in two
32:26 : different ways yeah definitely a good
32:27 : way to learn things