I'm currently facing an issue where I need to load two images as textures, blend between them in the fragment shader, and apply the resulting color to a plane. However, I am struggling to even display a single texture properly.
My process for creating the plane and loading images is outlined below:
const planeGeometry = new THREE.PlaneBufferGeometry(imageSize * screenRatio, imageSize);
loader.load(
"textures/IMG_6831.jpeg",
(image) => {
texture1 = new THREE.MeshBasicMaterial({ map: image });
//texture1 = new THREE.Texture({ image: image });
}
)
While using MeshBasicMaterial directly on Mesh presented the image correctly on the plane, trying to achieve the same effect with a custom shader only yields a black color:
const uniforms = {
texture1: { type: "sampler2D", value: texture1 },
texture2: { type: "sampler2D", value: texture2 }
};
const planeMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
fragmentShader: fragmentShader(),
vertexShader: vertexShader()
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
The shaders implemented are:
const vertexShader = () => {
return `
varying vec2 vUv;
void main() {
vUv = uv;
vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * modelViewPosition;
}
`;
}
const fragmentShader = () => {
return `
uniform sampler2D texture1;
uniform sampler2D texture2;
varying vec2 vUv;
void main() {
vec4 color1 = texture2D(texture1, vUv);
vec4 color2 = texture2D(texture2, vUv);
//vec4 fColor = mix(color1, color2, vUv.y);
//fColor.a = 1.0;
gl_FragColor = color1;
}
`;
}
Some attempts made to resolve this issue include:
- Verifying visibility of the plane by shading it with a simple color
- Ensuring UV coordinates are passed to the shader by visualizing them as color
- Ensuring that both
texture1andtexture2are defined before passing them to the shader - Experimenting with using
THREE.Textureinstead ofTHREE.MeshBasicMaterial - Altering the uniform type in JS
texture1: { type: "t", value: texture1 },
Based on my analysis, the issue might lie in how the texture is being passed as a uniform to the shader. There could be errors relating to data types along the way. Any insights or assistance would be greatly appreciated!