Hi all!
I’m trying to render a sh*t ton of icons with the help of an InstancedMesh .
The geometry of each instance is just a simple PlaneGeometry/Quad.
The possible different icons are all included in a texture atlas created with TexturePacker.
TexturePacker generates the png for the texture (trimming transparent pixels, adding paddings/margins to prevent texture bleeding, removing duplicates, etc) with a Json file where each icon is defined by a frame object that looks like this (basically it’s the rectangle of the specific icon in the generated image):
“frame”: {“x”:68,“y”:4028,“w”:64,“h”:64}
The ideal generated image looks more or less like this and is 2048x4096px (I have different ones for different resolutions, types, etc):
Thanks to other threads in the forum (like this one or this one) I managed to somewhat draw a portion of the texture atlas using a modified vertex shader from MeshLambertMaterial:
shader.vertexShader = `
uniform float texScale;
uniform float texSize;
attribute vec2 texOffset;
${shader.vertexShader}
`;
shader.vertexShader = shader.vertexShader.replace(
'#include <uv_vertex>',
`
#include <uv_vertex>
vec2 customUV = (uv * texSize * texScale) + texOffset * texScale;
vMapUv = customUV;
`
);
But that only works with an ‘ideal’ texture atlas image where:
- all icons have the same size
- there is no variable ‘empty’ space in the texture (TexturePacker tries to pack all it can in the top left corner of the image, but UV coodinates start in the bottom left which can be empty pixels…)
Even if I tweak the texture to try to make all icons the same size and try to prevent empty space in the bottom of the image it kinda works but with no precission as it’s not taking into account the real position of the icon in the atlas because of the paddings, etc (notice the missing top and right debug red border):
That’s why I need somehow to further modify the shader to really be able to feed each of the instances as attributes these four important variables contained in each ‘frame’ object created by TexturePacker: x and y offset and width and height.
My shader understanding is sadly not as good as I would like so any help would be very appreciated, thx!