Depth Texture - I need a help on depthTexture. I'm having ratio issues.

[Bumi]

Hi, I’m working on depthTexture to make this: https://voiceofracism.co.nz/
And I was referencing this: DepthTexture for Geometry with Three.js #49 - YouTube

But I have an issue with aspect. As you can see, when my window screen stretched, the texture got rather squeezed. And when the window’s width gets smaller, the texture will stretch horizontally.
Please…help me…

Sorry, I don’t have live demo right now. But here are my js and fragment.glsl😭

const gltfLoader = new GLTFLoader()
const dracoLoader = new DRACOLoader()

dracoLoader.setDecoderPath('/examples/js/libs/draco/')
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load(
    'model.glb',
    (gltf)=>{
        // console.log(gltf)
        gltf.scene.scale.set(0.07,0.07,0.07)
        gltf.scene.position.z = - 1.3
        scene.add(gltf.scene)

        gltf.scene.traverse(child=>{
            // console.log(child)
            if(child.isMesh){
                child.material = new THREE.MeshBasicMaterial({color:0xff0000})
            }
        })

    }
)

//Sizes
 const sizes = {}
sizes.width = window.innerWidth
sizes.height = window.innerHeight


window.addEventListener('resize', () =>
{
    // Save sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // postCamera.aspect = sizes.width / sizes.height
    // postCamera.updateProjectionMatrix()



    // Update renderer
    // target.setSize( sizes.width, sizes.height)
    renderer.setSize(sizes.width, sizes.height)
})


// Scene
const scene = new THREE.Scene()

// Camera
const camera = new THREE.PerspectiveCamera(
    75, sizes.width / sizes.height, 0.01, 10
    )
camera.position.z = 3
scene.add(camera)


const postCamera =  new THREE.PerspectiveCamera(
    75, sizes.width / sizes.height, 0.01, 0.9
    )
postCamera.position.z = 3


// Mesh
const postMaterial = new THREE.ShaderMaterial({ 
    vertexShader:vertex,
    fragmentShader: frag,
    uniforms: {
        time: {value:0},
        depthInfo: {value: null},
        cameraNear: { value: postCamera.near },
		cameraFar: { value: postCamera.far },
        tDiffuse: { value: null }
    },
    side: THREE.DoubleSide
})
const postMesh = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(4,4,100,100)
    ,postMaterial)

const postScene = new THREE.Scene()
scene.add(postMesh)



//Lines
const lineGeometry = new THREE.PlaneBufferGeometry(8,0.05,120,1)
let number = 20
// for(let i = 0; i < number; i++){
//     const lineMeshes = new THREE.Mesh(lineGeometry,shaderMaterial)
//     lineMeshes.position.y = (i - (number/2))*0.2
//     scene.add(lineMeshes)
// }



// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('.webgl')
})

const dpr = renderer.getPixelRatio()
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(sizes.width, sizes.height)
renderer.setClearColor(800080)
renderer.antialias = true



const target = new THREE.WebGLRenderTarget(sizes.width, sizes.height)
// target.setSize( sizes.width, sizes.height)

target.texture.format = THREE.RGBFormat
target.texture.minFilter = THREE.NearestFilter
target.texture.magFilter = THREE.NearestFilter
target.texture.generateMipmaps = false
target.stencilBuffer = false
target.depthBuffer = true

target.depthTexture = new THREE.DepthTexture()
console.log(target.depthTexture)
target.depthTexture.format = THREE.DepthFormat
target.depthTexture.type = THREE.UnsignedShortType



//Controls
const control = new OrbitControls(camera, document.querySelector('.webgl'))
control.update()
control.enableDamping =true


 // Loop

const loop = () =>
{
    // Update
    control.update()


    // Render
    // renderer.render(scene, camera)
    renderer.setRenderTarget( target )
    renderer.render( scene, camera )


    postMaterial.uniforms.depthInfo.value = target.depthTexture
    // console.log(shaderMaterial.uniforms.depthInfo.value)


    renderer.setRenderTarget(null)
    renderer.clear()
    renderer.render(scene, camera)

    // Keep looping
    window.requestAnimationFrame(loop)
    camera.updateMatrix()
}
loop()

#include <packing>

precision mediump float;
varying vec2 vUv;
uniform sampler2D tDiffuse;
uniform float cameraNear;
uniform float cameraFar;
uniform sampler2D depthInfo;

float readDepth( sampler2D depthSampler, vec2 coord ) {
			float fragCoordZ = texture2D( depthSampler, coord ).x;
			float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
			return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
			}

void main(){
    // vec2 st = vUv;
    // gl_FragColor = vec4(st, 1.0, 1.0);   

    float depth = readDepth( depthInfo, vUv );

	gl_FragColor.rgb = 1.0 - vec3( depth );
	gl_FragColor.a = 1.0;     
    // gl_FragColor = vec4(vUv, 1.0, 1.0);   

}