The "Your first/second 3D shader" tutorials are outdated and provide incorrect results

[SaadTheGlad]

Your Godot version:
v4.1.1

Issue description:
The tutorials on 3D shaders do not work properly and give unexpected results, especially when calculating normals

What I expected and what I recieved:

In general the entire tutorial is outdated and provides unexpected results in-engine and should be massively revised.

URL to the documentation page:
https://docs.godotengine.org/en/stable/tutorials/shaders/your_first_shader/your_second_3d_shader.html

If you know how to fix the issue you are reporting please
consider opening a pull request. We provide a tutorial on
using git here: https://docs.godotengine.org/en/stable/community/contributing/pr_workflow.html,
writing documentation at https://docs.godotengine.org/en/stable/community/contributing/docs_writing_guidelines.html
and contributing to the class reference here: https://docs.godotengine.org/en/stable/community/contributing/updating_the_class_reference.html

[taterboom]

😥 I'm a beginner learning shaders, and it's truly frustrating that despite following the official tutorial, the results I achieved are different from what the tutorial demonstrates.

[nathancarter]

Just spent about 2 hours trying to reproduce the effects of the tutorial, only to decide I should file a bug report, then found this one. Can confirm same results as what is shown above in 4.2.1 as well. Furthermore, the code in the tutorial (pasted directly into Godot) creates straight lines that move across the waves (due to using TIME to move across UV boundaries) as shown in the screenshot below.

I understand that debugging and writing a whole new shader tutorial is time consuming, but at the very least, to save new users time, the current one should be marked as wrong until it gets fixed, so that learners don't bang their head against it for several hours before they realize they're not doing anything wrong.

[nathancarter]

Note: The seams in the image I showed above come from assigning a noise texture without checking the "seamless" box.

[nathancarter]

Note that a YouTuber has made a sophisticated water shader tutorial for Godot 4 and also shared a written version with project files here. This may be a good place to start to figure out what needs updating.

https://stayathomedev.com/tutorials/single-plane-water-shader/

[skyace65]

The first 3D shader tutorial was fixed with this PR #10554. The second shader still needs to be updated.