How to add water refraction to a sphere

Questions
, ,
1

I am trying to add the final piece to my water material but can’t seem to figure it out. I took some snippets from this article Real-time Multiside Refraction in Three Steps | Codrops and try to make it work on a sphere. I come close but from the side view, it gets ruined. Here are a few screenshots. with before, after, and a side view.
Without Refraction:

normalView
normalView1920×1080 52.2 KB

With Refraction front facing:

FrontAfterView
FrontAfterView1920×1080 52.5 KB

Side view with refracton:

SideAfterView
SideAfterView1920×1080 34.6 KB

And the water refraction code:

vec3 eyeVector = normalize(vWorldPos.xyz - cameraPosition);
vec3 normalSurface = vec3(
		fbm(2.5 * sUv + .05 * uTime),
		fbm(2.5 * sUv + .05 * uTime),
		fbm(2.5 * sUv + .05 * uTime)
	);

	vec3 refracted = refract(eyeVector, vNormal.xyz + normalSurface, 1.0/1.333);
	sUv += refracted.xy;

Had an idea to use triplanar uvs but not sure where to use them. Any help to get water refraction working would be great!!