Hello guys,
I need to use hundreds of textures for my project and apply each one to its corresponding plane geometry. What is the best way to optimize them, or is it possible in any way?
This sounds like the epitome use-case of a texture atlas or spritesheet.
1 Like
I generated a texture atlas with 1001 images for 1001 plane geometries. What is the next step? The image is too large, and even when I use an instanced mesh and add random parts of the texture atlas, the project crashes.
i tried something like:
createInstancedMesh() {
const atlasTexture = new THREE.TextureLoader().load(
"/images/large_atlas-min.png"
);
atlasTexture.wrapS = THREE.RepeatWrapping;
atlasTexture.wrapT = THREE.RepeatWrapping;
const material = new THREE.MeshBasicMaterial({
map: atlasTexture,
side: THREE.DoubleSide, // Optional, depending on your use case
});
const geometry = new THREE.PlaneGeometry(0.09, 0.2);
// Adjust UVs for the first region of the atlas
const uvWidth = 1 / 4; // Assuming 4x4 grid
const uvHeight = 1 / 4;
geometry.attributes.uv.array.set([
0,
0,
uvWidth,
0,
0,
uvHeight,
uvWidth,
uvHeight,
]);
geometry.attributes.uv.needsUpdate = true;
this.instancedMesh = new THREE.InstancedMesh(
geometry,
material,
this.particles.length
);
this.scene.add(this.instancedMesh);
this.instancedMesh.position.x = -0.5 * this.stringBox.wScene;
this.instancedMesh.position.y = -0.6 * this.stringBox.hScene;
this.instancedMesh.castShadow = true;
}
Does the program leave any messages on the console?
It is good practice, to tackle any errors in the order of their occurrence, i.e. the first error first. The other errors may well be follow-up errors.
Your graphics hardware has a built-in limitation of its maxTextureSize, which is often 16’384 pixels.
Work from there.
P.S.: why don’t you stark small-scale, until you understand how the dots need to be connected?
As you said, the problem was the maxTextureSize. Now, I’ve divided one large texture atlas into two parts and trying to assign each part to its respective geometry.
4 Likes