Godot Tutorial - Gradient Mapping using Visual Shader


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

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 VectorUniform Name VectorUniform
Read more

Godot Tutorial - Vertex Displacement using Visual Shader

Image
  "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 a
Read more