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 pre…

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_Posi…

Use this to get rid of resizing warning.

Indeed, thank you so much, @makc3d !

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() { …

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

Questions

prisoner849 February 11, 2020, 3:13pm 2

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

Topic		Replies	Views
Fit image texture aspect ratio to size of plane Questions textures	3	5361	June 22, 2021
How do we scale the PlaneGeometry based on the aspect ratio Questions geometry	2	752	May 3, 2023
How can I get a covered texture on a PlaneGeometry? Questions textures , shaders	7	3926	November 12, 2020
Resize geometry at window resize Questions geometry	1	3275	May 10, 2022
Added Image Texture to the Plane Very Blurry and Rotated Questions textures , plane	7	4557	June 22, 2022

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

Related topics