From c0cda94b74992c26ecdb85249a552985ee07d6a4 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 22 Apr 2025 10:48:10 -0700
Subject: [PATCH] fix(graph): gpu detection

---
 quartz/components/scripts/graph.inline.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index a669b0547..bcae23e59 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -14,7 +14,15 @@ import {
   drag,
   zoom,
 } from "d3"
-import { Text, Graphics, Application, Container, Circle } from "pixi.js"
+import {
+  Text,
+  Graphics,
+  Application,
+  Container,
+  Circle,
+  isWebGPUSupported,
+  isWebGLSupported,
+} from "pixi.js"
 import { Group as TweenGroup, Tween as Tweened } from "@tweenjs/tween.js"
 import { registerEscapeHandler, removeAllChildren } from "./util"
 import { FullSlug, SimpleSlug, getFullSlug, resolveRelative, simplifySlug } from "../../util/path"
@@ -350,6 +358,11 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
   tweens.clear()
 
   const app = new Application()
+  const graphicsProvider = (await isWebGPUSupported())
+    ? "webgpu"
+    : isWebGLSupported()
+      ? "webgl"
+      : undefined
   await app.init({
     width,
     height,
@@ -357,7 +370,7 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
     autoStart: false,
     autoDensity: true,
     backgroundAlpha: 0,
-    preference: "webgpu",
+    preference: graphicsProvider,
     resolution: window.devicePixelRatio,
     eventMode: "static",
   })