fix: prefer webgl for devices with webgpu and no float32-blendable feature ...

anthops

2025-04-23 7d49dff0747f69e96ab83a98b97ece96d4268b36

fix: prefer webgl for devices with webgpu and no float32-blendable feature flag #1899 (#1933)

Co-authored-by: Tony <32993852+0xREDACTED@users.noreply.github.com>

 package-lock.json

@@ -14,6 +14,7 @@
        "@myriaddreamin/rehype-typst": "^0.5.4",
        "@napi-rs/simple-git": "0.1.19",
        "@tweenjs/tween.js": "^25.0.0",
        "@webgpu/types": "^0.1.60",
        "ansi-truncate": "^1.2.0",
        "async-mutex": "^0.5.0",
        "chalk": "^5.4.1",
@@ -2001,9 +2002,9 @@
      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
    },
    "node_modules/@webgpu/types": {
      "version": "0.1.44",
      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.44.tgz",
      "integrity": "sha512-JDpYJN5E/asw84LTYhKyvPpxGnD+bAKPtpW9Ilurf7cZpxaTbxkQcGwOd7jgB9BPBrTYQ+32ufo4HiuomTjHNQ==",
      "version": "0.1.60",
      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz",
      "integrity": "sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==",
      "license": "BSD-3-Clause"
    },
    "node_modules/@xmldom/xmldom": {

 package.json

@@ -40,6 +40,7 @@
    "@myriaddreamin/rehype-typst": "^0.5.4",
    "@napi-rs/simple-git": "0.1.19",
    "@tweenjs/tween.js": "^25.0.0",
    "@webgpu/types": "^0.1.60",
    "ansi-truncate": "^1.2.0",
    "async-mutex": "^0.5.0",
    "chalk": "^5.4.1",

 quartz/components/scripts/graph.inline.ts

@@ -68,6 +68,15 @@
  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()
@@ -349,6 +358,7 @@
  tweens.forEach((tween) => tween.stop())
  tweens.clear()

  const pixiPreference = await determineGraphicsAPI()
  const app = new Application()
  await app.init({
    width,
@@ -357,7 +367,7 @@
    autoStart: false,
    autoDensity: true,
    backgroundAlpha: 0,
    preference: "webgpu",
    preference: pixiPreference,
    resolution: window.devicePixelRatio,
    eventMode: "static",
  })