WebGPU Renderer for Vega
Warning: The splom examples of the demo use a set of 50.000 data points. Thus canvas and svg will take very long for it to render or simply crash.
The Vega WebGPU Extension is created by KaNaDaAT based on the already existing efforts of lsh.
This repository contains a WebGPU renderer extension for Vega JS.
Almost all Vega Components can be used. While some are more performant than others. It is not yet possible to use:
- Images
- Gradient Colors
- Some Properties of Components as for example rounded edges for Rectangles or Groups
Note: The WebGPU renderer is currently a work in progress and might not be suitable for all production use.
Use this scaffolding to get started using the WebGPU renderer. Instead of being directly usable after loading Vega, as the SVG and Canvas renderers are, the WebGPU renderer is a plugin which requires the inclusion of an additional JavaScript library.
Therefor all that needs to be done is to link the Vega WebGPU Renderer
<script src="https://kanadaat.github.io/vega-webgpu/releases/1_2_0/vega-webgpu-renderer.js"></script>The WebGPU renderer was developed for Vega 5.19.1. Other Versions may work as well.
<body>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5.19.1/build/vega.js"></script>
<script src="https://kanadaat.github.io/vega-webgpu/releases/1_1_1/vega-webgpu-renderer.js"></script>
<div id="vis"></div>
<script>
// Load in your own Vega spec here.
d3.json('https://vega.github.io/vega/examples/bar-chart.vg.json', function (spec) {
var view = new vega.View(vega.parse(spec))
.initialize(document.querySelector('#vis'))
.renderer('webgpu')
.run();
});
</script>
</body>The example shows how it is possible to always use the "latest" version.
For more infos look at Hosted Versions.
To build the WebGPU renderer locally, follow these steps:
- Install dependencies:
npm install - Build the renderer:
npm run build - The built
vega-webgpu-renderer.jsfile will be available in thebuilddirectory.
To develop the WebGPU renderer locally, follow these steps:
- Install dependencies:
npm install - Build the renderer in dev mode:
npm run dev - Go live using something as the Visual Studio Code "Live Server" Extension and open the test website.
Call: http://localhost:5500/test?spec=bar&renderer=webgpu&version=dev in order to use the local file.
New Versions can be simply released by using the npm run release script.
npm run release 1.1.1 "Using Render Bundles for Performance"
Readme has to be changed manually yet.
| Version | Hosted Renderer Link | Changes |
|---|---|---|
| 1.0.0 | vega-webgpu-renderer | First WebGPU Implementation |
| 1.1.0 | vega-webgpu-renderer | Over all improvements in terms of performance and structure. |
| 1.1.1 | vega-webgpu-renderer | Performance improvements on Paths. Introducing WebGPU Render Option renderLock. |
| 1.2.0 | vega-webgpu-renderer | Performance improvements on Lines. Render Bundling Option renderBatch. Support Clipping. Path offset fixed. |
| Have a look at all versions here. |
The WebGPU allows some options to be set:
fetch('https://vega.github.io/vega/examples/bar-chart.vg.json')
.then(res => res.json())
.then(spec => render(spec))
.catch(err => console.error(err));
function render(spec) {
view = new vega.View(vega.parse(spec), {
renderer: 'webgpu', // renderer (canvas or svg)
container: '#vis', // parent DOM container
hover: true // enable hover processing
});
return view.runAsync();
}
view._renderer.wgOptions.debugLog = true;
// For Version 1.0.0 it is:
// view._renderer.debugLog = true;| Option | Description | Default | Version | Note |
|---|---|---|---|---|
| debugLog | Allows the renderer to log the time needed for the frame | false | 1.0.0 | |
| simpleLine | When set to false the renderer will use a different type of line rendering that is optimized for small amount of lines with alot of points (curved lines) |
true | 1.0.0 | Since 1.2.0 Deprecated. Look at renderBatch |
| cacheShape | Allows shapes to cache its entries so it might be faster (experimental) | false | 1.1.0 | |
| renderLock | Will lock the render loop from beeing called again until the previous call is finished. Might skip render steps. The most recent will always be called. Will enhance the performance, esspecially for interactive GUI. | true | 1.1.1 | |
| renderBatch | Will enable to render marks in batches if possible. Will render multiple lines at once instead of one after another (parallel coordinates). | true | 1.2.0 |
Note: Its a bit different on Version 1.0.0. Have a look at the demos index.js
Contributions are welcome as this project is very complex. The small amount of WebGPU sources yet make it even more complicated. (Especially for 2D rendering)
- Performance of Areas, Shapes and Paths might not be very good. A hybrid version will be needed.
- Gradiants do not work. May do that via hybrid version or shaders.
- Symbols only support circles yet.
- Lines dont support dashes nor joins (miter join, bevel join, ...)
- Rects do not support rounded edges yet.
- Resizing the Canvas will cause webgpu renderer to fail.