Query: How can I efficiently pass and access a list of textures in shaders, specifically targeting the nth texture within a fragment shader based on a varying value passed from the vertex shader?
In my current project involving a Three.js scene, I am tasked with representing multiple images. Each image utilizes one of several textures, with each texture serving as an atlas containing various thumbnails. To streamline performance, I am implementing a custom shaderMaterial but encountering difficulties in handling multiple textures within the shaders.
The objective is to transmit a collection of textures along with the number of vertices per texture to determine the appropriate texture for each image's vertices or pixels. Initially, I attempted to achieve this by passing the following information:
// Define a texture loader for file loading
var loader = new THREE.TextureLoader();
// Specify the URLs for the textures
var catUrl = 'https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/cat.jpg';
var dogUrl = 'https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/dog.jpg';
var material = new THREE.ShaderMaterial({
uniforms: {
verticesPerTexture: new Float32Array([4.0]), // vertex count per texture
textures: {
type: 'tv', // texture array type
value: [loader.load(catUrl), loader.load(dogUrl)],
}
},
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent
});
However, the vertex shader encounters issues utilizing the uniforms to indicate to the fragment shader which texture should be used. It appears that vertex shaders are unable to pass sampler2D objects as varyings to the fragment shader. What approach should be taken to successfully transfer a list of textures to the shaders?
Synopsis of code snippet (incomplete due to unsuccessful texture list transmission):
...