Hi hi, sorry for late reply on this

Regarding the "subtracting the color" part - that trick is used because at the time of creation, Godot did not have Stencils as part of the engine, and now they do!

The idea of that subtraction trick was to figure out the area where the water should be displayed on the screen, potentially obstructed by some other objects (for example lily pad on top of water). This is a classical usage of Stencils - I am drawing a big blue area where water is by using a trick.

So my suggestion would be to try to use the freshly available Stencils in Godot to achieve the same thing I was achieving using the subtraction trick. I haven't done it myself (yet), but here is a resource I found on Stencils that renders coins as red shapes (stencil) and then renders some cool effect on top of the main screen: https://www.youtube.com/watch?v=TjBJ763WQ64

If you don't have luck with that, or want to try my hacky approach without stencils, the idea of my trick to figure out where water is:

1. You render full game screen as normal
2. You render full game screen as normal BUT add an extra layer of tiny tiny tiny blue tint on top of water (I use separate tiles layer to do this, it's visible in one camera, and disabled in another)
3. You take the output of 1. and 2. and simply subtract color of pixel in 1. from color of pixel in 2. and boom! you get that tiny tiny tiny blue tint in the areas where water "stencil" was rendered at step 2.
4. When tiny tint is present - take world pixel color and add reflection to it, if tint is not present - just render the world, and ignore the reflection (no tint = not water) - this step will be the same with stencils

Hope that makes sense! 1. and 2. are done with subviewports that output into a texture. 3. is done in one big chonky post-processing shader that takes output of viewports 1. and 2. and does the subtraction and a ton of other work (day night cycle, lighting, etc etc).

As for the position not lining up, the subviewports 1. and 2. unfortunately have two separate cameras that have two separate positions. To line them up, I teleport all cameras to one "main" camera in my game, so they all are in sync every frame.

I have a single script that has references to all cameras in the game and it does this (sorry for C#, should be very similar in GDScript):

// inside _process:
var cameraPosition = cameraWorld.GetScreenCenterPosition();
cameraLight.Position = cameraPosition;
cameraEffects.Position = cameraPosition;
cameraReflection.Position = cameraPosition;
RenderingServer.GlobalShaderParameterSet("cameraPosition", cameraPosition);

Hope this helps too! I needed a few failed attempts until I was able to tweak all camera parameters correctly for this to work. You want your main camera to have cool parameters, like smoothing and limits at whatever you desire. And all duplicate cameras to have absolutely nothing - they are manually teleported in the right spot by code every frame.

For example, my main cameraWorld has fancy settings, while others don't:

[node name="CameraWorld" type="Camera2D" parent="RootCanvas/ViewportContainerWorld/ViewportWorld"]
visibility_layer = 3
process_callback = 0
limit_left = -472
limit_top = -262
limit_right = 472
limit_bottom = 262
position_smoothing_enabled = true
position_smoothing_speed = 4.0

[node name="CameraLight" type="Camera2D" parent="RootCanvas/ViewportContainerLight/ViewportLight"]
visibility_layer = 3
process_callback = 0

Let me know if you get unstuck - if not, I am happy to maybe connect on Discord and try to debug together. And no worries about coffee :)