How to keep aspect ratio of an image as texture of a shader material?

Questions
,
1

I am trying to add an image to the shader material of a plane but it is always deformed.

This is what the console is saying:

three.min.js:129 THREE.WebGLRenderer: Texture has been resized from (784x523) to (512x512).

Also, when trying to give the aspect ratio to the PlaneBufferGeometry.

AT present, it looks like this:

var geometry = new THREE.PlaneBufferGeometry(2,2*0.6670918);

var shaderUniforms = {
    originalImage: {
        value: new THREE.TextureLoader().load( "mountain.jpg" )
    },
    depthImage: {
        value: new THREE.TextureLoader().load( "diplacement.jpg" )
    }
};

var shaderMaterial = new THREE.ShaderMaterial( {
    uniforms: shaderUniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} )

var mesh = new THREE.Mesh(geometry, shaderMaterial);
mesh.position.set(0, 0, 0);
scene.add(mesh);

Any suggestions?

2

Hi!
Maybe this topic will be helpful: Video Texture - how to keep video aspect in new material

3

I found here the answer to my question: https://codepen.io/nik-lever/pen/VRLYWK/

When you replace there these two lines, the plane has the correct size form the beginning.

const geometry = new THREE.PlaneGeometry( 16,9);

u_adjust_uv: { value: new THREE.Vector2(1, 1)}

It is also important gl_Position in the vertex shader looks like this:

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

The only strange thing is that the console still says:

three.min.js:129 THREE.WebGLRenderer: Texture has been resized from (784x523) to (512x512).
4

Use this to get rid of resizing warning.

5

Indeed, thank you so much, @makc3d!

6

I have found further simplifications:
It is only needed to set the PlaneGeometry to the desired aspect ratio.
Then, “u_adjust_uv” and all this “uv” caculations in the fragement shader are omitable.
The frament shader looks like this now:

varying vec2 vUv;
uniform sampler2D u_tex;

void main() {
   gl_FragColor = vec4(texture2D(u_tex, vUv).rgb, 1.0);

}

Hope this helps you also in case

1 Like