WebGL 加速#

Bokeh 提供对 WebGL 的有限支持，用于在 Web 浏览器中渲染绘图。例如，当可视化较大的数据集时，在 Bokeh 中使用 WebGL 会很有用。

WebGL 是一个 JavaScript API，允许使用图形处理单元 (GPU) 的硬件加速在浏览器中渲染内容。WebGL 是标准化的，并且在所有现代浏览器中都可用。

如果您使用 Bokeh 的 WebGL 输出后端，Bokeh 将自动检测浏览器是否支持 WebGL。当您在 Bokeh 绘图中使用启用 WebGL 的元素，但浏览器不支持 WebGL 时，Bokeh 将自动使用默认的 canvas 渲染器。

启用 WebGL#

要在 Bokeh 中启用 WebGL，请将绘图的 output_backend 属性设置为 "webgl"

p = figure(output_backend="webgl")

WebGL 输出后端仅支持 Bokeh 字形的一个子集。当您启用 WebGL 时，您是在请求在可用时使用 WebGL 渲染。WebGL 输出后端中不可用的字形将使用默认的 canvas 后端渲染。

如果您启用 Bokeh 的 WebGL 输出后端，只要浏览器支持，WebGL 将会被使用。这包括在 Jupyter notebooks 或 Jupyter lab 中的输出，以及当将 Bokeh 绘图导出为 PNG 时，如果底层浏览器（包括无头浏览器）支持 WebGL。

支持的字形#

散点和其他固定形状的字形#

Bokeh 的 WebGL 支持涵盖以下固定形状的字形

WebGL 对这些固定形状字形的支持涵盖以下属性

所有填充属性
所有线条属性，但虚线除外（将被忽略）
所有阴影属性，但使用 hatch_extra 属性的阴影图像除外（将被忽略）。

线条字形#

完全支持 line()、multi_line() 和 step() 字形的 WebGL，尽管带有圆形和方形端盖的虚线外观可能与默认 HTML canvas 渲染略有不同。

图像字形#

Bokeh 还支持 WebGL image()、image_rgba() 和 image_stack() 字形，但不包括 image_url()。

何时使用 WebGL#

一个通用的经验法则是，如果您渲染的点标记或点少于 10,000 个，Bokeh 的默认 canvas 输出后端效果良好。对于超过 25,000 个点标记或点的绘图，WebGL 通常会提供明显更好的性能。一般来说，要渲染的点标记或点越多，与默认 canvas 输出后端相比，WebGL 就越有效率。WebGL 性能超过 canvas 的点标记或点数量取决于可用的硬件，因此您需要在自己的硬件上试用才能确定最适合您的方案。

WebGL 示例#

以下示例是一个启用了 WebGL 的包含 10,000 个散点圆的绘图。请注意，即使在没有对数据进行下采样的情况下，也可以平滑地平移和缩放绘图。

import numpy as np

from bokeh.plotting import figure, show

N = 10000

x = np.random.normal(0, np.pi, N)
y = np.sin(x) + np.random.normal(0, 0.2, N)

TOOLS = "pan,wheel_zoom,box_zoom,reset,save,box_select"

p = figure(tools=TOOLS, output_backend="webgl")
p.scatter(x, y, alpha=0.1, nonselection_alpha=0.001)

show(p)

类似地，下面的绘图演示了绘制一条包含 10,000 个点的单条线。

import numpy as np

from bokeh.plotting import figure, show

N = 10000
x = np.linspace(0, 10*np.pi, N)
y = np.cos(x) + np.sin(2*x+1.25) + np.random.normal(0, 0.001, (N, ))

p = figure(title="A line consisting of 10k points", output_backend="webgl")

p.line(x, y, color="#22aa22", line_width=3)

show(p)