(Godot 3.0) How to displace vertices in the Shader Language [3D]?

Question

After watching this youtube video, I felt inspired to recreate what was shown: https://www.youtube.com/watch?v=cs9xUmu3aMA

To my surprise, there is a way to use the SpatialMaterial to create an overlaying outline using the "Grow" Option depicted in the 3.0 Docs: http://docs.godotengine.org/en/latest/learning/features/3d/spatial_material.html

Then I used the Conversion option to convert the SpatialMaterial to The Shader Language, which then I can customize the shading language.

The bottom line: Does anybody know how to displace vertices in the shader code to achieve the deformed effect shown from the youtube video?

P.S. Here is the code if anybody wants to take a look, Its basically a converted ShaderMaterial code that has been barely altered:

shader_type spatial;
render_mode 
blend_mix, depth_draw_opaque,cull_front,diffuse_lambert,specular_schlick_ggx,unshaded;
uniform vec4 albedo : hint_color;
uniform sampler2D texture_albedo : hint_albedo;
uniform float specular;
uniform float metallic;
uniform float grow;
uniform float roughness : hint_range(0,1);
uniform float point_size : hint_range(0,128);
uniform sampler2D texture_metallic : hint_white;
uniform vec4 metallic_texture_channel;
uniform sampler2D texture_roughness : hint_white;
uniform vec4 roughness_texture_channel;
uniform vec3 uv1_scale;
uniform vec3 uv1_offset;
uniform vec3 uv2_scale;
uniform vec3 uv2_offset;


void vertex() {
UV=UV*uv1_scale.xy+uv1_offset.xy;
VERTEX+=NORMAL*grow;
}




void fragment() {
vec2 base_uv = UV;
vec4 albedo_tex = texture(texture_albedo,base_uv);
ALBEDO = albedo.rgb * albedo_tex.rgb;
float metallic_tex = dot(texture(texture_metallic,base_uv),metallic_texture_channel);
METALLIC = metallic_tex * metallic;
float roughness_tex = dot(texture(texture_roughness,base_uv),roughness_texture_channel);
ROUGHNESS = roughness_tex * roughness;
SPECULAR = specular;
}

I suspect void vertex() function is where deforming the outline is possible...

Answer 1

Near this line:

VERTEX += NORMAL*grow;

You can see here that's where the outline's vertex is displaced already. All you need to do is to modulate grow randomly, by increasing or decreasing a bit.

That's where you have to be creative, because there doesn't seem to be a random function that also changes only 10 times per second (like in the video). You have to come up with a formula random enough, or eventually use a texture as a curve for your randomization. Note that you can also use TIME ;)

Answer 2

I found this interesting and decided to try this out. Created a shader for next_pass of a spatial material. Here is my code:

shader_type spatial;
render_mode cull_front,diffuse_toon,unshaded;
uniform vec4 albedo : hint_color;
uniform float grow : hint_range(0,1);

// Gold Noise function
//
float gold_noise(in vec2 coordinate, in float seed)
{
    // Irrationals with precision shifting 
    //
    float PHI = 1.61803398874989484820459 * 00000.1; // Golden Ratio   
    float PI  = 3.14159265358979323846264 * 00000.1; // PI
    float SRT = 1.41421356237309504880169 * 10000.0; // Square Root of Two
    seed+=PHI;
    return fract(sin(dot(coordinate*seed, vec2(PHI, PI)))*SRT);
}

void vertex() {
    float seed = ceil(mod(TIME,15.0));
    float n = gold_noise(UV,seed);
    VERTEX+=NORMAL*(n)*grow;
}

void fragment() {
    ALBEDO = albedo.rgb;
}

Change seed to match what speed you want to use.

It does look a little off with box shapes