1. 首页
  2. three.js

three.js基于SVG的纹理缩放

我需要可视化超大的svg(内容超过300000行)。n在不过载DOM的情况下快速平滑地缩放和平移它的唯一方法是使用画布和webgl上下文。我尝试过2d上下文,但交互速度仍然很慢。n我已经将svg加载到threejs纹理,我面临的唯一问题是放大时的图片质量。n我理解,画布是基于像素的,它不是可缩放的图形。不管怎样,当我放大到任何比例级别时,有没有办法使它变得清晰?n我听说了mipmap,他们能帮我什么忙吗?或者可能有其他方法来解决这个问题,或者另一个libs…n我非常感谢您的帮助,因为我已经花了很多时间没有得到任何正确的结果。n您可以尝试用SVGLoader来加载SVG吗?有关详细信息,请参见webgl\\u loader\\u svg 84。n这样,您就不用svg作为纹理,而是将形状三角化并渲染为一组网格。n您能展示它的外观吗?如果它很简单,你可以通过调整纹理的大小来做一些伪虚拟纹理,这将是昂贵的,并且限制了将svg渲染到画布的缩放,理论上,画布的最大大小将是视口的大小,但没有缩放限制。n你必须找到平截头体的最小面对齐四边形。但这并不简单。Mugen建议将其转换为几何体,这是一种简单但有限的细分方法。这取决于缩放的深度,以及边缘线(如果它们出现在网格中)是否适合您。n是的,我尝试了threejs SVGLoader。它无法使用我的svg进行管理。我得到了一些奇怪的形状。n我也尝试了fabricjs svg loader,它工作得很好,但它们没有WebGL支持。n所以,这就是我尝试使用纹理的原因。n您尝试过svg上的任何优化吗?一个受欢迎的图书馆是https://github.com/svg/svgo35n有许多用于路径简化和合并的参数,它们可能允许svg在通用加载程序中正常工作。n处理文件可能比处理代码更好。n是的,该文件已经过优化。n我们讨论的是用svg描述的非常大的数据集。n很高兴看到它的外观和显示方式。n嗯,你能分享一下svg文件吗,也许我们能想出一些办法。n这里是nhttps://gofile.io/d/U118ow64有点简化,但仍然很大。n那是确实很有趣,您是否考虑过将该数据集转换为更易于显示的数据集?例如,您可以仅使用位置和数字,并使用点精灵显示它们,使圆仅在片段着色器中显示,使其看起来就像矢量一样。不再涉及纹理,它燃烧得很快。n它看起来像是从程序中导出的吗?无论如何,使用SVG加载器转换为几何图形在这里已经不是一个选项了。如果您可以以不同的格式(如CSV表)获取数据,则可以避免使用SVG。n我可以按原样获取此SVG,此外,它可以包括其他类型的形状、图案填充等。n我不必关心其内容,这就是为什么我需要一种方法将其加载为可缩放纹理。n在我的情况下,mimpmaps可以作为解决方案吗?n@15它一定要在里面吗three.js?您仅仅需要平移/缩放支持吗?如果是这样的话,我可以提供一些可行的解决方案。Dudeskin15:nmimpmap能成为我的解决方案吗?n不,它们用于执行“缩小尺度”,因为在距离上获得亚像素的纹理将导致屏幕上没有它们的像素化汤。n根据您的需要,您也可以尝试CSS3D渲染器,因为您将能够在元素中渲染实际的可缩放svg。n此外,您可以甚至可以将CSS3D与WebGL画布混合使用。n不一定three.js,它可以是任何能让它工作的解决方案。nCSS3D渲染器将如何帮助我?我的意思是,在这种情况下svg不会也作为纹理加载吗?n你有没有关于如何实施的例子?n我对SVG的体验好坏参半。几年前我有一个类似的问题要解决。我使用SVG来表示电子电路图,我很快意识到SVG的渲染速度很慢。我在那个项目上实现了一系列优化,其中最重要的是使用空间索引,第二个是用不同mip级别的图像构建位图块。这不是直截了当的n SVG-based texture scalingn

three.js基于SVG的纹理缩放 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e5%9f%ba%e4%ba%8esvg%e7%9a%84%e7%ba%b9%e7%90%86%e7%bc%a9%e6%94%be/