Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.
by nssa.io1.0k installs47 stars
Design & media
Canvas Threejs
Try itUse when building or reviewing Canvas 2D, Three.js/WebGL, React Three Fiber, GLSL shaders, ShaderToy-to-WebGL adaptation, 2D/3D visualization, game rendering, animation loops, GPU resource cleanup, or rendering performance. Do not use for standard DOM UI, charts already covered by a chart library, o
What it does
1. 先选渲染层：标准 UI 用 DOM；简单 2D 图形/签名/粒子用 Canvas 2D；3D 模型、空间交互和复杂粒子用 Three.js/WebGL；React 项目中的声明式 3D 用 React Three Fiber。 2. 为渲染容器定义稳定尺寸、DPI 适配和 resize 行为；Canvas 不会自动随 CSS 清晰缩放。 3. 动画循环使用 ，不可见或无变化时暂停，卸载时取消。 4. Three.js 必须释放 geometry/material/texture/renderer，并移除事件监听和 observer。 5. Shader/WebGL 任务先识别是 SDF…
The skill document
Canvas 与 Three.js
Purpose
在浏览器中实现高性能 2D/3D 图形渲染。
Procedure
- 先选渲染层：标准 UI 用 DOM；简单 2D 图形/签名/粒子用 Canvas 2D；3D 模型、空间交互和复杂粒子用 Three.js/WebGL；React 项目中的声明式 3D 用 React Three Fiber。
- 为渲染容器定义稳定尺寸、DPI 适配和 resize 行为；Canvas 不会自动随 CSS 清晰缩放。
- 动画循环使用
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、texture API、uniform 使用和函数声明顺序，避免白屏只留控制台错误。
- 对不可访问的图形内容提供
aria-label、替代文本或 DOM 版摘要；交互式图形要有键盘兜底。
Core Patterns
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);
let animationId = 0;
function animate() {
animationId = requestAnimationFrame(animate);
renderer.render(scene, camera);
}
return () => {
cancelAnimationFrame(animationId);
geometry.dispose();
material.dispose();
renderer.dispose();
};
Detailed References
涉及 Canvas 2D 绘图、动画循环、Three.js 场景搭建、React Three Fiber、InstancedMesh 和性能清理时，加载 references/rendering-patterns.md。
涉及着色器路由、WebGL2 适配、GLSL 调试、多 pass 预算和视觉验证时，加载 references/shader-webgl-patterns.md。
Constraints
- Canvas/WebGL 内容对屏幕阅读器不可见，必须提供替代语义。
- WebGL 消耗 GPU，低端设备需限制像素比、面数和纹理大小。
- Three.js 资源不会自动释放，遗漏
dispose()会造成 GPU 内存泄漏。 - Canvas 响应式必须同步 CSS 尺寸、绘图尺寸和相机/viewport。
- 复杂布局/路径规划可联用后台线程 workflow，但渲染本身仍在主线程/渲染线程协调。
- Shader 主循环、采样层数和多 pass 数量必须有预算；低端设备上要降低 DPR、步数、粒子数或禁用重后处理。
- 交付前必须确认 canvas 非空、尺寸正确、resize 后不拉伸、控制台无 shader compile/link 错误。
Expected Output
2D/3D 场景清晰、响应式、可清理，关键设备上接近 60fps；用户能通过替代文本或键盘路径理解/操作核心内容。
Related skills
Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.
by Iván855 installs69 stars
Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.
by johnpatternai22 installs8 stars
Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.
by fly0pants4.3k installs296 stars
Write, debug, and tune Playwright specs with locator strategy, trace diagnosis, and CI-aware timeouts.
by ivangdavila1.3k installs130 stars
Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.
by Iván559 installs18 stars
More from bovinphang
Browse all skillsGenerate or edit diagrams, visual assets, and image workflows with reviewable PNG self-checks and bounded self-repair.
by bovinphang9 installs1 stars
Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI expo
by bovinphang5 installs
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or
by bovinphang8 installs
Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventio
by bovinphang10 installs1 stars
Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.
by bovinphang10 installs1 stars
Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chines
by bovinphang10 installs1 stars