Godot Tutorial - Vertex Displacement using Visual Shader

 
"Displacement mapping is an alternative computer graphics technique in contrast to bump mapping, normal mapping, and parallax mapping, using a (procedural-) texture- or height map to cause an effect where the actual geometric position of points over the textured surface are displaced, often along the local surface normal, according to the value the texture function evaluates to at each point on the surface." (Wikipedia)
Yes, Displacement is very useful for making procedural things.
Here's how to make it using Visual Shader

Create a Plane


 Subdivide it


Create new material


 Change the cull mode to disabled


 Go to "Vertex" and add Texture Node
 

 Create Noise Texture


 Add VectorOp(Add) node
 

 Add Vertex node


 Then connect to Vertex

Well but this looks weird.
Why? Because it adds all the vector components so it's not just adding Y, but X and Z too

 Add Multiply node


 Set Y to 1

Now it's correct because the addition of x and z becomes 0, because they are multiplied by 0. So x and z are added with 0 which means nothing

 Try changing x to 1, then the x will be added to 1.


 Likewise if x is changed to -1, then the x will be added to -1

But our mesh looks flat, as far as I know, because we change the vertices, then the normals become incorrect.

 Connect to normal

Well now it doesn't looks flat anymore, but might look boring

 On fragment shader, add noise texture









Still not satisfied? add Gradient Texture


 Then color as you wish


 How do you make the displacement higher or lower?Just change the Y


 What if you want to change the property of noise but the texture or vertex don't go along?
Simply copy one of the noise textures and paste it, because they are the same resource, they will follow one another.


 What if you want to change the details?
Simply change the subdivision, you can change it as you wish

Lower Subdivision = Lower Details
Higher Subdivision = Higher Details



Comments

Post a Comment

Popular posts from this blog

Godot Tutorial - How to make Sword Slash Effect using Visual Shader - 3 different versions

Image
  In this tutorial we will create a slash effect or sword swing with Visual Shader. Works on GLES3 and GLES2. There are 3 different versions   We will first make this one.     So I have a sword scene with animation, for the sword you can make it yourself.   Add MeshInstance node (under the Sword) and create a Plane, the size depends on your sword, here the size is 7 by 7 Add MeshInstance Node then set the size of the plane to 7x7 Move and adjust the plane position   Then on the material click New Shader then click New Visual Shader.   Change the cull mode to disabled. Let's start with noise, add Texture then make NoiseTexture, change the resolution to 657 x 657 Then add GradientTexture then add a ColorOp node (Overlay) Now add the Round node then connect to Alpha Then rotate the plane 90 degrees. Now it's time to animate. Add UV node then add Vector Add node and VectorUnifor...
Read more

Godot Tutorial - Gradient Mapping using Visual Shader

Image
In this tutorial we will make gradient mapping shader It's pretty useful In Blender, this is called ColorRamp Here is an example of what you can make with gradient mapping Let's get started As always, create new ShaderMaterial Because it's 2D, change the mode to CanvasItem Add Texture node Let's create Noise texture We will convert it to grayscale Add Dot node Enter the following values to convert it to grayscale (0.299, 0.587, 0.114) The effect is not visible because our noise is indeed gray Let's try with another texture Look, now it's gray Add gradient texture And here you go: For the alpha, just connect the alpha to alpha Tip: instead of you having to put the texture back on your sprite, just change the Texture to Texture2d (but the output preview won't work properly) This is a tutorial from GDQuest that I converted to Visual Shader. Here is their detailed tutorial: https://www.youtube.com/watch?v=i7VljTl4I3w ...
Read more