如何使用 WebGL 正确处理 ~600000 个任意彩色 2D 方块的渲染？

问：

信息

我必须渲染一张地图，该地图被渲染为不同颜色的正方形的 2D 集合，在水平和垂直方向上由白线分隔。可能有 ~600000 个方块被白色区域包围，并且地图的实际边界是任意的，一次只能看到地图的一部分，因此不能一次完全渲染（地图是可滚动的）。地图是交互式的，所以悬停时必须改变正方形的颜色（深绿色正方形），可以选择一些矩形区域（紫色正方形集合），放大缩小+小地图快速从一个点移动到另一个点。有蓝色的方块是拥有的，它们有像图像一样的边框。作为补充，可以将图像附加到任何拥有的矩形区域。

实际实施情况

下面是基于 html canvas 的当前实现，它的性能不如我想要的，所以我决定使用 webgl 进行渲染。

我尝试过什么/研究

我尝试使用 ThreeJS 来实现这一点，但我认为它主要是面向 3d 的，而且它有许多我不会使用的不需要的功能，所以我决定使用最低限度。我尝试编写一些片段着色器，并实现了一些功能（选定区域、悬停对象）。我对 WebGL/OpenGL 很陌生，我在某处读到可以将缓冲区作为纹理传递给片段着色器，我正在考虑从整个地图（甚至是空白区域，以便着色器能够正确绘制边框）形成 UInt8 的缓冲区并将其传递给片段着色器，它将通过每个元素的数量来区分状态并相应地绘制方块。但后来我意识到，即使在添加图像功能之前，很多负载也会卸载到片段着色器，而且不清楚片段着色器是否能够单独处理所有这些负载。在做一些研究后，我发现可以使用点及其大小参数来实现这一点，我认为将一些工作拆分到顶点着色器中可能是有益的，而不是在片段着色器中完成所有工作。

我想要实现的目标

我希望能够在几乎所有设备上渲染这张地图，因为在我看来，当前的硬件能够非常高效且非常高性能地完成这种工作。我知道它非常依赖于实现，所以这是我的问题：

问题

它是否会提供一些性能改进，或者将此类工作卸载到顶点着色器并将每个方块绘制为一个点会更糟？我可以使用（或主要使用）哪些 WebGL 能力或技术来处理这种情况？在有多个图像的情况下，如何实现高性能渲染？