Javascript 为WebGL应用程序动态创建签名距离场图像

我正在用HTML5开发一个类似“CAD”的程序，需要在屏幕上绘制数千（700000+）个图像。我认为，“幸运的是”，许多图像都是对一组独特图像的复制。唯一集比它们的实例小许多数量级。我正在处理的一个示例有700000多个360个唯一图像集的实例。这些图像实际上是在程序第一次加载时生成的，它们是矩形的，以“中间”为中心的图像的“名称”（在矩形内没有颜色等，只是一个矩形轮廓，中间有文本，文本和矩形轮廓是黑色的）。该程序应该能够以多种放大倍数显示图像，当然，它的速度也应该足够快，以便发挥作用

第一个实现在加载SVG图像时运行良好。由于图像的矢量特性，它在所有放大倍数下都能很好地工作。但在大约70000个实例之后，程序开始耗尽内存。我认为这是因为DOM无法跟上如此多的实例

经过大量的研究和实验，我能够使用WebGL实现该程序的工作版本。它工作得很好，而且速度很快。我知道我必须免费实现从SVG获得的所有有趣的东西，比如CSS颜色、监听器、DOM中的单个元素等等，但无论如何我没有使用太多

到目前为止，我已经能够实现一个系统，该系统可以使用一个具有1个纹理的形状图集，然后使用将纹理坐标传递给像素着色器进行渲染的标准技术，来渲染矩形子集的许多不同实例。这一切正常，除了atlas形状中心的字符串在所有放大倍数下看起来都不太好。为了使程序最有用，我需要能够清楚地显示字符串。生成矩形地图集形成画布2d，即使是在高分辨率下，字符串作为地图集矩形的一部分，虽然非常简单，但在所有放大倍数下似乎都无法很好地渲染。我研究了如何自己生成字符串地图集，这很好，但在我看来，我应该能够创建一个图像地图集，能够以合理的放大倍数（包括文本）很好地显示，并且可能可以节省大量独特的绘图调用，以便使用有符号的距离字段简单地生成文本

这就是我碰壁的地方。我找到了一些参考本文的地方->。这似乎正是我要找的。我认为我独特的一组矩形、文本对就像上面的文章中描述的“贴花”。在我的例子中，我会让我所有的唯一实例生成一个低分辨率SDF版本（64x64）的高分辨率版本（2048x2048）的实例，然后更改我的片段着色器，使其能够以此处概述的任何分辨率进行渲染->。但是，我还没有找到任何地方显示如何从高分辨率图像生成低分辨率版本的SDF

我的问题如下：

如何使用画布和JavaScript动态生成高分辨率图像（2048x2048）的低分辨率SDF版本（64x64），以便创建用于片段着色器的纹理？理想情况下，这只需要在程序开始时生成一次

我对他的想法正确吗？文本是否注定必须使用SDF字体图集单独绘制

---

我对这个问题最初的直觉回答是“你不需要同时在屏幕上绘制700.000幅图像，只需关注技术，就可以生成当前动态可见的子集”。澄清这部分要求可能有助于把更多的注意力放在实际问题上。@Paul：回答你的问题，“在最坏的情况下，是的”。我已经使用了其他技术，不必渲染所有矩形。我的问题更多的是关于渲染唯一集的最佳方法。我希望我可以渲染一次，并在所有放大倍数下使用它们，不管有多少个实例可以绘制。我对这个问题的最初直觉回答是“你不需要在屏幕上同时绘制700.000幅图像，只需关注技术，以生成当前在运行中可见的子集”。澄清这部分要求可能有助于把更多的注意力放在实际问题上。@Paul：回答你的问题，“在最坏的情况下，是的”。我已经使用了其他技术，不必渲染所有矩形。我的问题更多的是关于渲染唯一集的最佳方法。我希望我可以渲染它们一次，并在所有放大倍数下使用它们，无论绘制了多少实例