技能介绍

解决什么问题

浏览器中的 2D/3D 图形渲染看似直接，实际常踩坑：Canvas 不会自动适配 CSS 尺寸与 DPI，导致模糊或拉伸；requestAnimationFrame 动画循环若缺少暂停与清理，会持续占用 GPU 与主线程；Three.js 的 geometry、material、texture 未显式调用 dispose() 会引发显存泄漏；WebGL2 着色器迁移时 GLSL 版本、入口函数或纹理 API 不匹配，可能只留下控制台错误而白屏。此外，Canvas/WebGL 内容对屏幕阅读器不可见，键盘操作与替代语义常被忽略。

技能如何工作

渲染层决策：标准 UI 用 DOM；简单 2D 图形、签名或粒子选 Canvas 2D；3D 模型、空间交互与复杂粒子用 Three.js/WebGL；React 声明式 3D 场景用 React Three Fiber。
容器适配：为渲染容器定义稳定尺寸、DPI 适配与 resize 行为，确保 CSS 尺寸、绘图尺寸与相机/viewport 同步。
动画循环：使用 requestAnimationFrame，不可见或无变化时暂停，卸载时取消。
资源释放：Three.js 必须释放 geometry、material、texture、renderer，移除事件监听与 observer。
Shader/WebGL 路由：先识别 SDF、ray marching、noise、particle、post-processing、multipass 或调试问题，再决定使用原生 WebGL2、Three.js ShaderMaterial 或 R3F。
WebGL2 适配：检查 GLSL 版本、入口函数、varying/in-out、纹理 API、uniform 使用与函数声明顺序。
可访问性：不可访问的图形内容提供 aria-label、替代文本或 DOM 版摘要，交互式图形要有键盘兜底。

适用边界与注意点

Canvas/WebGL 内容对屏幕阅读器不可见，必须提供替代语义；WebGL 消耗 GPU，低端设备需限制像素比、面数与纹理大小；Three.js 资源不会自动释放，遗漏 dispose() 会造成 GPU 内存泄漏；Canvas 响应式必须同步 CSS 尺寸、绘图尺寸与相机/viewport；复杂布局/路径规划可联用后台线程 workflow，但渲染本身仍在主线程/渲染线程协调；Shader 主循环、采样层数与多 pass 数量必须有预算，低端设备上要降低 DPR、步数、粒子数或禁用重后处理。交付前需确认 canvas 非空、尺寸正确、resize 后不拉伸、控制台无 shader compile/link 错误。最终目标是 2D/3D 场景清晰、响应式、可清理，关键设备上接近 60fps，用户能通过替代文本或键盘路径理解与操作核心内容。