Hello! Welcome to another Q&A Coding Rainbow video
This question comes from blinkityblank Hi, blinkityblank!
And blinkityblank writes: "WebGL: How to use it and make a 3D project in p5.js"
So, im gonna try to answer this question in this video
and one thing i want to say right at the outright is, very much
this video is really going to be something that's kind of only relevant
for a very short period of time, because, WebGL, the implementation of WebGL in p5.js
is something that's very much in progress, it's one of the newer aspects
of p5.js and there are certain things that worked beautifully, certain things
that haven't been implemented yet, there are probably bugs yet to be discovered
so what I want to do is kind of like look at all of those pieces there, show you where
you can find some resources to get started, and, and then also what is it you
can do to kind of help make WebGL & p5.js work better, contribute to it, file a
bug report that sort of thing so that's kind of my plan for this video
I'm trying not to walk into any more furniture, but, let me just say
maybe, maybe you don't even know, like, what-, what is this WebGL thing in the first place?
so okay anytime, you have-, you're running a program and it draws pixels
let's-, let's do that, I have some p5.js code here and I'm going to just draw an
ellipse in the center of the window
that's 100 by 100 I'm gonna go back to the browser I'm gonna find my ellip-
my sketch, and then you can see I have my circle
so, how did that circle appear?
well, p5.js as a library has a rendering engine built into it, now p5.js could
have its own rendering engine which individually says, knows how to calculate
every pixel of a circle and draw them to the screen
in fact, p5.js is a layer on top of, uh, of a rendering engine that's part of the
HTML5 Canvas
so, you could write all-, you could make this exact sketch without p5.js
you just have to know the raw JavaScript canvas API, you say things like give me a
context, and I want to like, set a stroke on my context, and move my pen
I don't know, all sorts of stuff there. So the nice thing, one of the reasons why I like
p5.js is it has a sort of comfortable, friendly,
quick and-, quick and easy to use syntax, all I have to do is say ellipse()
so, that rendering engine
using HTML5 canvas, is the default rendering engine of p5.js
however, there's another rendering engine you can use and what's special about
this rendering engine is two things
so first of all, I can change this rendering-, I can change-
how do I change the rendering engine?
I change it by adding a third argument to createCanvas(), in this case, i want to
say i want a canvas that's 400 by 400 and I want it to be a WebGL
I want it to be a web-, use the WebGL rendering engine
so, what's special about WebGL? #01 is it supports 3D so suddenly I can
create the illusion of three-dimensional perspective in the sketches
again, there's no actual 3D here
this is-, this is a wall! Can you hear that wall? (Dan proceeds to drumming the beat for the next 'Coding Rainbow remix song')
OK, I uh-, anyway, this is a wall, it's two-dimensional
it's green, and that's why you see my computer screen, I, I get a little bit obsessed with that
but anyway, the point is, uh-, there is no 3D, but the rendering engine
will take your code, which implies the third dimension, and then figure out how
to render it so that the viewer has the illusion of three dimensions
but we don't need-, yeah
anyway, so, I could refresh my sketch and look at that! there's still an ellipse there
so, I'm kind of surp-(rised), I'm thrilled and surprised to see that
because, one of the things about Processing, Processing Java, which is a
project started in 2001, which also has a 3D rendering engine, was this sort of goal
of being able to use 3D and 2D fluidly in the same sketch, to be able to kind of
use the same concepts, a lot of the same code
you don't need this entire other way of thinking in developing your code
moving back and forth between 2D and 3D and in many contexts that might be highly
problematic, but in a kind of friendly sketching engine that could be very useful
so, what we can do things like, I'm actually surprised that suddenly this is
doing what it's doing, but let's just keep going with this
another thing I can do is I can write box()
let's try this, and you can see, suddenly, there is a box there
now you might ask yourself the question
oh, look at that! wait a second
what's going on here? I have some suspicions...
Ooh! look at that! okay, whoa, craziness! I-, I don't know why the ellipse was showing for a while there
I don't know what I did wrong, I didn't hit save properly
but you can see *laughs* let me go back now, take out WebGL, there's the circle!
let me put WebGL back in...
and you can see what-, what appeared there? so I would say
this is per-, this is in some sense, a bug, uh, WebGL probably shouldn't draw a
strange blue and black triangle off to the right, when it has to draw an ellipse
and this is one of the aspects that's in progress, I'm kind of jumping
around here but I'm going to show you actually, this is something that currently there is a, uhh
there is currently a pull request, right now, which addresses
a lot of these bugs, this is-, has not yet been merged into p5.js
but is here, that will implement a lot of the 2D drawing stuff you might ask
well I don't want to use ellipse or rectangle or, or triangle
because I'm in 3D, I want to use box and sphere but again, you might want to have a flat
two-dimensional shape in your 3D world and that's something that's in progress
and also, this reminds me that I would like to, you know-, credit the folks
who have really put in a tremendous amount of time in developing p5.js WebGL
indefinit here on GitHub is Kevin Siwoff, uh, he has been leading the
development of WebGL p5.js, um, Karen Peng and Matthew Kaney
are two others that have been doing a lot of development that I would just mention
and if you go on to GitHub and look at the contributors, you'll find many other people
but this is a project, you know, sweat and tears, I would say blood, sweat and tears
but i don't know... it's just... how about just the sweat and tears?
How about no tears!?
there are no tears! Developing p5.js is a happy, friendly, lots of high fives and
hugs
anyway, whatever
so, um, you can see that a lot of this stuff is in progress, now let me go back
and put this box back in
we can see that the box is there, it looks strangely like a rectangle
and, um, let's try drawing a rectangle just to see when I'm trying to put a rectangle
in the middle and i'm going to say, uh
cuz I want to talk about one of the key differences here
uh, ok, look at that, so this didn't work, yet another thing that didn't work in WebGL
generally speaking, right now my sense of the current implementation of WebGL
is all of the stuff thats specific to 3D, works really well and a lot of the stuff that
is kind of going back and forth between, kind of 2D function
some of that hasn't yet been implemented
okay, so what the thing that i wanted to mention... Which i'll just get to right now is
that you'll notice that the box appears in the center of the window
so how do i specify the location of this box? Well, I didn't, I just gave it a size
so the box function, which is a 3D primitive, gets a single argument, 100
if i change that to 200
you can see the box got bigger, but, the way that you set a location of something
in three-dimensional space is with the translate function
I need to translate to a location to place the object there, the box function
doesn't actually have a position involved as part of its arguments so I
could say I want to translate to the center of the window and place the box
right?
200, 200, but now look! the box is down there...
so one thing thats very very different about WebGL rendering and p5.js is
that the default origin point, is this center, and this is more of a convention
with 3D graphics environment
the default is the center, whereas in 2D graphics
the default is the top left, so if I want the default to be the top left
I could simply just say: translate( - width / 2, - height / 2 );
and you can see, now, the default origin is in the top left, did I get that right?
anyway, I think I did, so then I can do things like, but, let's-
forgetting about that for a second i can do things like
translate( 0 , 0, mouseX ); so now you can see that box is moving closer and farther away
again, I could make this as a 2D sketch, right? I could draw a rectangle and make its
width and height bigger, or I can make it a 3D sketch and draw a box and have the
z-axis move forward and back
but I could also do things like, say, rotate(), so I can rotate by an angle
and let me add a-... let me add an angle = 0
and then I'm just going to say: angle += 0.1;
whoops! so I got an error
interesting... I wonder if I'm required to specify the axis of rotation
rotate() by default, is really rotateZ()
there we go! so you can see now it's rotating
but I think to show you that there's a 3D thing going on here
I want to say rotateX() and you can see it's rotating along the x-axis
my arm is the x-axis, and this thing is rotating around the x-axis
and I could also say, like, rotateY()
and I could say, like: angle * 0.6
and you can see now I'm rotating along the x and the y axes
and you can see the box has this sort of default shading because I
haven't done anything to specify what color should be on the sides or what
uhh.. I dont know, texture is something I can do to put an image on it so you can see
to put an image on it, so you could see this
I could change this box() to sphere()
you can see now I have a spherical, hard to see the rotation
because it's very symmetrical
I could change to cone().. Hey, look! There's a cone!
amazing! I can change this to, is there something called the torus(), maybe?
WHOA! Look at that!
Oh! i love it! Wooo! Hula hooping!
so look! There's all sorts of exciting possibilities!
all this is there! it just works
Oooo! This is great! I love WebGL!
ok, um, so you can see that you can use 3D primitives
and then position things with translate(), and rotate things using rotate()
um, so you might be asking the question now, I like this WebGL thing
could I use more? but, did I mention? I don't think I talked about
*laughs* I really should script these out a bit more
Oh look! I forgot that i can zoom in and out
okay, wait, hold on
so let's say you want to learn more about this stuff
so one thing you can do, is, there is a wiki page
Uh... This is the URL, the link to this will be in this video's description
and this has a, probably a much more coherent, sane, explanation of things that are possible
a bit about the 3d coordinate system, translate() and rotate(), as i mentioned to you
camera and view is something that I-, is also think you can do
the camera being, it was a little bit
it's sort of interesting, like let's say this pen is the camera and my fist
is a sphere that I'm going to draw in 3D
I could do this, right? I could move the sphere or I could move the camera and
visually those will have the same result, right?
the sphere is getting bigger and closer to the viewers eye
so, um, but using camera perspective
ortho() is something to create, that sort of like, flat, Q*bert style, uhh
three-dimensional look, those are functions that you might investigate
to sort of look at different ways that you can manipulate the viewers perspective
in 3D
these are all the shapes, I tried-, I did some of them; cone(), torus(), sphere(), plane(), box()
these are some other types of 3D shapes that you can render, uh, there's some more
stuff about that, textures is something that you know, again, I would- I would want
to make individual tutorials about all these topics, this really a bit of an
overview here, and i will-, i will do that at some point, maybe later
more towards the end of the summer when a lot of the features are a little further along
but you can see that you can take an image
oh boy! We should just do this right now! Look at that! Look how simple that is
ok, hold on! Stop! Wait, don't stop!
stay with me, uh, I'm going to look for a hedgehog...
image of a hedgehog
ok let's, this is a nice cute hedgehog, I don't know
do I have the rights to this image? I don't know what's going on
maybe this is bad, i'm going to save this image to my desktop under WebGL tests
hedge.jpg and then what I'm gonna do is go to my code and I'm gonna save our image
and I'm gonna say, uh, I'm gonna have-, I'm gonna add the preload function
just to make sure the image is loaded
and then I'm going to say, here, i'm going to say..
where do I say that? probably just right here: texture( img );
let's try that! Let's go back
look at that! There's, I think, a hedgehog on this spinning torus!
Ha! Let's make that a box, let's slow down the rotation a little bit
there we go, look at that! Woooo!
spinning hedgehog! This deserves some sort of music, like the hedgehog song
but I, uh, thats a little bit too much, anyway
so you get the idea this is kind of wonderful and magical
that you can do this stuff so quickly and easily *laughs*
okay, there's some stuff going on in the chat that I have no idea what it's about
ok, so that's some other stuff that's useful, text of, uh, here's another thing
that I think is really important
there are various lighting functions, so, right
ambient light, meaning light thats just as if you have this sort of glowing orb
that just kind of blasts light all throughout a room
versus a directional light, which is more like a spotlight pointing in a specific direction
versus a point light, which is like if I had a very small and bright glowing orb, about a specific spot
so like the-, the ambient light is not like an orb, that's a point light
like an orb sitting in the space, almost as if you wanted to create like a sun and the
sun is blasting out light you could put a point light where the Sun is located
um, ambient light is more like the walls of the room are glowing and just kind of
there is just ambient light everywhere so we could do something, like I could
add this ambient light function, and I'm gonna-, this would be-, uh
whoops! Ah! What happened?
ambientLight(); let's make it a nice pink light, and i'm going to go back
and I'm gonna go back, and refresh
and you can see, look! now there's some light
of course, all these things could be variables
I could also do like a point light, let's look at the point light very briefly
I should do these as separate tutorials
I lost my, getting started
okay, wai-, let's, okay, where can you find this stuff?
also, the p5.js reference is also a really good place
so let's look up the point light reference
and what does point light require?
it has a whole lot of different possible arguments
but it has, um, a red, green and blue (RGB) value and opacity
and then an x, y, z position of where the light is, so, uh
so I could, do something like 200 , 0 , 0 and change this to a pointLight()
and what I'm hoping you're going to see... is that, yeah, you can see that the light is kind of shining on it
I should draw something where that is, just so you can see, so let's do: translate( 200 , 0 , 0 );
and then draw a small sphere there
whoops! oh, and now-, by the way, if I translate something
it affects everything after it, so what I want to do
is say: push matrix(); pop matrix();
Oh, no no! In-, in p5 it's actually just push() and pop() to save and restore
again, I need to make a separate tutorial about that, if it doesn't exist already and then let's
make this box a little bit smaller just so we can kind of see what's going on here
so, you can see, this is where the light is, the light is emanating from here
so you can see that this side, the spinning rectangle is the only thing
that's kind of reflecting or getting that light again, my talents here in 3D
are kind of pathetic, but you could see how you can start to manipulate the lights
in the scene as well
(clears throat) ( ♪ music break ♫ ) Ooh! There's material, which is another thing you can read about
um, but, ah! okay, so let's talk about, now, let's say you start playing around with it
you're trying to make a project in 3D, um, there are some things that aren't yet
implemented there, a fully-featured virtual camera that might be something
that's much more elaborate, in terms of how you might move a camera around
shaders, shaders is a special kind of programming language
that is very fast and allows you to manipulate pixels and do all sorts of
things with textures and geometry, in kind of special and interesting ways
Matthew Kaney is working, on this summer, a shader implementation for p5.js
so that's going to happen in the future, um, the other thing that you can look for
is-, but if you are in the p5.js GitHub repository, you can go under issues
and, I believe, I wouldn't-, there is a WebGL...
there is a WebGL label, so i could click here, under area:WebGL
and you can see these are two current bug report / feature discussions
and so, if you would like to, if you find something that's not working
or you're not sure about, this is a place where you can post a bug report of
you looked at this function, it's not working properly in 3D, should it? should it not?
that sort of thing, you can post that here
the other thing I would encourage you to look at, is, um, under the pull request
you can see that there are, currently in progress, I mentioned this one
which is #1518
there are lots of things, so this-, look! "Implements all rect* and ellipse* modes in webgl."
so, this is now allowing a lot of those 2D functions
so the next release of p5.js may have some of this stuff working
so I wouldn't file a bug report about rectangle or ellipse at this moment
and, you know-, maybe by the time you're watching this video, that will be fixed
um, but you can see, so this is, I think, a place where you can ask questions, submit bug reports
uh, as well as, potentially contribute to the development itself, of 3D
so, um, if you have questions about how you can get involved
you can ask me a question on Twitter or in the YouTube comments here
or, as well, just sort of like jump in on p5.js
there's also a, if you go to the p5.js wiki, that's where, by the way, this, um
"Getting started with WebGL in p5"
a tutorial is, and also, um, there is a wiki here about development
and how you can get started contributing p5.js as well
and since this is a rambling, very long, somehow, answer to this question
I hope this gives you an idea and a sense of what some possible things are
in p5.js with WebGL, and, um I, at some point, I would like to make an actual, more- *laughs*
I never make anything proper! but, say, a proper sequenced tutorial series
about how to do 3D stuff in WebGL, and if you watched this video
if you're doing stuff in WebGL, if you enjoyed it, please
give your thanks and credit to the contributors and developers of p5.js, who are doing all sorts of work
with their smiles and hugs!
um, in making p5.js WebGL
okay, goodbye! See you in another video, maybe, if you want
okay, goodbye!