Basic advices on data structure optimization in WebGL build?

Hello!

I’m currently working on some kind of a geospatial WebGL project: it’s a city map with top-down view (much like in strategy games).
The map consists of square raster tiles (with satellite images on them) and 3d building models standing on top. Some of 3d models are unique – colored in yellow shades on pics below, and others are identical of several types – colored red, green and blue.

So, can anyone please tell, what is the best way to keep geometry and textures in terms of getting maximum optimization (build size, engine queries, render pipeline and so on). To begin with, here’s several options of how I supposed doing that:

  1. Each tile is a separate object and has it’s own texture. Each unique building is a separate object and has it’s own texture. Buildings of the same type are instances and share one texture.

  2. Each tile is a separate object, geometrically combined with buildings standing on top of it and has it’s own texture atlas (single file).

  3. Each tile is a separate object, geometrically combined with unique buildings standing on top of it and has it’s own texture atlas (single file). Buildings of the same type are instances and share one texture.

Should any of these work or there are better ways?