情节:WebGL图是模糊/模糊的

Question

当我使用 Plotly 制作 SVG 图时，我没有问题。当我制作WebGL图时，标绘点并不那么清晰：它们是"模糊的"或"模糊的"。 我正在使用情节.js 1.54.1。(我主要通过 plotly-r 4.9.2.1 使用它，但这似乎不是问题所在。

下面是问题的最小演示，使用 R 创建子图：

library(plotly)
data(iris)
mySVG <- plot_ly(
x      = ~Petal.Length, y = ~Petal.Width,
type   = "scatter", mode  = "markers",  
color  = ~Species,
data   = iris,
marker = list(size = 10))
myWebGL <- toWebGL(mySVG)
subplot(mySVG, myWebGL, nrows = 2)  

它产生了这个数字。左侧面板(SVG 图(明显比右侧面板(WebGL 图(更清晰。为什么Plotly的WebGL图如此模糊？

这个问题在 Plotly.js Github 存储库中已经多次被注意到：例如，https://github.com/plotly/plotly.js/issues/3246 和 https://github.com/plotly/plotly.js/issues/2431。(后一个问题被框定为 Plotly 处理 hsl 颜色模型的问题，但即使我们不使用该模型，也会出现模糊渲染。

这个问题并非特定于视网膜屏幕。我自己的显示器只有 110 dpi，即使在这种显示器上问题也很严重。

我尝试过的事情：

• 更改设置图解时使用的glPixelRatio选项。
• 操纵 WebGL 图的canvas元素。我读到当canvas.width和canvas.clientWidth不一样时，可能会出现模糊。但这在这里不是问题。(canvas.height和canvas.clientHeight也是如此。
• 根据此评论，使用 Plotly.newplot(( 重新渲染绘图。

这些都不起作用。这个问题有解决方案吗？

Answer 1

在 https://community.plotly.com/t/webgl-plots-are-blurry/41716 有一些讨论。该线程上的一条消息是SVG是矢量的，WebGL是像素化的，这使得将WebGL提高到SVG质量变得棘手。但该线程还表明，有一个未完成的拉取请求可能会有所帮助。

编辑 2021-12-10：R 的"plotly"包版本 4.9.3 包含 plotly v1.57.1。升级到此版本的 R "plotly"包可能会解决此问题。(我还没有使用这个最新版本的 R 包测试帖子中的示例代码。

编辑 2020-10-23：plotly.js 中的相关拉取请求是 #3637 和 - 尤其是 - #5093。 #5093 已合并到 plotly.js 1.55.0 中，但该版本尚未合并到 R 的"plotly"包中。