| | |
|---|
| | | stop: () => void |
|---|
| | | } |
|---|
| | | |
|---|
| | | async function determineGraphicsAPI(): Promise<"webgpu" | "webgl"> { |
|---|
| | | const adapter = await navigator.gpu?.requestAdapter().catch(() => null) |
|---|
| | | if (!adapter) { |
|---|
| | | return "webgl" |
|---|
| | | } |
|---|
| | | // Devices with WebGPU but no float32-blendable feature fail to render the graph |
|---|
| | | return adapter.features.has("float32-blendable") ? "webgpu" : "webgl" |
|---|
| | | } |
|---|
| | | |
|---|
| | | async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) { |
|---|
| | | const slug = simplifySlug(fullSlug) |
|---|
| | | const visited = getVisited() |
|---|
| | |
|---|
| | | tweens.forEach((tween) => tween.stop()) |
|---|
| | | tweens.clear() |
|---|
| | | |
|---|
| | | const pixiPreference = await determineGraphicsAPI() |
|---|
| | | const app = new Application() |
|---|
| | | await app.init({ |
|---|
| | | width, |
|---|
| | |
|---|
| | | autoStart: false, |
|---|
| | | autoDensity: true, |
|---|
| | | backgroundAlpha: 0, |
|---|
| | | preference: "webgpu", |
|---|
| | | preference: pixiPreference, |
|---|
| | | resolution: window.devicePixelRatio, |
|---|
| | | eventMode: "static", |
|---|
| | | }) |
|---|
| | |
|---|
| | | }) |
|---|
| | | .circle(0, 0, nodeRadius(n)) |
|---|
| | | .fill({ color: isTagNode ? computedStyleMap["--light"] : color(n) }) |
|---|
| | | .stroke({ width: isTagNode ? 2 : 0, color: color(n) }) |
|---|
| | | .on("pointerover", (e) => { |
|---|
| | | updateHoverInfo(e.target.label) |
|---|
| | | oldLabelOpacity = label.alpha |
|---|
| | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (isTagNode) { |
|---|
| | | gfx.stroke({ width: 2, color: computedStyleMap["--tertiary"] }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | nodesContainer.addChild(gfx) |
|---|
| | | labelsContainer.addChild(label) |
|---|
| | | |
|---|
