chore: max px ratio, check WebGL support

Author: asuzuki-jumptrading

src/features/Overview/ShredsProgression/WebGl/Chart.tsx

@@ -101,10 +101,11 @@ export default function ShredsChart({
     ) {
       lastRedrawRef.current = time;
       if (!rendererRef.current) {
-        const result = setUpRenderer(width, height);
-        if (!result) return;
-        rendererRef.current = result;
-        containerRef.current?.replaceChildren(result.renderer.domElement);
+        const rendererObj = setUpRenderer(width, height);
+        if (!rendererObj) return;
+
+        rendererRef.current = rendererObj;
+        containerRef.current?.replaceChildren(rendererObj.renderer.domElement);
       } else {
         draw(
           chartId,

src/features/Overview/ShredsProgression/WebGl/chartUtils.ts

@@ -12,6 +12,7 @@ import {
   liveShredsDataAtom,
   liveShredsPostStartupRangeAtom,
   minDirtySlotByChartAtom,
+  isWebgl2SupportedAtom,
 } from "../atoms";
 import { shredEventDescPriorities } from "../const";
 import { updateLabels } from "../shredsProgressionPlugin";
@@ -55,6 +56,8 @@ export type RendererObj = {
   worldTsRange: TsRange;
 };
 
+const MAX_PIXEL_RATIO = 2;
+
 const colors = {
   skipped: convertToWebGlColor(shredSkippedColor),
   repairRequested: convertToWebGlColor(shredRepairRequestedColor),
@@ -85,23 +88,29 @@ export function setUpRenderer(canvasWidth: number, canvasHeight: number) {
   const camera = new THREE.OrthographicCamera(0, 0, 0, 0, 0.5, 10);
   camera.position.z = 1;
 
-  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-  renderer.setPixelRatio(window.devicePixelRatio);
-  renderer.setSize(canvasWidth, canvasHeight);
-  renderer.setClearColor(0x000000, 0);
-
-  const meshes = new Map<number, SlotMesh>();
-  const availableMeshes: SlotMesh[] = [];
-  renderer.render(scene, camera);
-
-  return {
-    renderer,
-    camera,
-    scene,
-    meshes,
-    availableMeshes,
-    worldTsRange,
-  };
+  try {
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, MAX_PIXEL_RATIO));
+    renderer.setSize(canvasWidth, canvasHeight);
+    renderer.setClearColor(0x000000, 0);
+
+    const meshes = new Map<number, SlotMesh>();
+    const availableMeshes: SlotMesh[] = [];
+    renderer.render(scene, camera);
+
+    return {
+      renderer,
+      camera,
+      scene,
+      meshes,
+      availableMeshes,
+      worldTsRange,
+    };
+  } catch {
+    // context creation can still fail despite the probe (e.g. too many live
+    // contexts, driver crash). Mark as unsupported to trigger fallback to canvas chart
+    store.set(isWebgl2SupportedAtom, false);
+  }
 }
 
 export function draw(

src/features/Overview/ShredsProgression/atoms.ts

@@ -6,6 +6,7 @@ import { nsPerMs, slotsPerLeader } from "../../../consts";
 import { getSlotGroupLeader } from "../../../utils";
 import { serverTimeMsAtom, skippedClusterSlotsAtom } from "../../../atoms";
 import { slotCaughtUpAtom } from "../../../api/atoms";
+import { isWebGl2Available } from "./webglSupport";
 
 type ShredEventTsDeltaMs = number | undefined;
 /**
@@ -292,6 +293,13 @@ export const liveShredsPostStartupRangeAtom = atom((get) =>
   get(shredsAtoms.rangeAfterStartup),
 );
 
+/**
+ * Whether WebGL2 is available.
+ * Will be set to false if renderer setup fails at runtime
+ * (e.g. because of context-limit / driver failure).
+ */
+export const isWebgl2SupportedAtom = atom(isWebGl2Available());
+
 export const minDirtySlotByChartAtom = atom<Map<string, number>>(new Map());
 
 /*

src/features/Overview/ShredsProgression/index.tsx

@@ -1,15 +1,21 @@
 import { lazy, Suspense } from "react";
 import { Box, Flex } from "@radix-ui/themes";
+import { useAtomValue } from "jotai";
 import Card from "../../../components/Card";
 import CardHeader from "../../../components/CardHeader";
 import { ShredsChartLegend } from "./ShredsChartLegend";
 import { isFrankendancer } from "../../../client";
+import { isWebgl2SupportedAtom } from "./atoms";
 
 // Lazy-load so Three.js is split into its own chunk, downloaded only when the
-// shreds chart mounts.
+// WebGL shreds chart mounts.
 const ShredsChartWebGl = lazy(() => import("./WebGl/Chart"));
+// Canvas (uPlot) fallback
+const ShredsChartCanvas = lazy(() => import("./ShredsChart"));
 
 export default function ShredsProgression() {
+  const webgl2Supported = useAtomValue(isWebgl2SupportedAtom);
+
   if (isFrankendancer) return;
 
   return (
@@ -21,7 +27,15 @@ export default function ShredsProgression() {
           <ShredsChartLegend />
         </Flex>
         <Suspense fallback={<Box height="400px" />}>
-          <ShredsChartWebGl height="400px" chartId="overview-shreds-chart" />
+          {webgl2Supported ? (
+            <ShredsChartWebGl height="400px" chartId="overview-shreds-chart" />
+          ) : (
+            <ShredsChartCanvas
+              height="400px"
+              chartId="overview-shreds-chart"
+              isOnStartupScreen={false}
+            />
+          )}
         </Suspense>
       </Flex>
     </Card>

src/features/Overview/ShredsProgression/webglSupport.ts

@@ -0,0 +1,14 @@
+/**
+ * Detect whether a WebGL2 context can be created. Three.js (>= r163) is
+ * WebGL2-only, and `new WebGLRenderer()` throws if the context can't be
+ * created. Some browsers / GPUs report support but still fail, so probe
+ * a canvas.
+ */
+export function isWebGl2Available(): boolean {
+  try {
+    const canvas = document.createElement("canvas");
+    return !!canvas.getContext("webgl2");
+  } catch {
+    return false;
+  }
+}