Three.js Worker 线程渲染：OffscreenCanvas 在 Web3 可视化中的并行渲染实践
一、深度引言
Web3 数据可视化正变得日益复杂。链上交易图谱、DeFi 资金流向的 3D 力导向图、NFT 市场的实时地板价热力图、跨链资产分布的立体拓扑——这些场景的渲染计算量已经超出了浏览器主线程的承载能力。当 Three.js 场景中包含数千个可交互的 3D 节点、数十个动态光源和实时粒子效果时，60fps 的稳定渲染成为一项硬工程挑战。
问题的根源在于浏览器的事件循环模型。主线程同时承担 DOM 操作、JavaScript 执行、CSS 样式计算、布局和绘制任务。Three.js 的渲染管线中，几何更新、矩阵计算、着色器编译都在主线程上运行。当一个 WebSocket 推送了 500 条新交易数据需要更新 3D 场景时，主线程会被短暂阻塞，导致用户交互（拖拽、缩放、点击）出现可感知的卡顿。
Web Workers 是浏览器的并行计算能力入口，但传统 Workers 无法直接访问 DOM 或 Canvas API。OffscreenCanvas改变了这个规则——它允许 Worker 线程直接操作 Canvas 的渲染上下文，实现真正的渲染与逻辑分离。这意味着可以将整个 Three.js 渲染管线迁移到 Worker 线程，让主线程专注于 UI 响应和数据接收，实现"渲染永不应阻塞交互"的并行架构。
本文将基于 OffscreenCanvas + Three.js 构建一个生产级的多线程 Web3 可视化渲染引擎，重点解决 Worker 通信协议、场景状态同步、和主线程与 Worker 之间的光线投射（Raycasting）交互问题。
二、原理剖析
2.1 架构对比
graph TB subgraph 传统架构单线程 MAIN1[主线程] MAIN1 -->|同步阻塞| DOM_OP[DOM操作] MAIN1 -->|同步阻塞| DATA_PROC[数据处理] MAIN1 -->|同步阻塞| THREE_RENDER[Three.js渲染] MAIN1 -->|同步阻塞| UI_INTERACT[用户交互] end subgraph Worker架构并行 MAIN2[主线程<br/>DOM/事件/UI] WORKER[Worker线程<br/>Three.js渲染<br/>OffscreenCanvas] MAIN2 -->|requestAnimationFrame| FRAME_SYNC[帧同步控制] FRAME_SYNC -->|postMessage<br/>场景数据| WORKER WORKER -->|postMessage<br/>交互事件| MAIN2 WORKER -->|WebGL渲染| OC[OffscreenCanvas] OC -.->|ImageBitmap| MAIN2 MAIN2 -->|drawImage| DISPLAY[DOM Canvas元素] end style MAIN1 fill:#e74c3c,color:#fff style MAIN2 fill:#20bf6b,color:#fff style WORKER fill:#4834d4,color:#fff style OC fill:#ffa502,color:#fff2.2 关键决策：ImageBitmap vs transferControlToOffscreen
OffscreenCanvas 有两种使用模式：
| 模式 | 方法 | 优点 | 缺点 |
|---|---|---|---|
| ImageBitmap 模式 | Worker渲染到OffscreenCanvas →transferToImageBitmap()→ 主线程绘制 | 兼容性好，主线程保留Canvas控制权 | 多一次绘制调用，轻微性能损耗 |
| 完全离屏模式 | 主线程transferControlToOffscreen()→ Worker 完全控制 | 零拷贝，Worker直接渲染到Canvas | 主线程失去Canvas控制权，无法添加HTML覆盖层 |
对于 Web3 可视化场景（通常需要在 3D 视图上叠加 HTML 标签和 UI 组件），ImageBitmap 模式是更实用的选择，本文以此为基础构建。
2.3 Worker 通信协议设计
主线程与 Worker 之间的通信通过postMessage的结构化克隆实现。一个精心设计的消息协议是并行渲染的核心：
主线程 → Worker: { type: 'UPDATE_SCENE', payload: { nodes, edges, config } } 主线程 → Worker: { type: 'CAMERA_TRANSFORM', payload: { position, target } } Worker → 主线程: { type: 'INTERACTION', payload: { type: 'click', intersections } } Worker → 主线程: { type: 'RENDER_STATS', payload: { fps, drawCalls, triangles } }三、代码实践
3.1 Worker 端的 Three.js 渲染引擎
// workers/render-worker.ts /** * Three.js 渲染 Worker * 在独立线程中运行完整的3D渲染管线 * * 职责： * - 管理 Three.js 场景、相机、渲染器 * - 响应主线程的场景更新指令 * - 执行渲染循环（requestAnimationFrame 在 Worker 中可用） * - 处理射线交互并回传结果 */ import * as THREE from 'three'; import { OrbitControls as OrbitControlsImpl } from 'three/examples/jsm/controls/OrbitControls'; // === 消息类型定义 === type WorkerMessage = | { type: 'INIT'; payload: { canvas: OffscreenCanvas; width: number; height: number } } | { type: 'RESIZE'; payload: { width: number; height: number } } | { type: 'UPDATE_SCENE'; payload: SceneUpdatePayload } | { type: 'CAMERA_TRANSFORM'; payload: { position: [number, number, number]; target: [number, number, number] } } | { type: 'RAYCAST'; payload: { x: number; y: number } } | { type: 'STOP' }; interface SceneUpdatePayload { nodes?: Array<{ id: string; position: [number, number, number]; color?: string; size?: number; label?: string; }>; edges?: Array<{ source: [number, number, number]; target: [number, number, number]; color?: string; width?: number; animated?: boolean; }>; } // === 全局状态 === let renderer: THREE.WebGLRenderer; let scene: THREE.Scene; let camera: THREE.PerspectiveCamera; let controls: OrbitControlsImpl; let nodeObjects: Map<string, THREE.Mesh> = new Map(); let edgeLines: THREE.Line[] = []; let isRunning = false; let renderRequestId = 0; let clock = new THREE.Clock(); // === FPS 计数器 === let frameCount = 0; let lastFpsTime = 0; let currentFps = 0; /** * 初始化渲染引擎 * 这是 Worker 启动后的第一个动作 */ function init(payload: { canvas: OffscreenCanvas; width: number; height: number }) { // === 渲染器初始化 === // 在Worker中使用OffscreenCanvas创建WebGL上下文 // antialias开启时在Worker中可能有兼容性问题，按需开启 renderer = new THREE.WebGLRenderer({ canvas: payload.canvas, antialias: true, alpha: true, // 透明背景，便于叠加HTML层 powerPreference: 'high-performance', }); renderer.setSize(payload.width, payload.height, false); // 设备像素比限制在2以内，高DPI设备上避免性能浪费 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // === 场景初始化 === scene = new THREE.Scene(); // 深色科技风背景：贴合Web3/赛博朋克视觉风格 scene.background = new THREE.Color(0x0a0a1a); // 雾效：增强深度感和性能（远处物体被裁剪） scene.fog = new THREE.Fog(0x0a0a1a, 50, 200); // === 相机初始化 === camera = new THREE.PerspectiveCamera( 45, // FOV：比默认60度更窄，减少边缘畸变 payload.width / payload.height, 0.1, 1000 ); camera.position.set(20, 15, 30); camera.lookAt(0, 0, 0); // === 轨道控制器 === // 注意：OrbitControls在Worker中通过事件模拟工作 // 实际交互事件由主线程捕获后转发 controls = new OrbitControlsImpl(camera, payload.canvas as any); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.minDistance = 5; controls.maxDistance = 100; controls.maxPolarAngle = Math.PI * 0.8; // 限制俯仰角，防止翻到底部 // === 光照设置 === setupLights(); // === 网格地面 === setupGrid(); // === 粒子背景 === setupParticleBackground(); postMessage({ type: 'INIT_COMPLETE' }); } function setupLights() { // 环境光：基础照明，避免暗面全黑 const ambient = new THREE.AmbientLight(0x404060, 0.6); scene.add(ambient); // 主方向光：模拟太阳光，产生阴影感 const directional = new THREE.DirectionalLight(0x4488ff, 1.2); directional.position.set(50, 50, 30); scene.add(directional); // 点光源：从下方补光，赛博朋克风格的底部辉光效果 const point = new THREE.PointLight(0xff4488, 0.8, 50); point.position.set(0, -5, 0); scene.add(point); // 第二个点光源：从上方产生蓝色调高光 const point2 = new THREE.PointLight(0x4488ff, 0.6, 40); point2.position.set(-10, 10, -10); scene.add(point2); } function setupGrid() { // 赛博朋克风格网格：半透明、发光色 const gridHelper = new THREE.PolarGridHelper(30, 32, 20, 64, 0x224466, 0x224466); scene.add(gridHelper); } function setupParticleBackground() { // 粒子星空背景：增强视觉深度和科技感 const particleCount = 2000; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount; i++) { // 球形分布 const theta = Math.random() * Math.PI * 2; const phi = Math.acos(2 * Math.random() - 1); const radius = 40 + Math.random() * 60; positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta); positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta); positions[i * 3 + 2] = radius * Math.cos(phi); // 蓝紫色调粒子颜色 colors[i * 3] = 0.2 + Math.random() * 0.3; colors[i * 3 + 1] = 0.1 + Math.random() * 0.2; colors[i * 3 + 2] = 0.5 + Math.random() * 0.5; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const material = new THREE.PointsMaterial({ size: 0.15, vertexColors: true, blending: THREE.AdditiveBlending, depthWrite: false, transparent: true, opacity: 0.6, }); const particles = new THREE.Points(geometry, material); particles.name = 'backgroundParticles'; scene.add(particles); } /** * 更新场景数据 * 增量更新而非全量重建，优化大数据集下的性能 */ function updateScene(payload: SceneUpdatePayload) { if (payload.nodes) { updateNodes(payload.nodes); } if (payload.edges) { updateEdges(payload.edges); } } function updateNodes(nodes: SceneUpdatePayload['nodes']) { const newNodeIds = new Set(nodes!.map((n) => n.id)); // 移除不再需要的节点 for (const [id, mesh] of nodeObjects) { if (!newNodeIds.has(id)) { scene.remove(mesh); mesh.geometry.dispose(); (mesh.material as THREE.Material).dispose(); nodeObjects.delete(id); } } // 创建或更新节点 for (const node of nodes!) { let mesh = nodeObjects.get(node.id); if (!mesh) { // 创建新节点：使用球体 + 发光环的复合几何体 const group = createNodeGeometry(node); group.name = `node_${node.id}`; // 存储元数据用于交互 group.userData = { nodeId: node.id, label: node.label }; scene.add(group); nodeObjects.set(node.id, group as any); } mesh = nodeObjects.get(node.id)!; mesh.position.set(...node.position); } } function createNodeGeometry(node: SceneUpdatePayload['nodes'][0]): THREE.Group { const group = new THREE.Group(); // 球体核心 const sphereGeom = new THREE.SphereGeometry(node.size || 0.3, 32, 32); const sphereMat = new THREE.MeshStandardMaterial({ color: new THREE.Color(node.color || '#4488ff'), metalness: 0.3, roughness: 0.4, emissive: new THREE.Color(node.color || '#4488ff'), emissiveIntensity: 0.3, }); const sphere = new THREE.Mesh(sphereGeom, sphereMat); group.add(sphere); // 外发光环 const ringGeom = new THREE.TorusGeometry((node.size || 0.3) * 1.5, 0.03, 16, 32); const ringMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(node.color || '#4488ff'), transparent: true, opacity: 0.5, }); const ring = new THREE.Mesh(ringGeom, ringMat); ring.rotation.x = Math.PI / 2; group.add(ring); return group; } function updateEdges(edges: SceneUpdatePayload['edges']) { // 清除旧边 edgeLines.forEach((line) => { scene.remove(line); line.geometry.dispose(); (line.material as THREE.Material).dispose(); }); edgeLines = []; // 创建新边 for (const edge of edges!) { const points = [ new THREE.Vector3(...edge.source), new THREE.Vector3(...edge.target), ]; const geom = new THREE.BufferGeometry().setFromPoints(points); const mat = new THREE.LineBasicMaterial({ color: new THREE.Color(edge.color || '#3366aa'), transparent: true, opacity: edge.animated ? 0.6 : 0.3, }); const line = new THREE.Line(geom, mat); line.name = 'edge'; scene.add(line); edgeLines.push(line); } } /** * 射线投射处理 * Worker中执行Raycaster计算，避免阻塞主线程 */ function performRaycast(x: number, y: number) { const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2( (x / renderer.domElement.width) * 2 - 1, -(y / renderer.domElement.height) * 2 + 1 ); raycaster.setFromCamera(mouse, camera); // 只检测节点对象 const nodeMeshes = Array.from(nodeObjects.values()); const intersects = raycaster.intersectObjects(nodeMeshes, true); if (intersects.length > 0) { // 向上查找userData（可能命中的是子mesh） let target: THREE.Object3D | null = intersects[0].object; while (target && !target.userData?.nodeId) { target = target.parent; } if (target?.userData) { postMessage({ type: 'INTERACTION', payload: { type: 'click', nodeId: target.userData.nodeId, label: target.userData.label, point: intersects[0].point.toArray(), }, }); } } } /** * 渲染循环 * 帧率控制：目标60fps，使用delta时间做平滑运动 */ function renderLoop() { if (!isRunning) return; renderRequestId = self.requestAnimationFrame(renderLoop); const delta = clock.getDelta(); // 限制delta防止跳帧导致物理模拟异常 const clampedDelta = Math.min(delta, 0.1); // 更新控制器 controls.update(); // 背景粒子旋转动画 const particles = scene.getObjectByName('backgroundParticles'); if (particles) { particles.rotation.y += 0.0001; } // 渲染 renderer.render(scene, camera); // FPS统计 frameCount++; const now = performance.now(); if (now - lastFpsTime >= 1000) { currentFps = frameCount; frameCount = 0; lastFpsTime = now; // 将渲染统计发回主线程（用于调试面板） postMessage({ type: 'RENDER_STATS', payload: { fps: currentFps, drawCalls: renderer.info.render.calls, triangles: renderer.info.render.triangles, geometries: renderer.info.memory.geometries, }, }); } } // === 主消息处理循环 === self.onmessage = (event: MessageEvent<WorkerMessage>) => { const msg = event.data; switch (msg.type) { case 'INIT': init(msg.payload); break; case 'UPDATE_SCENE': updateScene(msg.payload); break; case 'CAMERA_TRANSFORM': { const { position, target } = msg.payload; camera.position.set(...position); controls.target.set(...target); controls.update(); break; } case 'RAYCAST': performRaycast(msg.payload.x, msg.payload.y); break; case 'RESIZE': if (renderer && camera) { renderer.setSize(msg.payload.width, msg.payload.height, false); camera.aspect = msg.payload.width / msg.payload.height; camera.updateProjectionMatrix(); } break; case 'STOP': isRunning = false; self.cancelAnimationFrame(renderRequestId); // 清理资源 renderer.dispose(); break; } };3.2 主线程的 Worker 管理器
// RenderWorkerManager.ts /** * 渲染Worker管理器 * 负责Worker生命周期管理、通信、和Canvas绑定 */ export class RenderWorkerManager { private worker: Worker | null = null; private canvas: HTMLCanvasElement; private offscreen: OffscreenCanvas | null = null; private isInitialized = false; // 挂起的请求计数器：用于批量更新 private pendingUpdates: SceneUpdatePayload | null = null; private updateTimer: ReturnType<typeof setTimeout> | null = null; // 批处理间隔：在50ms内的多次更新合并为一次 private readonly BATCH_INTERVAL_MS = 50; // 回调 private onInteraction?: (event: any) => void; private onStats?: (stats: any) => void; constructor(canvas: HTMLCanvasElement) { this.canvas = canvas; } /** * 初始化Worker渲染引擎 */ async initialize(): Promise<void> { // 创建OffscreenCanvas // 使用ImageBitmap模式：Worker渲染到OffscreenCanvas，主线程drawImage到DOM Canvas this.offscreen = this.canvas.transferControlToOffscreen(); // 创建Worker // 生产环境使用new URL确保打包工具正确处理Worker文件 this.worker = new Worker( new URL('../workers/render-worker.ts', import.meta.url), { type: 'module' } ); // 设置消息监听 this.worker.onmessage = (event) => { this.handleWorkerMessage(event.data); }; this.worker.onerror = (error) => { console.error('[RenderWorker] Worker错误:', error); // 生产环境应触发Worker重启逻辑 }; // 发送初始化消息，传递OffscreenCanvas // transfer参数将OffscreenCanvas的控制权转移到Worker this.worker.postMessage( { type: 'INIT', payload: { canvas: this.offscreen, width: this.canvas.clientWidth, height: this.canvas.clientHeight, }, }, [this.offscreen] // transferable对象 ); // 等待初始化完成 await new Promise<void>((resolve) => { const handler = (event: MessageEvent) => { if (event.data.type === 'INIT_COMPLETE') { this.worker!.removeEventListener('message', handler); resolve(); } }; this.worker!.addEventListener('message', handler); }); this.isInitialized = true; // 开始渲染循环 this.worker.postMessage({ type: 'START' }); // 设置主线程Canvas的鼠标事件转发 this.setupEventForwarding(); // 启动主线程绘制循环（将ImageBitmap绘制到DOM Canvas） this.startDrawLoop(); } /** * 更新场景数据（批量合并） */ updateScene(payload: SceneUpdatePayload) { // 合并pending更新 this.pendingUpdates = this.mergePayloads(this.pendingUpdates, payload); // 防抖批处理 if (this.updateTimer) { clearTimeout(this.updateTimer); } this.updateTimer = setTimeout(() => { if (this.worker && this.pendingUpdates) { this.worker.postMessage({ type: 'UPDATE_SCENE', payload: this.pendingUpdates, }); this.pendingUpdates = null; } }, this.BATCH_INTERVAL_MS); } private mergePayloads( existing: SceneUpdatePayload | null, incoming: SceneUpdatePayload ): SceneUpdatePayload { if (!existing) return incoming; return { nodes: incoming.nodes || existing.nodes, edges: incoming.edges || existing.edges, }; } /** * 主线程绘制循环 * 将Worker渲染的ImageBitmap绘制到DOM Canvas上 */ private startDrawLoop() { const draw = () => { requestAnimationFrame(draw); // 注：在ImageBitmap模式下，实际实现中 // Worker通过transferToImageBitmap()将渲染结果传回 // 主线程通过createImageBitmap(offscreenCanvas)获取最新帧 // 此处展示整体流程，具体实现取决于使用的通信模式 }; requestAnimationFrame(draw); } /** * 设置主线程Canvas的鼠标事件转发 * Worker无法直接监听DOM事件，需要主线程转发 */ private setupEventForwarding() { // 记录交互状态 let isDragging = false; let lastMousePos = { x: 0, y: 0 }; this.canvas.addEventListener('mousedown', (e) => { isDragging = false; lastMousePos = { x: e.clientX, y: e.clientY }; }); this.canvas.addEventListener('mousemove', (e) => { if (e.buttons > 0) { isDragging = true; } }); this.canvas.addEventListener('mouseup', (e) => { if (!isDragging) { // 这是一次点击而非拖拽，转发给Worker做射线检测 this.worker?.postMessage({ type: 'RAYCAST', payload: { x: e.offsetX, y: e.offsetY, }, }); } }); // 滚轮缩放 this.canvas.addEventListener('wheel', (e) => { e.preventDefault(); // 滚轮事件通过controls处理，此处展示架构 // 实际实现中需要模拟OrbitControls的滚轮行为 // 可以通过发送CAMERA_ZOOM消息到Worker实现 }); } /** * 处理Worker回传的消息 */ private handleWorkerMessage(msg: any) { switch (msg.type) { case 'INTERACTION': this.onInteraction?.(msg.payload); break; case 'RENDER_STATS': this.onStats?.(msg.payload); break; // ... 其他消息类型 } } /** * 设置交互回调 */ setOnInteraction(callback: (event: any) => void) { this.onInteraction = callback; } setOnStats(callback: (stats: any) => void) { this.onStats = callback; } /** * 资源清理 */ dispose() { this.worker?.postMessage({ type: 'STOP' }); this.worker?.terminate(); this.worker = null; this.isInitialized = false; } }3.3 React 集成组件
// components/Web3Graph3D.tsx import React, { useRef, useEffect, useCallback } from 'react'; import { RenderWorkerManager } from '../RenderWorkerManager'; interface Web3Graph3DProps { nodes: Array<{ id: string; position: [number, number, number]; color?: string; label?: string; }>; edges: Array<{ source: [number, number, number]; target: [number, number, number]; }>; onNodeClick?: (nodeId: string) => void; } /** * Web3 3D图谱组件 * 封装Worker渲染管理器的React组件 */ export const Web3Graph3D: React.FC<Web3Graph3DProps> = ({ nodes, edges, onNodeClick, }) => { const canvasRef = useRef<HTMLCanvasElement>(null); const workerRef = useRef<RenderWorkerManager | null>(null); useEffect(() => { if (!canvasRef.current) return; const manager = new RenderWorkerManager(canvasRef.current); workerRef.current = manager; manager.setOnInteraction((event) => { if (event.type === 'click' && event.nodeId) { onNodeClick?.(event.nodeId); } }); manager.initialize().catch(console.error); return () => { manager.dispose(); }; }, []); // 场景数据更新（自动批量合并） useEffect(() => { workerRef.current?.updateScene({ nodes, edges }); }, [nodes, edges]); return ( <canvas ref={canvasRef} style={{ width: '100%', height: '100%', display: 'block' }} /> ); };四、边界分析
OffscreenCanvas 的浏览器兼容性
OffscreenCanvas 在 Chrome 69+ 和 Edge 79+ 上完全支持，但 Firefox 仅支持不带willReadFrequently的 2D 上下文，不支持 WebGL 的 OffscreenCanvas。Safari 16.4+ 开始支持。对于不支持的浏览器，需要降级到主线程渲染模式。使用特性检测实现优雅降级：
const supportsOffscreenCanvas = typeof OffscreenCanvas !== 'undefined' && (() => { try { const c = new OffscreenCanvas(1, 1); const gl = c.getContext('webgl2'); return gl !== null; } catch { return false; } })();内存管理
Worker 中的 Three.js 场景持有大量 GPU 资源（几何体、纹理、着色器程序）。当场景数据更新时，旧的几何体和材质需要通过.dispose()显式释放，否则 GPU 内存会持续增长直至导致上下文丢失。在频繁更新场景的 Web3 可视化中，内存泄漏是最隐蔽的性能杀手。建议使用 WebGL Inspector 或 Chrome DevTools 的 GPU 内存分析工具定期检查。
消息序列化开销
大规模场景更新（如包含 5000+ 节点的图谱）的postMessage序列化本身就可能花费 50-100ms。对于这种场景，应使用增量更新而非全量替换。只传递变化的节点和边，Worker 端维护场景状态的完整副本。更进一步，可以使用 SharedArrayBuffer 实现零拷贝通信——主线程和 Worker 共享内存区域，避免序列化开销。
Touch 事件在移动端的适配
OrbitControls 在 Worker 中运行，但触摸事件（pinch、rotate、pan）由主线程捕获。需要设计一套完整的触摸事件转发协议，包括多点触摸的开始/移动/结束事件的坐标映射和手势识别。移动端 Web3 DApp 的用户占比正在增加，触控支持的缺失会显著降低产品的可访问性。
五、总结
OffscreenCanvas + Three.js Worker 线程渲染方案解决了 Web3 3D 可视化中的核心瓶颈：渲染计算与用户交互的线程分离。将 Three.js 的整个渲染管线——从几何更新、矩阵计算、到 WebGL 绘制调用——全部迁移到 Worker 线程，主线程释放出来专门处理 DOM 事件、数据接收和 UI 交互，实现了在生产环境中稳定 60fps 的复杂场景渲染。
这个方案的本质是用消息传递替代函数调用。传统单线程架构中，scene.add(mesh)是一次同步函数调用；在 Worker 架构中，这是postMessage({ type: 'UPDATE_SCENE', payload })的异步消息。通信的开销（序列化 + 事件循环调度）通常为 1-5ms，而释放出的主线程时间远超过这个开销——这就是并行架构的价值所在。
最后，这套架构并非只为 Web3 可视化场景设计。任何需要在浏览器中渲染大规模动态 3D 场景的应用——地理信息系统、数字孪生、3D 数据大屏——都可以从 OffscreenCanvas 的线程分离中获益。将渲染视为一个独立的后台服务，这正是现代浏览器图形编程的演进方向。
