Search code examples
three.jstexturestexture-mappingtexture-atlas

three.js - repeating a SECTION of a texture atlas


So in three.js it seems we need to use the texture.offset and texture.repeat properies to extract sections of a texture(atlas) for applying to different meshes. This works fine, but as far as I can tell it is impossible to then choose to repeat that section of the texture? because the repeat property is already being used to define the "edge" of the texture sub-section. My code for using texture.offset and texture.repeat to extract a section of a texture:`

var texture = atlasTexture.clone();
texture.repeat.set(section.w / atlasTexture.width, section.h / atlasTexture.height);
texture.offset.x = ((section.x) / atlasTexture.width);
texture.offset.y = 1 - (section.h / atlasTexture.height) - (section.y / atlasTexture.height);

Solution

  • Short answer.. you can't without using a custom shader... and making custom shaders is more painful than it could be IMO. You have to make the region information visible to the shader, by encoding a tile index in the UV coordinate or something.. either by using fixed size tiles.. You also have to worry about padding the islands if you want the texture filtering to not give you edge artifacts. I've done this before for a hexmap tile rendering engine I wrote a while ago... and it was fiddly to get working but when I did, it performed Really well.. I had maps of 4k/4k tiles running at 60fps with 3 layers.

    If you want to discuss it further live, I hang out in this slack of three.js devs.. my nick is thrax.

    https://join.slack.com/t/threejs/shared_invite/enQtMzYxMzczODM2OTgxLWE5OTU4OTYxZTZlODk1ZGNjODIyMDZlODM4ZmUyMzNiOWIxMmFjNTYwOTc4MjU0ZmNiODk5MzZiMGJhMTkzZWI