Currently, I am working with a plane geometry and developing a CustomShader material for it. This material will require some textures as uniforms and I want these textures to completely cover my plane (similar to the background-size:cover CSS property).
Previously, I was able to achieve this using a utility function when working with textures and a MeshBasicMaterial:
cover( texture, aspect ) {
var imageAspect = texture.image.width / texture.image.height;
if ( aspect < imageAspect ) {
texture.matrix.setUvTransform( 0, 0, aspect / imageAspect, 1, 0, 0.5, 0.5 );
} else {
texture.matrix.setUvTransform( 0, 0, 1, imageAspect / aspect, 0, 0.5, 0.5 );
}
}
However, when using the ShaderMaterial, this "cover" function no longer applies. Do I need to incorporate this functionality into my fragment shader? If so, how can I replicate this behavior?
Below is a snippet of my code:
const vertexShader = `
precision highp float;
uniform mat3 uUvTransform;
varying vec2 vUv;
void main() {
vUv = ( uUvTransform * vec3( uv, 1 ) ).xy;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`;
const fragmentShader = `
precision highp float;
uniform sampler2D uText1;
varying vec2 vUv;
void main() {
vec2 xy = vUv;
vec4 color = texture2D(uText1,xy);
gl_FragColor = color;
}`;
Current output can be viewed here:
https://i.sstatic.net/U7Jg7.png
Any insights or suggestions would be greatly appreciated. Thank you.