'spritesheet with instancing in webgl

I don't quite get how to pass in attribute data for rendering a sprite sheet or texture atlas while instancing. Let's assume WebGl1 (so no texture layers)

Without instancing, I have these uv coordinates to pass in:

let left = cell_x / atlas_width;
let right = (cell_x + cell_width) / atlas_width;
let top = (atlas_height - cell_y) / atlas_height;
let bottom = (atlas_height - (cell_y + cell_height)) / atlas_height;

let uvs = [left, top, left, bottom, right, top, right, bottom]

But with instancing, I don't quite get how to do that... my understanding is the attributes must be identical per-instance?

I tried to think about translating the above to shader code, like maybe a multiplier of some constant... but I couldn't quite figure it out.

I can get the left,right,top, and bottom since those only depend on the constants cell_* and atlas_*, but how do I get from knowing these corners to the actual uv output, since I don't know which vertex I'm in?

Any help is appreciated. Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source