Normal map seams

by miguelmyers8

HTML

<script src="
https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js
"></script>    
    <img id='front' src="https://i.imgur.com/oitjSO8.jpg" width="100" height="100" >
    <img id='back' src="https://i.imgur.com/Lag3kp3.jpg" width="100" height="100" >
    <img id='right' src="https://i.imgur.com/3bxQvVH.jpg" width="100" height="100">
    <img id='left' src="https://i.imgur.com/9FO8zQM.jpg" width="100" height="100" >
    <img id='top' src="https://i.imgur.com/EvurUnr.jpg" width="100" height="100" >
    <img id='bottom' src="https://i.imgur.com/oc8zgTS.jpg" width="100" height="100" >

CSS

body {
	  margin: 0;
}

JavaScript

// https://discourse.threejs.org/t/how-to-get-continuous-noise-across-a-normalized-cube-within-the-shader/50755
// FORKED FROM: How to get continuous noise across a normalized cube within the shader?

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls";

let camera, scene,rtCamera,renderTarget,rtScene, renderer;
let uniforms, mesh, w;
let bbox  = new THREE.Box3();



function vertexShader() {
  return `
    varying vec2 vUv;
		uniform samplerCube u_tex;
    uniform vec3 wTl;
    uniform vec3 ps;
    varying vec3 wpq;

 //normalize each plane   
 vec3 planeToSphere(vec3 p, vec3 localCenter){
    return 100.0*normalize(p-localCenter) + localCenter;
  }
  
varying vec3 v3n;
    void main() {
      vUv = uv;
      vec3 newPosition   =  planeToSphere(position,wTl) ;
      vec3 worldp = ( modelMatrix * vec4(position,1.0)).xyz;
      wpq = worldp-wTl;
      //float n = texture2D(u_tex, vUv).x;
      //newPosition = newPosition + 1.0*n*normalize(position-wTl); // this add displacement
      gl_Position = projectionMatrix  * modelViewMatrix * vec4( newPosition, 1.0 ) ;
    }
  `
}

function fragmentShader(){
  return `
    varying vec2 vUv;
		uniform samplerCube u_tex;
    varying vec3 v3n;
    varying vec3 wpq;

  
  
   vec4 displacemntNormalCubeMap(samplerCube u_displacementMap, vec3 vUV){
    float scale    = 4.9;   // Adjust this to control the amount of displacement
    float epsilon  = 0.1;  // Small value for calculating gradients
    float strength = 1.;                   
    float center = textureCube(u_displacementMap, vUV).r; // Sample displacement map
    float dx = textureCube(u_displacementMap, vUV + vec3(epsilon, 0.0, 0.0)).r - center;  // Calculate gradients in the X  directions
    float dy = textureCube(u_displacementMap, vUV + vec3(0.0, 0.0, epsilon)).r - center;  // Calculate gradients in the Y directions
    vec3 normalMap =...