Godot Tutorial -- Height Maps Video Lecture | Godot Game: Learn and Master - Game Development

[Music]
hello this my cat game from scratch and
welcome to a bit of an accidental
tutorial uh what I mean by that is
yesterday I was looking at height maps
and I happen to mention that height maps
were implemented in good del and well
that's wrong they are not they are not
in Goodell at all it's a hundred percent
on you to implement them now fortunately
I also mentioned that implementing
height maps is very very easy so I'm
kind of gonna kill two birds with one
stone here and show you how you would
implement a height map in Godot and the
coolest part is at least from my
perspective I don't have to do a lot of
work I'm actually following someone
else's tutorial someone else's code I
will ultimately link it down below but
we were working off of this
documentation directly from the Godot
document so it's on the Godot Engine
website it's called next generation with
height map and shaders and we're gonna
be following along to it
exactly so all of the script we're gonna
be doing is gonna come from here
ultimately so this is a pretty quick
process five to ten minutes tops and
let's jump right in now what all those
things right off the hop is that Godot
doesn't really support primitives per se
so we're going to be implementing a
plane you could do it in code but it's
easier just to actually go ahead and
create one in your content creation tool
of choice and then import it in as a
mesh let's start off doing that I'm
gonna fire up blender here and all we're
gonna do is basically create a grid and
export it out as a mesh an obj file a
static object
so go ahead delete that I'm just coming
out here to go add mesh grid man we will
make it a hundred by 100 this is
ultimately gonna determine how many
polygons are in use so if I switch over
here to edit mode you can see the end
result so we've got what would that be
ten thousand polygons at this point you
find that my math is correct I don't
understand why it's 9801 that doesn't
make any sense at all but so there's the
basic shape we've gotten the last thing
we want to do before we get out of here
is just UV unwrap it so there are
texture coordinates attached here and
that's it so file go ahead export this
guy I'm gonna export it as a wavefront
file or obj desktop and we will call
this plane
thought obj and export that sucker out
and we are done okay that should be it
for blunder will go ahead and
optimistically leave that behind and
I've created a project a 3d project in
Godot engine absolutely nothing special
going on here I've actually haven't
actually done anything yet
very top here a lot of spatial parent
node if you're interested in learning
the Godot 3d stuff I've already done
tutorials on all of this stuff also if
you're interested in learning the
bellend or specific stuff I've done
tutorials on all of it as well so I'm
going to assume you've gone through at
least some of that stuff at this point
alright so there is our root node in our
scene we're gonna go ahead now and
import our mesh go up source meshes is
on my desktop hmm I think I got to
navigate manually users desktop there it
is
plane dot obj and we will put this in
our route that's fine there we go
default settings are all good I never go
so now we've got a plain object here go
ahead and add a child node and we want
to bring in a mesh instance our mesh
instance is going to use our newly added
mesh like so so now if i orbit the
camera there you go so now we have a
polygonal object that we can actually
apply our height map to now again I
already explained height maps in the
other video so I'm not going to go
through that again but remember they're
just a simple greyscale image where I
always screw this up but black is down
white is upgrades in the middle and
we're gonna need to go ahead and
actually create one so paint.net will
fire that up we will make this guy 1024
by 1024 it doesn't really matter but
power of two textures are generally a
pretty good idea
I'll come up here to our color settings
bring that out some more we want
it's either 127 or one thing I think
it's 128 we want the midpoint
also known as gray so that is our
selected color and fill so that is going
to be basically the default normal layer
and we'll raise some it will lower some
so let's switch over to white oops
back to gray switch my tool out first
okay switch back over to white will
change our brush a bit we'll make it
quite a bit bigger I will make it
splattery and a little bit less sharp
we're just gonna add some white tour map
thanks so yeah yeah alright and now we
are going to go ahead and well swap that
brush out a little bit there we will go
over to black Wow it's not the intention
all right let's just do a fill brush a
solid color white
so this is the worst landscape ever but
it will give you an idea of the
different gradients ah so that is done
and we will go ahead and save that as a
PNG file height map PNG
I'll over might write my earlier crap
example and that's fine okay so now I'm
gonna go ahead back into the Godot
engine we shall import that texture as
well so import the texture it is once
again on my desktop it was too far
desktop height map and again we'll just
throw that in the root and duck alright
so now we have our height map to work
with like so no there's no block on
there that doesn't matter you'll get the
gist of what's going on when this works
anyways so where this all comes down to
now is we're gonna be doing this in
shader so the nice thing is we don't
need to get down into the nitty-gritty
there's a shader program that does a lot
of the work for us it Maps the
parameters across to our object all that
kind of stuff so what we really have to
do is just focus on setting up the
vertex and the fragment shader and like
I said we're gonna be copying those
straight out of that other tutorials so
that's gonna make things easy so let's
just zoom this guy over here and I will
this up so first things first we need to
apply a material to this guy so our
meshes in our material we're gonna
create a new shader material like so and
then just pop open the editor and let's
get started so first off we need to
create a new shader here it's a material
shader we're creating so new and then
again pop open the editor oops I didn't
know one do that let's go back some new
material shader
okay edit alright you know that is what
I wanted to do and this is ultimately
where you write your shader code so
we've got the vertex shader and fragment
shader no lighting so I'm gonna straight
out copy and paste from that other
tutorial I'm not going to cover in any
detail how a vertex or fragment shaders
work just be aware that vertex shaders
basically modify the geometry fragment
shaders also known as pixel shaders
basically determine what each particular
pixel elements color is so basically
those determine the color of your end
result and if needed actually do a
tutorial on vertex and fragment shaders
at some point in the future I haven't
done a really comprehensive one yet I
really should for all right so first
stuff our fragment shader this one we're
actually come back and modified but this
is so I'm following the tutorial
directly a fragment shader basically
takes the source of color and so Coast
basically takes the pixel from the
texture and applies it to the underlying
image multiplied by a parameter uniforms
can be thought of as parameters you'll
see them in a second how they work
called color so basically take color
multiplied by the pixel of the source
texture the texture being this guy right
here now we're not really going to use
this guy because this is going to result
in the the geometry having the same
texture coordinates as your or texture
or pixel elements as your height map and
really the height map is just really
used for your vertex shaders over here
but we'll get back to that in a second
so time for the vertex shader
vertex shader is a little bit more
complicated this basically was what
causes the geometry to be x on the the
individual grayscale value of each pixel
causing it to go up or down it's better
explained in the link tutorial again
it's linked down below so I'm not gonna
get to a lot of explanation here but
you'll notice that source is a texture
as a parameter or uniform being passed
in and height range height range
basically is the intensity of the height
map alright so we have our vertex shader
and our fragment shader define so now
that we've got those defined we'll
switch back up one and you'll see that
they are now added as shade of parameter
so this is one those nice things to
shader program does for you it does this
nice UI mapping for you so our source
can now be defined come over here and we
will load it and that's our height map
and our color remember that the amount
that's multiplied by the actual to get
your pixel value we'll go ahead with a
lightish gray and there you're seeing
the end result we are getting our
geometry is being painted sorry our yeah
our texture is being painted but our
geometry is not being affected yet and
that's because we haven't set the height
range so let's set the height range to
0.5 and there you go that is all that is
involved in creating a vertex shader
sorry a height map in Godot now there is
a bit more to it but you can see the
black portions are being pushed down the
white portions are being pulled up and
that is how landscapes are generally
defined in just about every single game
edge and you will ever find so really
simple thing to do there is one problem
here that you're gonna have to still
solve that you don't have to another
game engines and that is you'll have to
create a nav mesh for this guy so or a
collision mesh of some form so right now
you just have terrain but you're gonna
want to probably interact where they do
hit test against it etc so there is a
little bit more work to be done but for
the most part you can see this is how
easy it is to create landscapes in your
dough now one last thing we're gonna
look at this is deviating slightly from
the tutorial we're gonna go back over to
our shader here open that guy back up so
what you saw here the fragment shader
this is one responsible for actually
creating the colors or right now it's
using the same
underlying map as the but Baba as the
fragment shader which is not what you
want you don't want to use the same
color scheme that you're using just for
displacement they're two completely
different things so what we're gonna do
is go source and we'll call this I don't
know color or texture or diffuse
whatever you want to call it and you'll
notice immediately it went away because
while this is no longer value valid and
at the same time we have to change this
parameter down here
alright so we're good we're done you'll
notice now there is no color being
applied to this map and this texture is
what you would use to paint your grass
your dirt your rock all that stuff on
top of your landscape
I have tutorials I'm covering how to do
this in blender actually but you can use
whatever paint program you want so now
that that's define we're gonna flip on
back one and now you'll notice we have a
source color is now available and we'll
go ahead and I'll just use the logo for
this one but you'll see the immediate
results so there is the underlying
texture being used for the color of said
surface and that's it that's all we're
gonna cover today a very very simple
example and nicely again the Godot
tutorial did 99.9% of the work for me
but I did feel like I should correct
what I said in the last tutorial because
out of the box the Godot engine does not
have a height map object which is little
strange about so I'm surprised there
isn't training built-in it may be coming
with the new Godot 3 which is focusing
on the 3d stuff it will get a terrain
object of some form where you can just
come in and say here's my height map
here's my my landscape textures and go
which would automatically create the
navmesh for you etcetera hopefully we
will see that in the future but for now
you can see it is a pretty easy out a
thing to actually go ahead and create a
height map implement it using base
geometry and then vertex and fragment
shaders - sorry yeah vertex and fragment
shaders to you know create or displace
your original texture so that's really
what's happening behind the scenes in an
unreal engine in a unity in blender when
we saw the displacement map it's all
basically what we just did here this is
just more of a low-level roll you're
version of it so first off I apologize
for my mistake in yesterday's video
hopefully this rectifies that and we'll
brings a bit of clarity and you know
this is a nice example showing you how
shader programs actually work and how
easy they are to use in Godot as well
and how easily you can in fact implement
height maps in Godot
so again I take absolutely no credit for
any of the code used in this example it
is from the Godot documentation and it
is linked down below hope you did find
that useful if you did please do click
like and we've got all kinds of
tutorials here for a good Jo to height
maps to you know weekly game to have
news if you find that kind of stuff
interesting please do click Subscribe
alright folks see y'all later have a
good day
bye