Three.js如何增加画布文本纹理质量

Question

可以应用哪些参数，模式，技巧等来获得文本的清晰度？ 我要画很多，所以我不能使用3D文字。

我使用画布来编写文本和一些符号。我正在创建像标签信息一样的东西。

由于

Answer 1

这不是一件简单的事情，因为你会遇到100k“字体纹理”的内存问题。由于您需要100k文本元素，因此您需要管理几个难题。我也遇到过类似的问题，并将一些技术混合在一起以使其发挥作用。简单地说，你需要某种LOD（“细节水平”）才能使它发挥作用。该设置可能如下所示：

1. 使用BufferGeometry构建的THREE.ParticleSystem，其中每个位置都是一个文本位置
2. 一个“高分辨率”TextureAtlas，上面有256个图像，你可以动态分配你周围的图像（4096px x 4096px，256x256px图像）
3. 至少有一个“lowres”TextureAtlas，你有16x16px的图片。你事先准备好了。与之前的尺寸相同，但是您有所有文本的预览图像，每张图片的尺寸都是16x16像素。
4. 使用nearestneighbour算法的kdtree数据结构，用于确定相机附近的位置（类似http://threejs.org/examples/#webgl_nearestneighbour）
5. 子成像模块可以直接在GPU上连续替换高分纹理：https://github.com/mrdoob/three.js/pull/4661
6. 每个位置的索引，告诉它应该用于显示的TextureAtlas上的哪个位置

你知道我要去哪里。这是关于我的经历的一些文档：

Stackoverflow帖子：Display many thousand images in three.js 我（开始）解释我在做什么的博客：http://blogs.fhnw.ch/threejs/

这样你需要相当长的时间才能获得满意的结果。使这个更简单的唯一方法是摆脱16x16px预览图像。但我不建议......或者当然取决于你的设置。也许你有水平？城市？或者只显示这些文本的一部分有意义的任何其他结构？在处理大事之前，这可能是值得的。 如果您打算真正按照我的描述进行操作并按照我所描述的方式实现，我可以帮助您解决一些已有的代码和进一步的解释。告诉我你要去哪里：）