Hello everyone,
I was looking for a way to recreate a tileset/tilemap implementation. The idea is to load a compressed image that it looks like this one:
In order to obtain a better network loading in my project. Then in code, substract the ones that I want from a JSON file which says the id of the tile, with the size of it and the position on the tileset where it belongs.
I’ve been trtying a few things. First, I tried to simply use the .repeat and .offset values from three js Textures. The explanation of it is here: How to draw a tilemap in three.js?
That one works well, but I have some objects that are using wrapping methods and I thing that since the .repeat value it is modyfied, the texture applied chooses the entire source image instead of the slice from the image that I want.
Then, I tried to cut it via ShaderMaterial. The implementation of it it’s here: javascript - Three.js Custom Shader - Stack Overflow
The bad thing about that method is the fact that all the images had one set of UVs, and since in the shader Im modyfing the texCoord of it, my resultant texture once cutted from the shader it is not possible to be applied with the UVs that I have on the geometry.
Finally, I found another method in this GitHub repository: GitHub - oguzeroglu/TextureMerger: A lightweight library that creates a Texture Atlas from Three.js textures.
What this method does is to generate a new Canvas for each slice of the original source. It is working pretty well, but the problem here is the computation. Sice I have a los of images to load (around 200), the proyect gets stucked for 4-5 seconds at the moment that it creates so many canvas per image.
There is another methodology that I can use for my kind of method?
Thank you!