fix(3d): revert WebGPURenderer to THREE.WebGLRenderer for R3F compatibility

WebGPURenderer (even with forceWebGL:true) requires async await renderer.init()
before .render() can be called, but R3F Canvas only supports synchronous
renderer creation. Reverted to THREE.WebGLRenderer which works with
R3F's synchronous gl prop. WebGPU support deferred until R3F upstream
adds async renderer initialization support.

Author: Aparencia

client/src/features/pomodoro/components/chronos/ChronosCanvas.tsx

@@ -10,12 +10,11 @@
  *
  * 降级策略：系统 reduced-motion / 性能 low 档 → degraded（减粒子），动画保留不静态化。
  *
- * @ai-context: Chronos 渲染容器；3D 粒子球 ChronosSphere，WebGPU 渲染后端（forceWebGL 回退）。
+ * @ai-context: Chronos 渲染容器；3D 粒子球 ChronosSphere，WebGL 渲染后端。
  */
 import { Canvas } from '@react-three/fiber';
 import { useRef, useState, memo } from 'react';
 import * as THREE from 'three';
-import WebGPURenderer from 'three/src/renderers/webgpu/WebGPURenderer.js';
 import { useSceneTheme } from '@/lib/3d/hooks/useSceneTheme';
 import { useReducedMotion } from '@/hooks/useReducedMotion';
 import { usePerformanceModeStore } from '@/lib/performance/usePerformanceMode';
@@ -127,9 +126,13 @@ export const ChronosCanvas = memo(function ChronosCanvas({
       role="timer"
       aria-label={timeStr}
     >
-      {/* 3D 粒子球（R3F + WebGPU；THREE.Points 高效渲染，canvas 填满容器） */}
+      {/* 3D 粒子球（R3F + WebGL；THREE.Points 高效渲染，canvas 填满容器） */}
       <Canvas
-        gl={(c) => new WebGPURenderer({ canvas: c, antialias: true, alpha: true, stencil: false, forceWebGL: true })}
+        gl={{
+          antialias: true,
+          alpha: true,
+          stencil: false,
+        }}
         dpr={[1, degraded ? 1 : 1.5]}
         camera={{ fov: 50, near: 0.1, far: 20, position: [0, 0, 4.5] }}
         style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', background: 'transparent' }}

client/src/lib/3d/core/SceneProvider.tsx

@@ -20,8 +20,8 @@
  *
  * @ai-context: 3D 场景核心（R3F）：SceneProvider。
  *
- * 注意：当前使用 forceWebGL=true 以同步初始化。R3F 尚不支持异步
- * WebGPU 渲染器初始化（await renderer.init()），待上游支持后移除该选项。
+ * 渲染后端：使用 THREE.WebGLRenderer（R3F 目前不支持异步渲染器初始化，
+ * 待上游支持后切换回 WebGPURenderer）。
  */
 import { Canvas, useThree } from '@react-three/fiber';
 import { Suspense, useEffect, useLayoutEffect, useState } from 'react';
@@ -35,7 +35,6 @@ import { usePerformanceModeStore } from '@/lib/performance/usePerformanceMode';
 import { PERFORMANCE_MODE_CONFIG } from '@/lib/performance/performanceMode';
 import { useSceneTheme } from '../hooks/useSceneTheme';
 import * as THREE from 'three';
-import WebGPURenderer from 'three/src/renderers/webgpu/WebGPURenderer.js';
 
 interface SceneProviderProps {
   children: React.ReactNode;
@@ -187,13 +186,12 @@ export function SceneProvider({ children, interactive = false }: SceneProviderPr
     <div className="fixed inset-0 z-0" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>
       <Canvas
         frameloop={frameloop}
-        gl={(canvas) => new WebGPURenderer({
-          canvas,
+        gl={{
           antialias: true,
           alpha: true,
+          powerPreference: 'high-performance',
           stencil: false,
-          forceWebGL: true,
-        })}
+        }}
         camera={{ fov: 60, near: 0.1, far: 1000, position: [0, 0, 10] }}
         dpr={[1, 2]}
         style={{ background: 'transparent' }}
@@ -207,8 +205,12 @@ export function SceneProvider({ children, interactive = false }: SceneProviderPr
           // gl.shadowMap.type = THREE.PCFSoftShadowMap;
           // 注意：fog 和 background 由 ThemeAwareEnvironment 组件管理（主题感知）
           // GPU 诊断：打印实际渲染器名称，出现 SwiftShader 即说明落入软件渲染（硬件加速失效）
-          const backendName = (gl as any).backend?.constructor?.name ?? 'unknown';
-          console.info('[3D] Renderer backend:', backendName);
+          const ctx = gl.getContext();
+          const dbgExt = ctx.getExtension('WEBGL_debug_renderer_info');
+          const rendererName = dbgExt
+            ? ctx.getParameter(dbgExt.UNMASKED_RENDERER_WEBGL)
+            : ctx.getParameter(ctx.RENDERER);
+          console.info('[3D] WebGL renderer:', rendererName);
         }}
       >
         {/* FPS 自动降档仅在概览态测量（entering 飞行帧率不代表设备能力，docked 无帧率可言） */}