fec-canvas-threejslisted

# Canvas 与 Three.js ## 用途 在浏览器中实现高性能 2D/3D 图形渲染。 ## 流程 1. 先选渲染层：标准 UI 用 DOM；简单 2D 图形/签名/粒子用 Canvas 2D；3D 模型、空间交互和复杂粒子用 Three.js/WebGL；React 项目中的声明式 3D 用 React Three Fiber。 2. 为渲染容器定义稳定尺寸、DPI 适配和 resize 行为；Canvas 不会自动随 CSS 清晰缩放。 3. 动画循环使用 `requestAnimationFrame`，不可见或无变化时暂停，卸载时取消。 4. Three.js 必须释放 geometry/material/texture/renderer，并移除事件监听和 observer。 5. Shader/WebGL 任务先识别是 SDF、ray marching、noise、particle、post-processing、multipass 还是调试问题，再决定是否需要原生 WebGL2、Three.js ShaderMaterial 或 R3F。 6. WebGL2 适配时检查 GLSL 版本、入口函数、varying/in-out、texture API、uniform 使用和函数声明顺序，避免白屏只留控制台错误。 7. 对不可访问的图形内容提供 `aria-label`、替代文本或 DOM 版摘要；交互式图形要有键盘兜底。 ## 核心模式 ```ts const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; ctx.scale(dpr, dpr); ``` ```ts let animationId = 0; function animate() { animationId = requestAnimationFrame(animate); renderer.render(scene, camera); } return () => { cancelAnimationFrame(animationId); geometry.dispose(); material.dispose(); renderer.dispose(); }; ``` ## 详细参考 涉及 Canvas 2D 绘图、动画循环、Three.js 场景搭建、React Three Fiber、InstancedMesh 和性能清理时，加载 [references/rendering-patterns.md](references/rendering-patterns.md)。 涉及着色器路由、WebGL2 适配、GLSL 调试、多 pass 预算和视觉验证时，加载 [references/shader-webgl-patterns.md](references/shader-webgl-patterns.md)。 ## 约束 - Canvas/WebGL 内容对屏幕阅读器不可见，必须提供替代语义。 - WebGL 消耗 GPU，低端设备需限制像素比、面数和纹理大小。 - Three.js 资源不会自动释放，遗漏