Skip to content

Commit f93e251

Browse files
timbesstimbess
committed
Add WebGL chart plugin with scatter, line, and treemap
New viewer-webgl package that renders perspective views on the GPU. Three chart types (scatter, line, treemap), each with custom GLSL shaders, chunked Arrow streaming, and a shared buffer pool for GPU memory reuse. Handles axis/legend/tick layout, gridline rendering, and zoom/pan interaction. Hooks into the viewer's streaming draw lifecycle. Adds the webgl-example app and registers the package in the workspace and setup script. Signed-off-by: Timothy Bess <timbessmail@gmail.com>
1 parent 7e6d181 commit f93e251

46 files changed

Lines changed: 7706 additions & 9 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/webgl-example/build.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
2+
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
3+
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
4+
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
5+
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
6+
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
7+
// ┃ Copyright (c) 2017, the Perspective Authors. ┃
8+
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
9+
// ┃ This file is part of the Perspective library, distributed under the terms ┃
10+
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
11+
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
12+
13+
const esbuild = require("esbuild");
14+
const fs = require("fs");
15+
const path = require("path");
16+
17+
async function build() {
18+
await esbuild.build({
19+
entryPoints: ["src/index.js"],
20+
outdir: "dist",
21+
format: "esm",
22+
bundle: true,
23+
target: "es2022",
24+
loader: {
25+
".ttf": "file",
26+
".arrow": "file",
27+
".wasm": "file",
28+
".glsl": "text",
29+
},
30+
assetNames: "[name]",
31+
});
32+
33+
fs.writeFileSync(
34+
path.join(__dirname, "dist/index.html"),
35+
fs.readFileSync(path.join(__dirname, "src/index.html")).toString(),
36+
);
37+
}
38+
39+
build();

‎examples/webgl-example/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "webgl-example",
3+
"private": true,
4+
"version": "4.3.0",
5+
"description": "A WebGL chart plugin example built using `@perspective-dev/viewer-webgl`.",
6+
"scripts": {
7+
"build": "node build.js",
8+
"start": "node build.js && http-server dist"
9+
},
10+
"keywords": [],
11+
"license": "Apache-2.0",
12+
"dependencies": {
13+
"@perspective-dev/client": "workspace:",
14+
"@perspective-dev/viewer": "workspace:",
15+
"@perspective-dev/viewer-datagrid": "workspace:",
16+
"@perspective-dev/viewer-d3fc": "workspace:",
17+
"@perspective-dev/viewer-webgl": "workspace:",
18+
"superstore-arrow": "catalog:"
19+
},
20+
"devDependencies": {
21+
"esbuild": "catalog:",
22+
"http-server": "catalog:"
23+
}
24+
}

‎examples/webgl-example/src/index.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
perspective-viewer {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
right: 0;
6+
bottom: 0;
7+
}

‎examples/webgl-example/src/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
7+
<title>Perspective WebGL Plugin Example</title>
8+
9+
<link rel="preload" href="perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
10+
<link rel="preload" href="perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
11+
<link rel="preload" href="superstore.lz4.arrow" as="fetch" type="arraybuffer" crossorigin="anonymous" />
12+
13+
<script type="module" src="index.js"></script>
14+
<link rel="stylesheet" href="index.css" />
15+
</head>
16+
<body></body>
17+
</html>

0 commit comments

Comments
 (0)