tutorials/shaders/your_first_shader/your_second_3d_shader

[giscus[bot]]

tutorials/shaders/your_first_shader/your_second_3d_shader

From a high-level, what Godot does is give the user a bunch of parameters that can be optionally set ( AO, SSS_Strength, RIM, etc.). These parameters correspond to different complex effects (Ambien...

https://docs.godotengine.org/en/4.3/tutorials/shaders/your_first_shader/your_second_3d_shader.html

[ChrisDWhitehead]

I have been attempting to follow along with this tutorial but the results I get are nothing like what is pictured. It would be very helpful if there was a complete code listing at the end, like in the 2D Shader tutorial. I suspect there may be code missing in the running explaination.

[Catley94]

I have posted my code below which works, I have had to adapt it slightly and I've made a modification with the 'calmness' of the water, though you are welcome to ignore this and replace the variable with the magic number of 10.0.

[mrlem]

Things that I've found missing between the 2 tutorials:

• you should resize your plane from 2x2 (first tutorial) to 10x10 (assumed in the second tutorial)
• you should make your noise texture seamless to avoid having a cyclical "crest" at the edge of the texture

[Catley94]

Yes! Though didn't know about the second, will have a look at that later. Thanks!

[Catley94]

I also am struggling with this - there are two things that I have noticed thus far, when I went from part 1 => part 2, my peaks were sharper than the first picture in part 2, though I ignored this.
But where I really got stuck was at TIME, the first mention of vertex function you showed was:

void vertex() {
  vec2 pos = VERTEX.xz;
  float k = height(pos, TIME);
  VERTEX.y = k;
}

However before I made any changes, my looks like:

void vertex() {
	tex_position = VERTEX.xz / 2.0 + 0.5;
	float height = texture(noise, tex_position).x;
	VERTEX.y += height * height_scale;
}

I'm figuring this out now - but I feel there's a disconnection between what was, and what is. (Though this could also be me just in too deep currently).
Will continue on and post my code at the end to see if others got the same :-)

[Calinou]

PS: Code blocks should use triple backticks like this (with an optional language name for syntax highlighting):

```glsl
code here
```

I edited your post accordingly, but remember to do this in the future 🙂

[Catley94]

Thank you! 😊

[Catley94]

This is my final code, though I have modified it slightly to 'tame' the waters, as my implementation following the tutorial was very choppy and fast.

The calmness variable goes from 1 - 100, though I would stick between 20 and 60 (this number depends on the amount of waves you create with d += wave((position - time) * 0.6) * 0.2; //Or similar).

The below code has nicely resulted in a section of water that is relatively calm with multiple layers of water moving in different directions.

shader_type spatial;
render_mode specular_toon;

uniform float height_scale = 0.5;
uniform sampler2D noise;
uniform sampler2D normalmap;
uniform float calmness = 50.0; // 1 - 100
uniform int num_of_additional_waves_in_x_direction = 2; // May be labeled as the wrong direction
uniform int num_of_additional_waves_in_z_direction = 2; // May be labeled as the wrong direction

varying vec2 tex_position;

float wave(vec2 position) {
	position += texture(noise, position / calmness).x * 2.0 - 1.0;
	vec2 wv = 1.0 - abs(sin(position));
	return pow(1.0 - pow(wv.x * wv.y, 0.65), 4.0);
}

float height(vec2 position, float time) {
	// Change your MeshInstance3D PlaneMesh to 10 x 10

	float d = wave((position + time) * 0.4) * 0.3;
	
	// Give the user control over how many waves and in what direction
	
	//for(int i = 0; i < num_of_additional_waves_in_x_direction; i++) {
		////Randomise magic number 0.3 and 0.3 to a range beteen 0.1 and 1
		//d += wave((position + time) * 0.3) * 0.3;
	//}
	//
	//for(int i = 0; i < num_of_additional_waves_in_z_direction; i++) {
		////Randomise magic number 0.3 and 0.3 to a range beteen 0.1 and 1
		//d += wave((position - time) * 0.3) * 0.3;
	//}
	
	// Statically create the waves
	
	d += wave((position - time) * 0.3) * 0.3;
	d += wave((position + time) * 0.5) * 0.2;
	d += wave((position - time) * 0.6) * 0.2;
	return d;
}


void vertex() {
	// Called for every vertex the material is visible on.	

	//Do I change the below to height(tex_position, TIME); ?
	// Version - 1
	//tex_position = VERTEX.xz / 5.0 + 0.5;
	//float _height = texture(noise, tex_position).x;
	
	//VERTEX.y += _height * height_scale;
	
	
	vec2 pos = VERTEX.xz;
	float k = height(pos, TIME);

	// Version - 2
  	VERTEX.y = k;
	
	NORMAL = normalize(vec3(k - height(pos + vec2(0.1, 0.0), TIME), 0.1, k - height(pos + vec2(0.0, 0.1), TIME)));
	
	
}

void fragment() {
	// Called for every pixel the material is visible on.
	
	float fresnel = sqrt(1.0 - dot(NORMAL, VIEW));
	NORMAL_MAP = texture(normalmap, tex_position).xyz;
	
	
	RIM = 0.2;
	METALLIC = 0.0;
	ROUGHNESS = 0.01 * (1.0 - fresnel);
	ALBEDO = vec3(0.01, 0.03, 0.05) +  + (0.1 * fresnel);
	
}

//void light() {
	// Called for every pixel for every light affecting the material.
	// Uncomment to replace the default light processing function with this one.
//}```

[mrlem]

I'd say in your code you should remove the NORMAL_MAP in fragment(), as the normal is now calculated in vertex()

[Catley94]

Thanks for this, I'm still learning shaders and thought they were different things haha. Currently working my way through TheBookofShaders hoping this will help :)

[Vosburgh]

This tutorial needs a do over, shaders are already difficult enough. Why should the tutorial skip steps and leave guess work for what the author did?

Atleast leave us something we can cross reference against.

[Calinou]

This is being tracked in godotengine/godot-docs#8077.